更改人房信息统计

src/views/modules/visual/basicinfo/basicInfoMain.vue

@@ -34,7 +34,11 @@
         v-show="orgLevel !== 'people' && orgLevel !== 'neighborHood'"
         class="div_map"
       >
-        <grid-map />
+        <grid-map
+          v-if="orgData.id"
+          @clickAgency="clickAgencyItem"
+          :srcGridData="orgData"
+        />
         <div class="m-sidebar">
           <div class="wrap" :class="[{ 'wrap-hidden': !showAgencyList }]">
             <div @click="hideAgencyList" class="arrow_tip">
@@ -76,21 +80,6 @@
       </div>
 
       <div class="div_data">
-        <!-- <div @click="handleSearch"
-             class="div_search">
-          <div class="div_search_left">
-            <i slot="prefix"
-               class="icon">
-              <img src="../../../../assets/img/modules/visual/sousuo.png"
-                   alt />
-            </i>
-            <span>请输入姓名</span>
-          </div>
-
-          <div class="btn">搜索</div>
-
-        </div> -->
-
         <div class="div_info">
           <el-scrollbar style="height: 98%">
             <div class="info_tip">
@@ -203,7 +192,7 @@ export default {
 
   async mounted() {
     //加载组织数据
-    // await this.loadOrgData();
+    await this.loadOrgData();
     await this.loadList();
   },
 
@@ -223,6 +212,30 @@ export default {
       this.showAgencyList = !this.showAgencyList;
     },
 
+    //加载组织数据
+    async loadOrgData() {
+      const url = "/gov/org/agency/maporg";
+      let params = {
+        orgId: this.orgId,
+        level: this.orgLevel,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.orgData = data;
+        this.orgId = this.orgData.id;
+        this.orgLevel = this.orgData.level;
+        if (data.children && data.children.length > 0) {
+          this.subAgencyArray = data.children;
+        } else {
+          this.subAgencyArray = [];
+        }
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
     //获取右侧infolist数据
     async loadList() {
       this.infoLoading = true;
@@ -268,6 +281,38 @@ export default {
       this.level = "";
     },
 
+    //返回所选组织
+    handleClickAgency(index) {
+      //如果是从小区返回，清空一下小区的人员显示列表
+      if (this.orgLevel === "neighborHood") {
+        this.$nextTick(() => {
+          // 小区id，小区名称
+          this.$refs.ref_community.handleCloseAllUser();
+        });
+      }
+      const cutNum = this.runAgencyArray.length - index; //要减去的长度
+      this.runNum = this.runNum - cutNum;
+
+      this.orgData = this.runAgencyArray[index];
+
+      for (let i = 0; i < cutNum; i++) {
+        this.runAgencyArray.pop();
+      }
+
+      this.orgId = this.orgData.id;
+      this.orgLevel = this.orgData.level;
+
+      if (this.orgLevel === "people") {
+      } else if (this.orgLevel === "neighborHood") {
+        //显示小区
+      } else {
+        this.$nextTick(() => {
+          this.refreshMap(true);
+          this.$forceUpdate();
+        });
+      }
+    },
+
     //点击组织列表数据
     clickAgencyItem(item, index) {
       let e = {
@@ -304,10 +349,6 @@ export default {
           return false;
         }
         this.runNum++;
-        this.orgData.center = map.getView().getCenter();
-        this.orgData.zoom = map.getView().getZoom();
-        console.log("center", map.getView().getCenter());
-        console.log("zoom", map.getView().getZoom());
 
         this.runAgencyArray.push(this.orgData);
 
@@ -334,6 +375,14 @@ export default {
       }
     },
 
+    //刷新地图
+    async refreshMap(isRefreshView) {
+      //加载组织数据
+      await this.loadOrgData();
+
+      await this.loadList();
+    },
+
     //开启加载动画
     startLoading() {
       loading = Loading.service({

src/views/modules/visual/basicinfo/cpts/grid-map.vue

@@ -9,91 +9,32 @@ import { requestPost } from "@/js/dai/request";
 import cptCard from "@/views/modules/visual/cpts/card";
 import cptTb from "@/views/modules/visual/cpts/tb";
 import nextTick from "dai-js/tools/nextTick";
-import dateFormat from "dai-js/tools/dateFormat";
+import { Scene, PolygonLayer, LineLayer } from "@antv/l7";
-import {
-  Scene,
-  PointLayer,
-  PolygonLayer,
-  LineLayer,
-  CityBuildingLayer,
-  RasterLayer,
-  Popup,
-} from "@antv/l7";
 import { GaodeMap, Map } from "@antv/l7-maps";
-// import { DrawEvent, DrawPolygon } from "@antv/l7-draw";
 import { spliceIntoChunks } from "@/utils/index";
 
 let scene;
-// window._AMapSecurityConfig = {
+let polygonLayer;
-//   securityJsCode: "您申请的安全密钥",
+let lineLayer;
-// };
+let textLayer;
+let posLayer;
+let circleLayer;
 
 export default {
   name: "l7",
+
   data() {
     return {
-      srcMapData: [],
+      //   srcGridData: {},
-      dotData: [],
-      iconUrlArray: {
-        anzhibangjiao: require("@/assets/img/shuju/fiveLayer/anzhibangjiao.png"),
-        buliangqingshaonian: require("@/assets/img/shuju/fiveLayer/buliangqingshaonian.png"),
-        shequjiaozheng: require("@/assets/img/shuju/fiveLayer/shequjiaozheng.png"),
-        resi_xfry: require("@/assets/img/shuju/fiveLayer/resi_xfry.png"),
-        xidurenyuan: require("@/assets/img/shuju/fiveLayer/xidurenyuan.png"),
-        xiejiaorenyuan: require("@/assets/img/shuju/fiveLayer/xiejiaorenyuan.png"),
-        zhaoshizhaohuojingshenbing: require("@/assets/img/shuju/fiveLayer/zhaoshizhaohuojingshenbing.png"),
-
-        yjdw: require("@/assets/img/shuju/fiveLayer/yjdw.png"),
-        sr_gy: require("@/assets/img/shuju/fiveLayer/sr_gy.png"),
-        sr_gc: require("@/assets/img/shuju/fiveLayer/sr_gc.png"),
-        whdw: require("@/assets/img/shuju/fiveLayer/whdw.png"),
-        sr_ggld: require("@/assets/img/shuju/fiveLayer/sr_ggld.png"),
-        lwh: require("@/assets/img/shuju/fiveLayer/lwh.png"),
-        sr_tyc: require("@/assets/img/shuju/fiveLayer/sr_tyc.png"),
-        lyjlb: require("@/assets/img/shuju/fiveLayer/lyjlb.png"),
-        sr_yjy: require("@/assets/img/shuju/fiveLayer/sr_yjy.png"),
-        zaxld: require("@/assets/img/shuju/fiveLayer/zaxld.png"),
-        other: require("@/assets/img/shuju/fiveLayer/other.png"),
-        sr_jzz: require("@/assets/img/shuju/fiveLayer/sr_jzz.png"),
-        sr_djc: require("@/assets/img/shuju/fiveLayer/sr_djc.png"),
-        sr_rfqck: require("@/assets/img/shuju/fiveLayer/sr_rfqck.png"),
-        ep_lg: require("@/assets/img/shuju/fiveLayer/ep_lg.png"),
-        sr_xfz: require("@/assets/img/shuju/fiveLayer/sr_xfz.png"),
-        pu_jgzsbm: require("@/assets/img/shuju/fiveLayer/pu_jgzsbm.png"),
-        ep_qt: require("@/assets/img/shuju/fiveLayer/ep_qt.png"),
-
-        gr_czw: require("@/assets/img/shuju/fiveLayer/gr_czw.png"),
-        ep_cycs: require("@/assets/img/shuju/fiveLayer/ep_cycs.png"),
-        dc_jyz: require("@/assets/img/shuju/fiveLayer/dc_jyz.png"),
-        ep_gwylcs: require("@/assets/img/shuju/fiveLayer/ep_gwylcs.png"),
-        dc_jqz: require("@/assets/img/shuju/fiveLayer/dc_jqz.png"),
-        dc_whpdw: require("@/assets/img/shuju/fiveLayer/dc_whpdw.png"),
-        ep_wb: require("@/assets/img/shuju/fiveLayer/ep_wb.png"),
-        ep_mrxycs: require("@/assets/img/shuju/fiveLayer/ep_mrxycs.png"),
-        dc_yqhjz: require("@/assets/img/shuju/fiveLayer/dc_yqhjz.png"),
-        dc_jzgd: require("@/assets/img/shuju/fiveLayer/dc_jzgd.png"),
-        ep_scjgqy: require("@/assets/img/shuju/fiveLayer/ep_scjgqy.png"),
-
-        cm_nmsc: require("@/assets/img/shuju/fiveLayer/cm_nmsc.png"),
-        event_tdnd: require("@/assets/img/shuju/fiveLayer/event_tdnd.png"),
-        cm_bhsc: require("@/assets/img/shuju/fiveLayer/cm_bhsc.png"),
-        cm_cjsc: require("@/assets/img/shuju/fiveLayer/cm_cjsc.png"),
-        ep_lssd: require("@/assets/img/shuju/fiveLayer/ep_lssd.png"),
-
-        resi_szry: require("@/assets/img/shuju/fiveLayer/resi_szry.png"),
-        ps_lyy: require("@/assets/img/shuju/fiveLayer/ps_lyy.png"),
-        resi_snry: require("@/assets/img/shuju/fiveLayer/resi_snry.png"),
-        ps_mzb: require("@/assets/img/shuju/fiveLayer/ps_mzb.png"),
-        ps_zs: require("@/assets/img/shuju/fiveLayer/ps_zs.png"),
-        ps_wss: require("@/assets/img/shuju/fiveLayer/ps_wss.png"),
-        ps_jjz: require("@/assets/img/shuju/fiveLayer/ps_jjz.png"),
-        ep_xx: require("@/assets/img/shuju/fiveLayer/ep_xx.png"),
-        ep_yy: require("@/assets/img/shuju/fiveLayer/ep_yy.png"),
-      },
     };
   },
 
-  props: {},
+  props: {
+    srcGridData: {
+      type: Object,
+      default: null,
+    },
+  },
 
   computed: {},
 
@@ -105,63 +46,94 @@ export default {
   watch: {},
 
   async mounted() {
-    await this.getMapData();
+    // 临时这么用吧
+    window._AMapSecurityConfig = {
+      securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
+    };
+
+    // await this.getMapData();
     this.iniMap();
-    await this.getDotData();
+  },
-    this.updateMap();
+
+  computed: {
+    polygonData() {
+      const { srcGridData } = this;
+      if (
+        !srcGridData ||
+        !srcGridData.children ||
+        !Array.isArray(srcGridData.children)
+      ) {
+        return { type: "FeatureCollection", features: [] };
+      }
+      const polygon = [
+        ...srcGridData.children
+          .filter((item) => item.coordinates.length > 0)
+          .map((item) => ({
+            type: "Feature",
+            properties: {
+              //   id: item.id,
+              //   name: item.name,
+              //   level: item.level,
+              center: [item.longitude, item.latitude],
+              ...item,
+            },
+            geometry: {
+              type: "Polygon",
+              coordinates: [
+                spliceIntoChunks(
+                  item.coordinates.split(",").map((item) => parseFloat(item)),
+                  2
+                ),
+              ],
+            },
+          })),
+      ];
+      return { type: "FeatureCollection", features: polygon };
+    },
+  },
+
+  watch: {
+    srcGridData(val, oldValue) {
+      if (oldValue == null) {
+        this.iniMap();
+      } else {
+        this.updateMap();
+      }
+    },
   },
 
   methods: {
     iniMap() {
-      // 临时这么用吧
+      const { srcGridData, polygonData } = this;
-      window._AMapSecurityConfig = {
+      if (!srcGridData) return false;
-        securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
-      };
 
-      const { srcMapData } = this;
       scene = new Scene({
         id: "map",
         logoVisible: false,
         map: new GaodeMap({
-          // viewMode: "3D",
+          pitch: 60,
-          pitch: 35.210526315789465,
           //   style: "dark",
-          style: "light",
+          //   style: "grey",
-          center: [srcMapData.longitude, srcMapData.latitude],
+          style: "amap://styles/blue",
+          center: [
+            srcGridData.longitude || this.$store.state.user.longitude,
+            srcGridData.latitude || this.$store.state.user.latitude,
+          ],
           token: "fc14b42e0ca18387866d68ebd4f150c1",
           zoom: 18,
           minZoom: 10,
+          isHotspot: false,
+          resizeEnable: true,
+          doubleClickZoom: false,
         }),
       });
 
       scene.on("loaded", () => {
-        const polygon = [
+        polygonLayer = new PolygonLayer({
-          ...srcMapData.children
-            .filter((item) => item.coordinates.length > 0)
-            .map((item) => ({
-              type: "Feature",
-              properties: {
-                name: item.name,
-                center: [item.longitude, item.latitude],
-              },
-              geometry: {
-                type: "Polygon",
-                coordinates: [
-                  spliceIntoChunks(
-                    item.coordinates.split(",").map((item) => parseFloat(item)),
-                    2
-                  ),
-                ],
-              },
-            })),
-        ];
-        console.log(polygon);
-
-        const polygonLayer = new PolygonLayer({
           autoFit: true,
         })
           //   .size(1000)
-          .source({ type: "FeatureCollection", features: polygon })
+          .source(polygonData)
           .color("name", [
             "rgba(255, 100, 60, 0.5)",
             "rgba(43, 231, 253, 0.35)",
@@ -184,11 +156,11 @@ export default {
 
         scene.addLayer(polygonLayer);
 
-        const linelayer = new LineLayer({
+        lineLayer = new LineLayer({
           zIndex: 2,
           name: "line2",
         })
-          .source({ type: "FeatureCollection", features: polygon })
+          .source(polygonData)
           .shape("line")
           .size(1)
           .color("name", [
@@ -204,12 +176,12 @@ export default {
             duration: 2, // 持续时间，延时
             trailLength: 2, // 流线长度
           });
-        scene.addLayer(linelayer);
+        scene.addLayer(lineLayer);
 
-        const circleLayer = new PolygonLayer({
+        circleLayer = new PolygonLayer({
           zIndex: 3,
         })
-          .source({ type: "FeatureCollection", features: polygon })
+          .source(polygonData)
           .color("name", [
             "rgba(255, 50, 50, 0.99)",
             "rgba(43, 231, 253, 0.99)",
@@ -237,10 +209,10 @@ export default {
           "pos-yellow",
           require("@/assets/img/shuju/grid/pos-yellow.png")
         );
-        const posLayer = new PolygonLayer({
+        posLayer = new PolygonLayer({
           zIndex: 4,
         })
-          .source({ type: "FeatureCollection", features: polygon })
+          .source(polygonData)
           .shape("name", ["pos-red", "pos-green", "pos-yellow"])
           .size(12)
           .style({
@@ -250,10 +222,10 @@ export default {
           });
         scene.addLayer(posLayer);
 
-        const textLayer = new PolygonLayer({
+        textLayer = new PolygonLayer({
           zIndex: 10,
         })
-          .source({ type: "FeatureCollection", features: polygon })
+          .source(polygonData)
           .color("name", [
             "rgba(255, 100, 60, 0.99)",
             "rgba(43, 231, 253, 0.99)",
@@ -273,17 +245,18 @@ export default {
           .active(true);
         scene.addLayer(textLayer);
 
-        textLayer.on("mousemove", (e) => {
+        polygonLayer.on("mousemove", (e) => {
-          textLayer.style({
+          polygonLayer.style({
             raisingHeight: 0,
           });
         });
 
-        textLayer.on("click", (e) => {
+        polygonLayer.on("click", (e) => {
-          console.log(e.feature.properties.name);
+          console.log(e.feature.properties);
+          this.$emit("clickAgency", e.feature.properties);
         });
 
-        textLayer.on("unmousemove", (e) => {
+        polygonLayer.on("unmousemove", (e) => {
           polygonLayer.style({
             raisingHeight: 0,
           });
@@ -291,13 +264,24 @@ export default {
       });
     },
 
+    updateMap() {
+      const { polygonData } = this;
+      if (polygonLayer) {
+        polygonLayer.setData(polygonData);
+        lineLayer.setData(polygonData);
+        textLayer.setData(polygonData);
+        posLayer.setData(polygonData);
+        circleLayer.setData(polygonData);
+      }
+    },
+
     async getMapData() {
       const { data, code, msg } = await requestPost("/gov/org/agency/maporg", {
         level: "",
         orgId: "",
       });
       if (msg === "success" && code === 0) {
-        this.srcMapData = data;
+        this.srcGridData = data;
       }
     },
   },