解决拖动和放大缩小问题

package.json

@@ -52,10 +52,11 @@
     }
   },
   "dependencies": {
-    "element-ui": "^2.13.0",
     "axios": "^0.19.2",
+    "element-ui": "^2.13.0",
     "pubsub-js": "^1.7.0",
     "vue": "^2.5.16",
+    "vue-drag-resize": "^1.3.2",
     "vue-electron": "^1.0.6",
     "vue-router": "^3.0.1",
     "vuedraggable": "^2.23.2",

src/renderer/assets/less/splitscreen.less

@@ -30,7 +30,7 @@
 
   /*分屏项*/
   .sitem2 {
-    position: relative;
+    float:left;
     color:#000;
     border: 1px solid #3b3b3b;
     background-color: #0b0b0b;

src/renderer/components/BigShow.vue

@@ -21,10 +21,24 @@
                     display:item.IsVisibility ? 'black' : 'none',
                 }"
         >
-            <div v-for="(item,index) in signalPreList" :key="index" :class="item.showName ? 'sitem' : 'sitem2'" ref="signal">
+            <!--<div
+                v-for="(item,index) in signalPreList" :key="index" :class="item.showName ? 'sitem' : 'sitem2'" ref="signal">
                 {{item.showName ? item.showName : item}}
                 <div class="doubleArrow"></div>
-            </div>
+            </div>-->
+
+
+            <VueDragResize
+                    v-for="itemV in signalPreList" :key="itemV.deviceID" class="sitem" ref="signal"
+                    :w="item.Width/(splitScreenStatus+1)" :h="item.Height/(splitScreenStatus+1)"
+            >
+                {{itemV.showName}}
+            </VueDragResize >
+
+            <div v-for="(itemD,index) in divArr" :key="index" class="sitem2" ref="signal">
+                {{itemD}}
+            </div >
+
         </draggable>
     </div>
 </template>
@@ -32,6 +46,7 @@
 <script>
     import {mapState} from 'vuex'
     import draggable from 'vuedraggable'
+    import VueDragResize from 'vue-drag-resize'
     import '../assets/less/splitscreen.less'
     import {getElementLeft, getElementTop} from "../../utils/tools"
     import {reqRefreshView} from "../api"
@@ -46,6 +61,7 @@
 
         components: {
             draggable,
+            VueDragResize
         },
 
         methods: {
@@ -90,6 +106,13 @@
                     }
                 })
             },
+
+            resize(newRect) {
+                this.width = newRect.width;
+                this.height = newRect.height;
+                this.top = newRect.top;
+                this.left = newRect.left;
+            }
         },
 
         computed: {
@@ -100,8 +123,8 @@
                     return this.$store.state.signalPreList
                 },
                 set(arr) {
-                    const signalArr = [...arr,...this.divArr]
-                    this.$store.dispatch('updateSignalPreList',signalArr)
+                    // const signalArr = [...arr,...this.divArr]
+                    this.$store.dispatch('updateSignalPreList',arr)
                 }
             },
 
@@ -137,9 +160,10 @@
                 for (let i=0;i<(num+1)*(num+1);i++){
                     this.$data.divArr.push(i+1)
                 }
-                this.$store.dispatch('updateSignalPreList',this.$data.divArr)
 
-                const arr = this.$store.state.signalPreList
+                // this.$store.dispatch('updateSignalPreList',this.$data.divArr)
+
+                // const arr = this.$store.state.signalPreList
                 // this.reqRefreshBigScreen(arr)
             }
         }

yarn.lock

@@ -8583,6 +8583,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-drag-resize@^1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/vue-drag-resize/-/vue-drag-resize-1.3.2.tgz#99132a99746c878e4596fad08d36c98f604930a3"
+  integrity sha512-XiSEep3PPh9IPQqa4vIy/YENBpYch2SIPNipcPAEGhaSa0V8A8gSq9s7JQ66p/hiINdnR7f5ZqAkOdm6zU/4Gw==
+
 vue-electron@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/vue-electron/-/vue-electron-1.0.6.tgz#e798e03180b8933539defe31f92e53b9242b9406"