实时视频流index页全局刷新改为provide+inject组合局部刷新·

src/views/realTimeMonitoring/index.vue

@@ -154,7 +154,7 @@ export default {
         // },
         showModel(item){
             console.log(11111)
-            this.player.destroy()
+            this.player= this.player.destroy()
             clearInterval(this.timer)
             console.log(item)
             this.visible = true
@@ -167,7 +167,7 @@ export default {
         closeModel(visible,data){
             this.visible = visible
             this.modelData=data
-        },
+        }
     },
     components:{
         Model

src/views/realTimeMonitoring/model.vue

@@ -73,30 +73,12 @@ export default {
             // console.log(newVal)
             if(newVal.id){
                 this.id = newVal.id
+                this.mdata = newVal
                 console.log(newVal)
-                // console.log('触发了watch，重新赋值')
+                console.log('触发了watch，重新赋值')
                 this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
                     console.log(newVal.rtsp)
-                    this.$api.httpApi.getChannel({
-                        data:{
-                            "sourceUrl":newVal.rtsp,
-                            "paramBefore": "-y -i",
-                            "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 1707*960 -b:v 1000k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
-                        }
-                    }).then(res => {
-                        console.log(res.data)
-                        var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
-                        var player = new JSMpeg.Player(url, {
-                            canvas: document.querySelector('.video-canvas'),
-                            audio: false,
-                            pauseWhenHidden: false,
-                            videoBufferSize: 8 * 1024 * 1024,
-                            loop:false,
-                        })
-                        player.play()
-                    }).catch(err => {
-
-                    })
+                    this.request(newVal)
                 })
             }
 
@@ -127,18 +109,59 @@ export default {
             leftDownUrl:require('@/assets/left-down-icon.png'),
             downUrl:require('@/assets/down-icon.png'),
             rightDownUrl:require('@/assets/right-down-icon.png'),
+            player:'',
         };
     },
-    mounted() {
-        console.log('mounted执行了')
-    },
+    // provide(){ //提供
+    //     return {
+    //         reload: this.reloadModel
+    //     }
+    // },
+    // inject: ['reload'],
+    // mounted() {
+    //     console.log('mounted执行了')
+    // },
     methods: {
-        pauseEvent(e){
-            if(e.stopPropagation) e.stopPropagation();
-            if(e.preventDefault) e.preventDefault();
-            e.cancelBubble=true;
-            e.returnValue=false;
-            return false;
+        // reloadModel(){
+        //     this.isRouter = false
+        //     this.$nextTick( function () {
+        //         this.isRouter = true
+        //         console.log(this.mdata)
+        //         this.player= this.player.destroy()
+        //         this.request(this.mdata)
+        //     })
+        // },
+        handleCancel() {
+            console.log('Clicked cancel button');
+            console.log(this.title);
+            location.reload();
+            const that=this
+            setTimeout(function () {
+                that.$emit('close',false,{})
+            },500)
+        },
+        request(data){
+            const that=this
+            this.$api.httpApi.getChannel({
+                data:{
+                    "sourceUrl":data.rtsp,
+                    "paramBefore": "-y -i",
+                    "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 1707*960 -b:v 1000k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
+                }
+            }).then(res => {
+                console.log(res.data)
+                var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
+                var player = new JSMpeg.Player(url, {
+                    canvas: document.querySelector('.video-canvas'),
+                    audio: false,
+                    pauseWhenHidden: false,
+                    videoBufferSize: 8 * 1024 * 1024,
+                    loop:false,
+                })
+                return that.player=player
+            }).catch(err => {
+
+            })
         },
         zoomDecStart(){
             console.log('变倍-按下')
@@ -451,15 +474,6 @@ export default {
 
             })
         },
-        handleCancel() {
-            console.log('Clicked cancel button');
-            console.log(this.title);
-            location.reload();
-            setTimeout(function () {
-                this.$emit('close',false,{})
-            })
-
-        },
     },
 };
 </script>