电井高亮

src/components/floorMap/index.vue

@@ -208,7 +208,7 @@ import { queryShops, queryAssetAll } from "@/api/equipmentList.js";
 import { STopologyParser } from "@/lib/parsers/STopologyParser";
 import { mapGetters, mapActions } from "vuex";
 import { SImageItem, SImageShowType, SGraphItem } from "@saga-web/graph/lib";
-import { SColor,SPoint } from "@saga-web/draw/lib";
+import { SColor, SPoint } from "@saga-web/draw/lib";
 import bus from "@/utils/bus.js";
 import { TipelineItem } from "../../lib/items/TipelineItem";
 import { SImageLegendItem } from "../../lib/items/SImageLegendItem";
@@ -255,7 +255,7 @@ export default {
       equipKey: 1, //设备弹窗使用key值,解决打开弹窗数据为上次弹窗的数据
       statusDisabled: ["已拆除"], //禁止跳转的设备状态
       roomKey: 1,
-      shopsList:[],//所有强电井对应的店铺
+      shopsList: [], //所有强电井对应的店铺
     };
   },
   props: {
@@ -287,7 +287,7 @@ export default {
      * events 鼠标事件
      * isShopToWell 是否是点击商铺促发电井高亮
      */
-    handleClickLegendItem(item, events,isShopToWell=false) {
+    handleClickLegendItem(item, events, isShopToWell = false) {
       this.tabData = { tableData: [], pointData: [] };
       this.equipIds = [];
       this.showBtnWell = false;
@@ -322,12 +322,13 @@ export default {
             this.eqLoading = false;
           });
         }
-        if(isShopToWell){
-            this.popoverPosition.top = `${e.clientY+70}px`;
-            this.popoverPosition.left = `${e.clientX}px`;
-        }else{
-          this.popoverPosition.top = `${e.clientY}px`;
-          this.popoverPosition.left = `${e.clientX}px`;
+        if (isShopToWell) {
+          this.popoverPosition.top = `${e.clientY + 70}px`;
+          this.popoverPosition.left = `${e.clientX+20}px`;
+        } else {
+            this.popoverPosition.top = `${e.clientY}px`;
+            this.popoverPosition.left = `${e.clientX+30}px`;
+
         }
 
         this.$nextTick(() => {
@@ -340,9 +341,9 @@ export default {
             //判断是否为电井
             this.showBtnWell = true;
           }
-          setTimeout(()=>{
+          setTimeout(() => {
             this.visible = true;
-          })
+          });
         });
       }
     },
@@ -357,11 +358,11 @@ export default {
         if (res.data && res.data.length) {
           for (let floor in res.data[0]) {
             shopsnumList = res.data[0][floor].map((obj) => {
-                const shoplist = obj.shopsnumList.split(",");
-                return Object.assign(obj, {
-                  shopList: shoplist,
-                });
+              const shoplist = obj.shopsnumList.split(",");
+              return Object.assign(obj, {
+                shopList: shoplist,
               });
+            });
           }
         }
         this.shopsList = shopsnumList;
@@ -582,7 +583,7 @@ export default {
               // t.name = t.data.Name
               t.name = "";
             }
-            t.connect('onMouseDown',this,this.clickMapPlace)
+            t.connect("onMouseDown", this, this.clickMapPlace);
           });
           this.fParser.wallList.forEach((t) => this.scene.addItem(t));
           this.fParser.virtualWallList.forEach((t) => this.scene.addItem(t));
@@ -596,43 +597,45 @@ export default {
       );
     },
     // 点击底图空间
-    clickMapPlace(item,e){
+    clickMapPlace(item, e) {
       let wellId = null;
-      let wellItem = null //;对应的强电井
-      if(item.data.Name){
-        this.shopsList.forEach(equip=>{
-          equip.shopList.forEach(shop=>{
-            if(item.data.Name == shop){
+      let wellItem = null; //;对应的强电井
+      if (item.data.Name) {
+        this.shopsList.forEach((equip) => {
+          equip.shopList.forEach((shop) => {
+            if (item.data.Name == shop) {
               wellId = equip.wellnum;
             }
-          })
-        })
+          });
+        });
       }
-      this.topologyParser.imageLegendList.forEach(eqItem=>{
-        eqItem.data.AttachObjectIds.forEach((objId)=>{
-            if(objId.id == wellId){
-              // 点击空间高亮
-                wellItem = eqItem
-            }
-        })
-      })
-     if(wellItem){
-        setTimeout(()=>{
-        this.clearHightLight();
-        item.highLightFlag = true;
-        // item.zOrder = 30;
-        wellItem.selected = true;
+      this.topologyParser.imageLegendList.forEach((eqItem) => {
+        eqItem.data.AttachObjectIds.forEach((objId) => {
+          if (objId.id == wellId) {
+            // 点击空间高亮
+            wellItem = eqItem;
+          }
+        });
+      });
+      if (wellItem) {
+        setTimeout(() => {
+          this.clearHightLight();
+          item.highLightFlag = true;
+          // item.zOrder = 30;
+          wellItem.selected = true;
 
-        const point =  this.view.mapFromScene(wellItem.x,wellItem.y)
-        const event = [{
-         clientX: point.x,
-         clientY :point.y,
-        }];
-        this.handleClickLegendItem(wellItem,event,true)
-        })
-     }else{
-         this.clearHightLight();
-     }
+          const point = this.view.mapFromScene(wellItem.x, wellItem.y);
+          const event = [
+            {
+              clientX: point.x,
+              clientY: point.y,
+            },
+          ];
+          this.handleClickLegendItem(wellItem, event, true);
+        });
+      } else {
+        this.clearHightLight();
+      }
     },
     readGraph() {
       this.readGroup(this.floorid)