利用信号源固定定位解决切换分屏影响信号源开窗位置的问题，同时也解决了拖放到指定栅格的问题

src/renderer/assets/less/splitscreen.less

@@ -15,7 +15,6 @@
     border: 1px solid #000000;
     color:#fff;
     background-color: #717171;
-    position: relative;
 
     // 关闭信号源开窗按钮
     .closeBtn {
@@ -37,7 +36,6 @@
   .sitem2 {
     color:#000;
     border: 1px solid #3b3b3b;
-    background-color: #0b0b0b;
     margin-right: -1px;
     margin-bottom: -1px;
   }
@@ -57,8 +55,6 @@
   grid-template-rows: repeat(2,50%);
 }
 
-
-
 /*9分屏*/
 .split_screen_nine {
   display: grid;

src/renderer/components/BigShow.vue

@@ -3,15 +3,13 @@
 <template>
     <div>
         <draggable
-                v-for="item in bigScreenJson"
                 element="div"
-                :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                 v-model="signalPreList"
-                handle=".handle"
                 :options="dragOptions2"
                 :move="onMove"
                 @change="log"
-                ref="bigscreen"
+                v-for="item in bigScreenJson"
+                :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                 :style="{
                     width:item.Width*bigScale + 'px',
                     height:item.Height*bigScale + 'px',
@@ -19,27 +17,29 @@
                     left:item.Left*bigScale+'px',
                     top:item.Top*bigScale+'px',
                     zIndex:item.ZIndex,
-                    display:item.IsVisibility ? 'black' : 'none',
+                    display:item.IsVisibility ? 'black' : 'none'
                 }"
+                id="bigscreen"
         >
             <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),
-                        width:item.Width*bigScale/itemV.splitScreenStatus + 'px',
-                        height:item.Height*bigScale/itemV.splitScreenStatus + 'px',
+                        position: 'fixed',
+                        top:itemV.top + 'px',
+                        left:itemV.left + 'px'
                     }"
             >
                 <div ref="signal">
                     {{itemV.deviceID}}
-                    <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
                     <!--<video-player
-                            ref="videoPlayer"
-                            :options="playerOptions"
-                            :playsinline="true"
-                    >
+                               ref="videoPlayer"
+                               :options="playerOptions"
+                               :playsinline="true"
+                       >
                     </video-player>-->
+                    <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
                 </div>
             </VueDragResize>
 
@@ -56,7 +56,7 @@
     import VueDragResize from 'vue-drag-resize'
 
     import '../assets/less/splitscreen.less'
-    import {getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
+    import {elePosition, getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
     import {reqRefreshView} from "../api"
     import VideoPlayer from "./player.vue"
 
@@ -67,6 +67,7 @@
                 bindList:[], // 拼接屏的数量
                 streamWindows:[], // 传递出去的信号源位置信息
                 bigScreenJson:[], // 大屏配置json文件
+                currentBigshow:[], // 当前大屏
                 playerOptions: { // rtmp视频流配置
                     sources: [
                         {
@@ -82,6 +83,8 @@
                     preload: 'auto',
                     notSupportedMessage: '此视频暂无法播放，请稍后再试',
                 },
+                screenPosition:{}, // 大屏在视口中的位置
+                newIndex: 1, // 开窗拖到第几个格子中
             }
         },
 
@@ -101,6 +104,15 @@
             this.$store.dispatch('splitScreen', Math.sqrt(num)-1)
         },
 
+        updated() {
+            // 获取大屏在视口中的位置
+            const screenDiv = document.getElementById('bigscreen')
+            this.screenPosition = {
+                top:getElementTop(screenDiv),
+                left:getElementLeft(screenDiv)
+            }
+        },
+
         methods: {
             // 移动信号源
             onMove({relatedContext, draggedContext}) {
@@ -117,21 +129,17 @@
                 const currentElement = signalList.filter(item => item.sourceId === value.added.element.sourceId)
                 const otherElement = signalList.filter(item => item.sourceId !== value.added.element.sourceId)
 
-                console.log(signalList)
-                console.log(value.added.newIndex)
+                this.newIndex = value.added.newIndex-signalList.length+1
+
                 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])
                 }
@@ -196,81 +204,6 @@
                 const signalPreList = this.$store.state.signalPreList
                 const newSignalPreList = signalPreList.filter(item => item.Id !== signal.Id)
                 this.$store.dispatch('updateSignalPreList',newSignalPreList)
-            },
-
-            // 获取栅格位置
-            gridPosition(splitStatus,count) {
-                if(splitStatus === 2){
-                    // 四分屏
-                    switch (count) {
-                        case 1:
-                            return '1/1/2/2'
-                        case 2:
-                            return '1/2/2/3'
-                        case 3:
-                            return '2/1/3/2'
-                        case 4:
-                            return '2/2/3/3'
-                    }
-                }else if(splitStatus === 3){
-                    // 九分屏
-                    switch (count) {
-                        case 1:
-                            return '1/1/2/2'
-                        case 2:
-                            return '1/2/2/3'
-                        case 3:
-                            return '1/3/2/4'
-                        case 4:
-                            return '2/1/3/2'
-                        case 5:
-                            return '2/2/3/3'
-                        case 6:
-                            return '2/3/3/4'
-                        case 7:
-                            return '3/1/4/2'
-                        case 8:
-                            return '3/2/4/3'
-                        case 9:
-                            return '3/3/4/4'
-                    }
-                }else if(splitStatus === 4){
-                    // 十六分屏
-                    switch (count) {
-                        case 1:
-                            return '1/1/2/2'
-                        case 2:
-                            return '1/2/2/3'
-                        case 3:
-                            return '1/3/2/4'
-                        case 4:
-                            return '1/4/2/5'
-                        case 5:
-                            return '2/1/3/2'
-                        case 6:
-                            return '2/2/3/3'
-                        case 7:
-                            return '2/3/3/4'
-                        case 8:
-                            return '2/4/3/5'
-                        case 9:
-                            return '3/1/4/2'
-                        case 10:
-                            return '3/2/4/3'
-                        case 11:
-                            return '3/3/4/4'
-                        case 12:
-                            return '3/4/4/5'
-                        case 13:
-                            return '4/1/5/2'
-                        case 14:
-                            return '4/2/5/3'
-                        case 15:
-                            return '4/3/5/4'
-                        case 16:
-                            return '4/4/5/5'
-                    }
-                }
             }
         },
 
@@ -283,11 +216,10 @@
                 },
 
                 set(arr) {
-                    if(arr.length>0){
+                    let len = arr.length
+                    if(len>0){
                         const arr2 = []
-                        arr.forEach(item => {
-                            arr2.push(JSON.parse(JSON.stringify(item)))
-                        })
+                        arr.forEach(item => {arr2.push(JSON.parse(JSON.stringify(item)))})
                         arr2.forEach((item,index) => {
                             item.Id = guId()
                             item.splitScreenStatus = this.$store.state.splitScreenStatus + 1
@@ -297,6 +229,18 @@
                             item.heightScale = item.height / (this.currentBigshow[0].Height * this.$store.state.bigScale)
                         })
                         this.$store.dispatch('updateSignalPreList', arr2)
+
+                        setTimeout(() => {
+                            let width = this.currentBigshow[0].Width*this.$store.state.bigScale/(this.$store.state.splitScreenStatus+1)
+                            let height = this.currentBigshow[0].Height*this.$store.state.bigScale/(this.$store.state.splitScreenStatus+1)
+
+                            const res = elePosition(width,height,this.newIndex,this.screenPosition.top,this.screenPosition.left,this.$store.state.splitScreenStatus+1)
+
+                            arr2[len-1].top = res.top
+                            arr2[len-1].left = res.left
+
+                            this.$store.dispatch('updateSignalPreList', arr2)
+                        })
                     }else {
                         this.$store.dispatch('updateSignalPreList', arr)
                     }
@@ -330,7 +274,6 @@
         watch: {
             // 监视大屏中的信号源，只要变动，就调用回调函数
             signalPreList: function (arr) {
-                // this.$store.dispatch('splitScreen',-1)
                 this.reqRefreshBigScreen(arr)
             },
 
@@ -345,7 +288,3 @@
         }
     }
 </script>
-
-<style scoped>
-
-</style>

src/utils/tools.js

@@ -53,27 +53,110 @@ export function guId() {
     });
 }
 
-// 根据给定的位置计算出栅格位置
-export function gridPosition(count) {
-    switch (count) {
-        case 1:
-            return '1/1/1/1'
-        case 2:
-            return '1/2/2/3'
-        case 3:
-            return '1/3/2/4'
-        case 4:
-            return '2/1/3/2'
-        case 5:
-            return '2/2/3/3'
-        case 6:
-            return '2/3/3/4'
-        case 7:
-            return '3/1/4/2'
-        case 8:
-            return '3/2/4/3'
-        case 9:
-            return '3/3/4/4'
+// 根据给定的位置给栅格元素进行定位
+export function gridPosition(splitStatus,count) {
+    if(splitStatus === 2){
+        // 四分屏
+        switch (count) {
+            case 1:
+                return '1/1/2/2'
+            case 2:
+                return '1/2/2/3'
+            case 3:
+                return '2/1/3/2'
+            case 4:
+                return '2/2/3/3'
+        }
+    }else if(splitStatus === 3){
+        // 九分屏
+        switch (count) {
+            case 1:
+                return '1/1/2/2'
+            case 2:
+                return '1/2/2/3'
+            case 3:
+                return '1/3/2/4'
+            case 4:
+                return '2/1/3/2'
+            case 5:
+                return '2/2/3/3'
+            case 6:
+                return '2/3/3/4'
+            case 7:
+                return '3/1/4/2'
+            case 8:
+                return '3/2/4/3'
+            case 9:
+                return '3/3/4/4'
+        }
+    }else if(splitStatus === 4){
+        // 十六分屏
+        switch (count) {
+            case 1:
+                return '1/1/2/2'
+            case 2:
+                return '1/2/2/3'
+            case 3:
+                return '1/3/2/4'
+            case 4:
+                return '1/4/2/5'
+            case 5:
+                return '2/1/3/2'
+            case 6:
+                return '2/2/3/3'
+            case 7:
+                return '2/3/3/4'
+            case 8:
+                return '2/4/3/5'
+            case 9:
+                return '3/1/4/2'
+            case 10:
+                return '3/2/4/3'
+            case 11:
+                return '3/3/4/4'
+            case 12:
+                return '3/4/4/5'
+            case 13:
+                return '4/1/5/2'
+            case 14:
+                return '4/2/5/3'
+            case 15:
+                return '4/3/5/4'
+            case 16:
+                return '4/4/5/5'
+        }
+    }
+}
+
+// 根据当前分屏的宽高和栅格位置和大屏在视口中的位置来确定元素定位
+export function elePosition(width,height,count,top,left,splitNum) {
+    if(splitNum === 2){
+        // 四分屏
+        if(count<=2){
+            return {top:top,left:left+(count-1)*width}
+        }else{
+            return {top:top+height,left:left+(count-3)*width}
+        }
+    }else if(splitNum === 3){
+        // 九分屏
+        if(count<=3){
+            return {top:top,left:left+(count-1)*width}
+        }else if(count<=6){
+            return {top:top+height,left:left+(count-4)*width}
+        }else{
+            return {top:top+2*height,left:left+(count-7)*width}
+        }
+    }else if(splitNum === 4){
+        // 十六分屏
+        if(count<=4){
+            return {top:top,left:left+(count-1)*width}
+        }else if(count<=8){
+            return {top:top+height,left:left+(count-5)*width}
+        }else if(count<=12){
+            return {top:top+2*height,left:left+(count-9)*width}
+        }else {
+            return {top:top+3*height,left:left+(count-13)*width}
+        }
     }
 }