zc

src/api/screen.js

@@ -292,3 +292,12 @@ export function getChemicalStockSummary() {
   })
 }
 
+//查询视频配置
+export function laboratoryLabScreenScreenConfigGet(params) {
+  return request({
+    url: '/laboratory/labScreen/screenConfig/get',
+    method: 'get',
+    params
+  })
+}
+

src/components/SecurityMonitor.vue

@@ -4,7 +4,7 @@
     <div class="monitor-header">
       <span class="monitor-title-cn">&#x1F4F9; &#x5B9E;&#x65F6;&#x76D1;&#x63A7;</span>
       <span class="monitor-title-en">CCTV Live Feed</span>
-      <div class="monitor-button">
+      <div class="monitor-button" v-if="effective">
         <p :class="checkButton == 1 ? 'checkButton':'noCheckButton'" @click="buttonClick(1)">默认</p>
         <p :class="checkButton == 2 ? 'checkButton':'noCheckButton'" @click="buttonClick(2)">全部</p>
       </div>
@@ -14,7 +14,10 @@
       </div>
     </div>
     <div v-if="checkButton == 1" class="monitor-play-box">
-      <H5PlayerVideo class="for-play-box"  v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
+      <videoForMod
+          v-for="(item,index) in modList" :key="index"
+          :deviceNo="item.deviceNo"
+      ></videoForMod>
     </div>
     <!-- Monitor Inner: 2-column grid -->
     <div class="monitor-inner" v-if="checkButton == 2">
@@ -107,9 +110,11 @@
 </template>
 
 <script>
-import { getCameraList,getMonitorTree,getRooms,getDeptDropList,getCameraStream } from '@/api/screen'
+import { getCameraList,getMonitorTree,getRooms,getDeptDropList,
+  getCameraStream,laboratoryLabScreenScreenConfigGet } from '@/api/screen'
 
 import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
+import videoForMod from '@/components/videoForMod/videoForMod.vue'
 import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
 const TreeNode = {
   name: 'TreeNode',
@@ -180,7 +185,10 @@ const TreeNode = {
 export default {
   name: 'SecurityMonitor',
   components: {
-    TreeNode,H5PlayerVideo,fullH5PlayerVideo
+    TreeNode,
+    H5PlayerVideo,
+    fullH5PlayerVideo,
+    videoForMod,
   },
   data() {
     return {
@@ -248,15 +256,18 @@ export default {
       fullVideoProps:{},
       fullVideoType:false,
       //切换
-      checkButton:1,
+      checkButton:2,
+      effective:false,
+      modList:[],
     }
   },
   created() {
     // this.fetchCameras()
   },
   mounted() {
+    this.laboratoryLabScreenScreenConfigGet();
     if(this.checkButton == 1){
-      this.getVideoDataOne()
+      this.demo()
     }else if(this.checkButton == 2){
       this.getMonitorTree();
       this.getDeptDropList();
@@ -266,7 +277,7 @@ export default {
     buttonClick(val){
       this.$set(this,'checkButton',val);
       if(val == 1){
-        this.getVideoDataOne()
+        this.demo()
       }else if(val == 2){
         this.getMonitorTree();
         this.getDeptDropList();
@@ -488,18 +499,18 @@ export default {
       try {
         const res = await getCameraStream(this.videoQueryParams)
         let list = [];
-        res.data.total = 100;
-        res.data.records = [
-          {streamUrl:'1', deviceNo:'1'},
-          {streamUrl:'2', deviceNo:'2'},
-          {streamUrl:'3', deviceNo:'3'},
-          {streamUrl:'4', deviceNo:'4'},
-          {streamUrl:'5', deviceNo:'5'},
-          {streamUrl:'6', deviceNo:'6'},
-          {streamUrl:'7', deviceNo:'7'},
-          {streamUrl:'8', deviceNo:'8'},
-          {streamUrl:'9', deviceNo:'9'},
-        ];
+        // res.data.total = 100;
+        // res.data.records = [
+        //   {streamUrl:'1', deviceNo:'1'},
+        //   {streamUrl:'2', deviceNo:'2'},
+        //   {streamUrl:'3', deviceNo:'3'},
+        //   {streamUrl:'4', deviceNo:'4'},
+        //   {streamUrl:'5', deviceNo:'5'},
+        //   {streamUrl:'6', deviceNo:'6'},
+        //   {streamUrl:'7', deviceNo:'7'},
+        //   {streamUrl:'8', deviceNo:'8'},
+        //   {streamUrl:'9', deviceNo:'9'},
+        // ];
         for(let i=0;i<res.data.records.length;i++){
           list.push(
             {
@@ -522,62 +533,18 @@ export default {
       }
     },
     //指定视频
-    getVideoDataOne(data){
-      let obj = {
-        page:1,
-        pageSize:9,
-        passageway:'',
-        protocol:window.location.href.indexOf('https') !== -1?'wss':'ws',
-        streamType:1,
-        source:4,
-        subIds:data,
-      };
-      this.$nextTick(()=>{
-        this.videoInitializeOne(obj)
-      })
-    },
-    async videoInitializeOne(obj) {
-      let self = this;
-      self.$set(self, 'videoType', false);
-      self.$set(self, 'videoList', []);
+    async laboratoryLabScreenScreenConfigGet(){
       try {
-        // const res = await getCameraStream(obj)
-        let list = [];
-        let res = {
-          data:{
-            total:100,
-            records:[
-              {streamUrl:'1', deviceNo:'1'},
-              {streamUrl:'2', deviceNo:'2'},
-              {streamUrl:'3', deviceNo:'3'},
-              {streamUrl:'4', deviceNo:'4'},
-              {streamUrl:'5', deviceNo:'5'},
-              {streamUrl:'6', deviceNo:'6'},
-              {streamUrl:'7', deviceNo:'7'},
-              {streamUrl:'8', deviceNo:'8'},
-              {streamUrl:'9', deviceNo:'9'},
-            ]
+        const res = await laboratoryLabScreenScreenConfigGet({ screenType: 1 })
+        if (res.code === 200) {
+          this.$set(this,'effective',res.data.effective);
+          this.$set(this,'modList',res.data.items);
+          if(res.data.effective){
+            this.$set(this,'checkButton',1);
           }
         }
-        for(let i=0;i<res.data.records.length;i++){
-          list.push(
-              {
-                width: 1396, //(宽度:非必传-默认600)
-                height: 810, //(高度:非必传-默认338)
-                url: res.data.records[i].streamUrl,
-                cameraIndexCode: res.data.records[i].deviceNo,
-              }
-          )
-        }
-        this.$set(this,'videoList',list)
-        this.$set(this,'videoTotal',res.data.total);
-        this.$nextTick(()=>{
-          setTimeout(function(){
-            self.$set(self, 'videoType', true);
-          },1000);
-        })
       } catch (e) {
-        console.error('VideoGrid:', e)
+
       }
     },
     //全屏开启-关闭轮播

src/components/fullH5PlayerVideo/fullH5PlayerVideo.vue

@@ -203,9 +203,9 @@ import { iotCameraGetPreviewURLs } from '@/api/screen'
       background: url("../../assets/icon_1.png");
       background-size: 100%;
       position: fixed;
-      font-size: 20px;
-      height: 50px;
-      width: 50px;
+      font-size: 40px;
+      height: 100px;
+      width: 100px;
       line-height: 30px;
       text-align: center;
       top: 40px;

src/components/videoForMod/H5PlayerVideo.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="H5PlayerVideo">
+    <div :id="videoData.id" :ref="videoData.id"></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'H5PlayerVideo',
+    props: {
+      videoProps: {}
+    },
+    data() {
+      return {
+        fullScreenType:false,
+        videoCover: localStorage.getItem('fileBrowseEnvironment') + localStorage.getItem('videoCover'),
+        videoData: {},
+      }
+    },
+    created() {
+      this.$set(this, 'videoData', {
+        id: 'video_' + this.generateRandomString(),
+        width: this.videoProps.width ? this.videoProps.width : 600,
+        height: this.videoProps.height ? this.videoProps.height : 338,
+        url: this.videoProps.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() {
+        if(this.$parent.$parent.stopTime){
+          this.$parent.$parent.stopTime(this.videoProps.cameraIndexCode);
+        }else if(this.$parent.stopTime){
+          this.$parent.stopTime(this.videoProps.cameraIndexCode);
+        }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...
+            }
+          );
+        }
+      },
+      //退出全屏
+      outFullScreen() {
+        let self = this;
+        this.myPlugin.JS_FullScreenDisplay(false).then(
+          (res) => {
+            console.info('JS_FullScreenDisplay success');
+            // do you want...
+          },
+          (err) => {
+            console.info('JS_FullScreenDisplay failed');
+            // do you want...
+          }
+        );
+        self.$set(self,'fullScreenType',false);
+      },
+      initH5Player(split) {
+        this.myPlugin = new window.JSPlugin({
+          szId: this.videoData.id, //需要英文字母开头，唯一性，必填
+          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
+          bSupporDoubleClickFull: true,//是否支持双击全屏，默认true
+          openDebug: true,
+          oStyle: {
+            borderSelect: '#000'
+          },
+          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
+          iWidth: this.videoData.width,
+          iHeight: this.videoData.height,
+          // 分屏播放，默认最大分屏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">
+  .H5PlayerVideo {
+    margin: 0;
+    padding: 0;
+    display: inline-block;
+    * {
+      margin: 0;
+      padding: 0;
+    }
+    position: relative;
+  }
+</style>

src/components/videoForMod/videoForMod.vue

@@ -0,0 +1,78 @@
+<!-- 视频组件外科 -->
+<template>
+    <div class="videoForMod">
+      <H5PlayerVideo v-if="videoData" :videoProps="videoData"></H5PlayerVideo>
+      <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
+    </div>
+</template>
+<script>
+  import { iotCameraGetPreviewURLs } from '@/api/screen'
+  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
+  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
+  export default {
+    name: 'videoForMod',
+    components: {
+      H5PlayerVideo,
+      fullH5PlayerVideo
+    },
+    props:{
+      deviceNo:{},
+    },
+    data() {
+      return {
+        width:1396,
+        height:806,
+        videoData:null,
+        //全屏视频参数
+        fullVideoProps:{},
+        fullVideoType:false,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      if(this.deviceNo){
+        this.iotCameraGetPreviewURLs();
+      }
+    },
+    methods: {
+      iotCameraGetPreviewURLs(){
+        let obj = {
+          streamType:1,
+          cameraIndexCode:this.deviceNo,
+          protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
+        }
+        iotCameraGetPreviewURLs(obj).then(response => {
+          if(response.data){
+            this.$set(this, 'videoData', {
+              width: this.width,
+              height: this.height,
+              url: response.data,
+            })
+            this.$forceUpdate();
+          }
+        })
+      },
+      //全屏开启-关闭轮播
+      stopTime(cameraIndexCode){
+        this.$set(this,'fullVideoProps',{cameraIndexCode:cameraIndexCode});
+        this.$set(this,'fullVideoType',true);
+      },
+      //全屏关闭-开启轮播
+      outFullScreen(){
+        let self = this;
+        this.$set(this,'fullVideoType',false);
+        this.$set(this,'fullVideoProps',{});
+      },
+    }
+  }
+</script>
+<style scoped lang="scss">
+    .videoForMod {
+      display: inline-block;
+      width:1396px;
+      height:806px;
+      margin:20px 0 0 20px;
+    }
+</style>