diff --git a/src/assets/images/shuju/overview/dwzz-icon.png b/src/assets/images/shuju/overview/dwzz-icon.png
new file mode 100644
index 000000000..57987a234
Binary files /dev/null and b/src/assets/images/shuju/overview/dwzz-icon.png differ
diff --git a/src/assets/images/shuju/overview/gyg-icon.png b/src/assets/images/shuju/overview/gyg-icon.png
new file mode 100644
index 000000000..b739df7d4
Binary files /dev/null and b/src/assets/images/shuju/overview/gyg-icon.png differ
diff --git a/src/assets/images/shuju/overview/lzz-icon.png b/src/assets/images/shuju/overview/lzz-icon.png
new file mode 100644
index 000000000..8c21a5d2f
Binary files /dev/null and b/src/assets/images/shuju/overview/lzz-icon.png differ
diff --git a/src/assets/images/shuju/overview/sqgzz-icon.png b/src/assets/images/shuju/overview/sqgzz-icon.png
new file mode 100644
index 000000000..2489dece0
Binary files /dev/null and b/src/assets/images/shuju/overview/sqgzz-icon.png differ
diff --git a/src/assets/images/shuju/overview/top-bg.png b/src/assets/images/shuju/overview/top-bg.png
new file mode 100644
index 000000000..52d409f27
Binary files /dev/null and b/src/assets/images/shuju/overview/top-bg.png differ
diff --git a/src/assets/images/shuju/overview/wgy-icon.png b/src/assets/images/shuju/overview/wgy-icon.png
new file mode 100644
index 000000000..caae8ae68
Binary files /dev/null and b/src/assets/images/shuju/overview/wgy-icon.png differ
diff --git a/src/assets/images/shuju/overview/xztop-bg.png b/src/assets/images/shuju/overview/xztop-bg.png
new file mode 100644
index 000000000..e0e47263e
Binary files /dev/null and b/src/assets/images/shuju/overview/xztop-bg.png differ
diff --git a/src/assets/images/shuju/overview/zyz-icon.png b/src/assets/images/shuju/overview/zyz-icon.png
new file mode 100644
index 000000000..5acbccde6
Binary files /dev/null and b/src/assets/images/shuju/overview/zyz-icon.png differ
diff --git a/src/assets/scss/dataBoard/overview/index.scss b/src/assets/scss/dataBoard/overview/index.scss
index 9f506d97e..19e707779 100644
--- a/src/assets/scss/dataBoard/overview/index.scss
+++ b/src/assets/scss/dataBoard/overview/index.scss
@@ -261,6 +261,7 @@
 
 .m-jdwgy {
 	height: 220px;
+	padding: 20px 16px;
 }
 
 .m-rfsjtj {
@@ -386,18 +387,24 @@
 
 	.item {
 		display: flex;
-		width: 120px;
+		width: 140px;
+		height: 70px;
+		background: url(../../../../assets/images/shuju/overview/top-bg.png);
+		background-size: 140px 70px;
+		padding: 8px 16px;
+		background-repeat: no-repeat;
 
 		.item-info {
+			height: 14px;
+			line-height: 40px;
 			font-size: 14px;
-			font-family: PingFangSC-Regular, PingFang SC;
+			font-family: PingFang SC;
 			font-weight: 400;
-			color: rgba(255, 255, 255, 0.65);
-			line-height: 40px;
-			vertical-align: bottom;
+			color: #FFFFFF;
+			margin: 0 auto;
 
 			div {
-				margin-bottom: 6px;
+				margin-bottom: 3px;
 
 				&:first-child {
 					line-height: 20px;
@@ -413,16 +420,69 @@
 			}
 
 			b {
-				font-weight: 500;
-				font-size: 24px;
-				color: #ffffff;
+				padding-left: 28px;
+				height: 23px;
+				font-size: 30px;
+				font-family: DIN Alternate;
+				font-weight: bold;
+				font-style: italic;
+				color: #3CF5FF;
+			}
+		}
+
+	}
+
+	.item:nth-child(1) {
+		.item-info {
+			b {
+				color: #F37346;
+			}
+		}
+	}
+
+	.item:nth-child(2) {
+		.item-info {
+			b {
+				color: #3CF5FF;
+			}
+		}
+	}
+
+	.item:nth-child(3) {
+		.item-info {
+			b {
+				color: #3CF5FF;
+			}
+		}
+	}
+
+	.item:nth-child(4) {
+		.item-info {
+			b {
+				color: #FFB73C;
+			}
+		}
+	}
+
+	.item:nth-child(5) {
+		.item-info {
+			b {
+				color: #64C1FF;
+			}
+		}
+	}
+
+	.item:nth-child(6) {
+		.item-info {
+			b {
+				color: #FFB73C;
 			}
 		}
 	}
 }
 
 .m-sqrfph {
-	padding: 16px;
+	padding: 24px 16px;
 
 	.table {
 		.tr {
@@ -496,6 +556,85 @@
 	}
 }
 
+.m-sq12345 {
+	padding: 24px 16px;
+
+	.table {
+		.tr {
+			display: flex;
+			height: 40px;
+
+			.th {
+				width: 110px;
+				height: 40px;
+				line-height: 40px;
+				font-size: 14px;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #A3B9DA;
+			}
+
+			.th:nth-child(1) {
+				width: 65px;
+				text-align: center;
+			}
+
+			.td {
+				height: 40px;
+				line-height: 40px;
+				width: 110px;
+				height: 14px;
+				font-size: 14px;
+				font-family: PingFang SC;
+				font-weight: 400;
+				color: #FFFFFF;
+			}
+
+			.tdbg1 {
+				height: 40px;
+				background: url(../../../../assets/images/shuju/overview/no1-bg.png);
+				background-repeat: no-repeat;
+				background-size: 30px 12px;
+				background-position: center center;
+			}
+
+			.tdbg2 {
+				height: 40px;
+				background: url(../../../../assets/images/shuju/overview/no2-bg.png);
+				background-repeat: no-repeat;
+				background-size: 30px 12px;
+				background-position: center center;
+			}
+
+			.tdbg3 {
+				height: 40px;
+				background: url(../../../../assets/images/shuju/overview/no3-bg.png);
+				background-repeat: no-repeat;
+				background-size: 30px 12px;
+				background-position: center center;
+			}
+
+			.td-or {
+				color: #FFB73C;
+			}
+
+			.td-gr {
+				color: #06CD9B;
+			}
+
+			.td:nth-child(1) {
+				width: 65px;
+				text-align: center;
+			}
+		}
+
+		.tr:nth-child(even) {
+			background: rgba(14, 56, 115, 0.4);
+
+		}
+	}
+}
+
 .date-span {
 	float: right;
 	width: 90px;
diff --git a/src/assets/scss/dataBoard/renfang/index.scss b/src/assets/scss/dataBoard/renfang/index.scss
index 2487c70e8..c5ff2c52a 100644
--- a/src/assets/scss/dataBoard/renfang/index.scss
+++ b/src/assets/scss/dataBoard/renfang/index.scss
@@ -10,10 +10,12 @@
 	.g-left {
 		width: 480px;
 	}
+
 	.g-center {
 		position: relative;
 		width: 820px;
 	}
+
 	.g-right {
 		width: 480px;
 	}
@@ -33,6 +35,7 @@
 	left: 0;
 	width: 100%;
 	background-color: transparent;
+
 	.btn {
 		position: relative;
 		width: 213px;
@@ -40,7 +43,7 @@
 		cursor: pointer;
 		opacity: 0.8;
 
-		> span {
+		>span {
 			position: absolute;
 			top: 0;
 			right: 27px;
@@ -52,16 +55,20 @@
 			font-weight: 400;
 			color: #6fdeff;
 		}
-		> img {
+
+		>img {
 			display: block;
 			width: 213px;
+
 			&.btn-bg-hover {
 				display: none;
 			}
 		}
+
 		&:hover {
 			opacity: 1;
-			> img {
+
+			>img {
 				.btn-bg {
 					display: none;
 				}
@@ -110,6 +117,7 @@
 				line-height: 22px;
 				background: transparent;
 				border: none;
+
 				&::placeholder {
 					color: rgba(255, 255, 255, 0.65);
 				}
@@ -118,6 +126,7 @@
 			.card-btn {
 				padding: 10px;
 				cursor: pointer;
+
 				img {
 					display: block;
 					width: 16px;
@@ -138,7 +147,7 @@
 				display: flex;
 				align-items: center;
 
-				> div {
+				>div {
 					padding: 0 17px;
 
 					&.z-on,
@@ -149,13 +158,14 @@
 			}
 
 			.card-empty {
-				> img {
+				>img {
 					display: block;
 					width: 120px;
 					margin: 0 auto;
 					margin-top: 80px;
 				}
-				> span {
+
+				>span {
 					margin-top: 8px;
 					display: block;
 					font-size: 14px;
@@ -172,6 +182,7 @@
 				height: 230px;
 				overflow-y: auto;
 				@include scrollBar;
+
 				.card-item {
 					display: flex;
 					align-items: center;
@@ -186,20 +197,26 @@
 					color: #ffffff;
 					cursor: pointer;
 					opacity: 0.85;
+
 					&:nth-child(2n) {
 						background: transparent;
 					}
+
 					.i-arrow {
 						margin-left: auto;
 						width: 16px;
+
 						&.z-on {
 							display: none;
 						}
 					}
+
 					&:hover {
 						opacity: 1;
+
 						.i-arrow {
 							display: none;
+
 							&.z-on {
 								display: block;
 							}
@@ -210,6 +227,7 @@
 		}
 	}
 }
+
 .m-search2 {
 	position: absolute;
 	z-index: 70;
@@ -223,6 +241,7 @@
 		border-radius: 4px;
 		border: 1px solid #1a95ff;
 		margin-right: 16px;
+
 		::v-deep .el-range-input {
 			background: transparent;
 			border: none;
@@ -230,11 +249,13 @@
 		}
 	}
 }
+
 .m-box {
 	.box-title {
 		position: relative;
 		width: 100%;
 		height: 56px;
+
 		&-bg {
 			position: absolute;
 			top: 0;
@@ -245,6 +266,7 @@
 			height: 56px;
 			height: 100%;
 		}
+
 		&-txt {
 			position: relative;
 			display: block;
@@ -256,6 +278,7 @@
 			color: #ffffff;
 			line-height: 48px;
 		}
+
 		&-btn {
 			position: absolute;
 			z-index: 1;
@@ -269,6 +292,7 @@
 			font-weight: 500;
 			color: #6fdeff;
 			cursor: pointer;
+
 			img {
 				width: 16px;
 				height: 16px;
@@ -278,13 +302,14 @@
 	}
 
 	.empty {
-		> img {
+		>img {
 			display: block;
 			width: 120px;
 			margin: 0 auto;
 			margin-top: 80px;
 		}
-		> span {
+
+		>span {
 			margin-top: 8px;
 			display: block;
 			font-size: 14px;
@@ -302,11 +327,14 @@
 	height: 423px;
 	overflow-y: auto;
 }
+
 .m-szsq {
 	height: 115px;
 }
+
 .m-rkyj {
 	height: 423px;
+
 	&.z-shrink {
 		height: 253px;
 	}
@@ -334,12 +362,15 @@
 			color: rgba(255, 255, 255, 0.65);
 			line-height: 40px;
 			vertical-align: bottom;
+
 			div {
 				margin-bottom: 6px;
+
 				&:first-child {
 					line-height: 20px;
 				}
 			}
+
 			img {
 				display: inline-block;
 				margin-right: 5px;
@@ -347,6 +378,7 @@
 				height: 20px;
 				vertical-align: bottom;
 			}
+
 			b {
 				font-weight: 500;
 				font-size: 24px;
@@ -402,6 +434,7 @@
 				margin-left: 20px;
 				width: 80px;
 				flex-shrink: 0;
+
 				b {
 					font-size: 20px;
 					font-weight: bold;
@@ -433,6 +466,7 @@
 				background: rgba(111, 222, 255, 0.15);
 				border-radius: 1px;
 				overflow: hidden;
+
 				b {
 					position: relative;
 					display: block;
@@ -455,6 +489,7 @@
 		}
 	}
 }
+
 .linecharts {
 	@include scrollBar;
 	padding-right: 5px;
@@ -500,6 +535,7 @@
 			margin-left: 20px;
 			width: 80px;
 			flex-shrink: 0;
+
 			b {
 				font-size: 20px;
 				font-weight: bold;
@@ -531,6 +567,7 @@
 			background: rgba(111, 222, 255, 0.15);
 			border-radius: 1px;
 			overflow: hidden;
+
 			b {
 				position: relative;
 				display: block;
@@ -552,6 +589,7 @@
 		}
 	}
 }
+
 .tablist {
 	margin-top: 8px;
 	display: flex;
@@ -579,12 +617,15 @@
 		background-size: cover;
 	}
 }
+
 .pieMain {
 	display: flex;
 	justify-content: space-between;
 	margin-left: 25px;
+
 	.legend {
 		margin-top: 40px;
+
 		.legend-row {
 			margin-top: 15px;
 			display: flex;
@@ -676,6 +717,7 @@
 		height: 270px;
 	}
 }
+
 .pieMain2 {
 	.pie {
 		margin-top: 32px;
@@ -683,6 +725,7 @@
 		height: 270px;
 	}
 }
+
 .pieMain3 {
 	.pie {
 		margin-top: 32px;
@@ -690,6 +733,7 @@
 		height: 480px !important;
 	}
 }
+
 .kuangkuang {
 	height: 122px;
 	width: 100%;
@@ -707,6 +751,7 @@
 	text-align: center;
 	color: #fff;
 	overflow: hidden;
+
 	h3 {
 		font-size: 14px;
 		font-weight: 400;
@@ -714,6 +759,7 @@
 		line-height: 20px;
 		margin-top: 16px;
 	}
+
 	h2 {
 		font-size: 32px;
 
@@ -723,6 +769,27 @@
 		letter-spacing: 2px;
 	}
 }
+
 .cur {
 	cursor: pointer;
 }
+
+.visualizing {
+	display: flex;
+	justify-content: space-between;
+
+	&-left {
+		width: 50%;
+		height: 400px;
+	}
+
+	&-right {
+		width: 50%;
+		height: 400px;
+	}
+
+	&-item {
+		width: 450px;
+		height: 400px;
+	}
+}
\ No newline at end of file
diff --git a/src/views/dataBoard/cpts/map/index.vue b/src/views/dataBoard/cpts/map/index.vue
index 953738dba..62bb32413 100644
--- a/src/views/dataBoard/cpts/map/index.vue
+++ b/src/views/dataBoard/cpts/map/index.vue
@@ -1,37 +1,37 @@
 <template>
-	<div class="m-map" :class="{ 'z-td': mapType == 'td' }">
-		<div id="map"></div>
-		<div
-			class="btn"
-			v-if="mapStyleType == 'light'"
-			v-show="false"
-			@click="shiftMapStyle('dark')"
-		>
-			切换深色模式
-		</div>
-		<div class="btn" v-show="false" v-else @click="shiftMapStyle('light')">
-			切换浅色模式
-		</div>
-
-		<cpt-popup
-			ref="popup"
-			@clickListItem="handleClickDotListItem"
-			@operate="handleClickDotBtn"
-		/>
-	</div>
+  <div class="m-map" :class="{ 'z-td': mapType == 'td' }">
+    <div id="map"></div>
+    <div
+      class="btn"
+      v-if="mapStyleType == 'light'"
+      v-show="false"
+      @click="shiftMapStyle('dark')"
+    >
+      切换深色模式
+    </div>
+    <div class="btn" v-show="false" v-else @click="shiftMapStyle('light')">
+      切换浅色模式
+    </div>
+
+    <cpt-popup
+      ref="popup"
+      @clickListItem="handleClickDotListItem"
+      @operate="handleClickDotBtn"
+    />
+  </div>
 </template>
 
 <script>
 import { requestPost } from "@/js/dai/request";
 import nextTick from "dai-js/tools/nextTick";
 import {
-	Scene,
-	PolygonLayer,
-	LineLayer,
-	RasterLayer,
-	PointLayer,
-	Marker,
-	Popup,
+  Scene,
+  PolygonLayer,
+  LineLayer,
+  RasterLayer,
+  PointLayer,
+  Marker,
+  Popup,
 } from "@antv/l7";
 import { GaodeMap, Map } from "@antv/l7-maps";
 import { spliceIntoChunks } from "@/utils/index";
@@ -54,898 +54,897 @@ let searchMarker;
 let searchBgLayer;
 
 export default {
-	name: "l7",
-	inject: ["refresh"],
-
-	data() {
-		return {
-			mapType,
-
-			mapStyleType: localStorage.getItem("mapStyle") || "dark",
-			//   srcGridData: {},
-			darkStyle: {
-				style: "amap://styles/blue",
-				polygonColor: [
-					// "rgba(255, 100, 60, 0.5)",
-					"rgba(43, 231, 253, 0.35)",
-					// "rgba(255, 255, 50, 0.35)",
-				],
-				lineColor: [
-					// "rgba(255, 180, 150, 0.9)",
-					"rgba(43, 231, 253, 0.7)",
-					// "rgba(255, 255, 50, 0.7)",
-				],
-				circleColor: [
-					// "rgba(255, 180, 150, 0.99)",
-					"rgba(43, 231, 253, 0.99)",
-					// "rgba(255, 255, 50, 0.99)",
-				],
-				textColor: [
-					// "rgba(255, 100, 60, 0.99)",
-					"rgba(43, 231, 253, 0.99)",
-					// "rgba(255, 255, 50, 0.99)",
-				],
-				textStrokeColor: "#fff",
-			},
-
-			lightStyle: {
-				style: "amap://styles/whitesmoke",
-				polygonColor: [
-					// "rgba(255, 100, 60, 0.3)",
-					"rgba(43, 231, 253, 0.3)",
-					// "rgba(255, 255, 50, 0.3)",
-				],
-				lineColor: [
-					// "rgba(220, 150, 120, 0.9)",
-					"rgba(33, 201, 223, 0.8)",
-					// "rgba(200, 200, 50, 0.9)",
-				],
-				circleColor: [
-					// "rgba(255, 180, 150, 0.99)",
-					"rgba(13, 181, 203, 0.8)",
-					// "rgba(255, 255, 50, 0.99)",
-				],
-				textColor: [
-					// "rgba(200, 50, 10, 0.99)",
-					"rgba(0, 130, 153, 0.99)",
-					// "rgba(120, 120, 0, 0.99)",
-				],
-				textStrokeColor: "#666",
-			},
-		};
-	},
-
-	props: {
-		pitch: {
-			type: Number,
-			default: 60,
-		},
-
-		srcGridData: {
-			type: Object,
-			default: null,
-		},
-
-		dotList: {
-			type: Array,
-			default: () => [],
-		},
-
-		dotIcoList: {
-			type: Object,
-			default: () => ({}),
-		},
-
-		dotList2: {
-			type: Array,
-			default: () => [],
-		},
-
-		dotIcoList2: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-
-	computed: {},
-
-	components: {
-		cptPopup,
-	},
-
-	watch: {},
-
-	async mounted() {
-		// 临时这么用吧
-		window._AMapSecurityConfig = {
-			securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
-		};
-
-		this.iniMap();
-	},
-
-	computed: {
-		polygonData() {
-			const { srcGridData } = this;
-			if (
-				!srcGridData ||
-				!srcGridData.children ||
-				!Array.isArray(srcGridData.children)
-			) {
-				return { type: "FeatureCollection", features: [] };
-			}
-			const polygon = [
-				...srcGridData.children
-					.filter((item) => item.coordinates.length > 0)
-					.map((item) => ({
-						type: "Feature",
-						properties: {
-							//   id: item.id,
-							//   name: item.name,
-							//   level: item.level,
-							center: [item.longitude, item.latitude],
-							...item,
-						},
-						geometry: {
-							type: "Polygon",
-							coordinates: [
-								spliceIntoChunks(
-									item.coordinates
-										.split(",")
-										.map((item) => parseFloat(item)),
-									2
-								).filter((item) => item.length == 2),
-							],
-						},
-					})),
-			];
-			return { type: "FeatureCollection", features: polygon };
-		},
-
-		polygonDotData() {
-			const { srcGridData } = this;
-			if (
-				!srcGridData ||
-				!srcGridData.children ||
-				!Array.isArray(srcGridData.children)
-			) {
-				return { type: "FeatureCollection", features: [] };
-			}
-			const polygon = [
-				...srcGridData.children
-					.filter((item) => item.coordinates.length > 0)
-					.map((item) => ({
-						type: "Feature",
-						properties: {
-							//   id: item.id,
-							//   name: item.name,
-							//   level: item.level,
-							center: [item.longitude, item.latitude],
-							...item,
-						},
-						geometry: {
-							type: "Polygon",
-							coordinates: [
-								item.latitude
-									? [[item.longitude, item.latitude]]
-									: spliceIntoChunks(
-											item.coordinates
-												.split(",")
-												.map((item) =>
-													parseFloat(item)
-												),
-											2
-									  ).filter((item) => item.length == 2),
-							],
-						},
-					})),
-			];
-			return { type: "FeatureCollection", features: polygon };
-		},
-
-		dotData() {
-			const { dotList } = this;
-			return {
-				type: "FeatureCollection",
-				features: [
-					...dotList
-						.filter((item) => item.latitude)
-						.map((item) => ({
-							type: "Feature",
-							properties: {
-								...item,
-							},
-							geometry: {
-								type: "Point",
-								coordinates: [
-									parseFloat(item.longitude),
-									parseFloat(item.latitude),
-								],
-							},
-						})),
-				],
-			};
-		},
-
-		dotData2() {
-			const { dotList2 } = this;
-			return {
-				type: "FeatureCollection",
-				features: [
-					...dotList2
-						.filter((item) => item.latitude)
-						.map((item) => ({
-							type: "Feature",
-							properties: {
-								...item,
-							},
-							geometry: {
-								type: "Point",
-								coordinates: [
-									parseFloat(item.longitude),
-									parseFloat(item.latitude),
-								],
-							},
-						})),
-				],
-			};
-		},
-	},
-
-	watch: {
-		srcGridData(val, oldValue) {
-			if (oldValue == null) {
-				this.iniMap();
-			} else {
-				this.updateGrid();
-			}
-			this.zoomInABit();
-		},
-		dotList(val, oldValue) {
-			this.updateDot();
-		},
-		dotList2(val, oldValue) {
-			this.updateDot();
-		},
-	},
-
-	methods: {
-		iniMap() {
-			const { darkStyle, lightStyle, srcGridData } = this;
-			if (!srcGridData) return false;
-
-			let styleConfig = darkStyle;
-			if (this.mapStyleType == "light") {
-				styleConfig = lightStyle;
-			}
-
-			const iniCenter = [
-				srcGridData.longitude ||
-					this.$store.state.user.longitude ||
-					116.39743841556731,
-				srcGridData.latitude ||
-					this.$store.state.user.latitude ||
-					39.9088810666821,
-			];
-
-			if (mapType != "qq") {
-				myMap = new Map({
-					center: iniCenter,
-					zoom: 18,
-				});
-			} else {
-				myMap = new GaodeMap({
-					//   pitch: this.pitch,
-					style: styleConfig.style,
-					center: iniCenter,
-					token: "fc14b42e0ca18387866d68ebd4f150c1",
-					zoom: 18,
-					isHotspot: false,
-					resizeEnable: true,
-					doubleClickZoom: false,
-				});
-			}
-
-			scene = new Scene({
-				id: "map",
-				logoVisible: false,
-				map: myMap,
-			});
-
-			scene.on("loaded", async () => {
-				if (mapType == "td") {
-					this.iniMapBase(scene);
-				} else if (mapType == "tdzw") {
-					this.iniMapBase2(scene);
-				}
-
-				this.iniMapGrid(scene);
-				this.iniMapDot(scene);
-				this.iniMapDot2(scene);
-				await nextTick(0);
-				this.zoomInABit();
-			});
-		},
-
-		// 初始化底图
-		iniMapBase(scene) {
-			console.log("-----------------iniMapBase");
-			// 底图服务
-			const baseLayer = new RasterLayer({
-				zIndex: 1,
-			});
-			baseLayer
-				.source(
-					"http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
-					{
-						parser: {
-							type: "rasterTile",
-							tileSize: 256,
-							// minZoom: 6,
-							// maxZoom: 15,
-							zoomOffset: 0,
-						},
-					}
-				)
-				.style({
-					opacity: 0.7,
-				});
-
-			// 注记服务
-			const annotionLayer = new RasterLayer({
-				zIndex: 2,
-			});
-			annotionLayer
-				.source(
-					"http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
-					{
-						parser: {
-							type: "rasterTile",
-							tileSize: 256,
-							// minZoom: 6,
-							// maxZoom: 15,
-							zoomOffset: 0,
-						},
-					}
-				)
-				.style({
-					opacity: 0.5,
-				});
-
-			scene.addLayer(baseLayer);
-			scene.addLayer(annotionLayer);
-		},
-
-		// 初始化底图 天地图山东政务网瓦片
-		iniMapBase2(scene) {
-			console.log("-----------------iniMapBase");
-			// 底图服务
-			const baseLayer = new RasterLayer({
-				zIndex: 1,
-			});
-			baseLayer
-				.source(tdtWpZw.vec, {
-					parser: {
-						type: "rasterTile",
-						tileSize: 256,
-						zoomOffset: 0,
-					},
-				})
-				.style({
-					opacity: 0.7,
-				});
-
-			scene.addLayer(baseLayer);
-		},
-
-		iniMapGrid(scene) {
-			const { darkStyle, lightStyle, polygonData, polygonDotData } = this;
-
-			let styleConfig = darkStyle;
-			if (this.mapStyleType == "light") {
-				styleConfig = lightStyle;
-			}
-
-			console.log("地图初始化数据", polygonData);
-
-			// 画区域面积
-			polygonLayer = new PolygonLayer({
-				autoFit: true,
-			})
-				// .size(0)
-				.source(polygonData)
-				.color("name", styleConfig.polygonColor)
-				//   .shape("extrude")
-				.shape("fill")
-				.style({
-					opacityLinear: {
-						enable: true, // true - false
-						dir: "out", // in - out
-					},
-					opacity: 1,
-					// heightfixed: true,
-					// pickLight: true,
-					raisingHeight: 0,
-					// sourceColor: "#333",
-					// targetColor: "rgba(255,255,255, 0.5)",
-				});
-
-			scene.addLayer(polygonLayer);
-
-			// 画区域边
-			lineLayer = new LineLayer({
-				zIndex: 2,
-				name: "line2",
-			})
-				.source(polygonData)
-				.shape("line")
-				.size(1)
-				.color("name", styleConfig.lineColor)
-				.style({
-					opacity: 1,
-				})
-				.animate({
-					interval: 1, // 间隔
-					duration: 2, // 持续时间，延时
-					trailLength: 2, // 流线长度
-				});
-			scene.addLayer(lineLayer);
-
-			// 画区域中心点的波纹小圆圈
-			circleLayer = new PolygonLayer({
-				zIndex: 3,
-			})
-				.source(polygonDotData)
-				.color("name", styleConfig.circleColor)
-				.shape("circle")
-				.active(true)
-				.animate(true)
-				.size(50)
-				.style({
-					offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直]
-					opacity: 1,
-				});
-			// scene.addLayer(circleLayer);
-
-			scene.addImage(
-				"pos-red",
-				require("@/assets/img/shuju/grid/pos-red.png")
-			);
-			scene.addImage(
-				"pos-green",
-				require("@/assets/img/shuju/grid/pos-green.png")
-			);
-			scene.addImage(
-				"pos-yellow",
-				require("@/assets/img/shuju/grid/pos-yellow.png")
-			);
-			posLayer = new PolygonLayer({
-				zIndex: 4,
-			})
-				.source(polygonDotData)
-				.shape("name", [
-					// "pos-red",
-					"pos-green",
-					// "pos-yellow"
-				])
-				.size(12)
-				.style({
-					offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直]
-					// rotation: 60,
-					// layerType: "fillImage",
-				});
-			// scene.addLayer(posLayer);
-
-			textLayer = new PolygonLayer({
-				zIndex: 20,
-			})
-				.source(polygonDotData)
-				.color("name", styleConfig.textColor)
-				.shape("name", "text")
-				.size(16)
-				.style({
-					textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-					textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
-					spacing: 2, // 字符间距
-					padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-					stroke: styleConfig.textStrokeColor, // 描边颜色
-					strokeWidth: 0.1, // 描边宽度
-					strokeOpacity: 0.8,
-					textAllowOverlap: true,
-				})
-				.active(true);
-			scene.addLayer(textLayer);
-
-			polygonLayer.on("mousemove", (e) => {
-				polygonLayer.style({
-					raisingHeight: 0,
-				});
-			});
-
-			polygonLayer.on("click", (e) => {
-				console.log(e.feature.properties);
-				this.$emit("clickAgency", e.feature.properties);
-			});
-
-			polygonLayer.on("unmousemove", (e) => {
-				polygonLayer.style({
-					raisingHeight: 0,
-				});
-			});
-		},
-
-		iniMapDot(scene) {
-			const { darkStyle, lightStyle, dotIcoList, dotData } = this;
-			Object.keys(dotIcoList).forEach((k) => {
-				scene.addImage(k, dotIcoList[k]);
-			});
-			dotBgLayer = new PointLayer({
-				zIndex: 20,
-			})
-				.source(dotData)
-				.shape("circle")
-				.color("rgba(255,255,255,0.8)")
-				.size(20)
-				.style({
-					strokeWidth: 3,
-					strokeOpacity: 0.1,
-					stroke: "#000",
-				});
-			scene.addLayer(dotBgLayer);
-
-			dotLayer = new PointLayer({
-				zIndex: 21,
-			})
-				.source(dotData)
-				.shape("categoryKey", (k) => k)
-				.size(10)
-				.style({
-					offsets: [0, 0],
-					layerType: "fillImage",
-				});
-			scene.addLayer(dotLayer);
-
-			dotBgLayer.on("click", (e) => {
-				console.log(e.feature.properties);
-				this.$emit("clickDot", e.feature.properties);
-			});
-
-			dotBgLayer.on("mousemove", (e) => {
-				// console.log(e);
-				if (e.feature.properties.content) {
-					const popup = new Popup({
-						offsets: [0, -0],
-						closeButton: false,
-					})
-						.setLnglat(e.feature.geometry.coordinates)
-						.setHTML(
-							`<span>${e.feature.properties.content}</span>`
-						);
-					scene.addPopup(popup);
-				}
-			});
-
-			dotBgLayer.on("unmousemove", (e) => {});
-		},
-
-		iniMapDot2(scene) {
-			const { dotIcoList2: dotIcoList, dotData2: dotData } = this;
-			Object.keys(dotIcoList).forEach((k) => {
-				scene.addImage(k, dotIcoList[k]);
-			});
-
-			dotLayer2 = new PointLayer({
-				zIndex: 21,
-			})
-				.source(dotData)
-				.shape("categoryKey", (k) => k)
-				.size(20)
-				.style({
-					offsets: [0, 0],
-					layerType: "fillImage",
-				});
-			scene.addLayer(dotLayer2);
-
-			dotLayer2.on("click", (e) => {
-				console.log(e.feature.properties);
-				this.$emit("clickDot", e.feature.properties);
-			});
-
-			dotLayer2.on("mousemove", (e) => {
-				// console.log(e);
-				if (e.feature.properties.content) {
-					const popup = new Popup({
-						offsets: [0, -0],
-						closeButton: false,
-					})
-						.setLnglat(e.feature.geometry.coordinates)
-						.setHTML(
-							`<span>${e.feature.properties.content}</span>`
-						);
-					scene.addPopup(popup);
-				}
-			});
-
-			dotLayer2.on("unmousemove", (e) => {});
-		},
-
-		// 把地图缩放等级在原来基础上大一点
-		zoomInABit() {
-			let current = scene.getZoom();
-			scene.setZoomAndCenter(current + 0.5);
-		},
-
-		shiftMapStyle(type) {
-			this.mapStyleType = type;
-			localStorage.setItem("mapStyle", type);
-			this.refresh();
-		},
-
-		updateMap() {
-			this.updateGrid();
-			this.updateDot();
-			this.updateDot2();
-		},
-
-		updateGrid() {
-			const { polygonData, polygonDotData } = this;
-			if (polygonLayer) {
-				polygonLayer.setData(polygonData);
-				lineLayer.setData(polygonData);
-				textLayer.setData(polygonDotData);
-				posLayer.setData(polygonDotData);
-				circleLayer.setData(polygonDotData);
-			}
-		},
-
-		updateDot() {
-			const { dotData } = this;
-			if (dotLayer) {
-				console.log(dotData);
-				dotLayer.setData(dotData);
-				dotBgLayer.setData(dotData);
-			}
-		},
-
-		updateDot2() {
-			const { dotData2: dotData } = this;
-			if (dotLayer2) {
-				console.log(dotData);
-				dotLayer2.setData(dotData);
-			}
-		},
-
-		drawSearchBg(lng, lat) {
-			function getPoints(lng, lat) {
-				// lng 经度；lat 纬度；dis 距离（千米）
-				let r = 6371; //地球半径千米
-				let dis = 0.25; //3千米距离
-				let dlng =
-					2 *
-					Math.asin(
-						Math.sin(dis / (2 * r)) /
-							Math.cos((lat * Math.PI) / 180)
-					);
-				dlng = (dlng * 180) / Math.PI; // 经度半径
-				let dlat = dis / r;
-				dlat = (dlat * 180) / Math.PI; // 纬度半径
-				// 圆形每一度 都算出一个经纬度
-				for (let sides = 1; sides <= 360; sides++) {
-					var angle = Math.PI * (1 / sides - 1 / 2);
-					var rotatedAngle, x, y;
-					var points = [];
-					for (var i = 0; i < sides; ++i) {
-						rotatedAngle = angle + (i * 2 * Math.PI) / sides;
-						x = lng + dlng * Math.cos(rotatedAngle);
-						y = lat + dlat * Math.sin(rotatedAngle);
-						points.push([x, y]);
-					}
-				}
-				console.log("points=======", points);
-				return points;
-			}
-
-			let sourceData;
-			if (lng) {
-				sourceData = {
-					type: "FeatureCollection",
-					features: [
-						{
-							type: "Feature",
-							properties: {
-								center: [lng, lat],
-							},
-							geometry: {
-								type: "Polygon",
-								coordinates: [getPoints(lng, lat)],
-							},
-						},
-					],
-				};
-			} else {
-				sourceData = {
-					type: "FeatureCollection",
-					features: [],
-				};
-			}
-
-			if (searchBgLayer) {
-				console.log("searchBgLayer已经存在了", searchBgLayer);
-				searchBgLayer.setData(sourceData);
-			} else {
-				searchBgLayer = new PolygonLayer({
-					//   autoFit: true,
-				})
-					.source(sourceData)
-					.color("#f0f")
-					.shape("fill")
-					.style({
-						opacityLinear: {
-							enable: true, // true - false
-							dir: "out", // in - out
-						},
-						opacity: 0.3,
-						raisingHeight: 0,
-					});
-
-				scene.addLayer(searchBgLayer);
-			}
-		},
-
-		async setDotMarker(item, posArr) {
-			this.removeDotMarker();
-			this.drawSearchBg(...posArr);
-			const marker = new Marker({
-				offsets: [0, -20],
-			}).setLnglat(posArr);
-
-			const res = await this.$refs.popup.show(item);
-			if (res) {
-				const popup = new Popup({
-					closeButton: true,
-					closeOnClick: true,
-					maxWidth: 400,
-				})
-					.setLnglat(posArr)
-					.setDOMContent(this.$refs.popup.$el);
-				marker.setPopup(popup);
-			}
-
-			marker.on("click", (e) => {
-				console.log("click", e);
-				// this.handleClickDot(item, posArr);
-				marker.openPopup();
-			});
-
-			scene.addMarker(marker);
-			scene.setZoomAndCenter(14, posArr);
-			marker.openPopup();
-			searchMarker = marker;
-		},
-
-		removeDotMarker() {
-			console.log("removeDotMarker");
-			if (searchMarker) {
-				searchMarker.remove();
-			}
-			if (searchBgLayer) {
-				console.log("removeDotMarker-----searchBgLayer");
-				this.drawSearchBg();
-			}
-		},
-
-		async handleClickDot(item, posArr) {
-			console.log("handleClickDot", item, posArr);
-			const res = await this.$refs.popup.show(item);
-			if (res) {
-				const popup = new Popup({
-					closeButton: true,
-					closeOnClick: true,
-					maxWidth: 400,
-				})
-					.setLnglat(posArr)
-					.setDOMContent(this.$refs.popup.$el);
-				scene.addPopup(popup);
-			}
-		},
-
-		handleClickDotBtn(type, info) {
-			console.log(type, info);
-			this.$emit("clickDotBtn", type, info);
-		},
-
-		handleClickDotListItem(item) {
-			console.log("handleClickDotListItem", item);
-			this.handleClickDot(item, [
-				parseFloat(item.longitude),
-				parseFloat(item.latitude),
-			]);
-		},
-	},
+  name: "l7",
+  inject: ["refresh"],
+
+  data() {
+    return {
+      mapType,
+
+      mapStyleType: localStorage.getItem("mapStyle") || "dark",
+      //   srcGridData: {},
+      darkStyle: {
+        style: "amap://styles/blue",
+        polygonColor: [
+          // "rgba(255, 100, 60, 0.5)",
+          "rgba(43, 231, 253, 0.35)",
+          // "rgba(255, 255, 50, 0.35)",
+        ],
+        lineColor: [
+          // "rgba(255, 180, 150, 0.9)",
+          "rgba(43, 231, 253, 0.7)",
+          // "rgba(255, 255, 50, 0.7)",
+        ],
+        circleColor: [
+          // "rgba(255, 180, 150, 0.99)",
+          "rgba(43, 231, 253, 0.99)",
+          // "rgba(255, 255, 50, 0.99)",
+        ],
+        textColor: [
+          // "rgba(255, 100, 60, 0.99)",
+          "rgba(43, 231, 253, 0.99)",
+          // "rgba(255, 255, 50, 0.99)",
+        ],
+        textStrokeColor: "#fff",
+      },
+
+      lightStyle: {
+        style: "amap://styles/whitesmoke",
+        polygonColor: [
+          // "rgba(255, 100, 60, 0.3)",
+          "rgba(43, 231, 253, 0.3)",
+          // "rgba(255, 255, 50, 0.3)",
+        ],
+        lineColor: [
+          // "rgba(220, 150, 120, 0.9)",
+          "rgba(33, 201, 223, 0.8)",
+          // "rgba(200, 200, 50, 0.9)",
+        ],
+        circleColor: [
+          // "rgba(255, 180, 150, 0.99)",
+          "rgba(13, 181, 203, 0.8)",
+          // "rgba(255, 255, 50, 0.99)",
+        ],
+        textColor: [
+          // "rgba(200, 50, 10, 0.99)",
+          "rgba(0, 130, 153, 0.99)",
+          // "rgba(120, 120, 0, 0.99)",
+        ],
+        textStrokeColor: "#666",
+      },
+    };
+  },
+
+  props: {
+    pitch: {
+      type: Number,
+      default: 60,
+    },
+
+    srcGridData: {
+      type: Object,
+      default: null,
+    },
+
+    dotList: {
+      type: Array,
+      default: () => [],
+    },
+
+    dotIcoList: {
+      type: Object,
+      default: () => ({}),
+    },
+
+    dotList2: {
+      type: Array,
+      default: () => [],
+    },
+
+    dotIcoList2: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {},
+
+  components: {
+    cptPopup,
+  },
+
+  watch: {},
+
+  async mounted() {
+    // 临时这么用吧
+    window._AMapSecurityConfig = {
+      securityJsCode: "92ea2c965c6cf1ba7ee3a8fe01449ef2",
+    };
+
+    this.iniMap();
+  },
+
+  computed: {
+    polygonData() {
+      const { srcGridData } = this;
+      if (
+        !srcGridData ||
+        !srcGridData.children ||
+        !Array.isArray(srcGridData.children)
+      ) {
+        return { type: "FeatureCollection", features: [] };
+      }
+      const polygon = [
+        ...srcGridData.children
+          .filter((item) => item.coordinates.length > 0)
+          .map((item) => ({
+            type: "Feature",
+            properties: {
+              //   id: item.id,
+              //   name: item.name,
+              //   level: item.level,
+              center: [item.longitude, item.latitude],
+              ...item,
+            },
+            geometry: {
+              type: "Polygon",
+              coordinates: [
+                spliceIntoChunks(
+                  item.coordinates.split(",").map((item) => parseFloat(item)),
+                  2
+                ).filter((item) => item.length == 2),
+              ],
+            },
+          })),
+      ];
+      return { type: "FeatureCollection", features: polygon };
+    },
+
+    polygonDotData() {
+      const { srcGridData } = this;
+      if (
+        !srcGridData ||
+        !srcGridData.children ||
+        !Array.isArray(srcGridData.children)
+      ) {
+        return { type: "FeatureCollection", features: [] };
+      }
+      const polygon = [
+        ...srcGridData.children
+          .filter((item) => item.coordinates.length > 0)
+          .map((item) => ({
+            type: "Feature",
+            properties: {
+              //   id: item.id,
+              //   name: item.name,
+              //   level: item.level,
+              center: [item.longitude, item.latitude],
+              ...item,
+            },
+            geometry: {
+              type: "Polygon",
+              coordinates: [
+                item.latitude
+                  ? [[item.longitude, item.latitude]]
+                  : spliceIntoChunks(
+                      item.coordinates
+                        .split(",")
+                        .map((item) => parseFloat(item)),
+                      2
+                    ).filter((item) => item.length == 2),
+              ],
+            },
+          })),
+      ];
+      return { type: "FeatureCollection", features: polygon };
+    },
+
+    dotData() {
+      const { dotList } = this;
+      return {
+        type: "FeatureCollection",
+        features: [
+          ...dotList
+            .filter((item) => item.latitude)
+            .map((item) => ({
+              type: "Feature",
+              properties: {
+                ...item,
+              },
+              geometry: {
+                type: "Point",
+                coordinates: [
+                  parseFloat(item.longitude),
+                  parseFloat(item.latitude),
+                ],
+              },
+            })),
+        ],
+      };
+    },
+
+    dotData2() {
+      const { dotList2 } = this;
+      return {
+        type: "FeatureCollection",
+        features: [
+          ...dotList2
+            .filter((item) => item.latitude)
+            .map((item) => ({
+              type: "Feature",
+              properties: {
+                ...item,
+              },
+              geometry: {
+                type: "Point",
+                coordinates: [
+                  parseFloat(item.longitude),
+                  parseFloat(item.latitude),
+                ],
+              },
+            })),
+        ],
+      };
+    },
+  },
+
+  watch: {
+    srcGridData(val, oldValue) {
+      if (oldValue == null) {
+        this.iniMap();
+      } else {
+        this.updateGrid();
+      }
+      this.zoomInABit();
+    },
+    dotList(val, oldValue) {
+      this.updateDot();
+    },
+    dotList2(val, oldValue) {
+      this.updateDot();
+    },
+  },
+
+  methods: {
+    iniMap() {
+      const { darkStyle, lightStyle, srcGridData } = this;
+      if (!srcGridData) return false;
+
+      let styleConfig = darkStyle;
+      if (this.mapStyleType == "light") {
+        styleConfig = lightStyle;
+      }
+
+      const iniCenter = [
+        srcGridData.longitude ||
+          this.$store.state.user.longitude ||
+          116.39743841556731,
+        srcGridData.latitude ||
+          this.$store.state.user.latitude ||
+          39.9088810666821,
+      ];
+
+      if (mapType != "qq") {
+        myMap = new Map({
+          center: iniCenter,
+          zoom: 18,
+        });
+      } else {
+        myMap = new GaodeMap({
+          //   pitch: this.pitch,
+          style: styleConfig.style,
+          center: iniCenter,
+          token: "fc14b42e0ca18387866d68ebd4f150c1",
+          zoom: 18,
+          isHotspot: false,
+          resizeEnable: true,
+          doubleClickZoom: false,
+        });
+      }
+
+      scene = new Scene({
+        id: "map",
+        logoVisible: false,
+        map: myMap,
+      });
+
+      scene.on("loaded", async () => {
+        if (mapType == "td") {
+          this.iniMapBase(scene);
+        } else if (mapType == "tdzw") {
+          this.iniMapBase2(scene);
+        }
+
+        this.iniMapGrid(scene);
+        this.iniMapDot(scene);
+        this.iniMapDot2(scene);
+        await nextTick(0);
+        this.zoomInABit();
+      });
+    },
+
+    // 初始化底图
+    iniMapBase(scene) {
+      console.log("-----------------iniMapBase");
+      // 底图服务
+      const baseLayer = new RasterLayer({
+        zIndex: 1,
+      });
+      baseLayer
+        .source(
+          "http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+          {
+            parser: {
+              type: "rasterTile",
+              tileSize: 256,
+              // minZoom: 6,
+              // maxZoom: 15,
+              zoomOffset: 0,
+            },
+          }
+        )
+        .style({
+          opacity: 0.7,
+        });
+
+      // 注记服务
+      const annotionLayer = new RasterLayer({
+        zIndex: 2,
+      });
+      annotionLayer
+        .source(
+          "http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}",
+          {
+            parser: {
+              type: "rasterTile",
+              tileSize: 256,
+              // minZoom: 6,
+              // maxZoom: 15,
+              zoomOffset: 0,
+            },
+          }
+        )
+        .style({
+          opacity: 0.5,
+        });
+
+      scene.addLayer(baseLayer);
+      scene.addLayer(annotionLayer);
+    },
+
+    // 初始化底图 天地图山东政务网瓦片
+    iniMapBase2(scene) {
+      console.log("-----------------iniMapBase");
+      // 底图服务
+      const baseLayer = new RasterLayer({
+        zIndex: 1,
+      });
+      baseLayer
+        .source(tdtWpZw.vec, {
+          parser: {
+            type: "rasterTile",
+            tileSize: 256,
+            zoomOffset: 0,
+          },
+        })
+        .style({
+          opacity: 0.7,
+        });
+
+      scene.addLayer(baseLayer);
+    },
+
+    iniMapGrid(scene) {
+      const { darkStyle, lightStyle, polygonData, polygonDotData } = this;
+
+      let styleConfig = darkStyle;
+      if (this.mapStyleType == "light") {
+        styleConfig = lightStyle;
+      }
+
+      console.log("地图初始化数据", polygonData);
+
+      // 画区域面积
+      polygonLayer = new PolygonLayer({
+        autoFit: true,
+      })
+        // .size(0)
+        .source(polygonData)
+        .color("name", styleConfig.polygonColor)
+        //   .shape("extrude")
+        .shape("fill")
+        .style({
+          opacityLinear: {
+            enable: true, // true - false
+            dir: "out", // in - out
+          },
+          opacity: 1,
+          // heightfixed: true,
+          // pickLight: true,
+          raisingHeight: 0,
+          // sourceColor: "#333",
+          // targetColor: "rgba(255,255,255, 0.5)",
+        });
+
+      scene.addLayer(polygonLayer);
+
+      // 画区域边
+      lineLayer = new LineLayer({
+        zIndex: 2,
+        name: "line2",
+      })
+        .source(polygonData)
+        .shape("line")
+        .size(1)
+        .color("name", styleConfig.lineColor)
+        .style({
+          opacity: 1,
+        })
+        .animate({
+          interval: 1, // 间隔
+          duration: 2, // 持续时间，延时
+          trailLength: 2, // 流线长度
+        });
+      scene.addLayer(lineLayer);
+
+      // 画区域中心点的波纹小圆圈
+      circleLayer = new PolygonLayer({
+        zIndex: 3,
+      })
+        .source(polygonDotData)
+        .color("name", styleConfig.circleColor)
+        .shape("circle")
+        .active(true)
+        .animate(true)
+        .size(50)
+        .style({
+          offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直]
+          opacity: 1,
+        });
+      // scene.addLayer(circleLayer);
+
+      scene.addImage("pos-red", require("@/assets/img/shuju/grid/pos-red.png"));
+      scene.addImage(
+        "pos-green",
+        require("@/assets/img/shuju/grid/pos-green.png")
+      );
+      scene.addImage(
+        "pos-yellow",
+        require("@/assets/img/shuju/grid/pos-yellow.png")
+      );
+      posLayer = new PolygonLayer({
+        zIndex: 4,
+      })
+        .source(polygonDotData)
+        .shape("name", [
+          // "pos-red",
+          "pos-green",
+          // "pos-yellow"
+        ])
+        .size(12)
+        .style({
+          offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直]
+          // rotation: 60,
+          // layerType: "fillImage",
+        });
+      // scene.addLayer(posLayer);
+
+      textLayer = new PolygonLayer({
+        zIndex: 20,
+      })
+        .source(polygonDotData)
+        .color("name", styleConfig.textColor)
+        .shape("name", "text")
+        .size(16)
+        .style({
+          textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
+          textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
+          spacing: 2, // 字符间距
+          padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
+          stroke: styleConfig.textStrokeColor, // 描边颜色
+          strokeWidth: 0.1, // 描边宽度
+          strokeOpacity: 0.8,
+          textAllowOverlap: true,
+        })
+        .active(true);
+      scene.addLayer(textLayer);
+
+      polygonLayer.on("mouseenter", (e) => {
+        // const { lng, lat } = e.lngLat;
+        // const popup = new Popup({
+        //   title: e.feature.properties.name,
+        //   html: e.feature.properties.center_addre,
+        //   lngLat: {
+        //     lng,
+        //     lat,
+        //   },
+        // });
+
+        scene.addPopup(layerPopup);
+      });
+
+      polygonLayer.on("mousemove", (e) => {
+        polygonLayer.style({
+          raisingHeight: 0,
+        });
+      });
+      polygonLayer.on("click", (e) => {
+        console.log("click::", e.feature.properties);
+        this.$emit("clickAgency", e.feature.properties);
+      });
+
+      polygonLayer.on("unmousemove", (e) => {
+        polygonLayer.style({
+          raisingHeight: 0,
+        });
+      });
+    },
+
+    iniMapDot(scene) {
+      const { darkStyle, lightStyle, dotIcoList, dotData } = this;
+      Object.keys(dotIcoList).forEach((k) => {
+        scene.addImage(k, dotIcoList[k]);
+      });
+      dotBgLayer = new PointLayer({
+        zIndex: 20,
+      })
+        .source(dotData)
+        .shape("circle")
+        .color("rgba(255,255,255,0.8)")
+        .size(20)
+        .style({
+          strokeWidth: 3,
+          strokeOpacity: 0.1,
+          stroke: "#000",
+        });
+      scene.addLayer(dotBgLayer);
+
+      dotLayer = new PointLayer({
+        zIndex: 21,
+      })
+        .source(dotData)
+        .shape("categoryKey", (k) => k)
+        .size(10)
+        .style({
+          offsets: [0, 0],
+          layerType: "fillImage",
+        });
+      scene.addLayer(dotLayer);
+
+      dotBgLayer.on("click", (e) => {
+        console.log(e.feature.properties);
+        this.$emit("clickDot", e.feature.properties);
+      });
+
+      dotBgLayer.on("mousemove", (e) => {
+        // console.log(e);
+        if (e.feature.properties.content) {
+          const popup = new Popup({
+            offsets: [0, -0],
+            closeButton: false,
+          })
+            .setLnglat(e.feature.geometry.coordinates)
+            .setHTML(`<span>${e.feature.properties.content}</span>`);
+          scene.addPopup(popup);
+        }
+      });
+
+      dotBgLayer.on("unmousemove", (e) => {});
+    },
+
+    iniMapDot2(scene) {
+      const { dotIcoList2: dotIcoList, dotData2: dotData } = this;
+      Object.keys(dotIcoList).forEach((k) => {
+        scene.addImage(k, dotIcoList[k]);
+      });
+
+      dotLayer2 = new PointLayer({
+        zIndex: 21,
+      })
+        .source(dotData)
+        .shape("categoryKey", (k) => k)
+        .size(20)
+        .style({
+          offsets: [0, 0],
+          layerType: "fillImage",
+        });
+      scene.addLayer(dotLayer2);
+
+      dotLayer2.on("click", (e) => {
+        console.log(e.feature.properties);
+        this.$emit("clickDot", e.feature.properties);
+      });
+
+      dotLayer2.on("mousemove", (e) => {
+        // console.log(e);
+        if (e.feature.properties.content) {
+          const popup = new Popup({
+            offsets: [0, -0],
+            closeButton: false,
+          })
+            .setLnglat(e.feature.geometry.coordinates)
+            .setHTML(`<span>${e.feature.properties.content}</span>`);
+          scene.addPopup(popup);
+        }
+      });
+
+      dotLayer2.on("unmousemove", (e) => {});
+    },
+
+    // 把地图缩放等级在原来基础上大一点
+    zoomInABit() {
+      let current = scene.getZoom();
+      scene.setZoomAndCenter(current + 0.5);
+    },
+
+    shiftMapStyle(type) {
+      this.mapStyleType = type;
+      localStorage.setItem("mapStyle", type);
+      this.refresh();
+    },
+
+    updateMap() {
+      this.updateGrid();
+      this.updateDot();
+      this.updateDot2();
+    },
+
+    updateGrid() {
+      const { polygonData, polygonDotData } = this;
+      if (polygonLayer) {
+        polygonLayer.setData(polygonData);
+        lineLayer.setData(polygonData);
+        textLayer.setData(polygonDotData);
+        posLayer.setData(polygonDotData);
+        circleLayer.setData(polygonDotData);
+      }
+    },
+
+    updateDot() {
+      const { dotData } = this;
+      if (dotLayer) {
+        console.log(dotData);
+        dotLayer.setData(dotData);
+        dotBgLayer.setData(dotData);
+      }
+    },
+
+    updateDot2() {
+      const { dotData2: dotData } = this;
+      if (dotLayer2) {
+        console.log(dotData);
+        dotLayer2.setData(dotData);
+      }
+    },
+
+    drawSearchBg(lng, lat) {
+      function getPoints(lng, lat) {
+        // lng 经度；lat 纬度；dis 距离（千米）
+        let r = 6371; //地球半径千米
+        let dis = 0.25; //3千米距离
+        let dlng =
+          2 *
+          Math.asin(Math.sin(dis / (2 * r)) / Math.cos((lat * Math.PI) / 180));
+        dlng = (dlng * 180) / Math.PI; // 经度半径
+        let dlat = dis / r;
+        dlat = (dlat * 180) / Math.PI; // 纬度半径
+        // 圆形每一度 都算出一个经纬度
+        for (let sides = 1; sides <= 360; sides++) {
+          var angle = Math.PI * (1 / sides - 1 / 2);
+          var rotatedAngle, x, y;
+          var points = [];
+          for (var i = 0; i < sides; ++i) {
+            rotatedAngle = angle + (i * 2 * Math.PI) / sides;
+            x = lng + dlng * Math.cos(rotatedAngle);
+            y = lat + dlat * Math.sin(rotatedAngle);
+            points.push([x, y]);
+          }
+        }
+        console.log("points=======", points);
+        return points;
+      }
+
+      let sourceData;
+      if (lng) {
+        sourceData = {
+          type: "FeatureCollection",
+          features: [
+            {
+              type: "Feature",
+              properties: {
+                center: [lng, lat],
+              },
+              geometry: {
+                type: "Polygon",
+                coordinates: [getPoints(lng, lat)],
+              },
+            },
+          ],
+        };
+      } else {
+        sourceData = {
+          type: "FeatureCollection",
+          features: [],
+        };
+      }
+
+      if (searchBgLayer) {
+        console.log("searchBgLayer已经存在了", searchBgLayer);
+        searchBgLayer.setData(sourceData);
+      } else {
+        searchBgLayer = new PolygonLayer({
+          //   autoFit: true,
+        })
+          .source(sourceData)
+          .color("#f0f")
+          .shape("fill")
+          .style({
+            opacityLinear: {
+              enable: true, // true - false
+              dir: "out", // in - out
+            },
+            opacity: 0.3,
+            raisingHeight: 0,
+          });
+
+        scene.addLayer(searchBgLayer);
+      }
+    },
+
+    async setDotMarker(item, posArr) {
+      this.removeDotMarker();
+      this.drawSearchBg(...posArr);
+      const marker = new Marker({
+        offsets: [0, -20],
+      }).setLnglat(posArr);
+
+      const res = await this.$refs.popup.show(item);
+      if (res) {
+        const popup = new Popup({
+          closeButton: true,
+          closeOnClick: true,
+          maxWidth: 400,
+        })
+          .setLnglat(posArr)
+          .setDOMContent(this.$refs.popup.$el);
+        marker.setPopup(popup);
+      }
+
+      marker.on("click", (e) => {
+        console.log("click", e);
+        // this.handleClickDot(item, posArr);
+        marker.openPopup();
+      });
+
+      scene.addMarker(marker);
+      scene.setZoomAndCenter(14, posArr);
+      marker.openPopup();
+      searchMarker = marker;
+    },
+
+    removeDotMarker() {
+      console.log("removeDotMarker");
+      if (searchMarker) {
+        searchMarker.remove();
+      }
+      if (searchBgLayer) {
+        console.log("removeDotMarker-----searchBgLayer");
+        this.drawSearchBg();
+      }
+    },
+
+    async handleClickDot(item, posArr) {
+      console.log("handleClickDot", item, posArr);
+      const res = await this.$refs.popup.show(item);
+      if (res) {
+        const popup = new Popup({
+          closeButton: true,
+          closeOnClick: true,
+          maxWidth: 400,
+        })
+          .setLnglat(posArr)
+          .setDOMContent(this.$refs.popup.$el);
+        scene.addPopup(popup);
+      }
+    },
+
+    handleClickDotBtn(type, info) {
+      console.log(type, info);
+      this.$emit("clickDotBtn", type, info);
+    },
+
+    handleClickDotListItem(item) {
+      console.log("handleClickDotListItem", item);
+      this.handleClickDot(item, [
+        parseFloat(item.longitude),
+        parseFloat(item.latitude),
+      ]);
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .m-map {
-	position: relative;
-	height: 100%;
-	border-radius: 10px;
-	overflow: hidden;
-	background: transparent;
-
-	&::after {
-		position: absolute;
-		content: "";
-		display: block;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		pointer-events: none;
-		background: radial-gradient(
-			rgba(#020c38, 0) 0%,
-			rgba(#020c38, 0) 60%,
-			rgba(#020c38, 1) 85%,
-			rgba(#020c38, 1) 100%
-		);
-	}
-
-	&.z-td {
-		#app {
-			/deep/ .l7-scene {
-				canvas {
-					background-color: rgba(43, 51, 73, 0.82);
-					background-image: radial-gradient(
-						rgba(0, 0, 0, 0),
-						rgba(0, 0, 0, 0.3),
-						#000
-					);
-				}
-				.gray {
-					-webkit-filter: grayscale(100%);
-					filter: grayscale(100%);
-					opacity: 0.7;
-				}
-			}
-		}
-	}
-
-	/deep/ .l7-popup {
-		z-index: 100;
-	}
-	/deep/ .l7-popup-content {
-		background: rgba(#020340, 0.58);
-		box-shadow: 0 0 20px 3px inset rgba(#22f, 0.1);
-	}
-	/deep/ .l7-popup-close-button {
-		padding: 4px;
-		font-size: 36px;
-		color: rgba(#fff, 0.8);
-	}
-
-	#map {
-		width: 100%;
-		height: 100%;
-	}
-	#searchMap {
-		position: absolute;
-		width: 200px;
-		height: 200px;
-		visibility: hidden;
-		pointer-events: none;
-	}
-	.btn {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 100px;
-		line-height: 36px;
-		height: 36px;
-		text-align: center;
-		color: #ffffff;
-		font-size: 14px;
-		background-color: rgba(#000, 0.2);
-		cursor: pointer;
-	}
+  position: relative;
+  height: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  background: transparent;
+
+  &::after {
+    position: absolute;
+    content: "";
+    display: block;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    background: radial-gradient(
+      rgba(#020c38, 0) 0%,
+      rgba(#020c38, 0) 60%,
+      rgba(#020c38, 1) 85%,
+      rgba(#020c38, 1) 100%
+    );
+  }
+
+  &.z-td {
+    #app {
+      /deep/ .l7-scene {
+        canvas {
+          background-color: rgba(43, 51, 73, 0.82);
+          background-image: radial-gradient(
+            rgba(0, 0, 0, 0),
+            rgba(0, 0, 0, 0.3),
+            #000
+          );
+        }
+        .gray {
+          -webkit-filter: grayscale(100%);
+          filter: grayscale(100%);
+          opacity: 0.7;
+        }
+      }
+    }
+  }
+
+  /deep/ .l7-popup {
+    z-index: 100;
+  }
+  /deep/ .l7-popup-content {
+    background: rgba(#020340, 0.58);
+    box-shadow: 0 0 20px 3px inset rgba(#22f, 0.1);
+  }
+  /deep/ .l7-popup-close-button {
+    padding: 4px;
+    font-size: 36px;
+    color: rgba(#fff, 0.8);
+  }
+
+  #map {
+    width: 100%;
+    height: 100%;
+  }
+  #searchMap {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  .btn {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100px;
+    line-height: 36px;
+    height: 36px;
+    text-align: center;
+    color: #ffffff;
+    font-size: 14px;
+    background-color: rgba(#000, 0.2);
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/src/views/dataBoard/overview/components/jdwgy.vue b/src/views/dataBoard/overview/components/jdwgy.vue
index 7e9606126..8796385ef 100644
--- a/src/views/dataBoard/overview/components/jdwgy.vue
+++ b/src/views/dataBoard/overview/components/jdwgy.vue
@@ -1,16 +1,32 @@
 <template>
-  <div class="m-subbox m-jdwgy"></div>
-  </template>
-  <script>
-  export default {
-    name: "jdwgy",
-    data() {},
-  };
-  </script>
-  
-  <style
-    lang="scss"
-    src="@/assets/scss/dataBoard/overview/index.scss"
-    scoped
-  ></style>
-  
\ No newline at end of file
+  <div class="m-subbox m-jdwgy">
+    <div class="table">
+      <el-table :data="list">
+        <el-table-column label="序号" type="index" width="80" />
+        <el-table-column prop="address" width="120" label="所属社区" />
+        <el-table-column prop="name" width="120" label="姓名" />
+        <el-table-column prop="sex" width="120" label="性别" />
+        <el-table-column prop="old" width="120" label="年龄" />
+        <el-table-column prop="tel" label="电话" />
+        <el-table-column prop="operate" width="120" label="操作" />
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "jdwgy",
+  data() {
+    return {
+      list: [{}, {}, {}],
+    };
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/overview/index.scss"
+  scoped
+></style>
+<style lang="scss" src="@/assets/scss/dataBoard/table.scss" scoped></style>
diff --git a/src/views/dataBoard/overview/components/map-top.vue b/src/views/dataBoard/overview/components/map-top.vue
index 5a84b3592..bc4bffd12 100644
--- a/src/views/dataBoard/overview/components/map-top.vue
+++ b/src/views/dataBoard/overview/components/map-top.vue
@@ -3,44 +3,44 @@
     <div class="item">
       <div class="item-info">
         <div>
-          <img src="~@/assets/images/shuju/renfang/index/per/lnr.png" />老年人
+          <img src="~@/assets/images/shuju/overview/sqgzz-icon.png" />
+          社区工作者
         </div>
         <div>
-          <b></b>
-          %
+          <b>5</b>
         </div>
       </div>
     </div>
     <div class="item">
       <div class="item-info">
         <div>
-          <img src="~@/assets/images/shuju/renfang/index/per/qsn.png" />青少年
+          <img src="~@/assets/images/shuju/overview/wgy-icon.png" />
+          网格员
         </div>
         <div>
-          <b></b>
-          %
+          <b>19</b>
         </div>
       </div>
     </div>
     <div class="item">
       <div class="item-info">
         <div>
-          <img src="~@/assets/images/shuju/renfang/index/per/zyz.png" />志愿者
+          <img src="~@/assets/images/shuju/overview/lzz-icon.png" />
+          楼组/单元长
         </div>
         <div>
-          <b></b>
-          %
+          <b>52</b>
         </div>
       </div>
     </div>
     <div class="item">
       <div class="item-info">
         <div>
-          <img src="~@/assets/images/shuju/renfang/index/per/dy.png" />党员
+          <img src="~@/assets/images/shuju/overview/gyg-icon.png" />
+          公益岗
         </div>
         <div>
-          <b></b>
-          %
+          <b>23</b>
         </div>
       </div>
     </div>
@@ -48,24 +48,22 @@
       <div class="item-info">
         <div>
           <img
-            src="~@/assets/images/shuju/renfang/index/per/syry.png"
-          />失业人员
+            src="~@/assets/images/shuju/overview/dwzz-icon.png"
+          />单位/组织
         </div>
         <div>
-          <b></b>
-          %
+          <b>12</b>
         </div>
       </div>
     </div>
     <div class="item">
       <div class="item-info">
         <div>
-          <img src="~@/assets/images/shuju/renfang/index/per/ygxl.png" />
-          月更新率
+          <img src="~@/assets/images/shuju/overview/zyz-icon.png" />
+          志愿者
         </div>
         <div>
-          <b></b>
-          %
+          <b>78</b>
         </div>
       </div>
     </div>
diff --git a/src/views/dataBoard/overview/components/sq12345.vue b/src/views/dataBoard/overview/components/sq12345.vue
index 56f9f92a3..ba0622bfb 100644
--- a/src/views/dataBoard/overview/components/sq12345.vue
+++ b/src/views/dataBoard/overview/components/sq12345.vue
@@ -1,10 +1,77 @@
 <template>
-  <div class="m-subbox"></div>
+  <div class="m-subbox m-sq12345">
+    <div class="table">
+      <div class="tr">
+        <div class="th">排名</div>
+        <div class="th">社区</div>
+        <div class="th">事件数</div>
+        <div class="th">处理中</div>
+        <div class="th">已办结</div>
+      </div>
+      <div class="tr" v-for="item in pmList" :key="item.num">
+        <div :class="item.num < 4 ? `td tdbg${item.num}` : 'td'">
+          {{ item.num }}
+        </div>
+        <div class="td">{{ item.shequ }}</div>
+        <div class="td">{{ item.fwgxs }}</div>
+        <div class="td td-or">{{ item.rkgxs }}</div>
+        <div class="td td-gr">{{ item.rfgxzs }}</div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 export default {
   name: "sq12345",
-  data() {},
+  data() {
+    return {
+      value2: "2023-02",
+      pmList: [
+        {
+          num: "1",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "12",
+          rfgxzs: "410",
+        },
+        {
+          num: "2",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "12",
+          rfgxzs: "410",
+        },
+        {
+          num: "3",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "12",
+          rfgxzs: "410",
+        },
+        {
+          num: "4",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "12",
+          rfgxzs: "410",
+        },
+        {
+          num: "5",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "12",
+          rfgxzs: "410",
+        },
+        {
+          num: "6",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "12",
+          rfgxzs: "410",
+        },
+      ],
+    };
+  },
 };
 </script>
 
diff --git a/src/views/dataBoard/overview/index.vue b/src/views/dataBoard/overview/index.vue
index 13e28152a..36f013ba7 100644
--- a/src/views/dataBoard/overview/index.vue
+++ b/src/views/dataBoard/overview/index.vue
@@ -58,7 +58,20 @@
           <sqrfph />
         </div>
         <div class="m-box">
-          <Title text="各社区12345投诉事件统计" />
+          <Title text="各社区12345投诉事件统计">
+            <span class="date-span">
+              <el-date-picker
+                v-model="rfphDate"
+                format="yyyy-MM"
+                value-format="yyyy-MM"
+                @change="change"
+                type="month"
+                :clearable="false"
+                placeholder="选择月"
+              >
+              </el-date-picker>
+            </span>
+          </Title>
           <sq12345 />
         </div>
       </div>
@@ -125,7 +138,7 @@ export default {
         {
           orgId: "",
           orgLevel: "",
-          meta: { title: "人房总览3" },
+          meta: { title: "人房总览" },
         },
       ],
 
@@ -177,7 +190,7 @@ export default {
     },
 
     clickAgencyItem(item) {
-      console.log(item);
+      console.log('clickAgencyItem(item)::',item);
       this.toBread({
         orgId: item.id,
         orgLevel: item.level,
@@ -186,6 +199,7 @@ export default {
     },
 
     toBread(item) {
+      console.log("toBread::", item);
       const { orgId } = item;
       const { breadList } = this;
       let index = breadList.findIndex((val) => val.orgId === orgId);
@@ -229,6 +243,7 @@ export default {
       );
 
       if (code === 0) {
+        console.log("data::", data);
         let info = data[0];
         this.orgData = {
           ...info,
@@ -294,7 +309,6 @@ export default {
       };
 
       const { data, code, msg } = await requestPost(url, params);
-
       if (code === 0) {
         this.orgData = data;
         this.orgId = this.orgId;
diff --git a/src/views/dataBoard/renfang/cpts/bread.vue b/src/views/dataBoard/renfang/cpts/bread.vue
index 3df62f75d..f96e47fa5 100644
--- a/src/views/dataBoard/renfang/cpts/bread.vue
+++ b/src/views/dataBoard/renfang/cpts/bread.vue
@@ -46,7 +46,11 @@
 				pageNo: 1,
 			};
 		},
-		watch: {},
+		watch: {
+			separator(value){
+				console.log('value::', value)
+			}
+		},
 		computed: {
 			...mapGetters(["clientHeight", "iframeHeight"]),
 		},
diff --git a/src/views/dataBoard/renfang/index.vue b/src/views/dataBoard/renfang/index.vue
index bf29d794c..c4b495411 100644
--- a/src/views/dataBoard/renfang/index.vue
+++ b/src/views/dataBoard/renfang/index.vue
@@ -1,454 +1,427 @@
 <template>
-	<div>
-		<cpt-bread
-			@tap="clickBreadItem"
-			v-if="breadList.length > 1"
-			:bread-list="breadList"
-		/>
-		<div class="g-row">
-			<div class="g-left">
-				<div class="m-box">
-					<div class="box-title">
-						<img
-							src="~@/assets/images/shuju/main/card-title-bg-480.png"
-							class="box-title-bg"
-						/>
-						<div class="box-title-txt">房屋概览</div>
-					</div>
-
-					<div class="m-subbox">
-						<fwgl :orgId="orgData.org_id"></fwgl>
-					</div>
-				</div>
-
-				<div class="m-box">
-					<div class="box-title">
-						<img
-							src="~@/assets/images/shuju/main/card-title-bg-480.png"
-							class="box-title-bg"
-						/>
-						<div class="box-title-txt">居民概览</div>
-					</div>
-
-					<div class="m-subbox">
-						<jmgl :orgId="orgData.org_id"></jmgl>
-					</div>
-				</div>
-			</div>
-
-			<div class="g-center">
-				<div class="m-map">
-					<div class="m-per">
-						<div class="item">
-							<div class="item-info">
-								<div>
-									<img
-										src="~@/assets/images/shuju/renfang/index/per/lnr.png"
-									/>老年人
-								</div>
-								<div>
-									<b>{{ perInfo.aged_ratio }}</b>
-									%
-								</div>
-							</div>
-						</div>
-						<div class="item">
-							<div class="item-info">
-								<div>
-									<img
-										src="~@/assets/images/shuju/renfang/index/per/qsn.png"
-									/>青少年
-								</div>
-								<div>
-									<b>{{ perInfo.teenagers_ratio }}</b>
-									%
-								</div>
-							</div>
-						</div>
-						<div class="item">
-							<div class="item-info">
-								<div>
-									<img
-										src="~@/assets/images/shuju/renfang/index/per/zyz.png"
-									/>志愿者
-								</div>
-								<div>
-									<b>{{ perInfo.volunteer_ratio }}</b>
-									%
-								</div>
-							</div>
-						</div>
-						<div class="item">
-							<div class="item-info">
-								<div>
-									<img
-										src="~@/assets/images/shuju/renfang/index/per/dy.png"
-									/>党员
-								</div>
-								<div>
-									<b>{{ perInfo.crowd_ratio }}</b>
-									%
-								</div>
-							</div>
-						</div>
-						<div class="item">
-							<div class="item-info">
-								<div>
-									<img
-										src="~@/assets/images/shuju/renfang/index/per/syry.png"
-									/>失业人员
-								</div>
-								<div>
-									<b>{{ perInfo.unemployed_ratio }}</b>
-									%
-								</div>
-							</div>
-						</div>
-						<div class="item">
-							<div class="item-info">
-								<div>
-									<img
-										src="~@/assets/images/shuju/renfang/index/per/ygxl.png"
-									/>
-									月更新率
-								</div>
-								<div>
-									<b>{{ perInfo.month_update_ratio }}</b>
-									%
-								</div>
-							</div>
-						</div>
-					</div>
-
-					<grid-map
-						ref="map"
-						@clickAgency="clickAgencyItem"
-						:srcGridData="orgData"
-						@clickDotBtn="handleClickDotBtn"
-					/>
-				</div>
-
-				<div class="m-search">
-					<div class="btn" @click="searchModule.displayedCard = true">
-						<img
-							src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
-							class="btn-bg"
-						/>
-						<img
-							src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
-							class="btn-bg-hover"
-						/>
-						<span>点击搜索</span>
-					</div>
-
-					<div class="card" v-show="searchModule.displayedCard">
-						<div class="card-input">
-							<div class="card-btn" @click="handleSearch">
-								<img
-									src="~@/assets/images/shuju/renfang/index/search/search.png"
-								/>
-							</div>
-
-							<input
-								type="text"
-								placeholder="搜索本组织及下级的居民、小区、楼栋、房屋"
-								@keyup.enter="handleSearch"
-								v-model="searchModule.keyword"
-							/>
-
-							<div class="i-div"></div>
-
-							<div
-								class="card-btn"
-								@click="searchModule.displayedCard = false"
-							>
-								<img
-									src="~@/assets/images/shuju/renfang/index/search/close.png"
-								/>
-							</div>
-						</div>
-						<div class="card-show">
-							<div class="card-tabs">
-								<div
-									:class="{
-										'z-on': searchModule.resultTab == '0',
-									}"
-									@click="searchModule.resultTab = '0'"
-								>
-									全部
-								</div>
-								<div
-									:class="{
-										'z-on': searchModule.resultTab == '1',
-									}"
-									@click="searchModule.resultTab = '1'"
-								>
-									居民
-								</div>
-								<div
-									:class="{
-										'z-on': searchModule.resultTab == '2',
-									}"
-									@click="searchModule.resultTab = '2'"
-								>
-									小区
-								</div>
-								<div
-									:class="{
-										'z-on': searchModule.resultTab == '3',
-									}"
-									@click="searchModule.resultTab = '3'"
-								>
-									楼栋
-								</div>
-								<div
-									:class="{
-										'z-on': searchModule.resultTab == '4',
-									}"
-									@click="searchModule.resultTab = '4'"
-								>
-									房屋
-								</div>
-							</div>
-
-							<div
-								class="card-list"
-								v-if="searchModule.result.length > 0"
-							>
-								<div
-									class="card-item"
-									:key="item.title + index"
-									@click="handleClickSearchItem(item)"
-									v-for="(item, index) in searchModule.result"
-								>
-									<span>{{ item.title }}</span>
-									<img
-										src="~@/assets/images/shuju/renfang/index/search/arrow.png"
-										class="i-arrow"
-									/>
-									<img
-										src="~@/assets/images/shuju/renfang/index/search/arrow-on.png"
-										class="i-arrow z-on"
-									/>
-								</div>
-							</div>
-
-							<div class="card-empty" v-else>
-								<img
-									src="~@/assets/images/shuju/renfang/index/empty.png"
-								/>
-								<span>没有找到搜索结果～</span>
-							</div>
-						</div>
-					</div>
-				</div>
-
-				<div class="m-box m-cate">
-					<div class="box-title">
-						<img
-							src="~@/assets/images/shuju/main/card-title-bg-800.png"
-							class="box-title-bg"
-						/>
-						<div class="box-title-txt" v-if="!displayedForecast">
-							居民分类统计
-						</div>
-						<div class="box-title-txt" v-else>
-							居民分类统计-智能预测
-						</div>
-
-						<div
-							class="box-title-btn"
-							v-if="!displayedForecast"
-							@click="displayedForecast = true"
-						>
-							<img
-								src="~@/assets/images/shuju/renfang/index/znyc.png"
-							/>
-							<span>智能预测</span>
-
-							<el-tooltip placement="top">
-								<div slot="content">
-									根据智能分类设置规则，预测来年育龄妇女、老年人、空巢老人、独居老人分别有多少人
-								</div>
-								<img
-									src="~@/assets/images/shuju/renfang/index/i-hint.png"
-								/>
-							</el-tooltip>
-						</div>
-
-						<div
-							class="box-title-btn"
-							v-else
-							@click="displayedForecast = false"
-						>
-							<img
-								src="~@/assets/images/shuju/main/back-on.png"
-							/>
-							<span style="color: #fff">返回</span>
-						</div>
-					</div>
-
-					<div v-if="!displayedForecast">
-						<div class="list" v-if="resiCategoryData.length > 0">
-							<div
-								class="item"
-								@click="toResiClassPage('normal',item.code, item.name)"
-								:key="item.code + index"
-								v-for="(item, index) in resiCategoryData"
-							>
-								<div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
-								<div class="item-name">{{ item.name }}</div>
-								<div class="item-count">
-									<b>{{ item.count }}</b> 人
-								</div>
-								<div class="item-progress">
-									<b :style="{ width: item.ratio + '%' }"></b>
-								</div>
-								<div class="item-per">
-									<span>较上月</span>
-									<img
-										v-if="item.growth >= 0"
-										src="~@/assets/images/shuju/renfang/index/up.png"
-									/>
-									<img
-										v-else
-										src="~@/assets/images/shuju/renfang/index/down.png"
-									/>
-									<b>{{ item.growthAbs }}</b>
-									<span>人</span>
-								</div>
-							</div>
-						</div>
-
-						<div class="empty" v-else>
-							<img
-								src="~@/assets/images/shuju/renfang/index/empty.png"
-							/>
-						</div>
-					</div>
-					<div v-else>
-						<div
-							class="list"
-							v-if="resiCategoryForecastData.length > 0"
-						>
-							<div
-								@click="toResiClassPage('ai',item.code, item.name)"
-								class="item"
-								:key="item.code + index"
-								v-for="(
-									item, index
-								) in resiCategoryForecastData"
-							>
-								<div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
-								<div class="item-name">{{ item.name }}</div>
-								<div class="item-count">
-									<b>{{ item.count }}</b> 人
-								</div>
-								<div class="item-progress">
-									<b :style="{ width: item.ratio + '%' }"></b>
-								</div>
-
-								<div class="item-per">
-									<span>较上一年</span>
-									<img
-										v-if="item.growth >= 0"
-										src="~@/assets/images/shuju/renfang/index/up.png"
-									/>
-									<img
-										v-else
-										src="~@/assets/images/shuju/renfang/index/down.png"
-									/>
-									<b>{{ item.growthAbs }}</b>
-									<span>人</span>
-								</div>
-							</div>
-						</div>
-
-						<div class="empty" v-else>
-							<img
-								src="~@/assets/images/shuju/renfang/index/empty.png"
-							/>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<div class="g-right">
-				<div
-					class="m-box"
-					v-if="
-						orgLevel == 'district' ||
-						orgLevel == 'street' ||
-						orgLevel == 'city'
-					"
-				>
-					<div class="box-title">
-						<img
-							src="~@/assets/images/shuju/main/card-title-bg-480.png"
-							class="box-title-bg"
-						/>
-						<div class="box-title-txt">数字社区</div>
-					</div>
-
-					<div class="m-subbox m-szsq">
-						<szsq :orgId="orgData.org_id"></szsq>
-					</div>
-				</div>
-
-				<div class="m-box">
-					<div class="box-title">
-						<img
-							src="~@/assets/images/shuju/main/card-title-bg-480.png"
-							class="box-title-bg"
-						/>
-						<div class="box-title-txt">人口预警</div>
-					</div>
-
-					<div
-						class="m-subbox m-rkyj"
-						:class="{
-							'z-shrink':
-								orgLevel == 'district' ||
-								orgLevel == 'street' ||
-								orgLevel == 'city',
-						}"
-					>
-						<rkyj :orgId="orgData.org_id"></rkyj>
-					</div>
-				</div>
-				<div class="m-box">
-					<div class="box-title">
-						<img
-							src="~@/assets/images/shuju/main/card-title-bg-480.png"
-							class="box-title-bg"
-						/>
-						<div class="box-title-txt">人口分析</div>
-					</div>
-
-					<div class="m-subbox">
-						<rkfx
-							:orgId="orgData.org_id"
-							@handelClickRkfxPei="handelClickRkfxPei"
-						></rkfx>
-					</div>
-				</div>
-			</div>
-
-			<cpt-loading v-show="false" />
-		</div>
-
-		<resi-details
-			@close="displayedResiId = ''"
-			:resi-id="displayedResiId"
-			v-if="displayedResiId"
-		/>
-
-		<house-details
-			@close="displayedHouseId = ''"
-			:house-id="displayedHouseId"
-			v-if="displayedHouseId"
-		/>
-	</div>
+  <div>
+    <cpt-bread
+      @tap="clickBreadItem"
+      v-if="breadList.length > 1"
+      :bread-list="breadList"
+    />
+    <div class="g-row">
+      <div class="g-left">
+        <div class="m-box">
+          <div class="box-title">
+            <img
+              src="~@/assets/images/shuju/main/card-title-bg-480.png"
+              class="box-title-bg"
+            />
+            <div class="box-title-txt">房屋概览</div>
+          </div>
+
+          <div class="m-subbox">
+            <fwgl :orgId="orgData.org_id"></fwgl>
+          </div>
+        </div>
+
+        <div class="m-box">
+          <div class="box-title">
+            <img
+              src="~@/assets/images/shuju/main/card-title-bg-480.png"
+              class="box-title-bg"
+            />
+            <div class="box-title-txt">居民概览</div>
+          </div>
+
+          <div class="m-subbox">
+            <jmgl :orgId="orgData.org_id"></jmgl>
+          </div>
+        </div>
+      </div>
+
+      <div class="g-center">
+        <div class="m-map">
+          <div class="m-per">
+            <div class="item" @click="jumpPath('normal', 'aged', '老年人')">
+              <div class="item-info">
+                <div>
+                  <img
+                    src="~@/assets/images/shuju/renfang/index/per/lnr.png"
+                  />老年人
+                </div>
+                <div>
+                  <b>{{ perInfo.aged_ratio }}</b>
+                  %
+                </div>
+              </div>
+            </div>
+            <div class="item" @click="jumpPath('normal', 'aged', '低保人员')">
+              <div class="item-info">
+                <div>
+                  <img
+                    src="~@/assets/images/shuju/renfang/index/per/qsn.png"
+                  />低保人员
+                </div>
+                <div>
+                  <b>{{ perInfo.teenagers_ratio }}</b>
+                  %
+                </div>
+              </div>
+            </div>
+            <div class="item" @click="jumpPath('normal', 'aged', '志愿者')">
+              <div class="item-info">
+                <div>
+                  <img
+                    src="~@/assets/images/shuju/renfang/index/per/zyz.png"
+                  />志愿者
+                </div>
+                <div>
+                  <b>{{ perInfo.volunteer_ratio }}</b>
+                  %
+                </div>
+              </div>
+            </div>
+            <div class="item" @click="jumpPath('normal', 'aged', '党员')">
+              <div class="item-info">
+                <div>
+                  <img
+                    src="~@/assets/images/shuju/renfang/index/per/dy.png"
+                  />党员
+                </div>
+                <div>
+                  <b>{{ perInfo.crowd_ratio }}</b>
+                  %
+                </div>
+              </div>
+            </div>
+            <div class="item" @click="jumpPath('normal', 'aged', '失业人员')">
+              <div class="item-info">
+                <div>
+                  <img
+                    src="~@/assets/images/shuju/renfang/index/per/syry.png"
+                  />失业人员
+                </div>
+                <div>
+                  <b>{{ perInfo.unemployed_ratio }}</b>
+                  %
+                </div>
+              </div>
+            </div>
+            <div class="item" @click="jumpPath('normal', 'aged', '月更新率')">
+              <div class="item-info">
+                <div>
+                  <img
+                    src="~@/assets/images/shuju/renfang/index/per/ygxl.png"
+                  />
+                  月更新率
+                </div>
+                <div>
+                  <b>{{ perInfo.month_update_ratio }}</b>
+                  %
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <grid-map
+            ref="map"
+            @clickAgency="clickAgencyItem"
+            :srcGridData="orgData"
+            @clickDotBtn="handleClickDotBtn"
+          />
+        </div>
+
+        <div class="m-search">
+          <div class="btn" @click="searchModule.displayedCard = true">
+            <img
+              src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
+              class="btn-bg"
+            />
+            <img
+              src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
+              class="btn-bg-hover"
+            />
+            <span>点击搜索</span>
+          </div>
+
+          <div class="card" v-show="searchModule.displayedCard">
+            <div class="card-input">
+              <div class="card-btn" @click="handleSearch">
+                <img
+                  src="~@/assets/images/shuju/renfang/index/search/search.png"
+                />
+              </div>
+
+              <input
+                type="text"
+                placeholder="搜索本组织及下级的居民、小区、楼栋、房屋"
+                @keyup.enter="handleSearch"
+                v-model="searchModule.keyword"
+              />
+
+              <div class="i-div"></div>
+
+              <div class="card-btn" @click="searchModule.displayedCard = false">
+                <img
+                  src="~@/assets/images/shuju/renfang/index/search/close.png"
+                />
+              </div>
+            </div>
+            <div class="card-show">
+              <div class="card-tabs">
+                <div
+                  :class="{
+                    'z-on': searchModule.resultTab == '0',
+                  }"
+                  @click="searchModule.resultTab = '0'"
+                >
+                  全部
+                </div>
+                <div
+                  :class="{
+                    'z-on': searchModule.resultTab == '1',
+                  }"
+                  @click="searchModule.resultTab = '1'"
+                >
+                  居民
+                </div>
+                <div
+                  :class="{
+                    'z-on': searchModule.resultTab == '2',
+                  }"
+                  @click="searchModule.resultTab = '2'"
+                >
+                  小区
+                </div>
+                <div
+                  :class="{
+                    'z-on': searchModule.resultTab == '3',
+                  }"
+                  @click="searchModule.resultTab = '3'"
+                >
+                  楼栋
+                </div>
+                <div
+                  :class="{
+                    'z-on': searchModule.resultTab == '4',
+                  }"
+                  @click="searchModule.resultTab = '4'"
+                >
+                  房屋
+                </div>
+              </div>
+
+              <div class="card-list" v-if="searchModule.result.length > 0">
+                <div
+                  class="card-item"
+                  :key="item.title + index"
+                  @click="handleClickSearchItem(item)"
+                  v-for="(item, index) in searchModule.result"
+                >
+                  <span>{{ item.title }}</span>
+                  <img
+                    src="~@/assets/images/shuju/renfang/index/search/arrow.png"
+                    class="i-arrow"
+                  />
+                  <img
+                    src="~@/assets/images/shuju/renfang/index/search/arrow-on.png"
+                    class="i-arrow z-on"
+                  />
+                </div>
+              </div>
+
+              <div class="card-empty" v-else>
+                <img src="~@/assets/images/shuju/renfang/index/empty.png" />
+                <span>没有找到搜索结果～</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="m-box m-cate">
+          <div class="box-title">
+            <img
+              src="~@/assets/images/shuju/main/card-title-bg-800.png"
+              class="box-title-bg"
+            />
+            <div class="box-title-txt" v-if="!displayedForecast">
+              居民分类统计
+            </div>
+            <div class="box-title-txt" v-else>居民分类统计-智能预测</div>
+
+            <div
+              class="box-title-btn"
+              v-if="!displayedForecast"
+              @click="displayedForecast = true"
+            >
+              <img src="~@/assets/images/shuju/renfang/index/znyc.png" />
+              <span>智能预测</span>
+
+              <el-tooltip placement="top">
+                <div slot="content">
+                  根据智能分类设置规则，预测来年育龄妇女、老年人、空巢老人、独居老人分别有多少人
+                </div>
+                <img src="~@/assets/images/shuju/renfang/index/i-hint.png" />
+              </el-tooltip>
+            </div>
+
+            <div
+              class="box-title-btn"
+              v-else
+              @click="displayedForecast = false"
+            >
+              <img src="~@/assets/images/shuju/main/back-on.png" />
+              <span style="color: #fff">返回</span>
+            </div>
+          </div>
+
+          <div v-if="!displayedForecast">
+            <div class="list" v-if="resiCategoryData.length > 0">
+              <div
+                class="item"
+                @click="toResiClassPage('normal', item.code, item.name)"
+                :key="item.code + index"
+                v-for="(item, index) in resiCategoryData"
+              >
+                <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
+                <div class="item-name">{{ item.name }}</div>
+                <div class="item-count">
+                  <b>{{ item.count }}</b> 人
+                </div>
+                <div class="item-progress">
+                  <b :style="{ width: item.ratio + '%' }"></b>
+                </div>
+                <div class="item-per">
+                  <span>较上月</span>
+                  <img
+                    v-if="item.growth >= 0"
+                    src="~@/assets/images/shuju/renfang/index/up.png"
+                  />
+                  <img
+                    v-else
+                    src="~@/assets/images/shuju/renfang/index/down.png"
+                  />
+                  <b>{{ item.growthAbs }}</b>
+                  <span>人</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="empty" v-else>
+              <img src="~@/assets/images/shuju/renfang/index/empty.png" />
+            </div>
+          </div>
+          <div v-else>
+            <div class="list" v-if="resiCategoryForecastData.length > 0">
+              <div
+                @click="toResiClassPage('ai', item.code, item.name)"
+                class="item"
+                :key="item.code + index"
+                v-for="(item, index) in resiCategoryForecastData"
+              >
+                <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
+                <div class="item-name">{{ item.name }}</div>
+                <div class="item-count">
+                  <b>{{ item.count }}</b> 人
+                </div>
+                <div class="item-progress">
+                  <b :style="{ width: item.ratio + '%' }"></b>
+                </div>
+
+                <div class="item-per">
+                  <span>较上一年</span>
+                  <img
+                    v-if="item.growth >= 0"
+                    src="~@/assets/images/shuju/renfang/index/up.png"
+                  />
+                  <img
+                    v-else
+                    src="~@/assets/images/shuju/renfang/index/down.png"
+                  />
+                  <b>{{ item.growthAbs }}</b>
+                  <span>人</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="empty" v-else>
+              <img src="~@/assets/images/shuju/renfang/index/empty.png" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="g-right">
+        <div
+          class="m-box"
+          v-if="
+            orgLevel == 'district' || orgLevel == 'street' || orgLevel == 'city'
+          "
+        >
+          <div class="box-title">
+            <img
+              src="~@/assets/images/shuju/main/card-title-bg-480.png"
+              class="box-title-bg"
+            />
+            <div class="box-title-txt">数字社区</div>
+          </div>
+
+          <div class="m-subbox m-szsq">
+            <szsq :orgId="orgData.org_id"></szsq>
+          </div>
+        </div>
+
+        <div class="m-box">
+          <div class="box-title">
+            <img
+              src="~@/assets/images/shuju/main/card-title-bg-480.png"
+              class="box-title-bg"
+            />
+            <div class="box-title-txt">人口预警</div>
+          </div>
+
+          <div
+            class="m-subbox m-rkyj"
+            :class="{
+              'z-shrink':
+                orgLevel == 'district' ||
+                orgLevel == 'street' ||
+                orgLevel == 'city',
+            }"
+          >
+            <rkyj :orgId="orgData.org_id"></rkyj>
+          </div>
+        </div>
+        <div class="m-box">
+          <div class="box-title">
+            <img
+              src="~@/assets/images/shuju/main/card-title-bg-480.png"
+              class="box-title-bg"
+            />
+            <div class="box-title-txt">人口分析</div>
+          </div>
+
+          <div class="m-subbox">
+            <rkfx
+              :orgId="orgData.org_id"
+              @handelClickRkfxPei="handelClickRkfxPei"
+            ></rkfx>
+          </div>
+        </div>
+      </div>
+
+      <cpt-loading v-show="false" />
+    </div>
+
+    <resi-details
+      @close="displayedResiId = ''"
+      :resi-id="displayedResiId"
+      v-if="displayedResiId"
+    />
+
+    <house-details
+      @close="displayedHouseId = ''"
+      :house-id="displayedHouseId"
+      v-if="displayedHouseId"
+    />
+  </div>
 </template>
 
 <script>
@@ -467,422 +440,431 @@ import { requestPost } from "@/js/dai/request";
 import getQueryPara from "dai-js/modules/getQueryPara";
 
 function iniGetPerInfo() {
-	return {
-		unemployed_ratio: "--",
-		crowd_ratio: "--",
-		volunteer_ratio: "--",
-		month_update_ratio: "--",
-		aged_ratio: "--",
-		teenagers_ratio: "--",
-	};
+  return {
+    unemployed_ratio: "--",
+    crowd_ratio: "--",
+    volunteer_ratio: "--",
+    month_update_ratio: "--",
+    aged_ratio: "--",
+    teenagers_ratio: "--",
+  };
 }
 
 export default {
-	name: "renfang",
-
-	components: {
-		gridMap,
-		fwgl,
-		jmgl,
-		rkfx,
-		rkyj,
-		szsq,
-		cptLoading,
-		cptBread,
-		houseDetails,
-		resiDetails,
-	},
-
-	data() {
-		return {
-			loading: false,
-
-			orgData: {
-				children: [],
-			}, //当前组织对象
-			orgId: "",
-			orgLevel: "",
-
-			breadList: [
-				{
-					orgId: "",
-					orgLevel: "",
-					meta: { title: "人房总览3" },
-				},
-			],
-
-			resiCategoryData: [], // 居民分类分析
-			resiCategoryForecastData: [], // 居民分类预测
-			displayedForecast: false, //显示居民分类分析 还是居民分类预测
-
-			searchModule: {
-				displayedCard: false,
-				keyword: "",
-				resultTab: "0", // 0所有 1，居民；2，小区；3，楼栋；4，房屋
-				result: [
-					// {
-					// 	id: 1,
-					// 	title: "四季景园",
-					// },
-				],
-			},
-
-			perInfo: iniGetPerInfo(),
-
-			displayedResiId: "",
-			displayedHouseId: "",
-		};
-	},
-
-	mounted() {
-		const queryOrgId = getQueryPara("orgId");
-		const queryOrgLevel = getQueryPara("orgLevel");
-		this.init(queryOrgId, queryOrgLevel);
-	},
-
-	watch: {},
-
-	methods: {
-		async init(queryOrgId, queryOrgLevel) {
-			if (queryOrgId) {
-				this.orgId = queryOrgId;
-				this.orgLevel = queryOrgLevel || "agency";
-			} else {
-				this.orgId = this.$store.state.user.agencyId;
-				this.orgLevel = "agency";
-			}
-
-			//加载组织数据
-			this.loading = false;
-			// await this.loadOrgData();
-			await this.getMapData();
-			await this.getSubMapData();
-			this.getResiCategoryData();
-			this.getResiCategoryForecastData();
-			this.getPerInfo();
-
-			this.loading = true;
-		},
-
-		toResiClassPage(pageType,type_id = "", type_name) {
-			this.$router.push({
-				path: "/dataBoard/renfang/resi-class",
-				query: {
-					org_id: this.orgId,
-					type_id,
-					type_name,
-					pageType
-				},
-			});
-		},
-
-		handleClickDotBtn(type, info) {
-			console.log("handleClickDotBtn", type, info);
-			if (type == "watch-resi") {
-				this.displayedResiId = info.user_id;
-			} else if (type == "watch-house") {
-				this.displayedHouseId = info.house_id;
-			}
-		},
-
-		clickBreadItem({ item }) {
-			this.toBread(item);
-		},
-
-		clickAgencyItem(item) {
-			console.log(item);
-			this.toBread({
-				orgId: item.id,
-				orgLevel: item.level,
-				meta: { title: item.name },
-			});
-		},
-
-		toBread(item) {
-			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 {
-				breadList.push(item);
-				this.breadList = breadList;
-			}
-			this.init(item.orgId, item.orgLevel);
-		},
-
-		// 点击搜索结果条目，在地图上显示点和详情弹窗
-		handleClickSearchItem(item) {
-			console.log("handleClickSearchItem", item);
-			if (!item.longitude) {
-				return this.$message.error("请先设置坐标");
-			}
-			this.$refs.map.setDotMarker(item, [
-				parseFloat(item.longitude),
-				parseFloat(item.latitude),
-			]);
-		},
-
-		// 根据类别搜索
-		async handleSearch() {
-			this.searchModule.result = [];
-			console.log(this.searchModule);
-			const { searchModule } = this;
-
-			const url = [
-				"search_all",
-				"search_resident",
-				"search_village",
-				"search_building",
-				"search_house",
-			][searchModule.resultTab];
-
-			const { data, code, msg } = await requestPostBi(
-				url,
-				{
-					queryParam: {
-						org_id: this.orgId,
-						name: this.searchModule.keyword,
-					},
-				},
-				{
-					// mockId: 60044224,
-					// mockId: 60048067,
-				}
-			);
-
-			if (code === 0) {
-				this.searchModule.result = data.map((item) => {
-					let type = item.type || searchModule.resultTab;
-					let title = "";
-					let detailJson = {};
-					if (searchModule.resultTab == 0) {
-						title = item.name;
-						if (typeof item.detail_json == "string") {
-							try {
-								detailJson = JSON.parse(item.detail_json);
-							} catch (e) {
-								console.log(e);
-							}
-						}
-					} else if (type == "1") {
-						title = item.user_name;
-					} else if (type == "2") {
-						title = item.village_name;
-					} else if (type == "3") {
-						title = item.village_name + "-" + item.building_name;
-					} else if (type == "4") {
-						title =
-							item.building + "-" + item.unit + "-" + item.door;
-					}
-					return {
-						title,
-						type,
-						...item,
-						...detailJson,
-					};
-				});
-				console.log("==========this.searchModule.result", this.searchModule.result);
-			} else {
-				this.$message.error(msg);
-			}
-		},
-
-		//地图上居民分类百分比数据 ps:感觉有点重复显示
-		async getPerInfo() {
-			console.log("=========================getPerInfo");
-			const url = "resident_ratio";
-
-			const { data, code, msg } = await requestPostBi(
-				url,
-				{
-					queryParam: {
-						org_id: this.orgId,
-					},
-				},
-				{
-					// mockId: 61167746,
-				}
-			);
-
-			if (code === 0) {
-				this.perInfo = {
-					...iniGetPerInfo(),
-					...data[0],
-				};
-			} else {
-				this.$message.error(msg);
-			}
-		},
-
-		//居民分类分析数据
-		async getResiCategoryData() {
-			console.log("=========================getResiCategoryData");
-			const url = "resident_class_statics";
-
-			const { data, code, msg } = await requestPostBi(
-				url,
-				{
-					queryParam: {
-						org_id: this.orgId,
-					},
-				},
-				{
-					// mockId: 60031937,
-				}
-			);
-
-			if (code === 0) {
-				this.resiCategoryData = data.map((item) => {
-					return {
-						code: item.label_id,
-						name: item.label,
-						count: item.count,
-						ratio: item.ratio,
-						growth: item.growth,
-						growthAbs: Math.abs(item.growth),
-					};
-				});
-			} else {
-				this.$message.error(msg);
-			}
-		},
-
-		//居民分类预测数据
-		async getResiCategoryForecastData() {
-			console.log("=========================getResiCategoryForecastData");
-			const url = "resident_class_predict";
-
-			const { data, code, msg } = await requestPostBi(
-				url,
-				{
-					queryParam: {
-						org_id: this.orgId,
-					},
-				},
-				{
-					// mockId: 60064667,
-				}
-			);
-
-			if (code === 0) {
-				this.resiCategoryForecastData = data.map((item) => {
-					return {
-						code: item.resident_type,
-						name: item.resident_type_name,
-						count: item.resident_count,
-						ratio: item.resident_ratio,
-						growth: item.change_count,
-						growthAbs: Math.abs(item.change_count),
-					};
-				});
-			} else {
-				this.$message.error(msg);
-			}
-		},
-
-		//获取地图上显示的组织数据
-		async getMapData() {
-			console.log("=========================getMapData");
-			const url = "org_map";
-
-			const { data, code, msg } = await requestPostBi(
-				url,
-				{
-					queryParam: {
-						org_id: this.orgId,
-					},
-				},
-				{
-					// mockId: 60810589,
-				}
-			);
-
-			if (code === 0) {
-				let info = data[0];
-				this.orgData = {
-					...info,
-					id: info.org_id,
-					name: info.org_name,
-					latitude: parseFloat(info.latitude),
-					longitude: parseFloat(info.longitude),
-					coordinates: info.coordinates || "",
-					children: [],
-				};
-				this.orgId = this.orgData.org_id;
-				this.orgLevel = this.orgData.level;
-			} else {
-				this.$message.error(msg);
-			}
-		},
-
-		//获取地图上显示的组织数据
-		async getSubMapData() {
-			console.log("=========================getSubMapData");
-			const url = "sub_org_map";
-
-			const { data, code, msg } = await requestPostBi(
-				url,
-				{
-					queryParam: {
-						org_id: this.orgId,
-					},
-				},
-				{
-					// mockId: 61831860,
-				}
-			);
-
-			if (code === 0) {
-				const { orgData } = this;
-				orgData.children = data.map((item) => {
-					return {
-						...item,
-						id: item.org_id,
-						name: item.org_name,
-						latitude: parseFloat(item.latitude),
-						longitude: parseFloat(item.longitude),
-						coordinates: item.coordinates || "",
-					};
-				});
-				this.orgData = { ...orgData };
-				console.log(
-					"==========================getSubMapData:result",
-					this.orgData
-				);
-			} else {
-				this.$message.error(msg);
-			}
-		},
-
-		//加载组织数据
-		async loadOrgData() {
-			const url = "/gov/org/agency/maporg";
-			let params = {
-				orgId: this.orgId,
-				level: this.orgLevel,
-			};
-
-			const { data, code, msg } = await requestPost(url, params);
-
-			if (code === 0) {
-				this.orgData = data;
-				this.orgId = this.orgId;
-				this.orgLevel = this.orgData.level;
-			} else {
-				this.$message.error(msg);
-			}
-		},
-		handelClickRkfxPei(val) {
-			console.log(val);
-		},
+  name: "renfang",
+
+  components: {
+    gridMap,
+    fwgl,
+    jmgl,
+    rkfx,
+    rkyj,
+    szsq,
+    cptLoading,
+    cptBread,
+    houseDetails,
+    resiDetails,
+  },
+
+  data() {
+    return {
+      loading: false,
+
+      orgData: {
+        children: [],
+      }, //当前组织对象
+      orgId: "",
+      orgLevel: "",
+
+      breadList: [
+        {
+          orgId: "",
+          orgLevel: "",
+          meta: { title: "人房总览" },
+        },
+      ],
+
+      resiCategoryData: [], // 居民分类分析
+      resiCategoryForecastData: [], // 居民分类预测
+      displayedForecast: false, //显示居民分类分析 还是居民分类预测
+
+      searchModule: {
+        displayedCard: false,
+        keyword: "",
+        resultTab: "0", // 0所有 1，居民；2，小区；3，楼栋；4，房屋
+        result: [
+          // {
+          // 	id: 1,
+          // 	title: "四季景园",
+          // },
+        ],
+      },
+
+      perInfo: iniGetPerInfo(),
+
+      displayedResiId: "",
+      displayedHouseId: "",
+    };
+  },
+
+  mounted() {
+    const queryOrgId = getQueryPara("orgId");
+    const queryOrgLevel = getQueryPara("orgLevel");
+    this.init(queryOrgId, queryOrgLevel);
+  },
+
+  watch: {},
+
+  methods: {
+    async init(queryOrgId, queryOrgLevel) {
+      if (queryOrgId) {
+        this.orgId = queryOrgId;
+        this.orgLevel = queryOrgLevel || "agency";
+      } else {
+        this.orgId = this.$store.state.user.agencyId;
+        this.orgLevel = "agency";
+      }
+
+      //加载组织数据
+      this.loading = false;
+      // await this.loadOrgData();
+      await this.getMapData();
+      await this.getSubMapData();
+      this.getResiCategoryData();
+      this.getResiCategoryForecastData();
+      this.getPerInfo();
+
+      this.loading = true;
+    },
+	jumpPath(pageType, type_id = "", type_name){
+      this.$router.push({
+        path: "/dataBoard/renfang/visualizing",
+        query: {
+          org_id: this.orgId,
+          type_id,
+          type_name,
+          pageType,
+        },
+      });
 	},
+    toResiClassPage(pageType, type_id = "", type_name) {
+      this.$router.push({
+        path: "/dataBoard/renfang/resi-class",
+        query: {
+          org_id: this.orgId,
+          type_id,
+          type_name,
+          pageType,
+        },
+      });
+    },
+
+    handleClickDotBtn(type, info) {
+      if (type == "watch-resi") {
+        this.displayedResiId = info.user_id;
+      } else if (type == "watch-house") {
+        this.displayedHouseId = info.house_id;
+      }
+    },
+
+    clickBreadItem({ item }) {
+      this.toBread(item);
+    },
+
+    clickAgencyItem(item) {
+      this.toBread({
+        orgId: item.id,
+        orgLevel: item.level,
+        meta: { title: item.name },
+      });
+    },
+
+    toBread(item) {
+      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 {
+        breadList.push(item);
+        this.breadList = breadList;
+      }
+      this.init(item.orgId, item.orgLevel);
+    },
+
+    // 点击搜索结果条目，在地图上显示点和详情弹窗
+    handleClickSearchItem(item) {
+      if (!item.longitude) {
+        return this.$message.error("请先设置坐标");
+      }
+      this.$refs.map.setDotMarker(item, [
+        parseFloat(item.longitude),
+        parseFloat(item.latitude),
+      ]);
+    },
+
+    // 根据类别搜索
+    async handleSearch() {
+      this.searchModule.result = [];
+      console.log(this.searchModule);
+      const { searchModule } = this;
+
+      const url = [
+        "search_all",
+        "search_resident",
+        "search_village",
+        "search_building",
+        "search_house",
+      ][searchModule.resultTab];
+
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            org_id: this.orgId,
+            name: this.searchModule.keyword,
+          },
+        },
+        {
+          // mockId: 60044224,
+          // mockId: 60048067,
+        }
+      );
+
+      if (code === 0) {
+        this.searchModule.result = data.map((item) => {
+          let type = item.type || searchModule.resultTab;
+          let title = "";
+          let detailJson = {};
+          if (searchModule.resultTab == 0) {
+            title = item.name;
+            if (typeof item.detail_json == "string") {
+              try {
+                detailJson = JSON.parse(item.detail_json);
+              } catch (e) {
+                console.log(e);
+              }
+            }
+          } else if (type == "1") {
+            title = item.user_name;
+          } else if (type == "2") {
+            title = item.village_name;
+          } else if (type == "3") {
+            title = item.village_name + "-" + item.building_name;
+          } else if (type == "4") {
+            title = item.building + "-" + item.unit + "-" + item.door;
+          }
+          return {
+            title,
+            type,
+            ...item,
+            ...detailJson,
+          };
+        });
+        console.log(
+          "==========this.searchModule.result",
+          this.searchModule.result
+        );
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //地图上居民分类百分比数据 ps:感觉有点重复显示
+    async getPerInfo() {
+      console.log("=========================getPerInfo");
+      const url = "resident_ratio";
+
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            org_id: this.orgId,
+          },
+        },
+        {
+          // mockId: 61167746,
+        }
+      );
+
+      if (code === 0) {
+        this.perInfo = {
+          ...iniGetPerInfo(),
+          ...data[0],
+        };
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //居民分类分析数据
+    async getResiCategoryData() {
+      console.log("=========================getResiCategoryData");
+      const url = "resident_class_statics";
+
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            org_id: this.orgId,
+          },
+        },
+        {
+          // mockId: 60031937,
+        }
+      );
+
+      if (code === 0) {
+        this.resiCategoryData = data.map((item) => {
+          return {
+            code: item.label_id,
+            name: item.label,
+            count: item.count,
+            ratio: item.ratio,
+            growth: item.growth,
+            growthAbs: Math.abs(item.growth),
+          };
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //居民分类预测数据
+    async getResiCategoryForecastData() {
+      console.log("=========================getResiCategoryForecastData");
+      const url = "resident_class_predict";
+
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            org_id: this.orgId,
+          },
+        },
+        {
+          // mockId: 60064667,
+        }
+      );
+
+      if (code === 0) {
+        this.resiCategoryForecastData = data.map((item) => {
+          return {
+            code: item.resident_type,
+            name: item.resident_type_name,
+            count: item.resident_count,
+            ratio: item.resident_ratio,
+            growth: item.change_count,
+            growthAbs: Math.abs(item.change_count),
+          };
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //获取地图上显示的组织数据
+    async getMapData() {
+      console.log("=========================getMapData");
+      const url = "org_map";
+
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            org_id: this.orgId,
+          },
+        },
+        {
+          // mockId: 60810589,
+        }
+      );
+
+      if (code === 0) {
+        let info = data[0];
+        this.orgData = {
+          ...info,
+          id: info.org_id,
+          name: info.org_name,
+          latitude: parseFloat(info.latitude),
+          longitude: parseFloat(info.longitude),
+          coordinates: info.coordinates || "",
+          children: [],
+        };
+        this.orgId = this.orgData.org_id;
+        this.orgLevel = this.orgData.level;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //获取地图上显示的组织数据
+    async getSubMapData() {
+      console.log("=========================getSubMapData");
+      const url = "sub_org_map";
+
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            org_id: this.orgId,
+          },
+        },
+        {
+          // mockId: 61831860,
+        }
+      );
+
+      if (code === 0) {
+        const { orgData } = this;
+        orgData.children = data.map((item) => {
+          return {
+            ...item,
+            id: item.org_id,
+            name: item.org_name,
+            latitude: parseFloat(item.latitude),
+            longitude: parseFloat(item.longitude),
+            coordinates: item.coordinates || "",
+          };
+        });
+        this.orgData = { ...orgData };
+        console.log(
+          "==========================getSubMapData:result",
+          this.orgData
+        );
+      } else {
+        this.$message.error(msg);
+      }
+    },
+
+    //加载组织数据
+    async loadOrgData() {
+      const url = "/gov/org/agency/maporg";
+      let params = {
+        orgId: this.orgId,
+        level: this.orgLevel,
+      };
+
+      const { data, code, msg } = await requestPost(url, params);
+
+      if (code === 0) {
+        this.orgData = data;
+        this.orgId = this.orgId;
+        this.orgLevel = this.orgData.level;
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    handelClickRkfxPei(val) {
+      console.log(val);
+    },
+  },
 };
 </script>
 
 <style
-	lang="scss"
-	src="@/assets/scss/dataBoard/renfang/index.scss"
-	scoped
+  lang="scss"
+  src="@/assets/scss/dataBoard/renfang/index.scss"
+  scoped
 ></style>
diff --git a/src/views/dataBoard/renfang/resi/class.vue b/src/views/dataBoard/renfang/resi/class.vue
index 015fa306e..573ae255d 100644
--- a/src/views/dataBoard/renfang/resi/class.vue
+++ b/src/views/dataBoard/renfang/resi/class.vue
@@ -1,340 +1,351 @@
 <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 class="second-select" v-if="type_id == 'special_popu'">
-				<el-select v-model="subclassId" :popper-append-to-body="false" placeholder="请选择">
-					<el-option v-for="item in subclassList" :key="item.value" :label="item.label" :value="item.value" @click.native="handleChangeDate(item.value)"></el-option>
-				</el-select>
-			</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 class="second-select" v-if="type_id == 'special_popu'">
+        <el-select
+          v-model="subclassId"
+          :popper-append-to-body="false"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in subclassList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+            @click.native="handleChangeDate(item.value)"
+          ></el-option>
+        </el-select>
+      </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>
-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';
+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 {
-	name: 'resi-list',
-
-	components: {
-		cptTb,
-		cptBread,
-		resiDetails
-	},
-
-	data() {
-		return {
-			breadList: [
-				{
-					type: 'back',
-					meta: {
-						title: '人房总览'
-					}
-				},
-				{
-					meta: {
-						title: '居民类别'
-					}
-				}
-			],
-
-			tableTitle: '居民类别',
-			searchName: '',
-			pageType: '',
-			orgLevel: '',
-			org_id: '',
-			type_id: '', // 居民类别
-			type_name: '',
-			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: '',
-
-			subclassList: [],
-			subclassId: ''
-		};
-	},
-
-	activated() {
-		this.org_id = getQueryPara('org_id');
-		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 + '居民列表';
-		this.tableTitle = type_name + '居民列表';
-		this.pageNo = 1;
-		this.getList();
-		this.getCount();
-		if (this.type_id == 'special_popu') {
-			this.getSubclass();
-		}
-	},
-	created() {
-		this.pageNo = 1;
-	},
-	watch: {
-		$route(to, from) {
-			this.$router.go(0);
-		},
-		subclassId: {
-			handler(newVal, oldVal) {
-				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 getSubclass() {
-			console.log('=================getSubclass');
-			const { org_id, type_id } = this;
-			this.loading = true;
-
-			const url = 'special_type_list';
-
-			const { data, code, msg } = await requestPostBi(
-				url,
-				{
-					queryParam: {
-						org_id,
-						type_id
-					}
-				},
-				{
-					// mockId: 62648939,
-				}
-			);
-
-			this.loading = false;
-
-			if (code === 0) {
-				this.subclassList = data.map((item, index) => {
-					return {
-						label: item.type_name,
-						value: item.type_id
-					};
-				});
-			} else {
-				this.$message.error(msg);
-			}
-		},
-
-		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
-				};
-			}
-
-			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 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
-				};
-			}
-
-			const { data, code, msg } = await requestPostBi(
-				url,
-				{
-					queryParam
-				},
-				{
-					// mockId: 63070913,
-				}
-			);
-
-			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: "",
+      pageType: "",
+      orgLevel: "",
+      org_id: "",
+      type_id: "", // 居民类别
+      type_name: "",
+      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: "",
+
+      subclassList: [],
+      subclassId: "",
+    };
+  },
+
+  activated() {
+    this.org_id = getQueryPara("org_id");
+    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 + "居民列表";
+    this.tableTitle = type_name + "居民列表";
+    this.pageNo = 1;
+    this.getList();
+    this.getCount();
+    if (this.type_id == "special_popu") {
+      this.getSubclass();
+    }
+  },
+  created() {
+    this.pageNo = 1;
+  },
+  watch: {
+    $route(to, from) {
+      this.$router.go(0);
+    },
+    subclassId: {
+      handler(newVal, oldVal) {
+        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 getSubclass() {
+      const { org_id, type_id } = this;
+      this.loading = true;
+      const url = "special_type_list";
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam: {
+            org_id,
+            type_id,
+          },
+        },
+        {
+          // mockId: 62648939,
+        }
+      );
+      this.loading = false;
+      if (code === 0) {
+        this.subclassList = data.map((item, index) => {
+          return {
+            label: item.type_name,
+            value: item.type_id,
+          };
+        });
+      } else {
+        this.$message.error(msg);
+      }
+    },
+    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,
+        };
+      }
+      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 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,
+        };
+      }
+      const { data, code, msg } = await requestPostBi(
+        url,
+        {
+          queryParam,
+        },
+        {
+          // mockId: 63070913,
+        }
+      );
+      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/visualizing/components/dangyuan.vue b/src/views/dataBoard/renfang/visualizing/components/dangyuan.vue
new file mode 100644
index 000000000..ec1a62f00
--- /dev/null
+++ b/src/views/dataBoard/renfang/visualizing/components/dangyuan.vue
@@ -0,0 +1,256 @@
+<template>
+  <div>
+    <div class="visualizing laonianren">
+      <div class="visualizing-left">
+        <div>
+          <data-title title="党员年龄统计" />
+        </div>
+        <div id="dyLeftChart" style="height: 400px"></div>
+      </div>
+      <div class="visualizing-right">
+        <div>
+          <data-title title="党员文化程度统计" />
+        </div>
+        <div id="dyRightChart" style="height: 400px"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
+import * as echarts from "echarts";
+
+function dataFormatter(arr) {
+  return arr.map((item) => {
+    return {
+      name: item.classification,
+      value: Number(item.classificationNum),
+    };
+  });
+}
+export default {
+  name: "dangyuan",
+  props: {
+    title: {
+      type: String,
+      default: "详情",
+    },
+  },
+  components: {
+    dataTitle,
+  },
+  data() {
+    return {
+      dyLeft: [],
+      dyRight: [],
+    };
+  },
+  created() {
+    const query = this.$route.query;
+    this.getData();
+  },
+  activated() {},
+  methods: {
+    getData() {
+      this.$http
+        .get("/actual/base/peopleRoomOverview/partyPie?type=0")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dyLeft = dataFormatter(res.data);
+          this.initLeftCharts();
+        })
+        .catch(() => {});
+      this.$http
+        .get("/actual/base/peopleRoomOverview/partyPie?type=1")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dyRight = dataFormatter(res.data);
+          this.initRightCharts();
+        })
+        .catch(() => {});
+    },
+    initLeftCharts() {
+      let div = document.getElementById("dyLeftChart");
+      this.myChart1 = echarts.init(div);
+      var option = {
+        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+        legend: {
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 90,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.dyLeft,
+          formatter: (name) => {
+            if (this.dyLeft.length) {
+              const item = this.dyLeft.filter((item) => item.name === name)[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.dyLeft,
+          },
+        ],
+      };
+      this.myChart1.setOption(option);
+      this.myChart1.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            type_id: "aged",
+            type_name: "党员",
+            pageType: "normal",
+          },
+        });
+      });
+      window.addEventListener("resize", () => this.myChart1.resize());
+    },
+    initRightCharts() {
+      let div = document.getElementById("dyRightChart");
+      this.myChart2 = echarts.init(div);
+      var option = {
+        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+        legend: {
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 80,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.dyRight,
+          formatter: (name) => {
+            if (this.dyRight.length) {
+              const item = this.dyRight.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.dyRight,
+          },
+        ],
+      };
+      this.myChart1.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            type_id: "aged",
+            type_name: "党员",
+            pageType: "normal",
+          },
+        });
+      });
+      this.myChart2.setOption(option);
+      window.addEventListener("resize", () => this.myChart2.resize());
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/renfang/index.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.laonianren {
+  padding: 140px 240px;
+}
+</style>
diff --git a/src/views/dataBoard/renfang/visualizing/components/dataTitle.vue b/src/views/dataBoard/renfang/visualizing/components/dataTitle.vue
new file mode 100644
index 000000000..8201a13ba
--- /dev/null
+++ b/src/views/dataBoard/renfang/visualizing/components/dataTitle.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="m-title">
+    <img class="title_img" src="@/assets/images/index/list-logo.png" alt />
+    <div class="tip_title">{{ title }}</div>
+    <div class="title_line"></div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "dataTitle",
+  props: {
+    title: {
+      type: String,
+      default: "详情",
+    },
+  },
+  components: {
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.m-title {
+  display: flex;
+  align-items: center;
+  margin-top: 15px;
+
+  .title_img {
+    width: 17px;
+    height: 17px;
+  }
+  .tip_title {
+    margin-left: 8px;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 22px;
+  }
+
+  .title_line {
+    margin-left: 8px;
+    width: 244px;
+    height: 1px;
+    background: linear-gradient(
+      270deg,
+      rgba(55, 198, 255, 0.1) 0%,
+      #1995ff 100%
+    );
+  }
+}
+</style>
diff --git a/src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue b/src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue
new file mode 100644
index 000000000..dce082312
--- /dev/null
+++ b/src/views/dataBoard/renfang/visualizing/components/dibaorenyuan.vue
@@ -0,0 +1,465 @@
+<template>
+  <div class="dibaorenyuan">
+    <div class="visualizing">
+      <div class="visualizing-left">
+        <div>
+          <data-title title="低保类别统计" />
+        </div>
+        <div id="dbryChart1" style="height: 380px"></div>
+      </div>
+      <div class="visualizing-right">
+        <div>
+          <data-title title="低保显示原因统计" />
+        </div>
+        <div id="dbryChart2" style="height: 380px"></div>
+      </div>
+    </div>
+    <div class="visualizing">
+      <div class="visualizing-left">
+        <div>
+          <data-title title="温暖找人统计" />
+        </div>
+        <div id="dbryChart3" style="height: 380px"></div>
+      </div>
+      <div class="visualizing-right">
+        <div>
+          <data-title title="服务找人统计" />
+        </div>
+        <div id="dbryChart4" style="height: 380px"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
+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,
+      value: Number(item.classificationNum),
+    };
+  });
+}
+export default {
+  name: "dibaorenyuan",
+  props: {
+    title: {
+      type: String,
+      default: "详情",
+    },
+  },
+  components: {
+    dataTitle,
+  },
+  data() {
+    return {
+      dbryData1: [],
+      dbryData2: [],
+      dbryData3: [],
+      dbryData4: [],
+    };
+  },
+  created() {
+    const query = this.$route.query;
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.$http
+        .get("/actual/base/peopleRoomOverview/lowIncomePie?type=0")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dbryData1 = dataFormatter(res.data);
+          this.dbryDataCharts1();
+        })
+        .catch(() => {});
+      this.$http
+        .get("/actual/base/peopleRoomOverview/lowIncomePie?type=1")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dbryData2 = dataFormatter(res.data);
+          this.dbryDataCharts2();
+        })
+        .catch(() => {});
+      this.$http
+        .get("/actual/base/peopleRoomOverview/lowIncomePie?type=2")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dbryData3 = dataFormatter(res.data);
+          this.dbryDataCharts3();
+        })
+        .catch(() => {});
+      this.$http
+        .get("/actual/base/peopleRoomOverview/lowIncomePie?type=3")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.dbryData4 = dataFormatter(res.data);
+          this.dbryDataCharts4();
+        })
+        .catch(() => {});
+    },
+    dbryDataCharts1() {
+      let div = document.getElementById("dbryChart1");
+      this.myChart1 = echarts.init(div);
+      var option = {
+        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+        legend: {
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 90,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.dbryData1,
+          formatter: (name) => {
+            if (this.dbryData1.length) {
+              const item = this.dbryData1.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.dbryData1,
+          },
+        ],
+      };
+      this.myChart1.setOption(option);
+      this.myChart1.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            type_id: "mlsp",
+            type_name: "低保人员",
+            pageType: "normal",
+          },
+        });
+      });
+      window.addEventListener("resize", () => this.myChart1.resize());
+    },
+    dbryDataCharts2() {
+      let div = document.getElementById("dbryChart2");
+      this.myChart2 = echarts.init(div);
+      var option = {
+        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+        legend: {
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 80,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.dbryData2,
+          formatter: (name) => {
+            if (this.dbryData2.length) {
+              const item = this.dbryData2.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.dbryData2,
+          },
+        ],
+      };
+      this.myChart2.setOption(option);
+      this.myChart2.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            type_id: "mlsp",
+            type_name: "低保人员",
+            pageType: "normal",
+          },
+        });
+      });
+      window.addEventListener("resize", () => this.myChart2.resize());
+    },
+    dbryDataCharts3() {
+      let div = document.getElementById("dbryChart3");
+      this.myChart3 = echarts.init(div);
+      var option = {
+        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+        legend: {
+          type: "scroll",
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            width: 120,
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 90,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.dbryData3,
+          formatter: (name) => {
+            if (this.dbryData3.length) {
+              const item = this.dbryData3.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.dbryData3,
+          },
+        ],
+      };
+      this.myChart3.setOption(option);
+      this.myChart3.on("click", (a, b) => {
+        console.log(a, b);
+      });
+      window.addEventListener("resize", () => this.myChart3.resize());
+    },
+    dbryDataCharts4() {
+      let div = document.getElementById("dbryChart4");
+      this.myChart4 = echarts.init(div);
+      var option = {
+        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+        legend: {
+          type: "scroll",
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 80,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.dbryData4,
+          formatter: (name) => {
+            if (this.dbryData4.length) {
+              const item = this.dbryData4.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.dbryData4,
+          },
+        ],
+      };
+      this.myChart4.setOption(option);
+      window.addEventListener("resize", () => this.myChart4.resize());
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/renfang/index.scss"
+  scoped
+></style>
+
+<style lang="scss" scoped>
+.dibaorenyuan {
+  padding: 0px 240px;
+}
+#dbryChart3 {
+  .echarts-legend {
+    white-space: normal;
+  }
+}
+
+:v-deep #dbryChart3 {
+  .echarts-legend span {
+    padding: 5px 0;
+    display: block;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/renfang/visualizing/components/laonianren.vue b/src/views/dataBoard/renfang/visualizing/components/laonianren.vue
new file mode 100644
index 000000000..f34a534d4
--- /dev/null
+++ b/src/views/dataBoard/renfang/visualizing/components/laonianren.vue
@@ -0,0 +1,266 @@
+<template>
+  <div>
+    <div class="visualizing laonianren">
+      <div class="visualizing-left">
+        <div>
+          <data-title title="老年人年龄统计" />
+        </div>
+        <div id="lnrLeftChart" style="height: 400px"></div>
+      </div>
+      <div class="visualizing-right">
+        <div>
+          <data-title title="老年人居住情况统计" />
+        </div>
+        <div id="lnrRightChart" style="height: 400px"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
+import * as echarts from "echarts";
+
+function dataFormatter(arr) {
+  return arr.map((item) => {
+    return {
+      name: item.classification,
+      value: Number(item.classificationNum),
+    };
+  });
+}
+export default {
+  name: "laonianren",
+  props: {
+    title: {
+      type: String,
+      default: "详情",
+    },
+  },
+  components: {
+    dataTitle,
+  },
+  data() {
+    return {
+      lnrLeft: [
+        { value: 108, name: "60-69" },
+        { value: 38, name: "70-79" },
+        { value: 92, name: "80-89" },
+        { value: 22, name: "90岁及以上" },
+      ],
+      lnrRight: [
+        { value: 66, name: "与子女同住" },
+        { value: 70, name: "空巢" },
+        { value: 71, name: "独居" },
+        { value: 53, name: "其他" },
+      ],
+    };
+  },
+  created() {
+    const query = this.$route.query;
+    this.getData();
+  },
+  activated() {},
+  methods: {
+    getData() {
+      this.$http
+        .get("/actual/base/peopleRoomOverview/oldPeopleAgePie")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.lnrLeft = dataFormatter(res.data);
+          this.initLeftCharts();
+        })
+        .catch(() => {});
+      this.$http
+        .get("/actual/base/peopleRoomOverview/oldPeopleResidePie")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.lnrRight = dataFormatter(res.data);
+          this.initRightCharts();
+        })
+        .catch(() => {});
+    },
+    initLeftCharts() {
+      let div = document.getElementById("lnrLeftChart");
+      this.myChart1 = echarts.init(div);
+      var option = {
+        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+        legend: {
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 90,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.lnrLeft,
+          formatter: (name) => {
+            if (this.lnrLeft.length) {
+              const item = this.lnrLeft.filter((item) => item.name === name)[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.lnrLeft,
+          },
+        ],
+      };
+      this.myChart1.setOption(option);
+      this.myChart1.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            type_id: "aged",
+            type_name: "老年人",
+            pageType: "normal",
+          },
+        });
+      });
+      window.addEventListener("resize", () => this.myChart1.resize());
+    },
+    initRightCharts() {
+      let div = document.getElementById("lnrRightChart");
+      this.myChart2 = echarts.init(div);
+      var option = {
+        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+        legend: {
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 80,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.lnrRight,
+          formatter: (name) => {
+            if (this.lnrRight.length) {
+              const item = this.lnrRight.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.lnrRight,
+          },
+        ],
+      };
+      this.myChart2.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            type_id: "aged",
+            type_name: "老年人",
+            pageType: "normal",
+          },
+        });
+      });
+      this.myChart2.setOption(option);
+      window.addEventListener("resize", () => this.myChart2.resize());
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/renfang/index.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.laonianren {
+  padding: 140px 240px;
+}
+</style>
diff --git a/src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue b/src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue
new file mode 100644
index 000000000..20ffbc639
--- /dev/null
+++ b/src/views/dataBoard/renfang/visualizing/components/shiyerenyuan.vue
@@ -0,0 +1,573 @@
+<template>
+  <div>
+    <div class="visualizing">
+      <div class="visualizing-item">
+        <div>
+          <data-title title="失业人员失业原因统计" />
+        </div>
+        <div id="syryChart1" style="height: 380px"></div>
+      </div>
+      <div class="visualizing-item">
+        <div>
+          <data-title title="失业人员就业愿望统计" />
+        </div>
+        <div id="syryChart2" style="height: 380px"></div>
+      </div>
+      <div class="visualizing-item">
+        <div>
+          <data-title title="失业人员年龄统计" />
+        </div>
+        <div id="syryChart3" style="height: 380px"></div>
+      </div>
+    </div>
+    <div class="visualizing dibaorenyuan">
+      <div class="visualizing-left">
+        <div>
+          <data-title title="技能找人统计" />
+        </div>
+        <div id="syryChart4" style="height: 380px"></div>
+      </div>
+      <div class="visualizing-right">
+        <div>
+          <data-title title="岗位找人统计" />
+        </div>
+        <div id="syryChart5" style="height: 380px"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
+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,
+      value: Number(item.classificationNum),
+    };
+  });
+}
+export default {
+  name: "shiyerenyuan",
+  props: {
+    title: {
+      type: String,
+      default: "详情",
+    },
+  },
+  components: {
+    dataTitle,
+  },
+  data() {
+    return {
+      syryData1: [],
+      syryData2: [],
+      syryData3: [],
+      syryData4: [],
+      syryData5: [],
+    };
+  },
+  created() {
+    const query = this.$route.query;
+    this.getData();
+  },
+  methods: {
+    getData() {
+      this.$http
+        .get("/actual/base/peopleRoomOverview/unemployedPie?type=0")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.syryData1 = dataFormatter(res.data);
+          this.syryDataCharts1();
+        })
+        .catch(() => {});
+      this.$http
+        .get("/actual/base/peopleRoomOverview/unemployedPie?type=1")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.syryData2 = dataFormatter1(res.data);
+          this.syryDataCharts2();
+        })
+        .catch(() => {});
+      this.$http
+        .get("/actual/base/peopleRoomOverview/unemployedPie?type=2")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.syryData3 = dataFormatter1(res.data);
+          this.syryDataCharts3();
+        })
+        .catch(() => {});
+      this.$http
+        .get("/actual/base/peopleRoomOverview/unemployedPie?type=3")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.syryData4 = dataFormatter(res.data);
+          this.syryDataCharts4();
+        })
+        .catch(() => {});
+      this.$http
+        .get("/actual/base/peopleRoomOverview/unemployedPie?type=4")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.syryData5 = dataFormatter(res.data);
+          this.syryDataCharts5();
+        })
+        .catch(() => {});
+    },
+    syryDataCharts1() {
+      let div = document.getElementById("syryChart1");
+      this.myChart1 = echarts.init(div);
+      var option = {
+        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+        legend: {
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 90,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                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,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.syryData1,
+          },
+        ],
+      };
+      this.myChart1.setOption(option);
+      this.myChart1.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            type_id: "aged",
+            type_name: "失业人员失业原因",
+            pageType: "normal",
+          },
+        });
+      });
+      window.addEventListener("resize", () => this.myChart1.resize());
+    },
+    syryDataCharts2() {
+      let div = document.getElementById("syryChart2");
+      this.myChart2 = echarts.init(div);
+      var option = {
+        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+        legend: {
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 80,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.syryData2,
+          formatter: (name) => {
+            if (this.syryData2.length) {
+              const item = this.syryData2.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.syryData2,
+          },
+        ],
+      };
+      this.myChart2.setOption(option);
+      this.myChart2.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            type_id: "aged",
+            type_name: "失业人员就业愿望",
+            pageType: "normal",
+          },
+        });
+      });
+      window.addEventListener("resize", () => this.myChart2.resize());
+    },
+    syryDataCharts3() {
+      let div = document.getElementById("syryChart3");
+      this.myChart3 = echarts.init(div);
+      var option = {
+        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+        legend: {
+          type: "scroll",
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            width: 120,
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 90,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                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,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.syryData3,
+          },
+        ],
+      };
+      this.myChart3.setOption(option);
+      this.myChart3.on("click", (a, b) => {
+        this.$router.push({
+          path: "/dataBoard/renfang/resi-class",
+          query: {
+            org_id: "7b6f9a9f9f38d5f9fa7ce94a93d6eb28",
+            type_id: "aged",
+            type_name: "失业人员年龄",
+            pageType: "normal",
+          },
+        });
+      });
+      window.addEventListener("resize", () => this.myChart3.resize());
+    },
+    syryDataCharts4() {
+      let div = document.getElementById("syryChart4");
+      this.myChart4 = echarts.init(div);
+      var option = {
+        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+        legend: {
+          type: "scroll",
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 80,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.syryData4,
+          formatter: (name) => {
+            if (this.syryData4.length) {
+              const item = this.syryData4.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.syryData4,
+          },
+        ],
+      };
+      this.myChart4.setOption(option);
+      window.addEventListener("resize", () => this.myChart4.resize());
+    },
+    syryDataCharts5() {
+      let div = document.getElementById("syryChart5");
+      this.myChart5 = echarts.init(div);
+      var option = {
+        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+        legend: {
+          type: "scroll",
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 80,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                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,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.syryData5,
+          },
+        ],
+      };
+      this.myChart5.setOption(option);
+      window.addEventListener("resize", () => this.myChart5.resize());
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/renfang/index.scss"
+  scoped
+></style>
+
+<style lang="scss" scoped>
+.dibaorenyuan {
+  padding: 0px 240px;
+}
+#syryChart3 {
+  .echarts-legend {
+    white-space: normal;
+  }
+}
+
+:v-deep #syryChart3 {
+  .echarts-legend span {
+    padding: 5px 0;
+    display: block;
+  }
+}
+</style>
diff --git a/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue b/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue
new file mode 100644
index 000000000..169cd373c
--- /dev/null
+++ b/src/views/dataBoard/renfang/visualizing/components/zhiyuanzhe.vue
@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <div class="visualizing laonianren">
+      <div class="visualizing-left">
+        <div>
+          <data-title title="志愿者年龄统计" />
+        </div>
+        <div id="zyzLeftChart" style="height: 400px"></div>
+      </div>
+      <div class="visualizing-right">
+        <div>
+          <data-title title="志愿者类别统计" />
+        </div>
+        <div id="zyzRightChart" style="height: 400px"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import dataTitle from "@/views/dataBoard/renfang/visualizing/components/dataTitle.vue";
+import * as echarts from "echarts";
+
+function dataFormatter(arr) {
+  return arr.map((item) => {
+    return {
+      name: item.classification,
+      value: Number(item.classificationNum),
+    };
+  });
+}
+export default {
+  name: "zhiyuanzhe",
+  props: {
+    title: {
+      type: String,
+      default: "详情",
+    },
+  },
+  components: {
+    dataTitle,
+  },
+  data() {
+    return {
+      zyzLeft: [],
+      zyzRight: [],
+    };
+  },
+  created() {
+    const query = this.$route.query;
+    this.getData();
+  },
+  activated() {},
+  methods: {
+    getData() {
+      this.$http
+        .get("/actual/base/peopleRoomOverview/volunteerPie?type=0")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.zyzLeft = dataFormatter(res.data);
+          this.initLeftCharts();
+        })
+        .catch(() => {});
+      this.$http
+        .get("/actual/base/peopleRoomOverview/volunteerPie?type=1")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          this.zyzRight = dataFormatter(res.data);
+          this.initRightCharts();
+        })
+        .catch(() => {});
+    },
+    initLeftCharts() {
+      let div = document.getElementById("zyzLeftChart");
+      this.myChart1 = echarts.init(div);
+      var option = {
+        color: ["#60bce1", "#04c78f", "#fdaa00", "#f23800"],
+        legend: {
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 90,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.zyzLeft,
+          formatter: (name) => {
+            if (this.zyzLeft.length) {
+              const item = this.zyzLeft.filter((item) => item.name === name)[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.zyzLeft,
+          },
+        ],
+      };
+      this.myChart1.setOption(option);
+      this.myChart1.on("click", (a, b) => {
+        console.log(a, b);
+      });
+      window.addEventListener("resize", () => this.myChart1.resize());
+    },
+    initRightCharts() {
+      let div = document.getElementById("zyzRightChart");
+      this.myChart2 = echarts.init(div);
+      var option = {
+        color: ["#1b94fe", "#5a75ff", "#01c690", "#fdaa01"],
+        legend: {
+          orient: "vertical",
+          top: 20,
+          left: 10,
+          icon: "rect",
+          itemHeight: 14,
+          itemWidth: 14,
+          textStyle: {
+            color: "#ffffff",
+            rich: {
+              name: {
+                width: 80,
+                fontSize: 12,
+                color: "#dddee7",
+              },
+              value: {
+                width: 30,
+                align: "right",
+                fontSize: 18,
+              },
+            },
+          },
+          data: this.zyzRight,
+          formatter: (name) => {
+            if (this.zyzRight.length) {
+              const item = this.zyzRight.filter(
+                (item) => item.name === name
+              )[0];
+              return `{name|${name}}{value| ${item.value}}`;
+            }
+          },
+        },
+        toolbox: {
+          show: false,
+          feature: {
+            mark: { show: true },
+            dataView: { show: true, readOnly: false },
+            restore: { show: true },
+            saveAsImage: { show: true },
+          },
+        },
+        series: [
+          {
+            name: "Nightingale Chart",
+            type: "pie",
+            radius: [30, 130],
+            center: ["50%", "50%"],
+            roseType: "area",
+            itemStyle: {
+              borderRadius: 0,
+            },
+            top: 20,
+            left: -40,
+            label: {
+              position: "inside",
+              formatter: "{d}%",
+              textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+              },
+            },
+            data: this.zyzRight,
+          },
+        ],
+      };
+      this.myChart1.on("click", (a, b) => {
+        console.log(a, b);
+      });
+      this.myChart2.setOption(option);
+      window.addEventListener("resize", () => this.myChart2.resize());
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/renfang/index.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.laonianren {
+  padding: 140px 240px;
+}
+</style>
diff --git a/src/views/dataBoard/renfang/visualizing/index.vue b/src/views/dataBoard/renfang/visualizing/index.vue
new file mode 100644
index 000000000..12320a951
--- /dev/null
+++ b/src/views/dataBoard/renfang/visualizing/index.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <cpt-bread
+      @tap="clickBreadItem"
+      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 == '失业人员'" />
+  </div>
+</template>
+
+<script>
+import cptBread from "@/views/dataBoard/renfang/cpts/bread";
+import laonianren from "./components/laonianren.vue";
+import dibaorenyuan from "./components/dibaorenyuan.vue";
+import zhiyuanzhe from "./components/zhiyuanzhe.vue";
+import dangyuan from "./components/dangyuan.vue";
+import shiyerenyuan from "./components/shiyerenyuan.vue";
+export default {
+  name: "visualizing",
+  props: {
+    title: {
+      type: String,
+      default: "详情",
+    },
+  },
+  components: {
+    cptBread,
+    laonianren,
+    dibaorenyuan,
+    zhiyuanzhe,
+    dangyuan,
+    shiyerenyuan,
+  },
+  data() {
+    return {
+      pageName: "老年人",
+      breadList: [
+        {
+          type: "back",
+          meta: { title: "人房总览" },
+        },
+      ],
+    };
+  },
+  created() {},
+  activated() {
+    const query = this.$route.query;
+    this.breadList = [
+      {
+        type: "back",
+        meta: { title: "人房总览" },
+      },
+    ];
+    this.pageName = 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();
+      }
+    },
+
+    toBread(item) {
+      const { orgId } = item;
+      const { breadList } = this;
+      let index = breadList.findIndex((val) => val.orgId === orgId);
+      if (index >= 0) {
+        this.breadList = breadList.slice(0, index + 1);
+      } else {
+        breadList.push(item);
+        this.breadList = breadList;
+      }
+      console.log("breadList::", breadList);
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/renfang/index.scss"
+  scoped
+></style>
diff --git a/src/views/dataBoardMain/main-navbar.vue b/src/views/dataBoardMain/main-navbar.vue
index 27acda906..87e2895d7 100644
--- a/src/views/dataBoardMain/main-navbar.vue
+++ b/src/views/dataBoardMain/main-navbar.vue
@@ -27,7 +27,7 @@
       <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/organizational/index' }" @click="toPage('/dataBoard/organizational/index')">
         <span>组织架构</span>
       </div>
-      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/humanData/index' }" @click="toPage('/dataBoard/humanData/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')">