完善界面

src/renderer/components/Admin.vue

@@ -1,111 +1,151 @@
 <!--管理界面-->
 <template>
     <div class="containers">
-        <!--大屏显示-->
-        <div v-for="item in bigScreenJson"
-            :style="{
-                position:'absolute',
-                left:item.Left+'px',
-                top:item.Top+'px',
-                width:item.Width + 'px',
-                height:item.Height + 'px',
-                zIndex:item.ZIndex,
-                visibility:item.IsVisibility ? 'visible' : 'hidden',
-                backgroundColor:'#000000',
-                color:'#ffffff'
+        <!--主页-->
+        <div :style="{
+                left:windowJson[0].Left+'px',
+                top:windowJson[0].Top+'px',
+                width:windowJson[0].Width + 'px',
+                height:windowJson[0].Height + 'px',
+                zIndex:windowJson[0].ZIndex,
+                display:windowJson[0].IsVisibility ? 'black' : 'none',
+                backgroundImage:windowJson[0].BackIcon ? 'url('+require(`../../../static/images/${windowJson[0].BackIcon}`)+')' : null,
+                backgroundRepeat:'no-repeat',
+                backgroundSize:'100% 100%',
+                backgroundColor:`#${windowJson[0].BrackgroupStr.slice(3)}`,
+                margin:'0 auto',
+                position: 'relative',
             }"
         >
-            {{item.Name}}
-        </div>
+            <!--按钮-->
+            <div v-for="item in buttonJson"
+                    :style="{
+                    position:'absolute',
+                    left:item.Left+'px',
+                    top:item.Top+'px',
+                    width:item.Width + 'px',
+                    height:item.Height + 'px',
+                    zIndex:item.ZIndex,
+                    display:item.IsVisibility ? 'black' : 'none',
+                    fontSize:item.FontSize + 'px',
+                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
+                    backgroundSize:'100% 100%',
+                    backgroundRepeat:'no-repeat',
+                    color:`#${item.ForegroundStr.slice(3)}`,
+                    textAlign:'center',
+                    lineHeight:item.Height + 'px',
+                    cursor:'default'
+                }"
+                 :ref="item.ID"
+                 @click="clickBtn(item)"
+            >
+                {{item.Text}}
+            </div>
 
-        <!--按钮-->
-        <button v-for="item in buttonJson"
+            <!--大屏显示-->
+            <div v-for="item in bigScreenJson"
                 :style="{
-                position:'absolute',
-                left:item.Left+'px',
-                top:item.Top+'px',
-                width:item.Width + 'px',
-                height:item.Height + 'px',
-                zIndex:item.ZIndex,
-                visibility:item.IsVisibility ? 'visible' : 'hidden',
-                backgroundColor:`#${item.BrackgroupStr.slice(3)}`,
-                fontSize:item.FontSize + 'px',
-                backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
-                backgroundRepeat:'no-repeat',
-                backgroundSize:'cover',
-                color:`#${item.ForegroundStr.slice(3)}`,
-            }"
-        >
-            {{item.Name}}
-        </button>
-
-        <!--图片-->
-        <div v-for="item in imageJson"
-            :style="{
-                position:'absolute',
-                left:item.Left+'px',
-                top:item.Top+'px',
-                width:item.Width + 'px',
-                height:item.Height + 'px',
-                zIndex:item.ZIndex,
-                visibility:item.IsVisibility ? 'visible' : 'hidden',
-                backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
-                backgroundRepeat:'no-repeat',
-                backgroundSize:'cover',
-            }"
-        >
-        </div>
+                    position:'absolute',
+                    left:item.Left+'px',
+                    top:item.Top+'px',
+                    width:item.Width + 'px',
+                    height:item.Height + 'px',
+                    zIndex:item.ZIndex,
+                    display:item.IsVisibility ? 'black' : 'none',
+                    backgroundColor: '#000000',
+                }"
+            >
+            </div>
 
-        <!--label标签-->
-        <label v-for="item in lableJson"
-               :style="{
-             fontSize:item.FontSize + 'px',
-             position:'absolute',
-             left:item.Left+'px',
-             top:item.Top+'px',
-             width:item.Width + 'px',
-             height:item.Height + 'px',
-             zIndex:item.ZIndex,
-             visibility:item.IsVisibility ? 'visible' : 'hidden',
-             color:`#${item.ForegroundStr.slice(3)}`,
-        }">
-            {{item.Text}}
-        </label>
-
-        <!--信号源列表-->
-        <div
-            :style="{
-                position:'absolute',
-                left:signalList[0].Left+'px',
-                top:signalList[0].Top+'px',
-                width:signalList[0].Width + 'px',
-                height:signalList[0].Height + 'px',
-                zIndex:signalList[0].ZIndex,
-                visibility:signalList[0].IsVisibility ? 'visible' : 'hidden',
-                fontSize:signalList[0].FontSize + 'px',
-                color:`#${signalList[0].ForegroundStr.slice(3)}`,
-            }"
-        >
-            {{signalList[0].Name}}
-            <!--列表项-->
-            <div v-for="item in signalList[0].PreviewList" style="color:#ffffff">
-                {{item.DeviceName}}
+            <!--label标签-->
+            <label v-for="item in lableJson"
+                   :style="{
+                 fontSize:item.FontSize + 'px',
+                 position:'absolute',
+                 left:item.Left+'px',
+                 top:item.Top+'px',
+                 width:item.Width + 'px',
+                 height:item.Height + 'px',
+                 zIndex:item.ZIndex,
+                 display:item.IsVisibility ? 'black' : 'none',
+                 color:`#${item.ForegroundStr.slice(3)}`,
+                 textAlign:'center',
+                 lineHeight:item.Height + 'px',
+            }">
+                {{item.Text}}
+            </label>
+
+            <!--图片-->
+            <div v-for="item in imageJson"
+                :style="{
+                    position:'absolute',
+                    left:item.Left+'px',
+                    top:item.Top+'px',
+                    width:item.Width + 'px',
+                    height:item.Height + 'px',
+                    zIndex:item.ZIndex,
+                    display:item.IsVisibility ? 'black' : 'none',
+                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
+                    backgroundRepeat:'no-repeat',
+                    backgroundSize:'100% 100%',
+                }"
+            >
             </div>
-        </div>
 
-        <!--滑块-->
-        <div v-for="item in sliderJson"
-            :style="{
-                position:'absolute',
-                left:item.Left+'px',
-                top:item.Top+'px',
-                width:item.Width + 'px',
-                height:item.Height + 'px',
-                zIndex:item.ZIndex,
-                visibility:item.IsVisibility ? 'visible' : 'hidden',
-            }"
-        >
-            {{item.Name}}
+            <!--信号源列表-->
+            <div
+                :style="{
+                    position:'absolute',
+                    left:signalList[0].Left+'px',
+                    top:signalList[0].Top+'px',
+                    width:signalList[0].Width + 'px',
+                    height:signalList[0].Height + 'px',
+                    zIndex:signalList[0].ZIndex,
+                    display:signalList[0].IsVisibility ? 'black' : 'none',
+                    fontSize:signalList[0].FontSize + 'px',
+                    color:`#${signalList[0].ForegroundStr.slice(3)}`,
+                }"
+            >
+                <!--列表项-->
+                <div v-for="item in signalList[0].PreviewList" style="color:#ffffff">
+                    {{item.DeviceName}}
+                </div>
+            </div>
+
+            <!--滑块-->
+            <div v-for="item in sliderJson"
+                :style="{
+                    position:'absolute',
+                    left:item.Left+'px',
+                    top:item.Top+'px',
+                    width:item.Width + 'px',
+                    height:item.Height + 'px',
+                    zIndex:item.ZIndex,
+                    display:item.IsVisibility ? 'black' : 'none',
+                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
+                    backgroundRepeat:'no-repeat',
+                    backgroundSize:'100% 100%',
+                }"
+            >
+            </div>
+
+            <!--主要页面配置-->
+            <!--<div v-for="item in windowJson"
+                 :style="{
+                    left:item.Left+'px',
+                    top:item.Top+'px',
+                    width:item.Width + 'px',
+                    height:item.Height + 'px',
+                    zIndex:item.ZIndex,
+                    display:item.IsVisibility ? 'visible' : '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>
 </template>
@@ -117,6 +157,7 @@
     import signalList from '../../../static/EnitySignalPreviewList'
     import sliderJson from '../../../static/EnitySlider'
     import imageJson from '../../../static/EnityImage'
+    import windowJson from '../../../static/EnityWindow'
     import storageUtils from "../../utils/storageUtils"
     import {mapState} from 'vuex'
     import draggable from 'vuedraggable'
@@ -149,6 +190,8 @@
                 signalList, // 信号源列表配置
                 sliderJson, // 滑块配置
                 imageJson, // 图片配置
+                windowJson, // 主要页面配置
+                count:0,// 音量计数器
             }
         },
         methods: {
@@ -205,6 +248,23 @@
             // 播放器测试
             playertest() {
                 PubSub.publish('playertest')
+            },
+
+            // 点击按钮
+            clickBtn(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
+                }
+
+                this.$refs[e.ID][0].style.backgroundImage = 'url('+require(`../../../static/images/${e.ActionIcon}`)+')'
             }
         },
         computed: {
@@ -225,22 +285,17 @@
                     animation: 0,
                     group: "description",
                 }
-            }
+            },
         }
     }
 </script>
 
 <style lang="less">
     .containers {
-        position: relative;
-        top: 0;
-        left: 0;
         width: 100%;
-        height: 980px;
+        height: 981px;
         background-color: #333;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        /*position: relative;*/
     }
 </style>