监控修改

package.json

@@ -11,6 +11,7 @@
     "core-js": "^3.8.3",
     "echarts": "^5.4.3",
     "element-ui": "^2.15.14",
+    "ezuikit-js": "^7.7.7",
     "flv.js": "^1.6.2",
     "video.js": "^7.21.5",
     "videojs-contrib-hls": "^5.15.0",

src/assets/css/main.css

@@ -1564,26 +1564,27 @@
 .realTime .page-content .realTime-list .seamless-warp .list-view {
   flex-shrink: 0;
   display: flex;
-  flex-direction: column;
   align-items: center;
   margin-right: 20px;
 }
 
 .realTime .page-content .realTime-list .seamless-warp .list-view img {
-  width: 80px;
+  width: 60px;
-  height: 80px;
+  height: 60px;
 }
 
 .realTime .page-content .realTime-list .seamless-warp .list-view .text {
+  text-align: center;
   margin: 5px 0;
+  font-size: 14px;
 }
 
 .realTime .page-content .realTime-list .seamless-warp .list-view .number {
-  width: 106px;
+  width: 80px;
-  height: 40px;
+  height: 30px;
   background: url(../image/real-time-text.png) no-repeat center;
   background-size: 100% 100%;
-  font-size: 20px;
+  font-size: 16px;
   font-family: Arial;
   font-weight: bold;
   color: #FFFFFF;
@@ -1599,7 +1600,7 @@
 }
 
 .realTime .page-content .realTime-bottom {
-  height: 440px;
+  height: 300px;
   margin-top: 30px;
 }
 
@@ -1607,8 +1608,8 @@
   flex-shrink: 0;
 }
 
-.realTime .page-content .realTime-bottom .left {
+.realTime .page-content .realTime-bottom .left-view {
-  width: 43%;
+  width: 35%;
   height: 100%;
   background: rgba(0, 132, 255, 0.15);
   border: 2px solid rgba(0, 186, 255, 0.35);
@@ -1618,18 +1619,18 @@
   padding: 10px;
 }
 
-.realTime .page-content .realTime-bottom .left > div {
+.realTime .page-content .realTime-bottom .left-view > div {
   width: 100%;
   height: 100%;
 }
 
-.realTime .page-content .realTime-bottom .left > div .video-js {
+.realTime .page-content .realTime-bottom .left-view > div .video-js {
   width: 100%;
   height: 100%;
 }
 
 .realTime .page-content .realTime-bottom .right {
-  width: calc(100% - 43%);
+  width: calc(100% - 35%);
   min-width: 230px;
   height: 100%;
 }

src/assets/css/main.scss

@@ -1647,26 +1647,28 @@
                 .list-view {
                     flex-shrink: 0;
                     display: flex;
-                    flex-direction: column;
+                    // flex-direction: column;
                     align-items: center;
                     margin-right: 20px;
 
                     img {
-                        width: 80px;
+                        width: 60px;
-                        height: 80px;
+                        height: 60px;
 
                     }
 
                     .text {
+                        text-align: center;
                         margin: 5px 0;
+                        font-size: 14px;
                     }
 
                     .number {
-                        width: 106px;
+                        width: 80px;
-                        height: 40px;
+                        height: 30px;
                         background: url(../image/real-time-text.png) no-repeat center;
                         background-size: 100% 100%;
-                        font-size: 20px;
+                        font-size: 16px;
                         font-family: Arial;
                         font-weight: bold;
                         color: #FFFFFF;
@@ -1689,15 +1691,15 @@
         }
 
         .realTime-bottom {
-            height: 440px;
+            height: 300px;
             margin-top: 30px;
 
             >div {
                 flex-shrink: 0;
             }
 
-            .left {
+            .left-view {
-                width: 43%;
+                width: 35%;
                 height: 100%;
                 background: rgba(0, 132, 255, 0.15);
                 border: 2px solid rgba(0, 186, 255, 0.35);
@@ -1718,7 +1720,7 @@
             }
 
             .right {
-                width: calc(100% - 43%);
+                width: calc(100% - 35%);
                 min-width: 230px;
                 height: 100%;
             }

src/views/index.vue

@@ -71,7 +71,10 @@ export default {
                 { name: '数据分析', router: '', index: 1, routerList: [''], img: require('../assets/image/header-img4.png') },
                 { name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
                 //systemManage systemManage
-                { name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') }],
+                { name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') },
+                { name: '大数据', router: '', routerList: [''], img: require('../assets/image/header-img8.png') }
+            ],
+                
             activeNames: [3],
             leftList: [
                 { name: '首页', img: require('../assets/image/index-icon.png'), list: [], router: 'realTime', isRouter: true, },

src/views/page/realTime.vue

@@ -44,16 +44,19 @@
                 <vue-seamless class="seamless-warp" :data="list" :class-option="defaultOption">
                     <div class="list-view" v-for="item, index in list " :key="index">
                         <img :src="item.img" alt="">
+                        <div>
                             <div class="text">{{ item.name }}</div>
                             <div class="number">{{ item.num }}</div>
                         </div>
+                    </div>
                 </vue-seamless>
 
             </div>
             <div class="flex-list realTime-bottom">
-                <div class="left">
+                <div class="left-view">
-                    <div class="monitor" id="monitor">
+                    <div ref="monitor" class="monitor" id="monitor">
-                        <video ref="videoPlayer" class="video-js"></video>
+                        <!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
+                        <div ref="videoPlayer" class="video-js" id="video-js"></div>
                     </div>
                 </div>
                 <div class="right" id="realTime-line"></div>
@@ -62,11 +65,13 @@
     </div>
 </template>
 <script>
+import EZUIKit from 'ezuikit-js';
 import { getnowtime } from '../../assets/js/nowTime'
 import { realTimeLine } from '@/assets/js/charts'
 import videojs from 'video.js';
 import video_zhCN from 'video.js/dist/lang/zh-CN.json'
 import vueSeamless from 'vue-seamless-scroll'
+
 export default {
     components: { vueSeamless },
     computed: {
@@ -115,7 +120,15 @@ export default {
             this.indexs = this.$route.query.index ? this.$route.query.index : store.equipmentIndex;
             this.deviceName = store.equipmentList[this.indexs - 1].deviceName
             setTimeout(() => {
+             
+                if(this.player){
+                    this.player.stop()
+                    that.player.destroy()
+                    that.player=null
+                }
                 that.dataInit();
+              
+              
             }, 0);
         },
     },
@@ -139,12 +152,33 @@ export default {
         const that = this;
         // 销毁播放器
         if (this.player) {
-            this.player.dispose();
+            // this.player.dispose();
+            this.player.stop()
+            this.player.destroy()
+            this.player=null
         }
         that.timer && clearInterval(that.timer)
         this.$bus.$off('refreshTime')
     },
     methods: {
+        createVideoNew() {
+            // 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: 'at.757ro68z1ur26g6f1ondfwl1cl1bivxy-4ckiflya3u-1192hd2-ucup11mjb',
+                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
+            })
+            console.log(this.player);
+        },
         createVideo() {
             // 创建视频播放器
             videojs.addLanguage('zh-CN', video_zhCN)
@@ -271,7 +305,7 @@ export default {
                             })
                         })
                     } else {
-                        this.$message.error(res.data.msg);
+                        // this.$message.error(res.data.msg);
                     }
                 });
                 var data1 = store.equipmentList[this.indexs - 1].deviceId
@@ -281,7 +315,7 @@ export default {
                         var chartsData = res.data.data
                         realTimeLine('realTime-line', chartsData)
                     } else {
-                        this.$message.error(res.data.msg);
+                        // this.$message.error(res.data.msg);
                     }
                 })
                 var nowDevice = store.equipmentList[this.indexs - 1]
@@ -295,12 +329,15 @@ export default {
                 //     cameraid: 'L18357958',
                 //     channelid: '1'
                 // }
+                if (!this.player) {
                       this.api.getGethls(data2).then(res => {
                     if (res.data.code == 200) {
                         this.url = res.data.msg
-                        this.createVideo()
+                        this.createVideoNew()
                     }
                 })
+                }
+           
             } else if (this.deviceName == 10) {
                 this.api.getControlRtdata(equipmentId).then((res) => {
                     if (res.data.code == 200) {
@@ -348,7 +385,7 @@ export default {
                             })
                         })
                     } else {
-                        this.$message.error(res.data.msg);
+                        // this.$message.error(res.data.msg);
                     }
                 });
                 this.api.getControlRtDatastation(formData).then(res => {
@@ -376,7 +413,7 @@ export default {
                         var chartsData = res.data.data
                         realTimeLine('realTime-line', chartsData)
                     } else {
-                        this.$message.error(res.data.msg);
+                        // this.$message.error(res.data.msg);
                     }
                 })
                 var nowDevice = store.equipmentList[this.indexs - 1]
@@ -390,14 +427,16 @@ export default {
                 //     cameraid: 'L18357958',
                 //     channelid: '1'
                 // }
+                if (!this.player) {
                     this.api.getGethls(data2).then(res => {
                         // console.log(res.data, 11);
                         if (res.data.code == 200) {
                             this.url = res.data.msg
-                        this.createVideo()
+                            this.createVideoNew()
                         }
                     })
                 }
+            }
 
         },
         getTime() {
@@ -411,4 +450,8 @@ export default {
 
 }
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+.video-js-select-quality-item {
+    color: rgba(0, 0, 0, 0.85) !important;
+}
+</style>