diff --git a/src/assets/images/overview/green.png b/src/assets/images/overview/green.png
new file mode 100644
index 000000000..0b2b30e40
Binary files /dev/null and b/src/assets/images/overview/green.png differ
diff --git a/src/assets/images/overview/icon_fw.png b/src/assets/images/overview/icon_fw.png
new file mode 100644
index 000000000..529bd968a
Binary files /dev/null and b/src/assets/images/overview/icon_fw.png differ
diff --git a/src/assets/images/overview/icon_jm.png b/src/assets/images/overview/icon_jm.png
new file mode 100644
index 000000000..f44e8b087
Binary files /dev/null and b/src/assets/images/overview/icon_jm.png differ
diff --git a/src/assets/images/overview/icon_ld.png b/src/assets/images/overview/icon_ld.png
new file mode 100644
index 000000000..0eb77cedc
Binary files /dev/null and b/src/assets/images/overview/icon_ld.png differ
diff --git a/src/assets/images/overview/icon_wg.png b/src/assets/images/overview/icon_wg.png
new file mode 100644
index 000000000..de1620aff
Binary files /dev/null and b/src/assets/images/overview/icon_wg.png differ
diff --git a/src/assets/images/overview/map-pop-img.png b/src/assets/images/overview/map-pop-img.png
new file mode 100644
index 000000000..0090c3b9a
Binary files /dev/null and b/src/assets/images/overview/map-pop-img.png differ
diff --git a/src/assets/images/overview/red.png b/src/assets/images/overview/red.png
new file mode 100644
index 000000000..17279eede
Binary files /dev/null and b/src/assets/images/overview/red.png differ
diff --git a/src/assets/images/overview/select.png b/src/assets/images/overview/select.png
new file mode 100644
index 000000000..6cc8c1ce2
Binary files /dev/null and b/src/assets/images/overview/select.png differ
diff --git a/src/assets/images/overview/yellow.png b/src/assets/images/overview/yellow.png
new file mode 100644
index 000000000..d79fb6198
Binary files /dev/null and b/src/assets/images/overview/yellow.png differ
diff --git a/src/assets/scss/dataBoard/overview/index.scss b/src/assets/scss/dataBoard/overview/index.scss
index fff69aaa1..1878a00e1 100644
--- a/src/assets/scss/dataBoard/overview/index.scss
+++ b/src/assets/scss/dataBoard/overview/index.scss
@@ -389,10 +389,9 @@
 		display: flex;
 		width: 140px;
 		height: 90px;
-		background: url(../../../../assets/images/shuju/overview/top-bg.png);
+		background: url(../../../../assets/images/shuju/overview/top-bg.png) no-repeat;
 		background-size: 140px 70px;
 		padding: 8px 16px;
-		background-repeat: no-repeat;
 
 		.item-info {
 			height: 14px;
diff --git a/src/router/index.js b/src/router/index.js
index a7370e796..562c7f78e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -258,6 +258,16 @@ export const dataBoardRoutes = {
         title: "居民画像",
         isTab: false,
       },
+    },,
+    {
+      path: "overview/familyPortrait",
+      props: true,
+      component: () => import("@/views/dataBoard/overview/familyPortrait/index"),
+      name: "dataBoard-overview-familyPortrait",
+      meta: {
+        title: "家庭画像",
+        isTab: false,
+      },
     },
     {
       path: "renfang/warn-building",
diff --git a/src/views/dataBoard/cpts/homeDetails/index.vue b/src/views/dataBoard/cpts/homeDetails/index.vue
index 95921417b..889d8d8e1 100644
--- a/src/views/dataBoard/cpts/homeDetails/index.vue
+++ b/src/views/dataBoard/cpts/homeDetails/index.vue
@@ -1,19 +1,27 @@
 <template>
   <div class="homeWrap">
     <div class="bread">
-      <bread-crumb :list="list" />
+      <bread-crumb :list="[{
+        path: '/dataBoard/overview/index',
+        name: '概览'
+      },{
+        name: homeText?homeText:''
+      }]"/>
     </div>
     <el-row :gutter="48">
       <el-col :span="8">
         <div class="bg">
-          <Title :text="homeText">
-            <span :class="[homeMsg.type === 'red' ? 'miniGrid_red' : homeMsg.type === 'yellow' ? 'miniGrid_yellow' : 'miniGrid_green']">红色微网格</span>
+          <Title :text="homeText?homeText:''">
+            <span v-if="homeMsg && homeMsg.type" :class="[homeMsg.type === 'red' ? 'miniGrid_red' : homeMsg.type ===
+            'yellow' ? 'miniGrid_yellow' :
+            'miniGrid_green']">{{homeMsg.type === 'red' ? '红' : homeMsg.type === 'yellow' ? '黄' :
+            '绿'}}色微网格</span>
           </Title>
         </div>
         <div class="apartment">
           <div class="apar_comtent">
             <div class="apar_top">
-              <img src="@/assets/images/home/homeTop.png" alt="/" />
+              <img src="@/assets/images/home/homeTop.png" alt="/"/>
             </div>
             <div class="apar_center">
               <div class="apar_center_flex">
@@ -27,19 +35,20 @@
             </div> -->
           </div>
           <div class="apar_right">
-            <img src="@/assets/images/home/homeRight.png" alt="" />
+            <img src="@/assets/images/home/homeRight.png" alt=""/>
           </div>
         </div>
       </el-col>
       <el-col :span="16">
         <div class="table">
-          <el-table :data="list" v-loading="loading" height="500" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)">
-            <el-table-column label="序号" type="index" width="80" />
-            <el-table-column prop="doorName" label="门牌号" />
-            <el-table-column prop="fullName" label="所属小区" />
-            <el-table-column prop="buildingId" label="所属楼栋" />
-            <el-table-column prop="houseName" label="所属单元" />
-            <el-table-column prop="houseCode" label="房屋编码" />
+          <el-table :data="list" v-loading="loading" height="500" element-loading-text="加载中"
+                    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)">
+            <el-table-column label="序号" type="index" width="80"/>
+            <el-table-column prop="doorName" label="门牌号"/>
+            <el-table-column prop="fullName" label="所属小区"/>
+            <el-table-column prop="buildingId" label="所属楼栋"/>
+            <el-table-column prop="houseName" label="所属单元"/>
+            <el-table-column prop="houseCode" label="房屋编码"/>
             <el-table-column prop="rentFlag" label="房屋状态">
               <template slot-scope="scope">
                 <!-- 1：出租 0：自住 2：闲置 3：未售出 -->
@@ -52,11 +61,11 @@
                 <span>{{ getHouseType(scope.row.houseType) }}</span>
               </template>
             </el-table-column>
-            <el-table-column prop="ownerName" label="房主姓名" />
-            <el-table-column prop="ownerPhone" label="房主电话" />
+            <el-table-column prop="ownerName" label="房主姓名"/>
+            <el-table-column prop="ownerPhone" label="房主电话"/>
             <el-table-column label="操作" width="90" align="center">
-              <template slot-scope="scope">
-                <el-button type="text">查看</el-button>
+              <template slot-scope="{row}">
+                <el-button type="text" @click="$router.push('/dataBoard/overview/familyPortrait/?name='+row.doorName+'&user_id='+row.resiId+'&id='+$route.query.id+'&name2='+(homeText?homeText:''))">查看</el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -73,6 +82,7 @@
 import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
 import Title from "./Title/index.vue";
 import BreadCrumb from "@/views/dataBoard/cpts/personnel/components/Breadcrumb/index.vue";
+
 export default {
   name: "homeDetails",
   components: {
@@ -89,115 +99,14 @@ export default {
       homeMsg: {},
       list: [],
       homeText: "",
-      houseMountArr: [
-        // [
-        //   { doorName: "101", id: 1 },
-        //   { doorName: "102", id: 1 },
-        //   { doorName: "103", id: 1 },
-        //   { doorName: "104", id: 1 },
-        //   { doorName: "105", id: 1 },
-        // ],
-        // [
-        //   { doorName: "201", id: 1 },
-        //   { doorName: "202", id: 1 },
-        //   { doorName: "203", id: 1 },
-        //   { doorName: "204", id: 1 },
-        //   { doorName: "205", id: 1 },
-        // ],
-        // [
-        //   { doorName: "301", id: 1 },
-        //   { doorName: "302", id: 1 },
-        //   { doorName: "303", id: 1 },
-        //   { doorName: "304", id: 1 },
-        //   { doorName: "305", id: 1 },
-        // ],
-        // [
-        //   { doorName: "401", id: 1 },
-        //   { doorName: "402", id: 1 },
-        //   { doorName: "403", id: 1 },
-        //   { doorName: "404", id: 1 },
-        //   { doorName: "405", id: 1 },
-        // ],
-        // [
-        //   { doorName: "501", id: 1 },
-        //   { doorName: "502", id: 1 },
-        //   { doorName: "503", id: 1 },
-        //   { doorName: "504", id: 1 },
-        //   { doorName: "505", id: 1 },
-        // ],
-        // [
-        //   { doorName: "601", id: 1 },
-        //   { doorName: "602", id: 1 },
-        //   { doorName: "603", id: 1 },
-        //   { doorName: "604", id: 1 },
-        //   { doorName: "605", id: 1 },
-        // ],
-        // [
-        //   { doorName: "701", id: 1 },
-        //   { doorName: "702", id: 1 },
-        //   { doorName: "703", id: 1 },
-        //   { doorName: "704", id: 1 },
-        //   { doorName: "705", id: 1 },
-        // ],
-        // [
-        //   { doorName: "801", id: 1 },
-        //   { doorName: "802", id: 1 },
-        //   { doorName: "803", id: 1 },
-        //   { doorName: "804", id: 1 },
-        //   { doorName: "805", id: 1 },
-        // ],
-        // [
-        //   { doorName: "901", id: 1 },
-        //   { doorName: "902", id: 1 },
-        //   { doorName: "903", id: 1 },
-        //   { doorName: "904", id: 1 },
-        //   { doorName: "905", id: 1 },
-        // ],
-        // [
-        //   { doorName: "1001", id: 1 },
-        //   { doorName: "1002", id: 1 },
-        //   { doorName: "1003", id: 1 },
-        //   { doorName: "1004", id: 1 },
-        //   { doorName: "1005", id: 1 },
-        // ],
-        // [
-        //   { doorName: "1101", id: 1 },
-        //   { doorName: "1102", id: 1 },
-        //   { doorName: "1103", id: 1 },
-        //   { doorName: "1104", id: 1 },
-        //   { doorName: "1105", id: 1 },
-        // ],
-        // [
-        //   { doorName: "1201", id: 1 },
-        //   { doorName: "1202", id: 1 },
-        //   { doorName: "1203", id: 1 },
-        //   { doorName: "1204", id: 1 },
-        //   { doorName: "1205", id: 1 },
-        // ],
-        // [
-        //   { doorName: "1301", id: 1 },
-        //   { doorName: "1302", id: 1 },
-        //   { doorName: "1303", id: 1 },
-        //   { doorName: "1304", id: 1 },
-        //   { doorName: "1305", id: 1 },
-        // ],
-        // [
-        //   { doorName: "1401", id: 1 },
-        //   { doorName: "1402", id: 1 },
-        //   { doorName: "1403", id: 1 },
-        //   { doorName: "1404", id: 1 },
-        //   { doorName: "1405", id: 1 },
-        // ],
-        // [
-        //   { doorName: "1501", id: 1 },
-        //   { doorName: "1502", id: 1 },
-        //   { doorName: "1503", id: 1 },
-        //   { doorName: "1504", id: 1 },
-        //   { doorName: "1505", id: 1 },
-        // ],
-      ],
+      houseMountArr: [],
     };
   },
+  watch: {
+    "$route.query.id"() {
+      this.getList();
+    }
+  },
   mounted() {
     this.getList();
   },
@@ -235,15 +144,19 @@ export default {
 
     getList() {
       this.loading = true;
-      this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=1689829742860771329`).then((res) => {
+      this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + this.$route.query.id).then((res) => {
         const {
           code,
-          data: { houseList, unitInfo },
+          data: {houseList, unitInfo},
         } = res.data;
         if (code === 0) {
+          let unitInfos = unitInfo || {}
           this.list = houseList;
-          this.homeMsg = unitInfo;
-          this.homeText = unitInfo.quartersName + unitInfo.buildingName + unitInfo.unitNum + "单元";
+          this.homeMsg = unitInfos;
+          this.homeText = (unitInfos.quartersName ? unitInfos.quartersName : '') +
+              (unitInfos.buildingName ? unitInfos.buildingName : '') +
+              (unitInfos.unitNum  ? unitInfos.unitNum + "单元" : '');
+          console.log( this.homeText,' this.homeText')
           this.houseMountArr = this.getDoorNameList(this.list);
           this.loading = false;
         } else {
@@ -276,6 +189,7 @@ export default {
 
 <style scoped lang="scss">
 @import "@/assets/scss/dataBoard/table.scss";
+
 @mixin radio {
   display: inline-block;
   width: 90px;
@@ -289,25 +203,31 @@ export default {
   font-family: PingFang SC;
   font-weight: 500;
 }
+
 .homeWrap {
   .bread {
     margin-bottom: 25px;
   }
+
   .apar_top {
     width: 100%;
+
     img {
       width: 100%;
     }
   }
+
   .apartment {
     display: flex;
     align-items: flex-end;
     justify-content: center;
+
     .apar_comtent {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
+
       .apar_center {
         min-width: 244px;
         max-width: 488px;
@@ -319,18 +239,21 @@ export default {
         display: flex;
         align-items: flex-end;
         flex-direction: column-reverse;
+
         .apar_center_flex {
           width: 100%;
           display: flex;
           flex-wrap: wrap-reverse;
           justify-content: center;
         }
+
         .floor {
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: space-between;
           margin-bottom: 20px;
+
           .households {
             height: 58px;
             background: url("@/assets/images/home/hasPeople.png") no-repeat;
@@ -347,14 +270,17 @@ export default {
           }
         }
       }
+
       .apar_bottom {
         width: 244px;
         margin-top: -1px;
+
         img {
           width: 100%;
         }
       }
     }
+
     .apar_right {
       margin-left: -3px;
     }
@@ -370,18 +296,21 @@ export default {
   .bg {
     margin-bottom: 50px;
     background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(13, 143, 243, 0) 100%);
+
     .miniGrid_red {
       @include radio;
       background: rgba(249, 86, 25, 0.2);
       border: 1px solid #f95619;
       color: #f95619;
     }
+
     .miniGrid_green {
       @include radio;
       background: rgba(249, 86, 25, 0.2);
       border: 1px solid #f95619;
       color: #f95619;
     }
+
     .miniGrid_yellow {
       @include radio;
       background: rgba(249, 86, 25, 0.2);
diff --git a/src/views/dataBoard/cpts/map/index.vue b/src/views/dataBoard/cpts/map/index.vue
index d660e902b..0aa25c1a6 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, 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";
@@ -31,6 +31,8 @@ let dotBgLayer;
 let dotLayer2;
 let searchMarker;
 let searchBgLayer;
+let numMarker;
+let pointMarker;
 
 export default {
   name: "l7",
@@ -128,6 +130,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    level: {
+      type: String,
+      default: ''
+    }
   },
   components: {
     cptPopup,
@@ -135,107 +141,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),
-              ],
-            },
-          })),
-      ];
-      return { type: "FeatureCollection", features: polygon };
-    },
-
-    dotData() {
-      const { dotList } = this;
-      return {
-        type: "FeatureCollection",
-        features: [
-          ...dotList
-            .filter((item) => item.latitude)
+            .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: "Point",
-                coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)],
+                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};
+    },
+
+    dotData() {
+      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)],
+                },
+              })),
         ],
       };
     },
 
     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)],
+                },
+              })),
         ],
       };
     },
@@ -281,7 +287,7 @@ export default {
     },
 
     iniMap() {
-      const { darkStyle, lightStyle, srcGridData } = this;
+      const {darkStyle, lightStyle, srcGridData} = this;
       if (!srcGridData) return false;
 
       let styleConfig = darkStyle;
@@ -340,36 +346,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);
@@ -383,22 +389,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") {
@@ -411,23 +417,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);
 
@@ -436,144 +442,168 @@ 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"));
       scene.addImage("pos-yellow", require("@/assets/img/shuju/grid/pos-yellow.png"));
-      posLayer = new PolygonLayer({
+
+      posLayer = new PointLayer({
         zIndex: 4,
+        name: 'gridPoint',
+        visible: false
       })
-        .source(polygonDotData)
-        .shape("name", [
-          // "pos-red",
-          "pos-green",
-          // "pos-yellow"
-        ])
-        .size(12)
-        .style({
-          offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直]
-          // rotation: 60,
-          // layerType: "fillImage",
-        });
-      // scene.addLayer(posLayer);
+          .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)
+      /*    if (this.level === 'grid') {
+            posLayer.show()
+          } else {
+            posLayer.hide()
+          }*/
       textLayer = new PolygonLayer({
         zIndex: 20,
       })
-        .source(polygonDotData)
-        .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) => {
-        // console.log("e", e);
-        // const { lng, lat } = e.lngLat;
-        // const popup = new Popup({
-        //   title: e.feature.properties.name,
-        //   html: e.feature.properties.center_addre,
-        //   lngLat: {
-        //     lng,
-        //     lat,
-        //   },
-        // });
-        // scene.addPopup(popup);
+        if (this.level === 'grid') {
+          return
+        }
         const popup = new Popup({
-          offsets: [0, 0],
+          offsets: [60, 60],
           closeButton: false,
           maxWidth: 400,
         })
-          .setLnglat(e.lngLat)
-          .setHTML(`<span>街道: ${e.feature.properties.name}</span><br><span>网格: ${e.feature.properties.center_addre}</span>`);
+            .setLnglat(e.lngLat)
+            .setHTML(`
+            <div class="jw-popup-container">
+                <div class="jw-popup-bg"></div>
+                <div class="jw-popup-con">
+                  <div class="jw-popup-title">
+                      ${e.feature.properties.name}
+                  </div>
+                   <div class="jw-popup-des">
+                      ${e.feature.properties.description ? e.feature.properties.description : ''}
+                  </div>
+                </div>
+          </div>
+`);
         scene.addPopup(popup);
       });
-
-      // polygonLayer.on("mousemove", (e) => {
-      //   polygonLayer.style({
-      //     raisingHeight: 0,
-      //   });
-      // });
       polygonLayer.on("click", (e) => {
+        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)
       });
 
-      // polygonLayer.on("unmousemove", (e) => {
-      //   polygonLayer.style({
-      //     raisingHeight: 0,
-      //   });
-      // });
+    },
+    clearMarkert() {
+      if (numMarker) {
+        scene.removeMarkerLayer(numMarker);
+
+      }
+      if (pointMarker) {
+        scene.removeMarkerLayer(pointMarker);
+      }
     },
 
     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) => {
@@ -588,17 +618,18 @@ 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]);
       });
@@ -606,13 +637,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) => {
@@ -627,13 +658,14 @@ 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) => {
+      });
     },
 
     // 把地图缩放等级在原来基础上大一点
@@ -655,18 +687,24 @@ export default {
     },
 
     updateGrid() {
-      const { polygonData, polygonDotData } = this;
+      const {polygonData, polygonDotData} = this;
       if (polygonLayer) {
         polygonLayer.setData(polygonData);
         lineLayer.setData(polygonData);
         textLayer.setData(polygonDotData);
-        posLayer.setData(polygonDotData);
+        /*       posLayer.setData(polygonDotData);
+               // let gridPoint = scene.getLayerByName('gridPoint')
+               if (this.level === 'grid') {
+                 posLayer.show()
+               } else {
+                 posLayer.hide()
+               }*/
         circleLayer.setData(polygonDotData);
       }
     },
 
     updateDot() {
-      const { dotData } = this;
+      const {dotData} = this;
       if (dotLayer) {
         console.log(dotData);
         dotLayer.setData(dotData);
@@ -675,7 +713,7 @@ export default {
     },
 
     updateDot2() {
-      const { dotData2: dotData } = this;
+      const {dotData2: dotData} = this;
       if (dotLayer2) {
         console.log(dotData);
         dotLayer2.setData(dotData);
@@ -738,22 +776,101 @@ 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()
+      pointMarker = new MarkerLayer({
+        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)
+        // 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
+        pointMarkerItem.on("mouseover", () => {
+          popup = new Popup({
+            offsets: [60, 60],
+            closeButton: false,
+            maxWidth: 400,
+          })
+              .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>
+                   <div class="jw-popup-num-list">
+                     <div>户数：<span>${data[i].houseNum ? data[i].houseNum : 0}</span></div>
+                     <div>需求：<span>${data[i].demandNum ? data[i].demandNum : 0}</span></div>
+                     <div>事件：<span>${data[i].eventNum ? data[i].eventNum : 0}</span></div>
+                     <div>重点人群：<span>${data[i].importanceNum ? data[i].importanceNum : 0}</span></div>
+                     <div>安全隐患：<span>${data[i].safetyNum ? data[i].safetyNum : 0}</span></div>
+                  </div>
+                </div>
+          </div>
+`);
+          scene.addPopup(popup);
+        });
+        pointMarkerItem.on("mouseout", () => {
+          popup.remove()
+        })
+        pointMarkerItem.on("click", () => {
+          this.$router.push('/homeDetails/index?id='+data[i].id)
+        })
+
+
+        pointMarker.addMarker(pointMarkerItem)
 
+      }
+      scene.addMarkerLayer(pointMarker);
+
+
+    },
+    setNum(data) {
+      if (numMarker) {
+        scene.removeMarkerLayer(numMarker);
+      }
+      numMarker = new MarkerLayer({
+        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;
+        const numMarkerItem = new Marker({
+          element: el,
+          offsets: [0, 40],
+        }).setLnglat([data[i].longitude * 1, data[i].latitude]);
+        numMarker.addMarker(numMarkerItem)
+      }
+      scene.addMarkerLayer(numMarker);
+    },
     async setDotMarker(item, posArr) {
       this.removeDotMarker();
       this.drawSearchBg(...posArr);
@@ -768,8 +885,8 @@ export default {
           closeOnClick: true,
           maxWidth: 400,
         })
-          .setLnglat(posArr)
-          .setDOMContent(this.$refs.popup.$el);
+            .setLnglat(posArr)
+            .setDOMContent(this.$refs.popup.$el);
         marker.setPopup(popup);
       }
 
@@ -805,8 +922,8 @@ export default {
           closeOnClick: true,
           maxWidth: 400,
         })
-          .setLnglat(posArr)
-          .setDOMContent(this.$refs.popup.$el);
+            .setLnglat(posArr)
+            .setDOMContent(this.$refs.popup.$el);
         scene.addPopup(popup);
       }
     },
@@ -851,6 +968,7 @@ export default {
           background-color: rgba(43, 51, 73, 0.82);
           background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), #000);
         }
+
         .gray {
           -webkit-filter: grayscale(100%);
           filter: grayscale(100%);
@@ -863,10 +981,18 @@ export default {
   /deep/ .l7-popup {
     z-index: 100;
   }
+
   /deep/ .l7-popup-content {
-    background: rgba(#fff, 1);
+    //background: rgba(#fff, 1);
+    background: rgba(3, 31, 73, 0.72);
+    border: 1px solid #74C9FF;
+    opacity: 0.9;
+    border-radius: 5px;
+    color: #fff;
     box-shadow: 0 0 20px 3px inset rgba(#22f, 0.1);
+    width: 416px;
   }
+
   /deep/ .l7-popup-close-button {
     padding: 4px;
     font-size: 36px;
@@ -877,6 +1003,7 @@ export default {
     width: 100%;
     height: 100%;
   }
+
   #searchMap {
     position: absolute;
     width: 200px;
@@ -884,6 +1011,7 @@ export default {
     visibility: hidden;
     pointer-events: none;
   }
+
   .btn {
     position: absolute;
     bottom: 0;
@@ -897,5 +1025,108 @@ export default {
     background-color: rgba(#000, 0.2);
     cursor: pointer;
   }
+  /deep/ .label-num-class {
+    font-size: 16px;
+    font-weight: 500;
+    color: #FFFFFF;
+    background: rgba(3, 31, 73, 0.72);
+    border: 1px solid #74C9FF;
+    opacity: 0.9;
+    border-radius: 100px;
+    padding: 3px 13px;
+  }
+
+  /deep/ .l7-popup-tip {
+    display: none;
+  }
+
+  /deep/ .jw-popup-bg {
+    background: url('@/assets/images/overview/map-pop-img.png') no-repeat;
+    width: 80px;
+    height: 80px;
+    margin-right: 10px;
+  }
+
+  /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%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 16px;
+  }
+
+  /deep/ .jw-popup-des {
+    font-size: 14px;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 22px;
+  }
+
+  /deep/ .label-point-class {
+    width: 32px;
+    height: 32px;
+    background-repeat: no-repeat;
+
+    &.green {
+      background-image: url("@/assets/images/overview/green.png");
+    }
+
+    &.red {
+      background-image: url("@/assets/images/overview/red.png");
+    }
+
+    &.yellow {
+      background-image: url("@/assets/images/overview/yellow.png");
+    }
+  }
+
+  /deep/ .jw-popup-type {
+    margin: 16px 0 21px;
+
+    .red {
+      color: #FC561F;
+    }
+
+    .yellow {
+      color: #FAB93F;
+    }
+
+    .green {
+      color: #08EBAD;
+    }
+  }
+
+  /deep/ .jw-popup-num-list {
+    display: flex;
+    flex-wrap: wrap;
+
+    & > div {
+      flex: 0 0 131px;
+      width: 131px;
+      height: 14px;
+      font-size: 14px;
+      font-weight: 400;
+      margin-bottom: 15px;
+
+      span {
+        font-size: 18px;
+        font-weight: 500;
+        color: #FFAA01;
+      }
+    }
+  }
 }
+
 </style>
diff --git a/src/views/dataBoard/overview/components/jdwgy.vue b/src/views/dataBoard/overview/components/jdwgy.vue
index c019a6c93..c23e13306 100644
--- a/src/views/dataBoard/overview/components/jdwgy.vue
+++ b/src/views/dataBoard/overview/components/jdwgy.vue
@@ -102,7 +102,9 @@ export default {
       if (level == "grid") {
         this.$http
           .get(
-            "/actual/base/streetOverview/queryPersonnelGridGroup?personnelType=unit&level=" +
+            "/actual/base/streetOverview/queryPersonnelGridGroup?personnelType="+
+              peopleType
+              +"&level=" +
               level +
               "&orgId=" +
               orgId
@@ -110,6 +112,7 @@ export default {
           .then(({ data: { data } }) => {
             this.loading = false;
             this.wglist = data;
+            this.$emit('setPoint',data.filter(item => item.longitude && item.latitude))
           });
       } else {
         this.$http
@@ -124,17 +127,27 @@ export default {
           .then(({ data: { data } }) => {
             this.loading = false;
             this.list = data.personnelInfoVOList;
+            this.$emit('setNum',data.orgPersonnelVOList)
           });
       }
     },
     handleClick(item) {
       console.log("handleClick::", item);
-      this.$router.push({
-        path: "/dataBoard/overview/resident",
-        query: {
-          user_id: item.id,
-        },
-      });
+      if (this.currentLevelData.orgLevel == "grid") {
+        this.$router.push({
+          path: "/homeDetails/index",
+          query: {
+            id: item.id,
+          },
+        });
+      } else {
+        this.$router.push({
+          path: "/dataBoard/overview/resident",
+          query: {
+            user_id: item.id,
+          },
+        });
+      }
     },
   },
 };
diff --git a/src/views/dataBoard/overview/components/map-top.vue b/src/views/dataBoard/overview/components/map-top.vue
index ab0097397..cd0649650 100644
--- a/src/views/dataBoard/overview/components/map-top.vue
+++ b/src/views/dataBoard/overview/components/map-top.vue
@@ -1,70 +1,118 @@
 <template>
   <div class="m-per">
-    <div :class="selectIndex === 0 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(0, 'staffAgency')">
-        <div>
-          <img src="~@/assets/images/shuju/overview/sqgzz-icon.png" />
-          社区工作者
-        </div>
-        <div>
-          <b>{{ numData.staffAgencyNum }}</b>
+    <template v-if="level != 'grid'">
+      <div class="item" :class="selectIndex === 'staffAgency' ? 'xz' : ''">
+        <div class="item-info" @click="selectIcon('staffAgency')">
+          <div>
+            <img src="~@/assets/images/shuju/overview/sqgzz-icon.png"/>
+            社区工作者
+          </div>
+          <div>
+            <b>{{ numData.staffAgencyNum }}</b>
+          </div>
         </div>
       </div>
-    </div>
-    <div :class="selectIndex === 1 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(1, 'staffGrid')">
-        <div>
-          <img src="~@/assets/images/shuju/overview/wgy-icon.png" />
-          网格员
-        </div>
-        <div>
-          <b>{{ numData.staffGridNum }}</b>
+      <div class="item" :class="selectIndex === 'staffGrid' ? 'xz' : ''">
+        <div class="item-info" @click="selectIcon('staffGrid')">
+          <div>
+            <img src="~@/assets/images/shuju/overview/wgy-icon.png"/>
+            网格员
+          </div>
+          <div>
+            <b>{{ numData.staffGridNum }}</b>
+          </div>
         </div>
       </div>
-    </div>
-    <div :class="selectIndex === 2 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(2, 'chief')">
-        <div>
-          <img src="~@/assets/images/shuju/overview/lzz-icon.png" />
-          楼组/单元长
+      <div class="item" :class="selectIndex === 'chief' ? 'xz' : ''">
+        <div class="item-info" @click="selectIcon( 'chief')">
+          <div>
+            <img src="~@/assets/images/shuju/overview/lzz-icon.png"/>
+            楼组/单元长
+          </div>
+          <div>
+            <b>{{ numData.chiefNum }}</b>
+          </div>
         </div>
-        <div>
-          <b>{{ numData.chiefNum }}</b>
+      </div>
+      <div class="item" :class="selectIndex === 'publicWelfareNum' ? 'xz' : ''">
+        <div class="item-info" @click="selectIcon('publicWelfareNum')">
+          <div>
+            <img src="~@/assets/images/shuju/overview/gyg-icon.png"/>
+            公益岗
+          </div>
+          <div>
+            <b>{{ numData.publicWelfareNum }}</b>
+          </div>
         </div>
       </div>
-    </div>
-    <div :class="selectIndex === 3 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(3, 'publicWelfareNum')">
-        <div>
-          <img src="~@/assets/images/shuju/overview/gyg-icon.png" />
-          公益岗
+      <div class="item" :class="selectIndex === 'staffDepartment' ? 'xz' : ''">
+        <div class="item-info" @click="selectIcon('staffDepartment')">
+          <div>
+            <img src="~@/assets/images/shuju/overview/dwzz-icon.png"/>单位/组织
+          </div>
+          <div>
+            <b>{{ numData.staffDepartmentNum }}</b>
+          </div>
         </div>
-        <div>
-          <b>{{ numData.publicWelfareNum }}</b>
+      </div>
+      <div class="item" :class="selectIndex === 'volunteer'? 'xz':''">
+        <div class="item-info" @click="selectIcon('volunteer')">
+          <div>
+            <img src="~@/assets/images/shuju/overview/zyz-icon.png"/>
+            志愿者
+          </div>
+          <div>
+            <b>{{ numData.volunteerNum }}</b>
+          </div>
         </div>
       </div>
-    </div>
-    <div :class="selectIndex === 4 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(4, 'staffDepartment')">
-        <div>
-          <img src="~@/assets/images/shuju/overview/dwzz-icon.png" />单位/组织
+    </template>
+    <template v-else>
+      <div class="item" :class="selectIndex === 'unit' ? 'xz' : ''" @click="selectIcon('unit')">
+        <div class="item-info" >
+          <div>
+            <img src="~@/assets/images/overview/icon_wg.png"/>
+            微网格
+          </div>
+          <div>
+            <b>{{ numData.unitNum }}</b>
+          </div>
         </div>
-        <div>
-          <b>{{ numData.staffDepartmentNum }}</b>
+      </div>
+      <div class="item" :class="selectIndex === 'building' ? 'xz' : ''" @click="selectIcon('building')">
+        <div class="item-info">
+          <div>
+            <img src="~@/assets/images/overview/icon_ld.png"/>
+            楼栋
+          </div>
+          <div>
+            <b>{{ numData.buldingNum }}</b>
+          </div>
         </div>
       </div>
-    </div>
-    <div :class="selectIndex === 5 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(5, 'volunteer')">
-        <div>
-          <img src="~@/assets/images/shuju/overview/zyz-icon.png" />
-          志愿者
+      <div class="item" >
+        <div class="item-info">
+          <div>
+            <img src="~@/assets/images/overview/icon_fw.png"/>
+            房屋
+          </div>
+          <div>
+            <b>{{ numData.houseNum }}</b>
+          </div>
         </div>
-        <div>
-          <b>{{ numData.volunteerNum }}</b>
+      </div>
+      <div class="item" >
+        <div class="item-info">
+          <div>
+            <img src="~@/assets/images/overview/icon_jm.png"/>
+            居民
+          </div>
+          <div>
+            <b>{{ numData.residentNum }}</b>
+          </div>
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 <script>
@@ -75,6 +123,10 @@ export default {
       type: Object,
       default: {},
     },
+    level: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -90,30 +142,30 @@ export default {
     },
   },
   methods: {
-    selectIcon(num, type) {
-      this.selectIndex = num;
+    selectIcon(type) {
+      this.selectIndex = type;
       this.$emit("changeType", type);
     },
     getData(item) {
       this.$http
-        .get(
-          "/actual/base/streetOverview/mapOrgSum?level=" +
-            item.orgLevel +
-            "&orgId=" +
-            item.orgId
-        )
-        .then(({ data: { data } }) => {
-          this.numData = data;
-        });
+          .get(
+              "/actual/base/streetOverview/mapOrgSum?level=" +
+              item.orgLevel +
+              "&orgId=" +
+              item.orgId
+          )
+          .then(({data: {data}}) => {
+            this.numData = data;
+          });
     },
   },
 };
 </script>
 
 <style
-  lang="scss"
-  src="@/assets/scss/dataBoard/overview/index.scss"
-  scoped
+    lang="scss"
+    src="@/assets/scss/dataBoard/overview/index.scss"
+    scoped
 ></style>
 <style lang="scss" scoped>
 .xz {
diff --git a/src/views/dataBoard/overview/familyPortrait/index.vue b/src/views/dataBoard/overview/familyPortrait/index.vue
new file mode 100644
index 000000000..7af3bffe8
--- /dev/null
+++ b/src/views/dataBoard/overview/familyPortrait/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="breadcrumb">
+      <Breadcrumb :list="breadcrumbList"/>
+    </div>
+    <Family/>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from '@/views/dataBoard/satisfactionEval/components/Breadcrumb'
+import Family from '@/views/dataBoard/cpts/family'
+export default {
+  name: "dissatisfiedPersonnelDetail",
+  components: {
+    Breadcrumb,
+    Family
+  },
+  data() {
+    return {
+      breadcrumbList: [{
+        path: '/dataBoard/overview/index',
+        name: '概览'
+      }, {
+        path: '/homeDetails/index',
+        name: '画像匹配同类不满意人员'
+      }, {
+        path: '',
+        name: ''
+      }],
+    }
+  },
+  watch: {
+    '$route.query'() {
+      this.$set(this.breadcrumbList[1], 'name', this.$route.query.name2)
+      this.$set(this.breadcrumbList[1], 'path', this.breadcrumbList[1].path + '?id=' +this.$route.query.id)
+      this.$set(this.breadcrumbList[2], 'name', this.$route.query.name)
+      this.breadcrumbList[2].name = this.$route.query.name
+    }
+  },
+  mounted() {
+    this.$set(this.breadcrumbList[1], 'name', this.$route.query.name2)
+    this.$set(this.breadcrumbList[1], 'path', this.breadcrumbList[1].path + '?id=' +this.$route.query.id)
+    this.$set(this.breadcrumbList[2], 'name', this.$route.query.name)
+    this.breadcrumbList[2].name = this.$route.query.name
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sub-title {
+  background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center;
+  font-size: 18px;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 22px;
+  padding-left: 26px;
+  margin-bottom: 20px;
+}
+.breadcrumb {
+  margin-bottom: 25px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dataBoard/overview/index.vue b/src/views/dataBoard/overview/index.vue
index 8d2151491..5f10ab95b 100644
--- a/src/views/dataBoard/overview/index.vue
+++ b/src/views/dataBoard/overview/index.vue
@@ -9,7 +9,7 @@
       <div class="g-left">
         <div class="m-box">
           <title-box
-            :text="`${
+              :text="`${
               currentLevel === 'district'
                 ? '区'
                 : currentLevel === 'street'
@@ -21,12 +21,12 @@
                 : ''
             }介绍`"
           />
-          <jdjs :currentLevelData="currentLevelData" />
+          <jdjs :currentLevelData="currentLevelData"/>
         </div>
 
         <div class="m-box">
           <title-box
-            :text="`${
+              :text="`${
               currentLevel === 'district'
                 ? '区'
                 : currentLevel === 'street'
@@ -38,123 +38,137 @@
                 : ''
             }图谱画像`"
           />
-          <jdtphx :currentLevelData="currentLevelData" :id="orgId" />
+          <jdtphx :currentLevelData="currentLevelData" :id="orgId"/>
         </div>
       </div>
       <div class="g-center">
         <div class="m-map" style="overflow: hidden">
           <map-top
-            :currentLevelData="currentLevelData"
-            @changeType="changeType"
+              :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" />
+          <grid-map
+              ref="map"
+              @clickAgency="clickAgencyItem"
+              :srcGridData="orgData"
+              @clickDotBtn="handleClickDotBtn"
+              :level="currentLevel"
+          />
         </div>
         <div class="m-box m-rybox">
-          <title-box :text="`${customerName}${peopleList[peopleType]}`" />
+          <title-box :text="`${customerName}${peopleList[peopleType]}`"/>
           <jdwgy
-            :peopleType="peopleType"
-            :currentLevelData="currentLevelData"
+              :peopleType="peopleType"
+              :currentLevelData="currentLevelData"
+              @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"
+            v-if="currentLevel === 'community' || currentLevel === 'grid'"
+            class="m-box"
         >
-          <title-box text="人房数据动态更新" />
+          <title-box text="人房数据动态更新"/>
           <Tabs
-            v-model="dynamicType"
-            :list="dynamicTypeList"
-            v-if="currentLevel === 'community'"
-            @changeVal="dynamicTypeChange"
+              v-model="dynamicType"
+              :list="dynamicTypeList"
+              v-if="currentLevel === 'community'"
+              @changeVal="dynamicTypeChange"
           />
           <DynamicHumanRoomData
-            :currentLevelData="currentLevelData"
-            v-if="dynamicType === 1"
+              :currentLevelData="currentLevelData"
+              v-if="dynamicType === 1"
           />
           <GridUpdateRanking
-            :currentLevelData="currentLevelData"
-            v-if="dynamicType === 2"
+              :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"
+              :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"
+              v-model="eventType"
+              :list="eventTypeList"
+              @changeVal="eventTypeChange"
           />
           <EventAndFollowUp
-            :currentLevelData="currentLevelData"
-            :date="sjhfDate"
-            v-if="eventType === 1"
+              :currentLevelData="currentLevelData"
+              :date="sjhfDate"
+              v-if="eventType === 1"
           />
           <FollowUp
-            :currentLevelData="currentLevelData"
-            :date="sjhfDate"
-            v-if="eventType === 2"
+              :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"
+              :currentLevelData="currentLevelData"
+              :date="sqwggxDate"
           />
         </div>
       </div>
     </div>
 
-    <cpt-loading v-show="false" />
+    <cpt-loading v-show="false"/>
   </div>
 </template>
 
@@ -179,8 +193,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",
@@ -223,7 +237,7 @@ export default {
       currentLevelData: {
         orgId: this.$store.state.chooseArea.chooseName.orgId,
         orgLevel: this.$store.state.chooseArea.chooseName.level,
-        meta: { title: "人房总览" },
+        meta: {title: "人房总览"},
       },
       breadList: [
         {
@@ -231,7 +245,7 @@ export default {
           orgLevel: "",
           id: "",
           level: "",
-          meta: { title: "人房总览" },
+          meta: {title: "人房总览"},
         },
       ],
       peopleList: {
@@ -299,7 +313,7 @@ export default {
   methods: {
     changeCustomerName() {
       this.customerName =
-        localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
+          localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
     },
     changeType(e) {
       this.peopleType = e;
@@ -337,11 +351,12 @@ export default {
       }
     },
 
-    clickBreadItem({ item }) {
+    clickBreadItem({item}) {
       this.toBread(item);
     },
 
     clickAgencyItem(item) {
+      this.$refs.map.clearMarkert()
       if (item.id) {
         this.customerName = item.name || item.meta.title;
         this.currentLevelData = {
@@ -350,7 +365,7 @@ export default {
         };
       } else {
         this.customerName =
-          localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
+            localStorage.getItem("customerNameDataBoard") || "数据分析可视化平台";
         this.currentLevelData = {
           ...this.$store.state.chooseArea.chooseName,
           orgLevel: this.$store.state.chooseArea.chooseName.level,
@@ -359,7 +374,7 @@ export default {
       this.toBread({
         orgId: item.id,
         orgLevel: item.level,
-        meta: { title: item.name },
+        meta: {title: item.name},
       });
     },
     goBackMap() {
@@ -367,13 +382,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);
@@ -386,18 +401,49 @@ export default {
       }
       this.$refs.map.setDotMarker(item, [parseFloat(item.longitude), parseFloat(item.latitude)]);
     },
-
+    setNum(data) {
+      console.log(this.orgData,data,'111')
+      // data
+      let params = []
+      let org = this.orgData.children
+      org.forEach(item => {
+        data.forEach(item2 => {
+          if (item2.orgId === item.id && item.coordinates) {
+            params.push({
+              ...item2,
+              peopleType: this.peopleList[this.peopleType],
+              latitude: item.latitude,
+              longitude: item.longitude
+            })
+          }
+        })
+      })
+      if (params.length) {
+        this.$refs.map.setNum(params)
+      }
+    },
+    setPoint(data) {
+      if (data) {
+        this.$refs.map.setPoint(data)
+      }
+    },
     //获取地图上显示的组织数据
     async getMapData(
-      orgId = this.$store.state.chooseArea.chooseName.orgId,
-      level = this.$store.state.chooseArea.chooseName.level
+        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.org_id;
+        this.orgId = this.orgData.id;
+        console.log(this.orgId)
         this.orgLevel = this.orgData.level;
         this.currentLevel = this.orgData.agencyLevel;
+        this.currentLevelData = {
+          orgId: this.orgId,
+          orgLevel: this.currentLevel,
+        };
+        this.peopleType = this.currentLevel === 'grid'?'unit':'staffAgency';
       });
     },
 
@@ -405,20 +451,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,
@@ -429,7 +475,7 @@ export default {
             coordinates: item.coordinates || "",
           };
         });
-        this.orgData = { ...orgData };
+        this.orgData = {...orgData};
       } else {
         this.$message.error(msg);
       }
@@ -443,7 +489,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;
@@ -465,10 +511,12 @@ export default {
   top: 100px;
   left: 16px;
   right: 0;
+
   img {
     height: 36px;
     width: 36px;
   }
+
   img:hover {
     cursor: pointer;
   }