优化监控视频

public/config.js

@@ -1,6 +1,6 @@
 window.g = {
     // 获取数据请求地址
-    // BASE_API: "https://test.lqkj.top//cmioc3-server",
-    BASE_API: "http://192.168.4.219:12397/ioc-server",
+    BASE_API: "https://test.lqkj.top//cmioc3-server",
+    // BASE_API: "http://192.168.4.219:12397/ioc-server",
     UE_IP: "http://192.168.4.159"
 };

src/components/right.vue

@@ -61,14 +61,14 @@
             </div>
 
             <div class="monitorContent">
-                <el-carousel class="monitor">
-                    <el-carousel-item v-for="(item, index) in carouselData" :key="index">
+                <el-carousel class="monitor" :interval="8000" @change="monitorchange">
+                    <el-carousel-item v-for="(item, index2) in carouselData" :key="index2">
                         <p style="margin-left: 12px; margin-bottom: 3px; font-size: 14px;">{{ item.activeMonitor.title }}</p>
-                        <div class="interactclass">
+                        <div class="interactclass" >
                             <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
                                 <span style="z-index: 99;">{{ item.title }}</span>
-                                <!-- <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item)"> -->
-                                <div v-if="item.src"  style="width: 100%;height: 100%;" @click="lookVideo(item)">
+                            
+                                <div v-if="item.src &&videoindex==index2"  style="width: 100%;height: 100%;" @click="lookVideo(item)">
                                     <div  class="vue3VideoPlay ">
                                         <vue3VideoPlay 
                                     
@@ -91,11 +91,8 @@
                         <div class="interactclass">
                             <div class="room" v-for="(item, index) in item.activeMonitor.array1" :key="index">
                                 <span  style="z-index: 99;">{{ item.title }}</span>
-                                <!-- <br>
-                                <div>
-                                    {{ item.src }}
-                                </div> -->
-                                <div style="width: 100%;height: 100%;" @click="lookVideo(item)">
+               
+                                <div v-if="item.src &&videoindex==index2"  style="width: 100%;height: 100%;" @click="lookVideo(item)">
                                     <div  class="vue3VideoPlay ">
                                         <vue3VideoPlay 
                                     
@@ -174,6 +171,15 @@ export default ({
         //视频播放弹框
         const videoDialog = ref(false)
 
+        //播放视频索引
+        const videoindex = ref(0)
+        const monitorchange = function (val) {
+            console.log('ssbadbuasd',val);
+           setTimeout(() => {
+            videoindex.value=val
+           }, 500);
+        }
+
         // const  videoshow = ref(true)
         const dialogTitle = ref("")
         // 播放视频
@@ -303,7 +309,9 @@ export default ({
             d2img,
             d3img,
             deviceImg,
-            dialogTitle
+            dialogTitle,
+            monitorchange,
+            videoindex
         }
     },
 })