添加vue-draggable-resizable

package-lock.json

@@ -15633,6 +15633,11 @@
         "swiper": "^3.4.2"
       }
     },
+    "vue-draggable-resizable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/vue-draggable-resizable/-/vue-draggable-resizable-2.3.0.tgz",
+      "integrity": "sha512-77CLRj1TPwB30pwsjOf3pkd1UzYanCdKXbqhILJ0Oo5QQl50lvBfyQCXxMFzwWwTc3sbBbQH3FfWSV+BkoSElA=="
+    },
     "vue-esign": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/vue-esign/download/vue-esign-1.0.5.tgz",

package.json

@@ -28,6 +28,7 @@
     "vue": "^2.6.10",
     "vue-amap": "^0.5.10",
     "vue-awesome-mui": "^1.7.3",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-esign": "^1.0.5",
     "vue-grid-layout": "^2.4.0",
     "vue-html5plus": "^1.0.0",

src/views/drawCanvas/riskView.vue

@@ -11,7 +11,7 @@
     <div class="north">
       <img src="../../assets/imgs/north.png" alt="" />
     </div>
-    <grid-layout
+    <!-- <grid-layout
       :layout.sync="layout"
       :col-num="colNum"
       :row-height="30"
@@ -19,35 +19,35 @@
       :use-css-transforms="true"
       :prevent-collision="false"
       :preventCollision="true"
+    > -->
+    <!-- @click.native="changeName(item)" -->
+    <!-- :static="item.static" -->
+    <vue-draggable-resizable
+      v-for="item in layout"
+      :x="(375 / 12) * item.x"
+      :y="item.y * 30"
+      :w="(375 / 12) * item.w"
+      :h="item.h * 30"
+      :i="item.i"
+      :key="item.i"
+      :draggable="item.isDraggable"
+      :resizable="item.isResizable"
+      @resized="resizedEvent"
+      @moved="movedEvent"
+      :style="{
+        backgroundColor: item.c,
+        border: item.type == 'thorough' ? 'none !important' : '',
+      }"
     >
-      <grid-item
-        v-for="item in layout"
-        :static="item.static"
-        :x="item.x"
-        :y="item.y"
-        :w="item.w"
-        :h="item.h"
-        :i="item.i"
-        :key="item.i"
-        :isDraggable="item.isDraggable"
-        :isResizable="item.isResizable"
-        @resized="resizedEvent"
-        @moved="movedEvent"
-        @click.native="changeName(item)"
-        :style="{
-          backgroundColor: item.c,
-          border: item.type == 'thorough' ? 'none !important' : '',
-        }"
+      <span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'">{{
+        item.name
+      }}</span>
+      <span class="remove" @click.stop="removeItem(item.i)" v-if="showHeader"
+        >x</span
       >
-        <span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'">{{
-          item.name
-        }}</span>
-        <span class="remove" @click.stop="removeItem(item.i)" v-if="showHeader"
-          >x</span
-        >
-        <!-- <span class="remove" @click="removeItem(item.i)" v-if="item.i && isEdit">x</span> -->
-      </grid-item>
-    </grid-layout>
+      <!-- <span class="remove" @click="removeItem(item.i)" v-if="item.i && isEdit">x</span> -->
+    </vue-draggable-resizable>
+    <!-- </grid-layout> -->
     <div class="setBtns">
       <van-button @click="addItem" type="info" size="mini" v-if="!isViews"
         >添加房间</van-button
@@ -164,17 +164,20 @@
 </template>
 
 <script>
-import { GridLayout, GridItem } from "vue-grid-layout";
+// import { GridLayout, GridItem } from "vue-grid-layout";
 import screenfull from "screenfull";
 import { Toast, Dialog } from "vant";
 import { debounce } from "@/utils/common.js";
 import { getFun, postFun } from "@/service/table.js";
+import VueDraggableResizable from "vue-draggable-resizable";
+import "vue-draggable-resizable/dist/VueDraggableResizable.css";
 // 动态添加/删除
 export default {
   name: "riskView",
   components: {
-    GridLayout,
-    GridItem,
+    // GridLayout,
+    // GridItem,
+    VueDraggableResizable,
   },
   data() {
     return {
@@ -636,7 +639,7 @@ export default {
         y: this.layout.length + (this.colNum / 2 || 12),
         w: 2,
         h: 3,
-        i:this.copyRoom.isCopy ? this.copyRoom.id : i,
+        i: this.copyRoom.isCopy ? this.copyRoom.id : i,
         id: this.copyRoom.isCopy ? this.copyRoom.id : i,
         name: this.roomName,
         c: "#e6e5e5",
@@ -660,10 +663,10 @@ export default {
           ? "基础设施"
           : "9999",
       };
-      if(this.copyRoom.isCopy){
-        data.id = this.copyRoom.id 
+      if (this.copyRoom.isCopy) {
+        data.id = this.copyRoom.id;
       }
-    
+
       this.layoutData.push(data);
       this.resetCopy();
       // postFun("/ledger/room/save", data)

yarn.lock

@@ -4068,7 +4068,7 @@ core-js-compat@^3.31.0, core-js-compat@^3.6.5:
   dependencies:
     browserslist "^4.21.9"
 
-core-js@^2.4.0, core-js@^2.5.0:
+core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.11:
   version "2.6.12"
   resolved "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
@@ -8179,6 +8179,11 @@ mixin-object@^2.0.1:
   dependencies:
     minimist "^1.2.6"
 
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -12059,6 +12064,18 @@ vue-awesome-swiper@^2.5.4:
   dependencies:
     swiper "^3.4.2"
 
+vue-draggable-resizable-gorkys@^2.4.8:
+  version "2.4.8"
+  resolved "https://registry.npmmirror.com/vue-draggable-resizable-gorkys/-/vue-draggable-resizable-gorkys-2.4.8.tgz#c09b6376715b450b6a4d4e8fd229d1031a9ae832"
+  integrity sha512-DjhelFtRN1cy/AVpYbxlhmTTC5KwLvU490nUZzKp05kMddhzu5TBrBEeYo/9rhmdsrSkxjQguyRvF6IYumw9yw==
+  dependencies:
+    core-js "^2.6.11"
+
+vue-draggable-resizable@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/vue-draggable-resizable/-/vue-draggable-resizable-2.3.0.tgz#94c433ca748bc1a4d0959ba1c5c0e1c3536cee5b"
+  integrity sha512-77CLRj1TPwB30pwsjOf3pkd1UzYanCdKXbqhILJ0Oo5QQl50lvBfyQCXxMFzwWwTc3sbBbQH3FfWSV+BkoSElA==
+
 vue-esign@^1.0.5:
   version "1.1.4"
   resolved "https://registry.npmmirror.com/vue-esign/-/vue-esign-1.1.4.tgz#3e0cc2b72c3ef5914822929193f6a9ddeb775b3a"