重新梳理按钮绑定事件

src/renderer/App.vue

@@ -13,6 +13,7 @@
     reqDevice,
     reqPreviewSourceList
   } from "./api"
+  import {getStaticFile} from "../utils/tools"
 
   export default {
     async mounted() {
@@ -36,9 +37,11 @@
             const bigScreenJson = await reqBigScreen()
             const signalListJson = await reqPreviewSourceList()
             const deviceJson = await reqDevice()
+            const labelJson = await getStaticFile('EnityLable.Data')
             this.$store.dispatch('saveBigscreen',bigScreenJson.filter(item => item.IsVisibility === true))
             this.$store.dispatch('saveSignalList',signalListJson)
             this.$store.dispatch('saveDevice',deviceJson)
+            this.$store.dispatch('updateLabelJson',labelJson)
           }
         }
       })

src/renderer/components/Button.vue

@@ -42,15 +42,15 @@
                 count3: 0, // 管理控制按钮计数器
                 count4: 0, // 3个视频按钮计数器
                 count5: 0, // 安卓分布式按钮
-                buttonJson: [],
-                labelJson: [],
-                slideJson: [],
-                staticUrl:this.$store.state.staticUrl
+                buttonJson: [], // 所有按钮
+                slideJson: [], // 所有滑条
+                hiddenBtns:[], // 保存需要隐藏的按钮
+                hiddenLabels:[], // 保存需要隐藏的label
+                staticUrl:this.$store.state.staticUrl, // 资源路径
             }
         },
 
         async mounted() {
-
             this.buttonJson = await getStaticFile('EnityButton.Data')
             // 获取分屏按钮数组
             this.arr = this.buttonJson.filter(item => (item.WindowID === '9a0dff23-8633-4e7f-89bf-cc4f68ec88e1' || item.WindowID === '08208721-41cc-4f1e-937b-3a1627389049' || item.WindowID === 'ab842585-0c91-4e65-bfed-a219bcaaeb43'))
@@ -59,10 +59,9 @@
             // 获取电源管理和电脑控制按钮
             this.powerAndCompBtns = this.buttonJson.filter(item => (item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5' || item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5') && item.ID !== '19554440-98bc-4644-83a0-d9cefd69153e')
 
-
-            this.labelJson = await getStaticFile('EnityLable.Data')
+            /*this.labelJson = await getStaticFile('EnityLable.Data')
             this.funcLabArr = this.labelJson.filter(item => (item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5' || item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8' || item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b' || item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d' || item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5'))
-
+            */
 
             this.slideJson = await getStaticFile('EnitySlider.Data')
             this.funSliderArr = await getStaticFile('EnitySlider.Data')
@@ -75,13 +74,67 @@
         },
 
         computed: {
-            ...mapState(['bigScale']),
+            ...mapState(['bigScale','labelJson']),
         },
 
         methods: {
             // 点击按钮
             async clickBtn(e) {
-                const bigscreenObj = this.$store.state.bigScreenObj
+                console.log(e)
+
+                // 控制按钮数组
+                const controlBtns = this.buttonJson.filter(item => item.ButtonType === 1 && item.WindowID === e.WindowID)
+                if(controlBtns.some(item => item === e)){
+                    // 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.切换界面
+                    this.buttonJson.forEach(item => {
+                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
+                            item.IsVisibility = true
+                            this.hiddenBtns.push(item)
+                        }
+                    })
+                    this.$store.state.labelJson.forEach(item => {
+                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
+                            item.IsVisibility = true
+                            this.hiddenLabels.push(item)
+                        }
+                    })
+
+                    // 4.其他按钮处于未激活状态
+                    const otherBtns = controlBtns.filter(item => item !== e)
+                    otherBtns.forEach(item => {
+                        this.$refs[item.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${item.BackIcon}`) + ')'
+                    })
+                }
+
+                // 音频菜单控制
+                if(e.ButtonType === 2){
+                    if(!e.isOpen){
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
+                        e.isOpen = true
+                    }else {
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
+                        e.isOpen = false
+                    }
+                }
+
+                /*const bigscreenObj = this.$store.state.bigScreenObj
                 // 只有一个大屏，获取对象的第一个key
                 const firstKey = Object.keys(bigscreenObj)[0]
 
@@ -250,41 +303,21 @@
                         e.ActionType = 2
                     }
                 }
-                return
+                return*/
             },
 
             // 鼠标按下事件
             mouseDown(e) {
-                console.log(e)
-                this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-
-                if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                } else if (e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                } else if (e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
-                } else if (e.ID === '19554440-98bc-4644-83a0-d9cefd69153e') { // 电脑控制All按钮
+                if(e.ButtonType === 0){
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                 }
-                return
             },
 
             // 鼠标松开事件
             mouseUp(e) {
-                console.log(e)
-                this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
-
-                if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
-                } else if (e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
-                } else if (e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
-                } else if (e.ID === '19554440-98bc-4644-83a0-d9cefd69153e') { // 电脑控制All按钮
+                if(e.ButtonType === 0){
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                 }
-                return
             },
         }
     }

src/renderer/components/Label.vue

@@ -24,29 +24,10 @@
 
 <script>
     import {mapState} from 'vuex'
-    import {getStaticFile} from "../../utils/tools"
 
     export default {
-        data() {
-            return {
-                labelJson:[]
-            }
-        },
-
-        async beforeCreate() {
-            this.labelJson = await getStaticFile('EnityLable.Data')
-        },
-
         computed: {
-            ...mapState(['bigScale']),
-        },
-
-        methods: {
-
+            ...mapState(['bigScale','labelJson']),
         }
     }
 </script>
-
-<style scoped>
-
-</style>

src/renderer/store/actions.js

@@ -11,7 +11,8 @@ import {
     UPDATE_POSITIONNUM,
     UPDATE_BIGSCREENOBJ,
     UPDATE_CURRENTSCREENID,
-    SECOND_UPDATE_BIGSCREEN
+    SECOND_UPDATE_BIGSCREEN,
+    UPDATE_LABELJSON
 } from './mutation-types'
 
 export default {
@@ -74,6 +75,11 @@ export default {
     // 间接更新大屏对象（更新对象中改动的信号源数组）
     secondUpdateBigscreenObj({commit},signals) {
         commit(SECOND_UPDATE_BIGSCREEN,{signals})
+    },
+
+    // 更新labelJson
+    updateLabelJson({commit},labelJson) {
+        commit(UPDATE_LABELJSON,{labelJson})
     }
 }
 
@@ -81,11 +87,3 @@ export default {
 
 
 
-
-
-
-
-
-
-
-

src/renderer/store/mutation-types.js

@@ -11,4 +11,5 @@ export const UPDATE_POSITIONNUM = 'update_positionnum' // 更新信号源在第
 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
 

src/renderer/store/mutations.js

@@ -12,7 +12,8 @@ import {
     UPDATE_POSITIONNUM,
     UPDATE_BIGSCREENOBJ,
     UPDATE_CURRENTSCREENID,
-    SECOND_UPDATE_BIGSCREEN
+    SECOND_UPDATE_BIGSCREEN,
+    UPDATE_LABELJSON
 } from './mutation-types'
 
 import storageUtils from "../../utils/storageUtils"
@@ -84,4 +85,9 @@ export default {
     [SECOND_UPDATE_BIGSCREEN] (state,{signals}) {
         state.bigScreenObj[state.curOpeBigscreenId].signalArr = signals
     },
+
+    // 更新labeljson
+    [UPDATE_LABELJSON](state,{labelJson}) {
+        state.labelJson = labelJson
+    }
 }

src/renderer/store/state.js

@@ -26,4 +26,7 @@ export default {
 
   // 监控当前正在操作的大屏Id
   curOpeBigscreenId:'',
+
+  // label的json数据
+  labelJson:[]
 }