zc

src/components/H5PlayerVideo/H5PlayerVideo.vue

@@ -33,33 +33,63 @@
         let type = this.videoData.url.indexOf('wss') !== -1?1:0;
         this.initPlayer(this.videoData.url, 0,type)
       })
+      if(this.$parent.stopTime){
+        document.addEventListener('fullscreenchange', this.fullFunction);
+      }
+
     },
     methods: {
+      fullFunction(){
+        if (!document.fullscreenElement) {
+          // 执行退出全屏后的操作
+          if (this.fullScreenType){
+            this.$set(this,'fullScreenType',false);
+            if(this.$parent.outFullScreen){
+              this.$parent.outFullScreen();
+            }
+          }
+        }
+      },
       //全屏
       fullScreen() {
         let self = this;
-        this.myPlugin.JS_FullScreenDisplay(true).then(
-          (res) => {
-            console.info('JS_FullScreenDisplay success');
-            // do you want...
-          },
-          (err) => {
-            console.info('JS_FullScreenDisplay failed');
-            // do you want...
-          }
-        );
-        self.$set(self,'fullScreenType',true);
+        if(this.$parent.stopTime){
+          this.$parent.stopTime();
+          this.myPlugin.JS_FullScreenDisplay(true).then(
+            (res) => {
+              // console.info('JS_FullScreenDisplay success');
+              // do you want...
+            },
+            (err) => {
+              // console.info('JS_FullScreenDisplay failed');
+              // do you want...
+            }
+          );
+          self.$set(self,'fullScreenType',true);
+        }else{
+          this.myPlugin.JS_FullScreenDisplay(true).then(
+            (res) => {
+              // console.info('JS_FullScreenDisplay success');
+              // do you want...
+            },
+            (err) => {
+              // console.info('JS_FullScreenDisplay failed');
+              // do you want...
+            }
+          );
+          self.$set(self,'fullScreenType',true);
+        }
       },
       //退出全屏
       outFullScreen() {
         let self = this;
         this.myPlugin.JS_FullScreenDisplay(false).then(
           (res) => {
-            console.info('JS_FullScreenDisplay success');
+            // console.info('JS_FullScreenDisplay success');
             // do you want...
           },
           (err) => {
-            console.info('JS_FullScreenDisplay failed');
+            // console.info('JS_FullScreenDisplay failed');
             // do you want...
           }
         );
@@ -69,7 +99,7 @@
         this.myPlugin = new window.JSPlugin({
           szId: this.videoData.id, //需要英文字母开头，唯一性，必填
           szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
-          bSupporDoubleClickFull: true,//是否支持双击全屏，默认true
+          bSupporDoubleClickFull: false,//是否支持双击全屏，默认true
           openDebug: true,
           oStyle: {
             borderSelect: '#000'
@@ -131,11 +161,11 @@
           index //当前窗口下标
         ).then(
           () => {
-            console.info('JS_Play success')
+            // console.info('JS_Play success')
             // do you want...
           },
           (err) => {
-            console.info('JS_Play failed:', err)
+            // console.info('JS_Play failed:', err)
             // do you want...
           }
         )
@@ -151,13 +181,16 @@
         return randomString
       },
       videoOff() {
+        if(this.$parent.stopTime){
+          document.addEventListener('fullscreenchange', this.fullFunction);
+        }
         this.myPlugin.JS_StopRealPlayAll().then(
           () => {
-            console.info('JS_StopRealPlayAll success')
+            // console.info('JS_StopRealPlayAll success')
             // do you want...
           },
           (err) => {
-            console.info('JS_StopRealPlayAll failed')
+            // console.info('JS_StopRealPlayAll failed')
             // do you want...
           }
         )
@@ -191,7 +224,7 @@
       text-align: center;
       top: 0;
       right: 0;
-      z-index: 999;
+      z-index: 1;
       cursor: pointer;
     }
     .full-failed-button {
@@ -205,7 +238,7 @@
       text-align: center;
       bottom: 0;
       right: 0;
-      z-index: 999999;
+      z-index: 11;
       cursor: pointer;
     }
   }

src/components/checkSelectComponents.vue

@@ -77,7 +77,7 @@
 </script>
 <style scoped lang="scss">
   .checkSelectComponents {
-    z-index: 100;
+    z-index: 10;
     .check-select-box {
       width: 222px;
       height: 36px;

src/components/fullH5PlayerVideo/fullH5PlayerVideo.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="fullH5PlayerVideo">
+    <div style="height:100%;width:100%;" :id="videoData.id+'full'" :ref="videoData.id"></div>
+    <p class="full-failed-button" @click="outFullScreen"></p>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'fullH5PlayerVideo',
+    props: {
+      fullVideoProps: {}
+    },
+    data() {
+      return {
+        fullScreenType:false,
+        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
+        videoData: {},
+        //全屏相关
+        innerWidth:window.innerWidth,
+        innerHeight:window.innerHeight,
+      }
+    },
+    created() {
+      this.$set(this, 'videoData', {
+        id: 'video_' + this.generateRandomString(),
+        width: this.fullVideoProps.width ? this.fullVideoProps.width : 600,
+        height: this.fullVideoProps.height ? this.fullVideoProps.height : 338,
+        url: this.fullVideoProps.url
+      })
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.initH5Player(1)
+        let type = this.videoData.url.indexOf('wss') !== -1?1:0;
+        this.initPlayer(this.videoData.url, 0,type)
+      })
+    },
+    methods: {
+      //全屏
+      fullScreen() {
+        let self = this;
+        if(this.$parent.stopTime){
+          this.$parent.stopTime(JSON.parse(JSON.stringify(this.fullVideoProps)));
+        }else{
+          this.myPlugin.JS_FullScreenDisplay(true).then(
+            (res) => {
+              // console.info('JS_FullScreenDisplay success');
+              // do you want...
+            },
+            (err) => {
+              // console.info('JS_FullScreenDisplay failed');
+              // do you want...
+            }
+          );
+          self.$set(self,'fullScreenType',true);
+        }
+      },
+      //退出全屏
+      outFullScreen() {
+        this.$parent.outFullScreen();
+      },
+      initH5Player(split) {
+        this.myPlugin = new window.JSPlugin({
+          szId: this.videoData.id+'full', //需要英文字母开头，唯一性，必填
+          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
+          bSupporDoubleClickFull: false,//是否支持双击全屏，默认true
+          openDebug: true,
+          oStyle: {
+            borderSelect: '#000'
+          },
+          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
+          // iWidth: this.innerWidth,
+          // iHeight: this.innerHeight,
+          // 分屏播放，默认最大分屏4*4
+          iMaxSplit: split,
+          iCurrentSplit: split
+        })
+        let iWndNum = 1;
+        let InterruptTime = 5;
+        this.myPlugin.JS_SetInterruptTime(iWndNum, InterruptTime).then(
+          () => {
+            // console.info('JS_SetInterruptTime success');
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_SetInterruptTime failed');
+            // do you want...
+          }
+        );
+        // 事件回调绑定
+        this.myPlugin.JS_SetWindowControlCallback({
+          windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
+            // console.log('windowSelect callback: ', iWndIndex)
+          },
+          pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
+            // console.log('pluginError callback: ', iWndIndex, iErrorCode, oError)
+          },
+          windowEventOver: function (iWndIndex) {  //鼠标移过回调
+            //console.log(iWndIndex);
+          },
+          windowEventOut: function (iWndIndex) {  //鼠标移出回调
+            //console.log(iWndIndex);
+          },
+          windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
+            //console.log(iWndIndex);
+          },
+          windowFullCcreenChange: function (bFull) {  //全屏切换回调
+            // console.log('fullScreen callback: ', bFull)
+          },
+          firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
+            // console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight)
+          },
+          performanceLack: function () {  //性能不足回调
+            // console.log('performanceLack callback: ')
+          }
+        })
+      },
+      initPlayer(url, index, type) {
+        this.myPlugin.JS_Play(url,
+          {
+            playURL: url, // 流媒体播放时必传
+            mode: type?type:0 // 解码类型：0=普通模式; 1=高级模式 默认为0
+            // ...
+          },
+          index //当前窗口下标
+        ).then(
+          () => {
+            // console.info('JS_Play success')
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_Play failed:', err)
+            // do you want...
+          }
+        )
+      },
+      //生成随机ID
+      generateRandomString() {
+        let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+        let randomString = ''
+        for (let i = 0; i < 24; i++) {
+          let randomIndex = Math.floor(Math.random() * chars.length)
+          randomString += chars.charAt(randomIndex)
+        }
+        return randomString
+      },
+      videoOff() {
+        this.myPlugin.JS_StopRealPlayAll().then(
+          () => {
+            // console.info('JS_StopRealPlayAll success')
+            // do you want...
+          },
+          (err) => {
+            // console.info('JS_StopRealPlayAll failed')
+            // do you want...
+          }
+        )
+      }
+    },
+    beforeDestroy() {
+      let self = this
+      self.videoOff()
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .fullH5PlayerVideo {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    z-index:11;
+    height: 100%;
+    width:100%;
+    * {
+      margin: 0;
+      padding: 0;
+    }
+    position: relative;
+    .full-failed-button {
+      background: url("../../assets/ZDimages/icon_1.png");
+      background-size: 100%;
+      position: fixed;
+      font-size: 20px;
+      height: 50px;
+      width: 50px;
+      line-height: 30px;
+      text-align: center;
+      top: 40px;
+      right: 40px;
+      z-index: 12;
+      cursor: pointer;
+    }
+  }
+</style>

src/views/emergencyManagement/pageComponent/videoListComponent.vue

@@ -74,7 +74,7 @@
           floorId:this.floorId,
           passageway:'',
           subIds:[],
-          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws'
+          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
         };
         iotCameraFindByCondition(obj).then(response => {
           let list = [];

src/views/resourceDevice/pageComponent/resourceDangerComponent.vue

@@ -8,7 +8,7 @@
         <!--<p @click="checkButton(3)" :class="buttonType == 3?'right-border-1':'right-border-2'">月度</p>-->
       <!--</div>-->
       <div class="position-text-box">
-        <p class="position-text">隐患数</p>
+        <p class="position-text">总数</p>
         <p class="position-num">{{dangerNum}}</p>
         <!--<div class="position-num-box" v-if="yearOverYear>0">-->
           <!--<p class="null-p"></p>-->

src/views/safetyOverview/pageComponent/monitoringComponents.vue

@@ -16,162 +16,198 @@
   </div>
 </template>
 <script>
-  import { laboratorySubRelInfoKeySubList,iotCameraFindByCondition } from "@/api/index";
-  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
+  import { laboratorySubRelInfoKeySubList, iotCameraFindByCondition } from '@/api/index'
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
+
   export default {
     name: 'monitoringComponents',
     components: {
-      H5PlayerVideo
+      H5PlayerVideo,
     },
-    data () {
+    data() {
       return {
-        width:450,
-        height:200,
-        videoType:false,
-        videoList:[],
-        videoTotal:0,
-        videoQueryParams:{
-          page:1,
-          pageSize:4,
+        width: 450,
+        height: 200,
+        videoType: false,
+        videoList: [],
+        videoTotal: 0,
+        videoQueryParams: {
+          page: 1,
+          pageSize: 4
         },
         //eCharts定时器
-        eChartsTimer:null,
-        subList:[],
+        eChartsTimer: null,
+        subList: [],
       }
     },
-    created () {
-      // this.timedRefresh();
-      this.getData();
+    created() {
+      this.timedRefresh();
+      // this.getData()
     },
-    mounted () {
+    mounted() {
 
     },
     methods: {
-      leftButton(){
-        if(this.videoQueryParams.page>1){
+      leftButton() {
+        if (this.videoQueryParams.page > 1) {
           this.videoQueryParams.page--
-          this.getData();
+          this.videoInitialize()
         }
       },
-      rightButton(){
+      rightButton() {
         this.videoQueryParams.page++
-        this.videoInitialize();
+        this.videoInitialize()
       },
-      timedRefresh(){
-        let self = this;
-        self.getData();
+      timedRefresh() {
+        let self = this
+        self.getData()
         //定时动画
-        window.clearInterval(self.eChartsTimer);
-        self.eChartsTimer = setInterval(function(){
-          self.videoInitialize();
-        },1000*30);
+        window.clearInterval(self.eChartsTimer)
+        self.eChartsTimer = setInterval(function() {
+          self.videoQueryParams.page++
+          self.videoInitialize('auto')
+        }, 1000 * 18)
       },
-      getData(){
-        laboratorySubRelInfoKeySubList({page:this.videoQueryParams.page,pageSize:this.videoQueryParams.pageSize}).then(response => {
-          let subList = [];
-          for(let i=0;i<response.data.records.length;i++){
-            subList.push(response.data.records[i].subId);
+      getData() {
+        laboratorySubRelInfoKeySubList({
+          page: this.videoQueryParams.page,
+          pageSize: this.videoQueryParams.pageSize
+        }).then(response => {
+          let subList = []
+          for (let i = 0; i < response.data.records.length; i++) {
+            subList.push(response.data.records[i].subId)
           }
-          this.$set(this,'subList',subList);
-          this.$nextTick(()=>{
-            this.videoInitialize();
+          this.$set(this, 'subList', subList)
+          this.$nextTick(() => {
+            this.videoInitialize()
           })
-        });
+        })
       },
-      videoInitialize() {
-        let self = this;
-        self.$set(self, 'videoType', false);
-        self.$set(self, 'videoList', []);
+      videoInitialize(type) {
+        let self = this
         // type 1.楼栋 2.楼层 3.楼道 4.实验室
         let obj = {
-          page:this.videoQueryParams.page,
-          pageSize:this.videoQueryParams.pageSize,
-          buildId:'',
-          floorId:'',
-          passageway:'',
-          subIds:this.subList,
-          protocol:window.location.href.indexOf('https') !== -1?'wss':'ws'
-        };
+          page: this.videoQueryParams.page,
+          pageSize: this.videoQueryParams.pageSize,
+          buildId: '',
+          floorId: '',
+          passageway: '',
+          subIds: this.subList,
+          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
+        }
         iotCameraFindByCondition(obj).then(response => {
-          if(response.data.records[0]){
-            let list = [];
-            for(let i=0;i<response.data.records.length;i++){
-              list.push(
-                {
-                  width: this.width, //(宽度:非必传-默认600)
-                  height: this.height, //(高度:非必传-默认338)
-                  url: response.data.records[i].streamUrl,
-                }
-              )
+          if (response.data.records[0]) {
+            self.$set(self, 'videoType', false)
+            self.$set(self, 'videoList', [])
+            setTimeout(function() {
+              let list = []
+              for (let i = 0; i < response.data.records.length; i++) {
+                list.push(
+                  {
+                    width: self.width, //(宽度:非必传-默认600)
+                    height: self.height, //(高度:非必传-默认338)
+                    url: response.data.records[i].streamUrl
+                  }
+                )
+              }
+              self.$set(self, 'videoList', list)
+              self.$set(self, 'videoTotal', response.data.total)
+              self.$nextTick(() => {
+                setTimeout(function() {
+                  self.$set(self, 'videoType', true)
+                }, 50)
+              })
+            }, 50)
+          } else {
+            if(type == 'auto'){
+              self.videoQueryParams.page = 1;
+              self.$set(self, 'videoType', true)
+              self.videoInitialize();
+            }else{
+              self.videoQueryParams.page--
+              self.$set(self, 'videoType', true)
             }
-            this.$set(this,'videoList',list)
-            this.$set(this,'videoTotal',response.data.total);
-            this.$nextTick(()=>{
-              setTimeout(function(){
-                self.$set(self, 'videoType', true);
-              },300);
-            })
-          }else{
-            this.videoQueryParams.page--
           }
-        });
+        })
+      },
+      //全屏开启-关闭轮播
+      stopTime(){
+        window.clearInterval(this.eChartsTimer)
+      },
+      //全屏关闭-开启轮播
+      outFullScreen(){
+        let self = this;
+        window.clearInterval(self.eChartsTimer)
+        this.eChartsTimer = setInterval(function() {
+          self.videoQueryParams.page++
+          self.videoInitialize('auto')
+        }, 1000 * 180)
       },
     },
     beforeDestroy() {
       //清除定时器
-      window.clearInterval(this.eChartsTimer);
+      window.clearInterval(this.eChartsTimer)
     },
     destroyed() {
       //清除定时器
-      window.clearInterval(this.eChartsTimer);
+      window.clearInterval(this.eChartsTimer)
     }
   }
 </script>
 <style scoped lang="scss">
-  .monitoringComponents{
-    width:934px;
-    margin:22px 30px;
-    height:566px;
+  .monitoringComponents {
+    width: 934px;
+    margin: 22px 30px;
+    height: 566px;
     background: no-repeat;
     background-size: 100%;
     background-image: url("../../../assets/ZDimages/img_bg_zdsysssjk@1x.png");
-    .monitoring-title-p{
-      color:#00E6FF;
-      font-size:30px;
+    .monitoring-title-p {
+      color: #00E6FF;
+      font-size: 30px;
       text-align: center;
-      font-weight:700;
-      line-height:70px;
+      font-weight: 700;
+      line-height: 70px;
     }
-    .monitoring-for-max-big-box{
-      margin:18px 0 15px;
-      height:420px;
+    .monitoring-for-max-big-box {
+      margin: 18px 0 15px;
+      height: 420px;
       overflow: hidden;
-      .null-img{
+      .null-img {
         display: block;
-        width:230px;
-        margin:100px auto 0;
+        width: 230px;
+        margin: 100px auto 0;
       }
     }
-    .monitoring-bottom-button-box{
-      height:26px;
+    .monitoring-bottom-button-box {
+      height: 26px;
       display: flex;
-      .center-button-box{
-        flex:1;
+      .center-button-box {
+        flex: 1;
       }
-      .left-button-img{
+      .left-button-img {
         cursor: pointer;
         display: block;
-        width:136px;
-        height:26px;
-        margin-left:10px;
+        width: 136px;
+        height: 26px;
+        margin-left: 10px;
       }
-      .right-button-img{
+      .right-button-img {
         cursor: pointer;
         display: block;
-        width:136px;
-        height:26px;
-        margin-right:10px;
+        width: 136px;
+        height: 26px;
+        margin-right: 10px;
       }
     }
+    .full-video-box{
+      position: fixed;
+      top:0;
+      left:0;
+      flex:10;
+      height:100%;
+      width:100%;
+      background-color: #004d8c;
+    }
   }
 </style>