zc

src/api/index.js

@@ -370,3 +370,19 @@ export function iotBigViewSpeakerPlayText(params) {
     params
   })
 }
+//查询视频配置
+export function laboratoryLabScreenScreenConfigGet(params) {
+  return request({
+    url: '/laboratory/labScreen/screenConfig/get',
+    method: 'get',
+    params
+  })
+}
+//查询视频配置
+export function iotDeviceList(data = {}) {
+  return request({
+    url: '/iot/device/listPage',
+    method: 'post',
+    data
+  })
+}

src/components/LabStats/videoStats.vue

@@ -4,44 +4,69 @@
     <div class="corner-deco bl"></div><div class="corner-deco br"></div>
     <div class="panel-title">实验室视频监控</div>
     <div class="video-content">
-      <H5PlayerVideo v-for="(item,index) in videoList" :key="index" :videoProps="item"
-                     :style="'width:'+width+'px;height:'+height+'px;display: inline-block;'"></H5PlayerVideo>
+      <videoForMod v-for="(item,index) in modList" :key="index"
+                   :deviceNo="item.deviceNo"></videoForMod>
     </div>
-    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
   </div>
 </template>
 <script>
-  import { getVideoList } from '@/api'
-  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
-  import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
+  import { getVideoList,laboratoryLabScreenScreenConfigGet,iotDeviceList } from '@/api/index'
+  import videoForMod from '@/components/videoForMod/videoForMod.vue'
   export default {
     name: 'videoStats',
-    components: { H5PlayerVideo,fullH5PlayerVideo },
+    components: { videoForMod },
     data () {
       return {
-        videoQueryParams:{
-          page:1,
-          pageSize:4,
-          streamType:1,
-          source:0,
-        },
-        videoType:false,
-        videoList:[],
-        videoTotal:0,
-        //全屏视频参数
-        fullVideoProps:{},
-        fullVideoType:false,
         width:470,
         height:280,
+        modList:[],
+        pollTimer:null,
+        page:1,
       }
     },
     created(){
 
     },
     mounted(){
-      this.getVideoData();
+      this.laboratoryLabScreenScreenConfigGet();
+      this.pollTimer = setInterval(this.laboratoryLabScreenScreenConfigGet, 5 * 60 * 1000)
+      // this.getVideoData();
     },
     methods:{
+      //指定视频
+      async iotDeviceList(){
+        let obj = {
+          page: this.page,
+          pageSize: 4,
+          typeKey: "camera",
+          orderBy:"subject_id desc"
+        };
+        const res = await iotDeviceList(obj)
+        if (res.code === 200) {
+          this.$set(this,'modList',res.data.records);
+          if(res.data.current<(res.data.pages-1)){
+            this.page++
+          }else{
+            this.$set(this,'page',1);
+          }
+        }
+      },
+      async laboratoryLabScreenScreenConfigGet(){
+        try {
+          const res = await laboratoryLabScreenScreenConfigGet({ screenType: 2 })
+          if (res.code === 200) {
+            this.$set(this,'modList',[]);
+            if(res.data.effective){
+              this.$set(this,'page',1);
+              this.$set(this,'modList',res.data.items);
+            }else{
+              this.iotDeviceList();
+            }
+          }
+        } catch (e) {
+
+        }
+      },
       //刷新视屏
       getVideoData(data) {
         let obj = {
@@ -105,7 +130,6 @@
 </script>
 <style scoped lang="scss">
   .videoStats{
-
   }
   .risk-warning {
     display: flex;

src/components/VideoMonitor/VideoGrid.vue

@@ -103,25 +103,25 @@
         self.$set(self, 'videoType', false);
         self.$set(self, 'videoList', []);
         try {
-          // const res = await getVideoList(this.videoQueryParams)
+          const res = await getVideoList(this.videoQueryParams)
 
           // 假数据开始
-          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'},
-              ],
-            }
-          };
+          // 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'},
+          //     ],
+          //   }
+          // };
           // 假数据结束
 
           let list = [];

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,82 @@
+<!-- 视频组件外科 -->
+<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/index'
+  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:470,
+        height:290,
+        videoData:null,
+        //全屏视频参数
+        fullVideoProps:{},
+        fullVideoType:false,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      if(this.deviceNo){
+        this.iotCameraGetPreviewURLs();
+      }
+    },
+    methods: {
+      async iotCameraGetPreviewURLs() {
+        try {
+          let obj = {
+            streamType:1,
+            cameraIndexCode:this.deviceNo,
+            protocol: window.location.href.indexOf('https') !== -1 ? 'wss' : 'ws',
+          }
+          const response = await iotCameraGetPreviewURLs(obj);
+          if(response.code == 200){
+            this.$set(this, 'videoData', {
+              width: this.width,
+              height: this.height,
+              url: response.data,
+            })
+            this.$forceUpdate();
+          }
+        } catch (error) {
+          this.$message.error(error.message);
+          // 不再向上抛出，错误被吞掉
+        }
+      },
+      //全屏开启-关闭轮播
+      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:470px;
+      height:290px;
+      margin:0 0 0 5px;
+    }
+</style>