增加船舶运行动态操作

src/apis/yyjg.js

@@ -7,6 +7,14 @@ export function GetQygk() {
   })
 }
 
+export function GetBoatInfos(req) {
+    return request({
+        url: '/DigitalTwin/businessManage/loadManage',
+        method: "post",
+        data:req
+    })
+}
+
 export function GetYxdt() {
   return request({
       url: '/DigitalTwin/businessManage/GetTodayDeclareBoatCount',

src/assets/styles/common.scss

@@ -149,6 +149,61 @@
   }
 }
 
+
+// 弹框切换tab
+.dialog-tab-fang {
+  display: flex;
+  justify-content: center;
+  margin: 17px 0 17px;
+
+  & > div {
+    display: block;
+    width: 115px;
+    height: 30px;
+    margin: 0 5px;
+    background: url('@/assets/imgs/page_yyjg/boatClick-wei.png') no-repeat;
+    background-size: 100% 100%;
+    cursor: pointer;
+    text-align: center;
+
+    & > span {
+      font-family: YSBTH;
+      font-size: 16px;
+      line-height: 34px;
+      color: transparent;
+      background: linear-gradient(0deg, rgba(29, 128, 224, 0.9) 0%, rgba(255, 255, 255, 0.9) 70%);
+      -webkit-background-clip: text;
+
+    }
+  }
+  &>div.highlight {
+    position: relative;
+    width: 116px;
+    height: 34px;
+    background: url('@/assets/imgs/page_yyjg/boatClick-select.png') no-repeat;
+    background-size: 100% 100%;
+    &>span {
+      background: linear-gradient(0deg, rgba(224, 224, 29, 0.9) 0%, rgba(255,255,255,0.9) 70%);
+      -webkit-background-clip: text;
+    }
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      bottom: -10px;
+      left: calc(50% - 3px);
+      border-top: 7px solid transparent;
+      border-bottom: 7px solid rgba(93, 138, 196, 0.6);
+      border-left: 6px solid transparent;
+      border-right: 6px solid transparent;
+    }
+  }
+  &>div.disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+}
+
 .date-picker-custom1 {
   .el-input__wrapper {
     border-radius: 0;

src/utils/paginationMixin.js

@@ -0,0 +1,28 @@
+/**
+ * 分页
+ */
+export default {
+  data(){
+    return{
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+      pageSizes: [10, 20, 50, 100],
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      // debugger
+      this.pageSize = val
+      this.pageNum = 1
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.getList()
+    },
+    indexCreate(row, column, cellValue, index) {
+      return index + 1 + this.pageSize*(this.pageNum - 1)
+    }
+  }
+}

src/views/yyjg/Index.vue

@@ -7,6 +7,12 @@
       @closeUnitVedio="ue_closeUnitVedio"
       @onVideoShow="handleOnVideoShow"
     />
+    <BoatInfo v-if="boatInfoShow"
+    :boatTypeForClick="boatTypeForClick"
+     @closeBoatInfoYunXing="handleCloseBoatInfoYunXing"
+
+    />
+
     <danger-list v-if="dangerListShow" @close="dangerListShow=false"/>
     <div class="panel-left" :class="{'is-hide': aside_hide}">
       <div class="pl-b1">
@@ -126,7 +132,7 @@
           <div v-for="item in cataData_yxdt.data">
             <span>{{ item.value }}</span>
             <span>艘次</span>
-            <i></i>
+            <i @click="clickYunXingDongTaiDetial(item.fieldName)"></i>
             <div><i></i><span>{{ item.title }}</span></div>
           </div>
         </div>
@@ -162,6 +168,7 @@ export default {
   import { onMounted, reactive, nextTick, ref, computed, onBeforeUnmount, watch } from 'vue';
   import EntInfoList from './cpns/EntInfoList'
   import EntInfo from './cpns/EntInfo'
+  import BoatInfo from './cpns/BoatInfo'
   import { GetQygk, GetYxdt, GetZysb, GetZxjc, GetWggj, GetQylb, GetQywggj, GetCbwgyj } from '@/apis/yyjg'
   import WarningShipList from './cpns/WarningShipList.vue';
   import DangerList from './cpns/DangerList.vue'
@@ -222,7 +229,6 @@ export default {
   }
 
   const entInfoListShow = ref(false)
-
   function handleCloseEntList() {
     entInfoListShow.value=false
     if(!entInfoShow.value) {
@@ -238,6 +244,12 @@ export default {
       ue_closeUnitWiget()
     }
   }
+  function handleCloseBoatInfoYunXing() {
+    boatInfoShow.value=false
+    // if(!boatInfoShow.value) {
+    //   ue_closeUnitWiget()
+    // }
+  }
 
   function handleOnVideoShow() {
     setTimeout(() => {
@@ -264,6 +276,9 @@ export default {
 
   const currentEnt = reactive({value: {}})
 
+  const boatTypeForClick = reactive({type:""})
+
+
   function handlePickedEnt(ent) {
     // console.log(ent)
     entInfoShow.value = false
@@ -409,6 +424,12 @@ export default {
     })
   }
 
+  const boatInfoShow = ref(false)
+  function clickYunXingDongTaiDetial(name) {
+        boatTypeForClick.type=name;
+       boatInfoShow.value =!boatInfoShow.value
+  }
+
   const cataData_yxdt = reactive({data: [
     { title: '即将作业船舶数', fieldName: 'willWorkCount', value: 0 },
     { title: '作业完成船舶数', fieldName: 'finishWorkCount', value: 0 },

src/views/yyjg/cpns/BoatInfo.vue

@@ -0,0 +1,345 @@
+<template>
+    <div class="ent-info" :class="{'ent-info-expand':isExpand}">
+        <i class="ei-close" @click="handleClose"></i>
+        <div class="Tool-Header"><span class="title-dialog">船舶信息</span></div>
+        <div class="dialog-tab-fang">
+            <div :class="{'disabled': !tab_usable.willWorkCount, 'highlight': currentTab==='willWorkCount'}" @click="changeTab('willWorkCount')"><span>即将作业船舶</span></div>
+            <div :class="{'disabled': !tab_usable.workingCount, 'highlight': currentTab==='workingCount'}" @click="changeTab('workingCount')"><span>作业中船舶</span></div>
+            <div :class="{'disabled': !tab_usable.finishWorkCount, 'highlight': currentTab==='finishWorkCount'}" @click="changeTab('finishWorkCount')"><span>作业完成船舶</span></div>
+        </div>
+        <div class="tab-content" v-if="isExpand">
+            <div class="tab-table table-carousel" v-if="currentTab==='willWorkCount'">
+                <div v-if="tableData.value.length>0">
+                    <el-table :data="tableData.value" class="table-default dw-table"  stripe>
+                        <el-table-column label="船舶名称" prop="shipName" min-width="1" show-overflow-tooltip />
+                        <el-table-column label="船舶状态" prop="type" :formatter="typeRes" min-width="1" show-overflow-tooltip />
+                        <el-table-column label="靠泊时间" min-width="1" show-overflow-tooltip>
+                            <template #default="scope">
+                                <span>{{ scope.row.startWorkTime.slice(5,16) }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="离泊时间" min-width="1" show-overflow-tooltip>
+                            <template #default="scope">
+                                <span>{{ scope.row.endWorkTime.slice(5,16) }}</span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <el-pagination
+                            class="pagi-default"
+                            :current-page="currentPage"
+                            :page-size="pageSize"
+                            :total="total"
+                            layout="prev, pager, next"
+                            @size-change="handleSizeChange"
+                            @current-change="handleCurrentChange"
+                    >
+                    </el-pagination>
+                </div>
+                <div v-else class="no-data">
+                    <span>无数据</span>
+                </div>
+
+            </div>
+
+            <div class="tab-table table-carousel" v-if="currentTab==='workingCount'">
+                <div v-if="tableData.value.length>0">
+                    <el-table :data="tableData.value" class="table-default dw-table"  stripe>
+                        <el-table-column label="船舶名称" prop="shipName" min-width="100" show-overflow-tooltip />
+                        <el-table-column label="船舶状态" prop="type" :formatter="typeRes" min-width="90" show-overflow-tooltip />
+                        <el-table-column label="靠泊时间" min-width="100" show-overflow-tooltip>
+                            <template #default="scope">
+                                <span>{{ scope.row.startWorkTime.slice(5,16) }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="离泊时间" min-width="100" show-overflow-tooltip>
+                            <template #default="scope">
+                                <span>{{ scope.row.endWorkTime.slice(5,16) }}</span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <el-pagination
+                            class="pagi-default"
+                            :current-page="currentPage"
+                            :page-size="pageSize"
+                            :total="total"
+                            layout="prev, pager, next"
+                            @size-change="handleSizeChange"
+                            @current-change="handleCurrentChange"
+                    >
+                    </el-pagination>
+                </div>
+                <div v-else class="no-data">
+                    <span>无数据</span>
+                </div>
+
+            </div>
+
+            <div class="tab-table table-carousel" v-if="currentTab==='finishWorkCount'">
+                <div v-if="tableData.value.length>0">
+                <el-table :data="tableData.value" class="table-default dw-table"  stripe>
+                    <el-table-column label="船舶名称" prop="shipName" min-width="100" show-overflow-tooltip />
+                    <el-table-column label="船舶状态" prop="type" :formatter="typeRes" min-width="90" show-overflow-tooltip />
+                    <el-table-column label="靠泊时间" min-width="100" show-overflow-tooltip>
+                        <template #default="scope">
+                            <span>{{ scope.row.startWorkTime.slice(5,16) }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="离泊时间" min-width="100" show-overflow-tooltip>
+                        <template #default="scope">
+                            <span>{{ scope.row.endWorkTime.slice(5,16) }}</span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <el-pagination
+                        class="pagi-default"
+                        :current-page="currentPage"
+                        :page-size="pageSize"
+                        :total="total"
+                        layout="prev, pager, next"
+                        @size-change="handleSizeChange"
+                        @current-change="handleCurrentChange"
+                >
+                </el-pagination>
+                </div>
+                <div v-else class="no-data">
+                    <span>无数据</span>
+                </div>
+
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "BoatInfo",
+    }
+</script>
+<script  setup>
+
+    import {onBeforeMount, onMounted, ref, reactive, computed, nextTick,watch} from 'vue';
+    import { GetBoatInfos } from '@/apis/yyjg'
+    import { ElTable, ElTableColumn,ElPagination } from 'element-plus'
+    import 'element-plus/es/components/table/style/css'
+    import 'element-plus/es/components/table-column/style/css'
+    import 'element-plus/es/components/pagination/style/css'
+
+    const boatType=defineProps(['boatTypeForClick'])
+
+    const typeForName=[
+        {value:"willWorkCount",name:"即将作业",id:1},
+        {value:"workingCount",name:"作业中",id:2},
+        {value:"finishWorkCount",name:"作业完成",id:3}
+        ]
+
+    const currentTab = ref(null)
+    // const tableHeight = ref(50)
+
+    //当前类型
+    const currentType = ref(1)
+
+    const emit = defineEmits(['closeBoatInfoYunXing'])
+
+
+    function handleClose() {
+        emit('closeBoatInfoYunXing')
+    }
+
+    function changeTab(name) {
+        let ids= typeForName.find(i=>i.value==name).id
+        currentType.value=ids
+        getList({"type": ids,"pageSize":pageSize.value,"index":currentPage.value})
+    }
+
+    // 切换打开子列表
+    const isExpand = computed(() => {
+        return    typeForName.find(i=>i.value==currentTab.value)
+    })
+
+    // 分页信息
+    const currentPage = ref(1)
+    const pageSize = ref(10)
+    const total = ref(0)
+
+     function handleSizeChange(val) {
+         // debugger
+         pageSize.value = val
+         currentPage.value = 1
+         getList({"type": currentType.value,"pageSize":pageSize.value,"index":currentPage.value})
+
+     }
+
+    // 分页信息end
+    // 解析index
+    function  indexCreate(row, column, cellValue, index) {
+        return index + 1 + pageSize.value*(currentPage.value - 1)
+    }
+
+    // 解析船舶状态
+    function  typeRes(row, column, cellValue, index) {
+       return typeForName[cellValue-1].name;
+    }
+
+    const tab_usable = reactive({
+        willWorkCount: false,
+        finishWorkCount: false,
+        workingCount: false
+    })
+
+    // 内部调用切换数据
+    function   handleCurrentChange(val) {
+        currentPage.value = val
+        getList({"type": currentType.value,"pageSize":pageSize.value,"index":currentPage.value})
+    }
+
+    // 外部调用切换数据
+    onMounted(() => {
+            currentType.value= typeForName.filter(i=>i.value==boatType.boatTypeForClick.type)[0].id
+            getList({"type": currentType.value,"pageSize":pageSize.value,"index":currentPage.value})
+
+        // nextTick(()=>{
+        //     tableHeight.value=window.innerHeight-this.$refs.recordTable.$el.offsetTop-70
+        //     window.onresize=()=>{
+        //         tableHeight.value=window.innerHeight-this.$refs.recordTable.$el.offsetTop-70
+        //     }
+        // })
+   })
+
+    watch(()=>currentType.value, (n, o) => {
+        switch (n) {
+            case 1:
+                tab_usable.willWorkCount=true
+                tab_usable.finishWorkCount=false
+                tab_usable.workingCount=false
+                break;
+            case 2:
+                tab_usable.willWorkCount=false
+                tab_usable.workingCount=true
+                tab_usable.finishWorkCount=false
+                break;
+            case 3:
+                tab_usable.willWorkCount=false
+                tab_usable.finishWorkCount=true
+                tab_usable.workingCount=false
+                break;
+        }
+        currentTab.value= typeForName.filter(i=>i.id==n)[0].value
+    },{immediate:true})
+
+    const tableData = reactive({value: []})
+
+    function getList(req) {
+         req.type=currentType.value
+        GetBoatInfos(req).then(res=>{
+            if(res.data.length>0)
+            {
+                console.log(res.data)
+                res.data.forEach(i=>{
+                    i.type= req.type
+                })
+                tableData.value= res.data
+            }else {
+                tableData.value = []
+            }
+        })
+    }
+
+</script>
+
+
+<style  lang="scss" scoped>
+    .ent-info {
+        box-sizing: border-box;
+        position: absolute;
+        top: 16vh;
+        right: 55%;
+        width: 609px;
+        height: 231px;
+        padding: 0 25px 15px 15px;
+        background: url('@/assets/imgs/page_yyjg/cbxx-bg.png') no-repeat;
+        background-size: 100% 100%;
+        .Tool-Header{
+            padding-top: 20px;
+            height: 40px;
+            width: 50%;
+            text-align: left;
+            position: relative;
+            padding-left: 20px;
+            span{
+                font-size: 20px;
+            }
+        }
+        .ei-close {
+            position: absolute;
+            top: 8px;
+            right: 16px;
+            display: block;
+            width: 18px;
+            height: 18px;
+            background: url('@/assets/imgs/common/btn-close.png') no-repeat;
+            background-size: 12px 12px;
+            background-position: center;
+            cursor: pointer;
+        }
+
+        .ei-title {
+            margin-bottom: 15px;
+            font-weight: bold;
+            font-size: 16px;
+            line-height: 35px;
+            text-align: left;
+            font-style: italic;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+
+        .ei-info-addr {
+            height: 32px;
+            margin-bottom: 0;
+        }
+        .dialog-tab-fang{
+            div{
+                width: 30%;
+            }
+        }
+        .tab-content {
+            height: 370px;
+        }
+
+        &.ent-info-expand {
+            width: 609px;
+            height: 553px;
+
+        }
+        .el-table {
+            border-right: none !important; /*该样式在有滚动条时去掉右边的border，达到单一border效果*/
+        }
+        .tab-table{
+            height: 100%;
+            .dw-table{
+                width: 100%;
+                overscroll-behavior-x: none;
+                overscroll-behavior-y: none;
+                height: 350px;
+
+                .el-table__body-wrapper{
+                    width: 95%;
+                } .el-scrollbar{
+                                      width: 95%;
+                  overflow-x: hidden;
+                    overscroll-behavior-x: none;
+                    overscroll-behavior-y: none;
+                }
+          }
+        }
+        .pagi-default{
+            position: absolute;
+            bottom:5%;
+            left: 38%;
+        }
+    }
+
+</style>

src/views/yyjg/cpns/UnitJYXK.vue

@@ -0,0 +1,13 @@
+<template>
+    
+</template>
+
+<script>
+    export default {
+        name: "UnitJYXK"
+    }
+</script>
+
+<style scoped>
+
+</style>