From f8dc812aa3300429dd1a3db0b12ea83327743290 Mon Sep 17 00:00:00 2001
From: SongZhen <>
Date: Sun, 8 Oct 2023 18:14:13 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/dataBoard/overview/index.scss |   5 +-
 src/assets/scss/dataBoardMain.scss            |   6 +-
 .../dataBoard/cpts/homeDetails/index.vue      |   7 +
 src/views/dataBoard/cpts/map/index.vue        | 591 +++++++++---------
 .../dataBoard/overview/components/jdwgy.vue   |  18 +-
 src/views/dataBoard/overview/index.vue        | 135 ++--
 6 files changed, 377 insertions(+), 385 deletions(-)

diff --git a/src/assets/scss/dataBoard/overview/index.scss b/src/assets/scss/dataBoard/overview/index.scss
index a3b16a6c1..1775f6c96 100644
--- a/src/assets/scss/dataBoard/overview/index.scss
+++ b/src/assets/scss/dataBoard/overview/index.scss
@@ -82,11 +82,11 @@
 			width: 213px;
 			font-size: 14px;
 			font-family: PingFang SC;
-			font-weight: 400;
+			font-weight: bold;
 			color: #FFFFFF;
 			line-height: 24px;
 			margin-left: 16px;
-			padding-top: 14px;
+			// padding-top: 14px;
 		}
 	}
 
@@ -345,6 +345,7 @@
 		transform: translatey(-200%);
 	}
 }
+
 @keyframes scroll1 {
 	0% {
 		transform: translatey(700%);
diff --git a/src/assets/scss/dataBoardMain.scss b/src/assets/scss/dataBoardMain.scss
index 6e1aa7ecc..73af2fabd 100644
--- a/src/assets/scss/dataBoardMain.scss
+++ b/src/assets/scss/dataBoardMain.scss
@@ -63,10 +63,10 @@
 
     .title {
         position: absolute;
-        left: 90px;
+        left: 60px;
         right: 0;
         top: 0;
-        line-height: 70px;
+        line-height: 82px;
         font-family: PingFang SC;
         font-weight: bold;
         color: #FFFFFF;
@@ -134,7 +134,7 @@
 
     .nav-list {
         position: absolute;
-        top: 60px;
+        top: 45px;
         left: 850px;
         display: flex;
         // width: 500px;
diff --git a/src/views/dataBoard/cpts/homeDetails/index.vue b/src/views/dataBoard/cpts/homeDetails/index.vue
index 3ed7e7315..f3fad4c6f 100644
--- a/src/views/dataBoard/cpts/homeDetails/index.vue
+++ b/src/views/dataBoard/cpts/homeDetails/index.vue
@@ -148,6 +148,12 @@ export default {
 
     getList() {
       this.loading = true;
+      const homeType = this.$route.query.type;
+      // if (homeType === "building") {
+      //   this.$http.get(`/actual/base/streetOverview/getUnitHouseOverviewList?unitId=` + this.$route.query.id).then((res) => {
+      //     console.log(res);
+      //   });
+      // } else {
       this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + this.$route.query.id).then((res) => {
         const {
           code,
@@ -165,6 +171,7 @@ export default {
           this.loading = false;
         }
       });
+      // }
     },
 
     getRentFlag(type) {
diff --git a/src/views/dataBoard/cpts/map/index.vue b/src/views/dataBoard/cpts/map/index.vue
index ff820143e..dbcdf3ca3 100644
--- a/src/views/dataBoard/cpts/map/index.vue
+++ b/src/views/dataBoard/cpts/map/index.vue
@@ -4,17 +4,17 @@
     <div class="btn" v-if="mapStyleType == 'light'" v-show="false" @click="shiftMapStyle('dark')">切换深色模式</div>
     <div class="btn" v-show="false" v-else @click="shiftMapStyle('light')">切换浅色模式</div>
     <!-- :style="{ transform: `scale(${zoom})` }" -->
-    <cpt-popup ref="popup" @clickListItem="handleClickDotListItem" @operate="handleClickDotBtn"/>
+    <cpt-popup ref="popup" @clickListItem="handleClickDotListItem" @operate="handleClickDotBtn" />
   </div>
 </template>
 
 <script>
-import {requestPost} from "@/js/dai/request";
+import { requestPost } from "@/js/dai/request";
 import nextTick from "dai-js/tools/nextTick";
-import {Scene, PolygonLayer, LineLayer, MarkerLayer, RasterLayer, PointLayer, Marker, Popup} from "@antv/l7";
-import {GaodeMap, Map} from "@antv/l7-maps";
-import {spliceIntoChunks} from "@/utils/index";
-import {mapType, searchNearby} from "@/utils/dai-map";
+import { Scene, PolygonLayer, LineLayer, MarkerLayer, RasterLayer, PointLayer, Marker, Popup } from "@antv/l7";
+import { GaodeMap, Map } from "@antv/l7-maps";
+import { spliceIntoChunks } from "@/utils/index";
+import { mapType, searchNearby } from "@/utils/dai-map";
 import tdtWp from "@/utils/tdt-wp";
 import tdtWpZw from "@/utils/tdt-wp-zw";
 import cptPopup from "./popup";
@@ -130,10 +130,14 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    level: {
-      type: String,
-      default: ''
-    }
+    // level: {
+    //   type: String,
+    //   default: "",
+    // },
+    // peopleType: {
+    //   type: String,
+    //   default: "staffAgency",
+    // },
   },
   components: {
     cptPopup,
@@ -141,107 +145,107 @@ export default {
 
   computed: {
     polygonData() {
-      const {srcGridData} = this;
+      const { srcGridData } = this;
       if (!srcGridData || !srcGridData.children || !Array.isArray(srcGridData.children)) {
-        return {type: "FeatureCollection", features: []};
+        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
-                  ).filter((item) => item.length == 2),
-                ],
-              },
-            })),
+          .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
+                ).filter((item) => item.length == 2),
+              ],
+            },
+          })),
       ];
-      return {type: "FeatureCollection", features: polygon};
+      return { type: "FeatureCollection", features: polygon };
     },
 
     polygonDotData() {
-      const {srcGridData} = this;
+      const { srcGridData } = this;
       if (!srcGridData || !srcGridData.children || !Array.isArray(srcGridData.children)) {
-        return {type: "FeatureCollection", features: []};
+        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: [
-                  item.latitude
-                      ? [[item.longitude, item.latitude]]
-                      : spliceIntoChunks(
-                          item.coordinates.split(",").map((item) => parseFloat(item)),
-                          2
-                      ).filter((item) => item.length == 2),
-                ],
-              },
-            })),
+          .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: [
+                item.latitude
+                  ? [[item.longitude, item.latitude]]
+                  : spliceIntoChunks(
+                      item.coordinates.split(",").map((item) => parseFloat(item)),
+                      2
+                    ).filter((item) => item.length == 2),
+              ],
+            },
+          })),
       ];
-      return {type: "FeatureCollection", features: polygon};
+      return { type: "FeatureCollection", features: polygon };
     },
 
     dotData() {
-      const {dotList} = this;
+      const { dotList } = this;
       return {
         type: "FeatureCollection",
         features: [
           ...dotList
-              .filter((item) => item.latitude)
-              .map((item) => ({
-                type: "Feature",
-                properties: {
-                  ...item,
-                },
-                geometry: {
-                  type: "Point",
-                  coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
-                },
-              })),
+            .filter((item) => item.latitude)
+            .map((item) => ({
+              type: "Feature",
+              properties: {
+                ...item,
+              },
+              geometry: {
+                type: "Point",
+                coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
+              },
+            })),
         ],
       };
     },
 
     dotData2() {
-      const {dotList2} = this;
+      const { dotList2 } = this;
       return {
         type: "FeatureCollection",
         features: [
           ...dotList2
-              .filter((item) => item.latitude)
-              .map((item) => ({
-                type: "Feature",
-                properties: {
-                  ...item,
-                },
-                geometry: {
-                  type: "Point",
-                  coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
-                },
-              })),
+            .filter((item) => item.latitude)
+            .map((item) => ({
+              type: "Feature",
+              properties: {
+                ...item,
+              },
+              geometry: {
+                type: "Point",
+                coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
+              },
+            })),
         ],
       };
     },
@@ -265,6 +269,12 @@ export default {
     "$store.state.chooseArea.realScale"(n, v) {
       this.setStartScale(n);
     },
+    level(n, v) {
+      console.log("level", n);
+    },
+    peopleType(n, v) {
+      console.log("peopleType", n);
+    },
   },
 
   async mounted() {
@@ -287,7 +297,7 @@ export default {
     },
 
     iniMap() {
-      const {darkStyle, lightStyle, srcGridData} = this;
+      const { darkStyle, lightStyle, srcGridData } = this;
       if (!srcGridData) return false;
 
       let styleConfig = darkStyle;
@@ -346,36 +356,36 @@ export default {
         zIndex: 1,
       });
       baseLayer
-          .source("http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
-            parser: {
-              type: "rasterTile",
-              tileSize: 256,
-              // minZoom: 6,
-              // maxZoom: 15,
-              zoomOffset: 0,
-            },
-          })
-          .style({
-            opacity: 0.7,
-          });
+        .source("http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
+          parser: {
+            type: "rasterTile",
+            tileSize: 256,
+            // minZoom: 6,
+            // maxZoom: 15,
+            zoomOffset: 0,
+          },
+        })
+        .style({
+          opacity: 0.7,
+        });
 
       // 注记服务
       const annotionLayer = new RasterLayer({
         zIndex: 2,
       });
       annotionLayer
-          .source("http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
-            parser: {
-              type: "rasterTile",
-              tileSize: 256,
-              // minZoom: 6,
-              // maxZoom: 15,
-              zoomOffset: 0,
-            },
-          })
-          .style({
-            opacity: 0.5,
-          });
+        .source("http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", {
+          parser: {
+            type: "rasterTile",
+            tileSize: 256,
+            // minZoom: 6,
+            // maxZoom: 15,
+            zoomOffset: 0,
+          },
+        })
+        .style({
+          opacity: 0.5,
+        });
 
       scene.addLayer(baseLayer);
       scene.addLayer(annotionLayer);
@@ -389,22 +399,22 @@ export default {
         zIndex: 1,
       });
       baseLayer
-          .source(tdtWpZw.vec, {
-            parser: {
-              type: "rasterTile",
-              tileSize: 256,
-              zoomOffset: 0,
-            },
-          })
-          .style({
-            opacity: 0.7,
-          });
+        .source(tdtWpZw.vec, {
+          parser: {
+            type: "rasterTile",
+            tileSize: 256,
+            zoomOffset: 0,
+          },
+        })
+        .style({
+          opacity: 0.7,
+        });
 
       scene.addLayer(baseLayer);
     },
 
     iniMapGrid(scene) {
-      const {darkStyle, lightStyle, polygonData, polygonDotData} = this;
+      const { darkStyle, lightStyle, polygonData, polygonDotData } = this;
 
       let styleConfig = darkStyle;
       if (this.mapStyleType == "light") {
@@ -417,23 +427,23 @@ export default {
       polygonLayer = new PolygonLayer({
         autoFit: true,
       })
-          // .size(0)
-          .source(polygonData)
-          .color("name", styleConfig.polygonColor)
-          //   .shape("extrude")
-          .shape("fill")
-          .style({
-            opacityLinear: {
-              enable: true, // true - false
-              dir: "out", // in - out
-            },
-            opacity: 1,
-            // heightfixed: true,
-            // pickLight: true,
-            raisingHeight: 0,
-            // sourceColor: "#333",
-            // targetColor: "rgba(255,255,255, 0.5)",
-          });
+        // .size(0)
+        .source(polygonData)
+        .color("name", styleConfig.polygonColor)
+        //   .shape("extrude")
+        .shape("fill")
+        .style({
+          opacityLinear: {
+            enable: true, // true - false
+            dir: "out", // in - out
+          },
+          opacity: 1,
+          // heightfixed: true,
+          // pickLight: true,
+          raisingHeight: 0,
+          // sourceColor: "#333",
+          // targetColor: "rgba(255,255,255, 0.5)",
+        });
 
       scene.addLayer(polygonLayer);
 
@@ -442,34 +452,34 @@ export default {
         zIndex: 2,
         name: "line2",
       })
-          .source(polygonData)
-          .shape("line")
-          .size(1)
-          .color("name", styleConfig.lineColor)
-          .style({
-            opacity: 1,
-          })
-          .animate({
-            interval: 1, // 间隔
-            duration: 2, // 持续时间，延时
-            trailLength: 2, // 流线长度
-          });
+        .source(polygonData)
+        .shape("line")
+        .size(1)
+        .color("name", styleConfig.lineColor)
+        .style({
+          opacity: 1,
+        })
+        .animate({
+          interval: 1, // 间隔
+          duration: 2, // 持续时间，延时
+          trailLength: 2, // 流线长度
+        });
       scene.addLayer(lineLayer);
 
       // 画区域中心点的波纹小圆圈
       circleLayer = new PolygonLayer({
         zIndex: 3,
       })
-          .source(polygonDotData)
-          .color("name", styleConfig.circleColor)
-          .shape("circle")
-          .active(true)
-          .animate(true)
-          .size(50)
-          .style({
-            offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直]
-            opacity: 1,
-          });
+        .source(polygonDotData)
+        .color("name", styleConfig.circleColor)
+        .shape("circle")
+        .active(true)
+        .animate(true)
+        .size(50)
+        .style({
+          offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直]
+          opacity: 1,
+        });
       // scene.addLayer(circleLayer);
       scene.addImage("pos-red", require("@/assets/img/shuju/grid/pos-red.png"));
       scene.addImage("pos-green", require("@/assets/img/shuju/grid/pos-green.png"));
@@ -477,23 +487,22 @@ export default {
 
       posLayer = new PointLayer({
         zIndex: 4,
-        name: 'gridPoint',
-        visible: false
+        name: "gridPoint",
+        visible: false,
       })
-          .source(polygonDotData)
-          .shape("name", [
-            // "pos-red",
-            "pos-green",
-            // "pos-yellow"
-          ])
-          .size(12)
-          .style({
-            options: this.level === 'grid' ? 1 : 0,
-            offsets: [0, 0],
-
-          });
+        .source(polygonDotData)
+        .shape("name", [
+          // "pos-red",
+          "pos-green",
+          // "pos-yellow"
+        ])
+        .size(12)
+        .style({
+          options: this.level === "grid" ? 1 : 0,
+          offsets: [0, 0],
+        });
       // scene.addLayer(posLayer);
-      console.log(this.level)
+      console.log(this.level);
       /*    if (this.level === 'grid') {
             posLayer.show()
           } else {
@@ -502,34 +511,32 @@ export default {
       textLayer = new PolygonLayer({
         zIndex: 20,
       })
-          .source(polygonData)
-          .color("name", styleConfig.textColor)
-          .shape("name", "text")
-          .size(16)
-          .style({
-            textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-            textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
-            spacing: 2, // 字符间距
-            padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-            stroke: styleConfig.textStrokeColor, // 描边颜色
-            strokeWidth: 0.1, // 描边宽度
-            strokeOpacity: 0.8,
-            textAllowOverlap: true,
-          })
-          .active(true);
+        .source(polygonData)
+        .color("name", styleConfig.textColor)
+        .shape("name", "text")
+        .size(16)
+        .style({
+          textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+          textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
+          spacing: 2, // 字符间距
+          padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+          stroke: styleConfig.textStrokeColor, // 描边颜色
+          strokeWidth: 0.1, // 描边宽度
+          strokeOpacity: 0.8,
+          textAllowOverlap: true,
+        })
+        .active(true);
       scene.addLayer(textLayer);
 
       polygonLayer.on("mousemove", (e) => {
-        if (this.level === 'grid') {
-          return
+        if (this.level === "grid") {
+          return;
         }
         const popup = new Popup({
           offsets: [60, 60],
           closeButton: false,
           maxWidth: 400,
-        })
-            .setLnglat(e.lngLat)
-            .setHTML(`
+        }).setLnglat(e.lngLat).setHTML(`
             <div class="jw-popup-container">
                 <div class="jw-popup-bg"></div>
                 <div class="jw-popup-con">
@@ -537,7 +544,7 @@ export default {
                       ${e.feature.properties.name}
                   </div>
                    <div class="jw-popup-des">
-                      ${e.feature.properties.description ? e.feature.properties.description : ''}
+                      ${e.feature.properties.description ? e.feature.properties.description : ""}
                   </div>
                 </div>
           </div>
@@ -545,30 +552,26 @@ export default {
         scene.addPopup(popup);
       });
       polygonLayer.on("click", (e) => {
-        console.log(this.level)
-        if (this.level === 'grid') {
-          return
+        console.log(this.level);
+        if (this.level === "grid") {
+          return;
         }
         if (numMarker) {
           scene.removeMarkerLayer(numMarker);
-
         }
         if (pointMarker) {
           scene.removeMarkerLayer(pointMarker);
         }
         console.log("e", e);
         this.$emit("clickAgency", e.feature.properties);
-
       });
-      posLayer.on('click', (e) => {
-        console.log(e)
+      posLayer.on("click", (e) => {
+        console.log(e);
       });
-
     },
     clearMarkert() {
       if (numMarker) {
         scene.removeMarkerLayer(numMarker);
-
       }
       if (pointMarker) {
         scene.removeMarkerLayer(pointMarker);
@@ -576,34 +579,34 @@ export default {
     },
 
     iniMapDot(scene) {
-      const {darkStyle, lightStyle, dotIcoList, dotData} = this;
+      const { darkStyle, lightStyle, dotIcoList, dotData } = this;
       Object.keys(dotIcoList).forEach((k) => {
         scene.addImage(k, dotIcoList[k]);
       });
       dotBgLayer = new PointLayer({
         zIndex: 20,
       })
-          .source(dotData)
-          .shape("circle")
-          .color("rgba(255,255,255,0.8)")
-          .size(20)
-          .style({
-            strokeWidth: 3,
-            strokeOpacity: 0.1,
-            stroke: "#000",
-          });
+        .source(dotData)
+        .shape("circle")
+        .color("rgba(255,255,255,0.8)")
+        .size(20)
+        .style({
+          strokeWidth: 3,
+          strokeOpacity: 0.1,
+          stroke: "#000",
+        });
       scene.addLayer(dotBgLayer);
 
       dotLayer = new PointLayer({
         zIndex: 21,
       })
-          .source(dotData)
-          .shape("categoryKey", (k) => k)
-          .size(10)
-          .style({
-            offsets: [0, 0],
-            layerType: "fillImage",
-          });
+        .source(dotData)
+        .shape("categoryKey", (k) => k)
+        .size(10)
+        .style({
+          offsets: [0, 0],
+          layerType: "fillImage",
+        });
       scene.addLayer(dotLayer);
 
       dotBgLayer.on("click", (e) => {
@@ -618,18 +621,17 @@ export default {
             offsets: [0, -0],
             closeButton: false,
           })
-              .setLnglat(e.feature.geometry.coordinates)
-              .setHTML(`<span>${e.feature.properties.content}</span>`);
+            .setLnglat(e.feature.geometry.coordinates)
+            .setHTML(`<span>${e.feature.properties.content}</span>`);
           scene.addPopup(popup);
         }
       });
 
-      dotBgLayer.on("unmousemove", (e) => {
-      });
+      dotBgLayer.on("unmousemove", (e) => {});
     },
 
     iniMapDot2(scene) {
-      const {dotIcoList2: dotIcoList, dotData2: dotData} = this;
+      const { dotIcoList2: dotIcoList, dotData2: dotData } = this;
       Object.keys(dotIcoList).forEach((k) => {
         scene.addImage(k, dotIcoList[k]);
       });
@@ -637,13 +639,13 @@ export default {
       dotLayer2 = new PointLayer({
         zIndex: 21,
       })
-          .source(dotData)
-          .shape("categoryKey", (k) => k)
-          .size(20)
-          .style({
-            offsets: [0, 0],
-            layerType: "fillImage",
-          });
+        .source(dotData)
+        .shape("categoryKey", (k) => k)
+        .size(20)
+        .style({
+          offsets: [0, 0],
+          layerType: "fillImage",
+        });
       scene.addLayer(dotLayer2);
 
       dotLayer2.on("click", (e) => {
@@ -658,14 +660,13 @@ export default {
             offsets: [0, -0],
             closeButton: false,
           })
-              .setLnglat(e.feature.geometry.coordinates)
-              .setHTML(`<span>${e.feature.properties.content}</span>`);
+            .setLnglat(e.feature.geometry.coordinates)
+            .setHTML(`<span>${e.feature.properties.content}</span>`);
           scene.addPopup(popup);
         }
       });
 
-      dotLayer2.on("unmousemove", (e) => {
-      });
+      dotLayer2.on("unmousemove", (e) => {});
     },
 
     // 把地图缩放等级在原来基础上大一点
@@ -687,7 +688,7 @@ export default {
     },
 
     updateGrid() {
-      const {polygonData, polygonDotData} = this;
+      const { polygonData, polygonDotData } = this;
       if (polygonLayer) {
         polygonLayer.setData(polygonData);
         lineLayer.setData(polygonData);
@@ -704,7 +705,7 @@ export default {
     },
 
     updateDot() {
-      const {dotData} = this;
+      const { dotData } = this;
       if (dotLayer) {
         console.log(dotData);
         dotLayer.setData(dotData);
@@ -713,7 +714,7 @@ export default {
     },
 
     updateDot2() {
-      const {dotData2: dotData} = this;
+      const { dotData2: dotData } = this;
       if (dotLayer2) {
         console.log(dotData);
         dotLayer2.setData(dotData);
@@ -776,54 +777,50 @@ export default {
         searchBgLayer = new PolygonLayer({
           //   autoFit: true,
         })
-            .source(sourceData)
-            .color("#f0f")
-            .shape("fill")
-            .style({
-              opacityLinear: {
-                enable: true, // true - false
-                dir: "out", // in - out
-              },
-              opacity: 0.3,
-              raisingHeight: 0,
-            });
+          .source(sourceData)
+          .color("#f0f")
+          .shape("fill")
+          .style({
+            opacityLinear: {
+              enable: true, // true - false
+              dir: "out", // in - out
+            },
+            opacity: 0.3,
+            raisingHeight: 0,
+          });
 
         scene.addLayer(searchBgLayer);
       }
     },
-    setPoint(data) {
-      this.clearMarkert()
+
+    setPoint(data, level, peopleType) {
+      this.clearMarkert();
       pointMarker = new MarkerLayer({
-        name: 'pointMarker'
-      })
+        name: "pointMarker",
+      });
       for (let i in data) {
-        console.log(data[i].longitude * 1, data[i].latitude * 1)
-        var el = document.createElement('div');
-        el.className = 'label-point-class';
-        el.classList.add(data[i].type)
+        // console.log(data[i].longitude * 1, data[i].latitude * 1);
+        var el = document.createElement("div");
+        el.className = peopleType === "building" ? "label-pointLd-class" : "label-point-class";
+        el.classList.add(data[i].type);
         // el.textContent = data[i].peopleType+'：'+data[i].personnelNum;
         const pointMarkerItem = new Marker({
           offsets: [0, 0],
           element: el,
         }).setLnglat([data[i].longitude * 1, data[i].latitude * 1]);
-        let popup
+        let popup;
         pointMarkerItem.on("mouseover", () => {
           popup = new Popup({
             offsets: [60, 60],
             closeButton: false,
             maxWidth: 400,
-          })
-              .setLnglat([data[i].longitude * 1, data[i].latitude * 1])
-              .setHTML(`
+          }).setLnglat([data[i].longitude * 1, data[i].latitude * 1]).setHTML(`
             <div class="jw-popup-container">
                 <div class="jw-popup-con">
                   <div class="jw-popup-title">
                       ${data[i].name}
                   </div>
-                  <div class="jw-popup-type">网格类型：<span class="${data[i].type}">${
-                  data[i].type === 'red' ? "红" :
-                      data[i].type === 'yellow' ? "黄" :
-                          data[i].type === 'green' ? "绿色" : ''}</span>
+                  <div class="jw-popup-type">网格类型：<span class="${data[i].type}">${data[i].type === "red" ? "红" : data[i].type === "yellow" ? "黄" : data[i].type === "green" ? "绿色" : ""}</span>
                   </div>
                    <div class="jw-popup-num-list">
                      <div>户数：<span>${data[i].houseNum ? data[i].houseNum : 0}</span></div>
@@ -838,36 +835,33 @@ export default {
           scene.addPopup(popup);
         });
         pointMarkerItem.on("mouseout", () => {
-          popup.remove()
-        })
+          popup.remove();
+        });
         pointMarkerItem.on("click", () => {
-          this.$router.push('/homeDetails/index?id=' + data[i].id)
-        })
-
-
-        pointMarker.addMarker(pointMarkerItem)
+          this.$router.push(`/homeDetails/index?id=${data[i].id}&type=${peopleType}`);
+        });
 
+        pointMarker.addMarker(pointMarkerItem);
       }
       scene.addMarkerLayer(pointMarker);
-
-
     },
+
     setNum(data) {
       if (numMarker) {
         scene.removeMarkerLayer(numMarker);
       }
       numMarker = new MarkerLayer({
-        name: 'numMarker'
-      })
+        name: "numMarker",
+      });
       for (let i in data) {
-        var el = document.createElement('label');
-        el.className = 'label-num-class';
-        el.textContent = data[i].peopleType + '：' + data[i].personnelNum;
+        var el = document.createElement("label");
+        el.className = "label-num-class";
+        el.textContent = data[i].peopleType + "：" + data[i].personnelNum;
         const numMarkerItem = new Marker({
           element: el,
           offsets: [0, 40],
         }).setLnglat([data[i].longitude * 1, data[i].latitude]);
-        numMarker.addMarker(numMarkerItem)
+        numMarker.addMarker(numMarkerItem);
       }
       scene.addMarkerLayer(numMarker);
     },
@@ -885,8 +879,8 @@ export default {
           closeOnClick: true,
           maxWidth: 400,
         })
-            .setLnglat(posArr)
-            .setDOMContent(this.$refs.popup.$el);
+          .setLnglat(posArr)
+          .setDOMContent(this.$refs.popup.$el);
         marker.setPopup(popup);
       }
 
@@ -922,8 +916,8 @@ export default {
           closeOnClick: true,
           maxWidth: 400,
         })
-            .setLnglat(posArr)
-            .setDOMContent(this.$refs.popup.$el);
+          .setLnglat(posArr)
+          .setDOMContent(this.$refs.popup.$el);
         scene.addPopup(popup);
       }
     },
@@ -989,7 +983,7 @@ export default {
   /deep/ .l7-popup-content {
     //background: rgba(#fff, 1);
     background: rgba(3, 31, 73, 0.72);
-    border: 1px solid #74C9FF;
+    border: 1px solid #74c9ff;
     opacity: 0.9;
     border-radius: 5px;
     color: #fff;
@@ -1033,9 +1027,9 @@ export default {
   /deep/ .label-num-class {
     font-size: 16px;
     font-weight: 500;
-    color: #FFFFFF;
+    color: #ffffff;
     background: rgba(3, 31, 73, 0.72);
-    border: 1px solid #74C9FF;
+    border: 1px solid #74c9ff;
     opacity: 0.9;
     border-radius: 100px;
     padding: 3px 13px;
@@ -1054,19 +1048,17 @@ export default {
 
   /deep/ .jw-popup-container {
     display: flex;
-
   }
 
   /deep/ .jw-popup-con {
-
   }
 
   /deep/ .jw-popup-title {
     font-size: 20px;
     font-family: HYShuYuanHeiJ;
     font-weight: 400;
-    color: #FFFFFF;
-    background: linear-gradient(0deg, #2DC1FF 0%, #FFFFFF 58.5205078125%);
+    color: #ffffff;
+    background: linear-gradient(0deg, #2dc1ff 0%, #ffffff 58.5205078125%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 16px;
@@ -1075,7 +1067,7 @@ export default {
   /deep/ .jw-popup-des {
     font-size: 14px;
     font-weight: 400;
-    color: #FFFFFF;
+    color: #ffffff;
     line-height: 22px;
   }
 
@@ -1096,20 +1088,26 @@ export default {
       background-image: url("@/assets/images/overview/yellow.png");
     }
   }
+  /deep/ .label-pointLd-class {
+    width: 16px;
+    height: 16px;
+    background: #1ae1ff;
+    border-radius: 50%;
+  }
 
   /deep/ .jw-popup-type {
     margin: 16px 0 21px;
 
     .red {
-      color: #FC561F;
+      color: #fc561f;
     }
 
     .yellow {
-      color: #FAB93F;
+      color: #fab93f;
     }
 
     .green {
-      color: #08EBAD;
+      color: #08ebad;
     }
   }
 
@@ -1128,10 +1126,9 @@ export default {
       span {
         font-size: 18px;
         font-weight: 500;
-        color: #FFAA01;
+        color: #ffaa01;
       }
     }
   }
 }
-
 </style>
diff --git a/src/views/dataBoard/overview/components/jdwgy.vue b/src/views/dataBoard/overview/components/jdwgy.vue
index 3e834e593..0ccb03e81 100644
--- a/src/views/dataBoard/overview/components/jdwgy.vue
+++ b/src/views/dataBoard/overview/components/jdwgy.vue
@@ -66,12 +66,17 @@ export default {
       type: Object,
       default: {},
     },
+    level: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     return {
       list: [],
       wglist: [],
       unitList: [],
+      ifUnit: false,
       genders: ["未知", "男", "女"],
       types: { red: "红", yellow: "黄", green: "绿色" },
       chooseName: {},
@@ -80,7 +85,6 @@ export default {
   },
   watch: {
     peopleType(val) {
-      // console.log("val", val);
       this.getData();
     },
     currentLevelData(val) {
@@ -88,6 +92,12 @@ export default {
         this.getData();
       }
     },
+    level(val) {
+      if (val === "grid") {
+        this.ifUnit = true;
+        this.getData();
+      }
+    },
   },
   mounted() {
     if (this.currentLevelData.orgId) {
@@ -98,10 +108,8 @@ export default {
     getData() {
       this.loading = true;
       if (this.currentLevelData.orgLevel == "grid") {
-        this.$http.get("/actual/base/streetOverview/queryPersonnelGridGroup?personnelType=" +
-            this.peopleType +
-            "&level=" + this.currentLevelData.orgLevel +
-            "&orgId=" + this.currentLevelData.orgId).then(({data: {data}}) => {
+        const personType = this.ifUnit ? "unit" : this.peopleType;
+        this.$http.get("/actual/base/streetOverview/queryPersonnelGridGroup?personnelType=" + personType + "&level=" + this.currentLevelData.orgLevel + "&orgId=" + this.currentLevelData.orgId).then(({ data: { data } }) => {
           this.loading = false;
           this.wglist = data;
           this.$emit(
diff --git a/src/views/dataBoard/overview/index.vue b/src/views/dataBoard/overview/index.vue
index fbcb336e5..0b8f22726 100644
--- a/src/views/dataBoard/overview/index.vue
+++ b/src/views/dataBoard/overview/index.vue
@@ -8,100 +8,91 @@
     <div class="g-row">
       <div class="g-left">
         <div class="m-box">
-          <title-box
-              :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}介绍`"/>
-          <jdjs :currentLevelData="currentLevelData"/>
+          <title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}介绍`" />
+          <jdjs :currentLevelData="currentLevelData" />
         </div>
 
         <div class="m-box">
-          <title-box
-              :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}图谱画像`"/>
-          <jdtphx :currentLevelData="currentLevelData" :id="orgId"/>
+          <title-box :text="`${currentLevel === 'district' ? '区' : currentLevel === 'street' ? '街道' : currentLevel === 'community' ? '社区' : currentLevel === 'grid' ? '网格' : ''}图谱画像`" />
+          <jdtphx :currentLevelData="currentLevelData" :id="orgId" />
         </div>
       </div>
       <div class="g-center">
         <div class="m-map" style="overflow: hidden">
-          <map-top :currentLevelData="currentLevelData" @changeType="changeType" :level="currentLevel"/>
+          <map-top :currentLevelData="currentLevelData" @changeType="changeType" :level="currentLevel" />
           <div v-if="breadList.length > 1" class="go-back" @click="goBackMap">
-            <img src="~@/assets/images/shuju/overview/go-back.png"/>
+            <img src="~@/assets/images/shuju/overview/go-back.png" />
           </div>
-          <grid-map ref="map" @clickAgency="clickAgencyItem" :srcGridData="orgData" @clickDotBtn="handleClickDotBtn"
-                    :level="currentLevel"/>
+          <grid-map ref="map" @clickAgency="clickAgencyItem" :srcGridData="orgData" @clickDotBtn="handleClickDotBtn" :level="currentLevel" :peopleType="peopleType" />
         </div>
         <div class="m-box m-rybox">
-          <title-box :text="`${customerName}${peopleList[peopleType]}`"/>
-          <jdwgy :peopleType="peopleType" :currentLevelData="currentLevelData" @setNum="setNum" @setPoint="setPoint"/>
+          <title-box :text="`${customerName}${peopleList[peopleType]}`" />
+          <jdwgy :peopleType="peopleType" :currentLevelData="currentLevelData" :level="currentLevel" @setNum="setNum" @setPoint="setPoint" />
         </div>
       </div>
 
       <div class="g-right">
         <div class="m-box">
-          <title-box text="人房数据统计"/>
-          <rfsjtj :currentLevelData="currentLevelData"/>
+          <title-box text="人房数据统计" />
+          <rfsjtj :currentLevelData="currentLevelData" />
         </div>
         <!-- 街道概览 -->
         <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
           <title-box text="各社区人房数据更新排行">
             <span class="date-span">
-              <el-date-picker v-model="rfphDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate"
-                              type="month" :clearable="false" placeholder="选择月"> </el-date-picker>
+              <el-date-picker v-model="rfphDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月"> </el-date-picker>
             </span>
           </title-box>
-          <sqrfph :currentLevelData="currentLevelData" :date="rfphDate"/>
+          <sqrfph :currentLevelData="currentLevelData" :date="rfphDate" />
         </div>
         <div v-if="currentLevel === 'street' || currentLevel === 'district'" class="m-box">
           <title-box text="各社区12345投诉事件统计">
             <span class="date-span">
-              <el-date-picker v-model="sq12345Date" format="yyyy-MM" value-format="yyyy-MM" type="month"
-                              :clearable="false" placeholder="选择月"/>
+              <el-date-picker v-model="sq12345Date" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false" placeholder="选择月" />
             </span>
           </title-box>
-          <sq12345 :currentLevelData="currentLevelData" :date="sq12345Date"/>
+          <sq12345 :currentLevelData="currentLevelData" :date="sq12345Date" />
         </div>
 
         <!-- 社区&网格-->
         <div v-if="currentLevel === 'community' || currentLevel === 'grid'" class="m-box">
-          <title-box text="人房数据动态更新"/>
-          <Tabs v-model="dynamicType" :list="dynamicTypeList" v-if="currentLevel === 'community'"
-                @changeVal="dynamicTypeChange"/>
-          <DynamicHumanRoomData :currentLevelData="currentLevelData" v-if="dynamicType === 1"/>
-          <GridUpdateRanking :currentLevelData="currentLevelData" v-if="dynamicType === 2"/>
+          <title-box text="人房数据动态更新" />
+          <Tabs v-model="dynamicType" :list="dynamicTypeList" v-if="currentLevel === 'community'" @changeVal="dynamicTypeChange" />
+          <DynamicHumanRoomData :currentLevelData="currentLevelData" v-if="dynamicType === 1" />
+          <GridUpdateRanking :currentLevelData="currentLevelData" v-if="dynamicType === 2" />
         </div>
         <!-- 社区概览-->
         <div v-if="currentLevel === 'community'" class="m-box">
           <title-box text="社区满意度自查结果">
             <span class="date-span">
-              <el-date-picker v-model="sqzcDate" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false"
-                              placeholder="选择月"/>
+              <el-date-picker v-model="sqzcDate" format="yyyy-MM" value-format="yyyy-MM" type="month" :clearable="false" placeholder="选择月" />
             </span>
           </title-box>
-          <CommunityResult :currentLevelData="currentLevelData" :date="sqzcDate"/>
+          <CommunityResult :currentLevelData="currentLevelData" :date="sqzcDate" />
         </div>
         <div v-if="currentLevel === 'community'" class="m-box">
           <title-box text="事件&回访">
             <span class="date-span">
-              <el-date-picker v-model="sjhfDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate"
-                              type="month" :clearable="false" placeholder="选择月"/>
+              <el-date-picker v-model="sjhfDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月" />
             </span>
           </title-box>
-          <Tabs v-model="eventType" :list="eventTypeList" @changeVal="eventTypeChange"/>
-          <EventAndFollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 1"/>
-          <FollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 2"/>
+          <Tabs v-model="eventType" :list="eventTypeList" @changeVal="eventTypeChange" />
+          <EventAndFollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 1" />
+          <FollowUp :currentLevelData="currentLevelData" :date="sjhfDate" v-if="eventType === 2" />
         </div>
         <!-- 网格 -->
         <div v-if="currentLevel === 'grid'" class="m-box">
           <title-box text="社区网格数据更新情况排行">
             <span class="date-span">
-              <el-date-picker v-model="sqwggxDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate"
-                              type="month" :clearable="false" placeholder="选择月"/>
+              <el-date-picker v-model="sqwggxDate" format="yyyy-MM" value-format="yyyy-MM" @change="changeDate" type="month" :clearable="false" placeholder="选择月" />
             </span>
           </title-box>
-          <RankingGridData :currentLevelData="currentLevelData" :date="sqwggxDate"/>
+          <RankingGridData :currentLevelData="currentLevelData" :date="sqwggxDate" />
         </div>
       </div>
     </div>
 
-    <cpt-loading v-show="false"/>
+    <cpt-loading v-show="false" />
   </div>
 </template>
 
@@ -126,8 +117,8 @@ import RankingGridData from "@/views/dataBoard/overview/components/RankingGridDa
 import FollowUp from "@/views/dataBoard/overview/components/FollowUp.vue";
 import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
 
-import {requestPostBi} from "@/js/dai/request-bipass";
-import {requestPost} from "@/js/dai/request";
+import { requestPostBi } from "@/js/dai/request-bipass";
+import { requestPost } from "@/js/dai/request";
 
 export default {
   name: "renfang",
@@ -170,7 +161,7 @@ export default {
       currentLevelData: {
         orgId: this.$store.state.chooseArea.chooseName.orgId,
         orgLevel: this.$store.state.chooseArea.chooseName.level,
-        meta: {title: "人房总览"},
+        meta: { title: "人房总览" },
       },
       breadList: [
         {
@@ -178,7 +169,7 @@ export default {
           orgLevel: "",
           id: "",
           level: "",
-          meta: {title: "人房总览"},
+          meta: { title: "人房总览" },
         },
       ],
       peopleList: {
@@ -242,7 +233,6 @@ export default {
     },
   },
 
-
   methods: {
     changeCustomerName() {
       this.customerName = localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
@@ -283,7 +273,7 @@ export default {
       }
     },
 
-    clickBreadItem({item}) {
+    clickBreadItem({ item }) {
       this.toBread(item);
     },
 
@@ -305,7 +295,7 @@ export default {
       this.toBread({
         orgId: item.id,
         orgLevel: item.level,
-        meta: {title: item.name},
+        meta: { title: item.name },
       });
     },
     goBackMap() {
@@ -313,13 +303,13 @@ export default {
       this.clickAgencyItem(item);
     },
     toBread(item) {
-      const {orgId} = item;
-      const {breadList} = this;
+      const { orgId } = item;
+      const { breadList } = this;
       let index = breadList.findIndex((val) => val.orgId === orgId);
       if (index >= 0) {
         this.breadList = breadList.slice(0, index + 1);
       } else {
-        breadList.push({...item, id: item.orgId, level: item.orgLevel});
+        breadList.push({ ...item, id: item.orgId, level: item.orgLevel });
         this.breadList = breadList;
       }
       this.getMapData(item.orgId, item.orgLevel);
@@ -330,10 +320,7 @@ export default {
       if (!item.longitude) {
         return this.$message.error("请先设置坐标");
       }
-      this.$refs.map.setDotMarker(item, [
-        parseFloat(item.longitude),
-        parseFloat(item.latitude),
-      ]);
+      this.$refs.map.setDotMarker(item, [parseFloat(item.longitude), parseFloat(item.latitude)]);
     },
     setNum(data) {
       console.log(this.orgData, data, "111");
@@ -350,28 +337,24 @@ export default {
               longitude: item.longitude,
             });
           }
-        })
-      })
+        });
+      });
       // if (params.length) {
-      this.$refs.map.setNum(params)
+      this.$refs.map.setNum(params);
       // }
-
     },
     upDownShow() {
       this.listShow = !this.listShow;
     },
     setPoint(data) {
       // if (data) {
-      this.$refs.map.setPoint(data)
+      this.$refs.map.setPoint(data, this.currentLevel, this.peopleType);
       // }
     },
     //获取地图上显示的组织数据
-    async getMapData(
-        orgId = this.$store.state.chooseArea.chooseName.orgId,
-        level = this.$store.state.chooseArea.chooseName.level
-    ) {
+    async getMapData(orgId = this.$store.state.chooseArea.chooseName.orgId, level = this.$store.state.chooseArea.chooseName.level) {
       const url = "org_map";
-      this.$http.post(`/gov/org/agency/maporg`, {orgId, level}).then(({data: {data}}) => {
+      this.$http.post(`/gov/org/agency/maporg`, { orgId, level }).then(({ data: { data } }) => {
         this.orgData = data;
         this.orgId = this.orgData.id;
         console.log(this.orgId);
@@ -389,20 +372,20 @@ export default {
     async getSubMapData() {
       const url = "sub_org_map";
 
-      const {data, code, msg} = await requestPostBi(
-          url,
-          {
-            queryParam: {
-              org_id: this.orgId,
-            },
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            org_id: this.orgId,
           },
-          {
-            // mockId: 61831860,
-          }
+        },
+        {
+          // mockId: 61831860,
+        }
       );
 
       if (code === 0) {
-        const {orgData} = this;
+        const { orgData } = this;
         orgData.children = data.map((item) => {
           return {
             ...item,
@@ -413,7 +396,7 @@ export default {
             coordinates: item.coordinates || "",
           };
         });
-        this.orgData = {...orgData};
+        this.orgData = { ...orgData };
       } else {
         this.$message.error(msg);
       }
@@ -427,7 +410,7 @@ export default {
         level: this.orgLevel,
       };
 
-      const {data, code, msg} = await requestPost(url, params);
+      const { data, code, msg } = await requestPost(url, params);
       if (code === 0) {
         this.orgData = data;
         this.orgId = this.orgId;
@@ -477,11 +460,7 @@ export default {
   background: #000;
 }
 </style>
-<style
-    lang="scss"
-    src="@/assets/scss/dataBoard/overview/index.scss"
-    scoped
-></style>
+<style lang="scss" src="@/assets/scss/dataBoard/overview/index.scss" scoped></style>
 
 <style lang="scss" scoped>
 .tabs {