debug

src/components/editClass/persagy-edit/PTopoScene.ts

@@ -181,6 +181,7 @@ export class PTopoScene extends SBaseEditScene {
      */
     getItem(item: SGraphEdit | null, event: SMouseEvent[]) {
     } // Function getItem()
+
     /**
      * 获取item (常用与场景外的调用F)
      * @param  event SMouseEvent 鼠标事件
@@ -191,6 +192,22 @@ export class PTopoScene extends SBaseEditScene {
     } // Function vueOnMouseDown()
 
     /**
+     * 设置 item 状态
+     */
+    setItemStatus() {
+        const List = this.selectContainer.itemList[0];
+        if (List && List instanceof SGraphEdit) {
+            if (List.status == SItemStatus.Normal) {
+                List.status = SItemStatus.Edit;
+                this.grabItem = List;
+            } else {
+                List.status = SItemStatus.Normal;
+                this.grabItem = null
+            }
+        }
+    } // Function setItemStatus()
+
+    /**
      * 获取item (常用与场景外的调用F)
      *
      * @params isAll 是否为全部item数据

src/components/editview/baseTopoEditer.vue

@@ -4,6 +4,7 @@
       v-show="showTooltip"
       class="topoTooltip-box"
       ref="topoTooltip"
+      @closeTooltip="showTooltip = false"
       :havItem="havItem"
     ></topoTooltip>
     <canvas
@@ -155,6 +156,10 @@ export default {
       bus.$on("setOrder", (val) => {
         this.scene.setOrder(val);
       });
+      // 设置实例status状态
+      bus.$on("setItemStatus", (val) => {
+        this.scene.setItemStatus();
+      });
     },
     // 读取拓扑图
     readtopoMsg() {

src/components/editview/leftToolBar/addBaseItem.vue

@@ -5,6 +5,7 @@
     <Input
       class="baseItemInput"
       :width="188"
+      placeholder="搜索元素名称"
       iconType="search"
       v-model="baseItemVal"
       @pressEnter="pressEnter"

src/components/editview/leftToolBar/equipmentList.vue

@@ -1,13 +1,53 @@
 <!-- 设备列表 -->
 <template>
   <div class="equip-list">
-    <Input
-      class="baseItemInput"
-      :width="188"
-      iconType="search"
-      v-model="baseItemVal"
-      @pressEnter="pressEnter"
-    />
+    <div class="clp">
+      <Input
+        class="baseItemInput"
+        :width="188"
+        iconType="search"
+        placeholder="搜索元素名称"
+        v-model="baseItemVal"
+        @pressEnter="pressEnter"
+      />
+      <Popover type="confirm" placement="bottom-center">
+        <template slot="content">
+          <div class="">
+            <div>
+              <span>分区类型</span>
+              <Cascader
+                multiple
+                allText="全部"
+                :data="cascaderData6"
+                showPanel
+                width="300"
+                @change="changeItem"
+                @confirm="changeItem"
+                v-model="abc"
+              ></Cascader>
+            </div>
+            <div>
+              <span>建筑类型</span>
+              <Cascader
+                multiple
+                allText="全部"
+                :data="cascaderData6"
+                showPanel
+                width="300"
+                @change="changeItem"
+                @confirm="changeItem"
+                v-model="abc"
+              ></Cascader>
+            </div>
+            <el-button class="reset" type="text">重置</el-button>
+          </div>
+        </template>
+        <span
+          @click="screen"
+          class="icon iconfont icon-shaixuan shaixuan"
+        ></span>
+      </Popover>
+    </div>
     <ul>
       <li @click="getEquipItem('lengganji.svg')">
         <div class="left">
@@ -54,7 +94,73 @@
 import { mapMutations, mapState } from "vuex";
 export default {
   data() {
-    return {};
+    return {
+      cascaderData6: [
+        {
+          title: "United Kingdom",
+          id: "id1",
+          children: [
+            { id: "id2", title: "London" },
+            { id: "id3", title: "Edinburgh" },
+            { id: "id4", title: "Cardiff" },
+            { id: "id5", title: "Birmingham" },
+            { id: "id6", title: "Liverpool" },
+            { id: "id7", title: "Oxford" },
+            { id: "id8", title: "Plymouth" },
+          ],
+        },
+        {
+          title: "AMERICAN",
+          id: "id9",
+          children: [
+            { id: "id10", title: "Chicago" },
+            { id: "id11", title: "Philadelphia" },
+            { id: "id12", title: "Boston" },
+            { id: "id13", title: "Houston" },
+            { id: "id14", title: "Atlanta" },
+            { id: "id15", title: "San Francisco" },
+          ],
+        },
+        {
+          title: "CHINA",
+          id: "id16",
+          children: [
+            { id: "id17", title: "BeiJing" },
+            { id: "id18", title: "ShangHAI" },
+            {
+              title: "GuiYang",
+              id: "id19",
+              children: [
+                { id: "id20", title: "Qingyan" },
+                { id: "id21", title: "Guian" },
+              ],
+            },
+            { id: "id22", title: "ZunYi" },
+          ],
+        },
+        {
+          title: "韩国",
+          id: "id23",
+          children: [
+            { id: "id24", title: "首尔" },
+            { id: "id25", title: "仁川" },
+            { id: "id26", title: "釜山" },
+            {
+              id: "id27",
+              title: "蔚山",
+              children: [
+                { id: "id10", title: "Chicago" },
+                { id: "id11", title: "Philadelphia" },
+                { id: "id12", title: "Boston" },
+                { id: "id13", title: "Houston" },
+                { id: "id14", title: "Atlanta" },
+                { id: "id15", title: "San Francisco" },
+              ],
+            },
+          ],
+        },
+      ],
+    };
   },
   methods: {
     ...mapMutations(["SETCHOICELEHEND", "SETLEGENDOBJ"]),
@@ -71,6 +177,8 @@ export default {
       const cmd = "EditEuqipment";
       this.SETCHOICELEHEND(cmd);
     },
+    // 筛选
+    screen() {},
   },
   computed: {
     ...mapState(["editCmd"]),
@@ -88,6 +196,15 @@ li {
   width: 100%;
   height: 100%;
   position: relative;
+  .clp {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-top: 12px;
+    .shaixuan {
+      cursor: pointer;
+    }
+  }
   ul {
     li {
       width: 100%;
@@ -135,4 +252,9 @@ li {
     }
   }
 }
+.reset{
+  position: absolute;
+  bottom: 16px;
+  left: 24px;
+}
 </style>

src/components/editview/rightPropertyBar/property.vue

@@ -76,7 +76,6 @@ export default {
   },
   methods: {
     emitChoice(itemList) {
-      console.log("itemList", itemList);
       if (itemList.length == 1) {
         this.itemType = itemList[0].data.properties.type
           ? itemList[0].data.properties.type

src/components/editview/topToolBar.vue

@@ -58,7 +58,7 @@
           <span class="icon iconfont">&#xe66a;</span>
           <span>置底</span>
         </li>
-        <li>
+        <li @click="setLock()">
           <i :class="isLock ? 'el-icon-lock' : 'el-icon-unlock'" />
           <span>{{ !isLock ? "解锁" : "锁定" }}</span>
         </li>
@@ -75,6 +75,7 @@ export default {
   data() {
     return {
       isLock: false,
+      itemList: null,
     };
   },
   methods: {
@@ -101,6 +102,27 @@ export default {
     setOrder(val) {
       bus.$emit("setOrder", val);
     },
+    // 设置锁定
+    setLock() {
+      this.isLock = !this.isLock;
+      if (!this.itemList) return;
+      this.itemList.forEach((item) => {
+        item.moveable = this.isLock;
+      });
+    },
+    emitChoice(itemList) {
+      if (!itemList.length) {
+        this.isLock = false;
+        this.itemList = null;
+      } else {
+        this.isLock = itemList[0].moveable;
+        this.itemList = itemList;
+      }
+    },
+  },
+  mounted() {
+    bus.$on("emitChoice", this.emitChoice);
+    bus.$on("tooltipLock", this.setLock);
   },
 };
 </script>

src/components/editview/topoTooltip.vue

@@ -3,29 +3,74 @@
   <div class="topo_tooltip">
     <div v-if="havItem" class="tooltip-card">
       <ul>
-        <li>编辑</li>
-        <li>锁定</li>
-        <li>置顶</li>
-        <li>置底</li>
-        <li>删除</li>
+        <li @click="editItem">编辑</li>
+        <li @click="setLock">锁定</li>
+        <li @click="toTop">置顶</li>
+        <li @click="toBottom">置底</li>
+        <li @click="deleteItem">删除</li>
       </ul>
     </div>
     <div v-else class="tooltip-card">
       <ul>
-        <li>保存</li>
-        <li>发布</li>
-        <li>下载</li>
+        <li @click="saveGraph">保存</li>
+        <li @click="publishGraph">发布</li>
+        <li @click="downPng">下载</li>
       </ul>
     </div>
   </div>
 </template>
 <script>
+import { SItemStatus } from "@persagy-web/big";
+import bus from "@/bus/bus";
 export default {
   props: ["havItem"],
   name: "topoTooltip",
   data() {
     return {};
   },
+  methods: {
+    // 编辑图例
+    editItem() {
+      bus.$emit("setItemStatus");
+      this.closetooltip();
+    },
+    setLock() {
+      bus.$emit("tooltipLock");
+      this.closetooltip();
+    },
+    // 置顶
+    toTop() {
+      bus.$emit("setOrder", "Top");
+      this.closetooltip();
+    },
+    // 置底
+    toBottom() {
+      bus.$emit("setOrder", "Bottom");
+      this.closetooltip();
+    },
+    // 删除
+    deleteItem() {
+      bus.$emit("deleteItem");
+      this.closetooltip();
+    },
+    // 保存图
+    saveGraph() {
+      this.closetooltip();
+    },
+    // 发布图
+    publishGraph() {
+      this.closetooltip();
+    },
+    // 下载
+    downPng() {
+      this.closetooltip();
+    },
+    // 关闭窗口
+    closetooltip() {
+      this.$emit("closeTooltip");
+    },
+  },
+  mounted() {},
 };
 </script>
 <style lang="less" scoped>

src/main.ts

@@ -6,13 +6,14 @@ import './assets/font/iconfont.css';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);
-import { Input, Modal,Cascader} from 'meri-design';
+import { Input, Modal, Cascader, Popover } from 'meri-design';
 import { Select } from 'ant-design-vue';
 // 按需引入公共组件
 Vue.use(Input)
 Vue.use(Select)
 Vue.use(Modal)
 Vue.use(Cascader)
+Vue.use(Popover)
 
 Vue.config.productionTip = false;
 new Vue({