增加一个大屏对象用来存放所有大屏需要显示的相关信息

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

src/renderer/components/BigShow.vue

@@ -3,12 +3,12 @@
 <template>
     <div>
         <draggable
-                v-for="(item,index) in currentBigshow"
+                v-for="item in currentBigshow"
                 element="div"
-                v-model="signalPreList"
+                v-model="bigScreenObj[item.ID].signalArr"
                 :options="dragOptions2"
                 @change="log"
-                :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
+                :class="['split_screen', bigScreenObj[item.ID].splitStatus === 0 ? 'split_screen_one' : bigScreenObj[item.ID].splitStatus === 1 ? 'split_screen_four' : bigScreenObj[item.ID].splitStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                 :style="{
                     float:'left',
                     width:item.Width*bigScale + 'px',
@@ -21,25 +21,24 @@
                 id="bigscreen"
         >
             <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"
+                    v-for="itemV in bigScreenObj[item.ID].signalArr" :key="itemV.Id" class="sitem"
+                    :w="item.Width*bigScale/bigScreenObj[item.ID].splitStatus" :h="item.Height*bigScale/bigScreenObj[item.ID].splitStatus" :parentLimitation="false"
                     :x="itemV.left" :y="itemV.top"
                     @dragstop="(obj) => dragStop(obj,itemV)"
                     @resizestop="(obj) => reSizeSignal(obj,itemV)"
             >
                 <div ref="signal">
                     {{itemV.deviceID}}
-                    <!--<video-player
+                    <!--<VideoPlayer
                                ref="videoPlayer"
                                :options="playerOptions"
                                :playsinline="true"
-                       >
-                    </video-player>-->
+                       />-->
                     <div class="closeBtn" @click.stop="closeSignal(itemV)">×</div>
                 </div>
             </VueDragResize>
 
-            <div v-for="itemD in bindList" :key="itemD" class="sitem2">
+            <div v-for="itemD in bigScreenObj[item.ID].bindList" :key="itemD" class="sitem2">
                 {{itemD}}
             </div>
         </draggable>
@@ -59,11 +58,8 @@
     export default {
         data() {
             return {
-                isDragging: false, // 是否可拖动标志
-                bindList:[], // 拼接屏的数量
                 streamWindows:[], // 传递出去的信号源位置信息
-                bigScreenJson:[], // 大屏配置json文件
-                currentBigshow:[], // 当前大屏
+                currentBigshow:[], // 当前显示的大屏
                 playerOptions: { // rtmp视频流配置
                     sources: [
                         {
@@ -87,17 +83,37 @@
         components: {
             draggable,
             VueDragResize,
-            "video-player": VideoPlayer
+            VideoPlayer
         },
 
         async beforeCreate() {
-            this.bigScreenJson = await getStaticFile('EnityBigScreen.Data')
-            this.currentBigshow = this.bigScreenJson.filter(item => item.IsVisibility === true)
-            const num = this.currentBigshow[0].BindList.length
+            const bigScreenJson = await getStaticFile('EnityBigScreen.Data')
+            this.currentBigshow = bigScreenJson.filter(item => item.IsVisibility === true)
+
+            // 给大屏对象进行初始化显示
+            const obj = {}
+            this.currentBigshow.forEach(item => {
+                obj[item.ID] = {
+                    bindList:[],
+                    splitStatus:0,
+                    signalArr:[]
+                }
+                const num = item.BindList.length
+                // 拼接屏数量
+                for(let i=0;i<num;i++){
+                    obj[item.ID].bindList.push(i+1)
+                }
+                // 根据拼接屏数量得到分屏状态
+                obj[item.ID].splitStatus = Math.floor(Math.sqrt(num)-1)
+            })
+            console.log(obj)
+            this.$store.dispatch('updateBigscreenObj',obj)
+
+            /*const num = this.currentBigshow[0].BindList.length
             for(let i=0;i<num;i++){
                 this.$data.bindList.push(i+1)
             }
-            this.$store.dispatch('splitScreen', Math.sqrt(num)-1)
+            this.$store.dispatch('splitScreen', Math.sqrt(num)-1)*/
         },
 
         updated() {
@@ -183,7 +199,7 @@
         },
 
         computed: {
-            ...mapState(['splitScreenStatus', 'bigScale','positionNum']),
+            ...mapState(['splitScreenStatus', 'bigScale','positionNum','bigScreenObj']),
 
             signalPreList: {
                 get() {

src/renderer/store/actions.js

@@ -1,15 +1,16 @@
 /*包含n个用于间接更新状态的方法的对象模块*/
 import {
-  SAVE_USER,
-  RESET_USER,
-  CLEAR_SCREEN,
-  SPLIT_SCREEN,
-  UPDATE_SIGNALPRELIST,
-  SAVE_BIGSCREEN,
-  SAVE_SIGNALLIST,
-  SAVE_DEVICE,
-  UPDATE_SCALE,
-  UPDATE_POSITIONNUM
+    SAVE_USER,
+    RESET_USER,
+    CLEAR_SCREEN,
+    SPLIT_SCREEN,
+    UPDATE_SIGNALPRELIST,
+    SAVE_BIGSCREEN,
+    SAVE_SIGNALLIST,
+    SAVE_DEVICE,
+    UPDATE_SCALE,
+    UPDATE_POSITIONNUM,
+    UPDATE_BIGSCREENOBJ
 } from './mutation-types'
 
 export default {
@@ -63,5 +64,23 @@ export default {
   // 更新信号源在第几个栅格中
   updatePositionNum({commit},positionNum) {
     commit(UPDATE_POSITIONNUM,{positionNum})
-  }
+  },
+
+  // 更新大屏对象
+  updateBigscreenObj({commit},obj) {
+    commit(UPDATE_BIGSCREENOBJ,{obj})
+  },
 }
+
+
+
+
+
+
+
+
+
+
+
+
+

src/renderer/store/getters.js

@@ -7,6 +7,7 @@ export default {
   /*totalSize (state) {
     return state.todos.length
   },
+
   // 完成的数量
   completeSize (state) {
     return state.todos.reduce((preTotal, todo) => preTotal + (todo.complete?1:0) ,0)

src/renderer/store/mutation-types.js

@@ -9,4 +9,5 @@ export const SAVE_SIGNALLIST = 'save_signallist' // 保存信号源列表数据
 export const SAVE_DEVICE = 'save_device' // 保存设备数据
 export const UPDATE_SCALE = 'update_bigScale' // 更新元素缩放比例
 export const UPDATE_POSITIONNUM = 'update_positionnum' // 更新信号源在第几个栅格中
+export const UPDATE_BIGSCREENOBJ = 'update_bigscreenobj' // 更新大屏对象
 

src/renderer/store/mutations.js

@@ -1,15 +1,16 @@
 /*包含n个用于直接更新状态的方法的对象模块*/
 import {
-  SAVE_USER,
-  RESET_USER,
-  CLEAR_SCREEN,
-  SPLIT_SCREEN,
-  UPDATE_SIGNALPRELIST,
-  SAVE_BIGSCREEN,
-  SAVE_SIGNALLIST,
-  SAVE_DEVICE,
-  UPDATE_SCALE,
-  UPDATE_POSITIONNUM
+    SAVE_USER,
+    RESET_USER,
+    CLEAR_SCREEN,
+    SPLIT_SCREEN,
+    UPDATE_SIGNALPRELIST,
+    SAVE_BIGSCREEN,
+    SAVE_SIGNALLIST,
+    SAVE_DEVICE,
+    UPDATE_SCALE,
+    UPDATE_POSITIONNUM,
+    UPDATE_BIGSCREENOBJ
 } from './mutation-types'
 
 import storageUtils from "../../utils/storageUtils"
@@ -65,5 +66,10 @@ export default {
   // 更新信号源被拖带第几个栅格中
   [UPDATE_POSITIONNUM] (state,{positionNum}) {
     state.positionNum = positionNum
-  }
+  },
+
+  // 更新大屏对象
+  [UPDATE_BIGSCREENOBJ] (state,{obj}) {
+    state.bigScreenObj = obj
+  },
 }

src/renderer/store/state.js

@@ -19,5 +19,8 @@ export default {
   positionNum:1,
 
   // 静态资源路径
-  staticUrl:global.__static.substring(global.__static.length - 6, global.__static.length)
+  staticUrl:global.__static.substring(global.__static.length - 6, global.__static.length),
+
+  // 存储多个大屏信号源信息的对象
+  bigScreenObj:{}
 }