四色图

package.json

@@ -61,6 +61,7 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-grid-layout": "^2.4.0",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",

src/api/risk/draw.js

@@ -17,3 +17,30 @@ export function getDictList(query) {
     params: query,
   });
 }
+
+
+// 保存固有风险
+export function updateBatch(data) {
+  return request({
+    url: "/ledger/room/update/batch",
+    method: "post",
+    data
+  });
+}
+
+export function getFun(url, params) {
+  const Url = '/app-api' + url
+  return request({
+    url: Url,
+    method: "get",
+    params,
+  });
+}
+export function postFun(url, data) {
+  const Url = '/app-api' + url
+  return request({
+    url: Url,
+    method: "post",
+    data,
+  });
+}
\ No newline at end of file

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/components/vue-draggable-resizable/vue-draggable-resizable.vue

+<template>
+  <div
+    :style="style"
+    :class="[
+      {
+        [classNameActive]: enabled,
+        [classNameDragging]: dragging,
+        [classNameResizing]: resizing,
+        [classNameDraggable]: draggable,
+        [classNameResizable]: resizable,
+      },
+      className,
+    ]"
+    @mousedown="elementMouseDown"
+    @touchstart="elementTouchDown"
+  >
+    <div
+      v-for="handle in actualHandles"
+      :key="handle"
+      :class="[classNameHandle, classNameHandle + '-' + handle]"
+      :style="{ display: enabled ? 'block' : 'none' }"
+      @mousedown.stop.prevent="handleDown(handle, $event)"
+      @touchstart.stop.prevent="handleTouchDown(handle, $event)"
+    >
+      <slot :name="handle"></slot>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import {
+  matchesSelectorToParentElements,
+  getComputedSize,
+  addEvent,
+  removeEvent,
+} from "./utils/dom";
+import {
+  computeWidth,
+  computeHeight,
+  restrictToBounds,
+  snapToGrid,
+} from "./utils/fns";
+
+const events = {
+  mouse: {
+    start: "mousedown",
+    move: "mousemove",
+    stop: "mouseup",
+  },
+  touch: {
+    start: "touchstart",
+    move: "touchmove",
+    stop: "touchend",
+  },
+};
+
+const userSelectNone = {
+  userSelect: "none",
+  MozUserSelect: "none",
+  WebkitUserSelect: "none",
+  MsUserSelect: "none",
+};
+
+const userSelectAuto = {
+  userSelect: "auto",
+  MozUserSelect: "auto",
+  WebkitUserSelect: "auto",
+  MsUserSelect: "auto",
+};
+
+let eventsFor = events.mouse;
+
+export default {
+  replace: true,
+  name: "vue-draggable-resizable",
+  props: {
+    className: {
+      type: String,
+      default: "vdr",
+    },
+    classNameDraggable: {
+      type: String,
+      default: "draggable",
+    },
+    classNameResizable: {
+      type: String,
+      default: "resizable",
+    },
+    classNameDragging: {
+      type: String,
+      default: "dragging",
+    },
+    classNameResizing: {
+      type: String,
+      default: "resizing",
+    },
+    classNameActive: {
+      type: String,
+      default: "active",
+    },
+    classNameHandle: {
+      type: String,
+      default: "handle",
+    },
+    disableUserSelect: {
+      type: Boolean,
+      default: true,
+    },
+    enableNativeDrag: {
+      type: Boolean,
+      default: false,
+    },
+    preventDeactivation: {
+      type: Boolean,
+      default: false,
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    draggable: {
+      type: Boolean,
+      default: true,
+    },
+    resizable: {
+      type: Boolean,
+      default: true,
+    },
+    lockAspectRatio: {
+      type: Boolean,
+      default: false,
+    },
+    w: {
+      type: [Number, String],
+      default: 200,
+      validator: (val) => {
+        if (typeof val === "number") {
+          return val > 0;
+        }
+
+        return val === "auto";
+      },
+    },
+    h: {
+      type: [Number, String],
+      default: 200,
+      validator: (val) => {
+        if (typeof val === "number") {
+          return val > 0;
+        }
+
+        return val === "auto";
+      },
+    },
+    minWidth: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0,
+    },
+    minHeight: {
+      type: Number,
+      default: 0,
+      validator: (val) => val >= 0,
+    },
+    maxWidth: {
+      type: Number,
+      default: null,
+      validator: (val) => val >= 0,
+    },
+    maxHeight: {
+      type: Number,
+      default: null,
+      validator: (val) => val >= 0,
+    },
+    x: {
+      type: Number,
+      default: 0,
+    },
+    y: {
+      type: Number,
+      default: 0,
+    },
+    z: {
+      type: [String, Number],
+      default: "auto",
+      validator: (val) => (typeof val === "string" ? val === "auto" : val >= 0),
+    },
+    handles: {
+      type: Array,
+      default: () => ["tl", "tm", "tr", "mr", "br", "bm", "bl", "ml"],
+      validator: (val) => {
+        const s = new Set(["tl", "tm", "tr", "mr", "br", "bm", "bl", "ml"]);
+
+        return new Set(val.filter((h) => s.has(h))).size === val.length;
+      },
+    },
+    dragHandle: {
+      type: String,
+      default: null,
+    },
+    dragCancel: {
+      type: String,
+      default: null,
+    },
+    axis: {
+      type: String,
+      default: "both",
+      validator: (val) => ["x", "y", "both"].includes(val),
+    },
+    grid: {
+      type: Array,
+      default: () => [1, 1],
+    },
+    parent: {
+      type: Boolean,
+      default: false,
+    },
+    scale: {
+      type: [Number, Array],
+      default: 1,
+      validator: (val) => {
+        if (typeof val === "number") {
+          return val > 0;
+        }
+
+        return val.length === 2 && val[0] > 0 && val[1] > 0;
+      },
+    },
+    onDragStart: {
+      type: Function,
+      default: () => true,
+    },
+    onDrag: {
+      type: Function,
+      default: () => true,
+    },
+    onResizeStart: {
+      type: Function,
+      default: () => true,
+    },
+    onResize: {
+      type: Function,
+      default: () => true,
+    },
+  },
+
+  data: function () {
+    return {
+      left: this.x,
+      top: this.y,
+      right: null,
+      bottom: null,
+
+      width: null,
+      height: null,
+
+      widthTouched: false,
+      heightTouched: false,
+
+      aspectFactor: null,
+
+      parentWidth: null,
+      parentHeight: null,
+
+      minW: this.minWidth,
+      minH: this.minHeight,
+
+      maxW: this.maxWidth,
+      maxH: this.maxHeight,
+
+      handle: null,
+      enabled: this.active,
+      resizing: false,
+      dragging: false,
+      dragEnable: false,
+      resizeEnable: false,
+      zIndex: this.z,
+    };
+  },
+
+  created: function () {
+    // eslint-disable-next-line
+    if (this.maxWidth && this.minWidth > this.maxWidth)
+      console.warn(
+        "[Vdr warn]: Invalid prop: minWidth cannot be greater than maxWidth"
+      );
+    // eslint-disable-next-line
+    if (this.maxWidth && this.minHeight > this.maxHeight)
+      console.warn(
+        "[Vdr warn]: Invalid prop: minHeight cannot be greater than maxHeight"
+      );
+
+    this.resetBoundsAndMouseState();
+  },
+  mounted: function () {
+    if (!this.enableNativeDrag) {
+      this.$el.ondragstart = () => false;
+    }
+
+    const [parentWidth, parentHeight] = this.getParentSize();
+
+    this.parentWidth = parentWidth;
+    this.parentHeight = parentHeight;
+
+    const [width, height] = getComputedSize(this.$el);
+
+    this.aspectFactor =
+      (this.w !== "auto" ? this.w : width) /
+      (this.h !== "auto" ? this.h : height);
+
+    this.width = this.w !== "auto" ? this.w : width;
+    this.height = this.h !== "auto" ? this.h : height;
+
+    this.right = this.parentWidth - this.width - this.left;
+    this.bottom = this.parentHeight - this.height - this.top;
+
+    if (this.active) {
+      this.$emit("activated");
+    }
+
+    addEvent(document.documentElement, "mousedown", this.deselect);
+    addEvent(document.documentElement, "touchend touchcancel", this.deselect);
+
+    addEvent(window, "resize", this.checkParentSize);
+  },
+  beforeDestroy: function () {
+    removeEvent(document.documentElement, "mousedown", this.deselect);
+    removeEvent(document.documentElement, "touchstart", this.handleUp);
+    removeEvent(document.documentElement, "mousemove", this.move);
+    removeEvent(document.documentElement, "touchmove", this.move);
+    removeEvent(document.documentElement, "mouseup", this.handleUp);
+    removeEvent(
+      document.documentElement,
+      "touchend touchcancel",
+      this.deselect
+    );
+
+    removeEvent(window, "resize", this.checkParentSize);
+  },
+
+  methods: {
+    resetBoundsAndMouseState() {
+      this.mouseClickPosition = {
+        mouseX: 0,
+        mouseY: 0,
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+      };
+
+      this.bounds = {
+        minLeft: null,
+        maxLeft: null,
+        minRight: null,
+        maxRight: null,
+        minTop: null,
+        maxTop: null,
+        minBottom: null,
+        maxBottom: null,
+      };
+    },
+    checkParentSize() {
+      if (this.parent) {
+        const [newParentWidth, newParentHeight] = this.getParentSize();
+
+        this.parentWidth = newParentWidth;
+        this.parentHeight = newParentHeight;
+        this.right = this.parentWidth - this.width - this.left;
+        this.bottom = this.parentHeight - this.height - this.top;
+      }
+    },
+    getParentSize() {
+      if (this.parent) {
+        const style = window.getComputedStyle(this.$el.parentNode, null);
+
+        return [parseInt(style.getPropertyValue("width"), 10), 10000];
+      }
+
+      return [null, null];
+    },
+    elementTouchDown(e) {
+      eventsFor = events.touch;
+
+      this.elementDown(e);
+    },
+    elementMouseDown(e) {
+      eventsFor = events.mouse;
+
+      this.elementDown(e);
+    },
+    elementDown(e) {
+      if (e instanceof MouseEvent && e.which !== 1) {
+        return;
+      }
+
+      const target = e.target || e.srcElement;
+
+      if (this.$el.contains(target)) {
+        if (this.onDragStart(e) === false) {
+          return;
+        }
+
+        if (
+          (this.dragHandle &&
+            !matchesSelectorToParentElements(
+              target,
+              this.dragHandle,
+              this.$el
+            )) ||
+          (this.dragCancel &&
+            matchesSelectorToParentElements(target, this.dragCancel, this.$el))
+        ) {
+          this.dragging = false;
+
+          return;
+        }
+
+        if (!this.enabled) {
+          this.enabled = true;
+
+          this.$emit("activated");
+          this.$emit("update:active", true);
+        }
+
+        if (this.draggable) {
+          this.dragEnable = true;
+        }
+
+        this.mouseClickPosition.mouseX = e.touches
+          ? e.touches[0].pageX
+          : e.pageX;
+        this.mouseClickPosition.mouseY = e.touches
+          ? e.touches[0].pageY
+          : e.pageY;
+
+        this.mouseClickPosition.left = this.left;
+        this.mouseClickPosition.right = this.right;
+        this.mouseClickPosition.top = this.top;
+        this.mouseClickPosition.bottom = this.bottom;
+
+        if (this.parent) {
+          this.bounds = this.calcDragLimits();
+        }
+
+        addEvent(document.documentElement, eventsFor.move, this.move);
+        addEvent(document.documentElement, eventsFor.stop, this.handleUp);
+      }
+    },
+    calcDragLimits() {
+      return {
+        minLeft: this.left % this.grid[0],
+        maxLeft:
+          Math.floor(
+            (this.parentWidth - this.width - this.left) / this.grid[0]
+          ) *
+            this.grid[0] +
+          this.left,
+        minRight: this.right % this.grid[0],
+        maxRight:
+          Math.floor(
+            (this.parentWidth - this.width - this.right) / this.grid[0]
+          ) *
+            this.grid[0] +
+          this.right,
+        minTop: this.top % this.grid[1],
+        maxTop:
+          Math.floor(
+            (this.parentHeight - this.height - this.top) / this.grid[1]
+          ) *
+            this.grid[1] +
+          this.top,
+        minBottom: this.bottom % this.grid[1],
+        maxBottom:
+          Math.floor(
+            (this.parentHeight - this.height - this.bottom) / this.grid[1]
+          ) *
+            this.grid[1] +
+          this.bottom,
+      };
+    },
+    deselect(e) {
+      const target = e.target || e.srcElement;
+      const regex = new RegExp(this.className + "-([trmbl]{2})", "");
+
+      if (!this.$el.contains(target) && !regex.test(target.className)) {
+        if (this.enabled && !this.preventDeactivation) {
+          this.enabled = false;
+
+          this.$emit("deactivated");
+          this.$emit("update:active", false);
+        }
+
+        removeEvent(
+          document.documentElement,
+          eventsFor.move,
+          this.handleResize
+        );
+      }
+
+      this.resetBoundsAndMouseState();
+    },
+    handleTouchDown(handle, e) {
+      eventsFor = events.touch;
+
+      this.handleDown(handle, e);
+    },
+    handleDown(handle, e) {
+      if (e instanceof MouseEvent && e.which !== 1) {
+        return;
+      }
+
+      if (this.onResizeStart(handle, e) === false) {
+        return;
+      }
+
+      if (e.stopPropagation) e.stopPropagation();
+
+      // Here we avoid a dangerous recursion by faking
+      // corner handles as middle handles
+      if (this.lockAspectRatio && !handle.includes("m")) {
+        this.handle = "m" + handle.substring(1);
+      } else {
+        this.handle = handle;
+      }
+
+      this.resizeEnable = true;
+
+      this.mouseClickPosition.mouseX = e.touches ? e.touches[0].pageX : e.pageX;
+      this.mouseClickPosition.mouseY = e.touches ? e.touches[0].pageY : e.pageY;
+      this.mouseClickPosition.left = this.left;
+      this.mouseClickPosition.right = this.right;
+      this.mouseClickPosition.top = this.top;
+      this.mouseClickPosition.bottom = this.bottom;
+
+      this.bounds = this.calcResizeLimits();
+
+      addEvent(document.documentElement, eventsFor.move, this.handleResize);
+      addEvent(document.documentElement, eventsFor.stop, this.handleUp);
+    },
+    calcResizeLimits() {
+      let minW = this.minW;
+      let minH = this.minH;
+      let maxW = this.maxW;
+      let maxH = this.maxH;
+
+      const aspectFactor = this.aspectFactor;
+      const [gridX, gridY] = this.grid;
+      const width = this.width;
+      const height = this.height;
+      const left = this.left;
+      const top = this.top;
+      const right = this.right;
+      const bottom = this.bottom;
+
+      if (this.lockAspectRatio) {
+        if (minW / minH > aspectFactor) {
+          minH = minW / aspectFactor;
+        } else {
+          minW = aspectFactor * minH;
+        }
+
+        if (maxW && maxH) {
+          maxW = Math.min(maxW, aspectFactor * maxH);
+          maxH = Math.min(maxH, maxW / aspectFactor);
+        } else if (maxW) {
+          maxH = maxW / aspectFactor;
+        } else if (maxH) {
+          maxW = aspectFactor * maxH;
+        }
+      }
+
+      maxW = maxW - (maxW % gridX);
+      maxH = maxH - (maxH % gridY);
+
+      const limits = {
+        minLeft: null,
+        maxLeft: null,
+        minTop: null,
+        maxTop: null,
+        minRight: null,
+        maxRight: null,
+        minBottom: null,
+        maxBottom: null,
+      };
+
+      if (this.parent) {
+        limits.minLeft = left % gridX;
+        limits.maxLeft = left + Math.floor((width - minW) / gridX) * gridX;
+        limits.minTop = top % gridY;
+        limits.maxTop = top + Math.floor((height - minH) / gridY) * gridY;
+        limits.minRight = right % gridX;
+        limits.maxRight = right + Math.floor((width - minW) / gridX) * gridX;
+        limits.minBottom = bottom % gridY;
+        limits.maxBottom = bottom + Math.floor((height - minH) / gridY) * gridY;
+
+        if (maxW) {
+          limits.minLeft = Math.max(
+            limits.minLeft,
+            this.parentWidth - right - maxW
+          );
+          limits.minRight = Math.max(
+            limits.minRight,
+            this.parentWidth - left - maxW
+          );
+        }
+
+        if (maxH) {
+          limits.minTop = Math.max(
+            limits.minTop,
+            this.parentHeight - bottom - maxH
+          );
+          limits.minBottom = Math.max(
+            limits.minBottom,
+            this.parentHeight - top - maxH
+          );
+        }
+
+        if (this.lockAspectRatio) {
+          limits.minLeft = Math.max(limits.minLeft, left - top * aspectFactor);
+          limits.minTop = Math.max(limits.minTop, top - left / aspectFactor);
+          limits.minRight = Math.max(
+            limits.minRight,
+            right - bottom * aspectFactor
+          );
+          limits.minBottom = Math.max(
+            limits.minBottom,
+            bottom - right / aspectFactor
+          );
+        }
+      } else {
+        limits.minLeft = null;
+        limits.maxLeft = left + Math.floor((width - minW) / gridX) * gridX;
+        limits.minTop = null;
+        limits.maxTop = top + Math.floor((height - minH) / gridY) * gridY;
+        limits.minRight = null;
+        limits.maxRight = right + Math.floor((width - minW) / gridX) * gridX;
+        limits.minBottom = null;
+        limits.maxBottom = bottom + Math.floor((height - minH) / gridY) * gridY;
+
+        if (maxW) {
+          limits.minLeft = -(right + maxW);
+          limits.minRight = -(left + maxW);
+        }
+
+        if (maxH) {
+          limits.minTop = -(bottom + maxH);
+          limits.minBottom = -(top + maxH);
+        }
+
+        if (this.lockAspectRatio && maxW && maxH) {
+          limits.minLeft = Math.min(limits.minLeft, -(right + maxW));
+          limits.minTop = Math.min(limits.minTop, -(maxH + bottom));
+          limits.minRight = Math.min(limits.minRight, -left - maxW);
+          limits.minBottom = Math.min(limits.minBottom, -top - maxH);
+        }
+      }
+
+      return limits;
+    },
+    move(e) {
+      if (this.resizing) {
+        this.handleResize(e);
+      } else if (this.dragEnable) {
+        this.handleDrag(e);
+      }
+    },
+    handleDrag(e) {
+      const axis = this.axis;
+      const grid = this.grid;
+      const bounds = this.bounds;
+      const mouseClickPosition = this.mouseClickPosition;
+
+      const tmpDeltaX =
+        axis && axis !== "y"
+          ? mouseClickPosition.mouseX -
+            (e.touches ? e.touches[0].pageX : e.pageX)
+          : 0;
+      const tmpDeltaY =
+        axis && axis !== "x"
+          ? mouseClickPosition.mouseY -
+            (e.touches ? e.touches[0].pageY : e.pageY)
+          : 0;
+
+      const [deltaX, deltaY] = snapToGrid(
+        grid,
+        tmpDeltaX,
+        tmpDeltaY,
+        this.scale
+      );
+
+      const left = restrictToBounds(
+        mouseClickPosition.left - deltaX,
+        bounds.minLeft,
+        bounds.maxLeft
+      );
+      const top = restrictToBounds(
+        mouseClickPosition.top - deltaY,
+        bounds.minTop,
+        bounds.maxTop
+      );
+
+      if (this.onDrag(left, top) === false) {
+        return;
+      }
+
+      const right = restrictToBounds(
+        mouseClickPosition.right + deltaX,
+        bounds.minRight,
+        bounds.maxRight
+      );
+      const bottom = restrictToBounds(
+        mouseClickPosition.bottom + deltaY,
+        bounds.minBottom,
+        bounds.maxBottom
+      );
+
+      this.left = left;
+      this.top = top;
+      this.right = right;
+      this.bottom = bottom;
+
+      this.$emit("dragging", this.left, this.top);
+      this.dragging = true;
+    },
+    moveHorizontally(val) {
+      // should calculate with scale 1.
+      const [deltaX, _] = snapToGrid(this.grid, val, this.top, 1);
+
+      const left = restrictToBounds(
+        deltaX,
+        this.bounds.minLeft,
+        this.bounds.maxLeft
+      );
+
+      this.left = left;
+      this.right = this.parentWidth - this.width - left;
+    },
+    moveVertically(val) {
+      // should calculate with scale 1.
+      const [_, deltaY] = snapToGrid(this.grid, this.left, val, 1);
+
+      const top = restrictToBounds(
+        deltaY,
+        this.bounds.minTop,
+        this.bounds.maxTop
+      );
+
+      this.top = top;
+      this.bottom = this.parentHeight - this.height - top;
+    },
+    handleResize(e) {
+      let left = this.left;
+      let top = this.top;
+      let right = this.right;
+      let bottom = this.bottom;
+
+      const mouseClickPosition = this.mouseClickPosition;
+      const lockAspectRatio = this.lockAspectRatio;
+      const aspectFactor = this.aspectFactor;
+
+      const tmpDeltaX =
+        mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX);
+      const tmpDeltaY =
+        mouseClickPosition.mouseY - (e.touches ? e.touches[0].pageY : e.pageY);
+
+      if (!this.widthTouched && tmpDeltaX) {
+        this.widthTouched = true;
+      }
+
+      if (!this.heightTouched && tmpDeltaY) {
+        this.heightTouched = true;
+      }
+
+      const [deltaX, deltaY] = snapToGrid(
+        this.grid,
+        tmpDeltaX,
+        tmpDeltaY,
+        this.scale
+      );
+
+      if (this.handle.includes("b")) {
+        bottom = restrictToBounds(
+          mouseClickPosition.bottom + deltaY,
+          this.bounds.minBottom,
+          this.bounds.maxBottom
+        );
+
+        if (this.lockAspectRatio && this.resizingOnY) {
+          right = this.right - (this.bottom - bottom) * aspectFactor;
+        }
+      } else if (this.handle.includes("t")) {
+        top = restrictToBounds(
+          mouseClickPosition.top - deltaY,
+          this.bounds.minTop,
+          this.bounds.maxTop
+        );
+
+        if (this.lockAspectRatio && this.resizingOnY) {
+          left = this.left - (this.top - top) * aspectFactor;
+        }
+      }
+
+      if (this.handle.includes("r")) {
+        right = restrictToBounds(
+          mouseClickPosition.right + deltaX,
+          this.bounds.minRight,
+          this.bounds.maxRight
+        );
+
+        if (this.lockAspectRatio && this.resizingOnX) {
+          bottom = this.bottom - (this.right - right) / aspectFactor;
+        }
+      } else if (this.handle.includes("l")) {
+        left = restrictToBounds(
+          mouseClickPosition.left - deltaX,
+          this.bounds.minLeft,
+          this.bounds.maxLeft
+        );
+
+        if (this.lockAspectRatio && this.resizingOnX) {
+          top = this.top - (this.left - left) / aspectFactor;
+        }
+      }
+
+      const width = computeWidth(this.parentWidth, left, right);
+      const height = computeHeight(this.parentHeight, top, bottom);
+
+      if (this.onResize(this.handle, left, top, width, height) === false) {
+        return;
+      }
+
+      this.left = left;
+      this.top = top;
+      this.right = right;
+      this.bottom = bottom;
+      this.width = width;
+      this.height = height;
+
+      this.$emit("resizing", this.left, this.top, this.width, this.height);
+      this.resizing = true;
+    },
+    changeWidth(val) {
+      // should calculate with scale 1.
+      const [newWidth, _] = snapToGrid(this.grid, val, 0, 1);
+
+      let right = restrictToBounds(
+        this.parentWidth - newWidth - this.left,
+        this.bounds.minRight,
+        this.bounds.maxRight
+      );
+      let bottom = this.bottom;
+
+      if (this.lockAspectRatio) {
+        bottom = this.bottom - (this.right - right) / this.aspectFactor;
+      }
+
+      const width = computeWidth(this.parentWidth, this.left, right);
+      const height = computeHeight(this.parentHeight, this.top, bottom);
+
+      this.right = right;
+      this.bottom = bottom;
+      this.width = width;
+      this.height = height;
+    },
+    changeHeight(val) {
+      // should calculate with scale 1.
+      const [_, newHeight] = snapToGrid(this.grid, 0, val, 1);
+
+      let bottom = restrictToBounds(
+        this.parentHeight - newHeight - this.top,
+        this.bounds.minBottom,
+        this.bounds.maxBottom
+      );
+      let right = this.right;
+
+      if (this.lockAspectRatio) {
+        right = this.right - (this.bottom - bottom) * this.aspectFactor;
+      }
+
+      const width = computeWidth(this.parentWidth, this.left, right);
+      const height = computeHeight(this.parentHeight, this.top, bottom);
+
+      this.right = right;
+      this.bottom = bottom;
+      this.width = width;
+      this.height = height;
+    },
+    handleUp(e) {
+      this.handle = null;
+
+      this.resetBoundsAndMouseState();
+
+      this.dragEnable = false;
+      this.resizeEnable = false;
+
+      if (this.resizing) {
+        this.resizing = false;
+        this.$emit("resizestop", this.left, this.top, this.width, this.height);
+      }
+
+      if (this.dragging) {
+        this.dragging = false;
+        this.$emit("dragstop", this.left, this.top);
+      }
+
+      removeEvent(document.documentElement, eventsFor.move, this.handleResize);
+    },
+  },
+  computed: {
+    style() {
+      return {
+        transform: `translate(${this.left}px, ${this.top}px)`,
+        width: this.computedWidth,
+        height: this.computedHeight,
+        zIndex: this.zIndex,
+        ...(this.dragging && this.disableUserSelect
+          ? userSelectNone
+          : userSelectAuto),
+      };
+    },
+    actualHandles() {
+      if (!this.resizable) return [];
+
+      return this.handles;
+    },
+    computedWidth() {
+      if (this.w === "auto") {
+        if (!this.widthTouched) {
+          return "auto";
+        }
+      }
+
+      return this.width + "px";
+    },
+    computedHeight() {
+      if (this.h === "auto") {
+        if (!this.heightTouched) {
+          return "auto";
+        }
+      }
+
+      return this.height + "px";
+    },
+    resizingOnX() {
+      return (
+        Boolean(this.handle) &&
+        (this.handle.includes("l") || this.handle.includes("r"))
+      );
+    },
+    resizingOnY() {
+      return (
+        Boolean(this.handle) &&
+        (this.handle.includes("t") || this.handle.includes("b"))
+      );
+    },
+    isCornerHandle() {
+      return (
+        Boolean(this.handle) && ["tl", "tr", "br", "bl"].includes(this.handle)
+      );
+    },
+  },
+
+  watch: {
+    active(val) {
+      this.enabled = val;
+
+      if (val) {
+        this.$emit("activated");
+      } else {
+        this.$emit("deactivated");
+      }
+    },
+    z(val) {
+      if (val >= 0 || val === "auto") {
+        this.zIndex = val;
+      }
+    },
+    x(val) {
+      if (this.resizing || this.dragging) {
+        return;
+      }
+
+      if (this.parent) {
+        this.bounds = this.calcDragLimits();
+      }
+
+      this.moveHorizontally(val);
+    },
+    y(val) {
+      if (this.resizing || this.dragging) {
+        return;
+      }
+
+      if (this.parent) {
+        this.bounds = this.calcDragLimits();
+      }
+
+      this.moveVertically(val);
+    },
+    lockAspectRatio(val) {
+      if (val) {
+        this.aspectFactor = this.width / this.height;
+      } else {
+        this.aspectFactor = undefined;
+      }
+    },
+    minWidth(val) {
+      if (val > 0 && val <= this.width) {
+        this.minW = val;
+      }
+    },
+    minHeight(val) {
+      if (val > 0 && val <= this.height) {
+        this.minH = val;
+      }
+    },
+    maxWidth(val) {
+      this.maxW = val;
+    },
+    maxHeight(val) {
+      this.maxH = val;
+    },
+    w(val) {
+      if (this.resizing || this.dragging) {
+        return;
+      }
+
+      if (this.parent) {
+        this.bounds = this.calcResizeLimits();
+      }
+
+      this.changeWidth(val);
+    },
+    h(val) {
+      if (this.resizing || this.dragging) {
+        return;
+      }
+
+      if (this.parent) {
+        this.bounds = this.calcResizeLimits();
+      }
+
+      this.changeHeight(val);
+    },
+  },
+};
+</script>

src/directive/permission/hasPermi.js

- /**
- * v-hasPermi 操作权限处理
- * Copyright (c) 2019 ruoyi
- */
+/**
+* v-hasPermi 操作权限处理
+* Copyright (c) 2019 ruoyi
+*/
 
 import store from '@/store'
 

src/router/index.js

@@ -204,13 +204,13 @@ export const dynamicRoutes = [
     ],
   },
   {
-    path: "/risk/drawCanvas/index",
+    path: "/risk/drawCanvas",
     component: Layout,
     hidden: true,
     permissions: ["system:ledgerRoom:list"],
     children: [
       {
-        path: "index/:id(\\d+)",
+        path: "index",
         component: () => import("@/views/risk/drawCanvas/index"),
         name: "drawCanvas",
         meta: { title: "四色图", activeMenu: "/risk/drawCanvas/index" },

src/views/ledger/floor/index.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="楼宇名称" prop="buildingName">
         <el-input
           v-model="queryParams.buildingName"
@@ -18,7 +25,11 @@
         />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择状态"
+          clearable
+        >
           <el-option
             v-for="dict in dict.type.sys_normal_disable"
             :key="dict.value"
@@ -28,8 +39,16 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
@@ -42,7 +61,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['system:ledgerFloor:add']"
-        >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -53,7 +73,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:ledgerFloor:edit']"
-        >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -64,7 +85,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:ledgerFloor:remove']"
-        >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -74,12 +96,20 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['system:ledgerFloor:export']"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="floorList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="floorList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="序号" align="center">
         <template slot-scope="scope">
@@ -91,31 +121,48 @@
       <el-table-column label="楼层属性" align="center" prop="type" />
       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
-         <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+          <dict-tag
+            :options="dict.type.sys_normal_disable"
+            :value="scope.row.status"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-home"
+            @click="handleManage(scope.row)"
+            v-hasPermi="['system:ledgerFloor:edit']"
+            >房间管理</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['system:ledgerFloor:edit']"
-          >修改</el-button>
+            >修改</el-button
+          >
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:ledgerFloor:remove']"
-          >删除</el-button>
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -134,6 +181,7 @@
         <el-form-item label="楼层属性" prop="type">
           <el-input v-model="form.type" placeholder="请输入楼层属性" />
         </el-form-item>
+
         <el-form-item label="状态" prop="status">
           <el-select v-model="form.status" placeholder="请选择状态">
             <el-option
@@ -144,7 +192,9 @@
             ></el-option>
           </el-select>
         </el-form-item>
-
+        <!-- <el-form-item label="新增房间" prop="type">
+          <el-button type="primary" @click="showDrawCanvas">添加</el-button>
+        </el-form-item> -->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -155,11 +205,17 @@
 </template>
 
 <script>
-import { listFloor, getFloor, delFloor, addFloor, updateFloor } from "@/api/ledger/floor";
+import {
+  listFloor,
+  getFloor,
+  delFloor,
+  addFloor,
+  updateFloor,
+} from "@/api/ledger/floor";
 
 export default {
   name: "Floor",
-  dicts: ['sys_normal_disable', 'data_source'],
+  dicts: ["sys_normal_disable", "data_source"],
   data() {
     return {
       // 遮罩层
@@ -193,18 +249,26 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-      }
+      rules: {},
     };
   },
   created() {
     this.getList();
   },
   methods: {
+    handleManage({ id, buildingId }) {
+      this.$router.push({
+        name: "drawCanvas",
+        params: {
+          floorId: id,
+          buildingId,
+        },
+      });
+    },
     /** 查询基础数据-楼层列表 */
     getList() {
       this.loading = true;
-      listFloor(this.queryParams).then(response => {
+      listFloor(this.queryParams).then((response) => {
         this.floorList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -228,7 +292,7 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
       };
       this.resetForm("form");
     },
@@ -244,9 +308,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -257,8 +321,8 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const id = row.id || this.ids
-      getFloor(id).then(response => {
+      const id = row.id || this.ids;
+      getFloor(id).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改基础数据-楼层";
@@ -266,16 +330,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
-            updateFloor(this.form).then(response => {
+            updateFloor(this.form).then((response) => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addFloor(this.form).then(response => {
+            addFloor(this.form).then((response) => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -287,19 +351,27 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除基础数据-楼层编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal
+        .confirm('是否确认删除基础数据-楼层编号为"' + ids + '"的数据项？')
+        .then(function () {
           return delFloor(ids);
-      }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('/system/ledger/floor/export', {
-        ...this.queryParams
-      }, `floor_${new Date().getTime()}.xlsx`)
-    }
-  }
+      this.download(
+        "/system/ledger/floor/export",
+        {
+          ...this.queryParams,
+        },
+        `floor_${new Date().getTime()}.xlsx`
+      );
+    },
+  },
 };
 </script>

src/views/map/map-detail.vue

@@ -292,6 +292,9 @@ export default {
       padding: 5px 0;
     }
   }
+  ::v-deep .map-content-title {
+    width: 30%;
+  }
 }
 ul,
 li {

src/views/risk/drawCanvas/index.vue

 <template>
   <div class="wrap" ref="mapmidbox">
-    <div id="printDiv">
+    <div>
+      <div class="setBtns" v-if="!isViews">
+        <el-button @click="confim" type="primary">保存</el-button>
+        <el-button @click="addItem" type="default">添加房间</el-button>
+        <el-button @click="addOther" type="default">添加其他</el-button>
+        <el-button @click="addBase" type="default">添加基础设施</el-button>
+        <!-- <el-button @click="toCopyRoom" type="default">复制房间</el-button> -->
+      </div>
+
+      <!-- <el-button @click="editItem" type="default"  v-if="!isViews">修改</el-button> -->
+
+      <div
+        id="printDiv"
+        :style="{ minHeight: layoutHeight + 'px', padding: '20px' }"
+        class="vue-grid-layout"
+      >
         <div class="north" style="margin-right: 20px">
           <img src="../../../assets/images/north.png" alt="" />
         </div>
-      <grid-layout
-        id="gridView"
-        :layout.sync="layout"
-        :col-num="colNum"
-        :row-height="30"
-        :vertical-compact="false"
-        :use-css-transforms="true"
-        :prevent-collision="false"
-        :preventCollision="true"
-      >
-        <grid-item
+        <vue-draggable-resizable
+          parent
+          ref="dragResizable"
           v-for="item in layout"
-          :static="item.static"
-          :x="item.x"
-          :y="item.y"
-          :w="item.w"
-          :h="item.h"
+          :x="(W / 12) * item.x"
+          :y="item.y * 30"
+          :w="(W / 12) * item.w"
+          :h="item.h * 30"
           :i="item.i"
           :key="item.i"
-          :isDraggable="false"
-          :isResizable="false"
-          @resized="resizedEvent"
-          @moved="movedEvent"
+          :z="item.zIndex"
+          :draggable="item.isDraggable && !isViews"
+          :resizable="item.isResizable && !isViews"
+          @resizestop="(x, y, w, h) => resizedEvent(item, x, y, w, h)"
+          @dragging="(x, y) => onDrag(item, x, y)"
+          @dragstop="
+            (x, y) => {
+              movedEvent(item, x, y);
+            }
+          "
+          @resizing="(x, y, w, h) => onResize(item, x, y, w, h)"
+          @activated="onActivated(item)"
+          @click.native="dbClickEvent($event, item)"
           :style="{
             backgroundColor: item.c,
             border: item.type == 'thorough' ? 'none !important' : '',
@@ -35,9 +50,117 @@
           <span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'">{{
             item.name
           }}</span>
-          <!-- <span class="remove" @click="removeItem(item.i)" v-if="item.i && isEdit">x</span> -->
-        </grid-item>
-      </grid-layout>
+          <span class="remove" @click.stop="removeItem(item.i)" v-if="!isViews"
+            >x</span
+          >
+        </vue-draggable-resizable>
+      </div>
+    </div>
+    <el-dialog :visible.sync="show" :title="title" show-cancel-button>
+      <el-form label-width="100px">
+        <div v-if="isRoom">
+          <el-form-item label="房间名称" prop="roomName">
+            <el-input v-model="roomName" placeholder="请输入房间名称" />
+          </el-form-item>
+          <el-form-item label="房间类型" prop="roomType">
+            <el-select v-model="roomType" placeholder="请选择房间类型">
+              <el-option
+                v-for="item in roomArr"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <div v-else-if="isBase">
+          <el-form-item label="房间名称" prop="roomName">
+            <el-select v-model="roomName" placeholder="请选择房间类型">
+              <el-option
+                v-for="item in copyRoom.typeData"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <div v-else-if="copyRoom.isCopy">
+          <el-form-item label="楼层" prop="floorName">
+            <!-- <el-select v-model="copyRoom.floor.name" placeholder="选择楼层">
+              <el-option
+                v-for="item in copyRoom.floorData"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              ></el-option>
+            </el-select> -->
+            <!-- v-model="copyRoom.floor.name" -->
+            <el-cascader
+              :options="copyRoom.floorData"
+              :props="{
+                label: 'name',
+                value: 'id',
+              }"
+              @change="handleChange"
+            ></el-cascader>
+          </el-form-item>
+          <el-form-item label="房间" prop="copyRoomName">
+            <el-select
+              v-model="copyRoom.room.id"
+              @visible-change="seletRoom"
+              placeholder="选择房间"
+            >
+              <el-option
+                v-for="item in copyRoom.roomData"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="房间名称">
+            <el-input v-model="roomName" placeholder="请输入房间名称" />
+          </el-form-item>
+          <el-form-item label="房间类型" prop="roomType">
+            <!-- <el-input
+              readonly
+              clickable
+              label="房间类型"
+              :value="copyRoom.type.dictLabel"
+              placeholder="选择房间类型"
+              @click="selectType"
+            /> -->
+            <el-select
+              v-model="copyRoom.type1.dictValue"
+              placeholder="选择房间"
+              @change="copyTypeChnage"
+            >
+              <el-option
+                v-for="item in copyRoom.typeData"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <div v-else>
+          <el-form-item label="名称" prop="roomName">
+            <el-input
+              v-model="roomName"
+              label="名称"
+              placeholder="请输入名称"
+            />
+          </el-form-item>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelDialog">取 消</el-button>
+        <el-button type="primary" @click="saveRoomName">确 定</el-button>
+      </div>
+    </el-dialog>
+    <el-row v-if="isViews" style="margin-top: 20px; margin-left: 20px">
       <el-row :gutter="5" style="margin-top: 20px; margin-left: 20px">
         <el-col :span="2"> 风险等级图例:</el-col>
         <el-col :span="3"> <span class="riskTab type1"></span>重大风险</el-col>
@@ -45,8 +168,6 @@
         <el-col :span="3"> <span class="riskTab type3"></span>一般风险</el-col>
         <el-col :span="3"> <span class="riskTab type4"></span>低风险</el-col>
       </el-row>
-    </div>
-    <el-row style="margin-top: 20px; margin-left: 20px">
       <el-button type="primary" @click="getPdf">导 出</el-button>
       <el-button @click="cancelDraw">取 消</el-button>
     </el-row>
@@ -57,25 +178,30 @@
 import html2Canvas from "html2canvas";
 import JsPDF from "jspdf";
 import { GridLayout, GridItem } from "vue-grid-layout";
-import { ledgerRoomList, getDictList } from "@/api/risk/draw";
+import { ledgerRoomList, getDictList, updateBatch } from "@/api/risk/draw";
 
+import VueDraggableResizable from "@/components/vue-draggable-resizable/vue-draggable-resizable.vue";
+import "@/components/vue-draggable-resizable/vue-draggable-resizable.css";
+import { debounce } from "@/utils";
+import { getFun, postFun } from "@/api/risk/draw";
 // 动态添加/删除
 export default {
   name: "riskView",
   components: {
     GridLayout,
     GridItem,
+    VueDraggableResizable,
   },
   data() {
     return {
+      beforEle: null,
+      beforeTime: 0,
+      W: 0, //当前屏幕的宽度
+      H: 0, //当前屏幕的高度
+      layoutHeight: 0,
       text: "房间位置绘制工具",
-      layout: [
-        // { x: 0, y: 0, w: 2, h: 3, i: "1",name: "办公室1",c:'#FF4433',isDraggable:false,isResizable:false,},
-        // { x: 2, y: 0, w: 2, h: 3, i: "2",name: "办公室2",c:'#FF9800',isDraggable:false,isResizable:false},
-        // { x: 4, y: 0, w: 2, h: 3, i: "3",name: "办公室2",c:'#FFFF00',isDraggable:false,isResizable:false},
-        // { x: 6, y: 0, w: 2, h: 3, i: "4",name: "办公室2",c:'#0091EA',isDraggable:false,isResizable:false},
-        // { x: 0, y: 3, w: 2, h: 3, i: "5",name: "办公室2",c:'#FF4433',isDraggable:false,isResizable:false},
-      ],
+      isabled: true,
+      layout: [],
       draggable: false,
       resizable: true,
       colNum: 12,
@@ -88,44 +214,52 @@ export default {
       roomName: "",
       roomArr: [],
       colorList: ["#FF4433", "#FF9800", "#FFFF00", "#0091EA"],
-      isViews: true, // true:查看页面；  false: 添加页面
+      isViews: false, // true:查看页面；  false: 添加页面
       showHeader: true,
       isRoom: true, //是否为添加房间
       isBase: false,
       baseName: "",
       baseArr: [],
       layoutData: [],
-    };
-  },
-  props: {
-    isView: {
-      type: Boolean,
-      default: false,
+      editItem: null,
+      layoutDataStr: [],
+      copyRoom: {
+        isCopy: false,
+        floor: {},
+        room: {},
+        type1: {},
+        floorData: [],
+        roomData: [],
+        typeData: [],
+        copyArr: [],
+        buildingId: "",
       },
+    };
   },
   mounted() {
     // screenfull.toggle(this.$refs.mapbox);
     // this.$nextTick(() => {
     // this.rotateBox();
     // });
-    console.log("floorId==>>", this.$route.params.floorId);
-    if (this._props.isView) {
-      console.log("作为组件传值==>>");
-      this.isViews = true;
-      this.showHeader = false;
-    }
-    if (this.$route.params.isView) {
-      this.isViews = true;
-      this.initRotate();
-      window.addEventListener(
-        "onorientationchange" in window ? "orientationchange" : "resize",
-        this.orientationChange,
-        false
-      );
-    }
+    this.copyRoom.buildingId = this.$route.params.buildingId;
+    this.isViews = this.$route.params.isViews;
     this.getRoomInfo();
+    this.selectType();
+    this.getFloor();
+    this.W = document.documentElement.clientWidth;
+    this.H = document.documentElement.clientHeight - 180;
   },
   methods: {
+    handleChange(e) {
+      this.copyRoom.floor.id = e[1];
+    },
+    copyTypeChnage(e) {
+      // console.log(e);
+      this.copyRoom.type1 = this.copyRoom.typeData.find(
+        (x) => x.dictValue == e
+      );
+    },
+
     getPdf() {
       var title = "四色图";
       // html2Canvas(document.querySelector('#pdfDom'), { //这是在界面上设置一个id
@@ -162,8 +296,76 @@ export default {
         PDF.save(title + ".pdf");
       });
     },
-    cancelDraw() {
-      this.$router.go(-1);
+    // 双击
+    dbClickEvent(e, item) {
+      if (this.isViews) return;
+      if (this.beforEle && this.beforEle != e.target) {
+        this.beforeTime = 0;
+        this.beforEle = null;
+      }
+      if (this.beforeTime && new Date().getTime() - this.beforeTime < 500) {
+        console.log("dbclick");
+        this.changeName(item);
+        this.beforeTime = 0;
+        this.beforEle = null;
+      }
+      this.beforeTime = new Date().getTime();
+      this.beforEle = e.target;
+    },
+    // 选择楼层
+    getFloor() {
+      this.copyRoom.type = "floor";
+      this.showPicker = true;
+      this.copyRoom.roomData = [];
+      if (this.copyRoom.floorData.length) {
+        this.copyRoom.copyArr = this.copyRoom.floorData;
+        return;
+      }
+      return getFun(`/risk/plan/floor/list/${this.copyRoom.buildingId}`)
+        .then((res) => {
+          this.copyRoom.floorData = res.data;
+          this.copyRoom.copyArr = this.copyRoom.floorData;
+        })
+        .catch(() => {
+          this.$message.error("加载失败,请稍后再试");
+        });
+    },
+    // 选择房间
+    seletRoom(bol) {
+      if (!bol) return;
+      this.copyRoom.type = "room";
+      this.showPicker = true;
+      if (!this.copyRoom.floor) {
+        this.$message.error("先选择楼层");
+        return;
+      }
+      if (this.copyRoom.roomData.length) {
+        this.copyRoom.copyArr = this.copyRoom.roomData;
+        return;
+      }
+      getFun(`/risk/plan/room/list/${this.copyRoom.floor.id}`)
+        .then((res) => {
+          this.copyRoom.roomData = res.data;
+          this.copyRoom.copyArr = this.copyRoom.roomData;
+        })
+        .catch(() => {
+          this.$message.error("加载失败,请稍后再试");
+        });
+    },
+    selectType() {
+      // selectType
+      this.copyRoom.type = "type";
+      this.showPicker = true;
+      if (this.copyRoom.typeData.length) {
+        this.copyRoom.copyArr = this.copyRoom.typeData;
+        return;
+      }
+      getFun("/risk/plan/dict/data/list", {
+        dictType: "risk_plan_base_room",
+      }).then((res) => {
+        this.copyRoom.typeData = res.data;
+        this.copyRoom.copyArr = this.copyRoom.typeData;
+      });
     },
     orientationChange() {
       if (window.orientation === 180 || window.orientation === 0) {
@@ -234,14 +436,20 @@ export default {
     },
     getRoomInfo() {
       let data = {
-        floorId: this.$route.params.floorId ? this.$route.params.floorId : "4",
+        floorId: this.$route.params.floorId ? this.$route.params.floorId : "18",
       };
-      ledgerRoomList(data)
+      getFun("/ledger/room/list", data)
         .then((res) => {
           if (res.code == 200) {
             this.layout = [];
             this.layoutData = res.data;
+            this.layoutDataStr = JSON.stringify(this.layoutData);
+            if (!res.data.length) {
+              this.updateLayoutHeight();
+              return;
+            }
             res.data.forEach((item) => {
+              if (item.position) {
                 item.position = JSON.parse(item.position);
                 item.position.i = item.id;
                 item.position.id = item.id;
@@ -249,91 +457,106 @@ export default {
                   item.position.isDraggable = false;
                   item.position.isResizable = false;
                 }
-              // if (!this.isViews || item.position.type == "thorough") {
-              //   //添加页面不显示颜色
-              //   item.position.c = "#e6e5e5";
-              // } else {
-              /**
-               *  根据风险评分来匹配相应的颜色
-               *  score 风险评分字段
-               */
-              // item.score = Number(item.score)
-              // if (item.score>=21 && item.score <= 27) { //优
-              //     item.position.c = this.colorList[3]
-              // }else if(item.score>=14 && item.score <=20){ //良
-              //     item.position.c = this.colorList[2]
-              // }else if (item.score>=7&& item.score <= 13) { //中
-              //     item.position.c = this.colorList[1]
-              // }else if (item.score>=0 && item.score <= 6) { //差
-              //     item.position.c = this.colorList[0]
-              // }
+                if (!this.isViews) {
+                  //添加页面不显示颜色
+                  item.position.c = "#e6e5e5";
+                } else {
                   item.position.c = item.color;
-              // }
+                }
                 this.layout.push(item.position);
+                this.updateLayoutHeight();
+              }
             });
-            // console.log('layout==>>',this.layout)
+            // console.log(res.data);
           }
         })
         .catch((err) => {
           console.log("err==>>", err);
         });
 
-      //   getDictList({
-      //     dictType: "risk_plan_room_type"
-      //   }).then(res => {
-      //     this.roomArr = res.data;
-      //   });
-      //  getDictList({
-      //     dictType: "risk_plan_base_room"
-      //   }).then(res => {
-      //     this.baseArr = res.data;
-      //   });
+      getFun("/risk/plan/dict/data/list", {
+        dictType: "risk_plan_room_type",
+      }).then((res) => {
+        this.roomArr = res.data;
+      });
+      getFun("/risk/plan/dict/data/list", {
+        dictType: "risk_plan_base_room",
+      }).then((res) => {
+        this.baseArr = res.data;
+      });
     },
     // 增加
     addItem() {
-      if (this.layout.find((item) => item.i == "")) {
-        Toast.fail({
-          title: "提示",
-          forbidClick: true,
-          message: "请先点击确定，保存当前房间信息",
-        });
-        return;
-      }
       this.roomType = "";
       this.roomName = "";
       this.title = "创建房间";
       this.isRoom = true;
       this.show = true;
       this.isBase = false;
+      this.copyRoom.isCopy = false;
     },
     // 添加其他
     addOther() {
-      if (this.layout.find((item) => item.i == "")) {
-        Toast.fail({
-          title: "提示",
-          forbidClick: true,
-          message: "请先点击确定，保存当前房间信息",
-        });
-        return;
-      }
       this.isRoom = false;
       this.isBase = false;
+      this.copyRoom.isCopy = false;
       this.roomType = "";
       this.roomName = "";
       this.title = "创建其他";
       this.show = true;
     },
-
-    //添加基础设施
-    addBase() {
-      if (this.layout.find((item) => item.i == "")) {
-        Toast.fail({
-          title: "提示",
-          forbidClick: true,
-          message: "请先点击确定，保存当前房间信息",
+    // 复制房间
+    toCopyRoom() {
+      this.roomType = "";
+      this.roomName = "";
+      this.title = "复制房间";
+      this.show = true;
+      this.copyRoom.isCopy = true;
+      this.isBase = false;
+      this.isRoom = false;
+    },
+    // 删除
+    removeItem(val) {
+      this.$confirm("是否删除")
+        .then(() => {
+          console.log(this.layout, val);
+          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) {
+          //       Toast.success("删除成功");
+          //       this.getRoomInfo();
+          //     }
+          //   })
+          //   .catch(err => {
+          //   });
+        })
+        .catch(() => {
+          // on cancel
         });
-        return;
+    },
+    // 修改名称
+    changeName(item) {
+      this.editItem = item;
+      switch (item.type) {
+        case "基础设施":
+          this.addBase();
+          break;
+        case "thorough":
+          this.addOther();
+          break;
+        default:
+          this.addItem();
+          this.roomType = item.type;
       }
+      this.title = "编辑";
+      this.roomName = item.name;
+    },
+    //添加基础设施
+    addBase() {
       this.roomType = "";
       this.roomName = "";
       this.title = "添加基础设备";
@@ -341,58 +564,277 @@ export default {
       this.isBase = true;
       this.show = true;
     },
+    // 更新画布高度
+    updateLayoutHeight() {
+      const layoutData = this.layoutData.filter((x) => x.position); //以防没有position报错
+      const max = Math.max(
+        ...layoutData.map((x) => {
+          let data = x.position;
+          if (typeof x.position == "string") {
+            // x.position.y + x.position.h
+            data = JSON.parse(x.position);
+          }
+          return data.y + data.h;
+        })
+      );
+      // 设置layout高度,使页面可以滚动
+      const maxTop = max * 30;
+      this.layoutHeight = maxTop > this.H ? maxTop : this.H;
+      console.log(this.layoutHeight);
+    },
     // 移动后的事件
-    movedEvent(i, newX, newY) {
-      this.layOutItem.x = newX;
-      this.layOutItem.y = newY;
-      // console.log('layOutItem==>>',this.layOutItem)
-      // console.log('this.layout==>>',this.layout)
+    movedEvent(item, newX, newY) {
+      item.x = (newX / this.W) * 12;
+      item.y = newY / 30;
+    },
+    // 拖动
+    onDrag(item, x, y) {
+      // 拖动时判断layoutHeight是否需要更新
+      item.x = (x / this.W) * 12;
+      item.y = y / 30;
+      debounce(this.updateLayoutHeight)();
     },
     // 调整大小后的事件
-    resizedEvent: function (i, newH, newW) {
-      this.layOutItem.w = newW;
-      this.layOutItem.h = newH;
-      // console.log('layOutItem==>>',this.layOutItem)
-      // console.log('this.layout==>>',this.layout)
+    resizedEvent(item, x, y, w, h) {
+      item.w = (w / this.W) * 12;
+      item.h = h / 30;
+      item.x = (x / this.W) * 12;
+      item.y = y / 30;
+    },
+    onResize() {
+      debounce(this.updateLayoutHeight)();
     },
+    // 激活
+    onActivated(item) {
+      if (this.isViews) return;
+      if (this.beforItem) {
+        this.beforItem.zIndex = 1;
+      }
+      item.zIndex = 10;
+      this.beforItem = item;
+      this.$forceUpdate();
+    },
+
     //关闭
-    close() {
+    async close() {
+      this.layoutData.forEach((item) => {
+        if (
+          typeof item.position == "object" &&
+          Object.prototype.toString.call(item.position) === "[object Object]"
+        ) {
+          item.position = JSON.stringify(item.position);
+        }
+      });
+      this.$dialog
+        .confirm({
+          title: "提示",
+          message: "是否保存已修改内容？",
+        })
+        .then(() => {
+          this.confim();
+          setTimeout(() => {
             history.go(-1);
+          }, 500);
+          // on confirm
+        })
+        .catch(() => {
+          history.go(-1);
+          // on cancel
+        });
     },
-    //edger/room/update/batch
     // 确定 执行批量编辑保存
-    confim() {
-      // if (this.roomName == '') {
-      //      Toast.fail({
-      //         title: '提示',
-      //         forbidClick: true,
-      //         message: '请先添加房间！',
-      //     })
-      //     return
-      // }
-      // let data = this.layoutData;
-      // this.layoutData.forEach(item => {
-      //   item.position = JSON.stringify(item.position);
-      // });
-      // postFun("/ledger/room/update/batch", data)
+    confim: debounce(function () {
+      //修改房间后返回清掉房间的值
+      var inherenForm = JSON.parse(sessionStorage.getItem("inherenForm"));
+      if (inherenForm) {
+        inherenForm.roomName = "";
+        inherenForm.roomId = "";
+        sessionStorage.setItem("inherenForm", JSON.stringify(inherenForm));
+      }
+      //保存
+      let data = this.layoutData;
+      if (!data.length) {
+        this.$message.info("请先添加房间");
+        return;
+      }
+      data.forEach((item) => {
+        if (
+          typeof item.position == "object" &&
+          Object.prototype.toString.call(item.position) === "[object Object]"
+        ) {
+          item.position = JSON.stringify(item.position);
+        }
+      });
+      console.log("this.$route.params.floorId==>>", this.$route.params.floorId);
+      postFun(
+        "/ledger/room/update/batch?floorId=" + this.$route.params.floorId,
+        data
+      )
+        .then((res) => {
+          if (res.code == 200) {
+            this.$message.success("保存成功");
+            this.getRoomInfo();
+          }
+        })
+        .catch((err) => {
+          console.log("err==>>", err);
+        });
+    }),
+    //保存房间名称
+    async saveRoomName() {
+      this.show = false;
+      if (this.copyRoom.isCopy) {
+        if (
+          !this.copyRoom.room.id ||
+          !this.copyRoom.floor.id ||
+          !this.copyRoom.type1.dictLabel
+        ) {
+          Toast.fail({
+            title: "提示",
+            forbidClick: true,
+            message: "请填写完整！",
+          });
+          return false;
+        }
+        await this.saveCopy();
+      }
+      if (this.roomName == "") {
+        Toast.fail({
+          title: "提示",
+          forbidClick: true,
+          message: "请输入名称！",
+        });
+        return;
+      }
+      if (this.editItem) {
+        const editItem = this.layout.find((x) => x.i == this.editItem.i);
+        console.log(this.layoutData);
+        const layoutData = this.layoutData.find((x) => x.id == editItem.i);
+        if (layoutData) {
+          layoutData.name = this.roomName;
+        }
+        if (editItem) {
+          editItem.name = this.roomName;
+          editItem.type = this.roomType;
+          this.editItem = {};
+          return;
+        }
+        this.editItem = {};
+      }
+      var i =
+        this.layout && this.layout.length > 0
+          ? Math.max.apply(
+              Math,
+              this.layout.map((item) => {
+                return item.id;
+              })
+            ) + 1
+          : 1;
+      this.layOutItem = {
+        x: (this.layout.length * 2) % (this.colNum || 12),
+        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,
+        c: "#e6e5e5",
+        type: this.isRoom
+          ? this.roomType
+          : this.isBase
+          ? "基础设施"
+          : "thorough",
+        isDraggable: true,
+        isResizable: true,
+      };
+      this.beforItem = this.layOutItem;
+      this.layout.push(this.layOutItem);
+
+      let data = {
+        floorId: this.$route.params.floorId ? this.$route.params.floorId : "18",
+        name: this.roomName,
+        position: this.layOutItem,
+        roomType: this.isRoom
+          ? this.roomType
+          : this.isBase
+          ? "基础设施"
+          : "9999",
+      };
+      if (this.copyRoom.isCopy) {
+        data.id = this.copyRoom.id;
+      }
+
+      this.layoutData.push(data);
+      this.resetCopy();
+      this.updateLayoutHeight();
+      // postFun("/ledger/room/save", data)
       //   .then(res => {
       //     if (res.code == 200) {
-      //       Toast.success("保存成功");
+      //       // Toast.success('保存成功');
       //       this.getRoomInfo();
+      //       this.roomType = "";
+      //       this.roomName = "";
       //     }
       //   })
       //   .catch(err => {
-      //     console.log("err==>>", err);
       //   });
     },
-    //保存房间名称
+    resetCopy() {
+      const copyRoom = {
+        isCopy: false,
+        floor: {},
+        room: {},
+        type1: {},
+        copyArr: [],
+        id: "",
+      };
+      this.copyRoom = { ...this.copyRoom, ...copyRoom };
+      // this.copyRoom.isCopy = false;
+      // this.copyRoom.floor = {};
+      // this.copyRoom.room = {};
+      // this.copyRoom.type = {};
+      // this.copyRoom.copyArr = [];
+    },
+    cancelDraw() {
+      this.resetCopy();
+      this.show = false;
+    },
+    // saveCopy
+    saveCopy() {
+      const planId = sessionStorage.getItem("planId");
+      return postFun(`/risk/plan/copy/room/${planId}`, {
+        id: this.copyRoom.room.id,
+        floorId: this.$route.params.floorId,
+        name: this.roomName,
+        roomType: this.copyRoom.type1.dictType,
+      }).then((res) => {
+        this.copyRoom.id = res.data;
+      });
+    },
     cancelDialog() {
       this.roomType = "";
       this.roomName = "";
+      this.editItem = null;
+      this.show = false;
     },
     onConfirm(value) {
       if (this.isRoom) {
         this.roomType = value.dictValue;
+      } else if (this.copyRoom.isCopy) {
+        if (this.copyRoom.type == "floor") {
+          this.copyRoom.floorData.forEach((val) => {
+            if (val.name == value[0]) {
+              this.copyRoom.floor = val.children.find(
+                (x) => x.name === value[1]
+              );
+            }
+          });
+        } else if (this.copyRoom.type == "room") {
+          this.copyRoom.room = value;
+        } else {
+          this.copyRoom.type1 = value;
+        }
       } else {
         this.roomName = value.dictValue;
       }
@@ -414,8 +856,8 @@ export default {
 .north {
   position: absolute;
   display: inline-block;
-  top: 1.5rem;
-  right: 5rem;
+  top: 30px;
+  right: 100px;
   z-index: 999;
 }
 .north img {
@@ -474,7 +916,7 @@ export default {
   align-items: flex-start;
   /* flex-direction: column; */
 }
-.setBtns .van-button--mini {
+.setBtns .el-button--mini {
   padding: 0 10px;
 }
 .remove {
@@ -483,7 +925,7 @@ export default {
   top: 0;
   cursor: pointer;
 }
-::v-deep .van-dialog__header {
+::v-deep .el-dialog__header {
   padding-top: 15px !important;
   padding-bottom: 15px !important;
 }
@@ -526,6 +968,7 @@ export default {
 .rowText {
   writing-mode: vertical-rl;
   -webkit-writing-mode: vertical-rl;
+  font-size: 20px;
 }
 .vue-grid-item .no-drag {
   height: 100%;
@@ -582,4 +1025,7 @@ export default {
   font-size: 12px;
   transform: scale(0.8);
 }
+.vdr {
+  border-style: solid;
+}
 </style>

src/views/risk/existing/index.vue

@@ -125,18 +125,14 @@
           >导出</el-button
         >
       </el-col>
-      <right-toolbar
-        :showSearch.sync="showSearch"
-        @queryTable="getList">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">
       </right-toolbar>
     </el-row>
     <el-table
       v-loading="loading"
       :data="inherentList"
       @selection-change="handleSelectionChange"
-      
     >
-      
       <el-table-column label="项目信息" align="center" fixed width="500">
         <el-table-column
           label="区域公司"
@@ -144,7 +140,12 @@
           prop="deptName"
           width="100"
         />
-        <el-table-column  label="项目名称" align="center" prop="projectName" width="100">
+        <el-table-column
+          label="项目名称"
+          align="center"
+          prop="projectName"
+          width="100"
+        >
           <template slot-scope="scope">
             <el-popover
               placement="top-start"
@@ -162,31 +163,107 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="所属城市" align="center" prop="city"  width="100"/>
-        <el-table-column label="项目业态" align="center" prop="businessFormat"  width="100"/>
-        <el-table-column label="项目类型" align="center" prop="type"  width="100"/>
+        <el-table-column
+          label="所属城市"
+          align="center"
+          prop="city"
+          width="100"
+        />
+        <el-table-column
+          label="项目业态"
+          align="center"
+          prop="businessFormat"
+          width="100"
+        />
+        <el-table-column
+          label="项目类型"
+          align="center"
+          prop="type"
+          width="100"
+        />
       </el-table-column>
 
       <el-table-column label="项目风险清单" align="center">
         <el-table-column label="固有风险" align="center">
-          <el-table-column label="危险源名称" align="center" prop="inherentName"  width="100"/>
-          <el-table-column label="风险等级" align="center" prop="inherentLevel"  width="100"/>
+          <el-table-column
+            label="危险源名称"
+            align="center"
+            prop="inherentName"
+            width="100"
+          />
+          <el-table-column
+            label="风险等级"
+            align="center"
+            prop="inherentLevel"
+            width="100"
+          />
         </el-table-column>
         <el-table-column label="现有风险" align="center">
-          <el-table-column label="危险源名称" align="center" prop="existingName"  width="100"/>
-          <el-table-column label="风险等级" align="center" prop="existingLevel"  width="100"/>
+          <el-table-column
+            label="危险源名称"
+            align="center"
+            prop="existingName"
+            width="100"
+          />
+          <el-table-column
+            label="风险等级"
+            align="center"
+            prop="existingLevel"
+            width="100"
+          />
+        </el-table-column>
+        <el-table-column
+          label="风险点位置"
+          align="center"
+          prop="presenceLocation"
+          width="100"
+        />
+        <el-table-column
+          label="可能导致的事故后果"
+          align="center"
+          prop="listType"
+          width="100"
+        >
+          <template slot-scope="scope">
+            <el-popover
+              placement="top-start"
+              title="项目名称"
+              width="200"
+              trigger="hover"
+              :content="scope.row.listType"
+            >
+              <span slot="reference">{{
+                scope.row.listType.length > 10
+                  ? scope.row.listType.substring(0, 10) + "..."
+                  : scope.row.listType
+              }}</span>
+            </el-popover>
+          </template>
         </el-table-column>
-        <el-table-column label="风险点位置" align="center" prop="presenceLocation"  width="100"/>
-        <el-table-column label="可能导致的事故后果" align="center" prop="listType"  width="100"/>
       </el-table-column>
 
       <el-table-column label="项目整体风险等级" align="center">
-        <el-table-column label="固有风险" align="center" prop="inherentProjectLevel" width="100"/>
-        <el-table-column label="现状风险" align="center" prop="existingProjectLevel" width="100"/>
+        <el-table-column
+          label="固有风险"
+          align="center"
+          prop="inherentProjectLevel"
+          width="100"
+        />
+        <el-table-column
+          label="现状风险"
+          align="center"
+          prop="existingProjectLevel"
+          width="100"
+        />
       </el-table-column>
 
       <el-table-column label="风险管控" align="center">
-        <el-table-column label="应采取的管控措施" align="center" prop="inherentMeasuresAdministration"  width="100">
+        <el-table-column
+          label="应采取的管控措施"
+          align="center"
+          prop="inherentMeasuresAdministration"
+          width="100"
+        >
           <template slot-scope="scope">
             <el-popover
               placement="top-start"
@@ -196,14 +273,21 @@
               :content="scope.row.inherentMeasuresAdministration"
             >
               <span slot="reference">{{
-              scope.row.inherentMeasuresAdministration&&scope.row.inherentMeasuresAdministration.length > 10
-                ? scope.row.inherentMeasuresAdministration.substring(0, 10) + "..."
+                scope.row.inherentMeasuresAdministration &&
+                scope.row.inherentMeasuresAdministration.length > 10
+                  ? scope.row.inherentMeasuresAdministration.substring(0, 10) +
+                    "..."
                   : scope.row.inherentMeasuresAdministration
               }}</span>
             </el-popover>
           </template>
         </el-table-column>
-        <el-table-column label="已采取的管控措施" align="center" prop="existingMeasuresAdministration"  width="100">
+        <el-table-column
+          label="已采取的管控措施"
+          align="center"
+          prop="existingMeasuresAdministration"
+          width="100"
+        >
           <template slot-scope="scope">
             <el-popover
               placement="top-start"
@@ -213,28 +297,64 @@
               :content="scope.row.existingMeasuresAdministration"
             >
               <span slot="reference">{{
-              scope.row.existingMeasuresAdministration&&scope.row.existingMeasuresAdministration.length > 10
-                ? scope.row.existingMeasuresAdministration.substring(0, 10) + "..."
+                scope.row.existingMeasuresAdministration &&
+                scope.row.existingMeasuresAdministration.length > 10
+                  ? scope.row.existingMeasuresAdministration.substring(0, 10) +
+                    "..."
                   : scope.row.existingMeasuresAdministration
               }}</span>
             </el-popover>
           </template>
         </el-table-column>
         <el-table-column label="分级管控" align="center">
-          <el-table-column label="管控责任单位" align="center" prop="measuresDeptName"  width="100"/>
-          <el-table-column label="管控责任人" align="center" prop="measuresUserName"  width="100"/>
-          <el-table-column label="人员联系方式" align="center" prop="measuresUserPhone"  width="100"/>
+          <el-table-column
+            label="管控责任单位"
+            align="center"
+            prop="measuresDeptName"
+            width="100"
+          />
+          <el-table-column
+            label="管控责任人"
+            align="center"
+            prop="measuresUserName"
+            width="100"
+          />
+          <el-table-column
+            label="人员联系方式"
+            align="center"
+            prop="measuresUserPhone"
+            width="100"
+          />
         </el-table-column>
       </el-table-column>
 
-      
       <el-table-column label="重大危险源管理" align="center">
-        <el-table-column label="是否存在重大危险源" align="center" prop="majorHazardSource" width="100"/>
-        <el-table-column label="重大危险源名称" align="center" prop="hazardSourceName" width="100"/>
-        <el-table-column label="重大危险源描述" align="center" prop="majorHazardDescription" width="100"/>
+        <el-table-column
+          label="是否存在重大危险源"
+          align="center"
+          prop="majorHazardSource"
+          width="100"
+        />
+        <el-table-column
+          label="重大危险源名称"
+          align="center"
+          prop="hazardSourceName"
+          width="100"
+        />
+        <el-table-column
+          label="重大危险源描述"
+          align="center"
+          prop="majorHazardDescription"
+          width="100"
+        />
       </el-table-column>
 
-      <el-table-column label="判定依据" align="center" prop="referenceBasis" width="100"/>
+      <el-table-column
+        label="判定依据"
+        align="center"
+        prop="referenceBasis"
+        width="100"
+      />
 
       <el-table-column label="操作" align="center" prop="describe">
         <template slot-scope="scope">

src/views/risk/plan/inherentdata.vue

 <template>
   <div class="wrapper">
-    <el-descriptions :title="InfoList.name" class="margin-top" :column="3" :size="size" border>
+    <el-descriptions
+      :title="InfoList.name"
+      class="margin-top"
+      :column="3"
+      :size="size"
+      border
+    >
       <el-descriptions-item label="所属项目">{{
         InfoList.projectName
       }}</el-descriptions-item>
@@ -17,7 +23,7 @@
         InfoList.pointType
       }}</el-descriptions-item>
       <el-descriptions-item label="是否特种设备">{{
-        InfoList.specialEquipment?"是":"否"
+        InfoList.specialEquipment ? "是" : "否"
       }}</el-descriptions-item>
 
       <el-descriptions-item label="安全警示标志">{{
@@ -38,121 +44,191 @@
       <el-descriptions-item label="评估时间">{{
         InfoList.createTime
       }}</el-descriptions-item>
-
     </el-descriptions>
     <el-tabs v-model="activeName" type="border-card" style="margin-top: 10px">
       <el-tab-pane label="风险管控信息" name="first">
         <el-tabs tab-position="left">
           <el-tab-pane label="风险图片">
             <template>
-              <div v-if="InfoList.pictureFile!=null">
-                <el-carousel style="height: 500px;width:500px;position: relative;left: 34%;">
-                  <el-carousel-item v-for="item in InfoList.pictureFile" :key="item">
-
-                    <img :src="item.filePath" style="height: 400px; " />
-
+              <div v-if="InfoList.pictureFile != null">
+                <el-carousel
+                  style="
+                    height: 500px;
+                    width: 500px;
+                    position: relative;
+                    left: 34%;
+                  "
+                >
+                  <el-carousel-item
+                    v-for="item in InfoList.pictureFile"
+                    :key="item"
+                  >
+                    <img :src="item.filePath" style="height: 400px" />
                   </el-carousel-item>
                 </el-carousel>
               </div>
               <div v-else>
                 <el-empty description="暂无图片"></el-empty>
               </div>
-
             </template>
-
-
           </el-tab-pane>
           <el-tab-pane label="应采取的管控措施">
             <div class="approveResult">
               <div class="approveL">
-                <span style="font-weight: bold;">技术措施</span>
-                <p>{{InfoList.measuresProject==null?"暂无":InfoList.measuresProject}}</p>
+                <span style="font-weight: bold">技术措施</span>
+                <p>
+                  {{
+                    InfoList.measuresProject == null
+                      ? "暂无"
+                      : InfoList.measuresProject
+                  }}
+                </p>
                 <el-divider></el-divider>
-                <span style="font-weight: bold;">技术措施附件</span>
+                <span style="font-weight: bold">技术措施附件</span>
                 <p>
                   <template>
-                  <div v-if="InfoList.measuresProjectFile!=null">
-                    <div v-for="item in InfoList.measuresProjectFile" :key="item">
-                      <span> <el-link type="primary" icon="el-icon-document"
-                          :href="item.filePath">{{item.fileName}}</el-link></span>
+                    <div v-if="InfoList.measuresProjectFile != null">
+                      <div
+                        v-for="item in InfoList.measuresProjectFile"
+                        :key="item"
+                      >
+                        <span>
+                          <el-link
+                            type="primary"
+                            icon="el-icon-document"
+                            :href="item.filePath"
+                            >{{ item.fileName }}</el-link
+                          ></span
+                        >
                       </div>
                     </div>
                     <div v-else>
                       <el-empty description="暂无附件"></el-empty>
                     </div>
-
                   </template>
                 </p>
                 <el-divider></el-divider>
-                <span style="font-weight: bold;">管理措施</span>
-                <p>{{InfoList.measuresAdministration==null?"暂无":InfoList.measuresAdministration}}</p>
+                <span style="font-weight: bold">管理措施</span>
+                <p>
+                  {{
+                    InfoList.measuresAdministration == null
+                      ? "暂无"
+                      : InfoList.measuresAdministration
+                  }}
+                </p>
                 <el-divider></el-divider>
-                <span style="font-weight: bold;">管理措施附件</span>
+                <span style="font-weight: bold">管理措施附件</span>
                 <p>
                   <template>
-                  <div v-if="InfoList.measuresAdministrationFile!=null">
-                    <div v-for="item in InfoList.measuresAdministrationFile" :key="item">
-                      <span> <el-link type="primary" icon="el-icon-document"
-                          :href="item.filePath">{{item.fileName}}</el-link></span>
+                    <div v-if="InfoList.measuresAdministrationFile != null">
+                      <div
+                        v-for="item in InfoList.measuresAdministrationFile"
+                        :key="item"
+                      >
+                        <span>
+                          <el-link
+                            type="primary"
+                            icon="el-icon-document"
+                            :href="item.filePath"
+                            >{{ item.fileName }}</el-link
+                          ></span
+                        >
                       </div>
                     </div>
                     <div v-else>
                       <el-empty description="暂无附件"></el-empty>
                     </div>
-
                   </template>
                 </p>
                 <el-divider></el-divider>
-                <span style="font-weight: bold;">应急措施</span>
-                <p>{{InfoList.measuresEmergency==null?"暂无":InfoList.measuresEmergency}}</p>
+                <span style="font-weight: bold">应急措施</span>
+                <p>
+                  {{
+                    InfoList.measuresEmergency == null
+                      ? "暂无"
+                      : InfoList.measuresEmergency
+                  }}
+                </p>
                 <el-divider></el-divider>
-                <span style="font-weight: bold;">应急措施附件</span>
+                <span style="font-weight: bold">应急措施附件</span>
                 <p>
                   <template>
-                  <div v-if="InfoList.measuresEmergencyFile!=null">
-                    <div v-for="item in InfoList.measuresEmergencyFile" :key="item">
-                      <span> <el-link type="primary" icon="el-icon-document"
-                          :href="item.filePath">{{item.fileName}}</el-link></span>
+                    <div v-if="InfoList.measuresEmergencyFile != null">
+                      <div
+                        v-for="item in InfoList.measuresEmergencyFile"
+                        :key="item"
+                      >
+                        <span>
+                          <el-link
+                            type="primary"
+                            icon="el-icon-document"
+                            :href="item.filePath"
+                            >{{ item.fileName }}</el-link
+                          ></span
+                        >
                       </div>
                     </div>
                     <div v-else>
                       <el-empty description="暂无附件"></el-empty>
                     </div>
-
                   </template>
                 </p>
                 <el-divider></el-divider>
-                <span style="font-weight: bold;">管控责任单位:</span><span>{{InfoList.measuresDeptName==null?"暂无":InfoList.measuresDeptName}}</span>
+                <span style="font-weight: bold">管控责任单位:</span
+                ><span>{{
+                  InfoList.measuresDeptName == null
+                    ? "暂无"
+                    : InfoList.measuresDeptName
+                }}</span>
                 <el-divider></el-divider>
-                <span style="font-weight: bold;">管控责任人:</span><span>{{InfoList.measuresUserName==null?"暂无":InfoList.measuresUserName}}</span>
+                <span style="font-weight: bold">管控责任人:</span
+                ><span>{{
+                  InfoList.measuresUserName == null
+                    ? "暂无"
+                    : InfoList.measuresUserName
+                }}</span>
                 <el-divider></el-divider>
-                <span style="font-weight: bold;">管控责任人联系方式:</span><span>{{InfoList.measuresUserPhone==null?"暂无":InfoList.measuresUserPhone}}</span>
-
+                <span style="font-weight: bold">管控责任人联系方式:</span
+                ><span>{{
+                  InfoList.measuresUserPhone == null
+                    ? "暂无"
+                    : InfoList.measuresUserPhone
+                }}</span>
               </div>
             </div>
           </el-tab-pane>
           <el-tab-pane label="重大危险源管理">
             <div>
-              <span style="font-weight: bold;">是否为重大危险源:</span><span
-                style="padding-left:30px;">{{InfoList.majorHazardSource?"是":"否"}}</span>
+              <span style="font-weight: bold">是否为重大危险源:</span
+              ><span style="padding-left: 30px">{{
+                InfoList.majorHazardSource ? "是" : "否"
+              }}</span>
               <el-divider></el-divider>
-              <span style="font-weight: bold;">危险源名称:</span><span
-                style="padding-left:30px;">{{InfoList.hazardSourceName==null?"无":InfoList.hazardSourceName}}</span>
+              <span style="font-weight: bold">危险源名称:</span
+              ><span style="padding-left: 30px">{{
+                InfoList.hazardSourceName == null
+                  ? "无"
+                  : InfoList.hazardSourceName
+              }}</span>
               <el-divider></el-divider>
-              <span style="font-weight: bold;">重大危险源描述:</span><span
-                style="padding-left:30px;">{{InfoList.majorHazardSourceDescription==null?"无":InfoList.majorHazardSourceDescription}}</span>
+              <span style="font-weight: bold">重大危险源描述:</span
+              ><span style="padding-left: 30px">{{
+                InfoList.majorHazardSourceDescription == null
+                  ? "无"
+                  : InfoList.majorHazardSourceDescription
+              }}</span>
               <el-divider></el-divider>
-              <span style="font-weight: bold;">判断依据:</span><span
-                style="padding-left:30px;">{{InfoList.referenceBasis==null?"无":InfoList.referenceBasis}}</span>
+              <span style="font-weight: bold">判断依据:</span
+              ><span style="padding-left: 30px">{{
+                InfoList.referenceBasis == null ? "无" : InfoList.referenceBasis
+              }}</span>
             </div>
           </el-tab-pane>
         </el-tabs>
-
       </el-tab-pane>
       <el-tab-pane label="现状风险清单" name="second">
         <div class="approveResult">
           <div class="approveL">
-
             <!-- <el-button type="warning" plain icon="el-icon-download" size="mini"
               @click="downList(InfoList.detailsDto.id)" style="float: right; margin-bottom: 8px">导出风险清单</el-button> -->
             <el-table v-loading="loading" :data="listList">
@@ -162,13 +238,33 @@
                 </template>
               </el-table-column>
               <el-table-column label="风险名称" align="center" prop="name" />
-              <el-table-column label="所属建筑" align="center" prop="buildingName" />
-              <el-table-column label="所属楼层" align="center" prop="floorName" />
-              <el-table-column label="所属房间" align="center" prop="roomName" />
-              <el-table-column label="风险等级（系数）" align="center" prop="level" />
+              <el-table-column
+                label="所属建筑"
+                align="center"
+                prop="buildingName"
+              />
+              <el-table-column
+                label="所属楼层"
+                align="center"
+                prop="floorName"
+              />
+              <el-table-column
+                label="所属房间"
+                align="center"
+                prop="roomName"
+              />
+              <el-table-column
+                label="风险等级（系数）"
+                align="center"
+                prop="level"
+              />
               <el-table-column label="风险因素" align="center" prop="factor" />
               <el-table-column label="准事故类型" align="center" prop="type" />
-              <el-table-column label="存在部位" align="center" prop="presenceLocation" />
+              <el-table-column
+                label="存在部位"
+                align="center"
+                prop="presenceLocation"
+              />
               <el-table-column label="操作" align="center" prop="describe">
                 <template slot-scope="scope">
                   <div>
@@ -176,39 +272,46 @@
                       @click="exportList(scope.row.id)">下载风险告知卡</el-button>
                     <el-button size="mini" type="text" icon="el-icon-view"
                       @click="showDrawCanvas(scope.row.floorId)">查看四色图</el-button> -->
-                    <router-link :to="'/risk/plan/existingdata/index/' + scope.row.id" class="link-type">
-                      <el-button size="mini" type="text" icon="el-icon-view">详情</el-button>
+                    <router-link
+                      :to="'/risk/plan/existingdata/index/' + scope.row.id"
+                      class="link-type"
+                    >
+                      <el-button size="mini" type="text" icon="el-icon-view"
+                        >详情</el-button
+                      >
                     </router-link>
-
-
                   </div>
                 </template>
               </el-table-column>
             </el-table>
 
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-              :limit.sync="queryParams.pageSize" @pagination="getExsitingList" />
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize"
+              @pagination="getExsitingList"
+            />
           </div>
         </div>
       </el-tab-pane>
-
     </el-tabs>
   </div>
 </template>
 
 <script>
-  import {
+import {
   getPlan,
   riskListInfo,
   riskList,
   exportRiskList,
   getInherentById,
   getExsitingList,
-  } from "@/api/risk/plan";
-  export default {
+} from "@/api/risk/plan";
+export default {
   data() {
     return {
-        activeNames: ['1'],
+      activeNames: ["1"],
       activeName: "first",
       // 遮罩层
       loading: true,
@@ -292,12 +395,10 @@
     getExsitingList(id) {
       this.loading = true;
       getExsitingList(this.queryParams).then((res) => {
-
         console.log("res.rows:" + res.rows);
         this.listList = res.rows;
         this.total = res.total;
         this.loading = false;
-
       });
     },
     exportList(id) {
@@ -345,32 +446,32 @@
     this.handleQuery();
   },
   handleSelectionChange() {},
-  };
+};
 </script>
 
 <style lang="scss" scoped>
-  .wrapper {
+.wrapper {
   height: 100%;
   width: 100%;
   padding: 10px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  }
+}
 
-  ::v-deep .el-tabs__content {
+::v-deep .el-tabs__content {
   height: calc(100vh - 334px) !important;
-  }
+}
 
-  .titles {
+.titles {
   position: relative;
   font-size: 18px;
   font-weight: bold;
   margin: 10px 0 10px 20px;
   color: #666666;
-  }
+}
 
-  .titles::before {
+.titles::before {
   content: "";
   width: 8px;
   height: 20px;
@@ -378,9 +479,9 @@
   position: absolute;
   left: -14px;
   top: 0;
-  }
+}
 
-  .approveResult {
+.approveResult {
   flex: 1;
   width: 100%;
   height: calc(100vh - 360px) !important;
@@ -399,5 +500,5 @@
     padding: 0 0 0 30px;
     border-left: 1px solid #d7d7d7d7;
   }
-  }
+}
 </style>

src/views/risk/plan/ledgerdata.vue

@@ -185,7 +185,7 @@
                       size="mini"
                       type="text"
                       icon="el-icon-view"
-                      @click="showDrawCanvas(scope.row.floorId)"
+                      @click="showDrawCanvas(scope.row.floorId,scope.row.buildingId)"
                       >查看四色图</el-button
                     >
                     <router-link
@@ -349,6 +349,7 @@ export default {
         name: "drawCanvas",
         params: {
           floorId: floorId,
+          isViews: true,
         },
       });
     },

vue.config.js

@@ -44,6 +44,12 @@ module.exports = {
           ["^" + process.env.VUE_APP_BASE_API]: "",
         },
       },
+      "/app-api": {
+        // target: "http://192.168.10.137:8080/",
+        target: `http://192.168.4.232:8080/`, //服务器地址
+        // target: `http://192.168.15.230:8081`, //晓晋本地地址
+        changeOrigin: true,
+      },
     },
     disableHostCheck: true,
   },
@@ -57,7 +63,7 @@ module.exports = {
           pxtorem({
             rootValue: 192,//这个尺寸可以根据自己的图去配置，这里配置的是宽度375的图（如果用了vant插件）
             propList: ['*'],
-            exclude: /(element-ui|node_modules|layout|assets)/
+            exclude: /(element-ui|node_modules|layout|assets|risk|drawCanvas)/
           })
         ]
       }