YaolongHan 4 anni fa
parent
commit
13e4d2c3d4

+ 126 - 9
src/components/edit/left_toolbar.vue

@@ -29,6 +29,7 @@
         v-on:mouseover="mouseoverActive(item)"
         v-for="(item,i) in systemChoice"
         :key="i"
+        @click="showDrawer(item)"
       >
         <div class="item">
           <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
@@ -41,10 +42,55 @@
       <a-icon type="ellipsis" />
       <span>选择原件</span>
     </div>
+    <!-- 打开弹窗 -->
+    <div class="drawer-model" id="drawer-model" v-show="visible">
+      <a-drawer
+        placement="left"
+        :closable="false"
+        :visible="visible"
+        :getContainer="ele"
+        :wrap-style="{ position: 'absolute' }"
+        @close="onClose"
+      >
+        <div class="drawer-model-body">
+          <div class="btn-list">
+            <a-button-group>
+              <a-button type="primary">绘制</a-button>
+              <a-button>点选</a-button>
+            </a-button-group>
+          </div>
+          <div class="list" v-show="activeItem ==1">
+            <div class="title">消防系统</div>
+            <ul class="example">
+              <li @click="getexampleItem">
+                <div class="item"></div>
+                <div class="text">防火风区</div>
+              </li>
+            </ul>
+          </div>
+          <div class="list" v-show="activeItem ==2">
+            <div class="title">消防系统</div>
+            <ul class="example">
+              <li @click="getexampleItem">
+                <div class="item-pip"></div>
+                <div class="text">防火风区</div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </a-drawer>
+    </div>
   </div>
 </template>
 <script>
 export default {
+  props: {
+    cmd: {
+      type: Number,
+      default: 0,
+      required: false
+    }
+  },
   data() {
     return {
       // 基础选择
@@ -102,16 +148,12 @@ export default {
           isHover: false, //是否hover
           name: "管线桥架" //类型
         }
-      ]
+      ],
+      visible: false,
+      ele: null,
+      activeItem: 1
     };
   },
-  props: {
-    cmd: {
-      type: Number,
-      default: 0,
-      required: false
-    }
-  },
   methods: {
     // 触入
     mouseoverActive(item) {
@@ -126,6 +168,25 @@ export default {
       });
       item.isChoice = true;
       this.$emit("toolActionClick", item);
+    },
+    showDrawer(item) {
+      console.log(item);
+      if (item.name == "管线桥架") {
+        this.activeItem = 2;
+      } else {
+        this.activeItem = 1;
+      }
+      this.visible = true;
+    },
+    onClose() {
+      this.visible = false;
+    },
+    getexampleItem() {
+      this.visible = false;
+      const item = {
+        cmd: 5
+      };
+      this.$emit("toolActionClick", item);
     }
   },
   watch: {
@@ -137,12 +198,15 @@ export default {
         }
       });
     }
+  },
+  mounted() {
+    this.ele = document.getElementById("drawer-model");
   }
 };
 </script>
 <style lang="less">
 #left_toolbar {
-  width: 68px;
+  min-width: 68px;
   height: 707px;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
@@ -260,5 +324,58 @@ export default {
     opacity: 0.89;
     color: #0091ff;
   }
+  .drawer-model {
+    position: absolute;
+    left: 70px;
+    top: 0;
+    width: 230px;
+    height: 100%;
+    .drawer-model-body {
+      width: 100%;
+      .btn-list {
+        margin: 0 auto;
+      }
+      .list {
+        .title {
+          font-size: 18px;
+          border-left: 4px solid #0091ff;
+          margin-top: 20px;
+        }
+        .example {
+          width: 100%;
+          display: flex;
+          li {
+            width: 72px;
+            height: 60px;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            cursor: pointer;
+            &:hover {
+              background: #e1f2ff;
+            }
+            .item {
+              width: 28px;
+              height: 16px;
+              background: #bbdfff;
+              border: #0091ff solid 1px;
+              margin: 0 auto;
+            }
+            .item-pip {
+              width: 28px;
+              height: 16px;
+              border: #0091ff solid 1px;
+              margin: 0 auto;
+              background: #fff;
+            }
+            .text {
+              font-size: 12px;
+              margin: 0 auto;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>

+ 13 - 0
src/components/edit/leftbar_components/areadraw.vue

@@ -0,0 +1,13 @@
+<template>
+    <div class="areadraw">
+
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="less">
+
+</style>

+ 31 - 4
src/components/mapClass/editScence.ts

@@ -31,10 +31,12 @@ export class EditScence extends SGraphScene {
             this.focusItem.cancelOperate();
             this.focusItem = null;
         }
-        this.view.update();
+        if (this.view) {
+            this.view.update();
+        }
     };
     /** 当前选中焦点Item */
-    focusItem: SGraphyItem: null = null;
+    focusItem: SGraphyItem | null = null;
 
     constructor() {
         super();
@@ -65,6 +67,25 @@ export class EditScence extends SGraphScene {
     }
 
     /**
+     * 增加折线item
+     */
+    addPolylineItem(event: SMouseEvent): boolean {
+        const point = new SPoint(event.x, event.y)
+        const item = new DirectRelationItem(null, [point]);
+        //设置状态
+        item.status = 3;
+        this.addItem(item);
+        // this.undoStack.push(new SGraphAddCommand(this, item));
+        this.grabItem = item;
+        this.focusItem = item;
+
+
+    //   const directRelationItem = new DirectRelationItem(null, data);
+    //   this.scene.addItem(directRelationItem);
+        return true
+    }
+
+    /**
      * 增加多边形item
      */
     addPolygonItem(event: SMouseEvent): void {
@@ -94,7 +115,7 @@ export class EditScence extends SGraphScene {
     }
 
     /**
-     * 增加管道
+     * 增加文字item
      */
     addTextItem(event: SMouseEvent): void {
         const item = new STextItem(null, '请在右侧属性栏输入文字!');
@@ -129,6 +150,7 @@ export class EditScence extends SGraphScene {
      * 对齐指定item
      */
     alignItem(type, itemList): void {
+
     }
 
     /**
@@ -172,7 +194,12 @@ export class EditScence extends SGraphScene {
                 break;
             case 3:
                 this.addImgItem(event)
-                // this.addPolygonItem(event);
+                break;
+            case 4:
+                this.addPolygonItem(event);
+                break;
+            case 5:
+                this.addPolylineItem(event);
                 break;
             default:
                 return super.onMouseDown(event);