将组件进行拆分

src/main/index.js

@@ -33,11 +33,11 @@ function createWindow () {
 
   mainWindow.webContents.openDevTools();
 
-  let fileContents = fs.readFileSync(path.join(__static, '/EnityWindow.json'), 'utf8')
+  // let fileContents = fs.readFileSync(path.join(__static, '/EnityWindow.json'), 'utf8')
 
-  mainWindow.webContents.on('did-finish-load', function(){
+ /* mainWindow.webContents.on('did-finish-load', function(){
     mainWindow.webContents.send('something', fileContents)
-  })
+  })*/
 
   mainWindow.on('closed', () => {
     mainWindow = null

src/renderer/components/Admin.vue

@@ -2,7 +2,6 @@
 <template>
     <div class="containers">
         <!--主页-->
-<!--        display:windowJson[0].IsVisibility ? 'block' : 'none',-->
         <div
                 :style="{
                 position: 'relative',
@@ -20,7 +19,7 @@
             }"
         >
             <!--按钮-->
-            <div v-for="item in buttonJson"
+            <!--<div v-for="item in buttonJson"
                  :style="{
                     position:'absolute',
                     left:item.Left+'px',
@@ -44,10 +43,11 @@
                  @mouseup="mouseUp(item)"
             >
                 {{item.Text}}
-            </div>
+            </div>-->
+            <ButtonComponent />
 
             <!--大屏显示-->
-            <draggable
+            <!--<draggable
                     :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                     v-for="item in bigScreenJson"
                     element="div"
@@ -68,10 +68,11 @@
                 <div v-for="(item,key) in signalPreList" :key="key" class="item">
                     {{item.ShowName}}
                 </div>
-            </draggable>
+            </draggable>-->
+            <BigShowComponent />
 
             <!--label标签-->
-            <label v-for="item in labelJson"
+            <!--<label v-for="item in labelJson"
                    :style="{
                  fontSize:item.FontSize + 'px',
                  position:'absolute',
@@ -86,10 +87,11 @@
                  lineHeight:item.Height + 'px',
             }">
                 {{item.Text}}
-            </label>
+            </label>-->
+            <LabelComponent />
 
             <!--图片-->
-            <div v-for="item in imageJson"
+            <!--<div v-for="item in imageJson"
                  :style="{
                     position:'absolute',
                     left:item.Left+'px',
@@ -103,10 +105,11 @@
                     backgroundSize:'100% 100%',
                 }"
             >
-            </div>
+            </div>-->
+            <ImageComponent />
 
             <!--信号源列表-->
-            <draggable
+            <!--<draggable
                     :style="{
                     left:signalList[0].Left+'px',
                     top:signalList[0].Top+'px',
@@ -128,7 +131,7 @@
                     @end="isDragging=false"
 
             >
-                <!--列表项-->
+                &lt;!&ndash;列表项&ndash;&gt;
                 <div class="signal_item" v-for="item in signalList[0].PreviewList" :key="item.ID">
                     <div class="signal_item_bg">
                         <div class="signal_item_bg_body">
@@ -137,10 +140,11 @@
                         </div>
                     </div>
                 </div>
-            </draggable>
+            </draggable>-->
+            <SignalListComponent />
 
             <!--滑块-->
-            <div v-for="item in sliderJson"
+            <!--<div v-for="item in sliderJson"
                  :style="{
                     position:'absolute',
                     left:item.Left+'px',
@@ -172,7 +176,8 @@
 
                     </div>
                 </div>
-            </div>
+            </div>-->
+            <SliderComponent />
 
             <!--其他页面-->
             <!--<div v-for="item in windowJson"
@@ -201,57 +206,68 @@
     import storageUtils from "../../utils/storageUtils"
     import '../assets/less/splitscreen.less'
 
-    import labelJson 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 windowJson from '../../../static/EnityWindow'
+    // import labelJson from '../../../static/EnityLable'
+    // import bigScreenJson from '../../../static/EnityBigScreen'
+    // import buttonJson from '../../../static/EnityButton'
+    // import signalList from '../../../static/EnitySignalPreviewList'
+    // import imageJson from '../../../static/EnityImage'
+    // import sliderJson from '../../../static/EnitySlider'
+
+    import ButtonComponent from './Button'
+    import LabelComponent from './Label'
+    import BigShowComponent from './BigShow'
+    import SignalListComponent from './SignalList'
+    import ImageComponent from './Image'
+    import SliderComponent from './Slider'
 
     export default {
         components: {
-            draggable
+            draggable,
+            ButtonComponent,
+            LabelComponent,
+            BigShowComponent,
+            SignalListComponent,
+            ImageComponent,
+            SliderComponent
         },
 
         data() {
             return {
                 user: storageUtils.getUser(), // 本地存储的用户
-                signalPreList: [],  // 被拖到大屏中的信号源列表
-                isDragging: false, // 是否可拖动标志
-                splitScreenStatus: 0,// 分屏状态（默认0: 自由屏，1: 4分屏  2：9分屏  3: 16分屏）
-                labelJson, // label标签配置
-                bigScreenJson,// 大屏显示配置
-                buttonJson, // button按钮配置
-                signalList, // 信号源列表配置
-                sliderJson, // 滑块配置
-                imageJson, // 图片配置
-                windowJson, // 主要页面配置
-                count: 0,   // 音量计数器
+                // signalPreList: [],  // 被拖到大屏中的信号源列表
+                // isDragging: false, // 是否可拖动标志
+                // splitScreenStatus: 0,// 分屏状态（默认0: 自由屏，1: 4分屏  2：9分屏  3: 16分屏）
+                // labelJson, // label标签配置
+                // bigScreenJson,// 大屏显示配置
+                // buttonJson, // button按钮配置
+                // signalList, // 信号源列表配置
+                // sliderJson, // 滑块配置
+                // imageJson, // 图片配置
+               /* count: 0,   // 音量计数器
                 count2: 0, // 预案管理模块计数器
                 count3: 0, // 管理控制按钮计数器
                 count4: 0, // 3个视频按钮计数器
                 count5: 0, // 安卓分布式按钮
-                count6: 0, // 其他按钮
+                count6: 0, // 其他按钮*/
             }
         },
 
         mounted() {
             // 获取分屏按钮数组(将分屏按钮和其他按钮区分开)
-            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'))
+            // 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'))
 
             // 获取功能按钮涉及到的按钮和label
             // 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 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 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.funcObj = {
                 funcBtnArr,
                 funcLabArr,
                 funSliderArr:this.sliderJson
-            }
+            }*/
 
             // 获取电源管理和电脑控制按钮
-            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.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')
         },
 
         methods: {
@@ -451,7 +467,7 @@
         },
 
         computed: {
-            ...mapState(['deviceList']),
+            ...mapState(['deviceList','windowJson']),
             dragOptions1() {
                 return {
                     animation: 0,
@@ -489,7 +505,6 @@
             align-items: center;
 
             /*背景*/
-
             .signal_item_bg {
                 width: 90%;
                 height: 130px;
@@ -502,7 +517,6 @@
                 }
 
                 /*主体*/
-
                 .signal_item_bg_body {
                     width: 96%;
                     height: 96%;
@@ -535,14 +549,12 @@
 
         // 滚动条样式
         /*定义滚动条高宽及背景高宽:分别对应横竖滚动条的尺寸*/
-
         ::-webkit-scrollbar {
             width: 4px;
             background-color: rgba(10, 66, 125, 0.65);
         }
 
         /*定义滚动条轨道:内阴影+圆角*/
-
         ::-webkit-scrollbar-track {
             -webkit-box-shadow: inset 0 0 6px rgba(10, 66, 125, 0.3);
             border-radius: 10px;
@@ -550,7 +562,6 @@
         }
 
         /*定义滑块:内阴影+圆角*/
-
         ::-webkit-scrollbar-thumb {
             border-radius: 10px;
             -webkit-box-shadow: inset 0 0 6px rgba(10, 66, 125, .3);

src/renderer/components/BigShow.vue

@@ -0,0 +1,88 @@
+<!--大屏显示组件-->
+
+<template>
+    <div>
+        <draggable
+                :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
+                v-for="item in bigScreenJson"
+                element="div"
+                v-model="signalPreList"
+                :options="dragOptions2"
+                :move="onMove"
+                @start="isDragging=true"
+                @end="isDragging=false"
+                :style="{
+                    left:item.Left+'px',
+                    top:item.Top+'px',
+                    width:item.Width + 'px',
+                    height:item.Height + 'px',
+                    zIndex:item.ZIndex,
+                    display:item.IsVisibility ? 'black' : 'none',
+                }"
+        >
+            <div v-for="(item,key) in signalPreList" :key="key" class="item">
+                {{item.ShowName}}
+            </div>
+        </draggable>
+    </div>
+</template>
+
+<script>
+    import {mapState} from 'vuex'
+    import draggable from 'vuedraggable'
+
+    export default {
+        data() {
+            return {
+                signalPreList: [],  // 被拖到大屏中的信号源列表
+                isDragging: false, // 是否可拖动标志
+                splitScreenStatus: 0,// 分屏状态（默认0: 自由屏，1: 4分屏  2：9分屏  3: 16分屏）
+            }
+        },
+
+        components: {
+            draggable,
+        },
+
+        methods: {
+            // 移动信号源
+            onMove({relatedContext, draggedContext}) {
+                const relatedElement = relatedContext.element
+                const draggedElement = draggedContext.element
+                return (
+                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
+                )
+            },
+
+            // 分屏操作
+            spliceScreen(value) {
+                this.splitScreenStatus = value
+            },
+        },
+
+        computed: {
+            ...mapState(['bigScreenJson']),
+            dragOptions1() {
+                return {
+                    animation: 0,
+                    group: {
+                        name: "description",
+                        pull: 'clone',
+                        put: false
+                    },
+                    ghostClass: "ghost",
+                }
+            },
+            dragOptions2() {
+                return {
+                    animation: 0,
+                    group: "description",
+                }
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/renderer/components/Button.vue

@@ -0,0 +1,237 @@
+<!--button按钮组件-->
+
+<template>
+    <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 ? 'block' : '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)"
+             @mousedown="mouseDown(item)"
+             @mouseup="mouseUp(item)"
+        >
+            {{item.Text}}
+        </div>
+    </div>
+</template>
+
+<script>
+    import {mapState} from 'vuex'
+
+    export default {
+        data() {
+            return {
+                count: 0,   // 音量计数器
+                count2: 0, // 预案管理模块计数器
+                count3: 0, // 管理控制按钮计数器
+                count4: 0, // 3个视频按钮计数器
+                count5: 0, // 安卓分布式按钮
+            }
+        },
+
+        computed: {
+            ...mapState(['buttonJson']),
+        },
+
+        methods: {
+            // 点击按钮
+            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 => {
+                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
+                            item.IsVisibility = true
+                        } else {
+                            item.IsVisibility = false
+                        }
+                    })
+                    return
+                }
+
+                // 预案管理按钮处理
+                if (e.Name.includes('V0') && e.Name.slice(7) * 1 > 62 && e.Name.slice(7) * 1 < 72) {
+                    if (this.count2 === 0) {
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
+                        ++this.count2
+                    } 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
+                }
+
+                // 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 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}`) + ')'
+                    }
+                    // 保存点过的这个按钮和按钮数据
+                    this.lastBtn3 = this.$refs[e.ID][0]
+                    this.lastData3 = e
+
+                    // （2）界面切换
+                    // 按钮
+                    this.funcObj.funcBtnArr.forEach((item, index) => {
+                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
+                            item.IsVisibility = true
+                        } else {
+                            item.IsVisibility = false
+                        }
+                    })
+
+                    // 标签
+                    this.funcObj.funcLabArr.forEach((item, index) => {
+                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
+                            item.IsVisibility = true
+                        } else {
+                            item.IsVisibility = false
+                        }
+                    })
+
+                    // 滑块
+                    this.funcObj.funSliderArr.forEach((item, index) => {
+                        if (e.MouseDownActionList[0].SourceID === item.WindowID) {
+                            item.IsVisibility = true
+                        } else {
+                            item.IsVisibility = false
+                        }
+                    })
+                    return
+                }
+
+                // 分屏和清屏操作
+                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 === '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 === '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 === 'ac0cc31c-a9b8-4bdf-88cf-928964b93ac5' || e.ID === '201e4bb0-c039-46c7-a55a-049d00de4769') {
+                    // 九分屏
+                    this.spliceScreen(2)
+                    return
+                } else if (e.ID === '2d4c49bc-905b-4f96-a65c-9b0a3e057b3f') {
+                    // 16分屏
+                    this.spliceScreen(3)
+                    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 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}`) + ')'
+                    }
+                    // 保存点过的这个按钮和按钮数据
+                    this.lastBtn5 = this.$refs[e.ID][0]
+                    this.lastData5 = e
+                    return
+                }
+
+                // 电源管理和电脑管理
+                if(this.powerAndCompBtns.some(item => item.ID === e.ID)){
+                    if(e.ActionType === 2){
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
+                        e.ActionType = -2
+                    }else {
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
+                        e.ActionType = 2
+                    }
+                }
+
+                return
+            },
+
+            // 鼠标按下事件
+            mouseDown(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}`) + ')'
+                }else if(e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
+                }else if(e.ID === '19554440-98bc-4644-83a0-d9cefd69153e'){ // 电脑控制All按钮
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.ActionIcon}`) + ')'
+                }
+                return
+            },
+
+            // 鼠标松开事件
+            mouseUp(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}`) + ')'
+                }else if(e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
+                }if(e.ID === '19554440-98bc-4644-83a0-d9cefd69153e'){ // 电脑控制All按钮
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/images/${e.BackIcon}`) + ')'
+                }
+                return
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/renderer/components/Image.vue

@@ -0,0 +1,36 @@
+<!--图片组件-->
+
+<template>
+    <div>
+        <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 ? 'block' : 'none',
+                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
+                    backgroundRepeat:'no-repeat',
+                    backgroundSize:'100% 100%',
+                }"
+        >
+        </div>
+    </div>
+</template>
+
+<script>
+    import {mapState} from 'vuex'
+
+    export default {
+
+        computed: {
+            ...mapState(['imageJson'])
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/renderer/components/Label.vue

@@ -0,0 +1,46 @@
+<!--label标签组件-->
+
+<template>
+    <div>
+        <label v-for="item in labelJson"
+               :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 ? 'block' : 'none',
+                 color:`#${item.ForegroundStr.slice(3)}`,
+                 textAlign:'center',
+                 lineHeight:item.Height + 'px',
+            }">
+            {{item.Text}}
+        </label>
+    </div>
+</template>
+
+<script>
+    import {mapState} from 'vuex'
+
+    export default {
+        data() {
+            return {
+
+            }
+        },
+
+        computed: {
+            ...mapState(['labelJson']),
+        },
+
+        methods: {
+
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/renderer/components/SignalList.vue

@@ -0,0 +1,81 @@
+<template>
+    <draggable
+            :style="{
+                    left:signalListJson[0].Left+'px',
+                    top:signalListJson[0].Top+'px',
+                    width:signalListJson[0].Width + 'px',
+                    height:signalListJson[0].Height + 'px',
+                    zIndex:signalListJson[0].ZIndex,
+                    display:signalListJson[0].IsVisibility ? 'block' : 'none',
+                    fontSize:signalListJson[0].FontSize + 'px',
+                    color:`#${signalListJson[0].ForegroundStr.slice(3)}`,
+                    position:'absolute',
+                    overflow:'auto',
+                    }"
+            class="signal_body"
+            element="div"
+            v-model="signalListJson[0].PreviewList"
+            :options="dragOptions1"
+            :move="onMove"
+            @start="isDragging=true"
+            @end="isDragging=false"
+
+    >
+        <!--列表项-->
+        <div class="signal_item" v-for="item in signalListJson[0].PreviewList" :key="item.ID">
+            <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.ShowName}}</div>
+                </div>
+            </div>
+        </div>
+    </draggable>
+</template>
+
+<script>
+    import {mapState} from 'vuex'
+    import draggable from 'vuedraggable'
+
+    export default {
+        components: {
+            draggable
+        },
+
+        methods: {
+            // 移动信号源
+            onMove({relatedContext, draggedContext}) {
+                const relatedElement = relatedContext.element
+                const draggedElement = draggedContext.element
+                return (
+                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
+                )
+            },
+        },
+
+        computed: {
+            ...mapState(['signalListJson']),
+            dragOptions1() {
+                return {
+                    animation: 0,
+                    group: {
+                        name: "description",
+                        pull: 'clone',
+                        put: false
+                    },
+                    ghostClass: "ghost",
+                }
+            },
+            dragOptions2() {
+                return {
+                    animation: 0,
+                    group: "description",
+                }
+            },
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/renderer/components/Slider.vue

@@ -0,0 +1,53 @@
+<!--Slider滑块组件-->
+
+<template>
+    <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 ? 'block' : 'none',
+                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
+                    backgroundRepeat:'no-repeat',
+                }"
+        >
+            <div
+                    :style="{
+                           width:item.imgBgWidth + 'px',
+                           height:item.imgBgHeight + 'px',
+                        }"
+            >
+                <div
+                        :style="{
+                            width:item.imgSliderWidth + 'px',
+                            height:item.imgSliderHeight + 'px',
+                            backgroundImage:'url('+require(`../../../static/images/${item.SliderIcon}`)+')',
+                            backgroundRepeat:'no-repeat',
+                            marginLeft:'22px',
+                        }"
+                        @click="clickBtn(item)"
+                >
+
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {mapState} from 'vuex'
+
+    export default {
+        computed: {
+            ...mapState(['sliderJson']),
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

src/renderer/main.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import axios from 'axios'
+import fs from 'fs'
+import path from 'path'
 
 import App from './App'
 import router from './router'
@@ -7,10 +9,14 @@ import store from './store'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
-require('electron').ipcRenderer.on('something',(event,message) => {
+/*require('electron').ipcRenderer.on('something',(event,message) => {
   // console.log('msg:', message) // 主进程发送到渲染进程的数据
   Vue.prototype.EnityWindow = message
-})
+})*/
+
+// 渲染进程中读取配置json文件
+/*let EnityWindow = fs.readFileSync(path.join(__static, '/EnityWindow.json'), 'utf8')
+Vue.prototype.EnityWindow = EnityWindow*/
 
 Vue.use(ElementUI)
 

src/renderer/store/state.js

@@ -1,4 +1,17 @@
 /*状态对象模块*/
+/*import fs from 'fs'
+import path from 'path'
+
+let EnityWindow = fs.readFileSync(path.join(__static, '/EnityWindow.json'), 'utf8')*/
+
+import windowJson from '../../../static/EnityWindow'
+import buttonJson from '../../../static/EnityButton'
+import labelJson from '../../../static/EnityLable'
+import bigScreenJson from '../../../static/EnityBigScreen'
+import signalListJson from '../../../static/EnitySignalPreviewList'
+import imageJson from '../../../static/EnityImage'
+import sliderJson from '../../../static/EnitySlider'
+
 export default {
   user: {}, // 用户信息
   // 设备列表数据
@@ -8,4 +21,25 @@ export default {
     {name:'PC3',id:'3'},
     {name:'PC4',id:'4'}
   ],
+
+  // window窗口
+  windowJson,
+
+  // button按钮
+  buttonJson,
+
+  // label标签
+  labelJson,
+
+  // 大屏显示
+  bigScreenJson,
+
+  // 信号源列表
+  signalListJson,
+
+  // 图片
+  imageJson,
+
+  // 滑块组件
+  sliderJson
 }