From c7785a3fe7df8670d28148b94970be64b633e3ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E9=91=AB?= <zhangxin@zhehekeji.com>
Date: Tue, 12 Jan 2021 15:54:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E8=A7=86=E9=A2=91=E6=B5=81?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=85=A8=E5=B1=8F=E6=96=B9=E5=BC=8F=E7=94=B1?=
 =?UTF-8?q?model=E7=BB=84=E4=BB=B6=E6=9B=B4=E4=B8=BA=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E5=BD=A2=E5=BC=8F=EF=BC=88=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?vlc=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/AsideMenu.vue              |   4 +-
 src/plugins/axios/axios.js             |   1 -
 src/router/index.js                    |  10 +++
 src/views/realTimeMonitoring/index.vue | 101 ++++++++---------------
 src/views/realTimeMonitoring/model.vue | 110 +++++++++++--------------
 5 files changed, 95 insertions(+), 131 deletions(-)

diff --git a/src/layouts/AsideMenu.vue b/src/layouts/AsideMenu.vue
index e79d86a..f2473b3 100644
--- a/src/layouts/AsideMenu.vue
+++ b/src/layouts/AsideMenu.vue
@@ -62,7 +62,7 @@ export default {
                 parents = this.$router.options.routes[0].children.filter(ele => {
                     if (
                         this.userInfo.permissionList.some(item => {
-                            return item.rights === ele.name && ele.name.indexOf("center") < 0 && item.rights === ele.name && ele.name.indexOf("ioTable") < 0;
+                            return item.rights === ele.name && ele.name.indexOf("center") < 0 && item.rights === ele.name && ele.name.indexOf("ioTable") < 0 && item.rights === ele.name && ele.name.indexOf("realTimeMonitoringModel") < 0;
                         })
                     ) {
                         return ele;
@@ -83,7 +83,7 @@ export default {
                 recursionRoute(parents);
             }else {
                 parents = this.$router.options.routes[0].children.filter(item => {
-                    return !item.name.startsWith("center") && !item.name.startsWith("ioTable");
+                    return !item.name.startsWith("center") && !item.name.startsWith("ioTable") && !item.name.startsWith("realTimeMonitoringModel");
                 });
             }
             this.routes = parents;
diff --git a/src/plugins/axios/axios.js b/src/plugins/axios/axios.js
index aa5d17f..a227f6a 100644
--- a/src/plugins/axios/axios.js
+++ b/src/plugins/axios/axios.js
@@ -13,7 +13,6 @@ window.once = 0
 instance.interceptors.request.use((config) => {
     const reqObj = config;
     // 在发送请求之前做些什么   -- 路径参数拼接
-    console.log('xxxxxxxxxx')
     console.log(reqObj)
     const reg = /\{(.+?)\}/g;
     if (reg.test(reqObj.url)) {
diff --git a/src/router/index.js b/src/router/index.js
index b8fb4c9..c500b71 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -38,6 +38,16 @@ const routes = [{
             },
             component: () => import('@/views/realTimeMonitoring/index'),
 
+        },
+        {
+            path: 'realTimeMonitoring/model',
+            name: 'realTimeMonitoringModel',
+            meta: {
+                icon: 'desktop',
+                name: '实时视频流(全屏)'
+            },
+            component: () => import('@/views/realTimeMonitoring/model'),
+
         },
         {
             path: 'historyMonitoring',
diff --git a/src/views/realTimeMonitoring/index.vue b/src/views/realTimeMonitoring/index.vue
index 7b9cd3e..3d915b2 100644
--- a/src/views/realTimeMonitoring/index.vue
+++ b/src/views/realTimeMonitoring/index.vue
@@ -19,7 +19,7 @@
                         <param name="windowless" value="true">
                         <param name='fullscreen' value='false'/>
                         <param name='mrl' :value='i.rtsp'/>
-                        <param name='autoplay' value='true'/>
+                        <param name='autoplay' value='yes'/>
                         <embed type="application/x-google-vlc-plugin"/>
                     </object>
                     <div class="video-name">
@@ -39,28 +39,22 @@
                 </div>
             </div>
         </div>
-
-        <Model
-            :visible.sync="visible"
-            :modelData.sync="modelData"
-            @close="closeModel"
-        />
     </div>
 </template>
 
 <script>
-import Model from "./model.vue"
+
 export default {
-    name: "realTimeMonitoring",
+    name: "historyMonitoring",
     data() {
         return {
-            realTimeListData:[],
-            url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
+            realTimeListData: [],
+            url: "722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
             tabKey: "0",
-            path:[],
-            player:"",
-            visible:false,
-            modelData:[],
+            path: [],
+            player: "",
+            visible: false,
+            modelData: [],
             vlcz: null
         };
     },
@@ -73,19 +67,13 @@ export default {
 
     },
     beforeRouteLeave(to,form,next) {
-        // if(this.vlcz){
-        //     var that = this
-        //     this.realTimeListData.forEach(function (item) {
-        //         console.log(item)
-        //         var $that = that
-        //         item.cameras.forEach(function (item) {
-        //             $that.vlcz.playlist.stop();
-        //         })
-        //         next(true)
-        //     })
-        // }else{
-        //     next(true)
-        // }
+        if (this.vlcz) {
+            this.vlcz.playlist.stop();
+            next(true)
+        } else {
+            next(true)
+        }
+        console.log('beforeRouteLeave')
     },
     methods: {
         getRealTimeList(){
@@ -96,55 +84,38 @@ export default {
                 console.log(res.data)
                 if(res.code == 200) {
                     this.realTimeListData = res.data
-                    // res.data.forEach(function (item) {
-                    //     // console.log(item.cameras)
-                    //     var $that = that
-                    //     item.cameras.forEach(function (item) {
-                    //         // console.log(item.rtsp)
-                    //         $that.playVideo('video'+item.id,item.rtsp)
-                    //     })
-                    // })
+                    res.data.forEach(function (item) {
+                        // console.log(item.cameras)
+                        var $that = that
+                        item.cameras.forEach(function (item) {
+                            // console.log(item.rtsp)
+                            $that.playVideo('video' + item.id, item.rtsp)
+                        })
+                    })
                 }
             }).catch(err => {
                 console.log(err)
             })
         },
-        // playVideo(id,rtsp){
-        //     // 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
-        //     this.$nextTick(() => {
-        //         var vlc = document.getElementById(`${id}`);
-        //         var options = new Array(":network-caching=100");//减少延迟
-        //         var vlcItem = vlc.playlist.add(`${rtsp}`, `${id}`, options);
-        //         // vlc.playlist.play()
-        //         vlc.playlist.playItem(vlcItem);
-        //         console.log('切换大屏前')
-        //     })
-        // },
+        playVideo(id, rtsp) {
+            // 设置url 播放 ---添加到事件队列在下一个tick执行，避免 TypeError: t.module.postMessage is not a function
+            this.$nextTick(() => {
+                var vlc = document.getElementById(`${id}`);
+                var options = new Array(":network-caching=100");//减少延迟
+                var vlcItem = vlc.playlist.add(`${rtsp}`, `${id}`, options);
+                // vlc.playlist.play()
+                vlc.playlist.playItem(vlcItem);
+                return this.vlcz = vlc
+            })
+        },
         tabsChange(key) {
             console.log(key)
         },
         showModel(item) {
             console.log(item)
-            this.visible = true
-            this.modelData = item
-            // this.vlcz.playlist.stop()
+            this.$router.push({name: "realTimeMonitoringModel", query: {modelData: item}});
         },
-        closeModel(visible, data) {
-            this.visible = visible
-            this.modelData = data
-            this.reload()
-            this.tabsChange()
-            console.log(this.realTimeListData)
-            console.log('切换大屏后')
-            // console.log(this.vlcz.playlist.currentItem)
-            // console.log(this.vlcz.playlist.isPlaying)
-            // this.vlcz.playlist.play()
-            // console.log(this.vlcz.playlist.isPlaying)
-        }
     },
-    components:{
-        Model
-    }
 };
 </script>
 
diff --git a/src/views/realTimeMonitoring/model.vue b/src/views/realTimeMonitoring/model.vue
index 7c7a262..29a2f98 100644
--- a/src/views/realTimeMonitoring/model.vue
+++ b/src/views/realTimeMonitoring/model.vue
@@ -1,5 +1,5 @@
 <template>
-   <div class="video-mask" v-if="isShow">
+   <div class="video-mask" :style="{width:w,height:h}">
        <object class="video-obj" id="video" type='application/x-vlc-plugin' events='True'
                width="100%" height="100%" pluginspage="http://www.videolan.org"
                codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
@@ -49,81 +49,54 @@
    </div>
 </template>
 <script>
-var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
-    labelCol: { span: 8 },    //lable长度
-    wrapperCol: { span: 14 },  //input长度
-};
-var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
-    labelCol: { span: 4 },
-    wrapperCol: { span: 8, offset: 4 },
-};
 export default {
-    props:[ 'visible', 'modelData'],
-    watch: {
-        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
-        visible: function(newVal){
-            this.isShow = newVal;  //newVal即是visible
-            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
-        },
-        modelData: function(newVal){
-            // console.log(newVal)
-            if(newVal.id){
-                this.id = newVal.id
-                this.mdata = newVal
-                console.log(newVal)
-                console.log('触发了watch，重新赋值')
-                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
-                    console.log(newVal.rtsp)
-                    this.getHdVideos(newVal.rtsp)
-                })
-            }
-
-        },
-    },
     data() {
         return {
-            // w:document.documentElement.offsetWidth || document.body.offsetWidth,
-            // h:document.documentElement.offsetHeight || document.body.offsetHeight,
-            isShow: false,
-            title: '',
-            closable: false,//取消model模态框右上角的X号
-            formItemAcrossLayout,
-            formItemVerticalLayout,
+            w: document.documentElement.offsetWidth || document.body.offsetWidth,
+            h: document.documentElement.offsetHeight || document.body.offsetHeight,
             confirmLoading: false,
-            form: this.$form.createForm(this, {name: 'dynamic_rule'}),
             id: '',
             mdata: [],
             zoomSubUrl: require('@/assets/sub-icon.png'),
-            zoomAddUrl:require('@/assets/add-icon.png'),
-            focusSubUrl:require('@/assets/sub-icon.png'),
-            focusAddUrl:require('@/assets/add-icon.png'),
-            irisSubUrl:require('@/assets/sub-icon.png'),
-            irisAddUrl:require('@/assets/add-icon.png'),
-            leftUpUrl:require('@/assets/left-up-icon.png'),
-            upUrl:require('@/assets/up-icon.png'),
-            rightUpUrl:require('@/assets/right-up-icon.png'),
-            leftUrl:require('@/assets/left-icon.png'),
-            rightUrl:require('@/assets/right-icon.png'),
-            leftDownUrl:require('@/assets/left-down-icon.png'),
-            downUrl:require('@/assets/down-icon.png'),
-            rightDownUrl:require('@/assets/right-down-icon.png'),
+            zoomAddUrl: require('@/assets/add-icon.png'),
+            focusSubUrl: require('@/assets/sub-icon.png'),
+            focusAddUrl: require('@/assets/add-icon.png'),
+            irisSubUrl: require('@/assets/sub-icon.png'),
+            irisAddUrl: require('@/assets/add-icon.png'),
+            leftUpUrl: require('@/assets/left-up-icon.png'),
+            upUrl: require('@/assets/up-icon.png'),
+            rightUpUrl: require('@/assets/right-up-icon.png'),
+            leftUrl: require('@/assets/left-icon.png'),
+            rightUrl: require('@/assets/right-icon.png'),
+            leftDownUrl: require('@/assets/left-down-icon.png'),
+            downUrl: require('@/assets/down-icon.png'),
+            rightDownUrl: require('@/assets/right-down-icon.png'),
+            vlcm: ""
         };
     },
+    mounted() {
+        this.mdata = this.$route.query.modelData
+        this.getHdVideos(this.$route.query.modelData.rtsp)
+    },
+    beforeRouteLeave(to, form, next) {
+        if (this.vlcm) {
+            this.vlcm.playlist.stop();
+            next(true)
+        } else {
+            next(true)
+        }
+    },
     methods: {
         handleCancel() {
-            console.log('Clicked cancel button');
-            // location.reload();
-            const that=this
-            setTimeout(function () {
-                that.$emit('close',false,{})
-            },500)
+            this.$router.go(-1);
         },
-        getHdVideos(rtsp){
+        getHdVideos(rtsp) {
             this.$nextTick(() => {
                 var vlc = document.getElementById('video');
                 var options = new Array(":network-caching=100");//减少延迟
                 var vlcItem = vlc.playlist.add(`${rtsp}`, "vedio", options);
                 vlc.playlist.playItem(vlcItem);
+                this.vlcm = vlc
             })
         },
         zoomDecStart(){
@@ -439,19 +412,30 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-    .video-mask{
-        position:fixed;
+    .wrap {
+        .table {
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            margin: 0;
+        }
+    }
+
+    .video-mask {
+        position: fixed;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         /*background-color: #001529;*/
-        z-index:1000;
+        z-index: 1000;
+
         #video {
             width: 100%;
             height: 100%;
         }
-        .video-close{
+
+        .video-close {
             position: absolute;
             right: 20px;
             top: 20px;