样式调整

src/assets/css/home.scss

@@ -25,6 +25,10 @@
     overflow: hidden;
 }
 
+
+
+
+
 // 点击模型弹出框
 .modelInfo {
     position: absolute;
@@ -34,12 +38,70 @@
     backdrop-filter: blur(30.5px);
     z-index: 8;
 
-   
+    .model-detail2{
+            border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    height: 155px;
+    overflow: hidden;
+
+            .listbox2 {
+            width: 180px;
+            text-align: center;
+            height: 30px;
+            line-height: 30px;
+            font-size: 12px;
+            color: #fff;
+            background-color: rgba(255, 255, 255, 0.31);
+            font-size: 12px;
+            font-family: Microsoft YaHei UI;
+            font-weight: 700;
+       
+            .listtitlebox{
+             
+                
+                background-color: rgba(255, 255, 255, 0.18);
+                padding-bottom: 20px;
+            }
+
+        }
+  
+        .listtitle{
+           
+            width: 100%;
+            height: 30px;
+            display: flex;
+            align-items: center;
+
+            .name {
+                color: #fff;
+                margin-left: 5px;
+                font-weight: 700;
+                padding-left: 8px;
+                font-size: 12px;
+            }
+
+            .value {
+                font-size: 12px;
+                font-family: 400;
+                margin-left: 5px;
+                color: #ffffffeb;
+            }
+
+        }
+    }
+
+
     .model-detail {
         // background-color: #fff;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
         overflow: hidden;
+
+        .listbox {
+            background-color: rgba(142, 142, 142, 0.18);
+            padding-bottom: 8px;
+        }
+
         .list {
             width: 202px;
             text-align: center;
@@ -51,15 +113,31 @@
             font-size: 12px;
             font-family: Microsoft YaHei UI;
             font-weight: 700;
-    
+
 
         }
+
         .listtitle {
             width: 100%;
             height: 30px;
             display: flex;
             align-items: center;
-            background-color: rgba(142, 142, 142, 0.18);
+
+            .name {
+                color: #fff;
+                margin-left: 5px;
+                font-weight: 700;
+                padding-left: 8px;
+                font-size: 12px;
+            }
+
+            .value {
+                font-size: 12px;
+                font-family: 400;
+                margin-left: 5px;
+                color: #ffffffeb;
+            }
+
         }
 
     }

src/components/home.vue

@@ -11,21 +11,38 @@
 
         </el-container>
         <div ref="popoverRef" id="popoverRef" class="modelInfo" >
-            <div class="model-detail"  >
-                <div v-for="item in classDeviceInfo" >
+            <div v-if="orientation=='Left' ||orientation=='Right'" class="model-detail"  >
+                <div v-for="item in classDeviceInfo" class="listbox" >
                     
                     <div class="list">
                     {{ item[0].value }}
                     </div>
                     <div   v-for="item2 in item" class="listtitle">
                         
-                       <span style="color: #fff;margin-left: 5px; font-weight: 700;padding-left: 8px; "> {{ item2.name }} :</span>
-                       <span v-if="item2.value!='在线'" style=" font-family: 100; margin-left: 5px;color: #ffffffeb;">{{ item2.value }}</span>
+                       <span class="name"> {{ item2.name }} :</span>
+                       <span v-if="item2.value!='在线'" class="value">{{ item2.value }}</span>
                        <span v-else style=" font-family: 100; margin-left: 5px;color: #10C383;">{{ item2.value }}</span>
                     </div>
-                   
-      
+                </div>
+            </div>
+            <div v-else class="model-detail2"  >
+                <div style="display: flex;">
+                    <div v-for="item in classDeviceInfo" class="listbox2"  >
+                        
+                        <div class="list" style="text-align: center;width: 100%;">
+                        {{ item[0].value }}
+                        </div>
 
+                        <div class="listtitlebox">
+                            <div   v-for="item2 in item" class="listtitle">
+                        
+                        <span class="name"> {{ item2.name }} :</span>
+                        <span v-if="item2.value!='在线'" class="value">{{ item2.value }}</span>
+                        <span v-else style=" font-family: 100; margin-left: 5px;color: #10C383;">{{ item2.value }}</span>
+                     </div>
+                        </div>
+                        
+                    </div>
                 </div>
             </div>
         </div>
@@ -61,6 +78,7 @@ export default ({
     components: { Login, Left, Right, ElScrollbar, ElPagination, ElDialog, videoPlay, ElCarousel, ElCarouselItem, CircleProgress },
     setup() {
         const titleDialog = ref("")
+        const orientation = ref("")
         // 视频数据
         const videoData = reactive({
             width: "100%", //播放器高度
@@ -190,6 +208,11 @@ export default ({
                 return
             }
             clickData.value = json;
+
+
+            orientation.value=clickData.value.direction
+
+            console.log('看看这个',clickData.value.direction);
             if (json.deviceCode) {
                 console.log('sadasd',json.deviceCode);
                 let replacedStr = json.deviceCode.replace("/", "A");
@@ -225,7 +248,7 @@ export default ({
                             popoverRef.value.style.left = (json.x - 120) + 'px'
                             break;
                         case "Right":
-                            popoverRef.value.style.top = (Number(json.y)) -100+ 'px'
+                            popoverRef.value.style.top = (Number(json.y)) -150+ 'px'
                             popoverRef.value.style.left = Number(json.x) + 100 + 'px'
 
                             break;
@@ -295,7 +318,8 @@ export default ({
             classDeviceInfo,
             mouseClick,
             headImg,
-            titleDialog
+            titleDialog,
+            orientation
         }
     },
 })

src/components/right.vue

@@ -64,17 +64,16 @@
                     <el-carousel-item v-for="(item, index) in carouselData" :key="index">
                         <p style="margin-left: 12px; margin-bottom: 3px; font-size: 14px;">{{ item.activeMonitor.title }}</p>
                         <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  style="background-color: aquamarine;width: 100%;height: 100%;" @click="lookVideo(item)">
+                                <div v-if="item.src"  style="background-color: aquamarine;width: 100%;height: 100%;" @click="lookVideo(item)">
                                     <div  class="vue3VideoPlay ">
                                         <vue3VideoPlay 
                                     
                                     width="100%"
                                     height="9vh"
-                                    style="  object-fit: fill"
+                                    style=" object-fit: fill"
                                     :src="item.src"
                                     :type="videoData.type"
                                     :autoPlay="true"
@@ -152,7 +151,7 @@ export default ({
             muted: false, //静音
             webFullScreen: false,
             // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
-            autoPlay: false, //自动播放
+            autoPlay: true, //自动播放
             loop: false, //循环播放
             mirror: false, //镜像画面
             ligthOff: false, //关灯模式
@@ -179,7 +178,16 @@ export default ({
         const lookVideo = function (item) {
             videoDialog.value = true;
             dialogTitle.value = item.title
-            videoData.src = item.scr
+            let copysrc=JSON.parse(JSON.stringify(item))
+            console.log('sadi2',copysrc);
+            // videoData.src = item.scr
+            videoData.src = copysrc.src
+            console.log('kankna222', videoData.src);
+
+            
+         
+            console.log('kankna1',item[src]);
+            console.log('看看src===========',videoData.src);
             console.log("点击了播放视频", 12312312, "播放路径", item)
             // getVideoUrl({ "rtsp": item.src }).then((res) => {
             //     console.log("视频处理", res);
@@ -222,12 +230,11 @@ export default ({
             console.log('sadui12u31',category);
             //截取数组前6项
             interDevice.value = category.slice(0,6);
-            // 互动教室
-            carouselData.value = monitor
-
-            console.log('处理监控视频数据===',monitor);
-
-            monitor.map((res)=>{
+      
+             // 互动教室
+             carouselData.value = monitor.slice(0,1);
+      
+             carouselData.value.map((res)=>{
                 console.log('sadhi2',res.activeMonitor);
 
                 res.activeMonitor.array.map(array =>{
@@ -257,11 +264,9 @@ export default ({
 
             })
 
-            setTimeout(() => {
-                console.log('sado2');
-                // videoshow=true
-                // console.log('sadhui21',videoshow);
-            }, 3000);
+                 
+
+
 
                 setTimeout(() => {
                     console.log('处理后监控视频数据===',monitor);