Procházet zdrojové kódy

feat:完成左侧导航栏得交互

YaolongHan před 4 roky
rodič
revize
355c8d71fc

+ 6 - 5
src/components/baseEditer.vue

@@ -1,7 +1,7 @@
 <template>
-  <div id="baseEditer">
+  <div id="baseEditer" ref="graphy">
     <div id="fengMap"></div>
-    <div class="canvas-container" ref="graphy">
+    <div class="canvas-container">
       <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
     </div>
   </div>
@@ -35,7 +35,7 @@ export default {
   },
   mounted() {
     this.canvasWidth = this.$refs.graphy.offsetWidth;
-    this.canvasHeight = this.$refs.graphy.offsetHeight;
+    this.canvasHeight = this.$refs.graphy.offsetHeight-10;
     this.init();
   },
   methods: {
@@ -43,7 +43,7 @@ export default {
       document.getElementById(`canvas`).focus();
       this.clearGraphy();
       this.scene = new EditScence();
-      // 选择绑定选额item事件
+      // // 选择绑定选额item事件
       this.scene.selectContainer.connect("listChange", this, this.listChange);
       this.fmap = new SFengParser(
         "fengMap",
@@ -103,9 +103,10 @@ export default {
 </script>
 <style lang="less" scoped>
 #baseEditer {
-  background: #ccc;
+  background: #F7F9FA;
   width: 100%;
   height: 100%;
+  // overflow: hidden;
   // position: relative;
   #fengMap {
     position: absolute;

+ 96 - 45
src/components/edit/left_toolbar.vue

@@ -30,6 +30,7 @@
         v-for="(item,i) in systemChoice"
         @click="showDrawer(item)"
         :key="i"
+        v-bind:class="{ actives:item.isChoice}"
       >
         <div class="item">
           <img v-show="!item.isHover" :src="require(`./../../assets/images/${item.img}`)" alt />
@@ -59,43 +60,45 @@
       <span>选择原件</span>
     </div>
     <!-- 打开弹窗 -->
-    <div class="drawer-model" id="drawer-model" v-show="visible">
-      <a-drawer
-        placement="left"
-        :closable="false"
-        :visible="visible"
-        :getContainer="false"
-        :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>
+    <transition name="fade">
+      <div class="drawer-model" id="drawer-model" v-show="visible">
+        <a-drawer
+          placement="left"
+          :closable="false"
+          :visible="visible"
+          :wrap-style="{ position: 'absolute',}"
+          @close="onClose"
+          :getContainer="false"
+        >
+          <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>
-          <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>
+        </a-drawer>
+      </div>
+    </transition>
   </div>
 </template>
 <script>
@@ -150,23 +153,25 @@ export default {
           img: "t-position.png", //logo
           hoverImg: "t-position-hover.png", //hoverlogo
           isHover: false, //是否hover
+          isChoice: false,
           name: "位置区域" //类型
         },
         {
           img: "t-equipment.png", //logo
           hoverImg: "t-equipment-hover.png", //hoverlogo
           isHover: false, //是否hover
+          isChoice: false,
           name: "设备设施" //类型
         },
         {
           img: "t-papeline.png", //logo
           hoverImg: "t-papeline-hover.png", //hoverlogo
           isHover: false, //是否hover
+          isChoice: false,
           name: "管线桥架" //类型
         }
       ],
       visible: false,
-      ele: false,
       activeItem: 1,
       //提取
       extractChoice: [
@@ -188,28 +193,68 @@ export default {
       item.isHover = false;
     },
     toolActionClick(item) {
+      this.visible = false;
       this.baseChoice.forEach(item => {
         item.isChoice = false;
       });
+      this.systemChoice.forEach(a => {
+        a.isChoice = false;
+      });
       item.isChoice = true;
       this.$emit("setCmd", item.cmd);
     },
     showDrawer(item) {
-      if (item.name == "管线桥架") {
-        this.activeItem = 2;
+      if (item.isChoice) {
+        this.systemChoice.forEach(a => {
+          a.isChoice = false;
+        });
+        this.visible = false;
       } else {
-        this.activeItem = 1;
+        this.systemChoice.forEach(a => {
+          a.isChoice = false;
+        });
+        item.isChoice = true;
+        if (this.visible) {
+          this.visible = false;
+          setTimeout(() => {
+            if (item.name == "管线桥架") {
+              this.activeItem = 2;
+            } else {
+              this.activeItem = 1;
+            }
+            this.visible = true;
+          }, 300);
+        } else {
+          if (item.name == "管线桥架") {
+            this.activeItem = 2;
+          } else {
+            this.activeItem = 1;
+          }
+          this.visible = true;
+        }
       }
-      this.visible = true;
     },
     onClose() {
       this.visible = false;
+      this.systemChoice.forEach(a => {
+        a.isChoice = false;
+      });
     },
     getexampleItem() {
       this.visible = false;
-      const item = {
+      let item = {
         cmd: 5
       };
+      if (this.activeItem == 1) {
+        item = {
+          cmd: 5
+        };
+      } else {
+        item = {
+          cmd: 4
+        };
+      }
+
       this.$emit("toolActionClick", item);
     }
   },
@@ -224,14 +269,15 @@ export default {
     }
   },
   mounted() {
-    this.ele = document.getElementById("drawer-model");
+    const ele = document.getElementById("drawer-model");
+    ele.style.width = document.body.offsetWidth - 70 + "px";
   }
 };
 </script>
 <style lang="less">
 #left_toolbar {
   min-width: 68px;
-  height: 707px;
+  height: 100%;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.11);
   padding: 0 0 12px 0;
@@ -349,11 +395,16 @@ export default {
     opacity: 0.89;
     color: #0091ff;
   }
+  .fade-enter,
+  .fade-leave-to {
+    transition: all 0.3s ease;
+  }
   .drawer-model {
     position: absolute;
     left: 70px;
     top: 0;
-    width: 230px;
+    overflow: hidden;
+    width: 100%;
     height: 100%;
     .drawer-model-body {
       width: 100%;

+ 1 - 1
src/components/edit/right_toolbar.vue

@@ -32,7 +32,7 @@
               <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
             </li>
           </ul>
-          <attrSelect/>
+          <attrSelect type="外观" />
         </div>
       </a-tab-pane>
       <a-tab-pane key="2" tab="元素" force-render>

+ 10 - 10
src/components/edit/top_toolbar.vue

@@ -13,11 +13,11 @@
         <!-- <li>
           <a-icon type="edit" />
           <span>撤销</span>
-        </li> -->
+        </li>-->
         <!-- <li>
           <a-icon type="edit" />
           <span>重做</span>
-        </li> -->
+        </li>-->
         <li>缩放窗口</li>
         <li>
           <img class="lock" :src="require(`./../../assets/images/t-lock.png`)" alt />
@@ -34,7 +34,7 @@
         <li>
           <a-icon type="edit" />
           <span>打散</span>
-        </li> -->
+        </li>-->
         <li>
           <a-icon type="edit" />
           <span>解锁</span>
@@ -46,7 +46,7 @@
         <!-- <li>
           <a-icon type="edit" />
           <span>解锁</span>
-        </li> -->
+        </li>-->
       </ul>
     </div>
     <div class="btn-list">
@@ -54,10 +54,10 @@
         <a-icon type="delete" />
         <span>发布</span>
       </div>
-<!--      <div class="btn-list-item">-->
-<!--        <a-icon type="delete" />-->
-<!--        <span>下载</span>-->
-<!--      </div>-->
+      <!--      <div class="btn-list-item">-->
+      <!--        <a-icon type="delete" />-->
+      <!--        <span>下载</span>-->
+      <!--      </div>-->
     </div>
   </div>
 </template>
@@ -79,7 +79,7 @@ li {
   width: 100%;
   height: 60px;
   background: rgba(255, 255, 255, 1);
-  box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -102,7 +102,7 @@ li {
         align-items: center;
         text-align: center;
         cursor: pointer;
-        img{
+        img {
           width: 16px;
           height: 16px;
         }

+ 1 - 3
src/components/mapClass/editScence.ts

@@ -123,7 +123,6 @@ export class EditScence extends SGraphScene {
         this.addItem(item);
         this.grabItem == null
         this.cmd = 0;
-        item.zOrder = 400;
     }
 
     /**
@@ -207,8 +206,7 @@ export class EditScence extends SGraphScene {
                 this.addPolygonItem(event);
                 break;
             case 5:
-                // this.addPolylineItem(event);
-                this.addPolygonItem(event);
+                this.addPolylineItem(event);
                 break;
             default:
                 return super.onMouseDown(event);

+ 2 - 2
src/views/editer.vue

@@ -69,7 +69,7 @@ export default {
     width: 100%;
     height: 60px;
     background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
+    box-shadow: 2px  2px 12px 0 rgba(0,0,0,.1);
   }
   .content {
     width: 100%;
@@ -78,7 +78,6 @@ export default {
     position: relative;
     .baseEdit {
       flex: 1;
-      // position: relative;
     }
     .right_toolbar {
       height: 100%;
@@ -87,6 +86,7 @@ export default {
     .left_toolbar {
       position: absolute;
       height: 100%;
+      z-index: 1001;
       /*left: 12px;*/
       /*top: 12px;*/
     }