完成按钮切换操作

src/renderer/components/BigShow.vue

@@ -50,6 +50,7 @@
     import {mapState} from 'vuex'
     import draggable from 'vuedraggable'
     import VueDragResize from 'vue-drag-resize'
+    import PubSub from 'pubsub-js'
 
     import '../assets/less/splitscreen.less'
     import {elePosition, getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
@@ -92,53 +93,8 @@
             VideoPlayer
         },
 
-        async beforeCreate() {
-            // 加载大屏json文件
-            const bigScreenJson = await getStaticFile('EnityBigScreen.Data')
-            // 过滤出显示的大屏
-            this.currentBigshow = bigScreenJson.filter(item => item.WindowID === this.window.ID)
-            if(this.currentBigshow.length){
-                // 给大屏对象进行初始化显示
-                const obj = {}
-                this.currentBigshow.forEach(item => {
-                    obj[item.ID] = {
-                        bindList:[],
-                        splitStatus:0,
-                        signalArr:[],
-                        width:item.Width,
-                        height:item.Height
-                    }
-                    const num = item.BindList.filter(item => item.DeviceID).length
-                    // 拼接屏数量
-                    for(let i=0;i<num;i++){
-                        obj[item.ID].bindList.push(i+1)
-                    }
-                    // 根据拼接屏数量得到分屏状态
-                    obj[item.ID].splitStatus = Math.floor(Math.sqrt(num)-1)
-                })
-                this.$store.dispatch('updateBigscreenObj',obj)
-
-                // 获取视频播放的配置对象
-                const preSingleList = await reqPreviewSourceList()
-                const videoPlayObj = {}
-                for(const item of preSingleList){
-                    videoPlayObj[item.sourceId] = {
-                        sources: [
-                            {
-                                "src": item.previewUrl,
-                                "type": "rtmp/flv"
-                            }
-                        ],
-                        techOrder: ['flash'],
-                        autoplay: true,
-                        controls: false,
-                        fluid:true,
-                        preload: 'auto',
-                        notSupportedMessage: '此视频暂无法播放，请稍后再试',
-                    }
-                }
-                this.videoPlayObj = videoPlayObj
-            }
+        created() {
+            this.initBigScreen()
         },
 
         updated() {
@@ -151,6 +107,10 @@
                 }
             })
         },
+        
+        beforeDestroy() {
+          PubSub.unsubscribe(this.update_screenobj)  
+        },
 
         methods: {
             // 大屏开窗接口提交
@@ -223,6 +183,56 @@
                     return `transform-origin: 0px 0px;transform:scaleY(${(itemV.height-videoHeight)/videoHeight+1})`
                 }
             },
+
+            // 大屏初始化
+            async initBigScreen() {
+                // 加载大屏json文件
+                const bigScreenJson = await getStaticFile('EnityBigScreen.Data')
+                // 过滤出显示的大屏
+                this.currentBigshow = bigScreenJson.filter(item => item.WindowID === this.window.ID)
+                if(this.currentBigshow.length){
+                    // 给大屏对象进行初始化显示
+                    const obj = {}
+                    bigScreenJson.forEach(item => {
+                        obj[item.ID] = {
+                            bindList:[],
+                            splitStatus:0,
+                            signalArr:[],
+                            width:item.Width,
+                            height:item.Height
+                        }
+                        const num = item.BindList.filter(item => item.DeviceID).length
+                        // 拼接屏数量
+                        for(let i=0;i<num;i++){
+                            obj[item.ID].bindList.push(i+1)
+                        }
+                        // 根据拼接屏数量得到分屏状态
+                        obj[item.ID].splitStatus = Math.floor(Math.sqrt(num)-1)
+                    })
+                    this.$store.dispatch('updateBigscreenObj',obj)
+
+                    // 获取视频播放的配置对象
+                    const preSingleList = await reqPreviewSourceList()
+                    const videoPlayObj = {}
+                    for(const item of preSingleList){
+                        videoPlayObj[item.sourceId] = {
+                            sources: [
+                                {
+                                    "src": item.previewUrl,
+                                    "type": "rtmp/flv"
+                                }
+                            ],
+                            techOrder: ['flash'],
+                            autoplay: true,
+                            controls: false,
+                            fluid:true,
+                            preload: 'auto',
+                            notSupportedMessage: '此视频暂无法播放，请稍后再试',
+                        }
+                    }
+                    this.videoPlayObj = videoPlayObj
+                }
+            }
         },
 
         computed: {
@@ -240,6 +250,8 @@
                         const bigScreenObj = this.$store.state.bigScreenObj
                         const bigScale = this.$store.state.bigScale
                         const positionNum = this.$store.state.positionNum
+                        
+                        console.log(bigscreenId,bigScreenObj)
 
                         const arr2 = []
                         arr.forEach(item => {
@@ -250,16 +262,18 @@
                         const otherSignals = arr2.filter(item => item.Id)
                         newObj[0].Id = guId()
                         newObj[0].bigscreenId = bigscreenId
-                        newObj[0].splitScreenStatus = bigScreenObj[bigscreenId].splitStatus + 1
-                        newObj[0].width = bigScreenObj[bigscreenId].width * bigScale / newObj[0].splitScreenStatus
-                        newObj[0].height = bigScreenObj[bigscreenId].height * bigScale / newObj[0].splitScreenStatus
-                        newObj[0].widthScale = newObj[0].width / (bigScreenObj[bigscreenId].width * bigScale)
-                        newObj[0].heightScale = newObj[0].height / (bigScreenObj[bigscreenId].height * bigScale)
-                        const positionInfo = elePosition(newObj[0].width,newObj[0].height,positionNum,this.screenPosition[bigscreenId].top,this.screenPosition[bigscreenId].left,bigScreenObj[bigscreenId].splitStatus+1)
-                        newObj[0].top = positionInfo.top - this.screenPosition[bigscreenId].top
-                        newObj[0].left = positionInfo.left - this.screenPosition[bigscreenId].left
-                        bigScreenObj[bigscreenId].signalArr = [...otherSignals,...newObj]
-                        this.refreshBigScreen(bigScreenObj,bigscreenId)
+                        if(bigScreenObj[bigscreenId]){
+                            newObj[0].splitScreenStatus = bigScreenObj[bigscreenId].splitStatus + 1
+                            newObj[0].width = bigScreenObj[bigscreenId].width * bigScale / newObj[0].splitScreenStatus
+                            newObj[0].height = bigScreenObj[bigscreenId].height * bigScale / newObj[0].splitScreenStatus
+                            newObj[0].widthScale = newObj[0].width / (bigScreenObj[bigscreenId].width * bigScale)
+                            newObj[0].heightScale = newObj[0].height / (bigScreenObj[bigscreenId].height * bigScale)
+                            const positionInfo = elePosition(newObj[0].width,newObj[0].height,positionNum,this.screenPosition[bigscreenId].top,this.screenPosition[bigscreenId].left,bigScreenObj[bigscreenId].splitStatus+1)
+                            newObj[0].top = positionInfo.top - this.screenPosition[bigscreenId].top
+                            newObj[0].left = positionInfo.left - this.screenPosition[bigscreenId].left
+                            bigScreenObj[bigscreenId].signalArr = [...otherSignals,...newObj]
+                            this.refreshBigScreen(bigScreenObj,bigscreenId)
+                        }
                     })
                 }
             },
@@ -289,5 +303,36 @@
                 return this.$refs.videoPlayer.player
             },
         },
+
+        watch: {
+            window: {
+                handler (newV, oldV) {
+                    if(newV.ID !== oldV){
+                        // 更新大屏对象
+                        this.initBigScreen()
+                    }
+                },
+                deep:true
+            }
+        }
     }
 </script>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/renderer/components/Button.vue

@@ -32,7 +32,7 @@
     import {mapState} from 'vuex'
     import PubSub from 'pubsub-js'
     import {getStaticFile} from "../../utils/tools"
-    import {OPEN_WINDOWS} from "../../utils/constant"
+    import {OPEN_WINDOWS, UPDATE_SCREENOBJ} from "../../utils/constant"
 
     export default {
         data() {

src/renderer/components/Image.vue

@@ -10,7 +10,6 @@
                     width:item.Width*bigScale + 'px',
                     height:item.Height*bigScale + 'px',
                     zIndex:item.ZIndex,
-                    display:item.IsVisibility ? 'block' : 'none',
                     backgroundRepeat:'no-repeat',
                     backgroundSize:'100% 100%',
                 }"

src/renderer/components/SignalList.vue

@@ -83,7 +83,7 @@
 
             end: function (evt) {
                 const bigscreenObj = this.$store.state.bigScreenObj
-                let len = bigscreenObj[evt.to.id].signalArr.length
+                let len = bigscreenObj[evt.to.id] ? bigscreenObj[evt.to.id].signalArr.length : 0
                 const count = evt.newIndex+1-len>0 ? evt.newIndex+1-len : 1
                 // 更新当前拖拽的位置
                 this.$store.dispatch('updatePositionNum',count)

src/renderer/components/Window.vue

@@ -13,7 +13,7 @@
                 backgroundRepeat:'no-repeat',
                 backgroundSize:'100% 100%',
              }"
-                :ref="item.ID"
+             :ref="item.ID"
         >
             <Button :window="item"/>
             <Label :window="item"/>
@@ -61,10 +61,21 @@
 
         mounted() {
             this.open_windows = PubSub.subscribe(OPEN_WINDOWS,(msg,data) => {
+                // 需要显示的window
+                let showWindows = []
                 for(const item of this.windows){
                     data.forEach(item2 => {
                         if(item.ID === item2){
                             item.IsVisibility = true
+                            showWindows.push(item)
+                        }
+                    })
+                }
+                // 需要隐藏的window
+                for(const item of this.windows){
+                    showWindows.forEach(item2 => {
+                        if(item2.GroupNumber === item.GroupNumber && item2.ID !== item.ID){
+                            item.IsVisibility = false
                         }
                     })
                 }

src/renderer/store/getters.js

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

src/utils/constant.js

@@ -1,2 +1,2 @@
 /*定义一些常量模块*/
-export const OPEN_WINDOWS = 'open_windows'
+export const OPEN_WINDOWS = 'open_windows'