替换房间拖拽组件

src/components/vue-draggable-resizable/utils/dom.js

+import { isFunction } from './fns'
+
+export function matchesSelectorToParentElements (el, selector, baseNode) {
+  let node = el
+
+  const matchesSelectorFunc = [
+    'matches',
+    'webkitMatchesSelector',
+    'mozMatchesSelector',
+    'msMatchesSelector',
+    'oMatchesSelector'
+  ].find(func => isFunction(node[func]))
+
+  if (!isFunction(node[matchesSelectorFunc])) return false
+
+  do {
+    if (node[matchesSelectorFunc](selector)) return true
+    if (node === baseNode) return false
+    node = node.parentNode
+  } while (node)
+
+  return false
+}
+
+export function getComputedSize ($el) {
+  const style = window.getComputedStyle($el)
+
+  return [
+    parseFloat(style.getPropertyValue('width'), 10),
+    parseFloat(style.getPropertyValue('height'), 10)
+  ]
+}
+
+export function addEvent (el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.attachEvent) {
+    el.attachEvent('on' + event, handler)
+  } else if (el.addEventListener) {
+    el.addEventListener(event, handler, true)
+  } else {
+    el['on' + event] = handler
+  }
+}
+
+export function removeEvent (el, event, handler) {
+  if (!el) {
+    return
+  }
+  if (el.detachEvent) {
+    el.detachEvent('on' + event, handler)
+  } else if (el.removeEventListener) {
+    el.removeEventListener(event, handler, true)
+  } else {
+    el['on' + event] = null
+  }
+}

src/components/vue-draggable-resizable/utils/fns.js

+export function isFunction (func) {
+  return (typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]')
+}
+
+export function snapToGrid (grid, pendingX, pendingY, scale = 1) {
+  const [scaleX, scaleY] = typeof scale === 'number' ? [scale, scale] : scale
+  const x = Math.round((pendingX / scaleX) / grid[0]) * grid[0]
+  const y = Math.round((pendingY / scaleY) / grid[1]) * grid[1]
+  return [x, y]
+}
+
+export function getSize (el) {
+  const rect = el.getBoundingClientRect()
+
+  return [
+    parseInt(rect.width),
+    parseInt(rect.height)
+  ]
+}
+
+export function computeWidth (parentWidth, left, right) {
+  return parentWidth - left - right
+}
+
+export function computeHeight (parentHeight, top, bottom) {
+  return parentHeight - top - bottom
+}
+
+export function restrictToBounds (value, min, max) {
+  if (min !== null && value < min) {
+    return min
+  }
+
+  if (max !== null && max < value) {
+    return max
+  }
+
+  return value
+}

src/components/vue-draggable-resizable/vue-draggable-resizable.css

+.vdr {
+  touch-action: none;
+  position: absolute;
+  box-sizing: border-box;
+  border: 1px dashed black;
+}
+.handle {
+  box-sizing: border-box;
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #EEE;
+  border: 1px solid #333;
+}
+.handle-tl {
+  top: -10px;
+  left: -10px;
+  cursor: nw-resize;
+}
+.handle-tm {
+  top: -10px;
+  left: 50%;
+  margin-left: -5px;
+  cursor: n-resize;
+}
+.handle-tr {
+  top: -10px;
+  right: -10px;
+  cursor: ne-resize;
+}
+.handle-ml {
+  top: 50%;
+  margin-top: -5px;
+  left: -10px;
+  cursor: w-resize;
+}
+.handle-mr {
+  top: 50%;
+  margin-top: -5px;
+  right: -10px;
+  cursor: e-resize;
+}
+.handle-bl {
+  bottom: -10px;
+  left: -10px;
+  cursor: sw-resize;
+}
+.handle-bm {
+  bottom: -10px;
+  left: 50%;
+  margin-left: -5px;
+  cursor: s-resize;
+}
+.handle-br {
+  bottom: -10px;
+  right: -10px;
+  cursor: se-resize;
+}
+@media only screen and (max-width: 768px) {
+  [class*="handle-"]:before {
+    content: '';
+    left: -10px;
+    right: -10px;
+    bottom: -10px;
+    top: -10px;
+    position: absolute;
+  }
+}

src/utils/common.js

@@ -5,12 +5,12 @@ export function debounce(fn, delay) {
   // 记录上一次的延时器
   var timer = null;
   var delay = delay || 200;
-  return function() {
+  return function () {
     var args = arguments;
     var that = this;
     // 清除上一次延时器
     clearTimeout(timer);
-    timer = setTimeout(function() {
+    timer = setTimeout(function () {
       fn.apply(that, args);
     }, delay);
   };
@@ -38,7 +38,7 @@ export const rotateBase64Img = (src, edg, callback) => {
     image.src = src;
     image.crossOrigin = "anonymous";
 
-    image.onload = function() {
+    image.onload = function () {
       imgW = image.width;
       imgH = image.height;
       size = imgW > imgH ? imgW : imgH;

src/views/drawCanvas/riskView.vue

@@ -23,8 +23,10 @@
     <!-- @click.native="changeName(item)" -->
     <!-- :static="item.static" -->
 
-    <div :style="{ height: layoutHeight + 'px' }">
+    <div :style="{ minHeight: layoutHeight + 'px' }">
       <vue-draggable-resizable
+        parent
+        ref="dragResizable"
         v-for="item in layout"
         :x="(W / 12) * item.x"
         :y="item.y * 30"
@@ -42,6 +44,7 @@
             movedEvent(item, x, y);
           }
         "
+        @resizing="(x, y, w, h) => onResize(item, x, y, w, h)"
         @activated="onActivated(item)"
         @click.native="dbClickEvent($event, item)"
         :style="{
@@ -198,9 +201,10 @@ 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";
+import VueDraggableResizable from "@/components/vue-draggable-resizable/vue-draggable-resizable.vue";
+import "@/components/vue-draggable-resizable/vue-draggable-resizable.css";
 // 动态添加/删除
+var timer;
 export default {
   name: "riskView",
   components: {
@@ -511,6 +515,7 @@ export default {
           const index = this.layout.map((item) => item.i).indexOf(val);
           this.layout.splice(index, 1);
           this.layoutData.splice(index, 1);
+          this.updateLayoutHeight();
           // postFun("/ledger/room/delete/" + val)
           //   .then(res => {
           //     if (res.code == 200) {
@@ -551,6 +556,7 @@ export default {
       this.isBase = true;
       this.show = true;
     },
+    // 更新画布高度
     updateLayoutHeight() {
       const max = Math.max(
         ...this.layoutData.map((x) => {
@@ -576,7 +582,7 @@ export default {
       // 拖动时判断layoutHeight是否需要更新
       item.x = (x / this.W) * 12;
       item.y = y / 30;
-      this.updateLayoutHeight();
+      debounce(this.updateLayoutHeight)();
       // if (top > this.layoutHeight) {
       //   this.layoutHeight = top;
       // }
@@ -587,6 +593,9 @@ export default {
       item.w = (w / this.W) * 12;
       item.h = h / 30;
     },
+    onResize() {
+      debounce(this.updateLayoutHeight)();
+    },
     // 激活
     onActivated(item) {
       if (this.beforItem) {
@@ -720,6 +729,7 @@ export default {
         y: this.layout.length + (this.colNum / 2 || 12),
         w: 2,
         h: 3,
+        zIndex: 10,
         i: this.copyRoom.isCopy ? this.copyRoom.id : i,
         id: this.copyRoom.isCopy ? this.copyRoom.id : i,
         name: this.roomName,
@@ -732,6 +742,7 @@ export default {
         isDraggable: true,
         isResizable: true,
       };
+      this.beforItem = this.layOutItem;
       this.layout.push(this.layOutItem);
 
       let data = {
@@ -750,6 +761,7 @@ export default {
 
       this.layoutData.push(data);
       this.resetCopy();
+      this.updateLayoutHeight();
       // postFun("/ledger/room/save", data)
       //   .then(res => {
       //     if (res.code == 200) {
@@ -946,6 +958,7 @@ export default {
 .rowText {
   writing-mode: vertical-rl;
   -webkit-writing-mode: vertical-rl;
+  font-size: 18px;
 }
 .vue-grid-item .no-drag {
   height: 100%;