diff --git a/src/assets/images/shuju/overview/fangwu-bg.png b/src/assets/images/shuju/overview/fangwu-bg.png
new file mode 100644
index 000000000..3418a6793
Binary files /dev/null and b/src/assets/images/shuju/overview/fangwu-bg.png differ
diff --git a/src/assets/images/shuju/overview/fangwu-icon.png b/src/assets/images/shuju/overview/fangwu-icon.png
new file mode 100644
index 000000000..e01aa00c9
Binary files /dev/null and b/src/assets/images/shuju/overview/fangwu-icon.png differ
diff --git a/src/assets/images/shuju/overview/fangwu2-icon.png b/src/assets/images/shuju/overview/fangwu2-icon.png
new file mode 100644
index 000000000..e5169f259
Binary files /dev/null and b/src/assets/images/shuju/overview/fangwu2-icon.png differ
diff --git a/src/assets/images/shuju/overview/fengxian-bg.png b/src/assets/images/shuju/overview/fengxian-bg.png
new file mode 100644
index 000000000..872186c86
Binary files /dev/null and b/src/assets/images/shuju/overview/fengxian-bg.png differ
diff --git a/src/assets/images/shuju/overview/fengxian-icon.png b/src/assets/images/shuju/overview/fengxian-icon.png
new file mode 100644
index 000000000..8d4c756c8
Binary files /dev/null and b/src/assets/images/shuju/overview/fengxian-icon.png differ
diff --git a/src/assets/images/shuju/overview/fengxianry-icon.png b/src/assets/images/shuju/overview/fengxianry-icon.png
new file mode 100644
index 000000000..5c53d83dc
Binary files /dev/null and b/src/assets/images/shuju/overview/fengxianry-icon.png differ
diff --git a/src/assets/images/shuju/overview/jiedao-img.png b/src/assets/images/shuju/overview/jiedao-img.png
new file mode 100644
index 000000000..7cee2d28f
Binary files /dev/null and b/src/assets/images/shuju/overview/jiedao-img.png differ
diff --git a/src/assets/images/shuju/overview/jinri-bg.png b/src/assets/images/shuju/overview/jinri-bg.png
new file mode 100644
index 000000000..59773a50f
Binary files /dev/null and b/src/assets/images/shuju/overview/jinri-bg.png differ
diff --git a/src/assets/images/shuju/overview/jumin-icon.png b/src/assets/images/shuju/overview/jumin-icon.png
new file mode 100644
index 000000000..545950327
Binary files /dev/null and b/src/assets/images/shuju/overview/jumin-icon.png differ
diff --git a/src/assets/images/shuju/overview/manyi-icon.png b/src/assets/images/shuju/overview/manyi-icon.png
new file mode 100644
index 000000000..15cb7105d
Binary files /dev/null and b/src/assets/images/shuju/overview/manyi-icon.png differ
diff --git a/src/assets/images/shuju/overview/manyidu-bg.png b/src/assets/images/shuju/overview/manyidu-bg.png
new file mode 100644
index 000000000..ac9336d7b
Binary files /dev/null and b/src/assets/images/shuju/overview/manyidu-bg.png differ
diff --git a/src/assets/images/shuju/overview/manyidu-icon.png b/src/assets/images/shuju/overview/manyidu-icon.png
new file mode 100644
index 000000000..bf244503b
Binary files /dev/null and b/src/assets/images/shuju/overview/manyidu-icon.png differ
diff --git a/src/assets/images/shuju/overview/no1-bg.png b/src/assets/images/shuju/overview/no1-bg.png
new file mode 100644
index 000000000..c727e8e20
Binary files /dev/null and b/src/assets/images/shuju/overview/no1-bg.png differ
diff --git a/src/assets/images/shuju/overview/no2-bg.png b/src/assets/images/shuju/overview/no2-bg.png
new file mode 100644
index 000000000..f57e71991
Binary files /dev/null and b/src/assets/images/shuju/overview/no2-bg.png differ
diff --git a/src/assets/images/shuju/overview/no3-bg.png b/src/assets/images/shuju/overview/no3-bg.png
new file mode 100644
index 000000000..6c633deb7
Binary files /dev/null and b/src/assets/images/shuju/overview/no3-bg.png differ
diff --git a/src/assets/images/shuju/overview/renkou-bg.png b/src/assets/images/shuju/overview/renkou-bg.png
new file mode 100644
index 000000000..7c3b639ed
Binary files /dev/null and b/src/assets/images/shuju/overview/renkou-bg.png differ
diff --git a/src/assets/images/shuju/overview/renkou-icon.png b/src/assets/images/shuju/overview/renkou-icon.png
new file mode 100644
index 000000000..5fd1f7a6e
Binary files /dev/null and b/src/assets/images/shuju/overview/renkou-icon.png differ
diff --git a/src/assets/images/shuju/overview/title-bg.png b/src/assets/images/shuju/overview/title-bg.png
new file mode 100644
index 000000000..f4d6325bc
Binary files /dev/null and b/src/assets/images/shuju/overview/title-bg.png differ
diff --git a/src/assets/images/shuju/overview/zjbg-icon.png b/src/assets/images/shuju/overview/zjbg-icon.png
new file mode 100644
index 000000000..c75a77b9e
Binary files /dev/null and b/src/assets/images/shuju/overview/zjbg-icon.png differ
diff --git a/src/assets/scss/dataBoard/overview/index.scss b/src/assets/scss/dataBoard/overview/index.scss
new file mode 100644
index 000000000..9f506d97e
--- /dev/null
+++ b/src/assets/scss/dataBoard/overview/index.scss
@@ -0,0 +1,525 @@
+@import '../../c/config';
+@import '../../c/function';
+@import '../c/common';
+
+.g-row {
+	padding: 0 6px 24px;
+	display: flex;
+	justify-content: space-between;
+
+	.g-left {
+		width: 460px;
+	}
+
+	.g-center {
+		position: relative;
+		width: 884px;
+	}
+
+	.g-right {
+		width: 460px;
+	}
+}
+
+.m-map {
+	position: relative;
+	width: 100%;
+	height: 690px;
+	margin-bottom: 10px;
+}
+
+
+.m-box {
+	width: 460px;
+	background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(46, 164, 255, 0) 100%);
+}
+
+.m-rybox {
+	width: 884px;
+}
+
+.m-subbox {
+	@include scrollBar;
+	height: 334px;
+	overflow-y: auto;
+}
+
+.m-jdjs {
+	height: 318px;
+	padding: 0 16px;
+
+	&-js {
+		margin: 20px 0;
+		display: flex;
+		justify-content: space-between;
+
+		&-img {
+			width: 200px;
+			height: 140px;
+			background: #00ACF7;
+			border-radius: 6px;
+			overflow: hidden;
+
+			img {
+				width: 200px;
+				height: 140px;
+			}
+		}
+
+		&-txt {
+			width: 213px;
+			font-size: 14px;
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #FFFFFF;
+			line-height: 24px;
+			margin-left: 16px;
+			padding-top: 14px;
+		}
+	}
+
+	&-bg {
+		width: 428px;
+		height: 104px;
+		padding: 16px;
+		background: linear-gradient(20deg, rgba(1, 94, 234, 0.3) 0%, rgba(16, 50, 103, 0.3) 100%);
+
+		&-title {
+			display: flex;
+
+			&-img {
+				img {
+					width: 18px;
+					height: 18px;
+				}
+			}
+
+			&-txt {
+				margin-left: 9px;
+				width: 79px;
+				height: 18px;
+				font-size: 18px;
+				font-family: PingFang SC;
+				font-weight: 800;
+				color: #FFFFFF;
+				line-height: 24px;
+			}
+		}
+
+		&-txt {
+			margin-top: 14px;
+			width: 391px;
+			height: 39px;
+			font-size: 14px;
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #FFFFFF;
+			line-height: 24px;
+		}
+	}
+}
+
+@mixin rounded-corners {
+	width: 76px;
+	height: 76px;
+	background-size: 76px 76px;
+	padding-top: 16px;
+
+	&-icon {
+		width: 26px;
+		margin: 0 auto;
+
+		img {
+			width: 26px;
+			height: 26px;
+		}
+	}
+
+	&-txt {
+		text-align: center;
+		color: #ffffff;
+		height: 12px;
+		font-size: 12px;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+		line-height: 16px;
+	}
+}
+
+.m-jdhx {
+	height: 556px;
+	padding: 20px 16px 0;
+
+	&-top {
+		display: flex;
+		justify-content: space-between;
+		padding-top: 20px;
+	}
+
+	&-card {
+		width: 180px;
+		height: 120px;
+		padding: 16px;
+		background: linear-gradient(90deg, rgba(1, 94, 234, 0.3) 0%, rgba(16, 50, 103, 0.3) 100%);
+
+		&-title {
+			display: flex;
+
+			&-icon {
+				padding-top: 2px;
+
+				img {
+					width: 10px;
+					height: 10px;
+				}
+			}
+
+			&-txt {
+				margin-left: 8px;
+				height: 16px;
+				font-size: 16px;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #FFFFFF;
+				line-height: 22px;
+			}
+		}
+
+		&-content {
+			margin-top: 15px;
+
+			&-item {
+				display: flex;
+				justify-content: space-between;
+				font-size: 14px;
+				font-family: PingFang SC;
+				font-weight: 400;
+				line-height: 22px;
+
+				&-lable {
+					color: #A3B9DA;
+				}
+
+				&-value {
+					color: #FFFFFF;
+				}
+			}
+		}
+	}
+
+	&-f {
+		background: linear-gradient(90deg, rgba(16, 50, 103, 0.3) 0%, rgba(1, 94, 234, 0.3) 100%);
+	}
+
+	&-h {
+		height: 144px;
+	}
+
+	&-center {
+		margin-top: 6px;
+
+		&-line {}
+
+		&-content {
+			margin: 0 auto;
+			width: 240px;
+			height: 224px;
+			background: url(../../../../assets/images/shuju/overview/jiedao-img.png);
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: 234px 186px;
+
+			&-item {
+				display: flex;
+				justify-content: space-between;
+
+				&-jumin {
+					background: url(../../../../assets/images/shuju/overview/renkou-bg.png);
+					@include rounded-corners;
+				}
+
+				&-fangwu {
+					background: url(../../../../assets/images/shuju/overview/fangwu-bg.png);
+					@include rounded-corners;
+				}
+
+				&-manyi {
+					background: url(../../../../assets/images/shuju/overview/manyidu-bg.png);
+					@include rounded-corners;
+				}
+
+				&-fengxian {
+					background: url(../../../../assets/images/shuju/overview/fengxian-bg.png);
+					@include rounded-corners;
+				}
+			}
+		}
+	}
+}
+
+
+.m-jdwgy {
+	height: 220px;
+}
+
+.m-rfsjtj {
+	height: 166px;
+	width: 100%;
+	padding: 24px;
+	display: flex;
+	justify-content: space-between;
+
+	&-item {
+		width: 200px;
+
+		&-des {
+			width: 100%;
+			height: 16px;
+			font-size: 16px;
+			font-family: PingFang SC;
+			font-weight: 400;
+			color: #FFFFFF;
+			margin-bottom: 20px;
+		}
+
+		&-jian {
+			height: 36px;
+			font-size: 14px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #A3B9DA;
+
+			span {
+				margin-right: 8px;
+				height: 36px;
+				font-size: 36px;
+				font-family: DIN Alternate;
+				font-weight: bold;
+				font-style: italic;
+				color: #FFB73C;
+			}
+		}
+
+		&-ren {
+			height: 36px;
+			font-size: 14px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #A3B9DA;
+
+			span {
+				margin-right: 8px;
+				height: 36px;
+				font-size: 36px;
+				font-family: DIN Alternate;
+				font-weight: bold;
+				font-style: italic;
+				color: #08EBAE;
+			}
+		}
+
+		&-change {
+			margin-top: 16px;
+			display: flex;
+			height: 36px;
+			font-size: 14px;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #A3B9DA;
+
+			&-today {
+				width: 36px;
+				height: 18px;
+				font-size: 12px;
+				line-height: 18px;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #FFFFFF;
+				text-align: center;
+				background-image: url(../../../../assets/images/shuju/overview/jinri-bg.png);
+				background-repeat: no-repeat;
+				background-size: 36px 18px;
+			}
+
+			&-new {
+				margin-left: 6px;
+
+				span {
+					margin-left: 6px;
+					height: 15px;
+					font-size: 18px;
+					font-family: DIN Alternate;
+					font-weight: bold;
+					font-style: italic;
+					color: #00D6D9;
+				}
+			}
+
+			&-update {
+				margin-left: 18px;
+
+				span {
+					margin-left: 6px;
+					height: 15px;
+					font-size: 18px;
+					font-family: DIN Alternate;
+					font-weight: bold;
+					font-style: italic;
+					color: #279AFF;
+				}
+			}
+		}
+	}
+}
+
+.m-per {
+	position: absolute;
+	z-index: 100;
+	top: 20px;
+	left: 0;
+	right: 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	padding-left: 10px;
+
+	.item {
+		display: flex;
+		width: 120px;
+
+		.item-info {
+			font-size: 14px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			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;
+				width: 20px;
+				height: 20px;
+				vertical-align: bottom;
+			}
+
+			b {
+				font-weight: 500;
+				font-size: 24px;
+				color: #ffffff;
+			}
+		}
+	}
+}
+
+.m-sqrfph {
+	padding: 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;
+				// padding: 0 8px;
+				// overflow: hidden;
+				// white-space: nowrap;
+				// text-overflow: ellipsis;
+			}
+
+			.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: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;
+	height: 24px;
+
+	::v-deep .el-input--medium .el-input__inner {
+		height: 24px;
+		line-height: 24px;
+		background: #04224a;
+		border: 1px solid #125aaa;
+		border-radius: 12px;
+		width: 90px;
+		padding: 0px;
+		text-align: center;
+		color: #a0cdff;
+	}
+
+	::v-deep .el-input--medium .el-input__icon {
+		display: none;
+	}
+
+	::v-deep .el-date-editor.el-input,
+	.el-date-editor.el-input__inner {
+		width: 90px;
+		border: 0;
+	}
+}
\ No newline at end of file
diff --git a/src/views/dataBoard/overview/components/jdjs.vue b/src/views/dataBoard/overview/components/jdjs.vue
new file mode 100644
index 000000000..f674448a0
--- /dev/null
+++ b/src/views/dataBoard/overview/components/jdjs.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="m-subbox m-jdjs">
+    <div class="m-jdjs-js">
+      <div class="m-jdjs-js-img">
+        <img src="../linshi/jiedaotu.jpg" />
+      </div>
+      <div class="m-jdjs-js-txt">
+        XX街道，现有房屋4600间，自 住房屋3800间、出租房屋600、闲
+        置房屋200，现有居民4000户、 8400
+      </div>
+    </div>
+    <div class="m-jdjs-bg">
+      <div class="m-jdjs-bg-title">
+        <div class="m-jdjs-bg-title-img">
+          <img src="../../../../assets/images/shuju/overview/zjbg-icon.png" />
+        </div>
+        <div class="m-jdjs-bg-title-txt">总结报告</div>
+      </div>
+      <div class="m-jdjs-bg-txt">
+        根据数据分析结果，建议重点关注租户、党员、保障房人员三类
+        群体，开展相关的社区服务和活动。
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "jdjs",
+  data() {},
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/overview/index.scss"
+  scoped
+></style>
diff --git a/src/views/dataBoard/overview/components/jdtphx.vue b/src/views/dataBoard/overview/components/jdtphx.vue
new file mode 100644
index 000000000..c1328f861
--- /dev/null
+++ b/src/views/dataBoard/overview/components/jdtphx.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="m-subbox m-jdhx">
+    <div class="m-jdhx-top">
+      <div class="m-jdhx-card">
+        <div class="m-jdhx-card-title">
+          <div class="m-jdhx-card-title-icon">
+            <img
+              src="../../../../assets/images/shuju/overview/jumin-icon.png"
+            />
+          </div>
+          <div class="m-jdhx-card-title-txt">主要居民类型</div>
+        </div>
+        <div class="m-jdhx-card-content">
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">老年人</div>
+            <div class="m-jdhx-card-content-item-value">21%</div>
+          </div>
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">租户</div>
+            <div class="m-jdhx-card-content-item-value">17%</div>
+          </div>
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">低保人员</div>
+            <div class="m-jdhx-card-content-item-value">9%</div>
+          </div>
+        </div>
+      </div>
+      <div class="m-jdhx-card m-jdhx-f m-jdhx-h">
+        <div class="m-jdhx-card-title">
+          <div class="m-jdhx-card-title-icon">
+            <img
+              src="../../../../assets/images/shuju/overview/fangwu-icon.png"
+            />
+          </div>
+          <div class="m-jdhx-card-title-txt">房屋性质/用途</div>
+        </div>
+        <div class="m-jdhx-card-content">
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">自助</div>
+            <div class="m-jdhx-card-content-item-value">60%</div>
+          </div>
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">出租</div>
+            <div class="m-jdhx-card-content-item-value">18%</div>
+          </div>
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">办公</div>
+            <div class="m-jdhx-card-content-item-value">10%</div>
+          </div>
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">仓储</div>
+            <div class="m-jdhx-card-content-item-value">12%</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="m-jdhx-center">
+      <div class="m-jdhx-center-line"></div>
+      <div class="m-jdhx-center-content">
+        <div class="m-jdhx-center-content-item">
+          <div class="m-jdhx-center-content-item-jumin">
+            <div class="m-jdhx-center-content-item-jumin-icon">
+              <img
+                src="../../../../assets/images/shuju/overview/renkou-icon.png"
+              />
+            </div>
+            <div class="m-jdhx-center-content-item-jumin-txt">人口</div>
+          </div>
+          <div class="m-jdhx-center-content-item-fangwu">
+            <div class="m-jdhx-center-content-item-fangwu-icon">
+              <img
+                src="../../../../assets/images/shuju/overview/fangwu2-icon.png"
+              />
+            </div>
+            <div class="m-jdhx-center-content-item-fangwu-txt">房屋</div>
+          </div>
+        </div>
+        <div style="margin-top: 79px" class="m-jdhx-center-content-item">
+          <div class="m-jdhx-center-content-item-manyi">
+            <div class="m-jdhx-center-content-item-manyi-icon">
+              <img
+                src="../../../../assets/images/shuju/overview/manyidu-icon.png"
+              />
+            </div>
+            <div class="m-jdhx-center-content-item-manyi-txt">满意度</div>
+          </div>
+          <div class="m-jdhx-center-content-item-fengxian">
+            <div class="m-jdhx-center-content-item-fengxian-icon">
+              <img
+                src="../../../../assets/images/shuju/overview/fengxianry-icon.png"
+              />
+            </div>
+            <div class="m-jdhx-center-content-item-fengxian-txt">风险人员</div>
+          </div>
+        </div>
+      </div>
+      <div class="m-jdhx-center-line"></div>
+    </div>
+    <div class="m-jdhx-top">
+      <div class="m-jdhx-card">
+        <div class="m-jdhx-card-title">
+          <div class="m-jdhx-card-title-icon">
+            <img
+              src="../../../../assets/images/shuju/overview/manyi-icon.png"
+            />
+          </div>
+          <div class="m-jdhx-card-title-txt">主要不满意事项</div>
+        </div>
+        <div class="m-jdhx-card-content">
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">楼院卫生</div>
+            <div class="m-jdhx-card-content-item-value">67%</div>
+          </div>
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">医护人员态度</div>
+            <div class="m-jdhx-card-content-item-value">13%</div>
+          </div>
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">基础教育便利</div>
+            <div class="m-jdhx-card-content-item-value">20%</div>
+          </div>
+        </div>
+      </div>
+      <div class="m-jdhx-card m-jdhx-f">
+        <div class="m-jdhx-card-title">
+          <div class="m-jdhx-card-title-icon">
+            <img
+              src="../../../../assets/images/shuju/overview/fengxian-icon.png"
+            />
+          </div>
+          <div class="m-jdhx-card-title-txt">风险人员</div>
+        </div>
+        <div class="m-jdhx-card-content">
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">12345</div>
+            <div class="m-jdhx-card-content-item-value">78</div>
+          </div>
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">生意满意度</div>
+            <div class="m-jdhx-card-content-item-value">96</div>
+          </div>
+          <div class="m-jdhx-card-content-item">
+            <div class="m-jdhx-card-content-item-lable">社区满意度自查</div>
+            <div class="m-jdhx-card-content-item-value">122</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "jdtphx",
+  data() {},
+};
+</script>
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/overview/index.scss"
+  scoped
+></style>
diff --git a/src/views/dataBoard/overview/components/jdwgy.vue b/src/views/dataBoard/overview/components/jdwgy.vue
new file mode 100644
index 000000000..7e9606126
--- /dev/null
+++ b/src/views/dataBoard/overview/components/jdwgy.vue
@@ -0,0 +1,16 @@
+<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
diff --git a/src/views/dataBoard/overview/components/map-top.vue b/src/views/dataBoard/overview/components/map-top.vue
new file mode 100644
index 000000000..5a84b3592
--- /dev/null
+++ b/src/views/dataBoard/overview/components/map-top.vue
@@ -0,0 +1,85 @@
+<template>
+  <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></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></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></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></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></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></b>
+          %
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "map-top",
+  data() {},
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/overview/index.scss"
+  scoped
+></style>
diff --git a/src/views/dataBoard/overview/components/rfsjtj.vue b/src/views/dataBoard/overview/components/rfsjtj.vue
new file mode 100644
index 000000000..11303d1da
--- /dev/null
+++ b/src/views/dataBoard/overview/components/rfsjtj.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="m-subbox m-rfsjtj">
+    <div class="m-rfsjtj-item">
+      <div class="m-rfsjtj-item-des">采集房屋数</div>
+      <div class="m-rfsjtj-item-jian">
+        <span>{{ numFormat(2317) }}</span>
+        间
+      </div>
+      <div class="m-rfsjtj-item-change">
+        <div class="m-rfsjtj-item-change-today">今日</div>
+        <div class="m-rfsjtj-item-change-new">新增<span>31</span></div>
+        <div class="m-rfsjtj-item-change-update">更新<span>217</span></div>
+      </div>
+    </div>
+    <div class="m-rfsjtj-item">
+      <div class="m-rfsjtj-item-des">采集人口数</div>
+      <div class="m-rfsjtj-item-ren">
+        <span>{{ numFormat(6302) }}</span>
+        人
+      </div>
+      <div class="m-rfsjtj-item-change">
+        <div class="m-rfsjtj-item-change-today">今日</div>
+        <div class="m-rfsjtj-item-change-new">新增<span>24</span></div>
+        <div class="m-rfsjtj-item-change-update">更新<span>466</span></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "rfsjtj",
+  data() {},
+  methods: {
+    numFormat(num) {
+      num = num.toString().split("."); // 分隔小数点
+      var arr = num[0].split("").reverse(); // 转换成字符数组并且倒序排列
+      var res = [];
+      for (var i = 0, len = arr.length; i < len; i++) {
+        if (i % 3 === 0 && i !== 0) {
+          res.push(","); // 添加分隔符
+        }
+        res.push(arr[i]);
+      }
+      res.reverse(); // 再次倒序成为正确的顺序
+      if (num[1]) {
+        // 如果有小数的话添加小数部分
+        res = res.join("").concat("." + num[1]);
+      } else {
+        res = res.join("");
+      }
+      return res;
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/overview/index.scss"
+  scoped
+></style>
diff --git a/src/views/dataBoard/overview/components/sq12345.vue b/src/views/dataBoard/overview/components/sq12345.vue
new file mode 100644
index 000000000..56f9f92a3
--- /dev/null
+++ b/src/views/dataBoard/overview/components/sq12345.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="m-subbox"></div>
+</template>
+<script>
+export default {
+  name: "sq12345",
+  data() {},
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/overview/index.scss"
+  scoped
+></style>
diff --git a/src/views/dataBoard/overview/components/sqrfph.vue b/src/views/dataBoard/overview/components/sqrfph.vue
new file mode 100644
index 000000000..d7d23363c
--- /dev/null
+++ b/src/views/dataBoard/overview/components/sqrfph.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="m-subbox m-sqrfph">
+    <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">{{ item.rkgxs }}</div>
+        <div class="td">{{ item.rfgxzs }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "sqrfph",
+  data() {
+    return {
+      value2: "2023-02",
+      pmList: [
+        {
+          num: "1",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "1720",
+          rfgxzs: "2070",
+        },
+        {
+          num: "2",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "1720",
+          rfgxzs: "2070",
+        },
+        {
+          num: "3",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "1720",
+          rfgxzs: "2070",
+        },
+        {
+          num: "4",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "1720",
+          rfgxzs: "2070",
+        },
+        {
+          num: "5",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "1720",
+          rfgxzs: "2070",
+        },
+        {
+          num: "6",
+          shequ: "XX社区",
+          fwgxs: "350",
+          rkgxs: "1720",
+          rfgxzs: "2070",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/overview/index.scss"
+  scoped
+></style>
diff --git a/src/views/dataBoard/overview/index.vue b/src/views/dataBoard/overview/index.vue
index 219b9ba8b..13e28152a 100644
--- a/src/views/dataBoard/overview/index.vue
+++ b/src/views/dataBoard/overview/index.vue
@@ -1,25 +1,317 @@
 <template>
   <div>
-    <cpt-bread @tap="clickBreadItem" v-if="breadList.length > 1" :bread-list="breadList" />
+    <cpt-bread
+      @tap="clickBreadItem"
+      v-if="breadList.length > 1"
+      :bread-list="breadList"
+    />
+    <div class="g-row">
+      <div class="g-left">
+        <div class="m-box">
+          <Title text="街道介绍" />
+          <Jdjs />
+        </div>
+
+        <div class="m-box">
+          <Title text="街道图谱画像" />
+          <Jdtphx />
+        </div>
+      </div>
+
+      <div class="g-center">
+        <div class="m-map">
+          <map-top />
+          <grid-map
+            ref="map"
+            @clickAgency="clickAgencyItem"
+            :srcGridData="orgData"
+            @clickDotBtn="handleClickDotBtn"
+          />
+        </div>
+        <div class="m-box m-rybox">
+          <Title text="XX街道网格员" />
+          <jdwgy />
+        </div>
+      </div>
+
+      <div class="g-right">
+        <div class="m-box">
+          <Title text="人房数据统计" />
+          <rfsjtj />
+        </div>
+
+        <div class="m-box">
+          <Title text="各社区人房数据更新排行">
+            <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>
+          <sqrfph />
+        </div>
+        <div class="m-box">
+          <Title text="各社区12345投诉事件统计" />
+          <sq12345 />
+        </div>
+      </div>
+
+      <cpt-loading v-show="false" />
+    </div>
   </div>
 </template>
 
 <script>
+import gridMap from "@/views/dataBoard/cpts/map/index";
 import cptBread from "@/views/dataBoard/renfang/cpts/bread";
+import cptLoading from "@/views/dataBoard/cpts/loading";
+import Title from "@/views/dataBoard/satisfactionEval/components/Title";
+import Jdjs from "@/views/dataBoard/overview/components/jdjs.vue";
+import Jdtphx from "@/views/dataBoard/overview/components/jdtphx.vue";
+import mapTop from "@/views/dataBoard/overview/components/map-top.vue";
+import jdwgy from "@/views/dataBoard/overview/components/jdwgy.vue";
+import rfsjtj from "@/views/dataBoard/overview/components/rfsjtj.vue";
+import sqrfph from "@/views/dataBoard/overview/components/sqrfph.vue";
+import sq12345 from "@/views/dataBoard/overview/components/sq12345.vue";
+import { requestPostBi } from "@/js/dai/request-bipass";
+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: "--",
+  };
+}
+
 export default {
+  name: "renfang",
+
+  components: {
+    gridMap,
+    cptLoading,
+    cptBread,
+    Title,
+    Jdjs,
+    Jdtphx,
+    mapTop,
+    jdwgy,
+    rfsjtj,
+    sqrfph,
+    sq12345,
+  },
+
   data() {
     return {
-      breadList: [],
+      loading: false,
+      rfphDate: "2023-03",
+      orgData: {
+        children: [],
+      }, //当前组织对象
+      orgId: "",
+      orgLevel: "",
+      breadList: [
+        {
+          orgId: "",
+          orgLevel: "",
+          meta: { title: "人房总览3" },
+        },
+      ],
+
+      displayedResiId: "",
+      displayedHouseId: "",
     };
   },
-  components: {
-    cptBread,
+
+  mounted() {
+    const queryOrgId = getQueryPara("orgId");
+    const queryOrgLevel = getQueryPara("orgLevel");
+    this.init(queryOrgId, queryOrgLevel);
   },
-  computed: {},
+
+  watch: {},
+
   methods: {
-    clickBreadItem(item) {},
+    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.getPerInfo();
+
+      this.loading = true;
+    },
+
+    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 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"></style>
+<style
+  lang="scss"
+  src="@/assets/scss/dataBoard/overview/index.scss"
+  scoped
+></style>
diff --git a/src/views/dataBoard/overview/linshi/jiedaotu.jpg b/src/views/dataBoard/overview/linshi/jiedaotu.jpg
new file mode 100644
index 000000000..266cee549
Binary files /dev/null and b/src/views/dataBoard/overview/linshi/jiedaotu.jpg differ