调整切换分屏影响开窗宽高变化问题

src/renderer/assets/less/splitscreen.less

@@ -14,7 +14,7 @@
   .sitem {
     border: 1px solid #000000;
     color:#fff;
-    background-color: #717171;
+    //background-color: #717171;
     position: relative;
 
     // 关闭信号源开窗按钮
@@ -35,7 +35,6 @@
 
   /*分屏项(栅格)*/
   .sitem2 {
-    float:left;
     color:#000;
     border: 1px solid #3b3b3b;
     background-color: #0b0b0b;

src/renderer/components/BigShow.vue

@@ -23,7 +23,7 @@
         >
             <VueDragResize
                     v-for="itemV in signalPreList" :key="itemV.deviceID" class="sitem"
-                    :w="item.Width*bigScale/(splitScreenStatus+1)" :h="item.Height*bigScale/(splitScreenStatus+1)"
+                    :w="item.Width*bigScale/itemV.splitScreenStatus" :h="item.Height*bigScale/itemV.splitScreenStatus"
                     :parentLimitation="false"
                     @dragstop="dragStop"
                     @resizestop="(obj) => reSizeSignal(obj,itemV,item)"
@@ -85,6 +85,7 @@
 
         async beforeCreate() {
             this.bigScreenJson = await getStaticFile('EnityBigScreen.Data')
+            this.currentBigshow = this.bigScreenJson.filter(item => item.IsVisibility === true)
             this.videoSourceJson = await getStaticFile('vidoe_source.json')
             this.$set(this.playerOptions,'sources',this.videoSourceJson)
         },
@@ -103,7 +104,7 @@
             reqRefreshBigScreen(arr) {
                 const streamWindows = []
                 setTimeout(async () => {
-                    const elementArr = this.$refs.signal ? this.$refs.signal.filter(item => item.clientHeight !== 0) : []
+                    const elementArr = this.$refs.signal ? this.$refs.signal.filter(item => item.clientWidth !== 0) : []
                     if(elementArr){
                         elementArr.forEach((item,index) => {
                             // 获取元素绝对位置的横坐标和纵坐标
@@ -112,17 +113,17 @@
                             streamWindows.push({
                                 left,
                                 top,
-                                width:this.bigScreenJson[0].Width*this.$store.state.bigScale/(this.splitScreenStatus+1),
-                                height:this.bigScreenJson[0].Height*this.$store.state.bigScale/(this.splitScreenStatus+1),
+                                width:arr[index].width,
+                                height:arr[index].height,
                                 id:0,
                                 sourceId:arr[index] ? arr[index].sourceId : '',
-                                widthScale:1/(this.splitScreenStatus+1),
-                                heightScale:1/(this.splitScreenStatus+1),
+                                widthScale:arr[index].width/(this.currentBigshow[0].Width*this.$store.state.bigScale),
+                                heightScale:arr[index].height/(this.currentBigshow[0].Height*this.$store.state.bigScale),
                                 orginRect:{}
                             })
                         })
                         const data = {
-                            bigScreenId:this.bigScreenJson[0].ID,
+                            bigScreenId:this.currentBigshow[0].ID,
                             streamWindows
                         }
                         console.log(data)
@@ -134,30 +135,24 @@
             },
 
             // 拖动结束
-            dragStop(obj) {
+            dragStop() {
                 const arr = this.$store.state.signalPreList
                 this.reqRefreshBigScreen(arr)
             },
 
             // 放大缩小信号源
-            async reSizeSignal(obj,itemV,item) {
+            async reSizeSignal(obj,itemV) {
                 const arr = this.$data.streamWindows
                 // 找出当前改动的信号源
                 const currentItem = arr.filter(item => item.sourceId === itemV.sourceId)
-                currentItem[0].widthScale = currentItem[0].widthScale*obj.width/currentItem[0].width
-                currentItem[0].heightScale = currentItem[0].heightScale*obj.height/currentItem[0].height
+                /*currentItem[0].widthScale = obj.width/currentItem[0].width
+                currentItem[0].heightScale = obj.height/currentItem[0].height*/
                 currentItem[0].width = obj.width
                 currentItem[0].height = obj.height
                 const otherItems = arr.filter(item => item.sourceId !== itemV.sourceId)
                 const newStreamWindows = [...currentItem,...otherItems]
-                const data = {
-                    bigScreenId:this.bigScreenJson[0].ID,
-                    streamWindows:newStreamWindows
-                }
-                console.log(data)
                 this.streamWindows = newStreamWindows
-                // 调用大屏开窗接口
-                await reqRefreshView(data)
+                this.reqRefreshBigScreen(newStreamWindows)
             },
 
             // 关闭信号源
@@ -176,6 +171,14 @@
                     return this.$store.state.signalPreList
                 },
                 set(arr) {
+                    if(arr.length>0){
+                        let index = arr.length-1
+                        arr[index].splitScreenStatus = this.$store.state.splitScreenStatus+1
+                        arr[index].width = this.currentBigshow[0].Width*this.$store.state.bigScale/arr[index].splitScreenStatus,
+                        arr[index].height = this.currentBigshow[0].Height*this.$store.state.bigScale/arr[index].splitScreenStatus,
+                        this.$store.dispatch('updateSignalPreList',arr)
+                        return
+                    }
                     this.$store.dispatch('updateSignalPreList',arr)
                 }
             },