实时视频流增加计时器执行刷新操作，球机编辑渲染字段逻辑更改

src/views/realTimeMonitoring/index.vue

@@ -42,6 +42,7 @@
                 </div>
             </div>
         </div>
+<!--        <h1 style="color: #40a9ff">{{num}}</h1>-->
 <!--        <canvas class="video-cav" width="480" height="270"></canvas>-->
         <Model
             :visible.sync="visible"
@@ -66,16 +67,20 @@ export default {
             path:[],
             player:'',
             visible:false,
-            modelData:[]
+            modelData:[],
+            timer:'',
+            num:240
         };
     },
     mounted() {
         this.getRealTimeList()
-        this.getVideos()
+        // this.getVideos()
+        this.timerFn()
     },
     destroyed(){
         console.log('2222222')
-        this.player.destroy()
+        // this.player.destroy()
+        clearInterval(this.timer)
     },
     methods: {
         // 展开收起
@@ -124,20 +129,32 @@ export default {
 
             });
         },
-        getVideos(){
-            // var canvas = document.querySelector('.video-cav')
-            // var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+this.url
-            // var player = new JSMpeg.Player(url, {
-            //     canvas: canvas,
-            //     audio: false,
-            //     pauseWhenHidden: false,
-            //     videoBufferSize: 8 * 1024 * 1024,
-            //     loop:false
-            // })
+        timerFn(){
+            const that=this
+            this.timer = setInterval(function () {
+                that.num = that.num-1;
+                console.log(that.num)
+                if(that.num == -1){
+                    location.reload();
+                    that.num = 240
+                }
+            },1000)
         },
+        // getVideos(){
+        //     var canvas = document.querySelector('.video-cav')
+        //     var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+this.url
+        //     var player = new JSMpeg.Player(url, {
+        //         canvas: canvas,
+        //         audio: false,
+        //         pauseWhenHidden: false,
+        //         videoBufferSize: 8 * 1024 * 1024,
+        //         loop:false
+        //     })
+        // },
         showModel(item){
             console.log(11111)
             this.player.destroy()
+            clearInterval(this.timer)
             console.log(item)
             this.visible = true
             this.modelData=item

src/views/roadwayManage/model.vue

@@ -137,32 +137,61 @@
                     </div>
                     <a-divider></a-divider>
                 </div>
-
-                <a-form-item label="球机1" :label-col="formItemVerticalLayout.labelCol">
-                    <a-select
-                        v-decorator="[
+                <div  v-if="cameraList.length>0">
+                    <a-form-item label="球机1" :label-col="formItemVerticalLayout.labelCol">
+                        <a-select
+                            v-decorator="[
                                'camera1Id',
                             ]"
-                        placeholder="选择球机"
-                        @dropdownVisibleChange="handleSelectCamera"
-                    >
-                        <a-select-option v-for="item in camera1Id" :key="item.id" :value="item.id">
-                            {{item.name}}
-                        </a-select-option>
-                    </a-select>
-                </a-form-item>
-                <a-form-item label="球机2" :label-col="formItemVerticalLayout.labelCol">
-                    <a-select
-                        v-decorator="[
+                            placeholder="选择球机"
+                            @dropdownVisibleChange="handleSelectCamera"
+                        >
+                            <a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
+                                {{item.name}}
+                            </a-select-option>
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item label="球机2" :label-col="formItemVerticalLayout.labelCol">
+                        <a-select
+                            v-decorator="[
                                'camera2Id',
                             ]"
-                        placeholder="选择球机"
-                    >
-                        <a-select-option v-for="item in camera1Id" :key="item.id" :value="item.id">
-                            {{item.name}}
-                        </a-select-option>
-                    </a-select>
-                </a-form-item>
+                            placeholder="选择球机"
+                        >
+                            <a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
+                                {{item.name}}
+                            </a-select-option>
+                        </a-select>
+                    </a-form-item>
+                </div>
+                <div v-else>
+                    <a-form-item label="球机1" :label-col="formItemVerticalLayout.labelCol">
+                        <a-select
+                            v-decorator="[
+                               'camera1Name',
+                            ]"
+                            placeholder="选择球机"
+                            @dropdownVisibleChange="handleSelectCamera"
+                        >
+                            <a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
+                                {{item.name}}
+                            </a-select-option>
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item label="球机2" :label-col="formItemVerticalLayout.labelCol">
+                        <a-select
+                            v-decorator="[
+                               'camera2Name',
+                            ]"
+                            placeholder="选择球机"
+                        >
+                            <a-select-option v-for="item in cameraList" :key="item.id" :value="item.id">
+                                {{item.name}}
+                            </a-select-option>
+                        </a-select>
+                    </a-form-item>
+                </div>
+
             </a-form>
         </a-modal>
     </div>
@@ -188,7 +217,7 @@ export default {
             this.title = newVal;
         },
         modelData: function(newVal){
-            // console.log(newVal)
+            console.log(newVal)
             if(newVal.id){
                 this.mdata=newVal
                 this.leftType=newVal.leftType
@@ -212,7 +241,9 @@ export default {
                         rightInsideShelveId:newVal.rightInsideShelveId,
                         rightOutsideShelveId:newVal.rightOutsideShelveId,
                         camera1Id:newVal.camera1Id,
-                        camera2Id:newVal.camera2Id
+                        camera2Id:newVal.camera2Id,
+                        camera1Name:newVal.camera1Name,
+                        camera2Name:newVal.camera2Name
                     })
                 })
             }
@@ -231,7 +262,7 @@ export default {
             leftType:'',
             rightType:'',
             id:'',
-            camera1Id:[],
+            cameraList:[],
             mdata:[]
         };
     },
@@ -321,7 +352,7 @@ export default {
                     pageSize:0,
                 }
             }).then(res => {
-                this.camera1Id = res.data.list;
+                this.cameraList = res.data.list;
             }).catch(err => {
 
             });