zc

src/components/LabStats/videoStats.vue

@@ -5,8 +5,8 @@
     <div class="panel-title">实验室视频监控</div>
     <div class="video-content">
       <webRTC v-if="webRtcType" class="video-for-min-box"></webRTC>
-      <mpegts-video class="video-for-min-box" :videoProps="item" v-for="(item,index) in mpegtsList" :key="index"></mpegts-video>
-      <videoForMod class="video-for-min-box" v-for="(item,index) in modList" :key="index" :deviceNo="item.deviceNo"></videoForMod>
+      <mpegts-video class="video-for-min-box" :videoProps="item" v-for="(item,index) in mpegtsList" :key="'mpegts_'+index"></mpegts-video>
+      <videoForMod class="video-for-min-box" v-for="(item,index) in modList" :key="'video_'+index" :deviceNo="item.deviceNo"></videoForMod>
     </div>
   </div>
 </template>
@@ -84,6 +84,7 @@
                 }
               }
               this.$set(this,'modList',list);
+              console.log('modList',this.modList)
             }else{
               this.$set(this,'webRtcType',false);
               this.iotDeviceList();
@@ -177,19 +178,22 @@
       /*margin-top:5px;*/
       /*margin-left:10px;*/
     /*}*/
+    .video-for-min-box{
+      display: inline-block!important;
+      overflow: hidden!important;
+      border-radius:4px!important;
+    }
     .video-for-min-box:nth-child(1){
-      margin-right:10px;
+      margin:0 10px 0 0!important;
     }
     .video-for-min-box:nth-child(2){
 
     }
     .video-for-min-box:nth-child(3){
-      margin-top:10px;
-      margin-right:10px;
+      margin:10px 10px 0 0!important;
     }
     .video-for-min-box:nth-child(4){
-      margin-top:10px;
-      margin-right:10px;
+      margin:10px 0 0 0!important;
     }
   }
 </style>

src/components/videoForMod/videoForMod.vue

@@ -32,6 +32,7 @@
 
     },
     mounted() {
+    console.log('deviceNo',this.deviceNo)
       if(this.deviceNo){
         this.iotCameraGetPreviewURLs();
       }