解决切换分屏前的一次提交

src/renderer/components/BigShow.vue

@@ -15,6 +15,7 @@
                 :style="{
                     width:item.Width*bigScale + 'px',
                     height:item.Height*bigScale + 'px',
+                    position:'relative',
                     left:item.Left*bigScale+'px',
                     top:item.Top*bigScale+'px',
                     zIndex:item.ZIndex,
@@ -23,10 +24,12 @@
         >
             <VueDragResize
                     v-for="itemV in signalPreList" :key="itemV.Id" class="sitem"
-                    :w="item.Width*bigScale/itemV.splitScreenStatus" :h="item.Height*bigScale/itemV.splitScreenStatus"
-                    @dragstop="dragStop"
-                    @resizestop="(obj) => reSizeSignal(obj,itemV)"
-                    :style="{gridArea: gridPosition(itemV.splitScreenStatus,itemV.newIndex)}"
+                    @dragstop="dragStop" @resizestop="(obj) => reSizeSignal(obj,itemV)"
+                    :style="{
+                        gridArea: gridPosition(itemV.splitScreenStatus,itemV.newIndex),
+                        width:item.Width*bigScale/itemV.splitScreenStatus + 'px',
+                        height:item.Height*bigScale/itemV.splitScreenStatus + 'px',
+                    }"
             >
                 <div ref="signal">
                     {{itemV.deviceID}}
@@ -78,7 +81,7 @@
                     aspectRatio: '200:93',
                     preload: 'auto',
                     notSupportedMessage: '此视频暂无法播放，请稍后再试',
-                }
+                },
             }
         },
 
@@ -113,10 +116,25 @@
                 const signalList = this.$store.state.signalPreList
                 const currentElement = signalList.filter(item => item.sourceId === value.added.element.sourceId)
                 const otherElement = signalList.filter(item => item.sourceId !== value.added.element.sourceId)
-                console.log(value.added)
-                currentElement[currentElement.length-1].newIndex = value.added.newIndex
-                this.$store.dispatch('updateSignalPreList', [...otherElement,...currentElement])
-                console.log([...otherElement,...currentElement])
+
+                console.log(signalList)
+                console.log(value.added.newIndex)
+                const signalList2 = signalList.filter(item => item.newIndex)
+                // 考虑多种情况
+                // 1.正序排列
+                const flag = signalList2.every(item => item.newIndex < value.added.newIndex) || signalList.length === 1
+                console.log(flag)
+                if(flag){
+                    console.log('正序')
+                    currentElement[currentElement.length-1].newIndex = value.added.newIndex
+                    this.$store.dispatch('updateSignalPreList', [...otherElement,...currentElement])
+                    // console.log([...otherElement,...currentElement])
+                }else {
+                // 2.乱序
+                    console.log('乱序')
+                    currentElement[currentElement.length-1].newIndex = value.added.newIndex - signalList.length + 1
+                    this.$store.dispatch('updateSignalPreList', [...otherElement,...currentElement])
+                }
             },
 
             // 大屏开窗接口提交