修改运营监管企业列表的详细信息增加多视频点查询列表

src/components/UeVideo.vue

@@ -21,8 +21,8 @@ export default {
 
     onMounted(()=>{
 
-      bus.emit('ueRec_BoatClick',{'mmsi':412374820})
-      bus.emit('click_Lundu',{name:'陆家浜轮渡站',nowLiu:500,xing:66,erlun:30,sanlun:20,yuzhi:20,yujing:'是'})
+      // bus.emit('ueRec_BoatClick',{'mmsi':412374820})
+      // bus.emit('click_Lundu',{name:'陆家浜轮渡站',nowLiu:500,xing:66,erlun:30,sanlun:20,yuzhi:20,yujing:'是'})
       // console.log('video.value', video.value);
 
       videoInstance = initLoad({

src/views/ssky/cpns/PuJiangUnitList.vue

@@ -2,7 +2,7 @@
   <div id="danger-wrapper">
     <span class="dialog-close" @click="handleClose"></span>
     <span class="title-dialog">浦江游览企业信息</span>
-    <el-table :data="tableData.value" class="table-default dw-table" stripe>
+    <el-table :data="tableData.value" class="table-default dw-table"  stripe>
       <el-table-column label="序号"  type="index" />
       <el-table-column label="企业名称" prop="unitName" min-width="160" show-overflow-tooltip />
       <el-table-column label="水路运输经营许可证号" prop="shipName" min-width="90" show-overflow-tooltip />
@@ -106,8 +106,12 @@ function handleClose() {
   }
 
   .dw-table {
-    height: calc(100% - 110px);
+    height: 100%;
     margin-bottom: 7px;
+    .el-table__body-wrapper::-webkit-scrollbar{
+      width: 0;
+      height: 0;
+    }
   }
 }
 </style>

src/views/yyjg/cpns/EntInfo.vue

@@ -17,6 +17,27 @@
       <div :class="{'disabled': !tab_usable.overGrade, 'highlight': currentTab==='overGrade'}" @click="changeTab('overGrade')"><span>超等级靠泊预警</span></div>
     </div>
     <div class="tab-content" v-if="isExpand">
+      <div class="tab-video table-carousel" v-if="currentTab==='vedio'">
+        <div  v-if="tableData_video.value.length>0" >
+          <ul v-for="item , index in tableData_video.value" >
+            <li ><span>0{{index+1}}</span><span>{{item.name}}</span><span @click="clickVideo(item.id)">查看</span></li>
+          </ul>
+          <el-pagination
+                  class="pagi-default"
+                  :current-page="currentPage"
+                  :page-size="pageSize"
+                  :total="total"
+                  layout="prev, pager, next"
+                  @current-change="handlePageChange"
+          >
+          </el-pagination>
+        </div>
+        <div v-else class="no-data">
+          <span>无数据</span>
+        </div>
+
+      </div>
+
       <div class="tab-goods table-carousel" v-if="currentTab==='goods'">
         <div class="head coloumn"><span>船舶名称</span><span>货物名称</span><span>起运港</span><span>目的港</span><span>申报数</span></div>
         <el-carousel
@@ -53,17 +74,16 @@ export default {
 
 <script setup>
   import { onMounted, reactive, ref, watch, computed } from 'vue'
-  import { GetQyxx, GetQysb } from '@/apis/yyjg'
-  import { ElCarousel, ElCarouselItem, ElTooltip } from 'element-plus'
-  import 'element-plus/es/components/carousel/style/css'
-  import 'element-plus/es/components/carousel-item/style/css'
-  import 'element-plus/es/components/tooltip/style/css'
+  import {GetQysb } from '@/apis/yyjg'
+  import { ElCarousel, ElCarouselItem, ElTooltip,ElPagination} from 'element-plus'
+  import 'element-plus/es/components/pagination/style/css'
+
   import { ueCallOpenUnitVideo } from '@/utils/UIInteractions'
 
   const props = defineProps(['ent-data'])
 
   const isExpand = computed(() => {
-    return (currentTab.value==='goods' || currentTab.value==='overGrade')
+    return (currentTab.value==='goods' || currentTab.value==='overGrade' || currentTab.value==='vedio')
   })
 
   const tab_usable = reactive({
@@ -83,18 +103,19 @@ export default {
   onMounted(() => {
     
   })
-
   watch(()=>props.entData, (n, o) => {
     if(n.objectId) {
       for(let key in entInfo) {
         entInfo[key] = '查询中...'
       }
-      GetQyxx(n.objectId).then(res => {
-        tab_usable.vedio = Boolean(res.data.Rows[0].cameraId)
-        for(let key in entInfo) {
-          entInfo[key] = res.data.Rows.length>0? res.data.Rows[0][key]: '无数据'
-        }
-      })
+      // GetQyxx(n.objectId).then(res => {
+      //   tab_usable.vedio = Boolean(res.data.Rows[0].cameraId)
+      //   for(let key in entInfo) {
+      //     entInfo[key] = res.data.Rows.length>0? res.data.Rows[0][key]: '无数据'
+      //   }
+      //
+      // })
+      tab_usable.vedio=true
     } else {
       for(let key in entInfo) {
         entInfo[key] = '无数据'
@@ -111,16 +132,19 @@ export default {
   function changeTab(name) {
     if(currentTab.value===name) {
       if(name==='vedio') {
+        // getQysb()
         // emit('closeUnitVedio')
+        // getQysb()
       }
-      currentTab.value = null
+      // currentTab.value = null
     } else if(tab_usable[name]) {
       if(name==='goods') {
-        getQysb()
+        // getQysb()
       }
       if(name==='vedio') {
-        openVideo(entInfo.cameraId)
-        emit('onVideoShow')
+        // openVideo(entInfo.cameraId)
+        // emit('onVideoShow')
+        // getQysb()
       }
       currentTab.value = name
     }
@@ -145,13 +169,29 @@ export default {
       }
     })
   }
-
+  const tableData_video = reactive({value:
+            [{name:"主厂区视频",id:"123123123"},{name:"主厂区视频",id:"123"},{name:"主厂区视频",id:"123"},{name:"主厂区视频",id:"123"},{name:"主厂区视频",id:"123"}]})
   const tableData_goods = reactive({value: []})
 
+  watch(tableData_video, (val) => {
+    // getData(val, pageSize.value, 1)
+  },{immediate:true})
+
   const tableData_goods_len = computed(() => {
     return Math.ceil(tableData_goods.value.length/3)
   })
 
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+  const total = ref(0)
+  function clickVideo(id) {
+    console.log(id);
+  }
+  function handlePageChange(val) {
+    currentPage.value = val
+    // getData(tableData_video.value, pageSize.value, val)
+  }
+
   function openVideo(code){
     // alert("openVideo")
     ueCallOpenUnitVideo(code)
@@ -162,14 +202,13 @@ export default {
 .ent-info {
   box-sizing: border-box;
   position: absolute;
-  top: 30vh;
+  top: 16vh;
   right: 40%;
-  width: 409px;
+  width: 609px;
   height: 231px;
   padding: 0 25px 15px 15px;
   background: url('@/assets/imgs/page_yyjg/bg-pop-ent1.png') no-repeat;
   background-size: 100% 100%;
-  
   .ei-close {
     position: absolute;
     top: 8px;
@@ -228,10 +267,10 @@ export default {
   }
 
   &.ent-info-expand {
-    width: 409px;
-    height: 403px;
-    background: url('@/assets/imgs/page_yyjg/bg-pop-ent2.png') no-repeat;
-    background-size: 100% 100%;
+    width: 609px;
+    height: 553px;
+    background: url('@/assets/imgs/page_yyjg/qysssp.png') no-repeat;
+    background-size: 100% 110%;
   }
 
   .tab-goods {
@@ -255,7 +294,63 @@ export default {
         width: 14%;
       }
     }
+    .tab-video{
+      padding-top: 7px;
+      height: 100%;
+      ul{
+
+      }
+    }
   }
+  .tab-video{
+     padding-top: 7px;
+    height: 100%;
+     ul {
+       height: 100%;
+       li {
+         padding-top: 7px;
+         padding-bottom: 10px;
+         padding-left: 10px;
+         text-align: left;
+         height:40px;
+         background: url('@/assets/imgs/header/tczsx.png') no-repeat;
+         background-position: bottom;
+         background-size: 90% 5px;
+         span:first-child{
+           padding-left: 20px;
+           line-height: 40px;
+           display: inline-block;
+         font-weight: bold;
+         color: #FFFFFF;
+           width: 5%;
+       }
+         span:not(:first-child,:last-child){
+           font-size: 14px;
+           line-height: 40px;
+           display: inline-block;
+           font-weight: bold;
+           color: #FFFFFF;
+         }
+         span:last-child{
+           margin-right: 20px;
+           margin-top: 5px;
+           font-size: 14px;
+           font-weight: bold;
+           color: #FFFFFF;
+           display: inline-block;
+           line-height: 35px;
+           float: right;
+           height: 80%;
+           font-style: oblique;
+           width:15%;
+           text-align:center;
+           background: #1A5482;
+           background-size: 100%;
+         }
+       }
+
+     }
+   }
 
 }