四色图

src/views/drawCanvas/riskView.vue

@@ -22,6 +22,7 @@
     > -->
     <!-- @click.native="changeName(item)" -->
     <!-- :static="item.static" -->
+
     <div :style="{ height: layoutHeight + 'px' }">
       <vue-draggable-resizable
         v-for="item in layout"
@@ -42,6 +43,7 @@
           }
         "
         @activated="onActivated(item)"
+        @click.native="dbClickEvent($event, item)"
         :style="{
           backgroundColor: item.c,
           border: item.type == 'thorough' ? 'none !important' : '',
@@ -64,9 +66,9 @@
           border: item.type == 'thorough' ? 'none !important' : '',
         }"
       > -->
-        <span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'"
-          >{{ item.name }}{{ item.zIndex }}</span
-        >
+        <span class="text" :class="item.w > item.h * 5 ? '' : 'rowText'">{{
+          item.name
+        }}</span>
         <span class="remove" @click.stop="removeItem(item.i)" v-if="showHeader"
           >x</span
         >
@@ -208,6 +210,8 @@ export default {
   },
   data() {
     return {
+      beforEle: null,
+      beforeTime: 0,
       W: 0, //当前屏幕的宽度
       H: 0, //当前屏幕的高度
       layoutHeight: 0,
@@ -285,6 +289,20 @@ export default {
     this.H = document.documentElement.clientWidth;
   },
   methods: {
+    // 双击
+    dbClickEvent(e, item) {
+      if (this.beforEle && this.beforEle != e.target) {
+        this.beforeTime = 0;
+        this.beforEle = null;
+      }
+      if (this.beforeTime && new Date().getTime() - this.beforeTime < 500) {
+        this.changeName(item);
+        this.beforeTime = 0;
+        this.beforEle = null;
+      }
+      this.beforeTime = new Date().getTime();
+      this.beforEle = e.target;
+    },
     // 选择楼层
     getFloor() {
       this.copyRoom.type = "floor";
@@ -544,7 +562,6 @@ export default {
           return data.y + data.h;
         })
       );
-      console.log(this.layoutData);
       // 设置layout高度,使页面可以滚动
       const maxTop = max * 30;
       this.layoutHeight = maxTop > this.H ? maxTop : this.H;
@@ -569,7 +586,6 @@ export default {
     resizedEvent(item, x, y, w, h) {
       item.w = (w / this.W) * 12;
       item.h = h / 30;
-      console.log(this.layoutData);
     },
     // 激活
     onActivated(item) {
@@ -815,7 +831,7 @@ export default {
   position: relative;
 }
 .north {
-  position: absolute;
+  position: fixed;
   display: inline-block;
   top: 1.5rem;
   right: 0.5rem;
@@ -986,4 +1002,7 @@ export default {
   font-size: 12px;
   transform: scale(0.8);
 }
+.vdr {
+  border-style: solid;
+}
 </style>