多屏操作还有bug

src/renderer/components/BigShow.vue

@@ -22,8 +22,8 @@
                     v-for="itemV in bigScreenObj[item.ID].signalArr" :key="itemV.Id" class="sitem"
                     :w="itemV.width" :h="itemV.height" :parentLimitation="false"
                     :x="itemV.left" :y="itemV.top"
-                    @dragstop="() => dragStop(itemV)"
-                    @resizestop="() => resizeSignal(itemV)"
+                    @dragstop="(position) => dragStop(position,itemV,bigScreenObj,curOpeBigscreenId)"
+                    @resizestop="(size) => resizeSignal(size,itemV,bigScreenObj,curOpeBigscreenId)"
             >
                 <div ref="signal">
                     {{itemV.deviceID}}
@@ -123,57 +123,47 @@
 
         methods: {
             // 大屏开窗接口提交
-            reqRefreshBigScreen(arr) {
-                /*const streamWindows = []
-                setTimeout(async () => {
-                    const elementArr = this.$refs.signal ? this.$refs.signal.filter(item => item.clientWidth !== 0) : []
-                    if(elementArr){
-                        elementArr.forEach((item,index) => {
-                            // 获取元素绝对位置的横坐标和纵坐标
-                            const left = getElementLeft(item)
-                            const top = getElementTop(item)
-                            streamWindows.push({
-                                left,
-                                top,
-                                width:arr[index].width,
-                                height:arr[index].height,
-                                id:0,
-                                sourceId:arr[index].sourceId,
-                                widthScale:arr[index].width/(this.currentBigshow[0].Width*this.$store.state.bigScale),
-                                heightScale:arr[index].height/(this.currentBigshow[0].Height*this.$store.state.bigScale),
-                                orginRect:{}
-                            })
-                        })
-                        const data = {
-                            bigScreenId:this.currentBigshow[0].ID,
-                            streamWindows
-                        }
-                        this.streamWindows = streamWindows
-                        // 调用大屏开窗接口
-                        await reqRefreshView(data)
-                    }
-                })*/
+            async refreshBigScreen(obj,Id) {
+                if(Id){
+                    const signals = obj[Id].signalArr
+                    const streamWindows = signals.map(item => ({
+                        left:item.left + this.screenPosition[Id].left,
+                        top:item.top + this.screenPosition[Id].top,
+                        width:item.width,
+                        height:item.height,
+                        id:0,
+                        sourceId:item.sourceId,
+                        widthScale:item.widthScale,
+                        heightScale:item.heightScale,
+                        orginRect:{}
+                    }))
+                    /*console.log({
+                        bigScreenId:Id,
+                        streamWindows
+                    })*/
+                    await reqRefreshView({
+                        bigScreenId:Id,
+                        streamWindows
+                    })
+                }
             },
 
             // 拖动结束
-            dragStop(item) {
-                const arr2 = this.$store.state.signalPreList
-                this.reqRefreshBigScreen(arr2)
+            dragStop(positon,item,obj,Id) {
+                item.left = positon.left
+                item.top = positon.top
+                const arr = obj[Id].signalArr.filter(s => s.Id !== item.Id)
+                obj[Id].signalArr = [...arr,item]
+                this.refreshBigScreen(obj,Id)
             },
 
             // 缩放结束
-            async resizeSignal(itemV) {
-                /*const arr = this.$data.streamWindows
-                // 找出当前改动的信号源
-                const currentItem = arr.filter(item => item.sourceId === itemV.sourceId)
-                currentItem[0].width = obj.width
-                currentItem[0].height = obj.height
-                currentItem[0].widthScale = obj.width/(this.currentBigshow[0].Width*this.$store.state.bigScale)
-                currentItem[0].heightScale = obj.height/(this.currentBigshow[0].Height*this.$store.state.bigScale)
-                const otherItems = arr.filter(item => item.sourceId !== itemV.sourceId)
-                const newStreamWindows = [...currentItem,...otherItems]
-                this.streamWindows = newStreamWindows
-                this.reqRefreshBigScreen(newStreamWindows)*/
+            resizeSignal(size,item,obj,Id) {
+                item.width = size.width
+                item.height = size.height
+                const arr = obj[Id].signalArr.filter(s => s.Id !== item.Id)
+                obj[Id].signalArr = [...arr,item]
+                this.refreshBigScreen(obj,Id)
             },
 
             // 关闭信号源
@@ -184,84 +174,14 @@
                 const newSignalPreList = this.bigScreenObj[bigscreenId].signalArr.filter(item => item.Id !== signal.Id)
                 // 2.重新赋值
                 bigScreenObj[bigscreenId].signalArr = newSignalPreList
+                this.refreshBigScreen(bigScreenObj,bigscreenId)
             },
         },
 
         computed: {
             ...mapState(['splitScreenStatus', 'bigScale','positionNum','curOpeBigscreenId','bigScreenObj']),
-
-            /*signalPreList: {
-                get() {
-                    return this.$store.state.signalPreList
-                },
-
-                set(arr) {
-                    let len = arr.length
-                    const positionNum = this.$store.state.positionNum
-                    if(len>0){
-                        // 对监视的信号源数组进行深度克隆，解决赋加Id一样的问题
-                        const arr2 = []
-                        arr.forEach(item => {arr2.push(JSON.parse(JSON.stringify(item)))})
-                        // 删除数据的最后一项，重新赋值再添加
-                        arr2.pop()
-
-                        // 给新增的信号源进行赋值
-                        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)
-                        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)
-
-                        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)
-                    }
-                }
-            },*/
             
-            /*signals: {
-                get() {
-                    return this.signals
-                },
-                
-                set(arr) {
-                    const val = this.$store.state.bigScreenObj
-                    const bigscreenId = this.$store.state.curOpeBigscreenId
-                    const bigScale = this.$store.state.bigScale
-                    const positionNum = this.$store.state.positionNum
-                    
-                    let len = arr.length
-                    if(len){
-                        const arr2 = []
-                        arr.forEach(item => {arr2.push(JSON.parse(JSON.stringify(item)))})
-                        arr2.pop()
-                        const lastObj = arr[len-1]
-                        lastObj.Id = guId()
-                        lastObj.splitScreenStatus = val[bigscreenId].splitStatus + 1
-                        lastObj.width = val[bigscreenId].width * bigScale / lastObj.splitScreenStatus
-                        lastObj.height = val[bigscreenId].height * bigScale / lastObj.splitScreenStatus
-                        lastObj.widthScale = lastObj.width / (val[bigscreenId].width * bigScale)
-                        lastObj.heightScale = lastObj.height / (val[bigscreenId].height * bigScale)
-                        const positionInfo = elePosition(lastObj.width,lastObj.height,positionNum,this.screenPosition[bigscreenId].top,this.screenPosition[bigscreenId].left,val[bigscreenId].splitStatus+1)
-                        lastObj.top = positionInfo.top - this.screenPosition[bigscreenId].top
-                        lastObj.left = positionInfo.left - this.screenPosition[bigscreenId].left
-                        console.log([...arr2,lastObj])
-                        // val[bigscreenId].signalArr = [...arr2,lastObj]
-                        // this.$store.dispatch('updateBigscreenObj',val)
-                        /!*signals.push(signalObj)
-                        console.log(val)
-                        this.$store.dispatch('updateBigscreenObj',val)*!/
-                    }
-                }
-            },*/
-
+            // 当前变动的信号源数组监控
             signalPreList: {
                 get() {
                     return this.$store.getters.currentSignalArr
@@ -287,19 +207,14 @@
                     lastObj.widthScale = lastObj.width / (bigScreenObj[bigscreenId].width * bigScale)
                     lastObj.heightScale = lastObj.height / (bigScreenObj[bigscreenId].height * bigScale)
                     const positionInfo = elePosition(lastObj.width,lastObj.height,positionNum,this.screenPosition[bigscreenId].top,this.screenPosition[bigscreenId].left,bigScreenObj[bigscreenId].splitStatus+1)
-
                     lastObj.top = positionInfo.top - this.screenPosition[bigscreenId].top
                     lastObj.left = positionInfo.left - this.screenPosition[bigscreenId].left
                     bigScreenObj[bigscreenId].signalArr = arr2
-                    console.log(bigScreenObj)
-                    
-                   /*bigScreenObj[bigscreenId].signalArr = arr
-                    console.log(arr,bigScreenObj)
-                    this.$store.dispatch('updateBigscreenObj',bigScreenObj)*/
+                    this.refreshBigScreen(bigScreenObj,bigscreenId)
                 }
             },
             
-            // 拖拽选线配置
+            // 拖拽选项配置
             dragOptions1() {
                 return {
                     animation: 0,
@@ -326,58 +241,9 @@
         },
 
         watch: {
-            // 监视大屏对象的变化(深度监视)
-            bigScreenObj: {
-                handler: function (val) {
-                    const bigscreenId = this.$store.state.curOpeBigscreenId
-                    const bigScale = this.$store.state.bigScale
-                    const positionNum = this.$store.state.positionNum
-                    if(bigscreenId){
-
-                    }
-
-                    /*
-                   if(bigscreenId){
-                        /!*const arr = val[bigscreenId].signalArr
-                        let len = arr.length
-                        if(len){
-                            // 给新增的信号源进行赋值
-                            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
-                        }*!/
-                        
-                        const arr = []
-                        val[bigscreenId].signalArr.forEach(item => {
-                            arr.push(JSON.parse(JSON.stringify(item)))
-                        })
-
-                        arr.forEach(item => {
-                            item.Id = guId()
-                            item.splitScreenStatus = val[bigscreenId].splitStatus + 1
-                            item.width = val[bigscreenId].width * bigScale / item.splitScreenStatus
-                            item.height = val[bigscreenId].height * bigScale / item.splitScreenStatus
-                            item.widthScale = item.width / (val[bigscreenId].width * bigScale)
-                            item.heightScale = item.height / (val[bigscreenId].height * bigScale)
-                            const positionInfo = elePosition(item.width,item.height,positionNum,this.screenPosition[bigscreenId].top,this.screenPosition[bigscreenId].left,val[bigscreenId].splitStatus+1)
-                            item.top = positionInfo.top - this.screenPosition[bigscreenId].top
-                            item.left = positionInfo.left- this.screenPosition[bigscreenId].left
-                        })
-                    }*/
-                },
-                deep:true
-            },
-
             // 监视大屏中的信号源，只要变动，就调用回调函数
             signalPreList: function (arr) {
-                this.reqRefreshBigScreen(arr)
+                this.refreshBigScreen(arr)
             },
 
             // 监视分屏的状态
@@ -386,7 +252,7 @@
                 for (let i=0;i<(num+1)*(num+1);i++){
                     this.$data.bindList.push(i+1)
                 }
-                this.reqRefreshBigScreen(this.$data.streamWindows)
+                this.rfreshBigScreen(this.$data.streamWindows)
             }
         }
     }

src/renderer/components/SignalList.vue

@@ -72,11 +72,11 @@
                 // 首先要知道拖拽到哪个大屏
                 const bigscreenObj = this.$store.state.bigScreenObj
                 let len = bigscreenObj[relatedContext.component.$el.id].signalArr.length
-                
+                let index = relatedContext.index ? relatedContext.index : 1
+                // 更新当前拖拽的位置(这里暂没有减去已有信号源的数量)
+                this.$store.dispatch('updatePositionNum',index-len)
                 // 更新当前操作大屏ID
                 this.$store.dispatch('updateCurBigscreenId',relatedContext.component.$el.id)
-                // 更新当前拖拽的位置(这里暂没有减去已有信号源的数量)
-                this.$store.dispatch('updatePositionNum',relatedContext.index-len)
 
                 const relatedElement = relatedContext.element
                 const draggedElement = draggedContext.element