梳理按钮切换问题

src/renderer/App.vue

@@ -33,15 +33,19 @@
           if(result[0].ID){
             console.log('上传设备配置文件成功!')
 
-            // 获取大屏,信号源，设备数据并保存到vuex中
+            // 获取大屏,信号源，设备数据，label数据并保存到vuex中
             const bigScreenJson = await reqBigScreen()
             const signalListJson = await reqPreviewSourceList()
             const deviceJson = await reqDevice()
             const labelJson = await getStaticFile('EnityLable.Data')
+            const imageJson = await getStaticFile('EnityImage.Data')
+            const bigshowJson = await getStaticFile('EnityBigScreen.Data')
             this.$store.dispatch('saveBigscreen',bigScreenJson.filter(item => item.IsVisibility === true))
+            this.$store.dispatch('updateLabelJson',labelJson)
+            this.$store.dispatch('updateImageJson',imageJson)
             this.$store.dispatch('saveSignalList',signalListJson)
             this.$store.dispatch('saveDevice',deviceJson)
-            this.$store.dispatch('updateLabelJson',labelJson)
+            this.$store.dispatch('updateBigshowJson',bigshowJson)
           }
         }
       })

src/renderer/api/index.js

@@ -7,6 +7,7 @@ import ajax from './ajax'
 
 let BASE_URL
 
+// 获取基本路径
 axios.get('static/Data/EnitySystem.data').then(async res => {
     if (res.status === 200) {
         BASE_URL = `${res.data ? res.data.ServerIP : ''}:${res.data ? res.data.ServerPort : ''}`

src/renderer/components/BigShow.vue

@@ -47,6 +47,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"
@@ -89,6 +90,10 @@
         },
 
         async beforeCreate() {
+            /*this.updateCurrentBigScreen = PubSub.subscribe('updateCurrentBigScreen',(msg,data) => {
+                this.currentBigshow = data
+            })*/
+            
             // 加载大屏json文件
             const bigScreenJson = await getStaticFile('EnityBigScreen.Data')
             // 过滤出显示的大屏
@@ -147,6 +152,10 @@
             })
         },
 
+        beforeDestroy() {
+            // PubSub.unsubscribe(this.updateCurrentBigScreen)
+        },
+
         methods: {
             // 大屏开窗接口提交
             async refreshBigScreen(obj,Id) {
@@ -221,7 +230,7 @@
         },
 
         computed: {
-            ...mapState(['splitScreenStatus', 'bigScale','positionNum','curOpeBigscreenId','bigScreenObj','signalListJson']),
+            ...mapState(['splitScreenStatus', 'bigScale','positionNum','curOpeBigscreenId','bigScreenObj','signalListJson','bigshowJson']),
             
             // 当前变动的信号源数组监控
             signalPreList: {

src/renderer/components/Button.vue

@@ -31,8 +31,8 @@
 
 <script>
     import {mapState} from 'vuex'
+    import PubSub from 'pubsub-js'
     import {getStaticFile} from "../../utils/tools"
-    import {reqRefreshView} from "../api"
 
     export default {
         data() {
@@ -44,8 +44,6 @@
                 count5: 0, // 安卓分布式按钮
                 buttonJson: [], // 所有按钮
                 slideJson: [], // 所有滑条
-                hiddenBtns:[], // 保存需要隐藏的按钮
-                hiddenLabels:[], // 保存需要隐藏的label
                 staticUrl:this.$store.state.staticUrl, // 资源路径
             }
         },
@@ -74,7 +72,7 @@
         },
 
         computed: {
-            ...mapState(['bigScale','labelJson']),
+            ...mapState(['bigScale','labelJson','imageJson','bigshowJson']),
         },
 
         methods: {
@@ -88,35 +86,51 @@
                     // 1.当前按下的按钮处于激活状态
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
 
-                    // 2.1让已经打开的控制按钮隐藏
-                    if(this.hiddenBtns.length){
-                        this.hiddenBtns.forEach(item => {
-                            item.IsVisibility = false
-                        })
-                    }
-
-                    // 2.2 让已经打开的label隐藏
-                    if(this.hiddenLabels.length){
-                        this.hiddenLabels.forEach(item => {
-                            item.IsVisibility = false
-                        })
-                    }
-
-                    // 3.切换界面
+                    // 2.切换界面
+                    // 2.1按钮
                     this.buttonJson.forEach(item => {
-                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
-                            item.IsVisibility = true
-                            this.hiddenBtns.push(item)
+                        for(const btn of e.MouseDownActionList){
+                           if(btn.SourceID === item.WindowID){
+                               item.IsVisibility = true
+                           }
                         }
                     })
+                    // 2.2 label
                     this.$store.state.labelJson.forEach(item => {
-                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
-                            item.IsVisibility = true
-                            this.hiddenLabels.push(item)
+                        for(const btn of e.MouseDownActionList){
+                            if(btn.SourceID === item.WindowID){
+                                item.IsVisibility = true
+                            }
                         }
                     })
-
-                    // 4.其他按钮处于未激活状态
+                    // 2.3 image
+                    this.$store.state.imageJson.forEach(item => {
+                        for(const btn of e.MouseDownActionList){
+                            if(btn.SourceID === item.WindowID){
+                                item.IsVisibility = true
+                            }
+                        }
+                    })
+                    // 2.4 大屏
+                    // this.$store.state.bigshowJson.forEach(item => {
+                    //     if(flag){
+                    //         for(const btn of this.preBtnSourceList){
+                    //             if(btn.SourceID === item.WindowID){
+                    //                 item.IsVisibility = false
+                    //             }
+                    //         }
+                    //     }
+                    //
+                    //     for(const btn of e.MouseDownActionList){
+                    //         if(btn.SourceID === item.WindowID){
+                    //             item.IsVisibility = true
+                    //         }
+                    //     }
+                    // })
+                    // 发布消息，更新当前要显示的大屏
+                    // PubSub.publish('updateCurrentBigScreen',this.$store.state.bigshowJson.filter(item => item.IsVisibility))
+
+                    // 3.其他按钮处于未激活状态
                     const otherBtns = controlBtns.filter(item => item !== e)
                     otherBtns.forEach(item => {
                         this.$refs[item.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${item.BackIcon}`) + ')'
@@ -133,177 +147,6 @@
                         e.isOpen = false
                     }
                 }
-
-                /*const bigscreenObj = this.$store.state.bigScreenObj
-                // 只有一个大屏，获取对象的第一个key
-                const firstKey = Object.keys(bigscreenObj)[0]
-
-                // 预案管理声音开关
-                if (e.ID === '355d3c32-1502-40b4-9ddd-663d5b8469e7') {
-                    if (this.count % 2 === 0) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                        ++this.count
-                    } else {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
-                        ++this.count
-                    }
-                    return
-                }
-
-                // 切换屏幕
-                if (e.Text === 'LCD屏' || e.Text === 'LED屏' || e.Text === '投影机') {
-                    if (this.count4 === 0) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                        ++this.count4
-                    } else if (e !== this.lastData4) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                        this.lastBtn4.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData4.BackIcon}`) + ')'
-                    }
-                    // 保存点过的这个按钮和按钮数据
-                    this.lastBtn4 = this.$refs[e.ID][0]
-                    this.lastData4 = e
-
-                    // 首先清屏
-                    this.$store.dispatch('clearScreen')
-                    this.arr.forEach(item => {
-                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
-                            item.IsVisibility = true
-                        } else {
-                            item.IsVisibility = false
-                        }
-                    })
-                    return
-                }
-
-                // 预案管理按钮处理
-                if (e.Name.includes('V0') && e.Name.slice(7) * 1 > 62 && e.Name.slice(7) * 1 < 72) {
-                    if (this.count2 === 0) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                        ++this.count2
-                    } else if (e !== this.lastData) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                        this.lastBtn.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData.BackIcon}`) + ')'
-                    }
-                    // 保存点过的按钮和按钮数据
-                    this.lastBtn = this.$refs[e.ID][0]
-                    this.lastData = e
-                    return
-                }
-
-                // 5个管理控制按钮处理
-                if (e.Name.includes('V0--Btn6') || e.Name.includes('V0--Btn61') || e.Name.includes('V0--Btn12') || e.Name.includes('V0--Btn58') || e.Name.includes('V0--Btn77')) {
-                    // （1）背景切换
-                    if (this.count3 === 0) {
-                        this.$refs[e.ID][0].style.backgroundImage = e.ActionIcon ? 'url('+`${this.staticUrl}/Data/${e.ActionIcon}`+')' : null
-                        ++this.count3
-                    } else if (e !== this.lastData3) {
-                        this.$refs[e.ID][0].style.backgroundImage = e.ActionIcon ? 'url('+`${this.staticUrl}/Data/${e.ActionIcon}`+')' : null
-
-                        this.lastBtn3.style.backgroundImage = this.lastData3.BackIcon ? 'url(' + `${this.staticUrl}/Data/${this.lastData3.BackIcon}` + ')' : null
-                    }
-                    // 保存点过的这个按钮和按钮数据
-                    this.lastBtn3 = this.$refs[e.ID][0]
-                    this.lastData3 = e
-
-                    // （2）界面切换
-                    // 按钮
-                    this.funcBtnArr.forEach((item, index) => {
-                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
-                            item.IsVisibility = true
-                        } else {
-                            item.IsVisibility = false
-                        }
-                    })
-
-                    // 标签
-                    this.funcLabArr.forEach((item, index) => {
-                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
-                            item.IsVisibility = true
-                        } else {
-                            item.IsVisibility = false
-                        }
-                    })
-
-                    // 滑块
-                    this.funSliderArr.forEach((item, index) => {
-                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
-                            item.IsVisibility = true
-                        } else {
-                            item.IsVisibility = false
-                        }
-                    })
-                    return
-                }
-
-                // 分屏和清屏操作
-                if (e.ID === '7775e508-c6a5-4044-8264-24772a24fa97' || e.ID === '95c5d676-46a5-4c46-b550-9bc013a59937' || e.ID === 'f47e84bb-c878-4b22-a9d6-eb2e307283bc') {
-                    // 清屏
-                    bigscreenObj[firstKey].signalArr = []
-                    // 发送请求
-                    const bigScreenId = this.$store.state.curOpeBigscreenId
-                    await reqRefreshView({
-                        bigScreenId,
-                        streamWindows:[]
-                    })
-                    this.$store.dispatch('updateBigscreenObj',bigscreenObj)
-                    return
-                } else if (e.ID === '49653a62-99cb-40e1-a513-60e42893adb7' || e.ID === 'd55c81a8-54d7-4d90-aad7-4f34c3ba3950' || e.ID === '4142ab5b-ce52-4655-a28d-724bfabb24f0') {
-                    // 自由屏
-                    bigscreenObj[firstKey].splitStatus = 0
-                    this.$store.dispatch('updateBigscreenObj',bigscreenObj)
-                    return
-                } else if (e.ID === '52de9a2e-d171-423d-860f-3fe2750ec757' || e.ID === '0cabb1ba-bcae-45d9-b019-2b45486f98e3' || e.ID === '9bb5b3e3-9e21-4716-8059-f5b35b24e3fa') {
-                    // 四分屏
-                    bigscreenObj[firstKey].splitStatus = 1
-                    for (let i=0;i<4;i++){
-                        bigscreenObj[firstKey].bindList.push(i+1)
-                    }
-                    this.$store.dispatch('updateBigscreenObj',bigscreenObj)
-                    return
-                } else if (e.ID === 'ac0cc31c-a9b8-4bdf-88cf-928964b93ac5' || e.ID === '201e4bb0-c039-46c7-a55a-049d00de4769') {
-                    // 九分屏
-                    bigscreenObj[firstKey].splitStatus = 2
-                    for (let i=0;i<9;i++){
-                        bigscreenObj[firstKey].bindList.push(i+1)
-                    }
-                    this.$store.dispatch('updateBigscreenObj',bigscreenObj)
-                    return
-                } else if (e.ID === '2d4c49bc-905b-4f96-a65c-9b0a3e057b3f') {
-                    // 16分屏
-                    bigscreenObj[firstKey].splitStatus = 3
-                    for (let i=0;i<16;i++){
-                        bigscreenObj[firstKey].bindList.push(i+1)
-                    }
-                    this.$store.dispatch('updateBigscreenObj',bigscreenObj)
-                    return
-                }
-
-                // 安卓和分布式按钮
-                if (e.Text === '安卓' || e.Text === '分布式') {
-                    if (this.count5 === 0) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                        ++this.count5
-                    } else if (e !== this.lastData5) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                        this.lastBtn5.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData5.BackIcon}`) + ')'
-                    }
-                    // 保存点过的这个按钮和按钮数据
-                    this.lastBtn5 = this.$refs[e.ID][0]
-                    this.lastData5 = e
-                    return
-                }
-
-                // 电源管理和电脑管理
-                if (this.powerAndCompBtns.some(item => item.ID === e.ID)) {
-                    if (e.ActionType === 2) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                        e.ActionType = -2
-                    } else {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
-                        e.ActionType = 2
-                    }
-                }
-                return*/
             },
 
             // 鼠标按下事件

src/renderer/components/Image.vue

@@ -22,24 +22,17 @@
 
 <script>
     import {mapState} from 'vuex'
-    import {getStaticFile} from "../../utils/tools"
 
     export default {
-
         data() {
             return {
-                imageJson:[],
                 staticUrl:this.$store.state.staticUrl
             }
         },
 
-        async beforeCreate() {
-            this.imageJson = await getStaticFile('EnityImage.Data')
-        },
-
         updated() {
             // 设置背景图片
-            const imageArr = this.imageJson
+            const imageArr = this.$store.state.imageJson
             const keyArr = Object.keys(this.$refs)
             keyArr.forEach((item,index) => {
                 this.$refs[item][0].style.backgroundImage = imageArr[index].BackIcon ? 'url('+`${this.staticUrl}/Data/${imageArr[index].BackIcon}`+')' : null
@@ -47,11 +40,7 @@
         },
 
         computed: {
-            ...mapState(['bigScale'])
+            ...mapState(['bigScale','imageJson'])
         }
     }
 </script>
-
-<style scoped>
-
-</style>

src/renderer/components/Label.vue

@@ -8,6 +8,7 @@
                  left:item.Left*bigScale+'px',
                  top:item.Top*bigScale+'px',
                  fontSize:item.FontSize*bigScale + 'px',
+                 fontWeight:600,
                  width:item.Width*bigScale + 'px',
                  height:item.Height*bigScale + 'px',
                  zIndex:item.ZIndex,

src/renderer/store/actions.js

@@ -12,7 +12,9 @@ import {
     UPDATE_BIGSCREENOBJ,
     UPDATE_CURRENTSCREENID,
     SECOND_UPDATE_BIGSCREEN,
-    UPDATE_LABELJSON
+    UPDATE_LABELJSON,
+    UPDATE_IMAGEJSON,
+    UPDATE_BIGSHOWJSON
 } from './mutation-types'
 
 export default {
@@ -80,7 +82,17 @@ export default {
     // 更新labelJson
     updateLabelJson({commit},labelJson) {
         commit(UPDATE_LABELJSON,{labelJson})
-    }
+    },
+
+    // 更新imageJson
+    updateImageJson({commit},imageJson) {
+        commit(UPDATE_IMAGEJSON,{imageJson})
+    },
+
+    // 更新bigshowJson
+    updateBigshowJson({commit},bigshowJson) {
+        commit(UPDATE_BIGSHOWJSON,{bigshowJson})
+    },
 }
 
 

src/renderer/store/mutation-types.js

@@ -12,4 +12,6 @@ export const UPDATE_BIGSCREENOBJ = 'update_bigscreenobj' // 更新大屏对象
 export const UPDATE_CURRENTSCREENID = 'update_currentscreenid' // 更新当前操作大屏id
 export const SECOND_UPDATE_BIGSCREEN = 'second_update_bigscreen' // 间接更新大屏信号源
 export const UPDATE_LABELJSON = 'update_labeljson' // 更新labelJson
+export const UPDATE_IMAGEJSON = 'update_imagejson' // 更新imageJson
+export const UPDATE_BIGSHOWJSON = 'update_bigshowjson' // 更新bigshowJson
 

src/renderer/store/mutations.js

@@ -13,7 +13,9 @@ import {
     UPDATE_BIGSCREENOBJ,
     UPDATE_CURRENTSCREENID,
     SECOND_UPDATE_BIGSCREEN,
-    UPDATE_LABELJSON
+    UPDATE_LABELJSON,
+    UPDATE_IMAGEJSON,
+    UPDATE_BIGSHOWJSON
 } from './mutation-types'
 
 import storageUtils from "../../utils/storageUtils"
@@ -89,5 +91,15 @@ export default {
     // 更新labeljson
     [UPDATE_LABELJSON](state,{labelJson}) {
         state.labelJson = labelJson
-    }
+    },
+
+    // 更新imagejson
+    [UPDATE_IMAGEJSON](state,{imageJson}) {
+        state.imageJson = imageJson
+    },
+
+    // 更新bigshowjson
+    [UPDATE_BIGSHOWJSON](state,{bigshowJson}) {
+        state.bigshowJson = bigshowJson
+    },
 }

src/renderer/store/state.js

@@ -28,5 +28,11 @@ export default {
   curOpeBigscreenId:'',
 
   // label的json数据
-  labelJson:[]
+  labelJson:[],
+
+  // image的json数据
+  imageJson:[],
+
+  // bigshow的json数据
+  bigshowJson:[],
 }