多屏操作，通过计算属性来解决，正在解决中

src/renderer/components/BigShow.vue

@@ -4,7 +4,7 @@
         <draggable
                 v-for="item in currentBigshow"
                 element="div"
-                v-model="curSignalArr"
+                v-model="bigScreenObj[item.ID].signalArr"
                 :options="dragOptions2"
                 :class="['split_screen', bigScreenObj[item.ID].splitStatus === 0 ? 'split_screen_one' : bigScreenObj[item.ID].splitStatus === 1 ? 'split_screen_four' : bigScreenObj[item.ID].splitStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                 :style="{
@@ -111,15 +111,6 @@
         },
 
         updated() {
-            // 监视当前变动的大屏
-            const bigScreenObj = this.$store.state.bigScreenObj
-            const curOpeBigscreenId = this.$store.state.curOpeBigscreenId
-            if(curOpeBigscreenId){
-                const curSignalArr = bigScreenObj[curOpeBigscreenId].signalArr
-                this.$store.dispatch('updateCurSignalArr',curSignalArr)
-                // this.currentSignalArr = bigScreenObj[curOpeBigscreenId].signalArr
-            }
-
             // 获取大屏在视口中的位置
             this.currentBigshow.forEach(item => {
                 const screenDiv = document.getElementById(item.ID)
@@ -128,6 +119,13 @@
                     left:getElementLeft(screenDiv)
                 }
             })
+            
+            // 获取当前操作大屏的信号源数组
+            const bigScreenObj = this.$store.state.bigScreenObj
+            const curOpeBigscreenId = this.$store.state.curOpeBigscreenId
+            if(curOpeBigscreenId){
+                this.signals = bigScreenObj[curOpeBigscreenId].signalArr
+            }
         },
 
         methods: {
@@ -196,7 +194,7 @@
         },
 
         computed: {
-            ...mapState(['splitScreenStatus', 'bigScale','positionNum','bigScreenObj','curOpeBigscreenId','curSignalArr']),
+            ...mapState(['splitScreenStatus', 'bigScale','positionNum','bigScreenObj','curOpeBigscreenId']),
 
             signalPreList: {
                 get() {
@@ -234,41 +232,39 @@
                 }
             },
             
-            // 当前变动的信号源数组
-            curSignalArr: {
+            signals: {
                 get() {
-                    return this.$store.state.curSignalArr
+                    return this.signals
                 },
-
+                
                 set(arr) {
-                    const bigScreenObj = this.$store.state.bigScreenObj
-                    const curOpeBigscreenId = this.$store.state.curOpeBigscreenId
-                    const positionNum = this.$store.state.positionNum
-                    const bigScale = this.$store.state.bigScale
-                    const curBigScreen = bigScreenObj[curOpeBigscreenId]
+                    const val = this.$store.state.bigScreenObj
+                    const bigscreenId = this.$store.state.curOpeBigscreenId
+
                     let len = arr.length
-                    if(len>0){
-                        // 重新定义一个数组，对监视的信号源数组进行深度克隆，解决赋加Id一样的问题
-                        const arr2 = []
-                        arr.forEach(item => {arr2.push(JSON.parse(JSON.stringify(item)))})
+                    if(len){
+                        const signals = []
+                        arr.forEach(item => {signals.push(JSON.parse(JSON.stringify(item)))})
+                        // 删除数据的最后一项，重新赋值再添加
+                        signals.pop()
 
                         // 给新增的信号源进行赋值
-                        arr2[len-1].Id = guId()
-                        arr2[len-1].splitScreenStatus = curBigScreen.splitStatus + 1
-                        arr2[len-1].width = curBigScreen.width * bigScale / arr2[len-1].splitScreenStatus
-                        arr2[len-1].height = curBigScreen.height * bigScale / arr2[len-1].splitScreenStatus
-                        arr2[len-1].widthScale = arr2[len-1].width / (curBigScreen.width * bigScale)
-                        arr2[len-1].heightScale = arr2[len-1].height / (curBigScreen.height * bigScale)
-                        // 获取每个信号源的位置
-                        const res = elePosition(arr2[len-1].width,arr2[len-1].height,positionNum,this.screenPosition[curOpeBigscreenId].top,this.screenPosition[curOpeBigscreenId].left,arr2[len-1].splitScreenStatus)
-                        arr2[len-1].top = res.top - this.screenPosition[curOpeBigscreenId].top
-                        arr2[len-1].left = res.left - this.screenPosition[curOpeBigscreenId].left
+                        const signalObj = arr[len-1]
+                        signalObj.Id = guId()
+                        signalObj.splitScreenStatus = val[bigscreenId].splitStatus + 1
+                        signalObj.width = val[bigscreenId].width * bigScale / signalObj.splitScreenStatus
+                        signalObj.height = val[bigscreenId].height * bigScale / signalObj.splitScreenStatus
+                        signalObj.widthScale = signalObj.width / (val[bigscreenId].width * bigScale)
+                        signalObj.heightScale = signalObj.height / (val[bigscreenId].height * bigScale)
+                        const positionInfo = elePosition(signalObj.width,signalObj.height,positionNum,this.screenPosition[bigscreenId].top,this.screenPosition[bigscreenId].left,val[bigscreenId].splitStatus+1)
+                        signalObj.top = positionInfo.top - this.screenPosition[bigscreenId].top
+                        signalObj.left = positionInfo.left- this.screenPosition[bigscreenId].left
 
-                        console.log(arr2)
-                        this.$store.dispatch('updateCurSignalArr',arr2)
+                        console.log([...signals,signalObj],val)
+                        // this.$store.dispatch('secondUpdateBigscreenObj',[...signals,signalObj])
                     }
                 }
-            },       
+            },
             
             // 拖拽选线配置
             dragOptions1() {
@@ -299,24 +295,38 @@
         watch: {
             // 监视大屏对象的变化(深度监视)
             bigScreenObj: {
-                handler: function (val, oldVal) {
-                    /*const bigScale = this.$store.state.bigScale
+                /*handler: function (val, oldVal) {
+                    const bigscreenId = this.$store.state.curOpeBigscreenId
+                    const bigScale = this.$store.state.bigScale
                     const positionNum = this.$store.state.positionNum
-                    for (const key in val) {
-                        let len = val[key].signalArr.length
+                    if(bigscreenId){
+                        const arr = val[bigscreenId].signalArr
+                        let len = arr.length
+
                         if(len){
-                            const lastObj = val[key].signalArr[len-1]
-                            lastObj.Id = guId()
-                            lastObj.width = val[key].width*bigScale/(val[key].splitStatus+1)
-                            lastObj.height = val[key].height*bigScale/(val[key].splitStatus+1)
-                            const positionInfo = elePosition(lastObj.width,lastObj.height,positionNum,this.screenPosition[key].top,this.screenPosition[key].left,val[key].splitStatus+1)
-                            lastObj.top = positionInfo.top - this.screenPosition[key].top
-                            lastObj.left = positionInfo.left- this.screenPosition[key].left
+                            const signals = []
+                            arr.forEach(item => {signals.push(JSON.parse(JSON.stringify(item)))})
+                            // 删除数据的最后一项，重新赋值再添加
+                            signals.pop()
+
+                            // 给新增的信号源进行赋值
+                            const signalObj = arr[len-1]
+                            signalObj.Id = guId()
+                            signalObj.splitScreenStatus = val[bigscreenId].splitStatus + 1
+                            signalObj.width = val[bigscreenId].width * bigScale / signalObj.splitScreenStatus
+                            signalObj.height = val[bigscreenId].height * bigScale / signalObj.splitScreenStatus
+                            signalObj.widthScale = signalObj.width / (val[bigscreenId].width * bigScale)
+                            signalObj.heightScale = signalObj.height / (val[bigscreenId].height * bigScale)
+                            const positionInfo = elePosition(signalObj.width,signalObj.height,positionNum,this.screenPosition[bigscreenId].top,this.screenPosition[bigscreenId].left,val[bigscreenId].splitStatus+1)
+                            signalObj.top = positionInfo.top - this.screenPosition[bigscreenId].top
+                            signalObj.left = positionInfo.left- this.screenPosition[bigscreenId].left
+
+                            // console.log([...signals,signalObj],val)
+                            // this.$store.dispatch('secondUpdateBigscreenObj',[...signals,signalObj])
                         }
                     }
-                    this.$store.dispatch('updateBigscreenObj',val)*/
                 },
-                deep: true
+                deep:true*/
             },
 
             // 监视大屏中的信号源，只要变动，就调用回调函数

src/renderer/store/actions.js

@@ -1,7 +1,6 @@
 /*包含n个用于间接更新状态的方法的对象模块*/
 import {
     SAVE_USER,
-    RESET_USER,
     CLEAR_SCREEN,
     SPLIT_SCREEN,
     UPDATE_SIGNALPRELIST,
@@ -12,7 +11,7 @@ import {
     UPDATE_POSITIONNUM,
     UPDATE_BIGSCREENOBJ,
     UPDATE_CURRENTSCREENID,
-    UPDATE_CURSIGNALARR
+    SECOND_UPDATE_BIGSCREEN
 } from './mutation-types'
 
 export default {
@@ -22,11 +21,6 @@ export default {
     commit(SAVE_USER, {user})
   },
 
-  // 重置用户
-  resetUser ({commit}) {
-    commit(RESET_USER)
-  },
-
   // 清屏操作
   clearScreen({commit}) {
     commit(CLEAR_SCREEN)
@@ -62,7 +56,6 @@ export default {
     commit(UPDATE_SCALE,{bigScale})
   },
 
-
   // 更新信号源在第几个栅格中
   updatePositionNum({commit},positionNum) {
     commit(UPDATE_POSITIONNUM,{positionNum})
@@ -78,10 +71,10 @@ export default {
         commit(UPDATE_CURRENTSCREENID,{Id})
     },
 
-    // 更新当前操作的信号源数组
-    updateCurSignalArr({commit},arr) {
-        commit(UPDATE_CURSIGNALARR,{arr})
-    },
+    // 间接更新大屏对象（更新对象中改动的信号源数组）
+    secondUpdateBigscreenObj({commit},signals) {
+        commit(SECOND_UPDATE_BIGSCREEN,{signals})
+    }
 }
 
 

src/renderer/store/getters.js

@@ -2,19 +2,8 @@
 包含n个基于state的getter计算属性方法的对象模块
  */
 export default {
-
-  // 总数量
-  /*totalSize (state) {
-    return state.todos.length
-  },
-
-  // 完成的数量
-  completeSize (state) {
-    return state.todos.reduce((preTotal, todo) => preTotal + (todo.complete?1:0) ,0)
-  },
-
-  // 判断是否需要全选
-  isAllSelect (state, getters) {
-    return getters.completeSize===getters.totalSize && getters.completeSize>0
-  }*/
+    // 当前操作的大屏信号源数组
+    currentSignalArr(state) {
+        return state.bigScreenObj[state.curOpeBigscreenId].signalArr
+    }
 }

src/renderer/store/mutation-types.js

@@ -1,6 +1,5 @@
 /*包含n个mutation名称常量*/
 export const SAVE_USER = 'save_user' // 保存用户信息
-export const RESET_USER = 'reset_user' // 重置用户信息
 export const CLEAR_SCREEN = 'clear_screen' // 清屏操作
 export const SPLIT_SCREEN = 'split_screen' // 分屏操作
 export const UPDATE_SIGNALPRELIST = 'update_signalprelist' // 更新拖动到大屏中的信号源
@@ -11,5 +10,5 @@ export const UPDATE_SCALE = 'update_bigScale' // 更新元素缩放比例
 export const UPDATE_POSITIONNUM = 'update_positionnum' // 更新信号源在第几个栅格中
 export const UPDATE_BIGSCREENOBJ = 'update_bigscreenobj' // 更新大屏对象
 export const UPDATE_CURRENTSCREENID = 'update_currentscreenid' // 更新当前操作大屏id
-export const UPDATE_CURSIGNALARR = 'update_cursignalarr' // 更新当前操作的信号源数组
+export const SECOND_UPDATE_BIGSCREEN = 'second_update_bigscreen' // 间接更新大屏信号源
 

src/renderer/store/mutations.js

@@ -12,7 +12,7 @@ import {
     UPDATE_POSITIONNUM,
     UPDATE_BIGSCREENOBJ,
     UPDATE_CURRENTSCREENID,
-    UPDATE_CURSIGNALARR
+    SECOND_UPDATE_BIGSCREEN
 } from './mutation-types'
 
 import storageUtils from "../../utils/storageUtils"
@@ -80,8 +80,8 @@ export default {
         state.curOpeBigscreenId = Id
     },
 
-    // 更新当前操作的信号源数组
-    [UPDATE_CURSIGNALARR] (state,{arr}) {
-        state.curSignalArr = arr
+    // 间接更新大屏信号源数组
+    [SECOND_UPDATE_BIGSCREEN] (state,{signals}) {
+        state.bigScreenObj[state.curOpeBigscreenId].signalArr = signals
     },
 }

src/renderer/store/state.js

@@ -26,7 +26,4 @@ export default {
 
   // 监控当前正在操作的大屏Id
   curOpeBigscreenId:'',
-
-  // 当前操作的信号源数组
-  curSignalArr:[]
 }