完成切换

src/renderer/components/Admin.vue

@@ -2,7 +2,8 @@
 <template>
     <div class="containers">
         <!--主页-->
-        <div :style="{
+        <div
+            :style="{
                 position: 'relative',
                 left:windowJson[0].Left+'px',
                 top:windowJson[0].Top+'px',
@@ -162,14 +163,13 @@
                     width:item.Width + 'px',
                     height:item.Height + 'px',
                     zIndex:item.ZIndex,
-                    display:item.IsVisibility ? 'visible' : 'none',
+                    display:item.IsVisibility ? 'black' : 'none',
                     backgroundImage:item.BackIcon ? 'url('+require(`../../../static/images/${item.BackIcon}`)+')' : null,
                     backgroundRepeat:'no-repeat',
                     backgroundSize:'100% 100%',
                     margin:'0 auto',
                 }"
             >
-                {{item.Name}}
             </div>-->
         </div>
     </div>
@@ -178,7 +178,6 @@
 <script>
     import {mapState} from 'vuex'
     import draggable from 'vuedraggable'
-    import '../assets/less/splitscreen.less'
     import labelJson from '../../../static/EnityLable'
     import bigScreenJson from '../../../static/EnityBigScreen'
     import buttonJson from '../../../static/EnityButton'
@@ -187,6 +186,7 @@
     import imageJson from '../../../static/EnityImage'
     import windowJson from '../../../static/EnityWindow'
     import storageUtils from "../../utils/storageUtils"
+    import '../assets/less/splitscreen.less'
 
     export default {
         components: {
@@ -194,7 +194,7 @@
         },
         data() {
             return {
-                user:storageUtils.getUser(),
+                user:storageUtils.getUser(), // 本地存储的用户
                 signalPreList:[],  // 被拖到大屏中的信号源列表
                 isDragging:false,
                 splitScreenStatus:0,// 分屏状态（默认0: 自由屏，1: 4分屏  2：9分屏  3: 16分屏）
@@ -214,6 +214,7 @@
                 arr:[],// 分屏按钮数组
                 funcBtnArr:[],// 功能按钮数组
                 funcLabArr:[],// 功能label数组
+                sliderArr:[],// 音量滑块数组
             }
         },
         mounted() {
@@ -240,8 +241,10 @@
 
             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
         },
         methods: {
             // 移动信号源
@@ -261,6 +264,7 @@
             // 点击按钮
             clickBtn(e) {
                 console.log(e)
+
                 // 切换屏幕
                 if(e.Text === 'LCD屏' || e.Text === 'LED屏' || e.Text === '投影机'){
                     // 首先清屏
@@ -346,8 +350,16 @@
                             item.IsVisibility = false
                         }
                     })
+                    this.sliderArr.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
                 }
 
@@ -434,6 +446,9 @@
                     }
                     return false
                 }
+
+                // 其他按钮
+                this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
             },
 
             // 鼠标按下事件
@@ -441,6 +456,12 @@
                 if(e.Name.includes('V5') && 39<e.Name.slice(7)*1 && e.Name.slice(7)*1<44){
                     this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
                 }
+
+                // 视频管理按钮
+                const vedioBtns = this.buttonJson.filter(item => item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b')
+                if(vedioBtns.some(item => item === e)){
+                    this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
+                }
             },
 
             // 鼠标松开事件
@@ -448,6 +469,12 @@
                 if(e.Name.includes('V5') && 39<e.Name.slice(7)*1 && e.Name.slice(7)*1<44){
                     this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.BackIcon}`)+')'
                 }
+
+                // 视频管理按钮
+                const vedioBtns = this.buttonJson.filter(item => item.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b')
+                if(vedioBtns.some(item => item === e)){
+                    this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.BackIcon}`)+')'
+                }
             },
         },
         computed: {
@@ -550,6 +577,3 @@
         }
     }
 </style>
-
-
-