修改对接地图

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;

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",

src/views/dataBoard/cpts/homeDetails/index.vue

@@ -1,13 +1,21 @@
 <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">
@@ -33,7 +41,8 @@
       </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 :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="所属小区"/>
@@ -55,8 +64,8 @@
             <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},
         } = 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);

src/views/dataBoard/cpts/map/index.vue

@@ -11,7 +11,7 @@
 <script>
 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 {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";
@@ -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,
@@ -465,12 +471,14 @@ export default {
             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", [
@@ -480,16 +488,21 @@ export default {
           ])
           .size(12)
           .style({
-          offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直]
-          // rotation: 60,
-          // layerType: "fillImage",
+            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)
+          .source(polygonData)
           .color("name", styleConfig.textColor)
           .shape("name", "text")
           .size(16)
@@ -507,42 +520,59 @@ export default {
       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>`);
+            .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) {
@@ -594,7 +624,8 @@ export default {
         }
       });
 
-      dotBgLayer.on("unmousemove", (e) => {});
+      dotBgLayer.on("unmousemove", (e) => {
+      });
     },
 
     iniMapDot2(scene) {
@@ -633,7 +664,8 @@ export default {
         }
       });
 
-      dotLayer2.on("unmousemove", (e) => {});
+      dotLayer2.on("unmousemove", (e) => {
+      });
     },
 
     // 把地图缩放等级在原来基础上大一点
@@ -660,7 +692,13 @@ export default {
         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);
       }
     },
@@ -753,7 +791,86 @@ export default {
         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);
@@ -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>

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);
+      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,
           },
         });
+      }
     },
   },
 };

src/views/dataBoard/overview/components/map-top.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="m-per">
-    <div :class="selectIndex === 0 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(0, 'staffAgency')">
+    <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"/>
             社区工作者
@@ -11,8 +12,8 @@
           </div>
         </div>
       </div>
-    <div :class="selectIndex === 1 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(1, 'staffGrid')">
+      <div class="item" :class="selectIndex === 'staffGrid' ? 'xz' : ''">
+        <div class="item-info" @click="selectIcon('staffGrid')">
           <div>
             <img src="~@/assets/images/shuju/overview/wgy-icon.png"/>
             网格员
@@ -22,8 +23,8 @@
           </div>
         </div>
       </div>
-    <div :class="selectIndex === 2 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(2, 'chief')">
+      <div class="item" :class="selectIndex === 'chief' ? 'xz' : ''">
+        <div class="item-info" @click="selectIcon( 'chief')">
           <div>
             <img src="~@/assets/images/shuju/overview/lzz-icon.png"/>
             楼组/单元长
@@ -33,8 +34,8 @@
           </div>
         </div>
       </div>
-    <div :class="selectIndex === 3 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(3, 'publicWelfareNum')">
+      <div class="item" :class="selectIndex === 'publicWelfareNum' ? 'xz' : ''">
+        <div class="item-info" @click="selectIcon('publicWelfareNum')">
           <div>
             <img src="~@/assets/images/shuju/overview/gyg-icon.png"/>
             公益岗
@@ -44,8 +45,8 @@
           </div>
         </div>
       </div>
-    <div :class="selectIndex === 4 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(4, 'staffDepartment')">
+      <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>
@@ -54,8 +55,8 @@
           </div>
         </div>
       </div>
-    <div :class="selectIndex === 5 ? 'item xz' : 'item'">
-      <div class="item-info" @click="selectIcon(5, 'volunteer')">
+      <div class="item" :class="selectIndex === 'volunteer'? 'xz':''">
+        <div class="item-info" @click="selectIcon('volunteer')">
           <div>
             <img src="~@/assets/images/shuju/overview/zyz-icon.png"/>
             志愿者
@@ -65,6 +66,53 @@
           </div>
         </div>
       </div>
+    </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>
+      <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 class="item" >
+        <div class="item-info">
+          <div>
+            <img src="~@/assets/images/overview/icon_fw.png"/>
+            房屋
+          </div>
+          <div>
+            <b>{{ numData.houseNum }}</b>
+          </div>
+        </div>
+      </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>
+    </template>
   </div>
 </template>
 <script>
@@ -75,6 +123,10 @@ export default {
       type: Object,
       default: {},
     },
+    level: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -90,8 +142,8 @@ export default {
     },
   },
   methods: {
-    selectIcon(num, type) {
-      this.selectIndex = num;
+    selectIcon(type) {
+      this.selectIndex = type;
       this.$emit("changeType", type);
     },
     getData(item) {

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>

src/views/dataBoard/overview/index.vue

@@ -46,17 +46,26 @@
           <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"/>
           </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]}`"/>
           <jdwgy
               :peopleType="peopleType"
               :currentLevelData="currentLevelData"
+              @setNum="setNum"
+              @setPoint="setPoint"
           />
         </div>
       </div>
@@ -70,7 +79,8 @@
         <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"/>
@@ -78,7 +88,8 @@
         <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"/>
@@ -109,7 +120,8 @@
         <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
@@ -120,7 +132,8 @@
         <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
@@ -143,7 +156,8 @@
         <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
@@ -342,6 +356,7 @@ export default {
     },
 
     clickAgencyItem(item) {
+      this.$refs.map.clearMarkert()
       if (item.id) {
         this.customerName = item.name || item.meta.title;
         this.currentLevelData = {
@@ -386,7 +401,32 @@ 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,
@@ -395,9 +435,15 @@ export default {
       const url = "org_map";
       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';
       });
     },
 
@@ -465,10 +511,12 @@ export default {
   top: 100px;
   left: 16px;
   right: 0;
+
   img {
     height: 36px;
     width: 36px;
   }
+
   img:hover {
     cursor: pointer;
   }