Bläddra i källkod

左侧属性框的联动

YaolongHan 4 år sedan
förälder
incheckning
2a3dc3774d
1 ändrade filer med 105 tillägg och 90 borttagningar
  1. 105 90
      src/components/edit/left_toolbar.vue

+ 105 - 90
src/components/edit/left_toolbar.vue

@@ -56,9 +56,13 @@
       </li>
     </ul>
 
-    <a-popover trigger="click" placement="rightBottom" v-model="drawerVisible" >
-      <template slot="content" >
-        <itemTree @getSelectId="getSelectId" :drawerVisible="drawerVisible" :categoryIdS="categoryIdS"  ></itemTree>
+    <a-popover trigger="click" placement="rightBottom" v-model="drawerVisible">
+      <template slot="content">
+        <itemTree
+          @getSelectId="getSelectId"
+          :drawerVisible="drawerVisible"
+          :categoryIdS="categoryIdS"
+        ></itemTree>
       </template>
       <div class="bottom-item">
         <a-icon type="ellipsis" />
@@ -69,7 +73,6 @@
     <!-- 打开弹窗 -->
     <transition name="fade">
       <div class="drawer-model" id="drawer-model" v-show="visible">
-
         <a-drawer
           placement="left"
           :closable="false"
@@ -80,55 +83,56 @@
           :mask="false"
         >
           <a-spin :spinning="spinning">
-          <div class="drawer-model-body" v-if="!isExtract">
-            <div class="btn-list">
-              <a-radio-group v-show="showDrawerItem.type == 'Zone'" default-value="draw" button-style="solid" @change="changeDrawType">
-                <a-radio-button value="draw">
-                  绘制
-                </a-radio-button>
-                <a-radio-button value="select">
-                  点选
-                </a-radio-button>
-              </a-radio-group>
-            </div>
-            <div class="list" v-for="(item,index) in itemList" :key="index">
-              <div class="title">{{item.Name}}</div>
-              <ul class="example">
-                <li
-                  @click="getexampleItem(items)"
-                  v-for="(items,indexs) in item.GraphElements"
-                  :key="indexs"
+            <div class="drawer-model-body" v-if="!isExtract">
+              <div class="btn-list">
+                <a-radio-group
+                  v-show="showDrawerItem.type == 'Zone'"
+                  default-value="draw"
+                  button-style="solid"
+                  @change="changeDrawType"
                 >
-                  <img
-                    :class="['item',`item-${items.Type}`]"
-                    :src="'/serve/topology-wanda/Picture/query/'+ items.Url"
-                    alt
-                  />
-                  <div class="text">{{items.Name}}</div>
-                </li>
-              </ul>
+                  <a-radio-button value="draw">绘制</a-radio-button>
+                  <a-radio-button value="select">点选</a-radio-button>
+                </a-radio-group>
+              </div>
+              <div class="list" v-for="(item,index) in itemList" :key="index">
+                <div class="title">{{item.Name}}</div>
+                <ul class="example">
+                  <li
+                    @click="getexampleItem(items,indexs)"
+                    v-for="(items,indexs) in item.GraphElements"
+                    :key="indexs"
+                    :class="[activeIndex==indexs?'active-li':'']"
+                  >
+                    <img
+                      :class="['item',`item-${items.Type}`]"
+                      :src="'/serve/topology-wanda/Picture/query/'+ items.Url"
+                      alt
+                    />
+                    <div class="text">{{items.Name}}</div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div v-else class="drawer-model-body drawer-model-body-extract">
+              <a-table :columns="columns" :data-source="data" size="small" :pagination="false">
+                <a-tag
+                  slot="address"
+                  slot-scope="text, record, index"
+                  :color="'geekblue'"
+                  @click="pickUp(text, record, index)"
+                >{{ text }}</a-tag>
+              </a-table>
             </div>
-          </div>
-          <div v-else class="drawer-model-body drawer-model-body-extract">
-            <a-table :columns="columns" :data-source="data" size="small" :pagination="false">
-              <a-tag
-                slot="address"
-                slot-scope="text, record, index"
-                :color="'geekblue'"
-                @click="pickUp(text, record, index)"
-              >{{ text }}</a-tag>
-            </a-table>
-          </div>
           </a-spin>
         </a-drawer>
-
       </div>
     </transition>
   </div>
 </template>
 <script>
 import itemTree from "./leftbar_components/itemTree";
-import {graphElementGroup} from "@/api/editer.js";
+import { graphElementGroup } from "@/api/editer.js";
 import bus from "@/bus";
 import { queryGroup } from "@/api/editer.js";
 import { mapState, mapActions } from "vuex";
@@ -184,7 +188,7 @@ export default {
         {
           img: "t-select.png", //logo
           hoverImg: "t-select-hover.png", //hoverlogo
-          isHover: true, //是否hover
+          isHover: false, //是否hover
           isChoice: true,
           name: "选择", //类型
           type: "choice"
@@ -257,10 +261,10 @@ export default {
       itemList: [], //图例数组
       categoryIdS: [],
       categoryId: "",
-      activeIndex: -1,
-      drawerVisible:false,
-      spinning:false,
-      showDrawerItem:{}
+      activeIndex: -1, //选中的图例
+      drawerVisible: false,
+      spinning: false,
+      showDrawerItem: {},
     };
   },
   computed: {
@@ -277,39 +281,32 @@ export default {
     mouseoutActive(item) {
       item.isHover = false;
     },
-    toolActionClick(item) {
+    toolActionClick(items) {
       this.visible = false;
-      this.baseChoice.forEach(item => {
+      this.baseChoice.map(item => {
         item.isChoice = false;
       });
-      this.systemChoice.forEach(a => {
+      this.systemChoice.map(a => {
         a.isChoice = false;
       });
-      item.isChoice = true;
-      this.$emit("setCmdType", item.type);
+      items.isChoice = true;
+      this.$emit("setCmdType", items.type);
     },
     showDrawer(item) {
       this.showDrawerItem = item;
-      console.log('showDrawerItem',this.showDrawerItem)
       this.isExtract = false;
       if (item.isChoice) {
-        this.systemChoice.forEach(a => {
-          a.isChoice = false;
-        });
+        item.isChoice = false;
         this.visible = false;
       } else {
-        this.systemChoice.forEach(a => {
+        this.baseChoice.map(a => {
+          a.isChoice = false;
+        });
+        this.systemChoice.map(a => {
           a.isChoice = false;
         });
+        this.visible = true;
         item.isChoice = true;
-        if (this.visible) {
-          this.visible = false;
-          setTimeout(() => {
-            this.visible = true;
-          }, 300);
-        } else {
-          this.visible = true;
-        }
         // 打开侧边框
         // 接口请求
         this.itemList = [];
@@ -319,7 +316,7 @@ export default {
           Type: item.type
         };
 
-        queryGroup(data).then(res=>{
+        queryGroup(data).then(res => {
           this.itemList = res.Data;
         });
         const arr = {
@@ -329,16 +326,14 @@ export default {
 
         graphElementGroup(arr).then(res => {
           this.spinning = false;
-          res.Data.map(item=>{
+          res.Data.map(item => {
             this.itemList.push(item);
-          })
-
+          });
         });
       }
-      console.log(this.itemList);
     },
-    getSelectId(data){
-      this.categoryIdS=data;
+    getSelectId(data) {
+      this.categoryIdS = data;
       this.drawerVisible = false;
     },
     onClose() {
@@ -347,14 +342,32 @@ export default {
         a.isChoice = false;
       });
     },
-    getexampleItem(item) {
+    getexampleItem(item,index) {
+      this.activeIndex = index;
       this.$emit("toolActionClick", item);
     },
     // 提取元素
     extractItem() {
       // 打开提取元素列表
+      let isChoice = false;
+      this.baseChoice.map(item => {
+        if (item.isChoice) {
+          isChoice = true;
+        }
+        item.isChoice = false;
+      });
+      this.systemChoice.map(a => {
+        if (a.isChoice) {
+          isChoice = true;
+        }
+        a.isChoice = false;
+      });
       this.isExtract = true;
-      this.visible = !this.visible;
+      if (isChoice) {
+        this.visible = true;
+      } else {
+        this.visible = !this.visible;
+      }
       bus.$emit("extractItem");
     },
     getBus() {
@@ -370,20 +383,23 @@ export default {
       bus.$emit("exportByKey", record);
     },
     changeDrawType(v) {
-      bus.$emit('changeDrawType', v.target.value)
+      bus.$emit("changeDrawType", v.target.value);
     }
   },
   watch: {
     cmdType(cmd) {
       this.baseChoice.forEach(item => {
         item.isChoice = false;
-        if (item.cmd == cmd) {
+        if (item.type == cmd) {
           item.isChoice = true;
         }
       });
+      if(cmd == "choice"){
+           this.activeIndex = -1;
+      }
     },
-    drawerVisible(val){
-      if(this.visible){
+    drawerVisible(val) {
+      if (this.visible) {
         this.showDrawer(this.showDrawerItem);
       }
     }
@@ -412,21 +428,20 @@ export default {
       obj[arr[0]] = arr[1];
     });
     this.categoryId = obj.categoryId;
-    this.categoryIdS.push(obj.categoryId)
+    this.categoryIdS.push(obj.categoryId);
   }
 };
 </script>
 <style lang="less" scoped>
-  /deep/ .ant-spin-nested-loading{
-    height: 100% !important;
-    .ant-spin-container{
-      height: 100% !important;
-
-    }
-  }
-  /deep/ .ant-drawer-body{
+/deep/ .ant-spin-nested-loading {
+  height: 100% !important;
+  .ant-spin-container {
     height: 100% !important;
   }
+}
+/deep/ .ant-drawer-body {
+  height: 100% !important;
+}
 #left_toolbar {
   min-width: 68px;
   height: 100%;
@@ -611,8 +626,8 @@ export default {
               margin: 0 auto;
             }
           }
-          .active-li{
-              background: #e1f2ff;
+          .active-li {
+            background: #e1f2ff;
           }
         }
       }