多屏问题太复杂，未解决

src/renderer/components/BigShow.vue

@@ -1,13 +1,11 @@
 <!--大屏显示组件-->
-
 <template>
     <div>
         <draggable
                 v-for="item in currentBigshow"
                 element="div"
-                v-model="bigScreenObj[item.ID].signalArr"
+                v-model="curSignalArr"
                 :options="dragOptions2"
-                @change="log"
                 :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="{
                     float:'left',
@@ -25,14 +23,14 @@
                     :w="itemV.width" :h="itemV.height" :parentLimitation="false"
                     :x="itemV.left" :y="itemV.top"
                     @dragstop="(obj) => dragStop(obj,itemV)"
-                    @resizestop="(obj) => reSizeSignal(obj,itemV)"
+                    @resizestop="(obj) => resizeSignal(obj,itemV)"
             >
                 <div ref="signal">
                     {{itemV.deviceID}}
                     <!--<VideoPlayer
-                               ref="videoPlayer"
-                               :options="playerOptions"
-                               :playsinline="true"
+                            ref="videoPlayer"
+                            :options="playerOptions"
+                            :playsinline="true"
                     />-->
                     <div class="closeBtn" @click.stop="closeSignal(item,itemV)">×</div>
                 </div>
@@ -76,7 +74,6 @@
                     notSupportedMessage: '此视频暂无法播放，请稍后再试',
                 },
                 screenPosition:{}, // 大屏在视口中的位置
-                newIndex: 1, // 开窗拖到第几个格子中
             }
         },
 
@@ -87,7 +84,9 @@
         },
 
         async beforeCreate() {
+            // 加载大屏json文件
             const bigScreenJson = await getStaticFile('EnityBigScreen.Data')
+            // 过滤出显示的大屏
             this.currentBigshow = bigScreenJson.filter(item => item.IsVisibility === true)
 
             // 给大屏对象进行初始化显示
@@ -109,45 +108,32 @@
                 obj[item.ID].splitStatus = Math.floor(Math.sqrt(num)-1)
             })
             this.$store.dispatch('updateBigscreenObj',obj)
-
-            /*const num = this.currentBigshow[0].BindList.length
-            for(let i=0;i<num;i++){
-                this.$data.bindList.push(i+1)
-            }
-            this.$store.dispatch('splitScreen', Math.sqrt(num)-1)*/
         },
 
         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)
                 this.screenPosition[item.ID] = {
                     top:getElementTop(screenDiv),
                     left:getElementLeft(screenDiv)
                 }
             })
-
-            /*const bigscreenObj = this.$store.state.bigScreenObj
-            for(const key in bigscreenObj){
-                const signalArr = bigscreenObj[key].signalArr
-                let len = signalArr.length
-                if(len){
-                    // 给新增的信号源进行赋值
-                    const signalObj = signalArr[len-1]
-                    signalObj.Id = guId()
-                }
-            }*/
         },
 
         methods: {
-            // 改变信号源
-            log() {
-                this.newIndex = this.$store.state.positionNum
-            },
-
             // 大屏开窗接口提交
             reqRefreshBigScreen(arr) {
-                const streamWindows = []
+                /*const streamWindows = []
                 setTimeout(async () => {
                     const elementArr = this.$refs.signal ? this.$refs.signal.filter(item => item.clientWidth !== 0) : []
                     if(elementArr){
@@ -175,22 +161,17 @@
                         // 调用大屏开窗接口
                         await reqRefreshView(data)
                     }
-                })
+                })*/
             },
 
             // 拖动结束
             dragStop(obj,item) {
-                /*const arr = this.$store.state.signalPreList.filter(a => a.Id !== item.Id)
-                item.top = this.screenPosition.top + obj.top
-                item.left = this.screenPosition.left + obj.left
-                this.$store.dispatch('updateSignalPreList',[...arr,item])*/
-
                 const arr2 = this.$store.state.signalPreList
                 this.reqRefreshBigScreen(arr2)
             },
 
-            // 放大缩小信号源(缩放结束事件)
-            async reSizeSignal(obj,itemV) {
+            // 缩放结束
+            async resizeSignal(obj,itemV) {
                 const arr = this.$data.streamWindows
                 // 找出当前改动的信号源
                 const currentItem = arr.filter(item => item.sourceId === itemV.sourceId)
@@ -211,13 +192,11 @@
                 const newSignalPreList = bigScreenObj[bigscreen.ID].signalArr.filter(item => item.Id !== signal.Id)
                 // 2.重新赋值
                 bigScreenObj[bigscreen.ID].signalArr = newSignalPreList
-                // 3.更新
-                this.$store.dispatch('updateBigscreenObj',bigScreenObj)
             }
         },
 
         computed: {
-            ...mapState(['splitScreenStatus', 'bigScale','positionNum','bigScreenObj']),
+            ...mapState(['splitScreenStatus', 'bigScale','positionNum','bigScreenObj','curOpeBigscreenId','curSignalArr']),
 
             signalPreList: {
                 get() {
@@ -226,6 +205,7 @@
 
                 set(arr) {
                     let len = arr.length
+                    const positionNum = this.$store.state.positionNum
                     if(len>0){
                         // 对监视的信号源数组进行深度克隆，解决赋加Id一样的问题
                         const arr2 = []
@@ -241,24 +221,56 @@
                         signalObj.height = this.currentBigshow[0].Height * this.$store.state.bigScale / (this.$store.state.splitScreenStatus+1)
                         signalObj.widthScale = signalObj.width / (this.currentBigshow[0].Width * this.$store.state.bigScale)
                         signalObj.heightScale = signalObj.height / (this.currentBigshow[0].Height * this.$store.state.bigScale)
-                        signalObj.isFixed = true // 是否使用固定定位
-                        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 - this.screenPosition.top
-                            signalObj.left = res.left - this.screenPosition.left
-                            this.$store.dispatch('updateSignalPreList', [...arr2,signalObj])
-                        })
+                        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,positionNum,this.screenPosition.top,this.screenPosition.left,this.$store.state.splitScreenStatus+1)
+                        signalObj.top = res.top - this.screenPosition.top
+                        signalObj.left = res.left - this.screenPosition.left
+                        this.$store.dispatch('updateSignalPreList', [...arr2,signalObj])
                     }else {
                         this.$store.dispatch('updateSignalPreList', arr)
                     }
                 }
             },
+            
+            // 当前变动的信号源数组
+            curSignalArr: {
+                get() {
+                    return this.$store.state.curSignalArr
+                },
 
+                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]
+                    let len = arr.length
+                    if(len>0){
+                        // 重新定义一个数组，对监视的信号源数组进行深度克隆，解决赋加Id一样的问题
+                        const arr2 = []
+                        arr.forEach(item => {arr2.push(JSON.parse(JSON.stringify(item)))})
+
+                        // 给新增的信号源进行赋值
+                        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
+
+                        console.log(arr2)
+                        this.$store.dispatch('updateCurSignalArr',arr2)
+                    }
+                }
+            },       
+            
+            // 拖拽选线配置
             dragOptions1() {
                 return {
                     animation: 0,
@@ -288,22 +300,21 @@
             // 监视大屏对象的变化(深度监视)
             bigScreenObj: {
                 handler: function (val, oldVal) {
-                    const bigScale = this.$store.state.bigScale
+                    /*const bigScale = this.$store.state.bigScale
+                    const positionNum = this.$store.state.positionNum
                     for (const key in val) {
                         let len = val[key].signalArr.length
-                        if(len>0){
-                            const arr = []
-                            val[key].signalArr.forEach(item => {arr.push(JSON.parse(JSON.stringify(item)))})
-                            arr.pop()
-
-                            arr[len-1].Id = guId()
-                            arr[len-1].width = val[key].width*bigScale/(val[key].splitStatus+1)
-                            arr[len-1].height = val[key].height*bigScale/(val[key].splitStatus+1)
-
-                            console.log(arr)
+                        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
                         }
                     }
-                    this.$store.dispatch('updateBigscreenObj',val)
+                    this.$store.dispatch('updateBigscreenObj',val)*/
                 },
                 deep: true
             },

src/renderer/components/SignalList.vue

@@ -70,12 +70,14 @@
         methods: {
             // 移动信号源
             onMove({relatedContext, draggedContext}) {
-                // 1.首先要知道拖拽到哪个大屏
+                // 首先要知道拖拽到哪个大屏
                 const bigscreenObj = this.$store.state.bigScreenObj
                 let len = bigscreenObj[relatedContext.component.$el.id].signalArr.length
-                console.log(relatedContext.index-len)
-
-                // this.$store.dispatch('updatePositionNum',relatedContext.index-signalLength)
+                
+                // 更新当前操作大屏ID
+                this.$store.dispatch('updateCurBigscreenId',relatedContext.component.$el.id)
+                // 更新当前拖拽的位置
+                this.$store.dispatch('updatePositionNum',relatedContext.index-len)
 
                 const relatedElement = relatedContext.element
                 const draggedElement = draggedContext.element

src/renderer/store/actions.js

@@ -10,7 +10,9 @@ import {
     SAVE_DEVICE,
     UPDATE_SCALE,
     UPDATE_POSITIONNUM,
-    UPDATE_BIGSCREENOBJ
+    UPDATE_BIGSCREENOBJ,
+    UPDATE_CURRENTSCREENID,
+    UPDATE_CURSIGNALARR
 } from './mutation-types'
 
 export default {
@@ -70,6 +72,16 @@ export default {
   updateBigscreenObj({commit},obj) {
     commit(UPDATE_BIGSCREENOBJ,{obj})
   },
+
+    // 更新当前操作大屏id
+    updateCurBigscreenId({commit},Id) {
+        commit(UPDATE_CURRENTSCREENID,{Id})
+    },
+
+    // 更新当前操作的信号源数组
+    updateCurSignalArr({commit},arr) {
+        commit(UPDATE_CURSIGNALARR,{arr})
+    },
 }
 
 

src/renderer/store/mutation-types.js

@@ -10,4 +10,6 @@ export const SAVE_DEVICE = 'save_device' // 保存设备数据
 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' // 更新当前操作的信号源数组
 

src/renderer/store/mutations.js

@@ -10,7 +10,9 @@ import {
     SAVE_DEVICE,
     UPDATE_SCALE,
     UPDATE_POSITIONNUM,
-    UPDATE_BIGSCREENOBJ
+    UPDATE_BIGSCREENOBJ,
+    UPDATE_CURRENTSCREENID,
+    UPDATE_CURSIGNALARR
 } from './mutation-types'
 
 import storageUtils from "../../utils/storageUtils"
@@ -72,4 +74,14 @@ export default {
   [UPDATE_BIGSCREENOBJ] (state,{obj}) {
     state.bigScreenObj = obj
   },
+
+    // 更新当前操作大屏Id
+    [UPDATE_CURRENTSCREENID] (state,{Id}) {
+        state.curOpeBigscreenId = Id
+    },
+
+    // 更新当前操作的信号源数组
+    [UPDATE_CURSIGNALARR] (state,{arr}) {
+        state.curSignalArr = arr
+    },
 }

src/renderer/store/state.js

@@ -22,5 +22,11 @@ export default {
   staticUrl:global.__static.substring(global.__static.length - 6, global.__static.length),
 
   // 存储多个大屏信号源信息的对象
-  bigScreenObj:{}
+  bigScreenObj:{},
+
+  // 监控当前正在操作的大屏Id
+  curOpeBigscreenId:'',
+
+  // 当前操作的信号源数组
+  curSignalArr:[]
 }