提交视频监控

src/components/Dialog/mapDialog.vue

@@ -118,11 +118,13 @@
                     </div>
                   </div>
                   <div class="tabp-right-query-echarts" id='ebox' v-show="!showNodata" :style="{
-                    flex:'1',width: '900px',height: '460px',zoom: `${1 / zooms}`, transform: `scale(${zooms})`, transformOrigin: '0 0'}
-                    ">
+        flex: '1', width: '900px', height: '460px', zoom: `${1 / zooms}`, transform: `scale(${zooms})`, transformOrigin: '0 0'
+      }
+        ">
                     <div id="query-echarts" :style="{
-                        width: '100%',
-                        height: '100%',}">
+        width: '100%',
+        height: '100%',
+      }">
                     </div>
                   </div>
                   <div v-show="showNodata" style="width: 100%; height: 310px; text-align: center">
@@ -155,13 +157,6 @@
       }}</li>
                   </ul>
                 </a-collapse-panel>
-                <!-- <a-collapse-panel key="2" header="监控布置图" :style="activeMenu.customStyle">
-                    <ul class="collapse-ul">
-                      <li>图片1</li>
-                      <li>图片2</li>
-                      <li class="active">图片3</li>
-                    </ul>
-                  </a-collapse-panel> -->
                 <img v-if="imgtree.length == 0" style="width: 160px; margin: 0 auto;" lass="none-data"
                   src="../../assets/images/weatheHome/none-data.png" />
               </a-collapse>
@@ -186,7 +181,7 @@
                   <div><img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" /></div>
                   <div><img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" /></div> -->
               </a-carousel>
-              <img v-if="imgtree.length == 0" style="width: 300px; margin: 0 auto;" lass="none-data"
+              <img v-if="imgList.length == 0" style="width: 300px; margin: 0 auto;" lass="none-data"
                 src="../../assets/images/weatheHome/none-data.png" />
               <div v-if="imgList.length != 0" class="carousel-title">
                 <div style="margin-right: 50px;">{{ imgname }}</div>
@@ -199,20 +194,51 @@
           <template #tab>
             <span> 视频监控 </span>
           </template>
-          <div>
-            <div class="tabp-conetnt">
-              <div class="tabp-conetnt-left">
-                <ul class="collapse-video-ul">
-                  <!-- <li>视频监控名称1</li>
-                  <li>视频监控名称2</li>
-                  <li class="video-active">图片3</li> -->
-                  <img style="width: 160px; margin: 0 auto;" lass="none-data"
-                    src="../../assets/images/weatheHome/none-data.png" />
-                </ul>
-              </div>
-              <div class="tabp-conetnt-right">
-                <!-- <img style="width: 100%" class="carousel-img" src="../../assets/images/weatheHome/test-img.png" /> -->
-                <img class="none-data" src="../../assets/images/weatheHome/none-data.png" />
+          <div class="tabp-conetnt">
+            <div class="tabp-conetnt-left">
+              <a-collapse v-model:activeKey="activeMenu.activeKey" :bordered="false">
+                <template #expandIcon="{ isActive }">
+                  <img class="left-collapse-icon"
+                    :style="{ transform: `rotate(${isActive ? '0' : '-90'}deg)`, marginTop: '-12px' }"
+                    src="../../assets/images/weatheHome/icon-bottom.png" />
+                </template>
+                <a-collapse-panel :key="index + 1" v-for="(item, key, index) in videoTree" :header="key"
+                  :style="activeMenu.customStyle">
+                  <ul class="collapse-ul">
+                    <li v-for="(it, index2) in item" :key="item.id" @click="setTabColor4(it, index, index2)">{{
+        it.img_name
+      }}</li>
+                  </ul>
+                </a-collapse-panel>
+                <img v-if="videoTree.length == 0" style="width: 160px; margin: 0 auto;" lass="none-data"
+                  src="../../assets/images/weatheHome/none-data.png" />
+              </a-collapse>
+            </div>
+            <div class="tabp-conetnt-right">
+              <a-carousel arrows style="width:100%;position: absolute;top:0;" :beforeChange="setcolorV" ref="varousel">
+                <template #prevArrow>
+                  <div class="custom-slick-arrow" style="z-index: 9999; left: -30px">
+                    <left-circle-outlined />
+                  </div>
+                </template>
+                <template #nextArrow>
+                  <div class="custom-slick-arrow" style="right: -30px">
+                    <right-circle-outlined />
+                  </div>
+                </template>
+                <div v-for="(item, index) in videoList"><img class="carousel-img" :src="VITE_GLOB_BASE_IMG + item.img_url"
+                    :key="index + 1" /></div>
+                <!-- <div>
+                    <img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" />
+                  </div>
+                  <div><img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" /></div>
+                  <div><img class="carousel-img" src="../../assets/images/weatheHome/test-img.png" /></div> -->
+              </a-carousel>
+              <img v-if="videoList.length == 0" style="width: 300px; margin: 0 auto;" lass="none-data"
+                src="../../assets/images/weatheHome/none-data.png" />
+              <div v-if="videoList.length != 0" class="carousel-title">
+                <div style="margin-right: 50px;">{{ imgname1 }}</div>
+                <div>{{ imgindex1 }} / {{ videoList.length }}</div>
               </div>
             </div>
           </div>
@@ -238,11 +264,11 @@ const { VITE_GLOB_BASE_IMG } = getAppEnvConfig()
 let zooms = ref('')
 eventBus.on('progressHeight', (e) => {
   if (e > 1000 && e < 1200) {
-    setBox(1,e)
+    setBox(1, e)
   } else if (e > 1200) {
-    setBox(2,e)
+    setBox(2, e)
   } else {
-    setBox(3,e)
+    setBox(3, e)
   }
   zooms.value = document.getElementsByClassName("ant-modal")[0].style.zoom
   chart.dispose();
@@ -252,21 +278,21 @@ eventBus.on('progressHeight', (e) => {
   }, 400)
 
 });
-const setBox = (type,e) => {
+const setBox = (type, e) => {
   // alert(e)
-  if(props.detailInfo.st_type == 6){
-    $('#ebox').css({ height: '440px',width:'1000px' })
-    if(type == 3 && e == `calc(100% - 500px)`){
-      $('#ebox').css({ height: '440px',width:'1650px' })
-    }else{
-      $('#ebox').css({ height: '440px',width:'1000px' })
+  if (props.detailInfo.st_type == 6) {
+    $('#ebox').css({ height: '440px', width: '1000px' })
+    if (type == 3 && e == `calc(100% - 500px)`) {
+      $('#ebox').css({ height: '440px', width: '1650px' })
+    } else {
+      $('#ebox').css({ height: '440px', width: '1000px' })
     }
-  }else{
-    $('#ebox').css({ height: '440px',width:'1200px' })
-    if(type == 3 && e == `calc(100% - 500px)`){
-      $('#ebox').css({ height: '440px',width:'1900px' })
-    }else{
-      $('#ebox').css({ height: '440px',width:'1200px' })
+  } else {
+    $('#ebox').css({ height: '440px', width: '1200px' })
+    if (type == 3 && e == `calc(100% - 500px)`) {
+      $('#ebox').css({ height: '440px', width: '1900px' })
+    } else {
+      $('#ebox').css({ height: '440px', width: '1200px' })
     }
   }
 }
@@ -281,16 +307,24 @@ const dchar = ref();
 // 图片展示
 const imgList = ref([])
 const imgtree = ref({})
+const videoList = ref([])
+const videoTree = ref({})
 const imgname = ref('')
 const imgindex = ref(1)
+const imgname1 = ref('')
+const imgindex1 = ref(1)
 watch(
   () => props.detailInfo,
   (newV) => {
+    console.log(newV)
     senid.value = newV.sensor[0].senid;
     sensor_name.value = newV.sensor[0].sensor_name;
     dchar.value = newV.sensor[0].dchar;
     imgList.value = []
+    videoList.value = []
     imgtree.value = []
+    videoTree.value = []
+    // 图片
     if (newV.pic_annex.length > 0) {
       let arr = newV.pic_annex
       arr.forEach(i => {
@@ -311,6 +345,26 @@ watch(
       })
       imgtree.value = obj
     }
+    if (newV.video.length > 0) {
+      let arr = newV.video
+      arr.forEach(i => {
+        let arr = i.img_url.split('/')
+        i.type = arr[arr.length - 2]
+        i.img_name = arr[arr.length - 1]
+      })
+      videoList.value = arr
+      let obj = {}
+      arr.forEach((i, index) => {
+        i.id = index + 1
+        if (obj.hasOwnProperty(i.type)) {
+          obj[i.type].push(i);
+        } else {
+          obj[i.type] = [];
+          obj[i.type].push(i);
+        }
+      })
+      videoTree.value = obj
+    }
     if (newV.st_type == 6) {
       let obj = {};
       newV.sensor?.forEach((i) => {
@@ -402,11 +456,21 @@ const changeTab = () => {
 
 }
 const setcolor = (from, to) => {
-  $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
-  // console.log(imgList.value,2233)
+  console.log(from)
+  console.log(to)
+  // $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
+  // // console.log(imgList.value,2233)
   imgname.value = imgList.value[to].img_name
   imgindex.value = to + 1
 }
+const setcolorV = (from, to) => {
+  console.log(from)
+  console.log(to)
+  // $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
+  // // console.log(imgList.value,2233)
+  imgname1.value = videoList.value[to].img_name
+  imgindex1.value = to + 1
+}
 const setTabColor = (item, index) => {
   // console.log(item,87)
   senid.value = item.senid;
@@ -439,6 +503,13 @@ const setTabColor3 = (item, index, index2) => {
   // console.log(senid.value,sensor_name.value,dchar.value)
   varousel.value.goTo(item.id - 1)
 };
+const setTabColor4 = (item, index, index2) => {
+  imgname1.value = item.img_name
+  $(`.ant-collapse .ant-collapse-item li`).css({ background: 'transparent' });
+  $(`.ant-collapse .ant-collapse-item:nth-child(${index + 1}) li:nth-child(${index2 + 1})`).css({ background: 'rgba(0, 94, 182, 0.24)' });
+  // console.log(senid.value,sensor_name.value,dchar.value)
+  varousel.value.goTo(item.id - 1)
+};
 const handleChange = () => {
   searchTime.value = [];
   // console.log(value1.value)
@@ -660,9 +731,9 @@ function echarts1() {
           if (tableTitle.value.indexOf('水位') != -1) {
             return value.toFixed(2);
           } else if (tableTitle.value.indexOf('流量') != -1) {
-            if(value<100){
+            if (value < 100) {
               return value.toPrecision(3)
-            }else{
+            } else {
               return Number(value.toPrecision(3))
             }
           } else {