搭建页面布局

.electron-vue/webpack.renderer.config.js

@@ -130,9 +130,9 @@ let rendererConfig = {
         removeAttributeQuotes: true,
         removeComments: true
       },
-      /*nodeModules: process.env.NODE_ENV !== 'production'
+      nodeModules: process.env.NODE_ENV !== 'production'
         ? path.resolve(__dirname, '../node_modules')
-        : false*/
+        : false
     }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoEmitOnErrorsPlugin()

src/renderer/components/Admin.vue

@@ -1,104 +1,122 @@
 <!--管理界面-->
 <template>
     <div class="containers">
-        <div class="leftblank">
-            <img class="avator" src="../assets/images/avatar.jpg" alt="头像">
-            <div class="userinfo">
-                <p>{{user.username}}</p>
-                <el-link type="primary" @click="logout" :underline="false">退出</el-link>
-            </div>
+        <!--大屏显示-->
+        <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'
+            }"
+        >
+            {{item.Name}}
+        </div>
+
+        <!--按钮-->
+        <button 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,
+                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>
-        <div class="maincontent">
-            <div class="title">
-                <p>分布式视频管理系统</p>
-            </div>
-            <div class="screenmanage">
-                <div class="pre_planmanage">
-                    <h2>预案管理</h2>
-                    <el-button type="primary" size="small" @click="addSignal">添加信号源</el-button>
-                    <el-button type="primary" size="small" @click="settingBackground">设置背景</el-button>
-                    <el-button type="primary" size="small" @click="addPrePlan">新建预案</el-button>
-                    <el-button type="primary" size="small" @click="loadPrePlan">加载预案</el-button>
-                    <el-button type="primary" size="small" @click="running">跑马灯</el-button>
-                    <el-button type="primary" size="small" @click="playertest">播放器测试</el-button>
-                    <el-button type="primary" size="small">send</el-button>
-                    <el-button type="primary" size="small">dummy</el-button>
-                    <el-button type="primary" size="small">clear device</el-button>
-                    <el-button type="primary" size="small">rebuild DB</el-button>
-                </div>
-                <div class="bigscreen_control">
-                    <draggable
-                            :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
-                            element="div"
-                            v-model="signalList"
-                            :options="dragOptions2"
-                            :move="onMove"
-                            @start="isDragging=true"
-                            @end="isDragging=false"
-                    >
-                        <div v-for="(item,key) in signalList" :key="key" class="item">
-                            {{item.name}}
-                        </div>
-                    </draggable>
-
-                    <div class="control_btns">
-                        <!--分屏按钮-->
-                        <div class="split_btns">
-                            <el-button type="success" @click="spiltScreenOperation(0)">自由屏</el-button>
-                            <el-button type="success" @click="spiltScreenOperation(1)">四分屏</el-button>
-                            <el-button type="success" @click="spiltScreenOperation(2)">九分屏</el-button>
-                            <el-button type="success" @click="spiltScreenOperation(3)">十六分屏</el-button>
-                            <el-button type="success" @click="clearScreen">清屏</el-button>
-                        </div>
-
-                        <!--其他按钮-->
-                        <div class="other_btns">
-
-                        </div>
-                    </div>
-                </div>
-                <div class="signal_source">
-                    <div class="signal_title">
-                        <h2>信号源列表</h2>
-                    </div>
-                    <draggable
-                            class="signal_body"
-                            element="div"
-                            v-model="deviceList"
-                            :options="dragOptions1"
-                            :move="onMove"
-                            @start="isDragging=true"
-                            @end="isDragging=false"
-                    >
-                        <div class="signal_item" v-for="(item,index) in deviceList" :key="index">
-                            <div class="signal_item_bg">
-                                <div class="signal_item_bg_body">
-                                    <div class="signal_item_bg_body_space"></div>
-                                    <div class="signal_item_bg_body_font">{{item.name}}</div>
-                                </div>
-                            </div>
-                        </div>
-                    </draggable>
-                </div>
-            </div>
-            <div class="footmenu">
 
+        <!--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}}
             </div>
         </div>
-        <div class="rightblank">
 
+        <!--滑块-->
+        <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>
-        <addSignalModal />
-        <settingBackground />
-        <addPrePlan />
-        <loadPrePlan />
-        <running />
-        <playertest />
     </div>
 </template>
 
 <script>
-    import '../assets/less/admin.less'
+    import lableJson from '../../../static/EnityLable'
+    import bigScreenJson from '../../../static/EnityBigScreen'
+    import buttonJson from '../../../static/EnityButton'
+    import signalList from '../../../static/EnitySignalPreviewList'
+    import sliderJson from '../../../static/EnitySlider'
+    import imageJson from '../../../static/EnityImage'
     import storageUtils from "../../utils/storageUtils"
     import {mapState} from 'vuex'
     import draggable from 'vuedraggable'
@@ -118,14 +136,19 @@
             addPrePlan,
             loadPrePlan,
             running,
-            playertest
+            playertest,
         },
         data() {
             return {
                 user:storageUtils.getUser(),
-                signalList:[],  // 被拖到大屏中的信号源列表
                 isDragging:false,
                 splitScreenStatus:0,// 分屏状态（默认0: 自由屏，1: 4分屏  2：9分屏  3: 16分屏）
+                lableJson, // label标签配置
+                bigScreenJson,// 大屏显示配置
+                buttonJson, // button按钮配置
+                signalList, // 信号源列表配置
+                sliderJson, // 滑块配置
+                imageJson, // 图片配置
             }
         },
         methods: {
@@ -207,23 +230,17 @@
     }
 </script>
 
-<style>
-    .leftblank {
+<style lang="less">
+    .containers {
+        position: relative;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 980px;
+        background-color: #333;
         display: flex;
-    }
-    .avator {
-        width: 50px;
-        height: 50px;
-        border-radius: 50%;
-        padding:15px;
-        cursor: pointer;
-    }
-    .userinfo {
-        padding-left:4px;
-    }
-    .userinfo p {
-        color:#fff;
-        margin-bottom:10px;
+        justify-content: center;
+        align-items: center;
     }
 </style>