球机播放关闭以及选择播放功能优化

src/components/JessibucaH265/index.vue

@@ -13,8 +13,8 @@ export default {
     return {
       jessibuca: null,
       playUrl: '',
-      qxToken: '',
+      qxToken: null,
-      qxInfo: {},
+      qxInfo: null,
       fixedData: [],
     }
   },
@@ -47,6 +47,41 @@ export default {
     },
   },
   methods: {
+    // 父组件要求播放视频
+    childPlayVideo(e) {
+      if (this.qxToken && this.qxInfo) {
+        const { puid, ballIndex } = e
+        this.playUrl =
+          this.qxInfo.q2Url + 'stream.flv?puid=' + puid + '&idx=' + ballIndex + '&stream=0&token=' + this.qxToken
+        if (this.jessibuca) {
+          // await this.jessibuca.destroy()
+          this.playvideo()
+        } else {
+          this.createJessibuca()
+          this.playvideo()
+        }
+      } else {
+        Promise.all([this.getQxToken(), this.selectVideoLoginInfo()]).then(async () => {
+          //  2. Promise.all 等待两个异步请求结束后 再组装url
+          const { puid, ballIndex } = e
+          this.playUrl =
+            this.qxInfo.q2Url + 'stream.flv?puid=' + puid + '&idx=' + ballIndex + '&stream=0&token=' + this.qxToken
+        })
+
+        if (this.jessibuca) {
+          // await this.jessibuca.destroy()
+          this.playvideo()
+        } else {
+          this.createJessibuca()
+          this.playvideo()
+        }
+      }
+    },
+
+    // 父组件要求关闭
+    childClosedVideo() {
+      this.stopvideo()
+    },
     createJessibuca() {
       this.jessibuca = new window.Jessibuca({
         container: this.$refs.containerPlayer,
@@ -99,7 +134,7 @@ export default {
     async stopvideo() {
       if (this.jessibuca) {
         await this.jessibuca.destroy()
-        jessibuca = null
+        this.jessibuca = null
       }
     },
 

src/plugins/modal.js

@@ -18,6 +18,7 @@ export default {
   },
   // 警告消息
   msgWarning(content) {
+    Message.closeAll()
     Message.warning(content)
   },
   // 弹出提示

src/utils/aescbc.js

@@ -6,12 +6,12 @@ const cbc_iv = CryptoJS.enc.Utf8.parse('1234567812345678')
  * 默认参数需要加密
  * @type {boolean}
  */
-const jia_mi = false
+const jia_mi = true
 /**
  * 默认后台会自动加密
  * @type {boolean}
  */
-const jie_mi = false
+const jie_mi = true
 /**
  * 加密
  * @param word

src/views/screen/components/video/FixedCameraInspection.vue

@@ -161,8 +161,9 @@ export default {
     },
     //播放视频
     playVideo(e) {
-      this.playItem = e
+      // this.playItem = e
-      this.$refs.videoPlay.play(e)
+      // this.$refs.videoPlay.play(e)
+      this.$refs.videoPlay.videoPlayNew(e)
     },
     //设置图标样式
     getImageSrc(type) {

src/views/screen/components/video/components/videoPlayNew.vue

@@ -127,8 +127,15 @@
       <div class="right">
         <div class="cell">
           <div class="cell-player">
-            <div class="player-container" v-for="i in cellCount" :key="i" :class="cellClassNew">
+            <div
-              <JessibucaH265 :playerInfo="fixedData[i - 1]" />
+              class="player-container"
+              v-for="i in cellCount"
+              :key="i"
+              :class="cellClassNew"
+              @click="onSelectVideo(i)"
+              :style="i === activeVideo ? 'border: 2px solid green' : ''"
+            >
+              <JessibucaH265 :playerInfo="fixedData[i - 1]" :ref="`JessibucaH265_${i}`" />
             </div>
             <!-- <div :class="cellClass(i)" v-for="i in cellCount" :key="i">
               <player
@@ -276,6 +283,8 @@ export default {
       blob: '',
       fullscreen: false,
       fixedData: [],
+      activeVideo: null,
+      activePlayVideo: null,
     }
   },
   methods: {
@@ -338,12 +347,25 @@ export default {
     },
     closeVideos(type) {
       if (type === 2) {
-        this.$emit('changeTimingStatus', 2)
+        // this.$emit('changeTimingStatus', 2)
-        while (this.activeArray.length > 0) {
+        // while (this.activeArray.length > 0) {
-          this.closeVideoOne(this.activeArray[0])
+        //   this.closeVideoOne(this.activeArray[0])
+        // }
+
+        // 循环窗口全部关闭
+        for (let i = 0; i < this.cellCount; i++) {
+          this.$refs[`JessibucaH265_${i + 1}`][0].childClosedVideo()
         }
       } else {
-        this.closeVideoOne(this.activePlayer)
+        // this.closeVideoOne(this.activePlayer)
+        if (this.activeVideo === null) {
+          this.$modal.msgWarning('请选择需要关闭的窗口')
+          return
+        } else {
+          this.$nextTick(() => {
+            this.$refs[`JessibucaH265_${this.activeVideo}`][0].childClosedVideo()
+          })
+        }
       }
     },
     closeVideoOne(playerIndex) {
@@ -525,6 +547,25 @@ export default {
       })
       this.fixedData = res.data
     },
+
+    // 点击视频盒子事件
+    onSelectVideo(index) {
+      console.log(index, '当前选择的索引')
+      this.activeVideo = index
+    },
+
+    // 点击视频播放时
+    videoPlayNew(e) {
+      console.log('需要播放的球机', e)
+      if (this.activeVideo === null) {
+        this.$modal.msgWarning('请选择播放的窗口！')
+        return
+      } else {
+        this.$nextTick(() => {
+          this.$refs[`JessibucaH265_${this.activeVideo}`][0].childPlayVideo(e)
+        })
+      }
+    },
   },
   computed: {
     cellClass() {
@@ -699,4 +740,8 @@ export default {
 .container-4:nth-child(2n) {
   margin-left: 0;
 }
+
+.player-container {
+  box-sizing: border-box;
+}
 </style>

vue.config.js

@@ -39,9 +39,9 @@ module.exports = {
         // target: 'http://192.168.0.176:18080',
         // target: 'http://192.168.0.58:19090', // 杰
         // target: 'http://192.168.0.14:18080', // 测试环境
-        // target: 'http://218.21.27.6:1999/prod-api', // 生产环境
+        target: 'http://218.21.27.6:1999/prod-api', // 生产环境
         // target: 'http://192.168.0.38:18080', // 郝志权
-        target: 'http://192.168.2.125:18080', // 梁超
+        // target: 'http://192.168.2.125:18080', // 梁超
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: '',