Переглянути джерело

通过给vuedragresize绑定x和y来确定位置,解决移动和缩放问题

liuwei 4 роки тому
батько
коміт
ac0a6ac82f

+ 0 - 1
src/renderer/assets/less/splitscreen.less

@@ -12,7 +12,6 @@
 
   /*分屏项(信号源)*/
   .sitem {
-    position: absolute;
     border: 1px solid #000000;
     color:#fff;
     background-color: #717171;

+ 6 - 21
src/renderer/components/BigShow.vue

@@ -7,7 +7,7 @@
                 v-model="signalPreList"
                 :options="dragOptions2"
                 @change="log"
-                v-for="item in bigScreenJson"
+                v-for="item in currentBigshow"
                 :class="['split_screen', splitScreenStatus === 0 ? 'split_screen_one' : splitScreenStatus === 1 ? 'split_screen_four' : splitScreenStatus === 2 ? 'split_screen_nine' : 'split_screen_sixteen']"
                 :style="{
                     float:'left',
@@ -23,14 +23,9 @@
             <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"
-                    @dragging="(obj) => handleDragging(obj,itemV)"
+                    :x="itemV.left" :y="itemV.top"
                     @dragstop="(obj) => dragStop(obj,itemV)"
-                    @resizing="(obj) => resizing(obj,itemV)"
                     @resizestop="(obj) => reSizeSignal(obj,itemV)"
-                    :style="{
-                        left: itemV.left + 'px',
-                        top: itemV.top + 'px',
-                    }"
             >
                 <div ref="signal">
                     {{itemV.deviceID}}
@@ -86,7 +81,6 @@
                 },
                 screenPosition:{}, // 大屏在视口中的位置
                 newIndex: 1, // 开窗拖到第几个格子中
-                testThrottleFn:throttleFunc(this.handleDragging, 20),
             }
         },
 
@@ -154,26 +148,17 @@
                 })
             },
 
-            // 处理信号源拖拽中
-            handleDragging(obj,item) {
-                console.log('handleDragging触发了',obj)
-                const arr = this.$store.state.signalPreList.filter(a => a.Id !== item.Id)
+            // 拖动结束
+            dragStop(obj,item) {
+                /*const arr = this.$store.state.signalPreList.filter(a => a.Id !== item.Id)
                 item.top = this.screenPosition.top + obj.top
                 item.left = this.screenPosition.left + obj.left
-                this.$store.dispatch('updateSignalPreList',[...arr,item])
-            },
+                this.$store.dispatch('updateSignalPreList',[...arr,item])*/
 
-            // 拖动结束
-            dragStop(obj,item) {
                 const arr2 = this.$store.state.signalPreList
                 this.reqRefreshBigScreen(arr2)
             },
 
-            // 缩放进行中
-            resizing(obj,itemV) {
-
-            },
-
             // 放大缩小信号源(缩放结束事件)
             async reSizeSignal(obj,itemV) {
                 const arr = this.$data.streamWindows

+ 1 - 0
src/renderer/components/SignalList.vue

@@ -71,6 +71,7 @@
             // 移动信号源
             onMove({relatedContext, draggedContext}) {
                 const signalLength = this.$store.state.signalPreList.length
+
                 this.$store.dispatch('updatePositionNum',relatedContext.index-signalLength)
 
                 const relatedElement = relatedContext.element