YaolongHan 4 years ago
parent
commit
ddf8dc29c6
1 changed files with 40 additions and 12 deletions
  1. 40 12
      src/components/floorMap/index.vue

+ 40 - 12
src/components/floorMap/index.vue

@@ -8,6 +8,14 @@
       :height="canvasHeight"
       tabindex="0"
     ></canvas>
+    <!-- 搜索框(仅在供电系统显示) -->
+    <Select
+      class="serchShop"
+      width="300"
+      @change="serchShop"
+      :selectdata="shopList"
+      :placeholder="'搜索商铺名称或商铺编号'"
+    />
     <!-- 地图底部操作按钮 -->
     <div class="strip-bottom">
       <canvasFun
@@ -98,7 +106,9 @@
           </li>
         </ul>
         <!-- 提示文本 -->
-        <div class="wellTooltip" v-show="isclickShopName">该电井为{{isclickShopName}}商铺提供供电</div>
+        <div class="wellTooltip" v-show="isclickShopName">
+          该电井为{{ isclickShopName }}商铺提供供电
+        </div>
         <div style="text-align: right; margin-top: 10px">
           <el-button
             v-show="showBtnWell"
@@ -258,7 +268,8 @@ export default {
       statusDisabled: ["已拆除"], //禁止跳转的设备状态
       roomKey: 1,
       shopsList: [], //所有强电井对应的店铺
-      isclickShopName:'', //是否是点击商铺后电井高亮
+      isclickShopName: "", //是否是点击商铺后电井高亮
+      shopList: [],
     };
   },
   props: {
@@ -283,6 +294,17 @@ export default {
     ...mapGetters(["plazaId", "fmapID", "haveFengMap", "bunkObj"]),
   },
   methods: {
+    // 搜索商铺
+    serchShop(data) {
+      console.log('dagta',data)
+      this.shopList = [
+        { id: "test1", name: "选择项" },
+        { id: "test2", name: "单平米" },
+        { id: "test3", name: "下级分项" },
+        { id: "test4", name: "滑动平均滑动平均" },
+      ];
+      console.log(data);
+    },
     /**
      * 点击图标事件
      *
@@ -342,9 +364,9 @@ export default {
           ) {
             //判断是否为电井
             this.showBtnWell = true;
-            setTimeout(()=>{
-              item.selected = true
-            },300)
+            setTimeout(() => {
+              item.selected = true;
+            }, 300);
           }
           setTimeout(() => {
             this.visible = true;
@@ -636,7 +658,9 @@ export default {
               clientY: point.y,
             },
           ];
-          this.isclickShopName = item.name ? item.name + '—'+ item.data.Name :'xxx —'+ item.data.Name ;
+          this.isclickShopName = item.name
+            ? item.name + "—" + item.data.Name
+            : "xxx —" + item.data.Name;
           this.handleClickLegendItem(wellItem, event, true);
         });
       } else {
@@ -695,7 +719,6 @@ export default {
                 }
               });
             }
-            console.log(arr);
             this.$store.commit("SETSCPZTABLE", arr);
           }
           if (data.Data[0].Elements.Nodes.length > 0) {
@@ -874,8 +897,8 @@ export default {
     },
     // 清除电井关联商铺的高亮状态
     clearHightLight() {
-      this.isclickShopName = '';
-           // 所有电井置为 select = false
+      this.isclickShopName = "";
+      // 所有电井置为 select = false
       this.topologyParser.imageLegendList.forEach((eqItem) => {
         eqItem.selected = false;
       });
@@ -1069,6 +1092,11 @@ export default {
 #floor_base {
   position: relative;
   height: 100%;
+  .serchShop {
+    position: absolute;
+    top: 120px;
+    right: 340px;
+  }
   .fengMap {
     position: fixed;
     width: 100px;
@@ -1198,13 +1226,13 @@ a:hover {
     opacity: 0.5;
   }
 }
-.wellTooltip{
-  background: #FEEAD2;
+.wellTooltip {
+  background: #feead2;
   margin-left: 12px;
   height: 22px;
   line-height: 22px;
   display: inline-block;
   padding: 0px 12px 0 12px;
-  color: #B26206;
+  color: #b26206;
 }
 </style>