给信号源开窗添加关闭按钮和关闭功能

src/renderer/assets/less/splitscreen.less

@@ -17,18 +17,23 @@
     background-color: #717171;
     position: relative;
 
-    .doubleArrow {
+    // 关闭信号源开窗按钮
+    .closeBtn {
       position: absolute;
-      right: 1px;
-      bottom: 1px;
-      width: 10px;
-      height: 10px;
-      cursor: nwse-resize;
-      z-index: 200001;
+      right:2px;
+      top:2px;
+      color:#ffffff;
+      width:20px;
+      height: 20px;
+      text-align: center;
+      line-height: 20px;
+      font-size:30px;
+      z-index: 99999;
+      cursor: default;
     }
   }
 
-  /*分屏项*/
+  /*分屏项(栅格)*/
   .sitem2 {
     float:left;
     color:#000;
@@ -56,8 +61,8 @@
 /*9分屏*/
 .split_screen_nine {
   display: grid;
-  grid-template-columns: repeat(3,33.3333%);
-  grid-template-rows: repeat(3,33.3333%);
+  grid-template-columns: repeat(3,33.333333%);
+  grid-template-rows: repeat(3,33.333333%);
 }
 
 /*16分屏*/

src/renderer/components/BigShow.vue

@@ -29,11 +29,12 @@
                     @resizestop="(obj) => reSizeSignal(obj,itemV,item)"
             >
                 <div ref="signal">
+                    <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
                     <video-player
+                            ref="videoPlayer"
                             :options="playerOptions"
                             :playsinline="true"
                     >
-
                     </video-player>
                 </div>
             </VueDragResize>
@@ -67,11 +68,9 @@
                     sources: [],
                     techOrder: ['flash'],
                     autoplay: true,
-                    controls: true,
-                    /*flash: {
-                        swf: "static/video-js.swf"
-                    },*/
+                    controls: false,
                     fluid:true,
+                    aspectRatio: '200:93',
                     preload: 'auto',
                     notSupportedMessage: '此视频暂无法播放，请稍后再试',
                 }
@@ -142,7 +141,6 @@
 
             // 放大缩小信号源
             async reSizeSignal(obj,itemV,item) {
-                console.log(obj,item)
                 const arr = this.$data.streamWindows
                 // 找出当前改动的信号源
                 const currentItem = arr.filter(item => item.sourceId === itemV.sourceId)
@@ -161,6 +159,13 @@
                 // 调用大屏开窗接口
                 await reqRefreshView(data)
             },
+
+            // 关闭信号源
+            closeSignal(signal) {
+                const signalPreList = this.$store.state.signalPreList
+                const newSignalPreList = signalPreList.filter(item => item.sourceId !== signal.sourceId)
+                this.$store.dispatch('updateSignalPreList',newSignalPreList)
+            }
         },
 
         computed: {
@@ -192,6 +197,10 @@
                     group: "description",
                 }
             },
+
+            player() {
+                return this.$refs.videoPlayer.player
+            }
         },
 
         watch: {