Merge remote-tracking branch 'origin/master'

src/views/videoapply/comp/jessibuca.vue

@@ -54,7 +54,6 @@
           if (typeof (this.videoUrl) == "undefined") {
             this.videoUrl = paramUrl;
           }
-         this.btnDom = document.getElementById(this.buttonsBoxId);
           console.log("初始化时的地址为: " + this.videoUrl)
         })
     },
@@ -75,10 +74,10 @@
               debug: false,
               supportDblclickFullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。
               operateBtns: {
-                fullscreen: true,
-                screenshot: true,
-                play: true,
-                audio: true,
+                fullscreen: false,
+                screenshot: false,
+                play: false,
+                audio: false,
               },
               record: "record",
               vod: this.vod,
@@ -293,7 +292,7 @@
     width: auto;
     position: relative;
     border-radius: 5px;
-    box-shadow: 0 5px 5px;
+    /*box-shadow: 0 5px 5px;*/
   }
   .container-shell:before {
     position: absolute;

src/views/videoapply/comp/videowall.vue

@@ -45,7 +45,7 @@
           </div>
           <el-row :gutter="4">
             <el-col :span="screenSpan" v-for="(item,index) in screenData" :key="index">
-              <player class="itemClass" :jessibucaId="'jessibucaId' + index" :container="'container' + index" :buttonsBoxId="'buttonsBoxId' + index" :ref="'videoPlayer' + index" :hasaudio="hasaudio" fluent autoplay live ></player>
+              <player class="itemClass" :container="'container' + index" :ref="'videoPlayer' + index" fluent autoplay live @click.native="screenClick"></player>
             </el-col>
           </el-row>
         </basic-container>
@@ -56,11 +56,13 @@
 <script>
     import {getGbChannelLazyTree, startPlay, stopPlay} from "@/api/device/gb/gbdevicechannel";
     import player from './jessibuca.vue'
+    import {select} from "../../../api/base/region";
     export default {
       name: "videowall",
       components: {player},
       data () {
         return {
+          screenSelectedId: "container0",
           screenSpan: 12,
           screen: 4,
           screenData:[],
@@ -110,9 +112,18 @@
               item16 : true
             }
           }
-        }
+        },
       },
       methods:{
+        screenClick(ele){
+          let oldSelectedDom = document.getElementById(this.screenSelectedId);
+          if(oldSelectedDom){
+            oldSelectedDom.classList.remove("screenSelectedClass");
+          }
+          let containerDom = document.getElementById(ele.srcElement.id);
+          containerDom.classList.add("screenSelectedClass");
+          this.screenSelectedId = ele.srcElement.id;
+        },
         initData(){
           for(let i = 0; i < 16; i++){
             let item = {name:"", isPlay:false, index:i, channelId:null, display:true};
@@ -137,11 +148,17 @@
             for(let i = 0; i < this.screenData.length; i++){
               let containerDom = document.getElementById("container" + i);
               containerDom.style.height = (9/16) * containerDom.clientWidth + "px";
-              console.log(containerDom.style.height)
+              console.log(containerDom.style.height);
             }
+            let containerDom = document.getElementById(this.screenSelectedId);
+            containerDom.classList.add("screenSelectedClass");
           });
         },
         screenChange(value){
+          let oldSelectedDom = document.getElementById(this.screenSelectedId);
+          if(oldSelectedDom){
+            oldSelectedDom.classList.remove("screenSelectedClass");
+          }
           if(value === 4){
             this.screenSpan = 12;
             this.screenData = this.data4;
@@ -163,6 +180,9 @@
                 this.$refs['videoPlayer' + i][0].resize();
               }
             }
+            let containerDom = document.getElementById("container0");
+            containerDom.classList.add("screenSelectedClass");
+            this.screenSelectedId = "container0";
           });
         },
         treeLoad(node, resolve){
@@ -210,23 +230,28 @@
           return data.label.indexOf(value) !== -1;
         },
         handleNodeClick(node, resolve){},
-        clickPlay(data){
+        clickPlay(data) {
           this.$message.success("开始调取视频");
           //找到第一个没有播放的屏幕
-          let emptyIndex = this.screenData.findIndex((item) => item.isPlay == false);
-          if(emptyIndex >= 0){ //表示找到
-            this.playVideo(data, emptyIndex).then(res => {
-              this.screenData[emptyIndex].isPlay = true;
-              this.screenData[emptyIndex].channelId = data.channelId;
-            });
-            return false;
-          }else{
-            this.playVideo(data, 0).then(res => {
-              this.screenData[0].isPlay = true;
-              this.screenData[0].channelId = data.channelId;
-            });
-          }
+          let emptyIndex = this.screenSelectedId.charAt(this.screenSelectedId.length - 1);
+          this.playVideo(data, 0).then(res => {
+            this.screenData[emptyIndex].isPlay = true;
+            this.screenData[emptyIndex].channelId = data.channelId;
+          });
         },
+          // let emptyIndex = this.screenData.findIndex((item) => item.isPlay == false);
+          // if(emptyIndex >= 0){ //表示找到
+          //   this.playVideo(data, emptyIndex).then(res => {
+          //     this.screenData[emptyIndex].isPlay = true;
+          //     this.screenData[emptyIndex].channelId = data.channelId;
+          //   });
+          //   return false;
+          // }else{
+          //   this.playVideo(data, 0).then(res => {
+          //     this.screenData[0].isPlay = true;
+          //     this.screenData[0].channelId = data.channelId;
+          //   });
+          // }
         playVideo(treeItem, index){
           let deviceId = treeItem.deviceId;
           let channelId = treeItem.channelId;
@@ -249,7 +274,7 @@
             this.screenData[channelVideoIndex].channelId = null;
           });
         }
-      },
+      }
     }
 </script>
 
@@ -307,6 +332,12 @@
   .itemClass {
     position: sticky;
   }
+  .screenSelectedClass{
+    box-sizing:border-box;
+    -moz-box-sizing:border-box; /* Firefox */
+    -webkit-box-sizing:border-box; /* Safari */
+    border:0.3rem solid red;
+  }
   //}
   .custom-tree-node {
     flex: 1;

src/views/videoapply/videofusion.vue

@@ -23,9 +23,6 @@
         activeName: "videoWall",
       };
     },
-    created(){
-      this.tab = this.tabsOption.column[0];
-    },
     methods: {
       tabChange(column) {
         this.tab = column;
@@ -50,11 +47,9 @@
         let that = this;
         let deviceId = row.deviceId;
         let channelId = row.channelId;
-        this.stopBtnLoading = true;
         stopPlay(deviceId, channelId).then(res => {
           console.log(JSON.stringify(res));
           that.onLoadChannel(that.page);
-          this.stopBtnLoading = false;
         }).catch(err => {
           if (err.response.status === 402) { // 已经停止过
             that.onLoadChannel(that.page);