Pārlūkot izejas kodu

跳死搜索栏

YaolongHan 4 gadi atpakaļ
vecāks
revīzija
e051074913
1 mainītis faili ar 44 papildinājumiem un 15 dzēšanām
  1. 44 15
      src/components/floorMap/index.vue

+ 44 - 15
src/components/floorMap/index.vue

@@ -9,13 +9,25 @@
       tabindex="0"
     ></canvas>
     <!-- 搜索框(仅在供电系统显示) -->
-    <Select
+
+    <el-select
       class="serchShop"
-      width="300"
-      @change="serchShop"
-      :selectdata="shopList"
-      :placeholder="'搜索商铺名称或商铺编号'"
-    />
+      v-model="serchmsg"
+      multiple
+      filterable
+      remote
+      reserve-keyword
+      placeholder="搜索商铺名称或商铺编号"
+      :remote-method="serchShop"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      >
+      </el-option>
+    </el-select>
     <!-- 地图底部操作按钮 -->
     <div class="strip-bottom">
       <canvasFun
@@ -270,6 +282,9 @@ export default {
       shopsList: [], //所有强电井对应的店铺
       isclickShopName: "", //是否是点击商铺后电井高亮
       shopList: [],
+      serchmsg: "", //搜索信息
+      options: [],
+      serchlist: [], //搜索list
     };
   },
   props: {
@@ -294,16 +309,19 @@ 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);
+    serchShop(query) {
+      if (query !== "") {
+        setTimeout(() => {
+          this.options = this.serchlist.filter((item) => {
+            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
+          });
+          console.log("query", this.options);
+        }, 200);
+      } else {
+        this.options = [];
+      }
     },
     /**
      * 点击图标事件
@@ -599,6 +617,7 @@ export default {
             return;
           }
           this.fParser = new SFloorParser(null);
+          this.serchlist = [];
           this.fParser.parseData(res);
           this.fParser.spaceList.forEach((t) => {
             this.scene.addItem(t);
@@ -611,6 +630,16 @@ export default {
               t.name = "";
             }
             t.connect("onMouseDown", this, this.clickMapPlace);
+            // 搜索列表
+            // 列表名称
+            const shopName = t.name
+              ? t.name + "—" + t.data.Name
+              : "xxx —" + t.data.Name;
+            this.serchlist.push({
+              item: t,
+              value: shopName,
+              label: shopName,
+            });
           });
           this.fParser.wallList.forEach((t) => this.scene.addItem(t));
           this.fParser.virtualWallList.forEach((t) => this.scene.addItem(t));