完成基本的界面渲染和按钮切换操作

src/renderer/App.vue

@@ -36,7 +36,6 @@
             const windowJson = await getStaticFile('EnityWindow.Data')
             const arr = windowJson.filter(item => item.IsVisibility === true)
             const homeJson = arr[0]
-            console.log(homeJson)
             this.$store.dispatch('updateHomeJson',homeJson)
 
 

src/renderer/components/Button.vue

@@ -30,7 +30,9 @@
 
 <script>
     import {mapState} from 'vuex'
+    import PubSub from 'pubsub-js'
     import {getStaticFile} from "../../utils/tools"
+    import {OPEN_WINDOWS} from "../../utils/constant"
 
     export default {
         data() {
@@ -76,79 +78,9 @@
                     })
 
                     // 3.切换界面
-                    // 上一次点击的按钮（同一组的情况）
-                    const preBtn = this.preBtns.filter(a => a.ButtonType === 1 && a.GroupNumber === e.GroupNumber)
-                    console.log(preBtn)
-
-                    if(preBtn.length){
-                        // 3.1 切换按钮
-                        this.buttonJson.forEach(item => {
-                            // 先隐藏
-                            if(preBtn[0].MouseDownActionList.length){
-                                for(const btn of preBtn[0].MouseDownActionList){
-                                    if(btn.SourceID === item.WindowID){
-                                        item.IsVisibility = false
-                                    }
-                                }
-                            }
-                            // 后显示
-                            if(e.MouseDownActionList.length){
-                                for(const btn of e.MouseDownActionList){
-                                    if(btn.SourceID === item.WindowID){
-                                        item.IsVisibility = true
-                                    }
-                                }
-                            }
-                        })
-
-                        // 3.2 切换label
-                        this.$store.state.labelJson.forEach(item => {
-                            if(preBtn[0].MouseDownActionList.length){
-                                for(const btn of preBtn[0].MouseDownActionList){
-                                    if(btn.SourceID === item.WindowID){
-                                        item.IsVisibility = false
-                                    }
-                                }
-                            }
-
-                            if(e.MouseDownActionList.length){
-                                for(const btn of e.MouseDownActionList){
-                                    if(btn.SourceID === item.WindowID){
-                                        item.IsVisibility = true
-                                    }
-                                }
-                            }
-                        })
-
-                        // 替换上一次点击的按钮
-                        const btnArr = this.preBtns.filter(b => b.ID !== preBtn[0].ID)
-                        this.preBtns = [...btnArr,e]
-                    }else {
-                        // 不同组的情况
-                        // 1.显示按钮
-                        this.buttonJson.forEach(item => {
-                            if(e.MouseDownActionList.length){
-                                for(const btn of e.MouseDownActionList){
-                                    if(btn.SourceID === item.WindowID){
-                                        item.IsVisibility = true
-                                    }
-                                }
-                            }
-                        })
-                        // 2.显示label
-                        this.$store.state.labelJson.forEach(item => {
-                            if(e.MouseDownActionList.length){
-                                for(const btn of e.MouseDownActionList){
-                                    if(btn.SourceID === item.WindowID){
-                                        item.IsVisibility = true
-                                    }
-                                }
-                            }
-                        })
-                        // 增加到上一次点击的按钮数组中
-                        const btnArr = this.preBtns
-                        this.preBtns = [...btnArr,e]
-                    }
+                    let windowIds = e.MouseDownActionList.map(item => item.SourceID)
+                    // 发布消息控制窗口显示
+                    PubSub.publish(OPEN_WINDOWS,windowIds)
                 }
 
                 // 音频菜单控制

src/renderer/components/Window.vue

@@ -26,10 +26,13 @@
 <script>
     import {mapState} from "vuex"
     import {getNeedMoutedEleArr, getStaticFile} from "../../utils/tools"
+    import PubSub from 'pubsub-js'
+
     import Button from "./Button"
     import Label from './Label'
     import Img from './Image'
     import BigShow from './BigShow'
+    import {OPEN_WINDOWS} from "../../utils/constant"
 
     export default {
         components: {
@@ -56,6 +59,18 @@
             this.eleObj = eleObj
         },
 
+        mounted() {
+            this.open_windows = PubSub.subscribe(OPEN_WINDOWS,(msg,data) => {
+                for(const item of this.windows){
+                    data.forEach(item2 => {
+                        if(item.ID === item2){
+                            item.IsVisibility = true
+                        }
+                    })
+                }
+            })
+        },
+
         updated() {
             // 设置背景图片
             const keyArr = Object.keys(this.$refs)
@@ -63,12 +78,16 @@
                 if(this.eleObj[item]){
                     const arr = this.eleObj[item].filter(item => item.BackIcon)
                     for(const a of arr){
-                        this.$refs[a.ID][0].style.backgroundImage = a.BackIcon ? 'url('+`${this.staticUrl}/Data/${a.BackIcon}`+')' : null
+                        this.$refs[a.ID] ? this.$refs[a.ID][0].style.backgroundImage = a.BackIcon ? 'url('+`${this.staticUrl}/Data/${a.BackIcon}`+')' : null : ''
                     }
                 }
             })
         },
 
+        beforeDestroy() {
+          PubSub.unsubscribe(this.open_windows)
+        },
+
         computed: {
             ...mapState(['bigScale'])
         }

src/utils/constant.js

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