From c1f53d62dfd5d8746e39f44548c885e7df8bff8a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=8B=A5=E6=99=A8?= <974220104@qq.com>
Date: Wed, 20 Sep 2023 13:40:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E6=88=BF=E5=9B=BE=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/dataBoard/renfang/index.scss  |   2 +-
 src/views/dataBoard/renfang/resi/class.vue    | 711 ++++++++++++++----
 .../visualizing/components/dangyuan.vue       |  40 +-
 .../visualizing/components/dibaorenyuan.vue   | 153 +++-
 .../visualizing/components/laonianren.vue     |  36 +-
 .../visualizing/components/shiyerenyuan.vue   | 273 ++++---
 .../visualizing/components/zhiyuanzhe.vue     |  54 +-
 .../dataBoard/renfang/visualizing/index.vue   |  44 +-
 8 files changed, 988 insertions(+), 325 deletions(-)

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