完善大屏显示，缩放信号源

src/main/index.js

@@ -19,7 +19,6 @@ function createWindow () {
   let size = screen.getPrimaryDisplay().workAreaSize
   let width = parseInt(size.width)
   let height = parseInt(size.height)
-  console.log(width,height)
 
   /**
    * Initial window options

src/renderer/components/BigShow.vue

@@ -28,15 +28,20 @@
             </div>-->
 
             <VueDragResize
-                    v-for="itemV in signalPreList" :key="itemV.deviceID" class="sitem" ref="signal"
+                    v-for="itemV in signalPreList" :key="itemV.deviceID" class="sitem"
                     :w="item.Width*Scale/(splitScreenStatus+1)" :h="item.Height*Scale/(splitScreenStatus+1)"
+                    :parentLimitation="true"
+                    @dragstop="dragStop"
+                    @resizestop="(obj) => reSizeSignal(obj,itemV)"
             >
-                {{itemV.showName}}
-            </VueDragResize >
+                <div ref="signal">
+                    {{itemV.showName}}
+                </div>
+            </VueDragResize>
 
-            <div v-for="(itemD,index) in divArr" :key="index" class="sitem2" ref="signal">
+            <div v-for="(itemD,index) in divArr" :key="index" class="sitem2">
                 {{itemD}}
-            </div >
+            </div>
 
         </draggable>
     </div>
@@ -55,6 +60,7 @@
             return {
                 isDragging: false, // 是否可拖动标志
                 divArr:[],// 默认大屏中盒子的数组
+                streamWindows:[], // 传递出去的信号源位置信息
             }
         },
 
@@ -75,6 +81,7 @@
 
             // 大屏开窗
             reqRefreshBigScreen(arr) {
+                const Scale = this.$store.state.Scale
                 const streamWindows = []
                 setTimeout(async () => {
                     const elementArr = this.$refs.signal
@@ -86,8 +93,8 @@
                             streamWindows.push({
                                 left,
                                 top,
-                                width:this.bigScreenJson[0].Width/(this.splitScreenStatus+1),
-                                height:this.bigScreenJson[0].Height/(this.splitScreenStatus+1),
+                                width:this.bigScreenJson[0].Width*Scale/(this.splitScreenStatus+1),
+                                height:this.bigScreenJson[0].Height*Scale/(this.splitScreenStatus+1),
                                 id:0,
                                 sourceId:arr[index].sourceId,
                                 widthScale:1/(this.splitScreenStatus+1),
@@ -99,18 +106,30 @@
                             bigScreenId:this.bigScreenJson[0].ID,
                             streamWindows
                         }
+                        this.streamWindows = streamWindows
+                        console.log(data)
                         // 调用大屏开窗接口
-                        /*const res = await reqRefreshView(data)
-                        console.log(res)*/
+                        await reqRefreshView(data)
                     }
                 })
             },
 
-            resize(newRect) {
-                this.width = newRect.width;
-                this.height = newRect.height;
-                this.top = newRect.top;
-                this.left = newRect.left;
+            // 拖动结束
+            dragStop(obj) {
+                const arr = this.$store.state.signalPreList
+                this.reqRefreshBigScreen(arr)
+            },
+
+            // 放大缩小信号源
+            reSizeSignal(obj,itemV) {
+                const arr = this.$data.streamWindows
+                // 找出当前改动的信号源
+                const currentItem = arr.filter(item => item.sourceId === itemV.sourceId)
+                currentItem.width = obj.width
+                currentItem.height = obj.height
+                const otherItems = arr.filter(item => item.sourceId !== itemV.sourceId)
+                const newStreamWindows = [...currentItem,...otherItems]
+                console.log(newStreamWindows)
             }
         },
 
@@ -149,7 +168,7 @@
         watch: {
             // 监视大屏中的信号源，只要变动，就调用回调函数
             signalPreList: function (arr) {
-                // this.reqRefreshBigScreen(arr)
+                this.reqRefreshBigScreen(arr)
             },
 
             // 监视分屏的状态
@@ -160,10 +179,8 @@
                     this.$data.divArr.push(i+1)
                 }
 
-                // this.$store.dispatch('updateSignalPreList',this.$data.divArr)
-
-                // const arr = this.$store.state.signalPreList
-                // this.reqRefreshBigScreen(arr)
+                const arr = this.$store.state.signalPreList
+                this.reqRefreshBigScreen(arr)
             }
         }
     }

src/utils/tools.js

@@ -31,3 +31,10 @@ export function getElementTop(element){
     }
     return actualTop;
 }
+
+// 获取元素位置的快速方法
+export function fastGetElementPosition(element) {
+    var x = element.getBoundingClientRect().left;
+    var y = element.getBoundingClientRect().top;
+    return {x,y}
+}