修改提出的意见

src/renderer/assets/less/splitscreen.less

@@ -14,7 +14,8 @@
   .sitem {
     border: 1px solid #000000;
     color:#fff;
-    background-color: #717171;
+    //background-color: #717171;
+    background-color: #000000;
     position: relative;
 
     // 关闭信号源开窗按钮
@@ -35,6 +36,7 @@
 
   /*分屏项(栅格)*/
   .sitem2 {
+    //float: left;
     color:#000;
     border: 1px solid #3b3b3b;
     background-color: #0b0b0b;

src/renderer/components/Admin.vue

@@ -55,7 +55,6 @@
     import SignalListComponent from './SignalList'
     import ImageComponent from './Image'
     import SliderComponent from './Slider'
-    import {reqLogout} from "../api"
     import {getStaticFile} from "../../utils/tools"
 
     export default {

src/renderer/components/BigShow.vue

@@ -21,10 +21,9 @@
                     display:item.IsVisibility ? 'black' : 'none',
                 }"
         >
-            <!--<VueDragResize
-                    v-for="itemV in signalPreList" :key="itemV.deviceID" class="sitem"
+            <VueDragResize
+                    v-for="itemV in signalPreList" :key="itemV.Id" class="sitem"
                     :w="item.Width*bigScale/itemV.splitScreenStatus" :h="item.Height*bigScale/itemV.splitScreenStatus"
-                    :parentLimitation="false"
                     @dragstop="dragStop"
                     @resizestop="(obj) => reSizeSignal(obj,itemV)"
             >
@@ -39,21 +38,19 @@
                 </div>
             </VueDragResize>
 
-            <div v-for="(itemD,index) in divArr" :key="index" class="sitem2">
+            <div v-for="itemD in divArr" :key="itemD" class="sitem2">
                 {{itemD}}
-            </div>-->
-
+            </div>
 
-            <div v-for="item in signalPreList">
+            <!--<div v-for="item in [...signalPreList,...divArr]">
                 <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"
+                        v-if="item.deviceID" :key="item" class="sitem"
+                        :w="item.Width*bigScale/item.splitdeviceIDScreenStatus" :h="item.Height*bigScale/item.splitScreenStatus"
                         @dragstop="dragStop"
-                        @resizestop="(obj) => reSizeSignal(obj,itemV)"
+                        @resizestop="(obj) => reSizeSignal(obj,item)"
                 >
                     <div ref="signal">
-                        <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
+                        <div class="closeBtn" @click.stop="closeSignal(item)">×</div>
                         <video-player
                                 ref="videoPlayer"
                                 :options="playerOptions"
@@ -63,10 +60,10 @@
                     </div>
                 </VueDragResize>
 
-                <div v-for="(itemD,index) in divArr" :key="index" class="sitem2">
-                    {{itemD}}
+                <div v-else :key="item" class="sitem2">
+                    {{item}}
                 </div>
-            </div>
+            </div>-->
 
         </draggable>
     </div>
@@ -78,7 +75,7 @@
     import VueDragResize from 'vue-drag-resize'
 
     import '../assets/less/splitscreen.less'
-    import {getElementLeft, getElementTop, getStaticFile} from "../../utils/tools"
+    import {getElementLeft, getElementTop, getStaticFile, guId} from "../../utils/tools"
     import {reqRefreshView} from "../api"
     import VideoPlayer from "./player.vue"
 
@@ -117,8 +114,6 @@
         async beforeCreate() {
             this.bigScreenJson = await getStaticFile('EnityBigScreen.Data')
             this.currentBigshow = this.bigScreenJson.filter(item => item.IsVisibility === true)
-            /*this.videoSourceJson = await getStaticFile('video_source.json')
-            this.$set(this.playerOptions,'sources',this.videoSourceJson)*/
         },
 
         methods: {
@@ -131,7 +126,7 @@
                 )
             },
 
-            // 大屏开窗
+            // 大屏开窗接口提交
             reqRefreshBigScreen(arr) {
                 const streamWindows = []
                 setTimeout(async () => {
@@ -189,7 +184,7 @@
             // 关闭信号源
             closeSignal(signal) {
                 const signalPreList = this.$store.state.signalPreList
-                const newSignalPreList = signalPreList.filter(item => item.sourceId !== signal.sourceId)
+                const newSignalPreList = signalPreList.filter(item => item.Id !== signal.Id)
                 this.$store.dispatch('updateSignalPreList',newSignalPreList)
             }
         },
@@ -201,18 +196,26 @@
                 get() {
                     return this.$store.state.signalPreList
                 },
+
                 set(arr) {
-                    if(arr.length>0){
-                        let index = arr.length-1
-                        arr[index].splitScreenStatus = this.$store.state.splitScreenStatus+1
-                        arr[index].width = this.currentBigshow[0].Width*this.$store.state.bigScale/arr[index].splitScreenStatus
-                        arr[index].height = this.currentBigshow[0].Height*this.$store.state.bigScale/arr[index].splitScreenStatus
-                        arr[index].widthScale = arr[index].width/(this.currentBigshow[0].Width*this.$store.state.bigScale)
-                        arr[index].heightScale = arr[index].height/(this.currentBigshow[0].Height*this.$store.state.bigScale)
-                        this.$store.dispatch('updateSignalPreList',arr)
+                    const arr2 = []
+                    arr.forEach(item => {
+                        arr2.push(JSON.parse(JSON.stringify(item)))
+                    })
+                    arr2.forEach(item => item.Id = guId())
+                    console.log(arr2)
+
+                    if(arr2.length>0){
+                        let index = arr2.length-1
+                        arr2[index].splitScreenStatus = this.$store.state.splitScreenStatus+1
+                        arr2[index].width = this.currentBigshow[0].Width*this.$store.state.bigScale/arr2[index].splitScreenStatus
+                        arr2[index].height = this.currentBigshow[0].Height*this.$store.state.bigScale/arr2[index].splitScreenStatus
+                        arr2[index].widthScale = arr2[index].width/(this.currentBigshow[0].Width*this.$store.state.bigScale)
+                        arr2[index].heightScale = arr2[index].height/(this.currentBigshow[0].Height*this.$store.state.bigScale)
+                        this.$store.dispatch('updateSignalPreList',arr2)
                         return
                     }
-                    this.$store.dispatch('updateSignalPreList',arr)
+                    this.$store.dispatch('updateSignalPreList',arr2)
                 }
             },
 
@@ -253,10 +256,6 @@
                     this.$data.divArr.push(i+1)
                 }
 
-                /*const arr = this.$store.state.signalPreList
-                this.reqRefreshBigScreen(arr)*/
-                // this.$store.dispatch('updateSignalPreList',this.$data.streamWindows)
-                // console.log(this.$data.streamWindows)
                 this.reqRefreshBigScreen(this.$data.streamWindows)
             }
         }

src/renderer/components/Button.vue

@@ -12,7 +12,8 @@
                     zIndex:item.ZIndex,
                     display:item.IsVisibility ? 'block' : 'none',
                     fontSize:item.FontSize*bigScale + 'px',
-                    backgroundImage:'url('+require(`../../../static/Data/${item.BackIcon}`)+')',
+                    backgroundColor:`#${item.BrackgroupStr.slice(3)}`,
+                    backgroundImage:item.BackIcon ? 'url('+require(`../../../static/Data/${item.BackIcon}`)+')' : null,
                     backgroundSize:'100% 100%',
                     backgroundRepeat:'no-repeat',
                     color:`#${item.ForegroundStr.slice(3)}`,

src/renderer/components/SignalList.vue

@@ -25,7 +25,7 @@
             <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 class="signal_item_bg_body_font">{{item.deviceID}}</div>
                 </div>
             </div>
         </div>

src/utils/tools.js

@@ -44,3 +44,11 @@ export function getStaticFile(url) {
         })
     })
 }
+
+// 生产guid的工具函数
+export function guId() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+        return v.toString(16);
+    });
+}