修复监听vuex导致buidingid与deptId无法实时响应问题

src/store/modules/xiaoqu.js

@@ -1,3 +1,5 @@
+import { listDept } from "@/api/system/dept.js";
+import { listBuilding } from "@/api/taicangpop/building.js";
 const xiaoqu = {
   state: {
     //页面接口参数
@@ -21,10 +23,10 @@ const xiaoqu = {
         state.queryParmas[key] = query[key];
       }
 
-      if (query.buildingid) {
-        state.panel.bottomPanel = true;
-        return;
-      }
+      // if (query.buildingid) {
+      //   state.panel.bottomPanel = true;
+      //   return;
+      // }
       if (
         query.color ||
         query.type ||
@@ -68,9 +70,36 @@ const xiaoqu = {
         isx: undefined,
         isj: undefined,
       };
+      console.log(state.queryParmas);
+    },
+  },
+  actions: {
+    async GetBuildingId({ commit, state }, queryParams) {
+      let deptData = await getDeptId({
+        xiaoquId: state.queryParmas.xiaoquId,
+        deptName: queryParams.deptName,
+      });
+      let buildingData = await getBuildingId({
+        name: queryParams.name,
+        deptId: deptData.deptId,
+      });
+      commit("CHANGE_QUERY", {
+        buildingid: buildingData.id,
+        deptId: deptData.deptId,
+      });
     },
   },
-  actions: {},
 };
 
+// 获取苑id
+async function getDeptId(query) {
+  let res = await listDept(query);
+  return res.data[0];
+}
+//获取楼栋id
+async function getBuildingId(query) {
+  let res = await listBuilding(query);
+  return res.rows[0];
+}
+
 export default xiaoqu;

src/views/components/xiaoqu/bottomList.vue

@@ -134,10 +134,12 @@ export default {
   },
   methods: {
     handleChange(newValue) {
+      console.log("sssss");
       this.reset();
-      delete this.queryParamsXiaoqu.buildingid;
-      delete this.queryParamsXiaoqu.deptId;
+
       this.queryParams = { ...this.queryParams, ...this.queryParamsXiaoqu };
+      this.queryParams.buildingid = undefined;
+      this.queryParams.deptId = undefined;
       this.disabled = false;
       this.load();
     },

src/views/components/xiaoqu/map/index.vue

@@ -9,8 +9,7 @@ import configJson from "./map-config.json";
 import { mapGetters } from "vuex";
 import garden from "./garden.json";
 import MarsMap from "@/components/mars-map";
-import { listDept } from "@/api/system/dept.js";
-import { listBuilding } from "@/api/taicangpop/building.js";
+
 export default {
   props: {
     xiaoquId: {
@@ -296,12 +295,12 @@ export default {
       return { yuanName, buildingNumber, buildingColor, image };
     },
     //平面 + 图标
-    addbuildingLayer() {
+    async addbuildingLayer() {
       let _this = this;
-      mars3d.Util.fetchJson({
+      let res = await mars3d.Util.fetchJson({
         url:
           this.configUrl + `lib/geoJson/xiaoqu/building${this.xiaoquId}.json`,
-      }).then((res) => {
+      });
       const arr = mars3d.Util.geoJsonToGraphics(res);
       arr.map((item, index) => {
         const { yuanName, buildingNumber, buildingColor, image } =
@@ -354,16 +353,11 @@ export default {
             floorNum: item.attr["层数"],
           },
         });
-          point.on(mars3d.EventType.click, async function (e) {
+        point.on(mars3d.EventType.click, function (e) {
           let buildingItem = _this.mapLayer.plane.getGraphicByAttr(e.id);
-            if (
-              _this.mapLayer.tiles3dLayer &&
-              _this.mapLayer.tiles3dLayer.show
-            ) {
+          if (_this.mapLayer.tiles3dLayer && _this.mapLayer.tiles3dLayer.show) {
             const geojson = buildingItem.toGeoJSON();
-              _this.map
-                .getLayerById("dth")
-                .loadGeoJSON(geojson, { clear: true });
+            _this.map.getLayerById("dth").loadGeoJSON(geojson, { clear: true });
           } else {
             buildingItem.openHighlight({
               color: "#FFA200",
@@ -373,24 +367,17 @@ export default {
               outlineWidth: 2,
             });
           }
-            let deptData = await _this.getDeptId({
-              xiaoquId: _this.xiaoquId,
+          // _this.$store.commit("CHANGE_QUERY", {
+          //   buildingid: 20,
+          //   deptId: 30,
+          // });
+          _this.$store.dispatch("GetBuildingId", {
             deptName: e.target.attr.yuanName,
-            });
-
-            let buildingData = await _this.getBuildingId({
             name: e.target.attr.buildingNumber + "幢",
-              deptId: deptData.deptId,
           });
-
-            _this.$store.commit("CHANGE_QUERY", {
-              buildingid: buildingData.id,
-              deptId: deptData.deptId,
-            }); //存储全局参数
         });
         this.mapLayer.planePoint.addGraphic(point);
       });
-      });
     },
 
     //小区网格面
@@ -515,17 +502,6 @@ export default {
       this.map.addLayer(this.geoJsonLayerDTH);
     },
 
-    // 获取苑id
-    async getDeptId(query) {
-      let res = await listDept(query);
-      return res.data[0];
-    },
-    //获取楼栋id
-    async getBuildingId(query) {
-      let res = await listBuilding(query);
-      return res.rows[0];
-    },
-
     // handlezs() {
     //   // this.mapLayer.zhengsheLayer.show = true;
     //   this.addZhengsheLayer();