From 551120481cdee8063d9f1ad0354936a82c8bcfa6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E8=8B=A5=E6=99=A8?= <974220104@qq.com>
Date: Thu, 21 Sep 2023 16:12:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=BA=E6=88=BF=E5=B1=85=E6=B0=91=E7=94=BB?=
 =?UTF-8?q?=E5=83=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |  10 +
 src/views/dataBoard/cpts/personnel/index.vue  |  33 +-
 .../personnel/modules/BusinessRecords.vue     |   1 +
 .../cpts/personnel/modules/EnjoyService.vue   |   3 +-
 .../cpts/personnel/modules/PointsRecord.vue   |   1 +
 .../modules/businessTables/community.vue      |   2 +-
 .../modules/businessTables/complaint.vue      |   2 +-
 .../modules/businessTables/economize.vue      |   2 +-
 .../modules/businessTables/give-service.vue   |   2 +-
 .../businessTables/reporting-events.vue       |   2 +-
 .../modules/businessTables/resident.vue       |   2 +-
 src/views/dataBoard/cpts/resi-details.vue     |   2 -
 .../microgrid/components/popDetails.vue       |   2 -
 src/views/dataBoard/overview/index.vue        |  11 -
 src/views/dataBoard/renfang/index.vue         |  15 -
 src/views/dataBoard/renfang/resi/analyze.vue  | 484 +++++++++---------
 src/views/dataBoard/renfang/resi/class.vue    |  38 +-
 .../dataBoard/renfang/resident/index.vue      |  93 ++++
 .../visualizing/components/dataTitle.vue      |   1 +
 .../dataBoard/renfang/visualizing/index.vue   |   5 -
 20 files changed, 407 insertions(+), 304 deletions(-)
 create mode 100644 src/views/dataBoard/renfang/resident/index.vue

diff --git a/src/router/index.js b/src/router/index.js
index 858bb677a..13a2561bc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -239,6 +239,16 @@ export const dataBoardRoutes = {
         keepAlive: false,
       },
     },
+    {
+      path: "renfang/resident",
+      props: true,
+      component: () => import("@/views/dataBoard/renfang/resident/index"),
+      name: "dataBoard-renfang-resident",
+      meta: {
+        title: "居民画像",
+        isTab: false,
+      },
+    },
     {
       path: "renfang/warn-building",
       props: true,
diff --git a/src/views/dataBoard/cpts/personnel/index.vue b/src/views/dataBoard/cpts/personnel/index.vue
index 504e80b74..9be66fe65 100644
--- a/src/views/dataBoard/cpts/personnel/index.vue
+++ b/src/views/dataBoard/cpts/personnel/index.vue
@@ -2,53 +2,67 @@
   <div>
     <el-row>
       <el-col :span="10">
-        <div class="sub-title">事项详情</div>
+        <data-title title="事项详情">
+          <div style="width: 53%; text-align: right">
+            <a @click="popupShow = true">更多></a>
+          </div>
+        </data-title>
         <MatterDetails />
-
-        <div class="sub-title">家庭关系</div>
+        <data-title title="家庭关系" />
         <Family />
       </el-col>
       <el-col :span="13" :offset="1">
-        <div class="sub-title">居民各项业务记录</div>
+        <data-title title="居民各项业务记录" />
         <BusinessRecords />
         <el-row>
           <el-col :span="12">
-            <div class="sub-title">享受服务次数统计</div>
+            <data-title title="享受服务次数统计" />
             <EnjoyService />
           </el-col>
           <el-col :span="11" :offset="1">
-            <div class="sub-title">积分记录</div>
+            <data-title title="积分记录" />
             <PointsRecord />
           </el-col>
         </el-row>
       </el-col>
     </el-row>
+    <resi-details
+      @close="popupShow = false"
+      :resi-id="resId"
+      v-if="popupShow"
+    />
   </div>
 </template>
 
 <script>
-import Breadcrumb from "./components/Breadcrumb/index.vue";
+import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
 import MatterDetails from "./modules/MatterDetails";
 import Family from "./modules/Family";
 import BusinessRecords from "./modules/BusinessRecords";
 import EnjoyService from "./modules/EnjoyService";
 import PointsRecord from "./modules/PointsRecord";
+import resiDetails from "@/views/dataBoard/cpts/resi-details";
 
 export default {
   name: "OrgPersonnel",
   components: {
-    Breadcrumb,
     MatterDetails,
     Family,
     BusinessRecords,
     EnjoyService,
     PointsRecord,
+    dataTitle,
+    resiDetails,
   },
   data() {
     return {
+      popupShow: false,
+      resId: "",
     };
   },
   mounted() {
+    const query = this.$route.query;
+    this.resId = query.user_id;
   },
 };
 </script>
@@ -66,4 +80,7 @@ export default {
 .breadcrumb {
   margin-bottom: 25px;
 }
+a:hover {
+  cursor: pointer;
+}
 </style>
diff --git a/src/views/dataBoard/cpts/personnel/modules/BusinessRecords.vue b/src/views/dataBoard/cpts/personnel/modules/BusinessRecords.vue
index 38c6201bf..92eb8db3b 100644
--- a/src/views/dataBoard/cpts/personnel/modules/BusinessRecords.vue
+++ b/src/views/dataBoard/cpts/personnel/modules/BusinessRecords.vue
@@ -104,6 +104,7 @@ export default {
 
 <style scoped lang="scss">
 .business-records {
+  margin-top: 12px;
   margin-bottom: 25px;
 }
 .table {
diff --git a/src/views/dataBoard/cpts/personnel/modules/EnjoyService.vue b/src/views/dataBoard/cpts/personnel/modules/EnjoyService.vue
index 8d20d9699..077432189 100644
--- a/src/views/dataBoard/cpts/personnel/modules/EnjoyService.vue
+++ b/src/views/dataBoard/cpts/personnel/modules/EnjoyService.vue
@@ -1,6 +1,6 @@
 <template>
   <div className="event-statistics">
-    <div id="enjoyServiceChart" style="height: 360px"></div>
+    <div id="enjoyServiceChart" style="height: 350px"></div>
   </div>
 </template>
 
@@ -208,5 +208,6 @@ export default {
 <style scoped lang="scss">
 .event-statistics {
   padding: 16px 16px;
+  margin-top: 12px;
 }
 </style>
diff --git a/src/views/dataBoard/cpts/personnel/modules/PointsRecord.vue b/src/views/dataBoard/cpts/personnel/modules/PointsRecord.vue
index e64cade4f..c671a394a 100644
--- a/src/views/dataBoard/cpts/personnel/modules/PointsRecord.vue
+++ b/src/views/dataBoard/cpts/personnel/modules/PointsRecord.vue
@@ -38,6 +38,7 @@ export default {
 <style scoped lang="scss">
 .enjoy-service {
   padding-left: 26px;
+  margin-top: 12px;
 }
 .enjoy-service-item {
   color: #ffffff;
diff --git a/src/views/dataBoard/cpts/personnel/modules/businessTables/community.vue b/src/views/dataBoard/cpts/personnel/modules/businessTables/community.vue
index 36809e81c..1a6478844 100644
--- a/src/views/dataBoard/cpts/personnel/modules/businessTables/community.vue
+++ b/src/views/dataBoard/cpts/personnel/modules/businessTables/community.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="table">
-    <el-table :data="list" max-height="375px" height="375px">
+    <el-table :data="list" max-height="363px" height="363px">
       <el-table-column label="序号" type="index" width="80" />
       <el-table-column label="不满意事项类型" prop="scope" width="190" />
       <el-table-column label="不满意事项描述" prop="problemDesc" width="" />
diff --git a/src/views/dataBoard/cpts/personnel/modules/businessTables/complaint.vue b/src/views/dataBoard/cpts/personnel/modules/businessTables/complaint.vue
index 24cceda2e..89738d2b6 100644
--- a/src/views/dataBoard/cpts/personnel/modules/businessTables/complaint.vue
+++ b/src/views/dataBoard/cpts/personnel/modules/businessTables/complaint.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="table">
-    <el-table :data="list" max-height="375px" height="375px">
+    <el-table :data="list" max-height="363px" height="363px">
       <el-table-column label="序号" type="index" width="80" />
       <el-table-column label="事件类型" prop="categorycode" width="" />
       <el-table-column label="事件描述" prop="eventcontent" width="" />
diff --git a/src/views/dataBoard/cpts/personnel/modules/businessTables/economize.vue b/src/views/dataBoard/cpts/personnel/modules/businessTables/economize.vue
index ac6e41dbd..b43a87b55 100644
--- a/src/views/dataBoard/cpts/personnel/modules/businessTables/economize.vue
+++ b/src/views/dataBoard/cpts/personnel/modules/businessTables/economize.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="table">
-    <el-table :data="list" max-height="375px" height="375px">
+    <el-table :data="list" max-height="363px" height="363px">
       <el-table-column label="序号" type="index" width="80" />
       <el-table-column label="不满意事项类型" prop="scope" width="190" />
       <el-table-column label="不满意事项描述" prop="problemDesc" width="" />
diff --git a/src/views/dataBoard/cpts/personnel/modules/businessTables/give-service.vue b/src/views/dataBoard/cpts/personnel/modules/businessTables/give-service.vue
index dd261f80f..c4e39494e 100644
--- a/src/views/dataBoard/cpts/personnel/modules/businessTables/give-service.vue
+++ b/src/views/dataBoard/cpts/personnel/modules/businessTables/give-service.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="table">
-    <el-table :data="list" max-height="375px" height="375px">
+    <el-table :data="list" max-height="363px" height="363px">
       <el-table-column label="序号" type="index" width="80" />
       <el-table-column label="需求类型" prop="serviceCategoryKey" width="" />
       <el-table-column label="事件描述" prop="serviceName" width="" />
diff --git a/src/views/dataBoard/cpts/personnel/modules/businessTables/reporting-events.vue b/src/views/dataBoard/cpts/personnel/modules/businessTables/reporting-events.vue
index bcd3acff6..9e98eb14d 100644
--- a/src/views/dataBoard/cpts/personnel/modules/businessTables/reporting-events.vue
+++ b/src/views/dataBoard/cpts/personnel/modules/businessTables/reporting-events.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="table">
-    <el-table :data="list" max-height="375px" height="375px">
+    <el-table :data="list" max-height="363px" height="363px">
       <el-table-column label="序号" type="index" width="80" />
       <el-table-column label="事件类型" prop="categorycode" width="" />
       <el-table-column label="事件描述" prop="eventcontent" width="" />
diff --git a/src/views/dataBoard/cpts/personnel/modules/businessTables/resident.vue b/src/views/dataBoard/cpts/personnel/modules/businessTables/resident.vue
index 35ca6b7ac..e41d3d87f 100644
--- a/src/views/dataBoard/cpts/personnel/modules/businessTables/resident.vue
+++ b/src/views/dataBoard/cpts/personnel/modules/businessTables/resident.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="table">
-    <el-table :data="list" max-height="375px" height="375px">
+    <el-table :data="list" max-height="363px" height="363px">
       <el-table-column label="序号" type="index" width="80" />
       <el-table-column label="需求类型" prop="categoryName" width="" />
       <el-table-column label="需求描述" prop="content" width="" />
diff --git a/src/views/dataBoard/cpts/resi-details.vue b/src/views/dataBoard/cpts/resi-details.vue
index 7863b005f..741ac6096 100644
--- a/src/views/dataBoard/cpts/resi-details.vue
+++ b/src/views/dataBoard/cpts/resi-details.vue
@@ -964,7 +964,6 @@ export default {
 		
 			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) => {
@@ -981,7 +980,6 @@ export default {
 					];
 				});
 		
-				console.log('this.list', this.list);
 			} else {
 				this.$message.error(msg);
 			}
diff --git a/src/views/dataBoard/organizational/microgrid/components/popDetails.vue b/src/views/dataBoard/organizational/microgrid/components/popDetails.vue
index ed8354954..0fc402117 100644
--- a/src/views/dataBoard/organizational/microgrid/components/popDetails.vue
+++ b/src/views/dataBoard/organizational/microgrid/components/popDetails.vue
@@ -794,7 +794,6 @@ export default {
 
       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) => {
@@ -811,7 +810,6 @@ export default {
           ];
         });
 
-        console.log("this.list", this.list);
       } else {
         this.$message.error(msg);
       }
diff --git a/src/views/dataBoard/overview/index.vue b/src/views/dataBoard/overview/index.vue
index 20da5828f..bf2c82236 100644
--- a/src/views/dataBoard/overview/index.vue
+++ b/src/views/dataBoard/overview/index.vue
@@ -254,7 +254,6 @@ export default {
       this.rfphDate = e;
     },
     handleClickDotBtn(type, info) {
-      console.log("handleClickDotBtn", type, info);
       if (type == "watch-resi") {
         this.displayedResiId = info.user_id;
       } else if (type == "watch-house") {
@@ -267,7 +266,6 @@ export default {
     },
 
     clickAgencyItem(item) {
-      console.log(item, 'item')
       this.toBread({
         orgId: item.id,
         orgLevel: item.level,
@@ -291,7 +289,6 @@ export default {
 
     // 点击搜索结果条目，在地图上显示点和详情弹窗
     handleClickSearchItem(item) {
-      console.log("handleClickSearchItem", item);
       if (!item.longitude) {
         return this.$message.error("请先设置坐标");
       }
@@ -303,21 +300,17 @@ export default {
 
     //获取地图上显示的组织数据
     async getMapData(orgId=this.$store.state.chooseArea.chooseName.orgId,level=this.$store.state.chooseArea.chooseName.level) {
-      console.log("=========================getMapData");
       const url = "org_map";
       this.$http.post(`/gov/org/agency/maporg`, {orgId, level}).then(({data: {data}}) => {
-        console.log(data,'datadatadata')
         this.orgData = data;
         this.orgId = this.orgData.org_id;
         this.orgLevel = this.orgData.level;
         this.currentLevel = this.orgData.agencyLevel;
-        console.log(this.orgData, 'orgData')
       })
     },
 
     //获取地图上显示的组织数据
     async getSubMapData() {
-      console.log("=========================getSubMapData");
       const url = "sub_org_map";
 
       const {data, code, msg} = await requestPostBi(
@@ -345,10 +338,6 @@ export default {
           };
         });
         this.orgData = {...orgData};
-        console.log(
-            "==========================getSubMapData:result",
-            this.orgData
-        );
       } else {
         this.$message.error(msg);
       }
diff --git a/src/views/dataBoard/renfang/index.vue b/src/views/dataBoard/renfang/index.vue
index c4b495411..6bc85b7fc 100644
--- a/src/views/dataBoard/renfang/index.vue
+++ b/src/views/dataBoard/renfang/index.vue
@@ -583,7 +583,6 @@ export default {
       const { orgId } = item;
       const { breadList } = this;
       let index = breadList.findIndex((val) => val.orgId === orgId);
-      // return console.log(item, breadList, index);
       if (index >= 0) {
         this.breadList = breadList.slice(0, index + 1);
       } else {
@@ -607,7 +606,6 @@ export default {
     // 根据类别搜索
     async handleSearch() {
       this.searchModule.result = [];
-      console.log(this.searchModule);
       const { searchModule } = this;
 
       const url = [
@@ -662,10 +660,6 @@ export default {
             ...detailJson,
           };
         });
-        console.log(
-          "==========this.searchModule.result",
-          this.searchModule.result
-        );
       } else {
         this.$message.error(msg);
       }
@@ -673,7 +667,6 @@ export default {
 
     //地图上居民分类百分比数据 ps:感觉有点重复显示
     async getPerInfo() {
-      console.log("=========================getPerInfo");
       const url = "resident_ratio";
 
       const { data, code, msg } = await requestPostBi(
@@ -700,7 +693,6 @@ export default {
 
     //居民分类分析数据
     async getResiCategoryData() {
-      console.log("=========================getResiCategoryData");
       const url = "resident_class_statics";
 
       const { data, code, msg } = await requestPostBi(
@@ -733,7 +725,6 @@ export default {
 
     //居民分类预测数据
     async getResiCategoryForecastData() {
-      console.log("=========================getResiCategoryForecastData");
       const url = "resident_class_predict";
 
       const { data, code, msg } = await requestPostBi(
@@ -766,7 +757,6 @@ export default {
 
     //获取地图上显示的组织数据
     async getMapData() {
-      console.log("=========================getMapData");
       const url = "org_map";
 
       const { data, code, msg } = await requestPostBi(
@@ -801,7 +791,6 @@ export default {
 
     //获取地图上显示的组织数据
     async getSubMapData() {
-      console.log("=========================getSubMapData");
       const url = "sub_org_map";
 
       const { data, code, msg } = await requestPostBi(
@@ -829,10 +818,6 @@ export default {
           };
         });
         this.orgData = { ...orgData };
-        console.log(
-          "==========================getSubMapData:result",
-          this.orgData
-        );
       } else {
         this.$message.error(msg);
       }
diff --git a/src/views/dataBoard/renfang/resi/analyze.vue b/src/views/dataBoard/renfang/resi/analyze.vue
index 9f5b084dc..4653a10a6 100644
--- a/src/views/dataBoard/renfang/resi/analyze.vue
+++ b/src/views/dataBoard/renfang/resi/analyze.vue
@@ -1,41 +1,37 @@
 <template>
-	<div class="g-pgi">
-		<!-- 组织路由 -->
-		<cpt-bread
-			:separator="'/'"
-			@tap="handleClickBreadItem"
-			:breadList="breadList"
-		></cpt-bread>
-
-		<div class="m-title">
-			<img
-				class="title_img"
-				src="@/assets/images/index/list-logo.png"
-				alt
-			/>
-			<div class="tip_title">{{ tableTitle }}</div>
-			<div class="title_line"></div>
-		</div>
-
-		<div class="g-listbox">
-			<cpt-tb
-				:col-list="colList"
-				:loading="loading"
-				:header="header"
-				:list="list"
-				:total="total"
-				@handleSizeChange="handleSizeChange"
-				@handlePageNoChange="handlePageNoChange"
-				@operate="showInfo"
-			></cpt-tb>
-		</div>
-
-		<resi-details
-			@close="displayedResiId = ''"
-			:resi-id="displayedResiId"
-			v-if="displayedResiId"
-		/>
-	</div>
+  <div class="g-pgi">
+    <!-- 组织路由 -->
+    <cpt-bread
+      :separator="'/'"
+      @tap="handleClickBreadItem"
+      :breadList="breadList"
+    ></cpt-bread>
+
+    <div class="m-title">
+      <img class="title_img" src="@/assets/images/index/list-logo.png" alt />
+      <div class="tip_title">{{ tableTitle }}</div>
+      <div class="title_line"></div>
+    </div>
+
+    <div class="g-listbox">
+      <cpt-tb
+        :col-list="colList"
+        :loading="loading"
+        :header="header"
+        :list="list"
+        :total="total"
+        @handleSizeChange="handleSizeChange"
+        @handlePageNoChange="handlePageNoChange"
+        @operate="showInfo"
+      ></cpt-tb>
+    </div>
+
+    <resi-details
+      @close="displayedResiId = ''"
+      :resi-id="displayedResiId"
+      v-if="displayedResiId"
+    />
+  </div>
 </template>
 
 <script>
@@ -46,213 +42,213 @@ import { requestPostBi } from "@/js/dai/request-bipass";
 import getQueryPara from "dai-js/modules/getQueryPara";
 
 export default {
-	name: "resi-list",
-
-	components: {
-		cptTb,
-		cptBread,
-		resiDetails,
-	},
-
-	data() {
-		return {
-			breadList: [
-				{
-					type: "back",
-					meta: {
-						title: "人房总览",
-					},
-				},
-				{
-					meta: {
-						title: "居民列表",
-					},
-				},
-			],
-
-			tableTitle: "居民列表",
-			searchName: "",
-
-			orgLevel: "",
-			org_id: "",
-			resiType: "", // 流动 常驻 全部
-
-			loading: true,
-			pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
-			pageNo: 1,
-			total: 0,
-			srcTableData: [],
-			list: [],
-
-			colList: [
-				{
-					align: "left",
-					width: "5%",
-				},
-				{
-					align: "left",
-					width: "10%",
-				},
-				{
-					align: "left",
-					width: "20%",
-				},
-				{
-					align: "left",
-					width: "20%",
-				},
-				{
-					align: "left",
-					width: "15%",
-				},
-				{
-					align: "left",
-					width: "10%",
-				},
-				{
-					align: "left",
-					width: "5%",
-				},
-				{
-					align: "left",
-					width: "10%",
-				},
-				{
-					align: "left",
-					width: "10%",
-				},
-			],
-
-			header: [
-				"序号",
-				"姓名",
-				"所属网格",
-				"所属房屋",
-				"联系电话",
-				"证件号",
-				"性别",
-				"出生日期",
-				"操作",
-			],
-
-			displayedResiId: "",
-		};
-	},
-
-	activated() {
-		this.org_id = getQueryPara("org_id");
-		this.resiType = getQueryPara("type");
-		const type_name = getQueryPara("type_name");
-		this.breadList[1].meta.title = type_name + "居民列表";
-		this.tableTitle = type_name + "居民列表";
-
-		this.pageNo = 1;
-		this.getList();
-		this.getCount();
-	},
-
-	methods: {
-		handleClickBreadItem({ item }) {
-			if (item.type == "back") {
-				this.$router.back();
-			}
-		},
-
-		handleSearch() {},
-
-		showInfo(index) {
-			let item = this.srcTableData[index];
-			this.displayedResiId = item.user_id;
-		},
-
-		handlePageNoChange(pageNo) {
-			this.pageNo = pageNo;
-			this.getList();
-		},
-
-		handleSizeChange(pageSize) {
-			localStorage.setItem('dataBoard_PageSize', pageSize);
-			this.pageSize = pageSize;
-			this.getList();
-		},
-
-		async getList() {
-			const { org_id, resiType, pageNo, pageSize } = this;
-			this.loading = true;
-
-			const url = "resident_analyze_list";
-
-			const { data, code, msg } = await requestPostBi(
-				url,
-				{
-					queryParam: {
-						org_id,
-						type: resiType,
-						pageNo,
-						pageSize,
-					},
-				},
-				{
-					// mockId: 60069169,
-				}
-			);
-
-			this.loading = false;
-
-			if (code === 0) {
-				this.srcTableData = data;
-				// this.total = data.total;
-
-				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.$message.error(msg);
-			}
-		},
-
-		async getCount() {
-			const { org_id, resiType, pageNo, pageSize } = this;
-
-			const url = "resident_analyze_list_total";
-
-			const { data, code, msg } = await requestPostBi(
-				url,
-				{
-					queryParam: {
-						org_id,
-						type: resiType,
-						pageNo,
-						pageSize,
-					},
-				},
-				{
-					// mockId: 63070408,
-				}
-			);
-
-			if (code === 0) {
-				this.total = parseInt(data[0].count);
-			} else {
-				this.$message.error(msg);
-			}
-		},
-	},
-
-	destroyed() {
-		console.log("我已经离开了！");
-	},
+  name: "resi-list",
+
+  components: {
+    cptTb,
+    cptBread,
+    resiDetails,
+  },
+
+  data() {
+    return {
+      breadList: [
+        {
+          type: "back",
+          meta: {
+            title: "人房总览",
+          },
+        },
+        {
+          meta: {
+            title: "居民列表",
+          },
+        },
+      ],
+
+      tableTitle: "居民列表",
+      searchName: "",
+
+      orgLevel: "",
+      org_id: "",
+      resiType: "", // 流动 常驻 全部
+
+      loading: true,
+      pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
+      pageNo: 1,
+      total: 0,
+      srcTableData: [],
+      list: [],
+
+      colList: [
+        {
+          align: "left",
+          width: "5%",
+        },
+        {
+          align: "left",
+          width: "10%",
+        },
+        {
+          align: "left",
+          width: "20%",
+        },
+        {
+          align: "left",
+          width: "20%",
+        },
+        {
+          align: "left",
+          width: "15%",
+        },
+        {
+          align: "left",
+          width: "10%",
+        },
+        {
+          align: "left",
+          width: "5%",
+        },
+        {
+          align: "left",
+          width: "10%",
+        },
+        {
+          align: "left",
+          width: "10%",
+        },
+      ],
+
+      header: [
+        "序号",
+        "姓名",
+        "所属网格",
+        "所属房屋",
+        "联系电话",
+        "证件号",
+        "性别",
+        "出生日期",
+        "操作",
+      ],
+
+      displayedResiId: "",
+    };
+  },
+
+  activated() {
+    this.org_id = getQueryPara("org_id");
+    this.resiType = getQueryPara("type");
+    const type_name = getQueryPara("type_name");
+    this.breadList[1].meta.title = type_name + "居民列表";
+    this.tableTitle = type_name + "居民列表";
+
+    this.pageNo = 1;
+    this.getList();
+    this.getCount();
+  },
+
+  methods: {
+    handleClickBreadItem({ item }) {
+      if (item.type == "back") {
+        this.$router.back();
+      }
+    },
+
+    handleSearch() {},
+
+    showInfo(index) {
+      let item = this.srcTableData[index];
+      this.displayedResiId = item.user_id;
+    },
+
+    handlePageNoChange(pageNo) {
+      this.pageNo = pageNo;
+      this.getList();
+    },
+
+    handleSizeChange(pageSize) {
+      localStorage.setItem("dataBoard_PageSize", pageSize);
+      this.pageSize = pageSize;
+      this.getList();
+    },
+
+    async getList() {
+      const { org_id, resiType, pageNo, pageSize } = this;
+      this.loading = true;
+
+      const url = "resident_analyze_list";
+
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            org_id,
+            type: resiType,
+            pageNo,
+            pageSize,
+          },
+        },
+        {
+          // mockId: 60069169,
+        }
+      );
+
+      this.loading = false;
+
+      if (code === 0) {
+        this.srcTableData = data;
+        // this.total = data.total;
+
+        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.$message.error(msg);
+      }
+    },
+
+    async getCount() {
+      const { org_id, resiType, pageNo, pageSize } = this;
+
+      const url = "resident_analyze_list_total";
+
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            org_id,
+            type: resiType,
+            pageNo,
+            pageSize,
+          },
+        },
+        {
+          // mockId: 63070408,
+        }
+      );
+
+      if (code === 0) {
+        this.total = parseInt(data[0].count);
+      } else {
+        this.$message.error(msg);
+      }
+    },
+  },
+
+  destroyed() {
+    console.log("我已经离开了！");
+  },
 };
 </script>
 
diff --git a/src/views/dataBoard/renfang/resi/class.vue b/src/views/dataBoard/renfang/resi/class.vue
index 6d89da5b7..2a8f4d827 100644
--- a/src/views/dataBoard/renfang/resi/class.vue
+++ b/src/views/dataBoard/renfang/resi/class.vue
@@ -223,6 +223,12 @@ export default {
             title: "人房总览",
           },
         },
+        {
+          path: "/dataBoard/renfang/visualizing",
+          meta: {
+            title: "",
+          },
+        },
         {
           meta: {
             title: "居民列表",
@@ -418,13 +424,22 @@ export default {
   },
 
   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");
-    const type_name = getQueryPara("type_name");
-    this.breadList[1].meta.title = type_name + "居民列表";
+    const query = this.$route.query;
+    this.org_id = query.org_id;
+    this.type = query.type;
+    this.type_id = query.type_id;
+    this.pageType = query.pageType;
+    this.type_name = query.type_name;
+    const type_name = query.type_name;
+    let title = type_name;
+    if (this.type == "jineng" || this.type == "gangwei") {
+      title = "失业人员";
+    }
+    if (this.type == "wennuan" || this.type == "fuwu") {
+      title = "低保人员";
+    }
+    this.type_name1 = title;
+    this.breadList[1].meta.title = title;
     this.tableTitle = type_name + "居民列表";
     this.pageNo = 1;
     const type = this.type;
@@ -467,7 +482,6 @@ export default {
       };
     }
     this.getList();
-    // this.getCount();
     if (this.pageType != "normal") {
       this.colList = [
         {
@@ -555,6 +569,8 @@ export default {
           type_id: this.type_id,
           type_name: item.meta.title,
           pageType: this.pageType,
+          type: this.type,
+          pageType: this.pageType,
         },
       });
     },
@@ -569,13 +585,15 @@ export default {
     },
     jumpPage(index) {
       let item = this.listData[index];
-      console.log("item::", item);
       this.$router.push({
-        path: "/organizational/orgPersonnel",
+        path: "/dataBoard/renfang/resident",
         query: {
           org_id: this.org_id,
           type_id: this.type_id,
           user_id: item.id,
+          type: this.type,
+          pageType: this.pageType,
+          type_name: this.type_name,
         },
       });
     },
diff --git a/src/views/dataBoard/renfang/resident/index.vue b/src/views/dataBoard/renfang/resident/index.vue
new file mode 100644
index 000000000..3838d6e25
--- /dev/null
+++ b/src/views/dataBoard/renfang/resident/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <cpt-bread
+      @tap="clickBreadItem"
+      v-if="breadList.length > 1"
+      :bread-list="breadList"
+    />
+    <personnel />
+  </div>
+</template>
+
+<script>
+import cptBread from "@/views/dataBoard/renfang/cpts/bread";
+import personnel from "@/views/dataBoard/cpts/personnel"
+
+export default {
+  name: "renfang",
+
+  components: {
+    cptBread,
+    personnel,
+  },
+
+  data() {
+    return {
+      breadList: [
+        {
+          path: "/dataBoard/renfang/index",
+          meta: {
+            title: "人房总览",
+          },
+        },
+        {
+          path: "/dataBoard/renfang/visualizing",
+          meta: {
+            title: "",
+          },
+        },
+        {
+          path: "/dataBoard/renfang/resi-class",
+          meta: {
+            title: "居民列表",
+          },
+        },
+        {
+          path: "/dataBoard/renfang/resident",
+          meta: {
+            title: "居民画像",
+          },
+        },
+      ],
+    };
+  },
+
+  mounted() {
+    const query = this.$route.query;
+    this.org_id = query.org_id;
+    this.type = query.type;
+    this.type_id = query.type_id;
+    this.pageType = query.pageType;
+    this.type_name = query.type_name;
+    let title = query.type_name;
+    if (this.type == "jineng" || this.type == "gangwei") {
+      title = "失业人员";
+    }
+    if (this.type == "wennuan" || this.type == "fuwu") {
+      title = "低保人员";
+    }
+    this.breadList[1].meta.title = title;
+  },
+  watch: {},
+  methods: {
+    clickBreadItem({ item }) {
+      this.$router.push({
+        path: item.path,
+        query: {
+          org_id: this.org_id,
+          type_id: this.type_id,
+          type: this.type,
+          type_name: this.type_name,
+          pageType: this.pageType,
+        },
+      });
+    }
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/renfang/index.scss"
+  scoped
+></style>
diff --git a/src/views/dataBoard/renfang/visualizing/components/dataTitle.vue b/src/views/dataBoard/renfang/visualizing/components/dataTitle.vue
index 8201a13ba..a11809a02 100644
--- a/src/views/dataBoard/renfang/visualizing/components/dataTitle.vue
+++ b/src/views/dataBoard/renfang/visualizing/components/dataTitle.vue
@@ -3,6 +3,7 @@
     <img class="title_img" src="@/assets/images/index/list-logo.png" alt />
     <div class="tip_title">{{ title }}</div>
     <div class="title_line"></div>
+    <slot></slot>
   </div>
 </template>
 <script>
diff --git a/src/views/dataBoard/renfang/visualizing/index.vue b/src/views/dataBoard/renfang/visualizing/index.vue
index afebf9851..c38753359 100644
--- a/src/views/dataBoard/renfang/visualizing/index.vue
+++ b/src/views/dataBoard/renfang/visualizing/index.vue
@@ -65,11 +65,6 @@ export default {
     ];
     this.pageName = 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: {