解决分屏第一次定位栅格位置不准的bug

src/renderer/components/BigShow.vue

@@ -6,7 +6,6 @@
                 element="div"
                 v-model="signalPreList"
                 :options="dragOptions2"
-                :move="onMove"
                 @change="log"
                 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']"
@@ -114,22 +113,14 @@
         },
 
         methods: {
-            // 移动信号源
-            onMove({relatedContext, draggedContext}) {
-                const relatedElement = relatedContext.element
-                const draggedElement = draggedContext.element
-                return (
-                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
-                )
-            },
-
             // 改变信号源
             log(value) {
                 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)
 
-                this.newIndex = value.added.newIndex-signalList.length+1
+                // this.newIndex = value.added.newIndex-signalList.length+1
+                this.newIndex = this.$store.state.positionNum
 
                 const signalList2 = signalList.filter(item => item.newIndex)
                 // 考虑多种情况
@@ -208,7 +199,7 @@
         },
 
         computed: {
-            ...mapState(['splitScreenStatus', 'bigScale']),
+            ...mapState(['splitScreenStatus', 'bigScale','positionNum']),
 
             signalPreList: {
                 get() {
@@ -218,13 +209,14 @@
                 set(arr) {
                     let len = arr.length
                     if(len>0){
+                        // 对监视的信号源数组进行深度克隆，解决赋加Id一样的问题
                         const arr2 = []
                         arr.forEach(item => {arr2.push(JSON.parse(JSON.stringify(item)))})
+                        // 删除数据的最后一项，重新赋值再添加
                         arr2.pop()
 
-                        const signalObj = arr[len-1]
-
                         // 给新增的信号源进行赋值
+                        const signalObj = arr[len-1]
                         signalObj.Id = guId()
                         signalObj.splitScreenStatus = this.$store.state.splitScreenStatus + 1
                         signalObj.width = this.currentBigshow[0].Width * this.$store.state.bigScale / (this.$store.state.splitScreenStatus+1)
@@ -233,15 +225,13 @@
                         signalObj.heightScale = signalObj.height / (this.currentBigshow[0].Height * this.$store.state.bigScale)
                         this.$store.dispatch('updateSignalPreList', [...arr2,signalObj])
 
+                        // 添加定时器是为了得到最新的newIndex
                         setTimeout(() => {
                             let width = this.currentBigshow[0].Width*this.$store.state.bigScale/(signalObj.splitScreenStatus)
                             let height = this.currentBigshow[0].Height*this.$store.state.bigScale/(signalObj.splitScreenStatus)
-
                             const res = elePosition(width,height,this.newIndex,this.screenPosition.top,this.screenPosition.left,this.$store.state.splitScreenStatus+1)
-
                             signalObj.top = res.top
                             signalObj.left = res.left
-
                             this.$store.dispatch('updateSignalPreList', [...arr2,signalObj])
                         })
                     }else {

src/renderer/components/SignalList.vue

@@ -1,3 +1,5 @@
+<!--信号源列表组件-->
+
 <template>
     <draggable
             :style="{
@@ -17,8 +19,6 @@
             v-model="signalListJson"
             :options="dragOptions1"
             :move="onMove"
-            @start="isDragging=true"
-            @end="isDragging=false"
     >
         <!--列表项-->
         <div class="signal_item" v-for="item in signalListJson" :key="item.ID">
@@ -55,16 +55,19 @@
         methods: {
             // 移动信号源
             onMove({relatedContext, draggedContext}) {
+                const signalLength = this.$store.state.signalPreList.length
+                this.$store.dispatch('updatePositionNum',relatedContext.index-signalLength)
+
                 const relatedElement = relatedContext.element
                 const draggedElement = draggedContext.element
                 return (
                     (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
                 )
-            },
+            }
         },
 
         computed: {
-            ...mapState(['signalListJson','bigScale']),
+            ...mapState(['signalListJson','bigScale','signalPreList']),
             dragOptions1() {
                 return {
                     animation: 0,
@@ -85,7 +88,3 @@
         }
     }
 </script>
-
-<style scoped>
-
-</style>

src/renderer/store/actions.js

@@ -8,7 +8,8 @@ import {
   SAVE_BIGSCREEN,
   SAVE_SIGNALLIST,
   SAVE_DEVICE,
-  UPDATE_SCALE
+  UPDATE_SCALE,
+  UPDATE_POSITIONNUM
 } from './mutation-types'
 
 export default {
@@ -56,5 +57,11 @@ export default {
   // 更新元素缩放比例
   updateScale({commit},bigScale) {
     commit(UPDATE_SCALE,{bigScale})
+  },
+
+
+  // 更新信号源在第几个栅格中
+  updatePositionNum({commit},positionNum) {
+    commit(UPDATE_POSITIONNUM,{positionNum})
   }
 }

src/renderer/store/mutation-types.js

@@ -8,4 +8,5 @@ export const SAVE_BIGSCREEN = 'save_bigscreen' // 保存大屏数据
 export const SAVE_SIGNALLIST = 'save_signallist' // 保存信号源列表数据
 export const SAVE_DEVICE = 'save_device' // 保存设备数据
 export const UPDATE_SCALE = 'update_bigScale' // 更新元素缩放比例
+export const UPDATE_POSITIONNUM = 'update_positionnum' // 更新信号源在第几个栅格中
 

src/renderer/store/mutations.js

@@ -8,7 +8,8 @@ import {
   SAVE_BIGSCREEN,
   SAVE_SIGNALLIST,
   SAVE_DEVICE,
-  UPDATE_SCALE
+  UPDATE_SCALE,
+  UPDATE_POSITIONNUM
 } from './mutation-types'
 
 import storageUtils from "../../utils/storageUtils"
@@ -59,5 +60,10 @@ export default {
   // 更新元素缩放比例
   [UPDATE_SCALE] (state,{bigScale}) {
     state.bigScale = bigScale
+  },
+
+  // 更新信号源被拖带第几个栅格中
+  [UPDATE_POSITIONNUM] (state,{positionNum}) {
+    state.positionNum = positionNum
   }
 }

src/renderer/store/state.js

@@ -16,5 +16,8 @@ export default {
   bigScale:1,
 
   // 图片公共路径
-  imgPublicPath:''
+  imgPublicPath:'',
+
+  // 获取信号源拖到第几个栅格中
+  positionNum:1
 }

src/utils/tools.js

@@ -12,47 +12,6 @@ export function uniq(array){
     return temp;
 }
 
-// 获取绝对位置的横坐标和纵坐标
-export function getElementLeft(element){
-    var actualLeft = element.offsetLeft;
-    var current = element.offsetParent;
-    while (current !== null){
-        actualLeft += current.offsetLeft;
-        current = current.offsetParent;
-    }
-    return actualLeft;
-}
-
-export function getElementTop(element){
-    var actualTop = element.offsetTop;
-    var current = element.offsetParent;
-    while (current !== null){
-        actualTop += current.offsetTop;
-        current = current.offsetParent;
-    }
-    return actualTop;
-}
-
-// 通过axios静态获取本地资源
-export function getStaticFile(url) {
-    return new Promise(function (resolve) {
-        let promise
-        promise = axios.get(`static/Data/${url}`)
-
-        promise.then(function (response) {
-            resolve(response.data)
-        })
-    })
-}
-
-// 生产guid的工具函数
-export function guId() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
-        return v.toString(16);
-    });
-}
-
 // 根据给定的位置给栅格元素进行定位
 export function gridPosition(splitStatus,count) {
     if(splitStatus === 2){
@@ -128,9 +87,53 @@ export function gridPosition(splitStatus,count) {
     }
 }
 
+// 获取绝对位置的横坐标和纵坐标
+export function getElementLeft(element){
+    var actualLeft = element.offsetLeft;
+    var current = element.offsetParent;
+    while (current !== null){
+        actualLeft += current.offsetLeft;
+        current = current.offsetParent;
+    }
+    return actualLeft;
+}
+
+export function getElementTop(element){
+    var actualTop = element.offsetTop;
+    var current = element.offsetParent;
+    while (current !== null){
+        actualTop += current.offsetTop;
+        current = current.offsetParent;
+    }
+    return actualTop;
+}
+
+// 通过axios静态获取本地资源
+export function getStaticFile(url) {
+    return new Promise(function (resolve) {
+        let promise
+        promise = axios.get(`static/Data/${url}`)
+
+        promise.then(function (response) {
+            resolve(response.data)
+        })
+    })
+}
+
+// 生产guid的工具函数
+export function guId() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8)
+        return v.toString(16)
+    })
+}
+
 // 根据当前分屏的宽高和栅格位置和大屏在视口中的位置来确定元素定位
 export function elePosition(width,height,count,top,left,splitNum) {
-    if(splitNum === 2){
+    if(splitNum === 1){
+        // 1分屏
+        return {top:top,left:left}
+    }else if(splitNum === 2){
         // 四分屏
         if(count<=2){
             return {top:top,left:left+(count-1)*width}