添加了视频监控

src/assets/css/main.css

@@ -1798,6 +1798,10 @@
   margin-top: 30px;
 }
 
+.realTime .page-content .realTime-bottom.videoMonitoring-monitor {
+  justify-content: space-between;
+}
+
 .realTime .page-content .realTime-bottom > div {
   flex-shrink: 0;
 }

src/assets/css/main.scss

@@ -1899,7 +1899,9 @@
         .realTime-bottom {
             height: 350px;
             margin-top: 30px;
-
+            &.videoMonitoring-monitor{
+                justify-content: space-between;
+            }
             >div {
                 flex-shrink: 0;
             }

src/router/index.js

@@ -46,6 +46,10 @@ const routes = [
       path: '/formula',
       name: 'formula',
       component: () => import('../views/page/formula.vue')
+    },{
+      path: '/videoMonitoring',
+      name: 'videoMonitoring',
+      component: () => import('../views/page/videoMonitoring.vue')
     },{
       path: '/irrigateSet',
       name: 'irrigateSet',

src/views/index.vue

@@ -64,7 +64,7 @@ export default {
                 // { name: '设定值参数', router: 'status', index: 1, routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet'], img: require('../assets/image/header-img0.png') },
                 { name: '设定值参数', router: 'status', index: 1, routerList: ['status','exitSettings', 'skylight','systemSet-con', 'fan', 'upload-con', 'sensorSet-con','alarmSettings', 'synthesis-con','waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval',"targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet",], img: require('../assets/image/header-img0.png') },
                 { name: '图库数据', router: '', routerList: [], img: require('../assets/image/header-img1.png') },
-                { name: '视频监控', router: '', routerList: [], img: require('../assets/image/header-img2.png') },
+                { name: '视频监控', router: 'videoMonitoring', routerList: ['videoMonitoring'], img: require('../assets/image/header-img2.png') },
                 //  history history
                 { name: '历史数据', router: '', index: 1, routerList: [''], img: require('../assets/image/header-img3.png') },
                 //dataAnalysis dataAnalysis
@@ -79,9 +79,9 @@ export default {
             activeNames: [3],
             leftList: [
                 { name: '首页', img: require('../assets/image/index-icon.png'), list: [], router: 'realTime', isRouter: true, },
-                { name: '温室', routerList: ['realTime','exitSettings', 'skylight', 'control','systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'synthesis-con','alarmSettings', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet"], img: require('../assets/image/left-img0.png'), list: [] },
+                { name: '温室', routerList: ['realTime','exitSettings','videoMonitoring', 'skylight', 'control','systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'synthesis-con','alarmSettings', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet"], img: require('../assets/image/left-img0.png'), list: [] },
                 // { name: '二号温室', img: require('../assets/image/left-img1.png'), list: [] },
-                { name: '施肥机', routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime', 'history', 'dataAnalysis'], img: require('../assets/image/left-img2.png'), list: [] },
+                { name: '施肥机', routerList: ['formula', 'irrigateSet','videoMonitoring', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime', 'history', 'dataAnalysis'], img: require('../assets/image/left-img2.png'), list: [] },
                 { name: '生态气象站', routerList: ['realTime','exitSettings', 'skylight', 'control','systemSet-con', 'fan', 'upload-con', 'sensorSet-con', 'synthesis-con','alarmSettings', 'waterPump', 'geothermalFan', 'uptake', 'downtake', 'rollByRoll', 'snowRemoval', "targetTemperature", "targetHumidity", "targetCo2", "sunroofControl", "outsizeSunshade", "insizeSunshade", "wetFan", "LED", 'electromagneticControl', "coercionMist", "circulationCan", "internalInsulation", "forceOutput", "intrinsicParameter", "parameterSet"], img: require('../assets/image/left-img3.png'), list: [] },
             ],
                 
@@ -291,7 +291,7 @@ export default {
                 } else if (item.router == 'dataAnalysis' && this.$route.query.index != item.index) {
                     this.$router.push({ path: `/dataAnalysis?index=${item.index ? item.index : 1}` })
 
-                } else if (this.routerNow == 'realTime' && item.router == 'status' && (this.deviceName == '10'||this.deviceName == '30')) {
+                } else if (item.router == 'status' && (this.deviceName == '10'||this.deviceName == '30')) {
                     this.$router.push({ path: `/control` })
                 } else if (item.router == 'realTime') {
 

src/views/page/videoMonitoring.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="formula realTime videoMonitoring">
+        <div class="page-content new-data">
+            <div class="table-title">
+                <img src="../../assets/image/real-time.png" alt="" />
+                {{deviceTypeName}}—视频监控<span class="outline" v-if="deviceState == 0">(设备离线)</span>
+            </div>
+            <div class="flex-list realTime-bottom videoMonitoring-monitor">
+                <div class="left-view" v-if="deviceName != 30">
+                    <div ref="monitor" class="monitor" id="monitor">
+                        <!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
+                        <div ref="videoPlayer" class="video-js" id="video-js"></div>
+                    </div>
+                   
+                </div>
+                <div></div>
+            </div>
+        </div>
+    </div>
+  </template>
+  <script>
+  import EZUIKit from 'ezuikit-js';
+  import videojs from 'video.js';
+import video_zhCN from 'video.js/dist/lang/zh-CN.json'
+  export default {
+    data(){
+        return {
+            deviceTypeName:'',
+            deviceName:'',
+            deviceState:1,
+            statusInterval: null,//status状态的Interval
+            player: null,
+            url: '',
+        }
+    },
+    watch: {
+        $route(newVal, oldVal) {
+            const that = this;
+            const store = this.$store.state
+            this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
+            this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
+            this.deviceName = store.equipmentList[this.indexs - 1].deviceName
+            this.deviceState = store.equipmentList[this.indexs - 1].deviceState
+            clearInterval(this.statusInterval) && this.statusInterval
+            setTimeout(() => {
+
+                if (this.player) {
+                    this.player.stop()
+                    that.player.destroy()
+                    that.player = null
+                }
+                that.dataInit();
+
+
+            }, 0);
+        },
+    },
+    beforeDestroy() {
+        const that = this;
+        // 销毁播放器
+        if (this.player) {
+            // this.player.dispose();
+            this.player.stop()
+            this.player.destroy()
+            this.player = null
+        }
+        clearInterval(this.statusInterval) && this.statusInterval
+    },
+    mounted(){
+        const that = this;
+        const store = this.$store.state
+        this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
+        this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
+        this.deviceName = store.equipmentList[this.indexs - 1].deviceName
+            this.deviceState = store.equipmentList[this.indexs - 1].deviceState
+    setTimeout(() => {
+        that.dataInit();
+    }, 0);
+        },
+    methods:{
+        createVideoNew(accessToken) {
+            // divW和divH是获取了父级宽高 使播放容器能铺满div
+            let divW = this.$refs.monitor.clientWidth
+            let divH = this.$refs.monitor.clientHeight
+            this.player = new EZUIKit.EZUIKitPlayer({
+                id: 'video-js', // 视频容器ID
+                accessToken: accessToken,
+                url: this.url,
+                // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
+                // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
+                template: 'security',
+                useHardDev: true,// 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
+                // plugin: ["talk"], // 加载插件，talk-对讲 非必填
+                width: divW,  // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
+                height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
+            })
+        },
+        dataInit(){
+            const store = this.$store.state
+            var nowDevice = store.equipmentList[this.indexs - 1]
+            var data2 = {
+                    cameraid: nowDevice.cameraSerialNumber,
+                    channelid: nowDevice.cameraChannelNumber
+                }
+            if (!this.player) {
+                    this.api.getGethls(data2).then(res => {
+                        // console.log(res.data, 11);
+                        if (res.data.code == 200) {
+                            this.url = res.data.data.ezopen
+                            this.createVideoNew(res.data.data.accesstoken)
+                        }
+                    })
+                }    
+        },
+    },
+  
+  }
+  </script>
+  <style lang="scss">
+  
+  </style>
+  
+