Browse Source

解决多屏操作问题,未完全解决,继续加油

liuwei 4 years ago
parent
commit
9ca63f6bff

+ 54 - 23
src/renderer/components/BigShow.vue

@@ -4,7 +4,7 @@
         <draggable
                 v-for="item in currentBigshow"
                 element="div"
-                v-model="bigScreenObj[item.ID].signalArr"
+                v-model="signalPreList"
                 :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="{
@@ -32,7 +32,7 @@
                             :options="playerOptions"
                             :playsinline="true"
                     />-->
-                    <div class="closeBtn" @click.stop="closeSignal(item,itemV)">×</div>
+                    <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
                 </div>
             </VueDragResize>
 
@@ -119,13 +119,6 @@
                     left:getElementLeft(screenDiv)
                 }
             })
-            
-            // 获取当前操作大屏的信号源数组
-            const bigScreenObj = this.$store.state.bigScreenObj
-            const curOpeBigscreenId = this.$store.state.curOpeBigscreenId
-            if(curOpeBigscreenId){
-                this.signals = bigScreenObj[curOpeBigscreenId].signalArr
-            }
         },
 
         methods: {
@@ -184,19 +177,20 @@
             },
 
             // 关闭信号源
-            closeSignal(bigscreen,signal) {
+            closeSignal(signal) {
+                const bigscreenId = signal.bigscreenId
                 const bigScreenObj = this.$store.state.bigScreenObj
                 // 1.找出是哪个大屏下的信号源发生了改变,过滤掉删除的那个
-                const newSignalPreList = bigScreenObj[bigscreen.ID].signalArr.filter(item => item.Id !== signal.Id)
+                const newSignalPreList = this.bigScreenObj[bigscreenId].signalArr.filter(item => item.Id !== signal.Id)
                 // 2.重新赋值
-                bigScreenObj[bigscreen.ID].signalArr = newSignalPreList
+                bigScreenObj[bigscreenId].signalArr = newSignalPreList
             },
         },
 
         computed: {
-            ...mapState(['splitScreenStatus', 'bigScale','positionNum','bigScreenObj','curOpeBigscreenId']),
+            ...mapState(['splitScreenStatus', 'bigScale','positionNum','curOpeBigscreenId','bigScreenObj']),
 
-            signalPreList: {
+            /*signalPreList: {
                 get() {
                     return this.$store.state.signalPreList
                 },
@@ -230,9 +224,9 @@
                         this.$store.dispatch('updateSignalPreList', arr)
                     }
                 }
-            },
+            },*/
             
-            signals: {
+            /*signals: {
                 get() {
                     return this.signals
                 },
@@ -261,11 +255,48 @@
                         console.log([...arr2,lastObj])
                         // val[bigscreenId].signalArr = [...arr2,lastObj]
                         // this.$store.dispatch('updateBigscreenObj',val)
-                        /*signals.push(signalObj)
+                        /!*signals.push(signalObj)
                         console.log(val)
-                        this.$store.dispatch('updateBigscreenObj',val)*/
+                        this.$store.dispatch('updateBigscreenObj',val)*!/
                     }
                 }
+            },*/
+
+            signalPreList: {
+                get() {
+                    return this.$store.getters.currentSignalArr
+                },
+
+                set(arr) {
+                    const bigscreenId = this.$store.state.curOpeBigscreenId
+                    const bigScreenObj = this.$store.state.bigScreenObj
+                    const bigScale = this.$store.state.bigScale
+                    const positionNum = this.$store.state.positionNum
+
+                    const arr2 = []
+                    arr.forEach(item => {
+                        arr2.push(JSON.parse(JSON.stringify(item)))
+                    })
+
+                    let lastObj = arr2[arr.length-1]
+                    lastObj.Id = guId()
+                    lastObj.bigscreenId = bigscreenId
+                    lastObj.splitScreenStatus = bigScreenObj[bigscreenId].splitStatus + 1
+                    lastObj.width = bigScreenObj[bigscreenId].width * bigScale / lastObj.splitScreenStatus
+                    lastObj.height = bigScreenObj[bigscreenId].height * bigScale / lastObj.splitScreenStatus
+                    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)*/
+                }
             },
             
             // 拖拽选线配置
@@ -299,14 +330,14 @@
             bigScreenObj: {
                 handler: function (val) {
                     const bigscreenId = this.$store.state.curOpeBigscreenId
-                    if(bigscreenId){
-                        console.log(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){

+ 1 - 1
src/renderer/components/SignalList.vue

@@ -75,7 +75,7 @@
                 
                 // 更新当前操作大屏ID
                 this.$store.dispatch('updateCurBigscreenId',relatedContext.component.$el.id)
-                // 更新当前拖拽的位置
+                // 更新当前拖拽的位置(这里暂没有减去已有信号源的数量)
                 this.$store.dispatch('updatePositionNum',relatedContext.index-len)
 
                 const relatedElement = relatedContext.element

+ 3 - 1
src/renderer/store/getters.js

@@ -4,6 +4,8 @@
 export default {
     // 当前操作的大屏信号源数组
     currentSignalArr(state) {
-        return state.bigScreenObj[state.curOpeBigscreenId].signalArr
+        if(state.curOpeBigscreenId){
+            return state.bigScreenObj[state.curOpeBigscreenId].signalArr
+        }
     }
 }