解决按钮显示的大bug

src/renderer/components/Admin.vue

@@ -10,7 +10,7 @@
                 width:windowJson[0].Width + 'px',
                 height:windowJson[0].Height + 'px',
                 zIndex:windowJson[0].ZIndex,
-                display:windowJson[0].IsVisibility ? 'black' : 'none',
+                display:windowJson[0].IsVisibility ? 'block' : 'none',
                 backgroundImage:windowJson[0].BackIcon ? 'url('+require(`../../../static/images/${windowJson[0].BackIcon}`)+')' : null,
                 backgroundRepeat:'no-repeat',
                 backgroundSize:'100% 100%',
@@ -27,7 +27,7 @@
                     width:item.Width + 'px',
                     height:item.Height + 'px',
                     zIndex:item.ZIndex,
-                    display:item.IsVisibility ? 'black' : 'none',
+                    display:item.IsVisibility ? 'block' : 'none',
                     fontSize:item.FontSize + 'px',
                     backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                     backgroundSize:'100% 100%',
@@ -61,7 +61,7 @@
                     width:item.Width + 'px',
                     height:item.Height + 'px',
                     zIndex:item.ZIndex,
-                    display:item.IsVisibility ? 'black' : 'none',
+                    display:item.IsVisibility ? 'block' : 'none',
                 }"
             >
                 <div v-for="(item,key) in signalPreList" :key="key" class="item">
@@ -79,7 +79,7 @@
                  width:item.Width + 'px',
                  height:item.Height + 'px',
                  zIndex:item.ZIndex,
-                 display:item.IsVisibility ? 'black' : 'none',
+                 display:item.IsVisibility ? 'block' : 'none',
                  color:`#${item.ForegroundStr.slice(3)}`,
                  textAlign:'center',
                  lineHeight:item.Height + 'px',
@@ -96,7 +96,7 @@
                     width:item.Width + 'px',
                     height:item.Height + 'px',
                     zIndex:item.ZIndex,
-                    display:item.IsVisibility ? 'black' : 'none',
+                    display:item.IsVisibility ? 'block' : 'none',
                     backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                     backgroundRepeat:'no-repeat',
                     backgroundSize:'100% 100%',
@@ -112,7 +112,7 @@
                     width:signalList[0].Width + 'px',
                     height:signalList[0].Height + 'px',
                     zIndex:signalList[0].ZIndex,
-                    display:signalList[0].IsVisibility ? 'black' : 'none',
+                    display:signalList[0].IsVisibility ? 'block' : 'none',
                     fontSize:signalList[0].FontSize + 'px',
                     color:`#${signalList[0].ForegroundStr.slice(3)}`,
                     position:'absolute',
@@ -147,7 +147,7 @@
                     width:item.Width + 'px',
                     height:item.Height + 'px',
                     zIndex:item.ZIndex,
-                    display:item.IsVisibility ? 'black' : 'none',
+                    display:item.IsVisibility ? 'block' : 'none',
                     backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                     backgroundRepeat:'no-repeat',
                     backgroundSize:'100% 100%',
@@ -173,7 +173,7 @@
                 </div>
             </div>
 
-            <!--主要页面配置-->
+            <!--其他页面-->
             <!--<div v-for="item in windowJson"
                  :style="{
                     left:item.Left+'px',
@@ -181,7 +181,7 @@
                     width:item.Width + 'px',
                     height:item.Height + 'px',
                     zIndex:item.ZIndex,
-                    display:item.IsVisibility ? 'black' : 'none',
+                    display:item.IsVisibility ? 'block' : 'none',
                     backgroundImage:item.BackIcon ? 'url('+require(`../../../static/images/${item.BackIcon}`)+')' : null,
                     backgroundRepeat:'no-repeat',
                     backgroundSize:'100% 100%',
@@ -228,43 +228,30 @@
                 count3: 0, // 管理控制按钮计数器
                 count4: 0, // 3个视频按钮计数器
                 count5: 0, // 安卓分布式按钮
-                systemStatus: false,// 系统开关状态，默认为关
-                /*arr: [],// 分屏按钮数组
-                funcBtnArr: [],// 功能按钮数组
-                funcLabArr: [],// 功能label数组
-                sliderArr: [],// 音量滑块数组*/
             }
         },
         mounted() {
-            // 获取分屏按钮数组
+            // 获取分屏按钮数组(将分屏按钮和其他按钮区分开)
             const 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'))
             const arr2 = 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'))
             this.arr = arr
             this.arr2 = arr2
 
             // 获取功能按钮涉及到的按钮和label
-            // 1.电源管理
-            const curSourceBtnArr = this.buttonJson.filter(item => item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5')
-            const curSourceLabArr = this.labelJson.filter(item => item.WindowID === 'd80a8b6e-9f88-41ff-b3a7-1ff8d6ee37a5')
-            // 2.音频管理
-            const audioBtnArr = this.buttonJson.filter(item => item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8')
-            const audioLabArr = this.labelJson.filter(item => item.WindowID === 'cb2687fd-931a-4b38-a76d-9c3ea171b8d8')
-            // 3.视频管理
-            const vedioBtnArr = this.buttonJson.filter(item => item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b')
-            const vedioLabArr = this.labelJson.filter(item => item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b')
-            // 4.环境控制
-            const envirControlBtnArr = this.buttonJson.filter(item => item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d')
-            const envirControlLabArr = this.labelJson.filter(item => item.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d')
-            // 5.电脑控制
-            const compControlBtnArr = this.buttonJson.filter(item => item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5')
-            const compControlLabArr = this.labelJson.filter(item => item.WindowID === 'd9868551-b579-4258-9bc7-7c1f733773f5')
-
-            const funcBtnArr = [...curSourceBtnArr, ...audioBtnArr, ...vedioBtnArr, ...envirControlBtnArr, ...compControlBtnArr]
-            const funcLabArr = [...curSourceLabArr, ...audioLabArr, ...vedioLabArr, ...envirControlLabArr, ...compControlLabArr]
-            const sliderArr = [...this.sliderJson]
-            this.funcBtnArr = funcBtnArr
-            this.funcLabArr = funcLabArr
-            this.sliderArr = sliderArr
+            // 1.电源管理   2.音频管理  3.视频管理  4.环境控制  5.电脑控制
+            const funcBtnArr = this.buttonJson.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'))
+            const noFuncBtnArr = this.buttonJson.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'))
+            const 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'))
+            const noFuncLabArr = 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'))
+            const funSliderArr = [...this.sliderJson]
+            const funcObj = {
+                funcBtnArr,
+                noFuncBtnArr,
+                funcLabArr,
+                noFuncLabArr,
+                funSliderArr,
+            }
+            this.funcObj = funcObj
         },
         methods: {
             // 移动信号源
@@ -285,29 +272,41 @@
             clickBtn(e) {
                 console.log(e)
 
+                // 预案管理声音开关
+                if (e.ID === '355d3c32-1502-40b4-9ddd-663d5b8469e7') {
+                    if (this.count % 2 === 0) {
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
+                        ++this.count
+                    } else {
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${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/images/${e.ActionIcon}`) + ')'
+                        ++this.count4
+                    } else if(e !== this.lastData4) {
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
+                        this.lastBtn4.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData4.BackIcon}`) + ')'
+                    }
+                    // 保存点过的这个按钮和按钮数据
+                    this.lastBtn4 = this.$refs[e.ID][0]
+                    this.lastData4 = e
+
                     // 首先清屏
                     this.signalPreList = []
-                    this.arr.forEach((item, index) => {
+                    this.arr.forEach(item => {
                         if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                             item.IsVisibility = true
                         } else {
                             item.IsVisibility = false
                         }
                     })
-                    this.buttonJson = [...this.buttonJson, ...this.arr]
-                }
-
-                // 声音开关按钮处理
-                if (e.ID === '355d3c32-1502-40b4-9ddd-663d5b8469e7') {
-                    if (this.count % 2 === 0) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
-                        ++this.count
-                    } else {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
-                        ++this.count
-                    }
+                    this.buttonJson = [ ...this.arr,...this.arr2]
                     return
                 }
 
@@ -316,38 +315,23 @@
                     if (this.count2 === 0) {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                         ++this.count2
-                    } else {
+                    } else if(e !== this.lastData) {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                         this.lastBtn.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData.BackIcon}`) + ')'
                     }
-                    // 保存点过的这个按钮和按钮数据
+                    // 保存点过的按钮和按钮数据
                     this.lastBtn = this.$refs[e.ID][0]
                     this.lastData = e
                     return
                 }
 
-                // 3个屏控制按钮处理
-                if (e.Text.includes('投影机') || e.Text.includes('LCD屏') || e.Text.includes('LED屏')) {
-                    if (this.count4 === 0) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
-                        ++this.count4
-                    } else {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
-                        this.lastBtn4.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData4.BackIcon}`) + ')'
-                    }
-                    // 保存点过的这个按钮和按钮数据
-                    this.lastBtn4 = this.$refs[e.ID][0]
-                    this.lastData4 = 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 = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                         ++this.count3
-                    } else {
+                    } else if(e !== this.lastData3) {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                         this.lastBtn3.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData3.BackIcon}`) + ')'
                     }
@@ -356,64 +340,53 @@
                     this.lastData3 = e
 
                     // （2）界面切换
-                    this.funcBtnArr.forEach((item, index) => {
+                    // 按钮
+                    this.funcObj.funcBtnArr.forEach((item, index) => {
                         if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                             item.IsVisibility = true
                         } else {
                             item.IsVisibility = false
                         }
                     })
-                    this.funcLabArr.forEach((item, index) => {
+
+                    // 标签
+                    this.funcObj.funcLabArr.forEach((item, index) => {
                         if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                             item.IsVisibility = true
                         } else {
                             item.IsVisibility = false
                         }
                     })
-                    this.sliderArr.forEach((item, index) => {
+
+                    // 滑块
+                    this.funcObj.funSliderArr.forEach((item, index) => {
                         if (e.MouseDownActionList[0].SourceID === item.WindowID) {
                             item.IsVisibility = true
                         } else {
                             item.IsVisibility = false
                         }
                     })
-                    this.buttonJson = [...this.buttonJson, ...this.funcBtnArr]
-                    this.labelJson = [...this.labelJson, ...this.funcLabArr]
-                    this.sliderJson = [...this.sliderJson, ...this.sliderArr]
-                    return
-                }
 
-                // LED屏分屏和清屏操作
-                if (e.ID === '7775e508-c6a5-4044-8264-24772a24fa97') {
-                    this.signalPreList = []
-                    return
-                } else if (e.ID === '49653a62-99cb-40e1-a513-60e42893adb7') {
-                    // 自由屏
-                    this.spliceScreen(0)
-                    return
-                } else if (e.ID === '52de9a2e-d171-423d-860f-3fe2750ec757') {
-                    // 四分屏
-                    this.spliceScreen(1)
-                    return
-                } else if (e.ID === 'ac0cc31c-a9b8-4bdf-88cf-928964b93ac5') {
-                    // 九分屏
-                    this.spliceScreen(2)
+                    this.buttonJson = [...this.funcObj.noFuncBtnArr, ...this.funcObj.funcBtnArr]
+                    this.labelJson = [...this.funcObj.noFuncLabArr, ...this.funcObj.funcLabArr]
+                    this.sliderJson = [...this.funcObj.funSliderArr]
                     return
                 }
 
-                // LCD屏分屏和清屏操作
-                if (e.ID === '95c5d676-46a5-4c46-b550-9bc013a59937') {
+                // 分屏和清屏操作
+                if (e.ID === '7775e508-c6a5-4044-8264-24772a24fa97' || e.ID === '95c5d676-46a5-4c46-b550-9bc013a59937' || e.ID === 'f47e84bb-c878-4b22-a9d6-eb2e307283bc') {
+                    // 清屏
                     this.signalPreList = []
                     return
-                } else if (e.ID === 'd55c81a8-54d7-4d90-aad7-4f34c3ba3950') {
+                } else if (e.ID === '49653a62-99cb-40e1-a513-60e42893adb7' || e.ID === 'd55c81a8-54d7-4d90-aad7-4f34c3ba3950' || e.ID === '4142ab5b-ce52-4655-a28d-724bfabb24f0') {
                     // 自由屏
                     this.spliceScreen(0)
                     return
-                } else if (e.ID === '0cabb1ba-bcae-45d9-b019-2b45486f98e3') {
+                } else if (e.ID === '52de9a2e-d171-423d-860f-3fe2750ec757' || e.ID === '0cabb1ba-bcae-45d9-b019-2b45486f98e3' || e.ID === '9bb5b3e3-9e21-4716-8059-f5b35b24e3fa') {
                     // 四分屏
                     this.spliceScreen(1)
                     return
-                } else if (e.ID === '201e4bb0-c039-46c7-a55a-049d00de4769') {
+                } else if (e.ID === 'ac0cc31c-a9b8-4bdf-88cf-928964b93ac5' || e.ID === '201e4bb0-c039-46c7-a55a-049d00de4769') {
                     // 九分屏
                     this.spliceScreen(2)
                     return
@@ -423,26 +396,12 @@
                     return
                 }
 
-                // 投影机分屏和清屏操作
-                if (e.ID === 'f47e84bb-c878-4b22-a9d6-eb2e307283bc') {
-                    this.signalPreList = []
-                    return
-                } else if (e.ID === '4142ab5b-ce52-4655-a28d-724bfabb24f0') {
-                    // 自由屏
-                    this.spliceScreen(0)
-                    return
-                } else if (e.ID === '9bb5b3e3-9e21-4716-8059-f5b35b24e3fa') {
-                    // 四分屏
-                    this.spliceScreen(1)
-                    return
-                }
-
                 // 安卓和分布式按钮
                 if (e.Text === '安卓' || e.Text === '分布式') {
                     if (this.count5 === 0) {
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                         ++this.count5
-                    } else {
+                    } else if(e !== this.lastData5){
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                         this.lastBtn5.style.backgroundImage = 'url(' + require(`../../../static/images/${this.lastData5.BackIcon}`) + ')'
                     }
@@ -453,7 +412,7 @@
                 }
 
                 // 系统开关按钮
-                if (e.ID === 'aea34c76-4216-469b-9610-9889a2d42d06') {
+                /*if (e.ID === 'aea34c76-4216-469b-9610-9889a2d42d06') {
                     this.systemStatus = !this.systemStatus
                     if (this.systemStatus) { // 开启,同时开启LCD屏和坐席电源
                         this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
@@ -465,13 +424,14 @@
                         this.$refs['4d3266e8-64b5-4765-a36d-7e271eb3c8e8'][0].style.backgroundImage = 'url(' + require(`../../../static/images/75.png`) + ')'
                     }
                     return false
-                }
+                }*/
             },
 
             // 鼠标按下事件
             mouseDown(e) {
-                if (this.arr.some(item => e === item)) {
-                    console.log(e, '鼠标按下了')
+                if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
+                }else if(e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
                 }
                 return
@@ -479,8 +439,9 @@
 
             // 鼠标松开事件
             mouseUp(e) {
-                if (this.arr.some(item => e === item)) {
-                    console.log(e, '鼠标抬起了')
+                if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
+                }else if(e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
                     this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
                 }
                 return