diff --git a/src/assets/images/home/top1.png b/src/assets/images/home/top1.png
new file mode 100644
index 000000000..743df5b0d
Binary files /dev/null and b/src/assets/images/home/top1.png differ
diff --git a/src/assets/scss/dataBoard/renfang/index.scss b/src/assets/scss/dataBoard/renfang/index.scss
index c5ff2c52a..5f277248e 100644
--- a/src/assets/scss/dataBoard/renfang/index.scss
+++ b/src/assets/scss/dataBoard/renfang/index.scss
@@ -789,7 +789,7 @@
 	}
 
 	&-item {
-		width: 450px;
+		width: 33.3%;
 		height: 400px;
 	}
 }
\ No newline at end of file
diff --git a/src/assets/scss/dataBoardMain.scss b/src/assets/scss/dataBoardMain.scss
index 87919319e..a7d3a4d66 100644
--- a/src/assets/scss/dataBoardMain.scss
+++ b/src/assets/scss/dataBoardMain.scss
@@ -44,9 +44,9 @@
     z-index: 1;
     width: 100%;
     height: 101px;
-    background-image: url(../images/home/top.png);
+    background-image: url(../images/home/top1.png);
     background-repeat: no-repeat;
-    background-position: top center;
+    background-position: top center;    
     background-size: 100%;
 
     .back {
diff --git a/src/components/Dialog/index.vue b/src/components/Dialog/index.vue
index 636721f65..3257b768d 100644
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="m-pop">
-    <div class="wrap">
+    <div class="wrap" :style="{ width: width + 'px' }">
       <div>
         <div class="title">
           <img src="@/assets/images/shuju/main/card-subtitle-icon.png" />
@@ -28,6 +28,10 @@ export default {
       type: String,
       default: "详情",
     },
+    width: {
+      type: Number,
+      default: 820,
+    },
   },
 
   components: {},
@@ -62,11 +66,12 @@ export default {
     box-sizing: border-box;
     margin: 80px auto 0;
     padding: 24px 16px;
-    width: 820px;
+    // width: 820px;
     background: #00023a;
     box-shadow: inset 0px 0px 40px 0px rgba(26, 149, 255, 0.45);
     border-radius: 4px;
     border: 1px solid #1a95ff;
+    height: auto !important;
 
     .cnt {
       overflow-y: auto;
diff --git a/src/components/GridTree/nodeWrap.vue b/src/components/GridTree/nodeWrap.vue
index d66160927..c22d450d1 100644
--- a/src/components/GridTree/nodeWrap.vue
+++ b/src/components/GridTree/nodeWrap.vue
@@ -17,7 +17,7 @@
             <div class="condition-node">
               <div class="condition-node-box">
                 <div class="auto-judge">
-                  <div v-if="item.laneLevel >= 2 && item.laneLevel <= 5 && item.level !== 'building_chief'">
+                  <div v-if="getOnerSixLevelFlag(item)">
                     <div class="wgdzb">
                       <div :title="getAllName(item.organizationName)">{{ spliceNameFun(item.organizationName, 8) }}</div>
                       <div :title="getAllName(item.name)">{{ spliceNameFun(item.name, 12) }}</div>
@@ -30,7 +30,7 @@
                     </div>
                   </div>
                   <div v-if="item.level === 'unit_chief'">
-                    <div @click="gotoPersonnel" class="dyzxh" :title="item.name">
+                    <div @click="gotoPersonnel(item)" class="dyzxh" :title="item.name">
                       {{ spliceNameFun(item.name, 3) }}
                     </div>
                   </div>
@@ -57,6 +57,7 @@ export default {
   data() {
     return {
       homeTypeArr: [],
+      sixLevelArr: ["province", "city", "district", "street", "community", "grid_manager"],
     };
   },
   mounted() {},
@@ -74,8 +75,28 @@ export default {
       return row;
     },
 
-    gotoPersonnel() {
-      this.$router.push("/organizational/microgrid");
+    getOnerSixLevelFlag(item) {
+      return this.sixLevelArr.includes(item.level);
+    },
+
+    findParentParentId(nodeConfig, pid) {
+      let parentParentId = "";
+      if (nodeConfig.id === pid) {
+        return nodeConfig.pid;
+      } else {
+        if (nodeConfig.children && nodeConfig.children.length > 0) {
+          for (let i = 0; i < nodeConfig.children.length; i++) {
+            parentParentId = this.findParentParentId(nodeConfig.children[i], pid);
+            if (parentParentId) {
+              return parentParentId;
+            }
+          }
+        }
+      }
+    },
+    gotoPersonnel(item) {
+      const grandPid = this.findParentParentId(this.nodeConfig, item.pid);
+      this.$router.push(`/organizational/microgrid/${item.id}/${grandPid}`);
     },
   },
 };
@@ -138,6 +159,7 @@ export default {
     margin-top: -12px;
     background-image: url(~@/assets/images/home/dyzxhTree.png);
     background-size: 100%;
+    cursor: pointer;
   }
   .lxjt {
     @include spanLevel;
diff --git a/src/components/JwTree/nodeWrap.vue b/src/components/JwTree/nodeWrap.vue
index 9270e78c7..335bb9119 100644
--- a/src/components/JwTree/nodeWrap.vue
+++ b/src/components/JwTree/nodeWrap.vue
@@ -17,7 +17,7 @@
             <div class="condition-node">
               <div class="condition-node-box">
                 <div class="auto-judge">
-                  <div v-if="item.laneLevel >= 2 && item.laneLevel <= 6 && item.level !== 'building_chief'">
+                  <div v-if="getOnerSixLevelFlag(item)">
                     <div class="wgdzb">
                       <div :title="getAllName(item.organizationName)">{{ spliceNameFun(item.organizationName, 8) }}</div>
                       <div @click="gotoPersonnel" :title="getAllName(item.name)">{{ spliceNameFun(item.name, 12) }}</div>
@@ -57,6 +57,7 @@ export default {
   data() {
     return {
       homeTypeArr: [],
+      sixLevelArr: ["province", "city", "district", "street", "community", "grid_manager"],
     };
   },
   mounted() {},
@@ -74,6 +75,10 @@ export default {
       return row;
     },
 
+    getOnerSixLevelFlag(item) {
+      return this.sixLevelArr.includes(item.level);
+    },
+
     gotoPersonnel() {
       this.$router.push("/organizational/orgPersonnel");
     },
diff --git a/src/js/store/modules/chooseArea.js b/src/js/store/modules/chooseArea.js
index b16cba630..7d69a29d3 100644
--- a/src/js/store/modules/chooseArea.js
+++ b/src/js/store/modules/chooseArea.js
@@ -1,22 +1,25 @@
 const state = {
-  chooseName: "",
+    chooseName: {
+        orgId: '',
+        level: '',
+    },
 };
 
 const mutations = {
-  CHOOSE_NAME: (state, name) => {
-    state.chooseName = name;
-  },
+    CHOOSE_NAME: (state, name) => {
+        state.chooseName = name;
+    },
 };
 
 const actions = {
-  chooseName({ commit }, name) {
-    commit("CHOOSE_NAME", name);
-  },
+    chooseName({commit}, name) {
+        commit("CHOOSE_NAME", name);
+    },
 };
 
 export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions,
+    namespaced: true,
+    state,
+    mutations,
+    actions,
 };
diff --git a/src/router/index.js b/src/router/index.js
index 856cbd15b..adf278a25 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -422,7 +422,7 @@ export const dataBoardRoutes = {
       },
     },
     {
-      path: "/organizational/microgrid",
+      path: "/organizational/microgrid/:id/:pid",
       props: true,
       component: () => import("@/views/dataBoard/organizational/microgrid/index"),
       name: "Microgrid",
diff --git a/src/views/dataBoard/organizational/dangTree/index.vue b/src/views/dataBoard/organizational/dangTree/index.vue
index 015d83b53..29fa0ca9f 100644
--- a/src/views/dataBoard/organizational/dangTree/index.vue
+++ b/src/views/dataBoard/organizational/dangTree/index.vue
@@ -2,7 +2,7 @@
   <div class="wrap">
     <!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" -->
     <div class="content">
-      <div v-for="(item, index) in levelArr" :key="item" :class="[item === 9 || item === 10 ? 'lastLevel' : '', `flowLevel-${index + 1}`]" :style="{ height: item === 8 ? '90px' : '', lineHeight: item === 8 ? '90px' : '' }">
+      <div v-for="(item, index) in levelArr" :key="item" :class="[item > 9 ? 'lastLevel1' : '', item === 9 ? 'lastLevel' : '', `flowLevel-${index + 1}`]" :style="{ height: item === 8 ? '90px' : '', lineHeight: item === 8 ? '90px' : '' }">
         <div :class="[item === 8 ? 'otherTop' : '']">{{ getTitleNameMapFun(item) }}</div>
       </div>
       <el-row>
@@ -37,7 +37,6 @@ export default {
   },
   computed: {},
   mounted() {
-    // console.log(this.$store.state.chooseArea.chooseName);
     this.getTreeData();
   },
   methods: {
@@ -70,7 +69,7 @@ export default {
     getTreeData() {
       this.loading = true;
       this.$http
-        .get(`/actual/base/organizational/structure/partyCommitteeOrg?agencyId=${this.$store.state.chooseArea.chooseName}`)
+        .get(`/actual/base/organizational/structure/partyCommitteeOrg?agencyId=${this.$store.state.chooseArea.chooseName.orgId}`)
         .then((res) => {
           const {
             data: { code, data },
@@ -150,6 +149,10 @@ export default {
       height: 145px !important;
       margin-top: -45px !important;
     }
+    .lastLevel1 {
+      height: 145px !important;
+      margin-top: -37px !important;
+    }
 
     .flowLevel-1 {
       @include flowLevwlCommon;
diff --git a/src/views/dataBoard/organizational/gridTree/index.vue b/src/views/dataBoard/organizational/gridTree/index.vue
index ab36ba443..93605bb76 100644
--- a/src/views/dataBoard/organizational/gridTree/index.vue
+++ b/src/views/dataBoard/organizational/gridTree/index.vue
@@ -73,7 +73,7 @@ export default {
     getTreeData() {
       this.loading = true;
       this.$http
-        .get(`/gov/org/organizational/neighborhood/getGridCommitteeOrgTreeList?agencyId=${this.$store.state.chooseArea.chooseName}`)
+        .get(`/gov/org/organizational/neighborhood/getGridCommitteeOrgTreeList?agencyId=${this.$store.state.chooseArea.chooseName.orgId}`)
         .then((res) => {
           const {
             data: { code, data },
diff --git a/src/views/dataBoard/organizational/jwTree/index.vue b/src/views/dataBoard/organizational/jwTree/index.vue
index dedf7e80a..d44934d76 100644
--- a/src/views/dataBoard/organizational/jwTree/index.vue
+++ b/src/views/dataBoard/organizational/jwTree/index.vue
@@ -2,7 +2,7 @@
   <div class="wrap">
     <!-- v-on:wheel="zoomSize" :style="'transform: scale(' + nowVal / 100 + ');'" -->
     <div class="content">
-      <div v-for="(item, index) in levelArr" :key="item" :class="[item === 'unit_chief' || item === 'public_welfare_post' ? 'lastLevel' : '', `flowLevel-${index + 1}`]" :style="{ height: item === 'building_chief' ? '90px' : '', lineHeight: item === 'building_chief' ? '90px' : '' }">
+      <div v-for="(item, index) in levelArr" :key="item" :class="[item === 'unit_chief' ? 'lastLevel' : '', item === 'public_welfare_post' ? 'lastLevel1' : '', `flowLevel-${index + 1}`]" :style="{ height: item === 'building_chief' ? '90px' : '', lineHeight: item === 'building_chief' ? '90px' : '' }">
         <div :class="[item === 'building_chief' ? 'otherTop' : '']">{{ getTitleNameMapFun(item) }}</div>
       </div>
       <el-row>
@@ -68,7 +68,6 @@ export default {
           this.getDataPLevel(item.children);
         }
       });
-      console.log(this.levelArr);
       const myArray = [...new Set(this.levelArr)];
       this.levelArr = this.getLevelArrNum(myArray);
     },
@@ -76,7 +75,7 @@ export default {
     getTreeData() {
       this.loading = true;
       this.$http
-        .get(`/gov/org/organizational/neighborhood/getNeighborhoodCommitteeOrgTreeList?agencyId=${this.$store.state.chooseArea.chooseName}`)
+        .get(`/gov/org/organizational/neighborhood/getNeighborhoodCommitteeOrgTreeList?agencyId=${this.$store.state.chooseArea.chooseName.orgId}`)
         .then((res) => {
           const {
             data: { code, data },
@@ -155,6 +154,10 @@ export default {
       height: 145px !important;
       margin-top: -45px !important;
     }
+    .lastLevel1 {
+      height: 145px !important;
+      margin-top: -37px !important;
+    }
 
     .flowLevel-1 {
       @include flowLevwlCommon;
diff --git a/src/views/dataBoard/organizational/microgrid/components/popDetails.vue b/src/views/dataBoard/organizational/microgrid/components/popDetails.vue
index c153e5cf9..ed8354954 100644
--- a/src/views/dataBoard/organizational/microgrid/components/popDetails.vue
+++ b/src/views/dataBoard/organizational/microgrid/components/popDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <popup title="居民详情" @close="handleClose">
     <template v-slot:cnt>
-      <div class="m-info">
+      <div class="m-info" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)">
         <div class="subtitle">
           <i class="i-chunk"></i>
           <span>基本信息</span>
@@ -647,6 +647,7 @@
 
 <script>
 import popup from "@/views/dataBoard/cpts/popup";
+import { requestPostBi } from "@/js/dai/request-bipass";
 
 export default {
   name: "residentDetails",
@@ -661,150 +662,8 @@ export default {
 
   data() {
     return {
-      info: {
-        woca: true,
-        exs: false,
-        srs: true,
-        household: "--",
-        holdingrel: "--",
-        ethnic: "--",
-        community: "--",
-        user_id: "--",
-        census_type: "--",
-        aged: true,
-        spouse: "--",
-        mlsp: false,
-        ncp: true,
-        disable_idcard: "--",
-        volunteer: false,
-        village: "--",
-        disable_degree: "--",
-        marital: "--",
-        native_place: "--",
-        disable_type: "--",
-        building: "--",
-        disable_remark: "--",
-        skill: "--",
-        petitioner: true,
-        unemployed: true,
-        needs_group: "--",
-        hobby: "--",
-        unit: "--",
-        gender: "--",
-        retire_income: "--",
-        workunit: "--",
-        ufs: false,
-        birthday: "--",
-        in_person: false,
-        adisability: false,
-        household_remark: "--",
-        belief: "--",
-        education_remark: "--",
-        education: "--",
-        residence_current: "--",
-        career: "--",
-        empty_nest: false,
-        idcard: "--",
-        room: "--",
-        guardian: "--",
-        tenant: true,
-        residence: "--",
-        supporters: "--",
-        ser_ill: false,
-        ncd: true,
-        belief_remark: "--",
-        dementia: false,
-        disability: true,
-        telephone: "--",
-        income: "--",
-        native: "--",
-        crowd: false,
-        resident_remark: "--",
-        hobby_remark: "--",
-        retire_remark: "--",
-        special_popu: true,
-        street: "--",
-        float_popu: true,
-        supporters_relation: "--",
-        name: "--",
-        grid: "--",
-        retire_date: "--",
-
-        joinTime: "--",
-        positiveTime: "--",
-        branchId: "--",
-        flowFlag: "--",
-        flowActNum: "--",
-        partyJob: "--",
-        retiredFlag: "--",
-        centerFlag: "--",
-        joinBranchName: "--",
-        joinCommunityTime: "--",
-        longHolidayFlag: "--",
-        ensure_house_id: "--",
-        housingNature: "--",
-        securityType: "--",
-        certificateDate: "--",
-        subsidyNum: "--",
-        subsidyAmount: "--",
-        unemployed_id: "--",
-        originWorkUnit: "--",
-        unemploymentTime: "--",
-        unemploymentNum: "--",
-        employmentNum: "--",
-        specialSkill: "--",
-        unemploymentReason: "--",
-        employmentHardFlag: "--",
-        employmentWish: "--",
-        veteran_id: "--",
-        joinArmyTime: "--",
-        leaveArmyTime: "--",
-        serviceUnit: "--",
-        receiveUnit: "--",
-        settlementAmount: "--",
-        trainDesc: "--",
-        joinWarStartTime: "--",
-        joinWarEndTime: "--",
-        employmentSituation: "--",
-        pubWelfareJobFlag: "--",
-        united_front_id: "--",
-        duty: "--",
-        visitation: "--",
-        volunteer_id: "--",
-        volunteerCategory: "--",
-        volunteerRemark: "--",
-        old_people_id: "--",
-        oldSubsidy: "--",
-        special_id: "--",
-        specialCategoryCode: "--",
-        birth_record_id: "--",
-        birthplace: "--",
-        father: "--",
-        mother: "--",
-        count: "--",
-        reportDate: "--",
-        death_record_id: "--",
-        deathDate: "--",
-        deathReason: "--",
-        removeDate: "--",
-        removeReason: "--",
-        move_out_record_id: "--",
-        outOfTime: "--",
-        type: "--",
-        reason: "--",
-        deptId: "--",
-        villageId: "--",
-        villageName: "--",
-        buildId: "--",
-        buildName: "--",
-        unitId: "--",
-        unitName: "--",
-        homeId: "--",
-        homeName: "--",
-        address: "--",
-        residence_current: "--",
-      },
-
+      info: {},
+      loading: false,
       currentTabIndex: 0,
       startTabIndex: 0,
       BaseTabList: ["教育信息", "兴趣爱好", "宗教", "健康", "工作", "经济状况", "居住", "家庭"],
@@ -812,9 +671,23 @@ export default {
     };
   },
 
-  computed: {},
+  watch: {
+    resiId: {
+      handler(val) {
+        if (val) {
+          this.getInfo(val);
+          // this.getInfoBase(val);
+        }
+      },
+      immediate: true,
+    },
+  },
 
-  mounted() {},
+  computed: {
+    currentTab() {
+      return this.tabList[this.currentTabIndex];
+    },
+  },
 
   methods: {
     addStartTabIndex() {
@@ -834,8 +707,180 @@ export default {
       }
     },
 
+    async getInfo() {
+      const url = "resident_info";
+      this.loading = true;
+      const { data, code, msg } = await requestPostBi(url, {
+        queryParam: {
+          resident_id: 1001001,
+        },
+      });
+      if (code === 0) {
+        this.info = { ...this.info, ...data[0] };
+        const { info } = this;
+        let tabList = this.BaseTabList;
+        info.crowd && tabList.push("党员");
+        info.srs && tabList.push("保障房");
+        info.unemployed && tabList.push("失业");
+        info.exs && tabList.push("退役军人");
+        info.ufs && tabList.push("统战人员");
+        info.volunteer && tabList.push("志愿者");
+        info.aged && tabList.push("老年人");
+        info.special_popu && tabList.push("特殊人群");
+        tabList.push("出生信息");
+        tabList.push("死亡信息");
+        tabList.push("迁出");
+        this.tabList = tabList;
+        this.loading = false;
+      } else {
+        this.loading = false;
+        this.$message.error(msg);
+      }
+    },
+
     handleClose() {
-      this.$emit("close", false);
+      this.$emit("close");
+    },
+
+    // 根据房屋id获取详情
+    // getInfo(val) {
+    //   this.$http.post(`/actual/base/residentBaseInfo/detail/1001001`).then((res) => {
+    //     const { code, data } = res.data;
+    //     if (code === 0) {
+    //       this.info = data;
+    //       const { info } = this;
+
+    //   });
+    // },
+
+    // 根据房屋id获取详情
+    handlePageNoChange(page_num) {
+      this.page_num = page_num;
+      this.getList();
+    },
+
+    handleSizeChange(page_size) {
+      localStorage.setItem("dataBoard_page_size", page_size);
+      this.page_size = page_size;
+      this.getList();
+    },
+    async getList() {
+      const { org_id, listType, page_num, page_size, searchDate } = this;
+      const start_date = searchDate[0];
+      const end_date = searchDate[1];
+
+      let peop_type = this.type2;
+
+      this.loading = true;
+      const url = "person_resour_list";
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            page_num,
+            page_size,
+            start_date,
+            end_date,
+            org_id,
+            peop_type,
+          },
+        },
+        {
+          // mockId: 60068051,
+        }
+      );
+
+      this.loading = false;
+
+      if (code === 0) {
+        this.srcTableData = data;
+        console.log("this.srcTableData ", this.srcTableData);
+        // this.total = data.total;
+        // service_num   avg_satisfaction
+        this.list = data.map((item, index) => {
+          return [
+            index + 1,
+            item.peop_name ? item.peop_name : "--",
+            // item.peop_id ? item.peop_id : '--',
+            item.peop_child_type ? item.peop_child_type : "--",
+            item.service_num ? item.service_num : "--",
+            item.service_ratio ? item.service_ratio : "--",
+            item.avg_satisfaction ? item.avg_satisfaction : "--",
+            item.sum_point ? item.sum_point : "--",
+            { type: "operate", list: ["查看"] },
+          ];
+        });
+
+        console.log("this.list", this.list);
+      } else {
+        this.$message.error(msg);
+      }
+      this.list = [];
+    },
+
+    async getCount() {
+      const { org_id, listType, page_num, page_size, searchDate } = this;
+      const start_date = searchDate[0];
+      const end_date = searchDate[1];
+      const url = "person_resour_list_num";
+      let peop_type = this.type2;
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            org_id,
+            start_date,
+            end_date,
+            peop_type,
+          },
+        },
+        {
+          // mockId: 63070189,
+        }
+      );
+
+      if (code === 0) {
+        this.total = parseInt(data[0].total);
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    getHomeTypesMap(item) {
+      const homeTypeMap = new Map([
+        ["partyFlag", { name: "党员", icon: "dy" }],
+        ["subsistenceAllowanceFlag", { name: "低保人员", icon: "dbry" }],
+        ["ensureHouseFlag", { name: "保障房人员", icon: "bzfry" }],
+        ["unemployedFlag", { name: "失业人员", icon: "syry" }],
+        ["fertileWomanFlag", { name: "育龄妇女", icon: "ylfn" }],
+        ["veteranFlag", { name: "退役军人", icon: "tyjr" }],
+        ["unitedFrontFlag", { name: "统战人员", icon: "tzry" }],
+        ["petitionOfficerFlag", { name: "信访人员", icon: "xfry" }],
+        ["volunteerFlag", { name: "志愿者", icon: "zyz" }],
+        ["oldPeopleFlag", { name: "老年人", icon: "lnr" }],
+        ["emptyNesterFlag", { name: "空巢老人", icon: "kclr" }],
+        ["specialSupportFlag", { name: "特扶人员", icon: "tfry" }],
+        ["disabledFlag", { name: "失能人员", icon: "snry" }],
+        ["dementedFlag", { name: "失智人员", icon: "szry" }],
+        ["disabilityFlag", { name: "残疾人", icon: "cjr" }],
+        ["seriousIllnessFlag", { name: "大病人员", icon: "dbry" }],
+        ["chronicDiseaseFlag", { name: "慢性病人员", icon: "mxbry" }],
+        ["specialCrowdFlag", { name: "特殊人群", icon: "tsry" }],
+        ["tenantFlag", { name: "租户", icon: "zh" }],
+        ["floatingFlag", { name: "流动人员", icon: "ldry" }],
+        ["liveAloneFlag", { name: "独居老人", icon: "kclr" }],
+        ["publicWelfareFlag", { name: "公益岗人员", icon: "gyg" }],
+      ]);
+      return homeTypeMap.get(item).name;
+    },
+
+    getHomeTypes(newItem) {
+      let arr = [];
+      const itemNumOne = Object.keys(newItem).filter((key) => newItem[key] === 1);
+      itemNumOne.forEach((item) => {
+        arr.push(this.getHomeTypesMap(item));
+        this.peopleTypesArr = arr;
+      });
     },
   },
 };
@@ -865,7 +910,6 @@ export default {
     text-align: center;
     cursor: pointer;
   }
-
   .tab {
     @include toe;
     margin: 0 5px;
@@ -890,4 +934,9 @@ export default {
     }
   }
 }
+.row {
+  .field {
+    width: 150px !important;
+  }
+}
 </style>
diff --git a/src/views/dataBoard/organizational/microgrid/components/reportAnEvent.vue b/src/views/dataBoard/organizational/microgrid/components/reportAnEvent.vue
index d43dbfb07..03355c59c 100644
--- a/src/views/dataBoard/organizational/microgrid/components/reportAnEvent.vue
+++ b/src/views/dataBoard/organizational/microgrid/components/reportAnEvent.vue
@@ -1,51 +1,138 @@
 <template>
   <Dialog title="事件详情" @close="handleClose">
     <template>
-      <div class="eventWrap">
+      <div class="eventWrap" v-loading="loading" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)">
         <el-row :gutter="32">
-          <el-col :span="13">
+          <el-col :span="13" style="padding-left: 40px">
             <div class="leftEvent">
               <div class="eventDetails">事件详情</div>
-              <div>
+              <div class="eventItem">
                 <span>所属组织：</span>
-                <span>海伦路社区</span>
+                <span>{{ item.gridName }}</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>上报渠道：</span>
-                <span>12345</span>
+                <span>{{ item.sourceTypeName }}</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>接受时间：</span>
-                <span>2023-05-15 14:11:32</span>
+                <span>{{ item.happenTime }}</span>
               </div>
-              <div>
+              <div class="eventItem">
+                <span>工单号：</span>
+                <span>{{ item.workOrderNum }}</span>
+              </div>
+              <div class="eventItem">
                 <div>问题描述：</div>
-                <div>空间的规划宽带山东快书嘉豪个客户时刻见风使舵和高科技皇上高考结束后高考结束后给沙发快接电话个空间里都是高科技时代合格的考生嘉豪收到反馈各家各户的沙发空间规划上宽带价格好恐惧的沙发和高科技手段和高科技手段好是空间的规划k</div>
+                <div style="margin-top: 20px">{{ item.eventContent }}</div>
+              </div>
+              <div class="eventItem">
+                <div>图片：</div>
+                <div style="margin-top: 20px; display: flex">
+                  <img style="width: 100px; height: 100px; margin-right: 5px" v-for="src in item.imageList" :key="src" :src="src" alt="/" @click="openImg(src)" />
+                </div>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>联系人：</span>
-                <span>王先生</span>
+                <span>{{ item.name }}</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>联系电话：</span>
-                <span>12323434567</span>
+                <span>{{ item.mobile }}</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>详细地址：</span>
-                <span>的经典款亟待解决宽带</span>
+                <span>{{ item.address }}</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>办结时限：</span>
-                <span>2023-3-45 12:12:12</span>
+                <span>{{ item.gridName }}</span>
               </div>
-              <div>
+              <div class="eventItem">
                 <span>满意度评价：</span>
-                <span>基本满意</span>
+                <span>{{ item.satisfactionName }}</span>
               </div>
             </div>
           </el-col>
           <el-col :span="11">
-            <div class="rightEvent"></div>
+            <div class="rightEvent m-info">
+              <div class="eventDetails">办理进展</div>
+              <!-- <el-timeline class="timeline" :reverse="true">
+                <el-timeline-item v-for="(item, index) in activities" :key="index" :class="index == activities.length - 1 ? 'sucess' : ''">
+                  <div class="status-box">
+                    <div class="status1" v-if="index == activities.length - 1">回复</div>
+                    <div class="status2" v-else>完成并回复</div>
+                    <div class="timestamp">{{ item.timeLimit ? $moment(item.timeLimit).format("YYYY-MM-DD hh:mm:ss") : "" }}</div>
+                  </div>
+                  <div class="content">
+                    <div class="field">回复人：</div>
+                    <div class="value">{{ item.departmentName }}</div>
+                  </div>
+                  <div class="content">
+                    <div class="field">回复内容：</div>
+                    <div class="value">{{ item.publicReply }}</div>
+                  </div>
+                </el-timeline-item>
+              </el-timeline> -->
+              <div v-if="activities.length > 0">
+                <!-- <el-card :class="{ 'box-card': source === 'visiual' }" style="min-height: calc(88vh - 50px); overflow: auto"> -->
+                <div class="m-process">
+                  <div class="list">
+                    <div class="item" :class="[index === 0 ? 'z-on' : '']" :key="item.processId" v-for="(item, index) in activities">
+                      <div class="item-row">
+                        <template v-if="item.agencyId">
+                          <div class="name">指派</div>
+                        </template>
+                        <template v-if="!item.timeLimit">
+                          <div class="name">完成并回复</div>
+                        </template>
+                        <template v-if="!item.agencyId && item.timeLimit">
+                          <div class="name">{{ item.processName }}</div>
+                        </template>
+                        <div class="date">
+                          {{ item.processTime ? getTrueTime(item.processTime) : "" }}
+                        </div>
+                      </div>
+                      <div v-if="item.type === 'event'">
+                        <template v-if="item.agencyId">
+                          <div class="detail">
+                            <div class="detail-field">指派人：</div>
+                            <div class="detail-value">{{ item.departmentName }}</div>
+                          </div>
+                          <div class="detail">
+                            <div class="detail-field">指派部门：</div>
+                            <div class="detail-value">{{ item.agencyName }}</div>
+                          </div>
+                          <div class="detail">
+                            <div class="detail-field">转办意见：</div>
+                            <div class="detail-value">{{ item.publicReply }}</div>
+                          </div>
+                          <div class="detail">
+                            <div class="detail-field">办结时限：</div>
+                            <div class="detail-value">{{ formTimeLimit(item.timeLimit) }}</div>
+                          </div>
+                        </template>
+                        <template v-else>
+                          <div class="detail">
+                            <div class="detail-field">回复人：</div>
+                            <div class="detail-value">{{ item.departmentName }}</div>
+                          </div>
+                          <div class="detail">
+                            <div class="detail-field">回复内容：</div>
+                            <div class="detail-value">{{ item.publicReply }}</div>
+                          </div>
+                          <div class="detail" v-if="item.timeLimit">
+                            <div class="detail-field">办结时限：</div>
+                            <div class="detail-value">{{ getTrueTime(item.timeLimit) }}</div>
+                          </div>
+                        </template>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- </el-card> -->
+              </div>
+            </div>
           </el-col>
         </el-row>
       </div>
@@ -57,30 +144,134 @@
 import Dialog from "@/components/Dialog/index.vue";
 
 export default {
-  name: "residentDetails",
+  name: "ReportAnEvent",
+  components: { Dialog },
   props: {
-    resiId: {
+    id: {
       type: String,
       default: "",
     },
   },
 
-  components: { Dialog },
-
   data() {
-    return {};
+    return {
+      item: {},
+      loading: false,
+      activities: [],
+    };
   },
 
   computed: {},
-
+  watch: {
+    id: {
+      handler(val) {
+        if (val) {
+          this.getDetailsData(val);
+          this.getProcessData(val);
+        }
+      },
+      immediate: true,
+    },
+  },
   mounted() {},
 
   methods: {
     handleClose() {
       this.$emit("close", false);
+      this.item = {};
     },
+
+    openImg(src) {
+      window.open(src);
+    },
+
+    getTrueTime(time) {
+      return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
+    },
+
+    getDetailsData(id) {
+      this.loading = true;
+      this.$http
+        .post("/governance/icEvent/detail", { icEventId: id })
+        .then((res) => {
+          const { code, data } = res.data;
+          if (code === 0) {
+            this.item = data;
+          }
+        })
+        .catch((res) => {
+          this.loading = false;
+        });
+    },
+
+    getProcessData(id) {
+      this.$http
+        .post("/governance/icEvent/process", { icEventId: id })
+        .then((res) => {
+          const { code, data } = res.data;
+          if (code === 0) {
+            this.activities = data;
+            this.loading = false;
+          }
+        })
+        .catch((err) => {
+          this.loading = false;
+        });
+    },
+
+    // /governance/icEvent/detail
+    // /governance/icEvent/process
   },
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/modules/shequzhili/event-info.scss";
+@mixin fontStyle {
+  color: #fff !important;
+  font-size: 14px !important;
+}
+.eventWrap {
+  height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .eventDetails {
+    font-size: 16px;
+    margin: 24px 0;
+  }
+  .m-info {
+    padding: 0px !important;
+    .m-process {
+      margin: 0 !important;
+      .name {
+        @include fontStyle;
+      }
+      .date {
+        @include fontStyle;
+      }
+      .detail {
+        @include fontStyle;
+        .detail-field {
+          flex: none !important;
+        }
+      }
+    }
+  }
+  .leftEvent {
+    color: #fff;
+    .eventItem {
+      font-size: 14px;
+      margin-bottom: 24px;
+      span:first-child {
+      }
+      span:last-child {
+      }
+    }
+  }
+  .rightEvent {
+    color: #fff;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/organizational/microgrid/components/safetyhazard.vue b/src/views/dataBoard/organizational/microgrid/components/safetyhazard.vue
new file mode 100644
index 000000000..879a9d09c
--- /dev/null
+++ b/src/views/dataBoard/organizational/microgrid/components/safetyhazard.vue
@@ -0,0 +1,160 @@
+<template>
+  <Dialog title="安全隐患" width="1200" @close="handleClose">
+    <template>
+      <div class="saftHard">
+        <div class="saftDetails">
+          <div class="title" style="margin-bottom: 32px">事件详情</div>
+          <div class="content">
+            <el-row :gutter="16" class="columnHeight">
+              <el-col :span="6">
+                <div class="item">
+                  <span>场所名称:</span>
+                  <span>张亮麻辣烫</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>占地面积:</span>
+                  <span>120平米</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>场所规模:</span>
+                  <span>260人</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>所属组织:</span>
+                  <span>亿联社区第一网格</span>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="16" class="columnHeight">
+              <el-col :span="6">
+                <div class="item">
+                  <span>所属级别:</span>
+                  <span>久小场所</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>场所类型:</span>
+                  <span>学校</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>负责人:</span>
+                  <span>张三</span>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="item">
+                  <span>联系电话:</span>
+                  <span>13234343434</span>
+                </div>
+              </el-col>
+            </el-row>
+            <div class="item columnHeight">
+              <span>场所地址：</span>
+              <span></span>
+            </div>
+            <div class="item">
+              <span>备注：</span>
+              <span></span>
+            </div>
+          </div>
+        </div>
+        <div class="saftRecords">
+          <div class="title" style="margin-top: 48px">巡查记录</div>
+          <div class="table">
+            <el-table :data="list" :loading="loading">
+              <el-table-column label="序号" type="index" width="80" />
+              <el-table-column prop="name" label="巡查时间" />
+              <el-table-column prop="address" label="巡查人员" />
+              <el-table-column prop="address" label="联系电话" />
+              <el-table-column prop="address" label="检查结果" />
+              <el-table-column prop="address" label="发现隐患" />
+              <el-table-column prop="address" label="是否回复" />
+              <el-table-column prop="address" label="拟复查时间" />
+              <el-table-column label="操作" width="90" align="center">
+                <template slot-scope="data">
+                  <el-button type="text">详情</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog/index.vue";
+
+export default {
+  name: "Safetyhazard",
+  props: {
+    resiId: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: { Dialog },
+
+  data() {
+    return {};
+  },
+
+  computed: {},
+
+  mounted() {},
+
+  methods: {
+    handleClose() {
+      this.$emit("close", false);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/dataBoard/table.scss";
+.saftHard {
+  height: 500px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  .title {
+    font-size: 18px !important;
+    padding: 0 !important;
+    color: #fff;
+    margin-bottom: 16px;
+  }
+  .saftDetails {
+    padding: 18px 0 0 22px;
+    .content {
+      .columnHeight {
+        margin-bottom: 32px;
+      }
+      .item {
+        color: #fff;
+        font-size: 16px;
+        span:first-child {
+          display: inline-block;
+          width: 90px;
+        }
+        span:last-child {
+          display: inline-block;
+        }
+      }
+    }
+  }
+  .saftRecords {
+    padding: 18px 0 0 22px;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/organizational/microgrid/index.vue b/src/views/dataBoard/organizational/microgrid/index.vue
index 3e74ecd73..568729d22 100644
--- a/src/views/dataBoard/organizational/microgrid/index.vue
+++ b/src/views/dataBoard/organizational/microgrid/index.vue
@@ -13,53 +13,56 @@
         <el-table-column label="序号" type="index" width="80" />
         <!-- 上报事件 -->
         <template v-if="otherTabel === 'sbsj'">
-          <el-table-column prop="name" label="事件类型" />
-          <el-table-column prop="address" label="事件描述" />
-          <el-table-column prop="address" label="办理情况" />
-          <el-table-column prop="address" label="上报时间" />
+          <el-table-column prop="categoryName" label="事件类型" />
+          <el-table-column prop="addeventContentress" label="事件描述" />
+          <el-table-column prop="status" label="办理情况" />
+          <el-table-column prop="happenTime" label="上报时间" />
         </template>
 
         <!-- 居民需求 -->
         <template v-if="otherTabel === 'jmxq'">
-          <el-table-column prop="name" label="需求类型" />
-          <el-table-column prop="address" label="需求描述" />
-          <el-table-column prop="address" label="办理情况" />
-          <el-table-column prop="address" label="上报时间" />
+          <el-table-column prop="categoryName" label="需求类型" />
+          <el-table-column prop="content" label="需求描述" />
+          <el-table-column prop="status" label="办理情况" />
+          <el-table-column prop="reportTime" label="上报时间" />
         </template>
         <!-- 统治人群 -->
         <template v-if="otherTabel === 'tzrq'">
-          <el-table-column prop="name" label="所属组织" />
-          <el-table-column prop="address" label="所属网格" />
-          <el-table-column prop="address" label="所属家庭" />
-          <el-table-column prop="address" label="姓名" />
-          <el-table-column prop="address" label="联系电话" />
-          <el-table-column prop="address" label="性别" />
-          <el-table-column prop="address" label="证件号" />
-          <el-table-column prop="address" label="人员类别" />
-          <el-table-column prop="address" label="备注" />
+          <el-table-column prop="organizationName" label="所属组织" />
+          <el-table-column prop="gridName" label="所属网格" />
+          <el-table-column prop="familyName" label="所属家庭" />
+          <el-table-column prop="name" label="姓名" />
+          <el-table-column prop="mobile" label="联系电话" />
+          <el-table-column prop="gender" label="性别" />
+          <el-table-column prop="idNum" label="证件号" />
+          <el-table-column prop="categoryType" label="人员类别" />
+          <el-table-column prop="remark" label="备注" />
         </template>
         <!-- 安全隐患 -->
         <template v-if="otherTabel === 'aqyh'">
-          <el-table-column prop="name" label="场所名称" />
-          <el-table-column prop="address" label="巡查时间" />
-          <el-table-column prop="address" label="巡查人员" />
-          <el-table-column prop="address" label="联系电话" />
-          <el-table-column prop="address" label="隐患明细" />
-          <el-table-column prop="address" label="图片" />
-          <el-table-column prop="address" label="拟复查时间" />
+          <el-table-column prop="placeOrgName" label="场所名称" />
+          <el-table-column prop="patrolTime" label="巡查时间" />
+          <el-table-column prop="staffName" label="巡查人员" />
+          <el-table-column prop="mobile" label="联系电话" />
+          <el-table-column prop="detailed" label="隐患明细" />
+          <el-table-column prop="attachmentUrl" label="图片" />
+          <el-table-column prop="reviewTime" label="拟复查时间" />
         </template>
         <el-table-column label="操作" width="90" align="center">
-          <template slot-scope="data">
-            <el-button type="text" @click="handleView">查看</el-button>
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleView(scope.row)">查看</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <div v-if="showDialog">
-      <same-dialog @close="close" />
+      <same-dialog :resiId="this.rowId" @close="close" />
     </div>
     <div v-if="showDialogEvent">
-      <report-an-event @close="closeEvent" />
+      <report-an-event :id="rowId" @close="closeEvent" />
+    </div>
+    <div v-if="showDialogSaft">
+      <Safetyhazard @close="closeSaft" />
     </div>
     <Pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />
   </div>
@@ -70,10 +73,10 @@ import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb
 import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
 import SameDialog from "./components/popDetails.vue";
 import ReportAnEvent from "./components/reportAnEvent.vue";
-
+import Safetyhazard from "./components/safetyhazard.vue";
 export default {
   name: "Microgrid",
-  components: { Breadcrumb, Pagination, SameDialog, ReportAnEvent },
+  components: { Breadcrumb, Pagination, SameDialog, ReportAnEvent, Safetyhazard },
   data() {
     return {
       loading: false,
@@ -96,11 +99,11 @@ export default {
           ifActive: false,
           key: 3,
         },
-        {
-          name: "安全隐患",
-          ifActive: false,
-          key: 4,
-        },
+        // {
+        //   name: "安全隐患",
+        //   ifActive: false,
+        //   key: 4,
+        // },
       ],
       breadcrumbList: [
         {
@@ -112,17 +115,56 @@ export default {
           name: "微网格",
         },
       ],
+      rowId: null,
       itemNav: 1,
       showDialog: false,
       showDialogEvent: false,
+      showDialogSaft: false,
       otherTabel: "sbsj",
       monthOptions: new Array(12).fill(0).map((_, index) => {
         return { label: index - 0 + 1 + "月", value: index - 0 + 1 };
       }),
-      list: [{}, {}, {}],
+      paramsData: {},
+      list: [],
     };
   },
+  watch: {
+    otherTabel(n) {
+      if (n) {
+        this.getList();
+      }
+    },
+  },
+  created() {
+    this.paramsData = this.$route.params;
+  },
+  mounted() {
+    this.getList();
+  },
   methods: {
+    getList() {
+      this.loading = true;
+      const getUrl = new Map([
+        ["sbsj", `/gov/org/organizational/neighborhood/getBuildingUnitLevelEvent?unitId=1634090229723381761`],
+        ["jmxq", `/gov/org/organizational/neighborhood/getBuildingUnitLevelUserDemand?unitId=1565599676446027778`],
+        ["tzrq", `/gov/org/organizational/neighborhood/getBuildingUnitLevelCtp?unitId=1483661223332417537`],
+        ["aqyh", `/gov/org/organizational/neighborhood/getEnterprisePatrolRecord?unitId=f896b59f3cddf1f54280546d79803652`],
+      ]);
+      const url = getUrl.get(this.otherTabel);
+      // unitId=${this.paramsData.id}
+      this.$http.get(`${url}&pageNo=${this.pageNum}&pageSize=${this.pageSize}`).then((res) => {
+        const {
+          code,
+          data: { total, list },
+        } = res.data;
+        if (code === 0) {
+          this.total = total;
+          this.list = list;
+          this.loading = false;
+        }
+      });
+    },
+
     chooseNav(item) {
       this.itemNav = item.key;
       this.otherTabel = item.key === 1 ? "sbsj" : item.key === 2 ? "jmxq" : item.key === 3 ? "tzrq" : "aqyh";
@@ -140,14 +182,20 @@ export default {
     closeEvent(flag) {
       this.showDialogEvent = flag;
     },
-    getList() {},
-    handleView() {
+    closeSaft(flag) {
+      this.showDialogSaft = flag;
+    },
+    handleView(row) {
+      this.rowId = row.id;
       if (this.itemNav === 1) {
         this.showDialogEvent = true;
       }
       if (this.itemNav === 3) {
         this.showDialog = true;
       }
+      if (this.itemNav === 4) {
+        this.showDialogSaft = true;
+      }
     },
   },
 };
diff --git a/src/views/dataBoard/renfang/resi/class.vue b/src/views/dataBoard/renfang/resi/class.vue
index 573ae255d..6d89da5b7 100644
--- a/src/views/dataBoard/renfang/resi/class.vue
+++ b/src/views/dataBoard/renfang/resi/class.vue
@@ -12,21 +12,178 @@
       <div class="tip_title">{{ tableTitle }}</div>
       <div class="title_line"></div>
 
-      <div class="second-select" v-if="type_id == 'special_popu'">
+      <div class="second-select" v-if="type == 'old'">
         <el-select
-          v-model="subclassId"
+          v-model="oldVal"
           :popper-append-to-body="false"
-          placeholder="请选择"
+          placeholder="请选择年龄"
         >
           <el-option
-            v-for="item in subclassList"
+            v-for="item in oldList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+        &nbsp;
+        <el-select
+          v-model="searchParams.resideSituation"
+          :popper-append-to-body="false"
+          @change="changeSearch"
+          placeholder="请选择居住情况"
+        >
+          <el-option
+            v-for="item in resideArr"
             :key="item.value"
             :label="item.label"
             :value="item.value"
-            @click.native="handleChangeDate(item.value)"
           ></el-option>
         </el-select>
       </div>
+      <div class="second-select" v-if="type == 'dibao'">
+        <el-select
+          v-model="searchParams.lowIncomeType"
+          :popper-append-to-body="false"
+          @change="changeSearch"
+          placeholder="请选择低保类型"
+        >
+          <el-option
+            v-for="item in lowIncomeTypeArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+        &nbsp;
+        <el-select
+          v-model="searchParams.lowIncomeReason"
+          :popper-append-to-body="false"
+          @change="changeSearch"
+          placeholder="请选择低保原因"
+        >
+          <el-option
+            v-for="item in lowIncomeReasonArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </div>
+      <div class="second-select" v-if="type == 'zhiyuanzhe'">
+        <el-select
+          v-model="oldVal"
+          :popper-append-to-body="false"
+          placeholder="请选择年龄"
+        >
+          <el-option
+            v-for="item in oldAllList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+        &nbsp;
+        <el-select
+          v-model="searchParams.gategoryCode"
+          :popper-append-to-body="false"
+          @change="changeSearch"
+          placeholder="请选择志愿者类型"
+        >
+          <el-option
+            v-for="item in volunteerArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </div>
+      <div class="second-select" v-if="type == 'dangyuan'">
+        <el-select
+          v-model="oldVal"
+          :popper-append-to-body="false"
+          placeholder="请选择年龄"
+        >
+          <el-option
+            v-for="item in oldAllList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+        &nbsp;
+        <el-select
+          v-model="searchParams.cultureLevel"
+          :popper-append-to-body="false"
+          @change="changeSearch"
+          placeholder="请选择学历"
+        >
+          <el-option
+            v-for="item in PostDictonArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </div>
+      <div class="second-select" v-if="type == 'shiye'">
+        <el-select
+          v-model="oldVal"
+          :popper-append-to-body="false"
+          @change="changeSearch"
+          placeholder="请选择年龄"
+        >
+          <el-option
+            v-for="item in oldAllList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+        &nbsp;
+        <el-select
+          v-model="searchParams.employmentWish"
+          :popper-append-to-body="false"
+          @change="changeSearch"
+          placeholder="请选择就业愿望"
+        >
+          <el-option
+            v-for="item in careerArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+        &nbsp;
+        <el-select
+          v-model="searchParams.unemploymentReason"
+          :popper-append-to-body="false"
+          @change="changeSearch"
+          placeholder="请选择失业原因"
+        >
+          <el-option
+            v-for="item in unemploymentArr"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </div>
+      <div
+        class="second-select"
+        v-if="
+          type == 'fuwu' ||
+          type == 'wennuan' ||
+          type == 'jineng' ||
+          type == 'gangwei'
+        "
+      >
+        <el-input
+          type="text"
+          v-model="searchParams.serviceOrgName"
+          placeholder="请输入服务方名称"
+          @blur="changeFwfmc"
+        />
+      </div>
     </div>
 
     <div class="g-listbox">
@@ -38,23 +195,15 @@
         :total="total"
         @handleSizeChange="handleSizeChange"
         @handlePageNoChange="handlePageNoChange"
-        @operate="showInfo"
+        @operate="jumpPage"
       ></cpt-tb>
     </div>
-
-    <resi-details
-      @close="displayedResiId = ''"
-      :resi-id="displayedResiId"
-      v-if="displayedResiId"
-    />
   </div>
 </template>
 
 <script>
 import cptTb from "@/views/dataBoard/cpts/tb";
 import cptBread from "@/views/dataBoard/renfang/cpts/bread";
-import resiDetails from "@/views/dataBoard/cpts/resi-details";
-import { requestPostBi } from "@/js/dai/request-bipass";
 import getQueryPara from "dai-js/modules/getQueryPara";
 
 export default {
@@ -63,31 +212,28 @@ export default {
   components: {
     cptTb,
     cptBread,
-    resiDetails,
   },
 
   data() {
     return {
       breadList: [
         {
-          type: "back",
+          path: "/dataBoard/renfang/index",
           meta: {
             title: "人房总览",
           },
         },
         {
           meta: {
-            title: "居民类别",
+            title: "居民列表",
           },
         },
       ],
-
-      tableTitle: "居民类别",
-      searchName: "",
+      tableTitle: "居民列表",
       pageType: "",
       orgLevel: "",
       org_id: "",
-      type_id: "", // 居民类别
+      type_id: "", // 居民列表
       type_name: "",
       loading: true,
       pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
@@ -95,7 +241,73 @@ export default {
       total: 0,
       srcTableData: [],
       list: [],
-
+      listData: [],
+      oldList: [
+        {
+          label: "60-69岁",
+          value: ["60", "69"],
+        },
+        {
+          label: "70-79岁",
+          value: ["70", "79"],
+        },
+        {
+          label: "80-89岁",
+          value: ["80", "89"],
+        },
+        {
+          label: "90岁以上",
+          value: ["90", "139"],
+        },
+      ],
+      oldAllList: [
+        {
+          label: "0-9岁",
+          value: ["0", "9"],
+        },
+        {
+          label: "10-19岁",
+          value: ["10", "19"],
+        },
+        {
+          label: "20-29岁",
+          value: ["20", "29"],
+        },
+        {
+          label: "30-39岁",
+          value: ["30", "39"],
+        },
+        {
+          label: "40-49岁",
+          value: ["40", "49"],
+        },
+        {
+          label: "50-59岁",
+          value: ["50", "59"],
+        },
+        {
+          label: "60-69岁",
+          value: ["60", "69"],
+        },
+        {
+          label: "70-79岁",
+          value: ["70", "79"],
+        },
+        {
+          label: "80-89岁",
+          value: ["80", "89"],
+        },
+        {
+          label: "90岁以上",
+          value: ["90", "139"],
+        },
+      ],
+      jzList: [
+        {
+          label: "不知奥",
+          value: "90,120",
+        },
+      ],
       colList: [
         {
           align: "left",
@@ -134,7 +346,6 @@ export default {
           width: "10%",
         },
       ],
-
       header: [
         "序号",
         "姓名",
@@ -146,16 +357,69 @@ export default {
         "出生日期",
         "操作",
       ],
-
-      displayedResiId: "",
-
-      subclassList: [],
-      subclassId: "",
+      type: null,
+      typeList: [
+        {
+          type: "old",
+          name: "老年人",
+          url: "/actual/base/peopleRoomOverview/oldPeoplePageList",
+        },
+        {
+          type: "dibao",
+          name: "低保人员",
+          url: "/actual/base/peopleRoomOverview/lowIncomePageList",
+        },
+        {
+          type: "zhiyuanzhe",
+          name: "志愿者",
+          url: "/actual/base/peopleRoomOverview/volunteerPageList",
+        },
+        {
+          type: "dangyuan",
+          name: "党员",
+          url: "/actual/base/peopleRoomOverview/partyPageList",
+        },
+        {
+          type: "shiye",
+          name: "失业人员",
+          url: "/actual/base/peopleRoomOverview/unemployedPageList",
+        },
+        {
+          type: "fuwu",
+          name: "服务找人分页查询",
+          url: "/actual/base/peopleRoomOverview/servicePageList",
+        },
+        {
+          type: "wennuan",
+          name: "温暖找人查询",
+          url: "/actual/base/peopleRoomOverview/warmthPageList",
+        },
+        {
+          type: "jineng",
+          name: "技能找人查询",
+          url: "/actual/base/peopleRoomOverview/skillPageList",
+        },
+        {
+          type: "gangwei",
+          name: "岗位找人分页查询",
+          url: "/actual/base/peopleRoomOverview/postPageList",
+        },
+      ],
+      oldVal: ["60", "69"],
+      jzVal: "",
+      searchParams: {},
+      unemploymentArr: [],
+      PostDictonArr: [],
+      resideArr: [],
+      careerArr: [],
+      lowIncomeReasonArr: [],
+      lowIncomeTypeArr: [],
     };
   },
 
   activated() {
     this.org_id = getQueryPara("org_id");
+    this.type = getQueryPara("type");
     this.type_id = getQueryPara("type_id");
     this.pageType = getQueryPara("pageType");
     this.type_name = getQueryPara("type_name");
@@ -163,11 +427,102 @@ export default {
     this.breadList[1].meta.title = type_name + "居民列表";
     this.tableTitle = type_name + "居民列表";
     this.pageNo = 1;
+    const type = this.type;
+    if (type == "dibao") {
+      this.searchParams = {
+        lowIncomeType: null, // 低保类型
+        lowIncomeReason: null, // 低保原因
+      };
+    }
+    if (type == "shiye") {
+      this.searchParams = {
+        employmentWish: null, // 就业愿望
+        unemploymentReason: null, // 失业原因
+        startAge: null,
+        endAge: null,
+      };
+    }
+    if (type == "dangyuan") {
+      this.searchParams = {
+        cultureLevel: null, // 学历
+        startAge: null,
+        endAge: null,
+      };
+    }
+    if (type == "zhiyuan") {
+      this.searchParams = {
+        gategoryCode: null, // 志愿者类型
+        startAge: null,
+        endAge: null,
+      };
+    }
+    if (
+      type == "fuwu" ||
+      type == "wennuan" ||
+      type == "jineng" ||
+      type == "gangwei"
+    ) {
+      this.searchParams = {
+        serviceOrgName: null, // 服务方名称
+      };
+    }
     this.getList();
-    this.getCount();
-    if (this.type_id == "special_popu") {
-      this.getSubclass();
+    // this.getCount();
+    if (this.pageType != "normal") {
+      this.colList = [
+        {
+          align: "left",
+          width: "5%",
+        },
+        {
+          align: "left",
+          width: "15%",
+        },
+        {
+          align: "left",
+          width: "20%",
+        },
+        {
+          align: "left",
+          width: "15%",
+        },
+        {
+          align: "left",
+          width: "15%",
+        },
+        {
+          align: "left",
+          width: "15%",
+        },
+        {
+          align: "left",
+          width: "10%",
+        },
+        {
+          align: "left",
+          width: "10%",
+        },
+      ];
+
+      this.header = [
+        "序号",
+        "服务类型",
+        "服务事项",
+        "来源",
+        "服务时间",
+        "服务方",
+        "服务人数",
+        "操作",
+      ];
     }
+    // 字典
+    this.getResideNation();
+    this.getPostNation();
+    this.getUnemployment();
+    this.getCareer();
+    this.getVolunteer();
+    this.getLowIncomeReason();
+    this.getLowIncomeType();
   },
   created() {
     this.pageNo = 1;
@@ -176,170 +531,192 @@ export default {
     $route(to, from) {
       this.$router.go(0);
     },
-    subclassId: {
+    oldVal: {
       handler(newVal, oldVal) {
         this.pageNo = 1;
-        this.getList();
-        this.getCount();
+        const searchParams = {
+          startAge: newVal[0],
+          endAge: newVal[1],
+        };
+        this.getList(searchParams);
       },
     },
+    searchParams(newVal, oldVal) {
+      this.getList();
+    },
   },
 
   methods: {
     handleClickBreadItem({ item }) {
-      if (item.type == "back") {
-        this.$router.back();
-      }
+      this.$router.push({
+        path: item.path,
+        query: {
+          org_id: this.org_id,
+          type_id: this.type_id,
+          type_name: item.meta.title,
+          pageType: this.pageType,
+        },
+      });
     },
-
-    handleSearch() {},
-
-    showInfo(index) {
-      let item = this.srcTableData[index];
-      this.displayedResiId = item.user_id;
+    changeFwfmc(e) {
+      this.searchParams = {
+        serviceOrgName: e.target.value || null,
+      };
+      this.getList();
+    },
+    changeSearch() {
+      this.getList();
+    },
+    jumpPage(index) {
+      let item = this.listData[index];
+      console.log("item::", item);
+      this.$router.push({
+        path: "/organizational/orgPersonnel",
+        query: {
+          org_id: this.org_id,
+          type_id: this.type_id,
+          user_id: item.id,
+        },
+      });
     },
-
     handlePageNoChange(pageNo) {
       this.pageNo = pageNo;
       this.getList();
     },
-
     handleSizeChange(pageSize) {
       localStorage.setItem("dataBoard_PageSize", pageSize);
       this.pageSize = pageSize;
       this.getList();
     },
-
-    async getSubclass() {
-      const { org_id, type_id } = this;
+    async getList(item) {
+      const { url } = this.typeList.filter((item) => item.type == this.type)[0];
+      const sourceType = ["公共服务", "共性需求", "政策找人", "服务找人"];
       this.loading = true;
-      const url = "special_type_list";
-      const { data, code, msg } = await requestPostBi(
-        url,
-        {
-          queryParam: {
-            org_id,
-            type_id,
-          },
-        },
-        {
-          // mockId: 62648939,
+      let queryParam = {
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+        ...this.searchParams,
+        ...item,
+      };
+      this.$http.post(url, queryParam).then(({ data: res }) => {
+        this.loading = false;
+        const { data, code, msg } = res;
+        const { list, total } = data;
+        const gender = ["未知", "男", "女"];
+        if (code === 0) {
+          this.listData = list;
+          if (this.pageType == "normal") {
+            this.list = list.map((item, index) => {
+              return [
+                index + 1,
+                item.name ? item.name : "--",
+                item.gridName ? item.gridName : "--",
+                item.fullName ? item.fullName : "--",
+                item.mobile ? item.mobile : "--",
+                item.idNum ? item.idNum : "--",
+                item.gender ? gender[item.gender] : "--",
+                item.birthday ? item.birthday : "--",
+                { type: "operate", list: ["查看"] },
+              ];
+            });
+          } else {
+            this.list = list.map((item, index) => {
+              return [
+                index + 1,
+                item.serviceCategoryKey ? item.serviceCategoryKey : "--",
+                item.serviceName ? item.serviceName : "--",
+                item.awardPoint ? sourceType[item.awardPoint] : "--",
+                item.serviceTimeStart ? item.serviceTimeStart : "--",
+                item.serviceOrgName ? item.serviceOrgName : "--",
+                item.servedPersonQty ? item.servedPersonQty : "--",
+                { type: "operate", list: ["查看"] },
+              ];
+            });
+          }
+          this.total = total;
+        } else {
+          this.$message.error(msg);
         }
-      );
-      this.loading = false;
-      if (code === 0) {
-        this.subclassList = data.map((item, index) => {
-          return {
-            label: item.type_name,
-            value: item.type_id,
-          };
+      });
+    },
+    async getResideNation() {
+      try {
+        const { data } = await this.$http.post("sys/dict/data/dictlist", {
+          dictType: "reside_situation",
         });
-      } else {
-        this.$message.error(msg);
+        this.resideArr = data.data;
+      } catch (error) {
+        console.log(error, "获取居住情况字典");
       }
     },
-    async getList() {
-      const { org_id, type_id, subclassId, pageNo, pageSize } = this;
-      this.loading = true;
-      let url = "";
-      let queryParam = {};
-      if (this.pageType == "normal") {
-        url = "resident_class_list";
-        queryParam = {
-          org_id,
-          type_id: subclassId || type_id,
-          pageNo,
-          pageSize,
-        };
-      } else {
-        url = "resident_class_predict_list";
-        queryParam = {
-          org_id,
-          resi_class_name: this.type_name,
-          page_num: pageNo,
-          page_size: pageSize,
-        };
+    // async getPostNation() {
+    //   try {
+    //     let { data } = await this.$http.post("sys/dict/data/dictlist", {
+    //       dictType: "welfare_post",
+    //     });
+    //     this.PostDictonArr = data.data;
+    //   } catch (error) {
+    //     console.log(error, "获取学历字典");
+    //   }
+    // },
+    async getUnemployment() {
+      try {
+        const { data } = await this.$http.post("sys/dict/data/dictlist", {
+          dictType: "unemployment_cause",
+        });
+        this.unemploymentArr = data.data;
+      } catch (error) {
+        console.log(error, "获取失业原因字典");
       }
-      const { data, code, msg } = await requestPostBi(
-        url,
-        {
-          queryParam,
-        },
-        {
-          // mockId: 60069169,
-        }
-      );
-      this.loading = false;
-      if (code === 0) {
-        this.srcTableData = data;
-        // this.total = data.total;
-        if (this.pageType == "normal") {
-          this.list = data.map((item, index) => {
-            return [
-              index + 1,
-              item.user_name ? item.user_name : "--",
-              item.grid ? item.grid : "--",
-              item.house ? item.house : "--",
-              item.telephone ? item.telephone : "--",
-              item.idcard ? item.idcard : "--",
-              item.gender ? item.gender : "--",
-              item.birthday ? item.birthday : "--",
-              { type: "operate", list: ["查看"] },
-            ];
-          });
-        } else {
-          this.list = data.map((item, index) => {
-            return [
-              index + 1,
-              item.name ? item.name : "--",
-              item.grid ? item.grid : "--",
-              item.room ? item.room : "--",
-              item.telephone ? item.telephone : "--",
-              item.idcard ? item.idcard : "--",
-              item.gender ? item.gender : "--",
-              item.birthday ? item.birthday : "--",
-              { type: "operate", list: ["查看"] },
-            ];
-          });
-        }
-      } else {
-        this.$message.error(msg);
+    },
+    async getCareer() {
+      try {
+        const { data } = await this.$http.post("sys/dict/data/dictlist", {
+          dictType: "career_goals",
+        });
+        this.careerArr = data.data;
+      } catch (error) {
+        console.log(error, "获取就业愿望字典");
       }
     },
-    async getCount() {
-      const { org_id, type_id, subclassId, pageNo, pageSize } = this;
-      let url = "";
-      let queryParam = {};
-      if (this.pageType == "normal") {
-        url = "resident_class_list_total";
-        queryParam = {
-          org_id,
-          type_id: subclassId || type_id,
-          pageNo,
-          pageSize,
-        };
-      } else {
-        url = "resident_class_predict_total";
-        queryParam = {
-          org_id,
-          resi_class_name: this.type_name,
-          page_num: pageNo,
-          page_size: pageSize,
-        };
+    async getVolunteer() {
+      try {
+        const { data } = await this.$http.post("sys/dict/data/dictlist", {
+          dictType: "VOLUNTEER_CATEGORY",
+        });
+        this.volunteerArr = data.data;
+      } catch (error) {
+        console.log(error, "获取志愿者类别字典");
       }
-      const { data, code, msg } = await requestPostBi(
-        url,
-        {
-          queryParam,
-        },
-        {
-          // mockId: 63070913,
-        }
-      );
-      if (code === 0) {
-        this.total = parseInt(data[0].count);
-      } else {
-        this.$message.error(msg);
+    },
+    async getLowIncomeReason() {
+      try {
+        const { data } = await this.$http.post("sys/dict/data/dictlist", {
+          dictType: "low_income_reason",
+        });
+        this.lowIncomeReasonArr = data.data;
+      } catch (error) {
+        console.log(error, "获取低保原因字典");
+      }
+    },
+    async getLowIncomeType() {
+      try {
+        const { data } = await this.$http.post("sys/dict/data/dictlist", {
+          dictType: "low_income_type",
+        });
+        this.lowIncomeTypeArr = data.data;
+      } catch (error) {
+        console.log(error, "获取低保类型字典");
+      }
+    },
+    async getPostNation() {
+      try {
+        let { data } = await this.$http.post("sys/dict/data/education", {
+          formCode: "resi_base_info",
+        });
+        this.PostDictonArr = data.data;
+      } catch (error) {
+        console.log(error, "获取学历字典");
       }
     },
   },
diff --git a/src/views/dataBoard/renfang/visualizing/components/dangyuan.vue b/src/views/dataBoard/renfang/visualizing/components/dangyuan.vue
index ec1a62f00..9e24764dd 100644
--- a/src/views/dataBoard/renfang/visualizing/components/dangyuan.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/dangyuan.vue
@@ -34,7 +34,11 @@ export default {
   props: {
     title: {
       type: String,
-      default: "详情",
+      default: "",
+    },
+    org_id: {
+      type: String,
+      default: "",
     },
   },
   components: {
@@ -77,8 +81,16 @@ export default {
     initLeftCharts() {
       let div = document.getElementById("dyLeftChart");
       this.myChart1 = echarts.init(div);
-      var option = {
-        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
         legend: {
           orient: "vertical",
           top: 20,
@@ -147,10 +159,11 @@ export default {
         this.$router.push({
           path: "/dataBoard/renfang/resi-class",
           query: {
-            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            org_id: this.org_id,
             type_id: "aged",
             type_name: "党员",
             pageType: "normal",
+            type: "dangyuan",
           },
         });
       });
@@ -159,8 +172,16 @@ export default {
     initRightCharts() {
       let div = document.getElementById("dyRightChart");
       this.myChart2 = echarts.init(div);
-      var option = {
-        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
         legend: {
           orient: "vertical",
           top: 20,
@@ -186,9 +207,7 @@ export default {
           data: this.dyRight,
           formatter: (name) => {
             if (this.dyRight.length) {
-              const item = this.dyRight.filter(
-                (item) => item.name === name
-              )[0];
+              const item = this.dyRight.filter((item) => item.name === name)[0];
               return `{name|${name}}{value| ${item.value}}`;
             }
           },
@@ -230,10 +249,11 @@ export default {
         this.$router.push({
           path: "/dataBoard/renfang/resi-class",
           query: {
-            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            org_id: this.org_id,
             type_id: "aged",
             type_name: "党员",
             pageType: "normal",
+            type: "dangyuan",
           },
         });
       });
diff --git a/src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue b/src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue
index dce082312..ffb24a249 100644
--- a/src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue
@@ -37,17 +37,8 @@ import * as echarts from "echarts";
 
 function dataFormatter(arr) {
   return arr.map((item) => {
-    let name = "";
-    const arr = Array.from(item.classification);
-    arr.forEach((d, i) => {
-      if ((i + 1) % 5 == 0&&i!=arr.length-1) {
-        name = name + d + "\n";
-      } else {
-        name = name + d;
-      }
-    });
     return {
-      name: name,
+      name: item.classification,
       value: Number(item.classificationNum),
     };
   });
@@ -57,7 +48,11 @@ export default {
   props: {
     title: {
       type: String,
-      default: "详情",
+      default: "",
+    },
+    org_id: {
+      type: String,
+      default: "",
     },
   },
   components: {
@@ -72,7 +67,6 @@ export default {
     };
   },
   created() {
-    const query = this.$route.query;
     this.getData();
   },
   methods: {
@@ -121,8 +115,19 @@ export default {
     dbryDataCharts1() {
       let div = document.getElementById("dbryChart1");
       this.myChart1 = echarts.init(div);
-      var option = {
-        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
+        tooltip: {
+          show: true,
+        },
         legend: {
           orient: "vertical",
           top: 20,
@@ -146,12 +151,20 @@ export default {
             },
           },
           data: this.dbryData1,
+          tooltip: {
+            show: true,
+          },
           formatter: (name) => {
             if (this.dbryData1.length) {
               const item = this.dbryData1.filter(
                 (item) => item.name === name
               )[0];
-              return `{name|${name}}{value| ${item.value}}`;
+              return `{name|${echarts.format.truncateText(
+                name,
+                100,
+                "14px Microsoft Yahei",
+                "…"
+              )}}{value| ${item.value}}`;
             }
           },
         },
@@ -166,7 +179,6 @@ export default {
         },
         series: [
           {
-            name: "Nightingale Chart",
             type: "pie",
             radius: [30, 130],
             center: ["50%", "50%"],
@@ -193,9 +205,11 @@ export default {
         this.$router.push({
           path: "/dataBoard/renfang/resi-class",
           query: {
+            org_id: this.org_id,
             type_id: "mlsp",
             type_name: "低保人员",
             pageType: "normal",
+            type: "dibao",
           },
         });
       });
@@ -204,8 +218,19 @@ export default {
     dbryDataCharts2() {
       let div = document.getElementById("dbryChart2");
       this.myChart2 = echarts.init(div);
-      var option = {
-        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
+        tooltip: {
+          show: true,
+        },
         legend: {
           orient: "vertical",
           top: 20,
@@ -217,7 +242,7 @@ export default {
             color: "#ffffff",
             rich: {
               name: {
-                width: 80,
+                width: 90,
                 fontSize: 12,
                 color: "#dddee7",
               },
@@ -229,12 +254,20 @@ export default {
             },
           },
           data: this.dbryData2,
+          tooltip: {
+            show: true,
+          },
           formatter: (name) => {
             if (this.dbryData2.length) {
               const item = this.dbryData2.filter(
                 (item) => item.name === name
               )[0];
-              return `{name|${name}}{value| ${item.value}}`;
+              return `{name|${echarts.format.truncateText(
+                name,
+                100,
+                "14px Microsoft Yahei",
+                "…"
+              )}}{value| ${item.value}}`;
             }
           },
         },
@@ -249,7 +282,6 @@ export default {
         },
         series: [
           {
-            name: "Nightingale Chart",
             type: "pie",
             radius: [30, 130],
             center: ["50%", "50%"],
@@ -276,9 +308,11 @@ export default {
         this.$router.push({
           path: "/dataBoard/renfang/resi-class",
           query: {
+            org_id: this.org_id,
             type_id: "mlsp",
             type_name: "低保人员",
             pageType: "normal",
+            type: "dibao",
           },
         });
       });
@@ -287,8 +321,19 @@ export default {
     dbryDataCharts3() {
       let div = document.getElementById("dbryChart3");
       this.myChart3 = echarts.init(div);
-      var option = {
-        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
+        tooltip: {
+          show: true,
+        },
         legend: {
           type: "scroll",
           orient: "vertical",
@@ -314,12 +359,20 @@ export default {
             },
           },
           data: this.dbryData3,
+          tooltip: {
+            show: true,
+          },
           formatter: (name) => {
             if (this.dbryData3.length) {
               const item = this.dbryData3.filter(
                 (item) => item.name === name
               )[0];
-              return `{name|${name}}{value| ${item.value}}`;
+              return `{name|${echarts.format.truncateText(
+                name,
+                100,
+                "14px Microsoft Yahei",
+                "…"
+              )}}{value| ${item.value}}`;
             }
           },
         },
@@ -334,7 +387,6 @@ export default {
         },
         series: [
           {
-            name: "Nightingale Chart",
             type: "pie",
             radius: [30, 130],
             center: ["50%", "50%"],
@@ -358,15 +410,35 @@ export default {
       };
       this.myChart3.setOption(option);
       this.myChart3.on("click", (a, b) => {
-        console.log(a, b);
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: this.org_id,
+            type_id: "mlsp",
+            type_name: "温暖找人",
+            pageType: "normal1",
+            type: "wennuan",
+          },
+        });
       });
       window.addEventListener("resize", () => this.myChart3.resize());
     },
     dbryDataCharts4() {
       let div = document.getElementById("dbryChart4");
       this.myChart4 = echarts.init(div);
-      var option = {
-        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
+        tooltip: {
+          show: true,
+        },
         legend: {
           type: "scroll",
           orient: "vertical",
@@ -379,7 +451,7 @@ export default {
             color: "#ffffff",
             rich: {
               name: {
-                width: 80,
+                width: 90,
                 fontSize: 12,
                 color: "#dddee7",
               },
@@ -391,12 +463,20 @@ export default {
             },
           },
           data: this.dbryData4,
+          tooltip: {
+            show: true,
+          },
           formatter: (name) => {
             if (this.dbryData4.length) {
               const item = this.dbryData4.filter(
                 (item) => item.name === name
               )[0];
-              return `{name|${name}}{value| ${item.value}}`;
+              return `{name|${echarts.format.truncateText(
+                name,
+                100,
+                "14px Microsoft Yahei",
+                "…"
+              )}}{value| ${item.value}}`;
             }
           },
         },
@@ -411,7 +491,6 @@ export default {
         },
         series: [
           {
-            name: "Nightingale Chart",
             type: "pie",
             radius: [30, 130],
             center: ["50%", "50%"],
@@ -434,6 +513,18 @@ export default {
         ],
       };
       this.myChart4.setOption(option);
+      this.myChart4.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: this.org_id,
+            type_id: "mlsp",
+            type_name: "服务找人",
+            pageType: "normal1",
+            type: "fuwu",
+          },
+        });
+      });
       window.addEventListener("resize", () => this.myChart4.resize());
     },
   },
diff --git a/src/views/dataBoard/renfang/visualizing/components/laonianren.vue b/src/views/dataBoard/renfang/visualizing/components/laonianren.vue
index f34a534d4..16f0d1540 100644
--- a/src/views/dataBoard/renfang/visualizing/components/laonianren.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/laonianren.vue
@@ -34,7 +34,11 @@ export default {
   props: {
     title: {
       type: String,
-      default: "详情",
+      default: "",
+    },
+    org_id: {
+      type: String,
+      default: "",
     },
   },
   components: {
@@ -87,8 +91,16 @@ export default {
     initLeftCharts() {
       let div = document.getElementById("lnrLeftChart");
       this.myChart1 = echarts.init(div);
-      var option = {
-        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
         legend: {
           orient: "vertical",
           top: 20,
@@ -157,10 +169,11 @@ export default {
         this.$router.push({
           path: "/dataBoard/renfang/resi-class",
           query: {
-            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            org_id: this.org_id,
             type_id: "aged",
             type_name: "老年人",
             pageType: "normal",
+            type: "old"
           },
         });
       });
@@ -169,8 +182,16 @@ export default {
     initRightCharts() {
       let div = document.getElementById("lnrRightChart");
       this.myChart2 = echarts.init(div);
-      var option = {
-        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
         legend: {
           orient: "vertical",
           top: 20,
@@ -240,10 +261,11 @@ export default {
         this.$router.push({
           path: "/dataBoard/renfang/resi-class",
           query: {
-            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            org_id: this.org_id,
             type_id: "aged",
             type_name: "老年人",
             pageType: "normal",
+            type: "old"
           },
         });
       });
diff --git a/src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue b/src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue
index 20ffbc639..9365f8f0a 100644
--- a/src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue
@@ -42,22 +42,6 @@ import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitl
 import * as echarts from "echarts";
 
 function dataFormatter(arr) {
-  return arr.map((item) => {
-    let name = "";
-    const arr = Array.from(item.classification);
-    arr.forEach((d, i) => {
-      name = name + d;
-      if ((i + 1) % 5 == 0&&i!=arr.length-1) {
-        name = name + d + "\n";
-      }
-    });
-    return {
-      name: name,
-      value: Number(item.classificationNum),
-    };
-  });
-}
-function dataFormatter1(arr) {
   return arr.map((item) => {
     return {
       name: item.classification,
@@ -70,7 +54,11 @@ export default {
   props: {
     title: {
       type: String,
-      default: "详情",
+      default: "",
+    },
+    org_id: {
+      type: String,
+      default: "",
     },
   },
   components: {
@@ -107,7 +95,7 @@ export default {
           if (res.code !== 0) {
             return this.$message.error(res.msg);
           }
-          this.syryData2 = dataFormatter1(res.data);
+          this.syryData2 = dataFormatter(res.data);
           this.syryDataCharts2();
         })
         .catch(() => {});
@@ -117,7 +105,7 @@ export default {
           if (res.code !== 0) {
             return this.$message.error(res.msg);
           }
-          this.syryData3 = dataFormatter1(res.data);
+          this.syryData3 = dataFormatter(res.data);
           this.syryDataCharts3();
         })
         .catch(() => {});
@@ -145,8 +133,19 @@ export default {
     syryDataCharts1() {
       let div = document.getElementById("syryChart1");
       this.myChart1 = echarts.init(div);
-      var option = {
-        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
+        tooltip: {
+          show: true,
+        },
         legend: {
           orient: "vertical",
           top: 20,
@@ -154,6 +153,22 @@ export default {
           icon: "rect",
           itemHeight: 14,
           itemWidth: 14,
+          tooltip: {
+            show: true,
+          },
+          formatter: (name) => {
+            if (this.syryData1.length) {
+              const item = this.syryData1.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${echarts.format.truncateText(
+                name,
+                100,
+                "14px Microsoft Yahei",
+                "…"
+              )}}{value| ${item.value}}`;
+            }
+          },
           textStyle: {
             color: "#ffffff",
             rich: {
@@ -163,21 +178,13 @@ export default {
                 color: "#dddee7",
               },
               value: {
-                width: 30,
+                width: 60,
                 align: "right",
                 fontSize: 18,
               },
             },
           },
           data: this.syryData1,
-          formatter: (name) => {
-            if (this.syryData1.length) {
-              const item = this.syryData1.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
         },
         toolbox: {
           show: false,
@@ -190,7 +197,6 @@ export default {
         },
         series: [
           {
-            name: "Nightingale Chart",
             type: "pie",
             radius: [30, 130],
             center: ["50%", "50%"],
@@ -198,8 +204,8 @@ export default {
             itemStyle: {
               borderRadius: 0,
             },
-            top: 20,
-            left: -40,
+            top: -20,
+            left: 10,
             label: {
               position: "inside",
               formatter: "{d}%",
@@ -217,10 +223,11 @@ export default {
         this.$router.push({
           path: "/dataBoard/renfang/resi-class",
           query: {
-            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            org_id: this.org_id,
             type_id: "aged",
-            type_name: "失业人员失业原因",
+            type_name: "失业人员",
             pageType: "normal",
+            type: "shiye",
           },
         });
       });
@@ -229,8 +236,19 @@ export default {
     syryDataCharts2() {
       let div = document.getElementById("syryChart2");
       this.myChart2 = echarts.init(div);
-      var option = {
-        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
+        tooltip: {
+          show: true,
+        },
         legend: {
           orient: "vertical",
           top: 20,
@@ -242,24 +260,32 @@ export default {
             color: "#ffffff",
             rich: {
               name: {
-                width: 80,
+                width: 90,
                 fontSize: 12,
                 color: "#dddee7",
               },
               value: {
-                width: 30,
+                width: 60,
                 align: "right",
                 fontSize: 18,
               },
             },
           },
           data: this.syryData2,
+          tooltip: {
+            show: true,
+          },
           formatter: (name) => {
             if (this.syryData2.length) {
               const item = this.syryData2.filter(
                 (item) => item.name === name
               )[0];
-              return `{name|${name}}{value| ${item.value}}`;
+              return `{name|${echarts.format.truncateText(
+                name,
+                100,
+                "14px Microsoft Yahei",
+                "…"
+              )}}{value| ${item.value}}`;
             }
           },
         },
@@ -274,7 +300,6 @@ export default {
         },
         series: [
           {
-            name: "Nightingale Chart",
             type: "pie",
             radius: [30, 130],
             center: ["50%", "50%"],
@@ -282,8 +307,8 @@ export default {
             itemStyle: {
               borderRadius: 0,
             },
-            top: 20,
-            left: -40,
+            top: -20,
+            left: 10,
             label: {
               position: "inside",
               formatter: "{d}%",
@@ -301,10 +326,11 @@ export default {
         this.$router.push({
           path: "/dataBoard/renfang/resi-class",
           query: {
-            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            org_id: this.org_id,
             type_id: "aged",
-            type_name: "失业人员就业愿望",
+            type_name: "失业人员",
             pageType: "normal",
+            type: "shiye",
           },
         });
       });
@@ -313,8 +339,19 @@ export default {
     syryDataCharts3() {
       let div = document.getElementById("syryChart3");
       this.myChart3 = echarts.init(div);
-      var option = {
-        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
+        tooltip: {
+          show: true,
+        },
         legend: {
           type: "scroll",
           orient: "vertical",
@@ -323,6 +360,22 @@ export default {
           icon: "rect",
           itemHeight: 14,
           itemWidth: 14,
+          tooltip: {
+            show: true,
+          },
+          formatter: (name) => {
+            if (this.syryData3.length) {
+              const item = this.syryData3.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${echarts.format.truncateText(
+                name,
+                100,
+                "14px Microsoft Yahei",
+                "…"
+              )}}{value| ${item.value}}`;
+            }
+          },
           textStyle: {
             width: 120,
             color: "#ffffff",
@@ -333,21 +386,13 @@ export default {
                 color: "#dddee7",
               },
               value: {
-                width: 30,
+                width: 60,
                 align: "right",
                 fontSize: 18,
               },
             },
           },
           data: this.syryData3,
-          formatter: (name) => {
-            if (this.syryData3.length) {
-              const item = this.syryData3.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
         },
         toolbox: {
           show: false,
@@ -360,7 +405,6 @@ export default {
         },
         series: [
           {
-            name: "Nightingale Chart",
             type: "pie",
             radius: [30, 130],
             center: ["50%", "50%"],
@@ -368,8 +412,8 @@ export default {
             itemStyle: {
               borderRadius: 0,
             },
-            top: 20,
-            left: -40,
+            top: -20,
+            left: 10,
             label: {
               position: "inside",
               formatter: "{d}%",
@@ -387,10 +431,11 @@ export default {
         this.$router.push({
           path: "/dataBoard/renfang/resi-class",
           query: {
-            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            org_id: this.org_id,
             type_id: "aged",
-            type_name: "失业人员年龄",
+            type_name: "失业人员",
             pageType: "normal",
+            type: "shiye",
           },
         });
       });
@@ -399,8 +444,19 @@ export default {
     syryDataCharts4() {
       let div = document.getElementById("syryChart4");
       this.myChart4 = echarts.init(div);
-      var option = {
-        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
+        tooltip: {
+          show: true,
+        },
         legend: {
           type: "scroll",
           orient: "vertical",
@@ -413,24 +469,32 @@ export default {
             color: "#ffffff",
             rich: {
               name: {
-                width: 80,
+                width: 90,
                 fontSize: 12,
                 color: "#dddee7",
               },
               value: {
-                width: 30,
+                width: 60,
                 align: "right",
                 fontSize: 18,
               },
             },
           },
           data: this.syryData4,
+          tooltip: {
+            show: true,
+          },
           formatter: (name) => {
             if (this.syryData4.length) {
               const item = this.syryData4.filter(
                 (item) => item.name === name
               )[0];
-              return `{name|${name}}{value| ${item.value}}`;
+              return `{name|${echarts.format.truncateText(
+                name,
+                100,
+                "14px Microsoft Yahei",
+                "…"
+              )}}{value| ${item.value}}`;
             }
           },
         },
@@ -445,7 +509,6 @@ export default {
         },
         series: [
           {
-            name: "Nightingale Chart",
             type: "pie",
             radius: [30, 130],
             center: ["50%", "50%"],
@@ -453,8 +516,8 @@ export default {
             itemStyle: {
               borderRadius: 0,
             },
-            top: 20,
-            left: -40,
+            top: -20,
+            left: 10,
             label: {
               position: "inside",
               formatter: "{d}%",
@@ -468,13 +531,36 @@ export default {
         ],
       };
       this.myChart4.setOption(option);
+      this.myChart4.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: this.org_id,
+            type_id: "aged",
+            type_name: "技能找人",
+            pageType: "normal1",
+            type: "jineng",
+          },
+        });
+      });
       window.addEventListener("resize", () => this.myChart4.resize());
     },
     syryDataCharts5() {
       let div = document.getElementById("syryChart5");
       this.myChart5 = echarts.init(div);
-      var option = {
-        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
+        tooltip: {
+          show: true,
+        },
         legend: {
           type: "scroll",
           orient: "vertical",
@@ -483,30 +569,38 @@ export default {
           icon: "rect",
           itemHeight: 14,
           itemWidth: 14,
+          tooltip: {
+            show: true,
+          },
+          formatter: (name) => {
+            if (this.syryData5.length) {
+              const item = this.syryData5.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${echarts.format.truncateText(
+                name,
+                100,
+                "14px Microsoft Yahei",
+                "…"
+              )}}{value| ${item.value}}`;
+            }
+          },
           textStyle: {
             color: "#ffffff",
             rich: {
               name: {
-                width: 80,
+                width: 90,
                 fontSize: 12,
                 color: "#dddee7",
               },
               value: {
-                width: 30,
+                width: 60,
                 align: "right",
                 fontSize: 18,
               },
             },
           },
           data: this.syryData5,
-          formatter: (name) => {
-            if (this.syryData5.length) {
-              const item = this.syryData5.filter(
-                (item) => item.name === name
-              )[0];
-              return `{name|${name}}{value| ${item.value}}`;
-            }
-          },
         },
         toolbox: {
           show: false,
@@ -519,7 +613,6 @@ export default {
         },
         series: [
           {
-            name: "Nightingale Chart",
             type: "pie",
             radius: [30, 130],
             center: ["50%", "50%"],
@@ -527,8 +620,8 @@ export default {
             itemStyle: {
               borderRadius: 0,
             },
-            top: 20,
-            left: -40,
+            top: -20,
+            left: 10,
             label: {
               position: "inside",
               formatter: "{d}%",
@@ -542,6 +635,18 @@ export default {
         ],
       };
       this.myChart5.setOption(option);
+      this.myChart5.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: this.org_id,
+            type_id: "aged",
+            type_name: "岗位找人",
+            pageType: "normal1",
+            type: "gangwei",
+          },
+        });
+      });
       window.addEventListener("resize", () => this.myChart5.resize());
     },
   },
diff --git a/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue b/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue
index 169cd373c..37d4751dc 100644
--- a/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue
@@ -34,7 +34,11 @@ export default {
   props: {
     title: {
       type: String,
-      default: "详情",
+      default: "",
+    },
+    org_id: {
+      type: String,
+      default: "",
     },
   },
   components: {
@@ -77,8 +81,16 @@ export default {
     initLeftCharts() {
       let div = document.getElementById("zyzLeftChart");
       this.myChart1 = echarts.init(div);
-      var option = {
-        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
         legend: {
           orient: "vertical",
           top: 20,
@@ -144,15 +156,32 @@ export default {
       };
       this.myChart1.setOption(option);
       this.myChart1.on("click", (a, b) => {
-        console.log(a, b);
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: this.org_id,
+            type_id: "aged",
+            type_name: "志愿者年龄",
+            pageType: "normal",
+            type: "zhiyuanzhe",
+          },
+        });
       });
       window.addEventListener("resize", () => this.myChart1.resize());
     },
     initRightCharts() {
       let div = document.getElementById("zyzRightChart");
       this.myChart2 = echarts.init(div);
-      var option = {
-        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+      const option = {
+        color: [
+          "#15a7ed",
+          "#22b998",
+          "#5f6ff4",
+          "#a66eeb",
+          "#faa834",
+          "#fd6200",
+          "#fb3905",
+        ],
         legend: {
           orient: "vertical",
           top: 20,
@@ -218,8 +247,17 @@ export default {
           },
         ],
       };
-      this.myChart1.on("click", (a, b) => {
-        console.log(a, b);
+      this.myChart2.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: this.org_id,
+            type_id: "aged",
+            type_name: "志愿者类别统计",
+            pageType: "normal",
+            type: "zhiyuanzhe",
+          },
+        });
       });
       this.myChart2.setOption(option);
       window.addEventListener("resize", () => this.myChart2.resize());
diff --git a/src/views/dataBoard/renfang/visualizing/index.vue b/src/views/dataBoard/renfang/visualizing/index.vue
index 12320a951..afebf9851 100644
--- a/src/views/dataBoard/renfang/visualizing/index.vue
+++ b/src/views/dataBoard/renfang/visualizing/index.vue
@@ -5,11 +5,11 @@
       v-if="breadList.length > 1"
       :bread-list="breadList"
     />
-    <laonianren v-if="pageName == '老年人'" />
-    <dibaorenyuan v-if="pageName == '低保人员'" />
-    <zhiyuanzhe v-if="pageName == '志愿者'" />
-    <dangyuan v-if="pageName == '党员'" />
-    <shiyerenyuan v-if="pageName == '失业人员'" />
+    <laonianren :org_id="org_id" v-if="pageName == '老年人'" />
+    <dibaorenyuan :org_id="org_id" v-if="pageName == '低保人员'" />
+    <zhiyuanzhe :org_id="org_id" v-if="pageName == '志愿者'" />
+    <dangyuan :org_id="org_id" v-if="pageName == '党员'" />
+    <shiyerenyuan :org_id="org_id" v-if="pageName == '失业人员'" />
   </div>
 </template>
 
@@ -41,36 +41,47 @@ export default {
       pageName: "老年人",
       breadList: [
         {
-          type: "back",
+          path: "/dataBoard/renfang/index",
           meta: { title: "人房总览" },
         },
       ],
+      org_id: "",
     };
   },
   created() {},
   activated() {
     const query = this.$route.query;
+    this.org_id = query.org_id;
+    this.type_id = query.type_id;
+    this.type_name = query.type_name;
     this.breadList = [
       {
-        type: "back",
+        path: "/dataBoard/renfang/index",
+        meta: { title: "人房总览" },
+      },
+      {
         meta: { title: "人房总览" },
       },
     ];
     this.pageName = query.type_name;
-    this.toBread({
-      orgId: query.org_id,
-      orgLevel: query.type_id,
-      meta: { title: query.type_name },
-    });
+    this.breadList[1].meta.title = query.type_name;
+    // this.toBread({
+    //   orgId: query.org_id,
+    //   orgLevel: query.type_id,
+    //   meta: { title: query.type_name },
+    // });
   },
   mounted() {},
   methods: {
     clickBreadItem({ item }) {
-      if (item.type == "back") {
-        this.$router.back();
-      }
+      this.$router.push({
+        path: item.path,
+        query: {
+          org_id: this.org_id,
+          type_id: this.type_id,
+        },
+      });
     },
-
     toBread(item) {
       const { orgId } = item;
       const { breadList } = this;
@@ -81,7 +92,6 @@ export default {
         breadList.push(item);
         this.breadList = breadList;
       }
-      console.log("breadList::", breadList);
     },
   },
 };
diff --git a/src/views/dataBoard/satisfactionEval/dissatisfied/index.vue b/src/views/dataBoard/satisfactionEval/dissatisfied/index.vue
index 57a906fbf..bb8e51eeb 100644
--- a/src/views/dataBoard/satisfactionEval/dissatisfied/index.vue
+++ b/src/views/dataBoard/satisfactionEval/dissatisfied/index.vue
@@ -4,7 +4,7 @@
     <div class="screen">
       <el-form :model="queryParams" inline>
 
-        <el-select v-model="queryParams.month" size="small" placeholder="按月度">
+        <el-select popper-class="selectPopClass" v-model="queryParams.month" size="small" placeholder="按月度">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
@@ -13,7 +13,7 @@
           </el-option>
         </el-select>
 
-        <el-select v-model="queryParams.org" size="small" placeholder="按组织">
+        <el-select popper-class="selectPopClass" v-model="queryParams.org" size="small" placeholder="按组织">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
@@ -22,7 +22,7 @@
           </el-option>
         </el-select>
 
-        <el-select v-model="queryParams.matterSource" size="small" placeholder="按不满意事项来源">
+        <el-select popper-class="selectPopClass" v-model="queryParams.matterSource" size="small" placeholder="按不满意事项来源">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
@@ -31,7 +31,7 @@
           </el-option>
         </el-select>
 
-        <el-select v-model="queryParams.matterType" size="small" placeholder="按不满意事项类型">
+        <el-select popper-class="selectPopClass" v-model="queryParams.matterType" size="small" placeholder="按不满意事项类型">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
diff --git a/src/views/dataBoard/satisfactionEval/index.vue b/src/views/dataBoard/satisfactionEval/index.vue
index f0514f61c..bc818f4a9 100644
--- a/src/views/dataBoard/satisfactionEval/index.vue
+++ b/src/views/dataBoard/satisfactionEval/index.vue
@@ -82,7 +82,7 @@ export default {
 
 <style scoped lang="scss">
 .satisfaction-eval {
-  padding: 24px 20px;
+  //padding: 24px 20px;
 }
 
 .more {
diff --git a/src/views/dataBoard/satisfactionEval/modules/EventSituation/index.vue b/src/views/dataBoard/satisfactionEval/modules/EventSituation/index.vue
index e3047b2cb..857169aa3 100644
--- a/src/views/dataBoard/satisfactionEval/modules/EventSituation/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/EventSituation/index.vue
@@ -44,9 +44,9 @@ export default {
   mounted() {
     this.curMonth = new Date().getMonth() - 0 + 1
     let eventList = []
-    for (let i = 5; i >= 0; i--) {
+    for (let i = 4; i >= 0; i--) {
       eventList.push({
-        month: this.curMonth - i,
+        month: this.curMonth - 1 - i,
         num: 10,
         env: 11,
       })
diff --git a/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue b/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
index b29d1229d..37a8a6960 100644
--- a/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/PersonnelPortrait/index.vue
@@ -3,7 +3,7 @@
     <Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange"/>
     <div class="screen">
       <div class="txt">不满意人员画像</div>
-      <el-select v-model="typeCondition" placeholder="请选择" class="select">
+      <el-select v-model="typeCondition" placeholder="请选择" class="select"  popper-class="selectPopClass">
         <el-option
             v-for="item in typeConditionList"
             :key="item.value"
diff --git a/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue b/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
index b734f3608..145a5f068 100644
--- a/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/TypesOfDissatisfaction/index.vue
@@ -2,7 +2,7 @@
   <div class="types-dissatisfaction">
     <div class="screen">
     <Tabs v-model="resultType" :list="resultTypeList" @changeVal="resultTypeChange"/>
-    <el-select v-model="typeCondition" placeholder="请选择" class="select">
+    <el-select v-model="typeCondition"  popper-class="selectPopClass" placeholder="请选择" class="select">
       <el-option
           v-for="item in typeConditionList"
           :key="item.value"
diff --git a/src/views/dataBoard/satisfactionEval/potentialPeople/index.vue b/src/views/dataBoard/satisfactionEval/potentialPeople/index.vue
index 7d4e09c6f..64c136837 100644
--- a/src/views/dataBoard/satisfactionEval/potentialPeople/index.vue
+++ b/src/views/dataBoard/satisfactionEval/potentialPeople/index.vue
@@ -3,7 +3,7 @@
     <Breadcrumb :list="breadcrumbList"/>
     <div class="screen">
       <el-form :model="queryParams" inline>
-        <el-select v-model="queryParams.org" size="small" placeholder="按组织">
+        <el-select  popper-class="selectPopClass" v-model="queryParams.org" size="small" placeholder="按组织">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
@@ -12,7 +12,7 @@
           </el-option>
         </el-select>
 
-        <el-select v-model="queryParams.matterType" size="small" placeholder="按不满意类型">
+        <el-select  popper-class="selectPopClass" v-model="queryParams.matterType" size="small" placeholder="按不满意类型">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
diff --git a/src/views/dataBoard/satisfactionEval/potentialPeople/sjwjj.vue b/src/views/dataBoard/satisfactionEval/potentialPeople/sjwjj.vue
index 8397ec107..9aab8d589 100644
--- a/src/views/dataBoard/satisfactionEval/potentialPeople/sjwjj.vue
+++ b/src/views/dataBoard/satisfactionEval/potentialPeople/sjwjj.vue
@@ -4,7 +4,7 @@
     <div class="screen">
       <el-form :model="queryParams" inline>
 
-        <el-select v-model="queryParams.org" size="small" placeholder="按组织">
+        <el-select  popper-class="selectPopClass" v-model="queryParams.org" size="small" placeholder="按组织">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
@@ -13,7 +13,7 @@
           </el-option>
         </el-select>
 
-        <el-select v-model="queryParams.matterSource" size="small" placeholder="按事件类型">
+        <el-select  popper-class="selectPopClass" v-model="queryParams.matterSource" size="small" placeholder="按事件类型">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
diff --git a/src/views/dataBoard/satisfactionEval/potentialPeople/xqwmz.vue b/src/views/dataBoard/satisfactionEval/potentialPeople/xqwmz.vue
index 4be79d086..80e542e88 100644
--- a/src/views/dataBoard/satisfactionEval/potentialPeople/xqwmz.vue
+++ b/src/views/dataBoard/satisfactionEval/potentialPeople/xqwmz.vue
@@ -5,7 +5,7 @@
       <el-form :model="queryParams" inline>
 
 
-        <el-select v-model="queryParams.org" size="small" placeholder="按组织">
+        <el-select  popper-class="selectPopClass" v-model="queryParams.org" size="small" placeholder="按组织">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
@@ -14,7 +14,7 @@
           </el-option>
         </el-select>
 
-        <el-select v-model="queryParams.matterSource" size="small" placeholder="按需求类型">
+        <el-select  popper-class="selectPopClass" v-model="queryParams.matterSource" size="small" placeholder="按需求类型">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
diff --git a/src/views/dataBoard/satisfactionEval/potentialPeople/yxwxfw.vue b/src/views/dataBoard/satisfactionEval/potentialPeople/yxwxfw.vue
index d5e792689..c34045808 100644
--- a/src/views/dataBoard/satisfactionEval/potentialPeople/yxwxfw.vue
+++ b/src/views/dataBoard/satisfactionEval/potentialPeople/yxwxfw.vue
@@ -3,7 +3,7 @@
     <Breadcrumb :list="breadcrumbList"/>
     <div class="screen">
       <el-form :model="queryParams" inline>
-        <el-select v-model="queryParams.org" size="small" placeholder="按组织">
+        <el-select  popper-class="selectPopClass" v-model="queryParams.org" size="small" placeholder="按组织">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
@@ -12,7 +12,7 @@
           </el-option>
         </el-select>
 
-        <el-select v-model="queryParams.matterSource" size="small" placeholder="按服务类型">
+        <el-select  popper-class="selectPopClass" v-model="queryParams.matterSource" size="small" placeholder="按服务类型">
           <el-option
               v-for="item in monthOptions"
               :key="item.value"
diff --git a/src/views/dataBoardMain/main-navbar.vue b/src/views/dataBoardMain/main-navbar.vue
index 76a1b5547..022ea5ad1 100644
--- a/src/views/dataBoardMain/main-navbar.vue
+++ b/src/views/dataBoardMain/main-navbar.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="m-topnav">
     <div class="back" style="cursor: pointer" @click="goBack()">
-      <img src="~@/assets/images/shuju/main/back.png" alt="/" />
+      <img src="~@/assets/images/shuju/main/back.png" alt="/"/>
     </div>
     <div class="title">{{ customerName }}数据智能分析平台</div>
     <div class="selectArea">
       <el-select @change="setSelectName" v-model="value" popper-class="selectPopClass">
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        <el-option v-for="(item,index) in options" :key="item.value" :label="item.label" :value="index"></el-option>
       </el-select>
     </div>
     <!-- <div class="btn-back" @click="toPage('/')">
@@ -26,16 +26,20 @@
       </div>
     </div>-->
     <div class="nav-list">
-      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/overview/index' }" @click="toPage('/dataBoard/overview/index')">
+      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/overview/index' }"
+           @click="toPage('/dataBoard/overview/index')">
         <span>概览</span>
       </div>
-      <div class="nav-item" :class="{ 'z-on': $route.path.includes('/organizational') }" @click="toPage('/organizational/dangTree')">
+      <div class="nav-item" :class="{ 'z-on': $route.path.includes('/organizational') }"
+           @click="toPage('/organizational/dangTree')">
         <span>组织架构</span>
       </div>
-      <div class="nav-item" :class="{ 'z-on': $route.path.indexOf('/dataBoard/renfang') != -1 }" @click="toPage('/dataBoard/renfang/index')">
+      <div class="nav-item" :class="{ 'z-on': $route.path.indexOf('/dataBoard/renfang') != -1 }"
+           @click="toPage('/dataBoard/renfang/index')">
         <span>人房数据</span>
       </div>
-      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/satisfactionEval/index' }" @click="toPage('/dataBoard/satisfactionEval/index')">
+      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/satisfactionEval/index' }"
+           @click="toPage('/dataBoard/satisfactionEval/index')">
         <span>满意度评价</span>
       </div>
     </div>
@@ -151,11 +155,12 @@
   </div>
 </template>
 <script>
-import { messages } from "@/i18n";
+import {messages} from "@/i18n";
 import UpdatePasswordWork from "@/views/main-navbar-update-password-work";
 import dateFormat from "dai-js/tools/dateFormat";
 import nextTick from "dai-js/tools/nextTick";
-import { requestGet } from "@/js/dai/request";
+import {requestGet} from "@/js/dai/request";
+
 export default {
   inject: ["refresh"],
   data() {
@@ -167,33 +172,12 @@ export default {
       showWeek: "",
       showTime: "",
       showMonth: "",
-      value: "",
+      value: 0,
       weather: {
         weather: "晴",
         temperature: "--",
       },
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
-      ],
+      options: [],
     };
   },
   components: {
@@ -219,10 +203,51 @@ export default {
       pollTime();
     };
     pollTime();
-    this.getWeatherData();
+    // this.getWeatherData();
   },
   computed: {},
+  mounted() {
+    this.getOrgList()
+  },
   methods: {
+    getOrgList() {
+      let params = {}
+      if (this.options.length) {
+        params = {orgId: this.options[this.value].id, level: this.options[this.value].level}
+      }
+      this.$http.post(`/gov/org/agency/maporg`, params).then(async ({data: {data}}) => {
+        console.log(data, 'data')
+        this.value = 0
+        this.$store.dispatch("chooseArea/chooseName", {
+          orgId: data.id,
+          level: data.level
+        });
+        let children = await this.dealTreeData(data.children)
+        this.options = [{
+          ...data,
+          value: data.id,
+          label: data.name,
+        }, ...children]
+      })
+    },
+    dealTreeData(treeData, level = 0) {
+      const data = treeData.map((item) => ({
+        ...item,
+        value: item.id,
+        label: item.name,
+        children: (item.children && item.children.length)
+            ? this.dealTreeData(item.children, level++)
+            : null,
+      }));
+      return data;
+    },
+    setSelectName(index) {
+      /*      this.$store.dispatch("chooseArea/chooseName", {
+              orgId: this.options[index].id,
+              level: this.options[index].level
+            });*/
+      this.getOrgList()
+    },
     computeCurrentTime() {
       // let now = new Date();
       // let wk = now.getDay();
@@ -259,7 +284,7 @@ export default {
     },
     async getWeatherData() {
       const url = "https://restapi.amap.com/v3/weather/weatherInfo?key=8c87678f34ce9e8e23245c5161991c4e";
-      const { data, code, msg } = await requestGet(url, {
+      const {data, code, msg} = await requestGet(url, {
         city: this.$store.state.user.areaCode,
       });
       if (code === 0) {
@@ -270,9 +295,7 @@ export default {
       }
     },
 
-    setSelectName(name) {
-      this.$store.dispatch("chooseArea/chooseName", name);
-    },
+
   },
 };
 </script>