zc

src/views/home.vue

@@ -3,7 +3,15 @@
     <headComponent :headData="headData"></headComponent>
     <div class="home-page" v-show="pageType == 1">
       <div class="top-max-big-box">
-        <videoComponent ref="videoComponent"></videoComponent>
+        <!--<videoComponent ref="videoComponent"></videoComponent>-->
+        <div class="videoComponent">
+          <p class="title-p">视频监控</p>
+          <!--<p class="full-screen-button" @click="fullScreen"></p>-->
+          <!--<img v-if="!videoType" class="video-max-big-box" src="@/assets/ZDimages/video_img.png">-->
+          <div class="video-max-big-box" id="videoData" ref="videoData"></div>
+          <img class="position-left-bottom" src="@/assets/ZDimages/img_min_icon.png">
+          <img class="position-right-bottom" src="@/assets/ZDimages/img_min_icon.png">
+        </div>
         <overviewComponent></overviewComponent>
         <usageRateComponent></usageRateComponent>
       </div>
@@ -53,7 +61,8 @@
         headData: {
           name: ''
         },
-        mediaAnnouncementComponentData: null
+        mediaAnnouncementComponentData: null,
+        videoData:{},
       }
     },
     created() {
@@ -69,7 +78,7 @@
           this.getToken()
         ]).then((result) => {
             setTimeout(function() {
-              self.getExploitConfig()
+              self.getExploitConfig();
             },500)
         }).catch((error) => {
         })
@@ -82,6 +91,7 @@
       },
       //获取开发配置
       getExploitConfig() {
+        let self = this;
         getConfigByType({ category: 2, configType: 5 }).then(response => {
           let obj = JSON.parse(response.data.configValue)
           //判定http或者https
@@ -107,6 +117,9 @@
             localStorage.setItem('fileBrowseEnvironment', window.location.href.split('://')[0] + '://' + Decrypt(obj.fileBrowseEnvironment))
           }
           this.$set(this, 'showPage', true)
+          setTimeout(function() {
+            self.initH5Player(1);
+          },500)
         })
       },
       //通知组件数据给予
@@ -136,7 +149,121 @@
       },
       //视频组件数据给予
       setVideoData(item) {
-        this.$refs.videoComponent.initialize(item)
+        this.$set(this, 'videoData', {
+          id: 'videoData',
+          width: 737,
+          height: 417,
+          url: item.videoList[0].url
+        })
+        this.videoOff();
+        // this.$refs.videoComponent.initialize(item)
+      },
+      //视频组件初始化
+      initH5Player(split) {
+        this.myPlugin = new window.JSPlugin({
+          szId: 'videoData', //需要英文字母开头，唯一性，必填
+          // szId: this.videoData.id, //需要英文字母开头，唯一性，必填
+          szBasePath: '/h5player/', // 必填,与h5player.min.js的引用目录一致 填写的是pulblic下的路径！！！
+          mseWorkerEnable:true,
+          bSupporDoubleClickFull: false,//是否支持双击全屏，默认true
+          // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
+          iWidth: 737,
+          iHeight: 417,
+          // 分屏播放，默认最大分屏4*4
+          iMaxSplit: split,
+          iCurrentSplit: split,
+          openDebug: false,
+          oStyle: {
+            borderSelect: '#000'
+          },
+        })
+        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(
+          () => {
+            // this.$set(this,'playType',true);
+            console.info('JS_Play success')
+            // do you want...
+          },
+          (err) => {
+            // this.$set(this,'playType',false);
+            console.info('JS_Play failed', err)
+            // do you want...
+          }
+        )
+      },
+      //全屏
+      fullScreen(){
+        this.myPlugin.JS_FullScreenSingle(1).then(
+          () => {
+            // console.info('JS_FullScreenSingle success');
+          },
+          (err) => {
+            // console.info('JS_FullScreenSingle failed');
+          }
+        );
+      },
+      videoOff() {
+        this.myPlugin.JS_StopRealPlayAll().then(
+          () => {
+            console.info('JS_StopRealPlayAll success')
+            // do you want...
+            let type = this.videoData.url.indexOf('wss') !== -1?1:0;
+            this.initPlayer(this.videoData.url, 0,type)
+          },
+          (err) => {
+            console.info('JS_StopRealPlayAll failed')
+            // do you want...
+          }
+        )
       },
       //实验室详情开启
       setSubInfoType() {
@@ -148,7 +275,17 @@
       },
       setOffSubAlarm() {
         this.$refs.subComponent.setOffAlarm()
-      }
+      },
+      //生成随机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
+      },
     },
     beforeDestroy() {
 
@@ -168,6 +305,62 @@
       .top-max-big-box {
         height: 543px;
         display: flex;
+        .videoComponent{
+          width:890px;
+          height:512px;
+          margin:20px 0 0 30px;
+          background-image: url("../assets/ZDimages/img_spjk_bg@1x.png");
+          background-size: 100% 100%;
+          position: relative;
+          .full-screen-button {
+            background: url("../assets/ZDimages/icon_0.png");
+            background-size: 100%;
+            position: absolute;
+            font-size: 20px;
+            height: 30px;
+            width: 30px;
+            line-height: 30px;
+            text-align: center;
+            top: 80px;
+            right: 80px;
+            z-index: 1;
+            cursor: pointer;
+          }
+          .title-p{
+            height:47px;
+            line-height: 47px;
+            color:#fff;
+            font-size:20px;
+            font-weight: 700;
+            font-family: Source Han Sans, Source Han Sans;
+            padding-left:24px;
+            text-align: center;
+          }
+          .video-max-big-box{
+            width:739px;
+            height:419px;
+            margin: 24px 0 0 76px;
+            border: 1px solid #0183FA;
+          }
+          .position-left-bottom{
+            position: absolute;
+            left:-15px;
+            bottom:-15px;
+            width:42px;
+            height:42px;
+            z-index:1;
+            transform: rotate(270deg);
+          }
+          .position-right-bottom{
+            position: absolute;
+            right:-15px;
+            bottom:-15px;
+            width:42px;
+            height:42px;
+            z-index:1;
+            transform: rotate(180deg);
+          }
+        }
       }
       .bottom-max-big-box {
         height: 467px;