大屏场景部分页面调整

wj-data-vision/src/config/routes.js

@@ -15,5 +15,4 @@ export default [
     // component: (resolve) => require(['@/views/home/index'], resolve),
     component: (resolve) => require(['@/views/home/index'], resolve),
   },
-
 ]

wj-data-vision/src/views/mobileBaseStation/left/index.vue

 <template>
   <div class="home-left">
     <msg-card title="可移动智慧基站">
-      <div style="height: 100%; width: 100%; display: flex;flex-direction: column;justify-content: space-between">
+      <div style="height: 100%; width: 100%; display: flex;flex-direction: column;">
 
       <local-camera :border="true" ref="videoItemL" class="videoItem" v-for="(item,key) of [1,2]" :key="key" :video-data="`kydjz_${item}`"/>
       </div>
-        <!--      <w-map ref="mobileMap" map-id="mobile"/>-->
-      <!--      <camera-video class="video-mobile" :auto-play="true" :video-data="'http://192.168.2.80/live?app=demo&stream=car3d-1'"/>-->
     </msg-card>
   </div>
 </template>
@@ -241,7 +239,8 @@ export default {
   justify-content: space-between;
   .videoItem {
     width: 100%;
-    height: 49%;
+    aspect-ratio: 4/3;
+    margin-bottom: 20px;
     position: relative;
   }
 

wj-data-vision/src/views/mobileBaseStation/left/modelMap.vue

 <template>
   <div class="model_map">
-    <!--    <div id="modelMap" style="height: 100%; width: 100%"></div>-->
-    <!--    <w-map ref="modelMap" map-id="model_map"/>-->
     <model-map-c ref="modelMap" map-id="model_map"/>
   </div>
 </template>
@@ -81,10 +79,11 @@ export default {
 <style lang='less' scoped>
 .model_map {
   position: absolute;
-  left: 710px;
-  top: 80px;
-  height: 300px;
-  width: 200px;
+  left: 730px;
+  top: 90px;
+  height: 300PX;
+  width: 200PX;
   background-color: transparent;
+  pointer-events: none;
 }
 </style>
\ No newline at end of file

wj-data-vision/src/views/mobileBaseStation/right/index.vue

 <template>
   <div class="home-right">
     <msg-card title="可移动基站">
-      <div style="height: 100%; width: 100%; display: flex;flex-direction: column;justify-content: space-between">
+      <div style="height: 100%; width: 100%; display: flex;flex-direction: column;">
         <local-camera ref="videoItemR" :border="true" class="videoItem" v-for="(item,index) of [3,4]" :key="index" :video-data="`kydjz_${item}`"/>
       </div>
     </msg-card>
@@ -44,7 +44,8 @@ export default {
 <style lang='less' scoped>
 .videoItem {
   width: 100%;
-  height: 49%;
+  aspect-ratio: 4/3;
+  margin-bottom: 20px;
   position: relative;
 }
 

wj-data-vision/src/views/phaseAirPlay/left/index.vue

@@ -3,9 +3,7 @@
     <div class="topI">
       <msg-card title="路口现场监控">
         <div class="videos">
-<!--          <local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`xwkf_${item}`"/>-->
-          <local-camera ref="videoItem" class="videoItem" v-for="item of [3]" :video-data="`xwkf_${item}`"/>
-          <!--          <camera-video class="videoItem" :auto-play="true" v-for="item of cameras" :video-data="item.videoUrl"/>-->
+          <local-camera ref="videoItem" class="videoItem" v-for="(item,index) of [3]" :key="index" :video-data="`xwkf_${item}`"/>
           <span class="top-left"></span>
           <span class="top-right"></span>
           <span class="bottom-left"></span>
@@ -16,15 +14,7 @@
     <div class="bottomI">
       <msg-card class="m-b-10" title="相位监测">
         <div class="messages">
-<!--          <div class="message-title">-->
-<!--            &lt;!&ndash;            <span>检测时间段：{{ content.timeBetween }}</span>&ndash;&gt;-->
-<!--            &lt;!&ndash;            <span>是否有空放：{{ content.ifPhase ? '是' : '否' }}</span>&ndash;&gt;-->
-<!--            <div class="option">检测时间段：<span>{{ content.timeBetween }}</span></div>-->
-<!--            <div class="option">是否有空放：<span>{{ content.ifPhase ? '是' : '否' }}</span></div>-->
-<!--          </div>-->
           <div class="message-title">
-            <!--            <span>检测时间段：{{ content.timeBetween }}</span>-->
-            <!--            <span>是否有空放：{{ content.ifPhase ? '是' : '否' }}</span>-->
             检测时间段：<span>{{ content.timeBetween }}</span>
           </div>
           <div class="message-title">
@@ -61,12 +51,6 @@ export default {
     };
   },
   mounted() {
-
-    // 1事故场景 2相位空放 3直左冲突 4慢行交通 5危险驾驶
-    // getCameraListByType({type: 2}).then(res => {
-    //   console.log('cameraList', res)
-    //   this.cameras = res.content
-    // })
   },
   methods: {
     startVideo(time) {
@@ -232,10 +216,8 @@ export default {
   padding: 15px 25px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
 
   .topI {
-    height: 385px;
     margin-bottom: 15px;
 
     .videos {
@@ -245,18 +227,16 @@ export default {
       align-items: stretch;
       position: relative;
       flex-flow: row wrap;
-      height: 100%;
 
       .videoItem {
+        aspect-ratio: 4/3;
         width: 100%;
-        height: 100%;
         position: relative;
       }
     }
   }
 
   .bottomI {
-    flex: 1;
 
     .messages {
       font-size: 18px;
@@ -267,17 +247,13 @@ export default {
       justify-content: space-around;
 
       .message-title {
+        margin-bottom: 28px;
         display: flex;
         justify-content: space-between;
 
         .option {
           width: 50%;
           display: flex;
-
-          //span {
-          //  display: inline-block;
-          //  width: 60%;
-          //}
         }
 
         span {
@@ -290,15 +266,15 @@ export default {
       }
 
       .message-describe {
-        display: flex;
 
         .label {
           width: 100px;
         }
 
         .value-image {
-          width: 491px;
-          height: 373px;
+          margin-top: 28px;
+          width: 100%;
+          height: 437px;
           background-image: url("../../../assets/images/sc/kf.png");
           background-size: 100% 100%;
           border: 1px solid #0d7fd7;

wj-data-vision/src/views/slowTraffic/left/index.vue

@@ -3,9 +3,7 @@
     <div class="topI">
       <msg-card title="慢行交通现场监控">
         <div class="videos">
-<!--          <local-camera ref="videoItem" class="videoItem" v-for="item of 4" :video-data="`mxjt_${item}`"/>-->
-          <local-camera ref="videoItem" class="videoItem" v-for="item of [1]" :video-data="`mxjt_${item}`"/>
-          <!--          <camera-video :auto-play="true" class="videoItem" v-for="item of cameras" :video-data="item.videoUrl"/>-->
+          <local-camera ref="videoItem" class="videoItem" v-for="(item,index) of [1]" :key="index" :video-data="`mxjt_${item}`"/>
           <span class="top-left"></span>
           <span class="top-right"></span>
           <span class="bottom-left"></span>
@@ -16,7 +14,7 @@
     <div class="bottomI">
       <msg-card class="m-b-10" title="慢行交通报警">
         <div class="cardInner">
-          <div class="optionItem" v-for="item of dangerOptions">
+          <div class="optionItem" v-for="(item,index) of dangerOptions" :key="index">
             <div class="leftIcon" :class="`danger${item.type}`"></div>
             <div class="rightDetail">
               <div class="rightInner">
@@ -249,10 +247,9 @@ export default {
   padding: 15px 25px;
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
 
   .topI {
-    height: 385px;
+    height: auto;
     margin-bottom: 15px;
 
     .videos {
@@ -262,11 +259,10 @@ export default {
       align-items: stretch;
       position: relative;
       flex-flow: row wrap;
-      height: 100%;
 
       .videoItem {
         width: 100%;
-        height: 100%;
+        aspect-ratio: 4/3;
         position: relative;
       }
     }

wj-data-vision/src/views/slowTraffic/right/index.vue

@@ -10,7 +10,6 @@
           <el-table-column
             align="center"
             prop="time"
-            width="270"
             label="日期时间">
           </el-table-column>
           <el-table-column
@@ -34,7 +33,6 @@
           <el-table-column
             align="center"
             prop="time"
-            width="270"
             label="日期时间">
           </el-table-column>
           <el-table-column
@@ -143,10 +141,6 @@ export default {
   margin: 0
 }
 
-::v-deep .msg-card-content {
-
-}
-
 .top-left {
   position: absolute;
   left: -1px;
@@ -250,7 +244,7 @@ export default {
 }
 
 ::v-deep .el-table tbody tr:hover > td {
-  background-color: transparent;
+  background-color: transparent !important;
 }
 
 ::v-deep .el-table__body tr.current-row > td {