监控样式调整

src/assets/css/right.scss

@@ -244,7 +244,9 @@
 
             .interactclass {
                 display: flex;
-                justify-content: space-evenly;
+                justify-content: space-between;
+                width: 93.5%;
+                margin-left: 4.5%;
 
                 .room {
 

src/components/UeVideo.vue

@@ -1,7 +1,7 @@
 
 <template>
-  <div  ref="video" id="player"></div>
-  <!-- <div style="background-color: rgba(156, 167, 84, 0.667); width: 100vw;height: 100vh;position: absolute;" ></div> -->
+  <!-- <div  ref="video" id="player"></div> -->
+  <div style="background-color: rgba(156, 167, 84, 0.667); width: 100vw;height: 100vh;position: absolute;" ></div>
   <Login :class="loginShow ? '' : 'hidden'"></Login>
   <home></home>
   <!-- <div @click="toUE" style="position: absolute;top: 5%; left: 50%;background-color: darkcyan;z-index: 200">向UE发信息</div> -->

src/components/right.vue

@@ -67,12 +67,12 @@
                             <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="background-color: aquamarine;width: 100%;height: 100%;" @click="lookVideo(item)">
+                                <div v-if="item.src"  style="width: 100%;height: 100%;" @click="lookVideo(item)">
                                     <div  class="vue3VideoPlay ">
                                         <vue3VideoPlay 
                                     
                                     width="100%"
-                                    height="9vh"
+                                    height="8.8vh"
                                     style=" object-fit: fill"
                                     :src="item.src"
                                     :type="videoData.type"
@@ -94,7 +94,7 @@
                                 <div>
                                     {{ item.src }}
                                 </div> -->
-                                <div style="background-color: aquamarine;width: 100%;height: 100%;" @click="lookVideo(item)">
+                                <div style="width: 100%;height: 100%;" @click="lookVideo(item)">
                                     <div  class="vue3VideoPlay ">
                                         <vue3VideoPlay 
                                     
@@ -105,6 +105,7 @@
                                     :type="videoData.type"
                                     :autoPlay="true"
                                     :control="false"
+                                    :preload="meta"
                                    />
                                     </div>
                             
@@ -207,7 +208,31 @@ export default ({
         // 物联设备类型统计
         let interDevice = ref([])
         // 智慧教室
-        let carouselData = ref([])
+        let carouselData = ref([
+            {
+                activeMonitor:{
+    "array": [
+        {
+            "src": "http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8",
+            "title": "录播设备"
+        },
+       
+    ],
+    "title1": "010431",
+    "array1": [
+        {
+            "src": "http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8",
+            "title": "录播设备"
+        },
+        {
+            "src": "http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8",
+            "title": "录播设备"
+        }
+    ],
+    "title": "010429"
+}
+            }
+        ])
 
         //获取页面数据
         const getDeviceData = async () => {
@@ -231,47 +256,47 @@ export default ({
             //截取数组前6项
             interDevice.value = category.slice(0,6);
       
-             // 互动教室
-             carouselData.value = monitor.slice(0,1);
+            //  // 互动教室
+            //  carouselData.value = monitor;
       
-             carouselData.value.map((res)=>{
-                console.log('sadhi2',res.activeMonitor);
+            //  carouselData.value.map((res)=>{
+            //     console.log('sadhi2',res.activeMonitor);
 
-                res.activeMonitor.array.map(array =>{
+            //     res.activeMonitor.array.map(array =>{
               
-                    //视频转码
-                    getvideo({
-                    "rtsp": array.src,
-                    }).then((res)=>{
-                        console.log('sadnuq21',res.data);
-                        console.log('sadnuq2121',res.data.httpFlv);
-                         array.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
-                       // array.src=res.data.httpFlv
-                    })
+            //         //视频转码
+            //         getvideo({
+            //         "rtsp": array.src,
+            //         }).then((res)=>{
+            //             console.log('sadnuq21',res.data);
+            //             console.log('sadnuq2121',res.data.httpFlv);
+            //              array.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
+            //            // array.src=res.data.httpFlv
+            //         })
 
                     
-                })
-                res.activeMonitor.array1.map(array1 =>{
-                    console.log('asdui1231',array1);
-                       //视频转码
-                       getvideo({
-                    "rtsp": array1.src,
-                    }).then((res)=>{
-                        console.log('sadnuq212123s2',res.data);
-                         array1.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
-                       // array.src=res.data.httpFlv
-                    })
-                })
-
-
-            })
+            //     })
+            //     res.activeMonitor.array1.map(array1 =>{
+            //         console.log('asdui1231',array1);
+            //            //视频转码
+            //            getvideo({
+            //         "rtsp": array1.src,
+            //         }).then((res)=>{
+            //             console.log('sadnuq212123s2',res.data);
+            //              array1.src='http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
+            //            // array.src=res.data.httpFlv
+            //         })
+            //     })
+
+
+            // })
 
                  
 
 
 
                 setTimeout(() => {
-                    console.log('处理后监控视频数据===',monitor);
+                    console.log('处理后监控视频数据===',carouselData.value);
                 }, 2000);
 
             //物联设备统计