将配置文件用Data文件夹包裹起来，修改盒子拖到任意栅格中前的一次提交

src/renderer/App.vue

@@ -17,7 +17,7 @@
   export default {
     async mounted() {
       // 单独上传配置文件
-      axios.get('static/EnityBigScreen.Data').then(async res => {
+      axios.get('static/Data/EnityBigScreen.Data').then(async res => {
         if (res.status === 200) {
           const result = await reqConfigBigScreen(res.data)
           if(result[0].ID){
@@ -26,7 +26,7 @@
         }
       })
 
-      axios.get('static/EnityDevice.Data').then(async res => {
+      axios.get('static/Data/EnityDevice.Data').then(async res => {
         if (res.status === 200) {
           const result = await reqConfigDevice(res.data)
           if(result[0].ID){
@@ -44,7 +44,7 @@
       })
 
       // 更新vuex中的缩放比例
-      axios.get('static/EnityWindow.Data').then(async res => {
+      axios.get('static/Data/EnityWindow.Data').then(async res => {
         if (res.status === 200) {
               const bigScale = window.screen.height/res.data[0].Height
               this.$store.dispatch('updateScale',bigScale)

src/renderer/api/index.js

@@ -7,7 +7,7 @@ import ajax from './ajax'
 
 let BASE_URL
 
-axios.get('static/EnitySystem.data').then(async res => {
+axios.get('static/Data/EnitySystem.data').then(async res => {
     if (res.status === 200) {
         BASE_URL = `${res.data ? res.data.ServerIP : ''}:${res.data ? res.data.ServerPort : ''}`
     }

src/renderer/components/Admin.vue

@@ -11,7 +11,7 @@
                 height:windowJson[0] ? windowJson[0].Height*bigScale + 'px' : '',
                 zIndex:windowJson[0] ? windowJson[0].ZIndex : '',
                 display:windowJson[0] ? (windowJson[0].IsVisibility ? 'block' : 'none') : '',
-                backgroundImage:windowJson[0] ? (windowJson[0].BackIcon ? 'url('+require(`../../../static/${windowJson[0].BackIcon}`)+')' : null) : '',
+                backgroundImage:windowJson[0] ? (windowJson[0].BackIcon ? 'url('+require(`../../../static/Data/${windowJson[0].BackIcon}`)+')' : null) : '',
                 backgroundRepeat:'no-repeat',
                 backgroundSize:'100% 100%',
                 backgroundColor:`#${windowJson[0] ? (windowJson[0].BrackgroupStr ? windowJson[0].BrackgroupStr.slice(3) : null) : ''}`,

src/renderer/components/BigShow.vue

@@ -21,26 +21,51 @@
                     display:item.IsVisibility ? 'black' : 'none',
                 }"
         >
-            <VueDragResize
+            <!--<VueDragResize
                     v-for="itemV in signalPreList" :key="itemV.deviceID" class="sitem"
                     :w="item.Width*bigScale/itemV.splitScreenStatus" :h="item.Height*bigScale/itemV.splitScreenStatus"
                     :parentLimitation="false"
                     @dragstop="dragStop"
-                    @resizestop="(obj) => reSizeSignal(obj,itemV,item)"
+                    @resizestop="(obj) => reSizeSignal(obj,itemV)"
             >
                 <div ref="signal">
                     <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
-                    <!--<video-player
+                    <video-player
                             ref="videoPlayer"
                             :options="playerOptions"
                             :playsinline="true"
                     >
-                    </video-player>-->
+                    </video-player>
                 </div>
             </VueDragResize>
 
             <div v-for="(itemD,index) in divArr" :key="index" class="sitem2">
                 {{itemD}}
+            </div>-->
+
+
+            <div v-for="item in signalPreList">
+                <VueDragResize
+                        v-for="itemV in signalPreList" v-if="itemV.deviceID" :key="itemV.deviceID" class="sitem"
+                        :w="item.Width*bigScale/itemV.splitScreenStatus" :h="item.Height*bigScale/itemV.splitScreenStatus"
+                        :parentLimitation="false"
+                        @dragstop="dragStop"
+                        @resizestop="(obj) => reSizeSignal(obj,itemV)"
+                >
+                    <div ref="signal">
+                        <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
+                        <video-player
+                                ref="videoPlayer"
+                                :options="playerOptions"
+                                :playsinline="true"
+                        >
+                        </video-player>
+                    </div>
+                </VueDragResize>
+
+                <div v-for="(itemD,index) in divArr" :key="index" class="sitem2">
+                    {{itemD}}
+                </div>
             </div>
 
         </draggable>
@@ -63,9 +88,14 @@
                 isDragging: false, // 是否可拖动标志
                 divArr:[],// 默认大屏中盒子的数组
                 streamWindows:[], // 传递出去的信号源位置信息
-                bigScreenJson:[],
+                bigScreenJson:[], // 大屏配置json文件
                 playerOptions: { // rtmp视频流配置
-                    sources: [],
+                    sources: [
+                        {
+                            "src": "rtmp://58.200.131.2:1935/livetv/hunantv",
+                            "type": "rtmp/flv"
+                        }
+                    ],
                     techOrder: ['flash'],
                     autoplay: true,
                     controls: false,
@@ -73,7 +103,8 @@
                     aspectRatio: '200:93',
                     preload: 'auto',
                     notSupportedMessage: '此视频暂无法播放，请稍后再试',
-                }
+                },
+                allDiv:[], // 大屏中所有的盒子（包括普通div和信号源列表）
             }
         },
 
@@ -86,8 +117,8 @@
         async beforeCreate() {
             this.bigScreenJson = await getStaticFile('EnityBigScreen.Data')
             this.currentBigshow = this.bigScreenJson.filter(item => item.IsVisibility === true)
-            this.videoSourceJson = await getStaticFile('vidoe_source.json')
-            this.$set(this.playerOptions,'sources',this.videoSourceJson)
+            /*this.videoSourceJson = await getStaticFile('video_source.json')
+            this.$set(this.playerOptions,'sources',this.videoSourceJson)*/
         },
 
         methods: {
@@ -126,7 +157,7 @@
                             bigScreenId:this.currentBigshow[0].ID,
                             streamWindows
                         }
-                        console.log(data)
+                        // console.log(data)
                         this.streamWindows = streamWindows
                         // 调用大屏开窗接口
                         await reqRefreshView(data)
@@ -152,7 +183,7 @@
                 const otherItems = arr.filter(item => item.sourceId !== itemV.sourceId)
                 const newStreamWindows = [...currentItem,...otherItems]
                 this.streamWindows = newStreamWindows
-                this.reqRefreshBigScreen(newStreamWindows,true)
+                this.reqRefreshBigScreen(newStreamWindows)
             },
 
             // 关闭信号源

src/renderer/components/Button.vue

@@ -12,7 +12,7 @@
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
                     fontSize:item.FontSize*bigScale + 'px',
-                    backgroundImage:'url('+require(`../../../static/${item.BackIcon}`)+')',
+                    backgroundImage:'url('+require(`../../../static/Data/${item.BackIcon}`)+')',
                     backgroundSize:'100% 100%',
                     backgroundRepeat:'no-repeat',
                     color:`#${item.ForegroundStr.slice(3)}`,
@@ -77,10 +77,10 @@
                 // 预案管理声音开关
                 if (e.ID === '355d3c32-1502-40b4-9ddd-663d5b8469e7') {
                     if (this.count % 2 === 0) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         ++this.count
                     } else {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.BackIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                         ++this.count
                     }
                     return
@@ -89,11 +89,11 @@
                 // 切换屏幕
                 if (e.Text === 'LCD屏' || e.Text === 'LED屏' || e.Text === '投影机') {
                     if (this.count4 === 0) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         ++this.count4
                     } else if(e !== this.lastData4) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
-                        this.lastBtn4.style.backgroundImage = 'url(' + require(`../../../static/${this.lastData4.BackIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
+                        this.lastBtn4.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData4.BackIcon}`) + ')'
                     }
                     // 保存点过的这个按钮和按钮数据
                     this.lastBtn4 = this.$refs[e.ID][0]
@@ -114,11 +114,11 @@
                 // 预案管理按钮处理
                 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/${e.ActionIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         ++this.count2
                     } else if(e !== this.lastData) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
-                        this.lastBtn.style.backgroundImage = 'url(' + require(`../../../static/${this.lastData.BackIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
+                        this.lastBtn.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData.BackIcon}`) + ')'
                     }
                     // 保存点过的按钮和按钮数据
                     this.lastBtn = this.$refs[e.ID][0]
@@ -130,11 +130,11 @@
                 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/${e.ActionIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         ++this.count3
                     } else if(e !== this.lastData3) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
-                        this.lastBtn3.style.backgroundImage = 'url(' + require(`../../../static/${this.lastData3.BackIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
+                        this.lastBtn3.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData3.BackIcon}`) + ')'
                     }
                     // 保存点过的这个按钮和按钮数据
                     this.lastBtn3 = this.$refs[e.ID][0]
@@ -196,11 +196,11 @@
                 // 安卓和分布式按钮
                 if (e.Text === '安卓' || e.Text === '分布式') {
                     if (this.count5 === 0) {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         ++this.count5
                     } else if(e !== this.lastData5){
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
-                        this.lastBtn5.style.backgroundImage = 'url(' + require(`../../../static/${this.lastData5.BackIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
+                        this.lastBtn5.style.backgroundImage = 'url(' + require(`../../../static/Data/${this.lastData5.BackIcon}`) + ')'
                     }
                     // 保存点过的这个按钮和按钮数据
                     this.lastBtn5 = this.$refs[e.ID][0]
@@ -211,10 +211,10 @@
                 // 电源管理和电脑管理
                 if(this.powerAndCompBtns.some(item => item.ID === e.ID)){
                     if(e.ActionType === 2){
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                         e.ActionType = -2
                     }else {
-                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.BackIcon}`) + ')'
+                        this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                         e.ActionType = 2
                     }
                 }
@@ -224,13 +224,13 @@
             // 鼠标按下事件
             mouseDown(e) {
                 if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                 }else if(e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                 }else if(e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                 }else if(e.ID === '19554440-98bc-4644-83a0-d9cefd69153e'){ // 电脑控制All按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.ActionIcon}`) + ')'
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.ActionIcon}`) + ')'
                 }
                 return
             },
@@ -238,13 +238,13 @@
             // 鼠标松开事件
             mouseUp(e) {
                 if (this.arr.some(item => e === item) && e.Text !== '安卓' && e.Text !== '分布式') { // 分屏控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.BackIcon}`) + ')'
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                 }else if(e.WindowID === '027ab76d-6b9c-46ac-abe6-75b8059f786b') { // 视频控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.BackIcon}`) + ')'
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                 }else if(e.WindowID === 'a12b287f-f68c-4efa-b652-d6e5b0a09d0d') { // 环境控制按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.BackIcon}`) + ')'
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                 }if(e.ID === '19554440-98bc-4644-83a0-d9cefd69153e'){ // 电脑控制All按钮
-                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/${e.BackIcon}`) + ')'
+                    this.$refs[e.ID][0].style.backgroundImage = 'url(' + require(`../../../static/Data/${e.BackIcon}`) + ')'
                 }
                 return
             },

src/renderer/components/Image.vue

@@ -11,7 +11,7 @@
                     height:item.Height*bigScale + 'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
-                    backgroundImage:'url('+require(`../../../static/${item.BackIcon}`)+')',
+                    backgroundImage:'url('+require(`../../../static/Data/${item.BackIcon}`)+')',
                     backgroundRepeat:'no-repeat',
                     backgroundSize:'100% 100%',
                 }"

src/renderer/components/Slider.vue

@@ -11,7 +11,7 @@
                     height:item.Height*bigScale + 'px',
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
-                    backgroundImage:'url('+require(`../../../static/${item.BackIcon}`)+')',
+                    backgroundImage:'url('+require(`../../../static/Data/${item.BackIcon}`)+')',
                     backgroundRepeat:'no-repeat',
                 }"
         >
@@ -25,7 +25,7 @@
                         :style="{
                             width:item.imgSliderWidth*bigScale + 'px',
                             height:item.imgSliderHeight*bigScale + 'px',
-                            backgroundImage:'url('+require(`../../../static/${item.SliderIcon}`)+')',
+                            backgroundImage:'url('+require(`../../../static/Data/${item.SliderIcon}`)+')',
                             backgroundRepeat:'no-repeat',
                             marginLeft:'40%',
                         }"

src/utils/tools.js

@@ -37,7 +37,7 @@ export function getElementTop(element){
 export function getStaticFile(url) {
     return new Promise(function (resolve) {
         let promise
-        promise = axios.get(`static/${url}`)
+        promise = axios.get(`static/Data/${url}`)
 
         promise.then(function (response) {
             resolve(response.data)