diff --git a/src/assets/scss/dataBoard/renfang/index.scss b/src/assets/scss/dataBoard/renfang/index.scss
index 57885d21e..8bcc6e1f0 100644
--- a/src/assets/scss/dataBoard/renfang/index.scss
+++ b/src/assets/scss/dataBoard/renfang/index.scss
@@ -1,445 +1,659 @@
-@import "../../c/config";
-@import "../../c/function";
-@import "../c/common";
+@import '../../c/config';
+@import '../../c/function';
+@import '../c/common';
 
 .g-row {
-    padding: 10px 6px;
-    display: flex;
-    justify-content: space-between;
-
-    .g-left {
-        width: 480px;
-    }
-    .g-center {
-        position: relative;
-        width: 820px;
-    }
-    .g-right {
-        width: 480px;
-    }
+	padding: 10px 6px;
+	display: flex;
+	justify-content: space-between;
+
+	.g-left {
+		width: 480px;
+	}
+	.g-center {
+		position: relative;
+		width: 820px;
+	}
+	.g-right {
+		width: 480px;
+	}
 }
 
 .m-map {
-    position: relative;
-    width: 100%;
-    height: 650px;
-    margin-bottom: 10px;
+	position: relative;
+	width: 100%;
+	height: 650px;
+	margin-bottom: 10px;
 }
 
 .m-search {
-    position: absolute;
-    z-index: 70;
-    top: 560px;
-    left: 0;
-    width: 100%;
-    background-color: transparent;
-    .btn {
-        position: relative;
-        width: 213px;
-        height: 80px;
-        cursor: pointer;
-        opacity: 0.8;
-
-        > span {
-            position: absolute;
-            top: 0;
-            right: 27px;
-            display: block;
-            line-height: 83px;
-            text-align: right;
-            font-size: 16px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #6fdeff;
-        }
-        > img {
-            display: block;
-            width: 213px;
-            &.btn-bg-hover {
-                display: none;
-            }
-        }
-        &:hover {
-            opacity: 1;
-            > img {
-                .btn-bg {
-                    display: none;
-                }
-
-                .btn-bg-hover {
-                    display: block;
-                }
-            }
-        }
-    }
-
-    .card {
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 71;
-        width: 100%;
-        height: 386px;
-        background: #00023a;
-        box-shadow: inset 0px 0px 40px 0px rgba(26, 149, 255, 0.45);
-        border-radius: 4px;
-        border: 1px solid #1a95ff;
-
-        .card-input {
-            display: flex;
-            padding: 10px;
-            align-items: center;
-
-            .i-div {
-                margin-left: auto;
-                margin-right: 10px;
-                width: 1px;
-                height: 12px;
-                background: rgba(255, 255, 255, 0.45);
-                border-radius: 1px;
-            }
-
-            input {
-                line-height: 40px;
-                height: 40px;
-                width: 600px;
-                font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: rgba(255, 255, 255, 0.85);
-                line-height: 22px;
-                background: transparent;
-                border: none;
-                &::placeholder {
-                    color: rgba(255, 255, 255, 0.65);
-                }
-            }
-
-            .card-btn {
-                padding: 10px;
-                cursor: pointer;
-                img {
-                    display: block;
-                    width: 16px;
-                }
-            }
-        }
-
-        .card-show {
-            .card-tabs {
-                border-top: 1px solid rgba(26, 149, 255, 0.45);
-                border-bottom: 1px solid rgba(26, 149, 255, 0.45);
-                line-height: 48px;
-                font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: #ffffff;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-
-                > div {
-                    padding: 0 17px;
-
-                    &.z-on,
-                    &:hover {
-                        color: #1a95ff;
-                    }
-                }
-            }
-
-            .card-empty {
-                > img {
-                    display: block;
-                    width: 120px;
-                    margin: 0 auto;
-                    margin-top: 80px;
-                }
-                > span {
-                    margin-top: 8px;
-                    display: block;
-                    font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: rgba(255, 255, 255, 0.65);
-                    line-height: 20px;
-                    text-align: center;
-                }
-            }
-
-            .card-list {
-                margin: 24px 16px;
-                height: 230px;
-                overflow-y: auto;
-                @include scrollBar;
-                .card-item {
-                    display: flex;
-                    align-items: center;
-                    padding: 0 24px;
-                    width: 100%;
-                    height: 40px;
-                    line-height: 40px;
-                    background: rgba(26, 149, 255, 0.15);
-                    font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    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;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
+	position: absolute;
+	z-index: 70;
+	top: 560px;
+	left: 0;
+	width: 100%;
+	background-color: transparent;
+	.btn {
+		position: relative;
+		width: 213px;
+		height: 80px;
+		cursor: pointer;
+		opacity: 0.8;
+
+		> span {
+			position: absolute;
+			top: 0;
+			right: 27px;
+			display: block;
+			line-height: 83px;
+			text-align: right;
+			font-size: 16px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #6fdeff;
+		}
+		> img {
+			display: block;
+			width: 213px;
+			&.btn-bg-hover {
+				display: none;
+			}
+		}
+		&:hover {
+			opacity: 1;
+			> img {
+				.btn-bg {
+					display: none;
+				}
+
+				.btn-bg-hover {
+					display: block;
+				}
+			}
+		}
+	}
+
+	.card {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 71;
+		width: 100%;
+		height: 386px;
+		background: #00023a;
+		box-shadow: inset 0px 0px 40px 0px rgba(26, 149, 255, 0.45);
+		border-radius: 4px;
+		border: 1px solid #1a95ff;
+
+		.card-input {
+			display: flex;
+			padding: 10px;
+			align-items: center;
+
+			.i-div {
+				margin-left: auto;
+				margin-right: 10px;
+				width: 1px;
+				height: 12px;
+				background: rgba(255, 255, 255, 0.45);
+				border-radius: 1px;
+			}
+
+			input {
+				line-height: 40px;
+				height: 40px;
+				width: 600px;
+				font-size: 16px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: rgba(255, 255, 255, 0.85);
+				line-height: 22px;
+				background: transparent;
+				border: none;
+				&::placeholder {
+					color: rgba(255, 255, 255, 0.65);
+				}
+			}
+
+			.card-btn {
+				padding: 10px;
+				cursor: pointer;
+				img {
+					display: block;
+					width: 16px;
+				}
+			}
+		}
+
+		.card-show {
+			.card-tabs {
+				border-top: 1px solid rgba(26, 149, 255, 0.45);
+				border-bottom: 1px solid rgba(26, 149, 255, 0.45);
+				line-height: 48px;
+				font-size: 16px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #ffffff;
+				cursor: pointer;
+				display: flex;
+				align-items: center;
+
+				> div {
+					padding: 0 17px;
+
+					&.z-on,
+					&:hover {
+						color: #1a95ff;
+					}
+				}
+			}
+
+			.card-empty {
+				> img {
+					display: block;
+					width: 120px;
+					margin: 0 auto;
+					margin-top: 80px;
+				}
+				> span {
+					margin-top: 8px;
+					display: block;
+					font-size: 14px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: rgba(255, 255, 255, 0.65);
+					line-height: 20px;
+					text-align: center;
+				}
+			}
+
+			.card-list {
+				margin: 24px 16px;
+				height: 230px;
+				overflow-y: auto;
+				@include scrollBar;
+				.card-item {
+					display: flex;
+					align-items: center;
+					padding: 0 24px;
+					width: 100%;
+					height: 40px;
+					line-height: 40px;
+					background: rgba(26, 149, 255, 0.15);
+					font-size: 14px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					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;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
 }
 
 .m-box {
-    .box-title {
-        position: relative;
-        width: 100%;
-        height: 56px;
-        &-bg {
-            position: absolute;
-            top: 0;
-            left: 0;
-            z-index: 0;
-            right: 0;
-            bottom: 0;
-            height: 56px;
-            height: 100%;
-        }
-        &-txt {
-            position: relative;
-            display: block;
-            padding-top: 8px;
-            padding-left: 24px;
-            font-size: 20px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #ffffff;
-            line-height: 48px;
-        }
-        &-btn {
-            position: absolute;
-            z-index: 1;
-            top: 6px;
-            right: 24px;
-            display: flex;
-            align-items: center;
-            line-height: 48px;
-            font-size: 16px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #6fdeff;
-            cursor: pointer;
-            img {
-                width: 16px;
-                height: 16px;
-                margin: 0 8px;
-            }
-        }
-    }
-
-    .empty {
-        > img {
-            display: block;
-            width: 120px;
-            margin: 0 auto;
-            margin-top: 80px;
-        }
-        > span {
-            margin-top: 8px;
-            display: block;
-            font-size: 14px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: rgba(255, 255, 255, 0.65);
-            line-height: 20px;
-            text-align: center;
-        }
-    }
+	.box-title {
+		position: relative;
+		width: 100%;
+		height: 56px;
+		&-bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 0;
+			right: 0;
+			bottom: 0;
+			height: 56px;
+			height: 100%;
+		}
+		&-txt {
+			position: relative;
+			display: block;
+			padding-top: 8px;
+			padding-left: 24px;
+			font-size: 20px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: 500;
+			color: #ffffff;
+			line-height: 48px;
+		}
+		&-btn {
+			position: absolute;
+			z-index: 1;
+			top: 6px;
+			right: 24px;
+			display: flex;
+			align-items: center;
+			line-height: 48px;
+			font-size: 16px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: 500;
+			color: #6fdeff;
+			cursor: pointer;
+			img {
+				width: 16px;
+				height: 16px;
+				margin: 0 8px;
+			}
+		}
+	}
+
+	.empty {
+		> img {
+			display: block;
+			width: 120px;
+			margin: 0 auto;
+			margin-top: 80px;
+		}
+		> span {
+			margin-top: 8px;
+			display: block;
+			font-size: 14px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: rgba(255, 255, 255, 0.65);
+			line-height: 20px;
+			text-align: center;
+		}
+	}
 }
 
 .m-subbox {
-    @include scrollBar;
-    height: 423px;
-    overflow-y: auto;
+	@include scrollBar;
+	height: 423px;
+	overflow-y: auto;
 }
 .m-szsq {
-    height: 115px;
+	height: 115px;
 }
 .m-rkyj {
-    height: 423px;
-    &.z-shrink {
-        height: 253px;
-    }
+	height: 423px;
+	&.z-shrink {
+		height: 253px;
+	}
 }
 
 .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;
-            }
-        }
-    }
+	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-cate {
-    .list {
-        @include scrollBar;
-        padding-right: 5px;
-        height: 245px;
-        overflow-y: auto;
-
-        .item {
-            margin-top: 30px;
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: rgba(255, 255, 255, 0.85);
-            line-height: 24px;
-            cursor: pointer;
-
-            &:hover {
-                color: #fff;
-
-                .item-progress {
-                    b::after {
-                        transition: background-position 1.3s;
-                        background-position: -100% -100%;
-                    }
-                }
-            }
-
-            .item-name {
-                margin-left: 5px;
-                width: 80px;
-                flex-shrink: 0;
-            }
-
-            .item-div {
-                width: 1px;
-                height: 12px;
-                background: #d8d8d8;
-                border-radius: 1px;
-            }
-
-            .item-count {
-                margin-left: 20px;
-                width: 80px;
-                flex-shrink: 0;
-                b {
-                    font-size: 20px;
-                    font-weight: bold;
-                }
-            }
-
-            .item-per {
-                display: flex;
-                width: 160px;
-                align-items: center;
-
-                b {
-                    font-size: 20px;
-                    font-weight: bold;
-                }
-
-                img {
-                    margin-left: 18px;
-                    margin-right: 6px;
-                    width: 16px;
-                    height: 16px;
-                }
-            }
-
-            .item-progress {
-                margin-right: 15px;
-                width: 416px;
-                height: 16px;
-                background: rgba(111, 222, 255, 0.15);
-                border-radius: 1px;
-                overflow: hidden;
-                b {
-                    position: relative;
-                    display: block;
-                    height: 16px;
-                    background: linear-gradient(270deg, #6fdeff 0%, rgba(111, 222, 255, 0.1) 100%);
-
-                    &::after {
-                        content: "";
-                        position: absolute;
-                        left: 0;
-                        top: 0;
-                        right: 0;
-                        bottom: 0;
-                        background: linear-gradient(
-                                -45deg,
-                                transparent 40%,
-                                transparent,
-                                rgba(255, 255, 255, 0.5),
-                                transparent 60%
-                            )
-                            no-repeat;
-                        background-size: 200% 200%;
-                        background-position: 200% 200%;
-                    }
-                }
-            }
-        }
-    }
+	.list {
+		@include scrollBar;
+		padding-right: 5px;
+		height: 245px;
+		overflow-y: auto;
+
+		.item {
+			margin-top: 30px;
+			display: flex;
+			align-items: center;
+			font-size: 14px;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: 500;
+			color: rgba(255, 255, 255, 0.85);
+			line-height: 24px;
+			cursor: pointer;
+
+			&:hover {
+				color: #fff;
+
+				.item-progress {
+					b::after {
+						transition: background-position 1.3s;
+						background-position: -100% -100%;
+					}
+				}
+			}
+
+			.item-name {
+				margin-left: 5px;
+				width: 80px;
+				flex-shrink: 0;
+			}
+
+			.item-div {
+				width: 1px;
+				height: 12px;
+				background: #d8d8d8;
+				border-radius: 1px;
+			}
+
+			.item-count {
+				margin-left: 20px;
+				width: 80px;
+				flex-shrink: 0;
+				b {
+					font-size: 20px;
+					font-weight: bold;
+				}
+			}
+
+			.item-per {
+				display: flex;
+				width: 160px;
+				align-items: center;
+
+				b {
+					font-size: 20px;
+					font-weight: bold;
+				}
+
+				img {
+					margin-left: 18px;
+					margin-right: 6px;
+					width: 16px;
+					height: 16px;
+				}
+			}
+
+			.item-progress {
+				margin-right: 15px;
+				width: 416px;
+				height: 16px;
+				background: rgba(111, 222, 255, 0.15);
+				border-radius: 1px;
+				overflow: hidden;
+				b {
+					position: relative;
+					display: block;
+					height: 16px;
+					background: linear-gradient(270deg, #6fdeff 0%, rgba(111, 222, 255, 0.1) 100%);
+
+					&::after {
+						content: '';
+						position: absolute;
+						left: 0;
+						top: 0;
+						right: 0;
+						bottom: 0;
+						background: linear-gradient(-45deg, transparent 40%, transparent, rgba(255, 255, 255, 0.5), transparent 60%) no-repeat;
+						background-size: 200% 200%;
+						background-position: 200% 200%;
+					}
+				}
+			}
+		}
+	}
+}
+.linecharts {
+	@include scrollBar;
+	padding-right: 5px;
+	height: 245px;
+	overflow-y: auto;
+
+	.item {
+		margin-top: 30px;
+		display: flex;
+		align-items: center;
+		font-size: 14px;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: rgba(255, 255, 255, 0.85);
+		line-height: 24px;
+		cursor: pointer;
+
+		&:hover {
+			color: #fff;
+
+			.item-progress {
+				b::after {
+					transition: background-position 1.3s;
+					background-position: -100% -100%;
+				}
+			}
+		}
+
+		.item-name {
+			margin-left: 5px;
+			width: 80px;
+			flex-shrink: 0;
+		}
+
+		.item-div {
+			width: 1px;
+			height: 12px;
+			background: #d8d8d8;
+			border-radius: 1px;
+		}
+
+		.item-count {
+			margin-left: 20px;
+			width: 80px;
+			flex-shrink: 0;
+			b {
+				font-size: 20px;
+				font-weight: bold;
+			}
+		}
+
+		.item-per {
+			display: flex;
+			width: 160px;
+			align-items: center;
+
+			b {
+				font-size: 20px;
+				font-weight: bold;
+			}
+
+			img {
+				margin-left: 18px;
+				margin-right: 6px;
+				width: 16px;
+				height: 16px;
+			}
+		}
+
+		.item-progress {
+			margin-right: 15px;
+			width: 416px;
+			height: 16px;
+			background: rgba(111, 222, 255, 0.15);
+			border-radius: 1px;
+			overflow: hidden;
+			b {
+				position: relative;
+				display: block;
+				height: 16px;
+				background: linear-gradient(270deg, #6fdeff 0%, rgba(111, 222, 255, 0.1) 100%);
+
+				&::after {
+					content: '';
+					position: absolute;
+					left: 0;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					background: linear-gradient(-45deg, transparent 40%, transparent, rgba(255, 255, 255, 0.5), transparent 60%) no-repeat;
+					background-size: 200% 200%;
+					background-position: 200% 200%;
+				}
+			}
+		}
+	}
+}
+.tablist {
+	margin-top: 8px;
+	display: flex;
+	flex-wrap: wrap;
+
+	.item {
+		margin-top: 8px;
+		background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png);
+		background-size: cover;
+		flex: 0 0 117px;
+		height: 32px;
+		margin-right: 2px;
+		text-align: center;
+		align-items: center;
+		font-size: 14px;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #ffffff;
+		line-height: 32px;
+		cursor: pointer;
+	}
+
+	.item-sel {
+		background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png);
+		background-size: cover;
+	}
+}
+.pieMain {
+	display: flex;
+	justify-content: space-between;
+	margin-left: 25px;
+	.legend {
+		margin-top: 40px;
+		.legend-row {
+			margin-top: 15px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			&:nth-child(1) .name::before {
+				background: #1a95ff;
+			}
+
+			&:nth-child(2) .name::before {
+				background: #ff6138;
+			}
+
+			&:nth-child(3) .name::before {
+				background: #2adcea;
+			}
+
+			&:nth-child(4) .name::before {
+				background: #2cc4ad;
+			}
+
+			&:nth-child(5) .name::before {
+				background: #7377f5;
+			}
+
+			&:nth-child(6) .name::before {
+				background: #32de66;
+			}
+
+			&:nth-child(7) .name::before {
+				background: #8155d4;
+			}
+
+			&:nth-child(8) .name::before {
+				background: #c7ea48;
+			}
+
+			&:nth-child(9) .name::before {
+				background: #ef47c2;
+			}
+
+			&:nth-child(10) .name::before {
+				background: #d43349;
+			}
+
+			.name {
+				position: relative;
+				margin-left: 5px;
+				font-size: 12px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: rgba(255, 255, 255, 0.65);
+				line-height: 17px;
+
+				&::before {
+					content: '';
+					position: absolute;
+					top: 4px;
+					left: -15px;
+					width: 8px;
+					height: 8px;
+				}
+			}
+
+			.content {
+				margin-left: 24px;
+				display: flex;
+				align-items: flex-end;
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: 500;
+				color: #ffffff;
+			}
+
+			.num {
+				font-size: 20px;
+			}
+
+			.unit {
+				margin-left: 5px;
+				font-size: 14px;
+			}
+		}
+	}
+
+	.pie {
+		margin-top: 32px;
+		flex: 0 0 280px;
+		height: 270px;
+	}
 }
diff --git a/src/router/index.js b/src/router/index.js
index cda7f3a77..08e59b7f3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,48 +1,43 @@
 import Vue from "vue";
 import Router from "vue-router";
 import http from "@/utils/request";
-import { isURL } from "@/utils/validate";
+import {
+	isURL
+} from "@/utils/validate";
 import store from "@/js/store";
-
 Vue.use(Router);
-
 const CUSTOMER = process.env.VUE_APP_CUSTOMER;
 // 页面路由(独立页面)
-export const pageRoutes = [
-	{
-		path: "/login",
-		component: () => import("@/views/pages/login"),
-		name: "login",
-		meta: {
-			title: "登录",
-		},
+export const pageRoutes = [{
+	path: "/login",
+	component: () => import("@/views/pages/login"),
+	name: "login",
+	meta: {
+		title: "登录",
 	},
-	{
-		path: "/",
-		name: "index",
-		// component: () => import("@/views/pages/index"),
-		redirect: {
-			path: "/main/home",
-		},
+}, {
+	path: "/",
+	name: "index",
+	// component: () => import("@/views/pages/index"),
+	redirect: {
+		path: "/main/home",
 	},
-	{
-		path: "/404",
-		component: () => import("@/views/pages/404"),
-		name: "404",
-		meta: {
-			title: "404未找到",
-		},
-		beforeEnter(to, from, next) {
-			// 拦截处理特殊业务场景
-			// 如果, 重定向路由包含__双下划线, 为临时添加路由
-			if (/__.*/.test(to.redirectedFrom)) {
-				return next(to.redirectedFrom.replace(/__.*/, ""));
-			}
-			next();
-		},
+}, {
+	path: "/404",
+	component: () => import("@/views/pages/404"),
+	name: "404",
+	meta: {
+		title: "404未找到",
 	},
-];
-
+	beforeEnter(to, from, next) {
+		// 拦截处理特殊业务场景
+		// 如果, 重定向路由包含__双下划线, 为临时添加路由
+		if (/__.*/.test(to.redirectedFrom)) {
+			return next(to.redirectedFrom.replace(/__.*/, ""));
+		}
+		next();
+	},
+}, ];
 // 模块路由(基于主入口布局页面)
 export const moduleRoutes = {
 	path: "/main",
@@ -55,64 +50,55 @@ export const moduleRoutes = {
 		title: "主入口布局",
 		isTab: false,
 	},
-	children: [
-		{
-			path: "home",
-			component: () => import("@/views/modules/home/index"),
-			name: "home",
-			meta: {
-				title: "首页",
-				isTab: true,
-			},
+	children: [{
+		path: "home",
+		component: () => import("@/views/modules/home/index"),
+		name: "home",
+		meta: {
+			title: "首页",
+			isTab: true,
 		},
-		{
-			path: "unopen",
-			component: () => import("@/views/modules/unopen"),
-			name: "unopen",
-			meta: {
-				title: "未开放功能",
-				isTab: true,
-			},
+	}, {
+		path: "unopen",
+		component: () => import("@/views/modules/unopen"),
+		name: "unopen",
+		meta: {
+			title: "未开放功能",
+			isTab: true,
 		},
-		{
-			path: "404",
-			props: true,
-			component: () => import("@/views/modules/404"),
-			name: "main-404",
-			meta: {
-				title: "页面未找到或无权访问",
-				isTab: false,
-			},
+	}, {
+		path: "404",
+		props: true,
+		component: () => import("@/views/modules/404"),
+		name: "main-404",
+		meta: {
+			title: "页面未找到或无权访问",
+			isTab: false,
 		},
-		{
-			path: "home-notice",
-			props: true,
-			name: "home-notice",
-			component: () => import("@/views/modules/home/notice"),
-			meta: {
-				isTab: true,
-				title: "智能提醒",
-				parent: [
-					{
-						title: "首页",
-						path: "/main/home-index",
-					},
-				],
-			},
+	}, {
+		path: "home-notice",
+		props: true,
+		name: "home-notice",
+		component: () => import("@/views/modules/home/notice"),
+		meta: {
+			isTab: true,
+			title: "智能提醒",
+			parent: [{
+				title: "首页",
+				path: "/main/home-index",
+			}, ],
 		},
-		{
-			path: "shequ-chaxun",
-			props: true,
-			name: "shequ-chaxun",
-			component: () => import("@/views/modules/shequ/chaxun"),
-			meta: {
-				isTab: true,
-				title: "社区查询",
-			},
+	}, {
+		path: "shequ-chaxun",
+		props: true,
+		name: "shequ-chaxun",
+		component: () => import("@/views/modules/shequ/chaxun"),
+		meta: {
+			isTab: true,
+			title: "社区查询",
 		},
-	],
+	}, ],
 };
-
 // pc端菜单的 如果没有配置 默认的 或者配置了默认的 但没有权限 默认选中第一
 function cookApiDataItem(item) {
 	function n2one(v) {
@@ -127,12 +113,8 @@ function cookApiDataItem(item) {
 		// console.log("aaaa", ret);
 		return ret;
 	}
-
-	let allChildrenUrl = n2one(item.children)
-		.filter((i) => i.url != "" && i.showFlag == 1)
-		.map((i) => i.url);
+	let allChildrenUrl = n2one(item.children).filter((i) => i.url != "" && i.showFlag == 1).map((i) => i.url);
 	// console.log("))))))))))))", allChildrenUrl);
-
 	if (item.children.length > 0) {
 		if (item.url == "" || !allChildrenUrl.find((i) => i.url == item.url)) {
 			item.url = allChildrenUrl[0];
@@ -146,36 +128,30 @@ function cookApiDataItem(item) {
 }
 // 把按钮都化为页面内部的权限
 function cookApiDataItem2(item) {
-	let { children } = item;
+	let {
+		children
+	} = item;
 	if (children && Array.isArray(children) && children.length > 0) {
 		let btns = item.children.filter((item) => item.type == 1);
 		item.btns = btns;
-		item.children = item.children
-			.filter((val) => val.type == 0)
-			.map((val) => cookApiDataItem2(val));
+		item.children = item.children.filter((val) => val.type == 0).map((val) => cookApiDataItem2(val));
 	}
 	return item;
 }
 // 把父级拼到子集
 function cookApiDataItem3(item, parent = []) {
 	item.parent = parent;
-	let { children } = item;
+	let {
+		children
+	} = item;
 	if (children && Array.isArray(children) && children.length > 0) {
-		item.children = children.map((val) =>
-			cookApiDataItem3(val, [
-				...parent,
-				{
-					title: item.name || "",
-					path: (item.url || "").replace(/{{([^}}]+)?}}/g, (s1, s2) =>
-						eval(s2)
-					),
-				},
-			])
-		);
+		item.children = children.map((val) => cookApiDataItem3(val, [...parent, {
+			title: item.name || "",
+			path: (item.url || "").replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)),
+		}, ]));
 	}
 	return item;
 }
-
 // 新数据模块
 export const dataBoardRoutes = {
 	path: "/dataBoard",
@@ -187,98 +163,97 @@ export const dataBoardRoutes = {
 	meta: {
 		title: "主入口布局",
 	},
-	children: [
-		{
-			path: "renfang/index",
-			props: true,
-			component: () => import("@/views/dataBoard/renfang/index"),
-			name: "dataBoard-renfang-index",
-			meta: {
-				title: "人房总览",
-				isTab: false,
-			},
+	children: [{
+		path: "renfang/index",
+		props: true,
+		component: () => import("@/views/dataBoard/renfang/index"),
+		name: "dataBoard-renfang-index",
+		meta: {
+			title: "人房总览",
+			isTab: false,
 		},
-		{
-			path: "renfang/resi-list",
-			props: true,
-			component: () => import("@/views/dataBoard/renfang/resi/list"),
-			name: "dataBoard-renfang-resi-list",
-			meta: {
-				title: "居民列表",
-				isTab: false,
-			},
+	}, {
+		path: "renfang/resi-list",
+		props: true,
+		component: () => import("@/views/dataBoard/renfang/resi/list"),
+		name: "dataBoard-renfang-resi-list",
+		meta: {
+			title: "居民列表",
+			isTab: false,
 		},
-		{
-			path: "renfang/resi-class",
-			props: true,
-			component: () => import("@/views/dataBoard/renfang/resi/class"),
-			name: "dataBoard-renfang-resi-class",
-			meta: {
-				title: "居民分类列表",
-				isTab: false,
-			},
+	}, {
+		path: "renfang/resi-class",
+		props: true,
+		component: () => import("@/views/dataBoard/renfang/resi/class"),
+		name: "dataBoard-renfang-resi-class",
+		meta: {
+			title: "居民分类列表",
+			isTab: false,
 		},
-		{
-			path: "renfang/resi-analyze",
-			props: true,
-			component: () => import("@/views/dataBoard/renfang/resi/analyze"),
-			name: "dataBoard-renfang-resi-analyze",
-			meta: {
-				title: "居民分析列表",
-				isTab: false,
-			},
+	}, {
+		path: "renfang/resi-analyze",
+		props: true,
+		component: () => import("@/views/dataBoard/renfang/resi/analyze"),
+		name: "dataBoard-renfang-resi-analyze",
+		meta: {
+			title: "居民分析列表",
+			isTab: false,
 		},
-		{
-			path: "renfang/house-list",
-			props: true,
-			component: () => import("@/views/dataBoard/renfang/house/list"),
-			name: "dataBoard-renfang-house-list",
-			meta: {
-				title: "房屋列表",
-				isTab: false,
-			},
+	}, {
+		path: "renfang/house-list",
+		props: true,
+		component: () => import("@/views/dataBoard/renfang/house/list"),
+		name: "dataBoard-renfang-house-list",
+		meta: {
+			title: "房屋列表",
+			isTab: false,
 		},
-		{
-			path: "renfang/warn-building",
-			props: true,
-			component: () => import("@/views/dataBoard/renfang/warn/building"),
-			name: "dataBoard-renfang-warn-building",
-			meta: {
-				title: "预警楼栋列表",
-				isTab: false,
-			},
+	}, {
+		path: "renfang/warn-building",
+		props: true,
+		component: () => import("@/views/dataBoard/renfang/warn/building"),
+		name: "dataBoard-renfang-warn-building",
+		meta: {
+			title: "预警楼栋列表",
+			isTab: false,
 		},
-		{
-			path: "renfang/warn-resi",
-			props: true,
-			component: () => import("@/views/dataBoard/renfang/warn/resi"),
-			name: "dataBoard-renfang-warn-resi",
-			meta: {
-				title: "预警楼栋居民",
-				isTab: false,
-			},
+	}, {
+		path: "renfang/warn-resi",
+		props: true,
+		component: () => import("@/views/dataBoard/renfang/warn/resi"),
+		name: "dataBoard-renfang-warn-resi",
+		meta: {
+			title: "预警楼栋居民",
+			isTab: false,
 		},
-		{
-			path: "404",
-			props: true,
-			component: () => import("@/views/dataBoard/404"),
-			name: "dataBoard-404",
-			meta: {
-				title: "页面未找到或无权访问",
-				isTab: false,
-			},
-			beforeEnter(to, from, next) {
-				// 拦截处理特殊业务场景
-				// 如果, 重定向路由包含__双下划线, 为临时添加路由
-				if (/__.*/.test(to.redirectedFrom)) {
-					return next(to.redirectedFrom.replace(/__.*/, ""));
-				}
-				next();
-			},
+	}, {
+		path: "sida/index",
+		props: true,
+		component: () => import("@/views/dataBoard/sida/index"),
+		name: "dataBoard-sida-index",
+		meta: {
+			title: "四大清单",
+			isTab: false,
 		},
-	],
+	}, {
+		path: "404",
+		props: true,
+		component: () => import("@/views/dataBoard/404"),
+		name: "dataBoard-404",
+		meta: {
+			title: "页面未找到或无权访问",
+			isTab: false,
+		},
+		beforeEnter(to, from, next) {
+			// 拦截处理特殊业务场景
+			// 如果, 重定向路由包含__双下划线, 为临时添加路由
+			if (/__.*/.test(to.redirectedFrom)) {
+				return next(to.redirectedFrom.replace(/__.*/, ""));
+			}
+			next();
+		},
+	}, ],
 };
-
 // 模块路由(基于主入口布局页面) 可视化数据
 export const moduleShujuRoutes = {
 	path: "/main-shuju",
@@ -290,47 +265,40 @@ export const moduleShujuRoutes = {
 	meta: {
 		title: "主入口布局",
 	},
-	children: [
-		{
-			path: "/main-shuju/visual-basicinfo-people/:uid",
-			props: true,
-			component: () => import("@/views/modules/visual/basicinfo/people"),
-			name: "visual-basicinfo-people",
-			meta: {
-				title: "个人详情",
-				isTab: false,
-			},
+	children: [{
+		path: "/main-shuju/visual-basicinfo-people/:uid",
+		props: true,
+		component: () => import("@/views/modules/visual/basicinfo/people"),
+		name: "visual-basicinfo-people",
+		meta: {
+			title: "个人详情",
+			isTab: false,
 		},
-		{
-			path: "/main-shuju/visual-basicinfo-people-list",
-			props: true,
-			component: () =>
-				import("@/views/modules/visual/basicinfo/peopleList"),
-			name: "visual-basicinfo-people-list",
-			meta: {
-				title: "人员列表",
-				isTab: false,
-			},
+	}, {
+		path: "/main-shuju/visual-basicinfo-people-list",
+		props: true,
+		component: () => import("@/views/modules/visual/basicinfo/peopleList"),
+		name: "visual-basicinfo-people-list",
+		meta: {
+			title: "人员列表",
+			isTab: false,
 		},
-		{
-			path: "404",
-			props: true,
-			component: () => import("@/views/modules/visual/404"),
-			name: "main-shuju-404",
-			meta: {
-				title: "页面未找到或无权访问",
-				isTab: false,
-			},
+	}, {
+		path: "404",
+		props: true,
+		component: () => import("@/views/modules/visual/404"),
+		name: "main-shuju-404",
+		meta: {
+			title: "页面未找到或无权访问",
+			isTab: false,
 		},
-	],
+	}, ],
 };
-
 export function addDynamicRoute(routeParams, router) {
 	// 组装路由名称, 并判断是否已添加, 如是: 则直接跳转
 	var routeName = routeParams.routeName;
 	var dynamicRoute = window.SITE_CONFIG["dynamicRoutes"].filter(
-		(item) => item.name === routeName
-	)[0];
+		(item) => item.name === routeName)[0];
 	if (dynamicRoute) {
 		return router.push({
 			name: routeName,
@@ -348,20 +316,17 @@ export function addDynamicRoute(routeParams, router) {
 			title: `${routeParams.title}`,
 		},
 	};
-	router.addRoutes([
-		{
-			...moduleRoutes,
-			name: `main-dynamic__${dynamicRoute.name}`,
-			children: [dynamicRoute],
-		},
-	]);
+	router.addRoutes([{
+		...moduleRoutes,
+		name: `main-dynamic__${dynamicRoute.name}`,
+		children: [dynamicRoute],
+	}, ]);
 	window.SITE_CONFIG["dynamicRoutes"].push(dynamicRoute);
 	router.push({
 		name: dynamicRoute.name,
 		params: routeParams.params,
 	});
 }
-
 const router = new Router({
 	mode: "hash",
 	scrollBehavior: () => ({
@@ -369,76 +334,64 @@ const router = new Router({
 	}),
 	routes: pageRoutes.concat(moduleRoutes, moduleShujuRoutes, dataBoardRoutes),
 });
-
 router.beforeEach((to, from, next) => {
 	// 添加动态(菜单)路由
 	// 已添加或者当前路由为页面路由, 可直接访问
 	if (to.name === "caiji") {
 		return next();
 	}
-	if (
-		window.SITE_CONFIG["dynamicMenuRoutesHasAdded"] ||
-		fnCurrentRouteIsPageRoute(to, pageRoutes)
-	) {
+	if (window.SITE_CONFIG["dynamicMenuRoutesHasAdded"] || fnCurrentRouteIsPageRoute(to, pageRoutes)) {
 		return next();
 	}
-
 	const customerId = localStorage.getItem("customerId");
 	console.log("customerId：", customerId);
-
-	http.get("gov/access/menu/navDigitalCommunity?tableName=data_menu")
-		.then(({ data: res }) => {
-			if (res.code == 10005 || res.code == 10006 || res.code == 10007) {
-				// 10005 token为空  10006登陆超时 10007别处登录
-				console.log("登录失效");
-				Vue.prototype.$message.error(res.msg);
-				return next({
-					name: "login",
-				});
-			}
-
-			window.SITE_CONFIG["menuShujuList"] = res.data;
-			fnAddDynamicMenuRoutes2(window.SITE_CONFIG["menuShujuList"]);
-
-			next({
-				...to,
-				replace: true,
-			});
-		})
-		.catch(() => {
-			next({
+	http.get("gov/access/menu/navDigitalCommunity?tableName=data_menu").then(({
+		data: res
+	}) => {
+		if (res.code == 10005 || res.code == 10006 || res.code == 10007) {
+			// 10005 token为空  10006登陆超时 10007别处登录
+			console.log("登录失效");
+			Vue.prototype.$message.error(res.msg);
+			return next({
 				name: "login",
 			});
+		}
+		window.SITE_CONFIG["menuShujuList"] = res.data;
+		fnAddDynamicMenuRoutes2(window.SITE_CONFIG["menuShujuList"]);
+		next({
+			...to,
+			replace: true,
 		});
-
-	http.get("gov/access/menu/navDigitalCommunity")
-		.then(({ data: res }) => {
-			if (res.code == 10005 || res.code == 10006 || res.code == 10007) {
-				// 10005 token为空  10006登陆超时 10007别处登录
-				console.log("登录失效");
-				Vue.prototype.$message.error(res.msg);
-				return next({
-					name: "login",
-				});
-			}
-			window.SITE_CONFIG["menuList"] = res.data
-				.map((item) => cookApiDataItem3(item))
-				.map((item) => cookApiDataItem2(item))
-				.map((item) => cookApiDataItem(item));
-			fnAddDynamicMenuRoutes(window.SITE_CONFIG["menuList"]);
-			// next({ ...to, replace: true })
-			next({
-				...to,
-				replace: true,
+	}).catch(() => {
+		next({
+			name: "login",
+		});
+	});
+	http.get("gov/access/menu/navDigitalCommunity").then(({
+		data: res
+	}) => {
+		if (res.code == 10005 || res.code == 10006 || res.code == 10007) {
+			// 10005 token为空  10006登陆超时 10007别处登录
+			console.log("登录失效");
+			Vue.prototype.$message.error(res.msg);
+			return next({
+				name: "login",
 			});
-		})
-		.catch(() => {
-			// next({
-			//   name: "login",
-			// });
+		}
+		window.SITE_CONFIG["menuList"] = res.data.map((item) => cookApiDataItem3(item)).map((item) =>
+			cookApiDataItem2(item)).map((item) => cookApiDataItem(item));
+		fnAddDynamicMenuRoutes(window.SITE_CONFIG["menuList"]);
+		// next({ ...to, replace: true })
+		next({
+			...to,
+			replace: true,
 		});
+	}).catch(() => {
+		// next({
+		//   name: "login",
+		// });
+	});
 });
-
 /**
  * 判断当前路由是否为页面路由
  * @param {*} route 当前路由
@@ -456,7 +409,6 @@ function fnCurrentRouteIsPageRoute(route, pageRoutes = []) {
 	}
 	return temp.length >= 1 ? fnCurrentRouteIsPageRoute(route, temp) : false;
 }
-
 /**
  * 添加动态(菜单)路由
  * @param {*} menuList 菜单列表
@@ -483,14 +435,11 @@ function fnAddDynamicMenuRoutes(menuList = [], routes = []) {
 			},
 		};
 		// eslint-disable-next-line
-		let URL = (menuList[i].url || "").replace(/{{([^}}]+)?}}/g, (s1, s2) =>
-			eval(s2)
-		); // URL支持{{ window.xxx }}占位符变量
+		let URL = (menuList[i].url || "").replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)); // URL支持{{ window.xxx }}占位符变量
 		if (isURL(URL)) {
 			if (menuList[i].children && menuList[i].children.length >= 1) {
 				let item = menuList[i].children.find(
-					(subMenu) => subMenu.url == menuList[i].url
-				);
+					(subMenu) => subMenu.url == menuList[i].url);
 				if (item) {
 					route["path"] = route["name"] = `i-${menuList[i].id}`;
 					route["redirect"] = `i-${item.id}`;
@@ -507,10 +456,7 @@ function fnAddDynamicMenuRoutes(menuList = [], routes = []) {
 			if (URL.startsWith("unopen")) {
 				route["path"] = route["name"] = URL.replace(/\//g, "-");
 				route["component"] = () => import(`@/views/modules/unopen`);
-			} else if (
-				menuList[i].children &&
-				menuList[i].children.length >= 1
-			) {
+			} else if (menuList[i].children && menuList[i].children.length >= 1) {
 				route["path"] = route["name"] = URL;
 				route["redirect"] = URL.replace(/\//g, "-");
 			} else {
@@ -525,19 +471,16 @@ function fnAddDynamicMenuRoutes(menuList = [], routes = []) {
 	}
 	// routers.reverse();
 	// 添加路由
-	router.addRoutes([
-		{
-			...moduleRoutes,
-			name: "main-dynamic-menu",
-			children: routes,
-		},
-		{
-			path: "/main/*",
-			redirect: {
-				path: "/main/404",
-			},
+	router.addRoutes([{
+		...moduleRoutes,
+		name: "main-dynamic-menu",
+		children: routes,
+	}, {
+		path: "/main/*",
+		redirect: {
+			path: "/main/404",
 		},
-	]);
+	}, ]);
 	window.SITE_CONFIG["dynamicMenuRoutes"] = routes;
 	window.SITE_CONFIG["dynamicMenuRoutesHasAdded"] = true;
 }
@@ -561,14 +504,11 @@ function fnAddDynamicMenuRoutes2(menuList = [], routes = []) {
 			},
 		};
 		// eslint-disable-next-line
-		let URL = (menuList[i].url || "").replace(/{{([^}}]+)?}}/g, (s1, s2) =>
-			eval(s2)
-		); // URL支持{{ window.xxx }}占位符变量
+		let URL = (menuList[i].url || "").replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)); // URL支持{{ window.xxx }}占位符变量
 		if (isURL(URL)) {
 			if (menuList[i].children && menuList[i].children.length >= 1) {
 				let item = menuList[i].children.find(
-					(subMenu) => subMenu.url == menuList[i].url
-				);
+					(subMenu) => subMenu.url == menuList[i].url);
 				if (item) {
 					route["path"] = route["name"] = `i-${menuList[i].id}`;
 					route["redirect"] = `i-${item.id}`;
@@ -585,10 +525,7 @@ function fnAddDynamicMenuRoutes2(menuList = [], routes = []) {
 			if (URL.startsWith("unopen")) {
 				route["path"] = route["name"] = URL.replace(/\//g, "-");
 				route["component"] = () => import(`@/views/modules/unopen`);
-			} else if (
-				menuList[i].children &&
-				menuList[i].children.length >= 1
-			) {
+			} else if (menuList[i].children && menuList[i].children.length >= 1) {
 				route["path"] = route["name"] = URL;
 				route["redirect"] = URL.replace(/\//g, "-");
 			} else {
@@ -602,21 +539,17 @@ function fnAddDynamicMenuRoutes2(menuList = [], routes = []) {
 		return fnAddDynamicMenuRoutes2(temp, routes);
 	}
 	// 添加路由
-	router.addRoutes([
-		{
-			...moduleShujuRoutes,
-			name: "main-dynamic-menu-shuju",
-			children: routes,
-		},
-		{
-			path: "/main-shuju/*",
-			redirect: {
-				path: "/main-shuju/404",
-			},
+	router.addRoutes([{
+		...moduleShujuRoutes,
+		name: "main-dynamic-menu-shuju",
+		children: routes,
+	}, {
+		path: "/main-shuju/*",
+		redirect: {
+			path: "/main-shuju/404",
 		},
-	]);
+	}, ]);
 	window.SITE_CONFIG["dynamicMenuRoutesShuju"] = routes;
 	window.SITE_CONFIG["dynamicMenuRoutesShujuHasAdded"] = true;
 }
-
 export default router;
diff --git a/src/views/dataBoard/renfang/cpts/bread.vue b/src/views/dataBoard/renfang/cpts/bread.vue
index 93fe0e611..3df62f75d 100644
--- a/src/views/dataBoard/renfang/cpts/bread.vue
+++ b/src/views/dataBoard/renfang/cpts/bread.vue
@@ -7,15 +7,8 @@
 			</div>
 			<div class="bread">
 				<el-breadcrumb :separator="separator">
-					<el-breadcrumb-item
-						v-for="(item, index) in breadList"
-						:key="'b' + index"
-					>
-						<span
-							class="bread-span"
-							@click="handleClickItem(item)"
-							>{{ item.meta.title }}</span
-						>
+					<el-breadcrumb-item v-for="(item, index) in breadList" :key="'b' + index">
+						<span class="bread-span" @click="handleClickItem(item)">{{ item.meta.title }}</span>
 					</el-breadcrumb-item>
 				</el-breadcrumb>
 			</div>
@@ -26,124 +19,124 @@
 		</div>
 	</div>
 </template>
-
 <script>
-import { mapGetters } from "vuex";
-
-export default {
-	name: "bread",
-	components: {},
-	props: {
-		//分隔符
-		separator: {
-			type: String,
-			default: "/",
-		},
-
-		//面包屑列表
-		breadList: {
-			type: Array,
-			default: () => {
-				return [];
+	import {
+		mapGetters
+	} from "vuex";
+	export default {
+		name: "bread",
+		components: {},
+		props: {
+			//分隔符
+			separator: {
+				type: String,
+				default: "/",
+			},
+			//面包屑列表
+			breadList: {
+				type: Array,
+				default: () => {
+					return [];
+				},
 			},
 		},
-	},
-	data() {
-		return {
-			pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
-			pageNo: 1,
-		};
-	},
-	watch: {},
-	computed: {
-		...mapGetters(["clientHeight", "iframeHeight"]),
-	},
-	mounted() {},
-
-	created() {},
-
-	methods: {
-		handleClickItem(item) {
-			this.$emit("tap", { item });
+		data() {
+			return {
+				pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
+				pageNo: 1,
+			};
 		},
-	},
-};
+		watch: {},
+		computed: {
+			...mapGetters(["clientHeight", "iframeHeight"]),
+		},
+		mounted() {},
+		created() {},
+		methods: {
+			handleClickItem(item) {
+				this.$emit("tap", {
+					item
+				});
+			},
+		},
+	};
 </script>
-
 <style lang="scss" scoped>
-.m-bread {
-	padding: 0 0 15px 0;
+	.m-bread {
+		padding: 0 0 15px 0;
+
+		.bread {
+			margin: 4px 0;
+			padding: 8px 16px;
+			height: 40px;
+			background: rgba(26, 149, 255, 0.15);
+			width: 100%;
+
+			/deep/ .el-breadcrumb__item {
+				line-height: 25px;
+				font-size: 14px;
+			}
 
-	.bread {
-		margin: 4px 0;
-		padding: 8px 16px;
-		height: 40px;
-		background: rgba(26, 149, 255, 0.15);
-		width: 100%;
+			/deep/ .el-breadcrumb__item .el-breadcrumb__inner {
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #ffffff;
+			}
 
-		/deep/ .el-breadcrumb__item {
-			line-height: 25px;
-			font-size: 14px;
-		}
+			/deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner {
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: rgba(255, 255, 255, 0.65);
+			}
 
-		/deep/ .el-breadcrumb__item .el-breadcrumb__inner {
-			font-family: PingFangSC-Regular, PingFang SC;
-			font-weight: 400;
-			color: #ffffff;
-		}
+			/deep/ .bread-span {
+				cursor: pointer;
+			}
 
-		/deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner {
-			font-family: PingFangSC-Regular, PingFang SC;
-			font-weight: 400;
-			color: rgba(255, 255, 255, 0.65);
-		}
+			.router_parents {
+				line-height: 25px;
+				font-size: 14px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: rgba(255, 255, 255, 0.65);
 
-		/deep/ .bread-span {
-			cursor: pointer;
-		}
+				.arrow {
+					padding: 0 5px;
+				}
+			}
 
-		.router_parents {
-			line-height: 25px;
-			font-size: 14px;
-			font-family: PingFangSC-Regular, PingFang SC;
-			font-weight: 400;
-			color: rgba(255, 255, 255, 0.65);
+			.router_parents:hover {
+				cursor: pointer;
+			}
 
-			.arrow {
-				padding: 0 5px;
+			.router_child {
+				line-height: 25px;
+				font-size: 14px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #ffffff;
 			}
 		}
-		.router_parents:hover {
-			cursor: pointer;
-		}
 
-		.router_child {
-			line-height: 25px;
-			font-size: 14px;
-			font-family: PingFangSC-Regular, PingFang SC;
-			font-weight: 400;
-			color: #ffffff;
-		}
-	}
+		.line {
+			display: flex;
+			width: 100%;
 
-	.line {
-		display: flex;
-		width: 100%;
+			.line-left {
+				flex-grow: 0;
+				flex-shrink: 0;
+				flex-basis: 16px;
+				height: 1px;
+				background: #1a95ff;
+			}
 
-		.line-left {
-			flex-grow: 0;
-			flex-shrink: 0;
-			flex-basis: 16px;
-			height: 1px;
-			background: #1a95ff;
-		}
-		.line-right {
-			flex-grow: 1;
-			flex-shrink: 1;
-			flex-basis: 0px;
-			height: 1px;
-			background: rgba(26, 149, 255, 0.45);
+			.line-right {
+				flex-grow: 1;
+				flex-shrink: 1;
+				flex-basis: 0px;
+				height: 1px;
+				background: rgba(26, 149, 255, 0.45);
+			}
 		}
 	}
-}
 </style>
diff --git a/src/views/dataBoard/renfang/cpts/rkfx.vue b/src/views/dataBoard/renfang/cpts/rkfx.vue
index a601f0d95..54b020b35 100644
--- a/src/views/dataBoard/renfang/cpts/rkfx.vue
+++ b/src/views/dataBoard/renfang/cpts/rkfx.vue
@@ -1,24 +1,14 @@
 <template>
 	<div class="m-rkyj">
 		<div class="list">
-			<div
-				v-for="item in tabList"
-				:key="item"
-				:class="['item', { 'item-sel': currentTab == item }]"
-				@click="currentTab = item"
-			>
+			<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]"
+				@click="currentTab = item">
 				{{ item }}
 			</div>
 		</div>
-
 		<div class="pie-main">
 			<div class="legend">
-				<div
-					class="legend-row"
-					:key="'pie' + item.name"
-					v-for="item in pieData"
-					@click="handleClickItem(item)"
-				>
+				<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)">
 					<div class="name">{{ item.name }}</div>
 					<div class="content">
 						<div class="num">{{ item.value }}</div>
@@ -26,473 +16,434 @@
 					</div>
 				</div>
 			</div>
-
 			<div class="pie">
-				<screen-echarts-frame
-					@myChartMethod="pieInitOk"
-					ref="pieChart"
-				></screen-echarts-frame>
+				<screen-echarts-frame @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame>
 			</div>
 		</div>
 	</div>
 </template>
-
 <script>
-import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
-import { pieOption } from "./rkfxPieOption.js";
-import { requestPostBi } from "@/js/dai/request-bipass";
-
-export default {
-	props: {
-		orgId: {
-			type: String,
-			default: "",
-		},
-	},
-	data() {
-		return {
-			showNoData: false,
-			timer: null,
-			pieChart: "",
-			pieOption: {},
-			pieInitState: false,
-			pieData: [],
-
-			tabList: [
-				"性别",
-				"户籍",
-				"人户状况",
-				"年龄",
-				"志愿者类别",
-				"党员文化程度",
-				// "下级人口分布",
-			],
-			currentTab: "性别",
-
-			info: {
-				male_count: 0,
-				female_count: 0,
-				resi_y_house_y_count: 0,
-				resi_y_house_n_count: 0,
-				resi_n_house_y_count: 0,
-				primary_count: 0,
-				junior_high_count: 0,
-				second_speci_count: 0,
-				high_school_count: 0,
-				junior_college_count: 0,
-				undergrad_count: 0,
-				master_count: 0,
-				doctor_count: 0,
-				local_count: 0,
-				field_count: 0,
-				age50_count: 0,
-				age5059_count: 0,
-				age6069_count: 0,
-				age7079_count: 0,
-				age80_count: 0,
-				culture_count: 0,
-				committee_count: 0,
-				capable_count: 0,
-				friend_count: 0,
-				agent_count: 0,
-				mediator_count: 0,
-				collector_count: 0,
-				security_count: 0,
-				party_mem_count: 0,
+	import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
+	import {
+		pieOption
+	} from "./rkfxPieOption.js";
+	import {
+		requestPostBi
+	} from "@/js/dai/request-bipass";
+	export default {
+		props: {
+			orgId: {
+				type: String,
+				default: "",
 			},
-		};
-	},
-	components: {
-		screenEchartsFrame,
-	},
-	mounted() {
-		this.init();
-	},
-	watch: {
-		currentTab() {
-			this.setPieData();
 		},
-		orgId() {
+		data() {
+			return {
+				showNoData: false,
+				timer: null,
+				pieChart: "",
+				pieOption: {},
+				pieInitState: false,
+				pieData: [],
+				tabList: ["性别", "户籍", "人户状况", "年龄", "志愿者类别", "党员文化程度",
+					// "下级人口分布",
+				],
+				currentTab: "性别",
+				info: {
+					male_count: 0,
+					female_count: 0,
+					resi_y_house_y_count: 0,
+					resi_y_house_n_count: 0,
+					resi_n_house_y_count: 0,
+					primary_count: 0,
+					junior_high_count: 0,
+					second_speci_count: 0,
+					high_school_count: 0,
+					junior_college_count: 0,
+					undergrad_count: 0,
+					master_count: 0,
+					doctor_count: 0,
+					local_count: 0,
+					field_count: 0,
+					age50_count: 0,
+					age5059_count: 0,
+					age6069_count: 0,
+					age7079_count: 0,
+					age80_count: 0,
+					culture_count: 0,
+					committee_count: 0,
+					capable_count: 0,
+					friend_count: 0,
+					agent_count: 0,
+					mediator_count: 0,
+					collector_count: 0,
+					security_count: 0,
+					party_mem_count: 0,
+				},
+			};
+		},
+		components: {
+			screenEchartsFrame,
+		},
+		mounted() {
 			this.init();
 		},
-	},
-	methods: {
-		async init() {
-			await this.getInfo();
-
-			this.getPie();
+		watch: {
+			currentTab() {
+				this.setPieData();
+			},
+			orgId() {
+				this.init();
+			},
 		},
-
-		handleClickItem(item) {
-			const { type, name } = item;
-			this.$router.push({
-				path: "/dataBoard/renfang/resi-analyze",
-				query: {
-					org_id: this.orgId,
+		methods: {
+			async init() {
+				await this.getInfo();
+				this.getPie();
+			},
+			handleClickItem(item) {
+				const {
 					type,
-					type_category: this.currentTab,
-					type_name: name,
-				},
-			});
-		},
-
-		// 获取房屋总数等
-		async getInfo() {
-			const url = "resident_analyze";
-
-			this.$refs.pieChart.showLoading();
-			const { data, code, msg } = await requestPostBi(
-				url,
-				{
+					name
+				} = item;
+				this.$router.push({
+					path: "/dataBoard/renfang/resi-analyze",
+					query: {
+						org_id: this.orgId,
+						type,
+						type_category: this.currentTab,
+						type_name: name,
+					},
+				});
+			},
+			// 获取房屋总数等
+			async getInfo() {
+				const url = "resident_analyze";
+				this.$refs.pieChart.showLoading();
+				const {
+					data,
+					code,
+					msg
+				} = await requestPostBi(url, {
 					queryParam: {
 						org_id: this.orgId,
 					},
-				},
-				{
+				}, {
 					// mockId: 60041615,
+				});
+				this.$refs.pieChart.hideLoading();
+				if (code === 0) {
+					if (data && Array.isArray(data) && data.length > 0) {
+						let info = data[0];
+						this.info = {
+							...this.info,
+							...info
+						};
+					}
+				} else {
+					this.$message.error(msg);
 				}
-			);
-			this.$refs.pieChart.hideLoading();
-
-			if (code === 0) {
-				if (data && Array.isArray(data) && data.length > 0) {
-					let info = data[0];
-					this.info = { ...this.info, ...info };
-				}
-			} else {
-				this.$message.error(msg);
-			}
-		},
-
-		selItem(selItem, selIndex) {
-			this.tabList.forEach((element, index) => {
-				if (index === selIndex) {
-					element.sel = true;
+			},
+			selItem(selItem, selIndex) {
+				this.tabList.forEach((element, index) => {
+					if (index === selIndex) {
+						element.sel = true;
+					} else {
+						element.sel = false;
+					}
+				});
+			},
+			pieInitOk() {
+				this.pieInitState = true;
+			},
+			getPie() {
+				if (this.pieInitState) {
+					this.setPieData();
 				} else {
-					element.sel = false;
+					setTimeout(() => {
+						this.getPie();
+					}, 500);
 				}
-			});
-		},
-
-		pieInitOk() {
-			this.pieInitState = true;
-		},
-
-		getPie() {
-			if (this.pieInitState) {
-				this.setPieData();
-			} else {
-				setTimeout(() => {
-					this.getPie();
-				}, 500);
-			}
-		},
-
-		setPieData() {
-			const { currentTab, info } = this;
-			if (currentTab == "性别") {
-				this.pieData = [
-					{
+			},
+			setPieData() {
+				const {
+					currentTab,
+					info
+				} = this;
+				if (currentTab == "性别") {
+					this.pieData = [{
 						value: info.male_count || 0,
 						type: "male_count",
 						name: "男性",
-					},
-					{
+					}, {
 						value: info.female_count || 0,
 						type: "female_count",
 						name: "女性",
-					},
-				];
-			} else if (currentTab == "户籍") {
-				this.pieData = [
-					{
+					}, ];
+				} else if (currentTab == "户籍") {
+					this.pieData = [{
 						value: info.local_count || 0,
 						type: "local_count",
 						name: "本地户籍",
-					},
-					{
+					}, {
 						value: info.field_count || 0,
 						type: "field_count",
 						name: "外地户籍",
-					},
-				];
-			} else if (currentTab == "人户状况") {
-				this.pieData = [
-					{
+					}, ];
+				} else if (currentTab == "人户状况") {
+					this.pieData = [{
 						value: info.resi_y_house_y_count || 0,
 						type: "resi_y_house_y_count",
 						name: "人户一致",
-					},
-					{
+					}, {
 						value: info.resi_y_house_n_count || 0,
 						type: "resi_y_house_n_count",
 						name: "人在户不在",
-					},
-					{
+					}, {
 						value: info.resi_n_house_y_count || 0,
 						type: "resi_n_house_y_count",
 						name: "户在人不在",
-					},
-				];
-			} else if (currentTab == "年龄") {
-				this.pieData = [
-					{
+					}, ];
+				} else if (currentTab == "年龄") {
+					this.pieData = [{
 						value: info.age50_count || 0,
 						type: "age50_count",
 						name: "50岁以下",
-					},
-					{
+					}, {
 						value: info.age5059_count || 0,
 						type: "age5059_count",
 						name: "50-59岁",
-					},
-					{
+					}, {
 						value: info.age6069_count || 0,
 						type: "age6069_count",
 						name: "60-69岁",
-					},
-					{
+					}, {
 						value: info.age7079_count || 0,
 						type: "age7079_count",
 						name: "70-79岁",
-					},
-					{
+					}, {
 						value: info.age80_count || 0,
 						type: "age80_count",
 						name: "80岁以上",
-					},
-				];
-			} else if (currentTab == "志愿者类别") {
-				this.pieData = [
-					{
+					}, ];
+				} else if (currentTab == "志愿者类别") {
+					this.pieData = [{
 						value: info.culture_count || 0,
 						type: "culture_count",
 						name: "文化队伍",
-					},
-					{
+					}, {
 						value: info.committee_count || 0,
 						type: "committee_count",
 						name: "楼委会",
-					},
-					{
+					}, {
 						value: info.capable_count || 0,
 						type: "capable_count",
 						name: "能人达人",
-					},
-					{
+					}, {
 						value: info.friend_count || 0,
 						type: "friend_count",
 						name: "老友俱乐部",
-					},
-					{
+					}, {
 						value: info.agent_count || 0,
 						type: "agent_count",
 						name: "代办员",
-					},
-					{
+					}, {
 						value: info.mediator_count || 0,
 						type: "mediator_count",
 						name: "调解员",
-					},
-					{
+					}, {
 						value: info.collector_count || 0,
 						type: "collector_count",
 						name: "采集员",
-					},
-					{
+					}, {
 						value: info.security_count || 0,
 						type: "security_count",
 						name: "治安巡逻员",
-					},
-					{
+					}, {
 						value: info.party_mem_count || 0,
 						type: "party_mem_count",
 						name: "党员中心户",
-					},
-				];
-			} else if (currentTab == "党员文化程度") {
-				this.pieData = [
-					{
+					}, ];
+				} else if (currentTab == "党员文化程度") {
+					this.pieData = [{
 						value: info.primary_count || 0,
 						type: "primary_count",
 						name: "小学及文盲",
-					},
-					{
+					}, {
 						value: info.junior_high_count || 0,
 						type: "junior_high_count",
 						name: "初中",
-					},
-					{
+					}, {
 						value: info.second_speci_count || 0,
 						type: "second_speci_count",
 						name: "中专",
-					},
-					{
+					}, {
 						value: info.high_school_count || 0,
 						type: "high_school_count",
 						name: "高中",
-					},
-					{
+					}, {
 						value: info.junior_college_count || 0,
 						type: "junior_college_count",
 						name: "大专",
-					},
-					{
+					}, {
 						value: info.undergrad_count || 0,
 						type: "undergrad_count",
 						name: "本科",
-					},
-					{
+					}, {
 						value: info.master_count || 0,
 						type: "master_count",
 						name: "硕士",
-					},
-					{
+					}, {
 						value: info.doctor_count || 0,
 						type: "doctor_count",
 						name: "博士",
-					},
-				];
-			} else if (currentTab == "下级人口分布") {
-				this.pieData = [];
-			}
-			this.iniPieChart();
-		},
-
-		// 获取饼状图
-		async iniPieChart() {
-			this.$refs.pieChart.clear();
-			// 获取pieChart配置
-			this.pieOption = pieOption();
-			this.pieOption.series[0].name = this.currentTab;
-			this.pieOption.series[0].data = this.pieData;
-			this.$refs.pieChart.setOption(this.pieOption);
+					}, ];
+				} else if (currentTab == "下级人口分布") {
+					this.pieData = [];
+				}
+				this.iniPieChart();
+			},
+			// 获取饼状图
+			async iniPieChart() {
+				this.$refs.pieChart.clear();
+				// 获取pieChart配置
+				this.pieOption = pieOption();
+				this.pieOption.series[0].name = this.currentTab;
+				this.pieOption.series[0].data = this.pieData;
+				this.$refs.pieChart.setOption(this.pieOption);
+			},
 		},
-	},
-};
+	};
 </script>
-
 <style lang="scss" scoped>
-.m-rkyj {
-	.list {
-		margin-top: 8px;
-		display: flex;
-		flex-wrap: wrap;
-
-		.item {
+	.m-rkyj {
+		.list {
 			margin-top: 8px;
-			background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png);
-			background-size: cover;
-			flex: 0 0 117px;
+			display: flex;
+			flex-wrap: wrap;
 
-			height: 32px;
-			margin-right: 2px;
-			text-align: center;
-			align-items: center;
-			font-size: 14px;
-			font-family: PingFangSC-Medium, PingFang SC;
-			font-weight: 500;
-			color: #ffffff;
-			line-height: 32px;
-			cursor: pointer;
-		}
+			.item {
+				margin-top: 8px;
+				background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png);
+				background-size: cover;
+				flex: 0 0 117px;
+				height: 32px;
+				margin-right: 2px;
+				text-align: center;
+				align-items: center;
+				font-size: 14px;
+				font-family: PingFangSC-Medium, PingFang SC;
+				font-weight: 500;
+				color: #ffffff;
+				line-height: 32px;
+				cursor: pointer;
+			}
 
-		.item-sel {
-			background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png);
-			background-size: cover;
+			.item-sel {
+				background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg-sel.png);
+				background-size: cover;
+			}
 		}
-	}
 
-	.pie-main {
-		display: flex;
-		justify-content: space-between;
-		margin-left: 25px;
+		.pie-main {
+			display: flex;
+			justify-content: space-between;
+			margin-left: 25px;
 
-		.legend {
-			// flex: 0 0 140px;
-			margin-top: 40px;
+			.legend {
+				// flex: 0 0 140px;
+				margin-top: 40px;
 
-			.legend-row {
-				margin-top: 15px;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
+				.legend-row {
+					margin-top: 15px;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
 
-				&:nth-child(1) .name::before {
-					background: #1a95ff;
-				}
-				&:nth-child(2) .name::before {
-					background: #ff6138;
-				}
-				&:nth-child(3) .name::before {
-					background: #2adcea;
-				}
-				&:nth-child(4) .name::before {
-					background: #2cc4ad;
-				}
-				&:nth-child(5) .name::before {
-					background: #7377f5;
-				}
-				&:nth-child(6) .name::before {
-					background: #32de66;
-				}
-				&:nth-child(7) .name::before {
-					background: #8155d4;
-				}
-				&:nth-child(8) .name::before {
-					background: #c7ea48;
-				}
-				&:nth-child(9) .name::before {
-					background: #ef47c2;
-				}
-				&:nth-child(10) .name::before {
-					background: #d43349;
-				}
-				.name {
-					position: relative;
-					margin-left: 5px;
-					font-size: 12px;
-					font-family: PingFangSC-Regular, PingFang SC;
-					font-weight: 400;
-					color: rgba(255, 255, 255, 0.65);
-					line-height: 17px;
+					&:nth-child(1) .name::before {
+						background: #1a95ff;
+					}
 
-					&::before {
-						content: "";
-						position: absolute;
-						top: 4px;
-						left: -15px;
-						width: 8px;
-						height: 8px;
+					&:nth-child(2) .name::before {
+						background: #ff6138;
 					}
-				}
 
-				.content {
-					margin-left: 24px;
-					display: flex;
-					align-items: flex-end;
+					&:nth-child(3) .name::before {
+						background: #2adcea;
+					}
 
-					font-family: PingFangSC-Medium, PingFang SC;
-					font-weight: 500;
-					color: #ffffff;
-				}
+					&:nth-child(4) .name::before {
+						background: #2cc4ad;
+					}
 
-				.num {
-					font-size: 20px;
-				}
+					&:nth-child(5) .name::before {
+						background: #7377f5;
+					}
+
+					&:nth-child(6) .name::before {
+						background: #32de66;
+					}
+
+					&:nth-child(7) .name::before {
+						background: #8155d4;
+					}
 
-				.unit {
-					margin-left: 5px;
-					font-size: 14px;
+					&:nth-child(8) .name::before {
+						background: #c7ea48;
+					}
+
+					&:nth-child(9) .name::before {
+						background: #ef47c2;
+					}
+
+					&:nth-child(10) .name::before {
+						background: #d43349;
+					}
+
+					.name {
+						position: relative;
+						margin-left: 5px;
+						font-size: 12px;
+						font-family: PingFangSC-Regular, PingFang SC;
+						font-weight: 400;
+						color: rgba(255, 255, 255, 0.65);
+						line-height: 17px;
+
+						&::before {
+							content: "";
+							position: absolute;
+							top: 4px;
+							left: -15px;
+							width: 8px;
+							height: 8px;
+						}
+					}
+
+					.content {
+						margin-left: 24px;
+						display: flex;
+						align-items: flex-end;
+						font-family: PingFangSC-Medium, PingFang SC;
+						font-weight: 500;
+						color: #ffffff;
+					}
+
+					.num {
+						font-size: 20px;
+					}
+
+					.unit {
+						margin-left: 5px;
+						font-size: 14px;
+					}
 				}
 			}
-		}
 
-		.pie {
-			margin-top: 32px;
-			flex: 0 0 280px;
-			height: 270px;
+			.pie {
+				margin-top: 32px;
+				flex: 0 0 280px;
+				height: 270px;
+			}
 		}
 	}
-}
 </style>
diff --git a/src/views/dataBoard/sida/cpts/bread.vue b/src/views/dataBoard/sida/cpts/bread.vue
new file mode 100644
index 000000000..3df62f75d
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/bread.vue
@@ -0,0 +1,142 @@
+<template>
+	<div>
+		<div class="m-bread">
+			<div class="line">
+				<div class="line-left"></div>
+				<div class="line-right"></div>
+			</div>
+			<div class="bread">
+				<el-breadcrumb :separator="separator">
+					<el-breadcrumb-item v-for="(item, index) in breadList" :key="'b' + index">
+						<span class="bread-span" @click="handleClickItem(item)">{{ item.meta.title }}</span>
+					</el-breadcrumb-item>
+				</el-breadcrumb>
+			</div>
+			<div class="line">
+				<div class="line-left"></div>
+				<div class="line-right"></div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	import {
+		mapGetters
+	} from "vuex";
+	export default {
+		name: "bread",
+		components: {},
+		props: {
+			//分隔符
+			separator: {
+				type: String,
+				default: "/",
+			},
+			//面包屑列表
+			breadList: {
+				type: Array,
+				default: () => {
+					return [];
+				},
+			},
+		},
+		data() {
+			return {
+				pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
+				pageNo: 1,
+			};
+		},
+		watch: {},
+		computed: {
+			...mapGetters(["clientHeight", "iframeHeight"]),
+		},
+		mounted() {},
+		created() {},
+		methods: {
+			handleClickItem(item) {
+				this.$emit("tap", {
+					item
+				});
+			},
+		},
+	};
+</script>
+<style lang="scss" scoped>
+	.m-bread {
+		padding: 0 0 15px 0;
+
+		.bread {
+			margin: 4px 0;
+			padding: 8px 16px;
+			height: 40px;
+			background: rgba(26, 149, 255, 0.15);
+			width: 100%;
+
+			/deep/ .el-breadcrumb__item {
+				line-height: 25px;
+				font-size: 14px;
+			}
+
+			/deep/ .el-breadcrumb__item .el-breadcrumb__inner {
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #ffffff;
+			}
+
+			/deep/ .el-breadcrumb__item:first-child .el-breadcrumb__inner {
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: rgba(255, 255, 255, 0.65);
+			}
+
+			/deep/ .bread-span {
+				cursor: pointer;
+			}
+
+			.router_parents {
+				line-height: 25px;
+				font-size: 14px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: rgba(255, 255, 255, 0.65);
+
+				.arrow {
+					padding: 0 5px;
+				}
+			}
+
+			.router_parents:hover {
+				cursor: pointer;
+			}
+
+			.router_child {
+				line-height: 25px;
+				font-size: 14px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #ffffff;
+			}
+		}
+
+		.line {
+			display: flex;
+			width: 100%;
+
+			.line-left {
+				flex-grow: 0;
+				flex-shrink: 0;
+				flex-basis: 16px;
+				height: 1px;
+				background: #1a95ff;
+			}
+
+			.line-right {
+				flex-grow: 1;
+				flex-shrink: 1;
+				flex-basis: 0px;
+				height: 1px;
+				background: rgba(26, 149, 255, 0.45);
+			}
+		}
+	}
+</style>
diff --git a/src/views/dataBoard/sida/cpts/fwBarOption.js b/src/views/dataBoard/sida/cpts/fwBarOption.js
new file mode 100644
index 000000000..9ae582204
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/fwBarOption.js
@@ -0,0 +1,130 @@
+import * as echarts from 'echarts'
+export function barOption () {
+
+  return {
+    title: {
+      text: '单位（户）',
+      left: 5,
+      textStyle: {
+      
+        fontSize: 14,
+        color: " rgba(255,255,255,0.65)",
+        fontWeight: 400,
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    // legend: {},
+    grid: {
+      top:40,
+      left: '3%',
+      right: '4%',
+      bottom: 19,
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisLine: {
+          lineStyle: {
+            color:'rgba(255,255,255,0.15)',
+            width: 1, 
+            type: 'solid' 
+          }
+        },
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,0.85)',  //更改坐标轴文字颜色
+            fontSize : 12      //更改坐标轴文字大小
+          }
+        },
+
+        data: []
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        max : 1000,
+        splitNumber : 5,
+        splitLine: { 
+          show: true, 
+          lineStyle:{ 
+            color:'rgba(255,255,255,0.15)',
+            width: 1, 
+            type: 'solid' 
+          } 
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,0.85)',  //更改坐标轴文字颜色
+            fontSize : 12      //更改坐标轴文字大小
+          }
+        },
+      }
+    ],
+    series: [
+  
+      {
+        name: '自住房屋',
+        type: 'bar',
+        stack: 'Ad',
+        barWidth:12,
+        emphasis: {
+          focus: 'series'
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#6FDEFF' },
+            { offset: 1, color: 'rgba(168,241,255,0)' }
+          ])
+        },
+        data: []
+      },
+      {
+        name: '出租房屋',
+        type: 'bar',
+        barWidth:12,
+        stack: 'Ad',
+        emphasis: {
+          focus: 'series'
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#1A95FF' },
+            { offset: 1, color: 'rgba(168,241,255,0)' }
+          ])
+        },
+        data: []
+      },
+      {
+        name: '闲置房屋',
+        type: 'bar',
+        barWidth:12,
+        stack: 'Ad',
+        emphasis: {
+          focus: 'series'
+        },
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#FFAA00' },
+            { offset: 1, color: 'rgba(168,241,255,0)' }
+          ])
+        },
+        data: []
+      },
+      
+     
+    ]
+
+  }
+}
diff --git a/src/views/dataBoard/sida/cpts/fwPieOption.js b/src/views/dataBoard/sida/cpts/fwPieOption.js
new file mode 100644
index 000000000..c7ca041d4
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/fwPieOption.js
@@ -0,0 +1,93 @@
+import * as echarts from 'echarts'
+export function pieOption() {
+  const center = ["50%", "170px"];
+  return {
+    title: {
+      text: "0",
+      top: 45,
+      left: "center",
+      textStyle: {
+        width: "100%",
+        fontSize: 24,
+        color: "#FFFFFF",
+        fontWeight: 400,
+      },
+      itemGap: 5,
+      // subtext: "总数",
+      // subtextStyle: {
+      //   fontSize: 20,
+      //   color: "#fff",
+      //   fontWeight: 400,
+      // },
+    },
+    tooltip: {
+      show: false,
+    },
+    // legend: {
+    // top: 350,
+    // bottom: 0,
+    // itemWidth: 20,
+    // itemHeight: 10,
+    // textStyle: {
+    //   color: '#D2E7FF',
+    //   fontSize: 16,
+    //   lineHeight: 20,
+    // },
+
+    // },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['60%', '90%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        // emphasis: {
+        //   label: {
+        //     show: true,
+        //     fontSize: 40,
+        //     fontWeight: 'bold'
+        //   }
+        // },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          normal: {
+              color: (list) => {
+                // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
+                var colorList = [
+                  {
+                      colorStart:'#00023A',
+                      colorEnd:'#6FDEFF'                     
+                  },
+                  {
+                      colorStart:'#00023A',
+                      colorEnd:'#FFAA00'
+                  },
+                  {
+                      colorStart:'#00023A',
+                      colorEnd:'#1A95FF'
+                  },
+                 
+                ]
+                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
+                    offset: 0,
+                    color: colorList[list.dataIndex]['colorStart']
+                }, {
+                    offset: 1,
+                    color: colorList[list.dataIndex]['colorEnd']
+                }])                                    
+              }
+          }
+      },
+
+        data: [
+        ]
+      }
+    ]
+  };
+}
diff --git a/src/views/dataBoard/sida/cpts/fwgl.vue b/src/views/dataBoard/sida/cpts/fwgl.vue
new file mode 100644
index 000000000..d2c112759
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/fwgl.vue
@@ -0,0 +1,540 @@
+<template>
+	<div>
+		<div class="m-fwgl">
+			<div class="m-pie">
+				<div class="pie-left">
+					<screen-echarts-frame
+						class=""
+						@myChartMethod="pieInitOk"
+						ref="pieChart"
+					></screen-echarts-frame>
+				</div>
+				<div class="pie-legend">
+					<div class="item">
+						<div class="item-logo logo1"></div>
+						<div class="item-name">自住房屋</div>
+					</div>
+					<div class="item">
+						<div class="item-logo logo2"></div>
+						<div class="item-name">出租房屋</div>
+					</div>
+					<div class="item">
+						<div class="item-logo logo3"></div>
+						<div class="item-name">闲置房屋</div>
+					</div>
+				</div>
+				<div class="pie-right">
+					<div class="right-row">
+						<div class="row-item" @click="toListPage">
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/house-logo.png"
+									alt
+								/>
+								<div class="title">房屋总数</div>
+							</div>
+							<div class="item-two">
+								<div class="num">{{ info.house_count }}</div>
+								<div class="unit">户</div>
+							</div>
+						</div>
+
+						<div
+							class="row-item marginleft10"
+							@click="toListPage('self_dwelling', '自住')"
+						>
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/house-logo.png"
+									alt
+								/>
+								<div class="title">自住房屋</div>
+							</div>
+							<div class="item-two">
+								<div class="num">
+									{{ info.self_dwelling_count }}
+								</div>
+								<div class="unit">户</div>
+							</div>
+						</div>
+					</div>
+					<div
+						class="right-row margintop18"
+						@click="toListPage('lease', '出租')"
+					>
+						<div class="row-item">
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/house-logo.png"
+									alt
+								/>
+								<div class="title">出租房屋</div>
+							</div>
+							<div class="item-two">
+								<div class="num">{{ info.lease_count }}</div>
+								<div class="unit">户</div>
+							</div>
+						</div>
+
+						<div
+							class="row-item marginleft10"
+							@click="toListPage('unused', '闲置')"
+						>
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/house-logo.png"
+									alt
+								/>
+								<div class="title">闲置房屋</div>
+							</div>
+							<div class="item-two">
+								<div class="num">{{ info.unused_count }}</div>
+								<div class="unit">户</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="m-bar">
+				<div class="bar-title">
+					<img
+						class="title_img"
+						src="@/assets/images/index/list-logo.png"
+						alt
+					/>
+					<div class="tip_title">近一年房屋状态变化趋势图</div>
+					<div class="title_line"></div>
+				</div>
+				<div class="bar-legend">
+					<div class="item-logo logo1"></div>
+					<div class="item-name">自住房屋</div>
+					<div class="item-logo logo2 marginleft10"></div>
+					<div class="item-name">出租房屋</div>
+					<div class="item-logo logo3 marginleft10"></div>
+					<div class="item-name">闲置房屋</div>
+				</div>
+				<div class="bar-main">
+					<screen-echarts-frame
+						class=""
+						@myChartMethod="barInitOk"
+						ref="barChart"
+					></screen-echarts-frame>
+				</div>
+			</div>
+
+			<!-- <screen-nodata class="nodata"
+                     v-if="showNoData"></screen-nodata> -->
+		</div>
+	</div>
+</template>
+
+<script>
+import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
+import { pieOption } from "./fwPieOption.js";
+import { barOption } from "./fwBarOption.js";
+import { requestPostBi } from "@/js/dai/request-bipass";
+
+export default {
+	props: {
+		orgId: {
+			type: String,
+			default: "",
+		},
+	},
+	components: {
+		screenEchartsFrame,
+	},
+
+	data() {
+		return {
+			showNoData: false,
+			barChart: "",
+			pieChart: "",
+			pieOption: {},
+			barOption: {},
+			pieInitState: false,
+			barInitState: false,
+			pieData: [],
+
+			info: {
+				house_count: 0,
+				self_dwelling_count: 0,
+				lease_count: 0,
+				unused_count: 0,
+			},
+		};
+	},
+	mounted() {
+		this.getData();
+	},
+	watch: {
+		orgId() {
+			this.getData();
+		},
+	},
+	methods: {
+		toListPage(type = "", type_name = "") {
+			this.$router.push({
+				path: "/dataBoard/renfang/house-list",
+				query: {
+					org_id: this.orgId,
+					type,
+					type_name,
+				},
+			});
+		},
+
+		pieInitOk() {
+			this.pieInitState = true;
+		},
+		barInitOk() {
+			this.barInitState = true;
+		},
+		async getData() {
+			await this.getInfo();
+			this.getBar();
+			this.getPie();
+		},
+		getBar() {
+			if (this.barInitState) {
+				this.getBarData();
+			} else {
+				setTimeout(() => {
+					this.getBar();
+				}, 500);
+			}
+		},
+		getPie() {
+			if (this.pieInitState) {
+				this.iniPieChart();
+			} else {
+				setTimeout(() => {
+					this.getPie();
+				}, 500);
+			}
+		},
+
+		// 获取房屋总数等
+		async getInfo() {
+			const url = "house_view";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgId,
+					},
+				},
+				{
+					// mockId: 60007107,
+				}
+			);
+
+			if (code === 0) {
+				if (data && Array.isArray(data) && data.length > 0) {
+					let info = data[0];
+					this.info = { ...this.info, ...info };
+				} else {
+					this.info = {
+						house_count: 0,
+						self_dwelling_count: 0,
+						lease_count: 0,
+						unused_count: 0,
+					};
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+		// 获取饼状图
+		async iniPieChart() {
+			this.$refs.pieChart.clear();
+			// this.$refs.pieChart.showLoading()
+
+			// 获取pieChart配置
+			this.pieOption = pieOption();
+
+			const { info } = this;
+			// 设置三个配置值
+			this.pieOption.title.text =
+				(info.house_count != 0
+					? parseInt(
+							(100 * info.self_dwelling_count) / info.house_count
+					  )
+					: "--") + "%";
+			this.pieData = [
+				{ value: info.self_dwelling_count, name: "自住房屋" },
+				{ value: info.lease_count, name: "出租房屋" },
+				{ value: info.unused_count, name: "闲置房屋" },
+			];
+			this.pieOption.series[0].data = this.pieData;
+			this.$refs.pieChart.setOption(this.pieOption);
+			// this.$refs.pieChart.hideLoading()
+
+			// 点击饼图 切换中心显示的比例
+			this.$refs.pieChart.myChart.on("selectchanged", (params) => {
+				console.log(params);
+				const {
+					fromActionPayload: { dataIndexInside },
+				} = params;
+				this.pieOption.title.text =
+					(info.house_count != 0
+						? parseInt(
+								(100 *
+									[
+										info.self_dwelling_count,
+										info.lease_count,
+										info.unused_count,
+									][dataIndexInside]) /
+									info.house_count
+						  )
+						: "--") + "%";
+				this.$refs.pieChart.myChart.setOption(this.pieOption);
+			});
+		},
+
+		// 获取房屋总数等
+		async getBarData() {
+			const url = "house_trend";
+
+			this.$refs.barChart.showLoading();
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgId,
+					},
+				},
+				{
+					// mockId: 60388110,
+				}
+			);
+
+			if (code === 0) {
+				let xaxis = [];
+				let series = [{ data: [] }, { data: [] }, { data: [] }];
+				if (data && Array.isArray(data) && data.length > 0) {
+					for (const {
+						month,
+						self_dwelling_count,
+						lease_count,
+						unused_count,
+					} of data) {
+						xaxis.push(month);
+						series[0].data.push(self_dwelling_count);
+						series[1].data.push(lease_count);
+						series[2].data.push(unused_count);
+					}
+				}
+				this.iniBarChart(xaxis, series);
+				this.$refs.barChart.hideLoading();
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		// 获取饼状图
+		async iniBarChart(xaxis, series) {
+			this.showNoData = false;
+			this.$refs.barChart.clear();
+			// let xaxis = [
+			// 	"1月",
+			// 	"2月",
+			// 	"3月",
+			// 	"4月",
+			// 	"5月",
+			// 	"6月",
+			// 	"7月",
+			// 	"8月",
+			// 	"9月",
+			// 	"10月",
+			// 	"11月",
+			// 	"12月",
+			// ];
+			// let series = [
+			// 	{
+			// 		data: [
+			// 			120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
+			// 			90,
+			// 		],
+			// 	},
+			// 	{
+			// 		data: [
+			// 			120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
+			// 			90,
+			// 		],
+			// 	},
+			// 	{
+			// 		data: [
+			// 			120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134,
+			// 			90,
+			// 		],
+			// 	},
+			// ];
+			this.barOption = barOption();
+			this.$refs.barChart.setOption(this.barOption, true);
+			this.$refs.barChart.setOption(
+				{
+					xAxis: { data: xaxis },
+					series: series,
+				},
+				true
+			);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.m-fwgl {
+	height: 100%;
+	width: 100%;
+
+	.m-pie {
+		margin-top: 24px;
+		display: flex;
+		justify-content: space-around;
+
+		.pie-left {
+			height: 120px;
+			flex: 0 0 120px;
+		}
+
+		.pie-legend {
+			.item {
+				display: flex;
+				margin-bottom: 12px;
+			}
+		}
+		.pie-right {
+			.right-row {
+				display: flex;
+				// justify-content: space-between;
+
+				.row-item {
+					flex: 0 0 100px;
+					cursor: pointer;
+					.item-one {
+						display: flex;
+						.img {
+							width: 15px;
+							height: 15px;
+						}
+						.title {
+							margin-left: 9px;
+							font-size: 14px;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: rgba(255, 255, 255, 0.65);
+						}
+					}
+
+					.item-two {
+						margin-top: 8px;
+						display: flex;
+						align-items: flex-end;
+						margin-left: 23px;
+
+						.num {
+							font-size: 24px;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #ffffff;
+						}
+
+						.unit {
+							margin-left: 9px;
+							font-size: 14px;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #ffffff;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.m-bar {
+		position: relative;
+		margin-top: 14px;
+
+		.bar-title {
+			display: flex;
+			align-items: center;
+			// margin-left: 24px;
+
+			.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%
+				);
+			}
+		}
+
+		.bar-legend {
+			position: absolute;
+			top: 37px;
+			right: 20px;
+			display: flex;
+		}
+
+		.bar-main {
+			margin-top: 10px;
+			height: 225px;
+		}
+	}
+}
+
+.item-name {
+	margin-left: 8px;
+	font-size: 12px;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #8c8c8c;
+}
+
+.item-logo {
+	margin-top: 2px;
+	width: 8px;
+	height: 8px;
+}
+
+.logo1 {
+	background: #6fdeff;
+}
+.logo2 {
+	background: #ffaa00;
+}
+.logo3 {
+	background: #1a95ff;
+}
+.marginleft10 {
+	margin-left: 10px;
+}
+
+.margintop18 {
+	margin-top: 18px;
+}
+</style>
diff --git a/src/views/dataBoard/sida/cpts/fwqd.vue b/src/views/dataBoard/sida/cpts/fwqd.vue
new file mode 100644
index 000000000..4f2fab81e
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/fwqd.vue
@@ -0,0 +1,340 @@
+<template>
+	<div class="m-wtqd">
+		<div class="tablist">
+			<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" @click="currentTab = item">{{ item }}</div>
+		</div>
+		<div class="pieMain">
+			<div class="legend">
+				<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)">
+					<div class="name">{{ item.name }}</div>
+					<div class="content">
+						<div class="num">{{ item.value }}</div>
+						<div class="unit">人</div>
+					</div>
+				</div>
+			</div>
+			<div class="pie"><screen-echarts-frame @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame></div>
+		</div>
+	</div>
+</template>
+<script>
+import screenEchartsFrame from '@/views/dataBoard/cpts/screen-echarts-frame/index';
+import { pieOption } from './fwqdPieOption.js';
+import { requestPostBi } from '@/js/dai/request-bipass';
+export default {
+	props: {
+		orgId: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			showNoData: false,
+			timer: null,
+			pieChart: '',
+			pieOption: {},
+			pieInitState: false,
+			pieData: [],
+			tabList: [
+				'公共服务',
+				'个性服务'
+				// "下级人口分布",
+			],
+			currentTab: '公共服务',
+			info: {
+				male_count: 0,
+				female_count: 0,
+				resi_y_house_y_count: 0,
+				resi_y_house_n_count: 0,
+				resi_n_house_y_count: 0,
+				primary_count: 0,
+				junior_high_count: 0,
+				second_speci_count: 0,
+				high_school_count: 0,
+				junior_college_count: 0,
+				undergrad_count: 0,
+				master_count: 0,
+				doctor_count: 0,
+				local_count: 0,
+				field_count: 0,
+				age50_count: 0,
+				age5059_count: 0,
+				age6069_count: 0,
+				age7079_count: 0,
+				age80_count: 0,
+				culture_count: 0,
+				committee_count: 0,
+				capable_count: 0,
+				friend_count: 0,
+				agent_count: 0,
+				mediator_count: 0,
+				collector_count: 0,
+				security_count: 0,
+				party_mem_count: 0
+			}
+		};
+	},
+	components: {
+		screenEchartsFrame
+	},
+	mounted() {
+		this.init();
+	},
+	watch: {
+		currentTab() {
+			this.setPieData();
+		},
+		orgId() {
+			this.init();
+		}
+	},
+	methods: {
+		async init() {
+			await this.getInfo();
+			this.getPie();
+		},
+		handleClickItem(item) {
+			const { type, name } = item;
+			this.$router.push({
+				path: '/dataBoard/renfang/resi-analyze',
+				query: {
+					org_id: this.orgId,
+					type,
+					type_category: this.currentTab,
+					type_name: name
+				}
+			});
+		},
+		// 获取房屋总数等
+		async getInfo() {
+			const url = 'resident_analyze';
+			this.$refs.pieChart.showLoading();
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgId
+					}
+				},
+				{
+					// mockId: 60041615,
+				}
+			);
+			this.$refs.pieChart.hideLoading();
+			if (code === 0) {
+				if (data && Array.isArray(data) && data.length > 0) {
+					let info = data[0];
+					this.info = {
+						...this.info,
+						...info
+					};
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+		selItem(selItem, selIndex) {
+			this.tabList.forEach((element, index) => {
+				if (index === selIndex) {
+					element.sel = true;
+				} else {
+					element.sel = false;
+				}
+			});
+		},
+		pieInitOk() {
+			this.pieInitState = true;
+		},
+		getPie() {
+			if (this.pieInitState) {
+				this.setPieData();
+			} else {
+				setTimeout(() => {
+					this.getPie();
+				}, 500);
+			}
+		},
+		setPieData() {
+			const { currentTab, info } = this;
+			if (currentTab == '性别') {
+				this.pieData = [
+					{
+						value: info.male_count || 0,
+						type: 'male_count',
+						name: '男性'
+					},
+					{
+						value: info.female_count || 0,
+						type: 'female_count',
+						name: '女性'
+					}
+				];
+			} else if (currentTab == '户籍') {
+				this.pieData = [
+					{
+						value: info.local_count || 0,
+						type: 'local_count',
+						name: '本地户籍'
+					},
+					{
+						value: info.field_count || 0,
+						type: 'field_count',
+						name: '外地户籍'
+					}
+				];
+			} else if (currentTab == '人户状况') {
+				this.pieData = [
+					{
+						value: info.resi_y_house_y_count || 0,
+						type: 'resi_y_house_y_count',
+						name: '人户一致'
+					},
+					{
+						value: info.resi_y_house_n_count || 0,
+						type: 'resi_y_house_n_count',
+						name: '人在户不在'
+					},
+					{
+						value: info.resi_n_house_y_count || 0,
+						type: 'resi_n_house_y_count',
+						name: '户在人不在'
+					}
+				];
+			} else if (currentTab == '年龄') {
+				this.pieData = [
+					{
+						value: info.age50_count || 0,
+						type: 'age50_count',
+						name: '50岁以下'
+					},
+					{
+						value: info.age5059_count || 0,
+						type: 'age5059_count',
+						name: '50-59岁'
+					},
+					{
+						value: info.age6069_count || 0,
+						type: 'age6069_count',
+						name: '60-69岁'
+					},
+					{
+						value: info.age7079_count || 0,
+						type: 'age7079_count',
+						name: '70-79岁'
+					},
+					{
+						value: info.age80_count || 0,
+						type: 'age80_count',
+						name: '80岁以上'
+					}
+				];
+			} else if (currentTab == '志愿者类别') {
+				this.pieData = [
+					{
+						value: info.culture_count || 0,
+						type: 'culture_count',
+						name: '文化队伍'
+					},
+					{
+						value: info.committee_count || 0,
+						type: 'committee_count',
+						name: '楼委会'
+					},
+					{
+						value: info.capable_count || 0,
+						type: 'capable_count',
+						name: '能人达人'
+					},
+					{
+						value: info.friend_count || 0,
+						type: 'friend_count',
+						name: '老友俱乐部'
+					},
+					{
+						value: info.agent_count || 0,
+						type: 'agent_count',
+						name: '代办员'
+					},
+					{
+						value: info.mediator_count || 0,
+						type: 'mediator_count',
+						name: '调解员'
+					},
+					{
+						value: info.collector_count || 0,
+						type: 'collector_count',
+						name: '采集员'
+					},
+					{
+						value: info.security_count || 0,
+						type: 'security_count',
+						name: '治安巡逻员'
+					},
+					{
+						value: info.party_mem_count || 0,
+						type: 'party_mem_count',
+						name: '党员中心户'
+					}
+				];
+			} else if (currentTab == '党员文化程度') {
+				this.pieData = [
+					{
+						value: info.primary_count || 0,
+						type: 'primary_count',
+						name: '小学及文盲'
+					},
+					{
+						value: info.junior_high_count || 0,
+						type: 'junior_high_count',
+						name: '初中'
+					},
+					{
+						value: info.second_speci_count || 0,
+						type: 'second_speci_count',
+						name: '中专'
+					},
+					{
+						value: info.high_school_count || 0,
+						type: 'high_school_count',
+						name: '高中'
+					},
+					{
+						value: info.junior_college_count || 0,
+						type: 'junior_college_count',
+						name: '大专'
+					},
+					{
+						value: info.undergrad_count || 0,
+						type: 'undergrad_count',
+						name: '本科'
+					},
+					{
+						value: info.master_count || 0,
+						type: 'master_count',
+						name: '硕士'
+					},
+					{
+						value: info.doctor_count || 0,
+						type: 'doctor_count',
+						name: '博士'
+					}
+				];
+			} else if (currentTab == '下级人口分布') {
+				this.pieData = [];
+			}
+			this.iniPieChart();
+		},
+		// 获取饼状图
+		async iniPieChart() {
+			this.$refs.pieChart.clear();
+			// 获取pieChart配置
+			this.pieOption = pieOption();
+			this.pieOption.series[0].name = this.currentTab;
+			this.pieOption.series[0].data = this.pieData;
+			this.$refs.pieChart.setOption(this.pieOption);
+		}
+	}
+};
+</script>
+<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>
diff --git a/src/views/dataBoard/sida/cpts/fwqdPieOption.js b/src/views/dataBoard/sida/cpts/fwqdPieOption.js
new file mode 100644
index 000000000..5772b0f4a
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/fwqdPieOption.js
@@ -0,0 +1,54 @@
+import * as echarts from "echarts";
+export function pieOption() {
+	const center = ["50%", "170px"];
+	return {
+		color: [
+			"#1A95FF",
+			"#FF6138",
+			"#2adcea",
+			"#2cc4ad",
+			"#7377f5",
+			"#32de66",
+			"#8155d4",
+			"#c7ea48",
+			"#ef47c2",
+			"d43349",
+		],
+		tooltip: {
+			trigger: "item",
+		},
+		series: [
+			{
+				name: "",
+				type: "pie",
+				radius: [40, 130],
+				center: ["50%", "50%"],
+				roseType: "area",
+				itemStyle: {
+					borderRadius: 1,
+				},
+				avoidLabelOverlap: false,
+				labelLine: {
+					show: false,
+				},
+				label: {
+					normal: {
+						position: "inner",
+						show: true,
+						formatter: "{d}%",
+						fontSize: 24,
+						color: "#FFFFFF",
+					},
+				},
+				emphasis: {
+					label: {
+						show: true,
+						// fontSize: 36,
+						fontWeight: "bold",
+					},
+				},
+				data: [],
+			},
+		],
+	};
+}
diff --git a/src/views/dataBoard/sida/cpts/jmBarOption.js b/src/views/dataBoard/sida/cpts/jmBarOption.js
new file mode 100644
index 000000000..1c24850ab
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/jmBarOption.js
@@ -0,0 +1,140 @@
+import * as echarts from 'echarts'
+export function barOption () {
+
+  return {
+    title: {
+      text: '单位（人）',
+      left: 5,
+      textStyle: {
+      
+        fontSize: 14,
+        color: " rgba(255,255,255,0.65)",
+        fontWeight: 400,
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    // legend: {},
+    grid: {
+      top:40,
+      left: '3%',
+      right: '4%',
+      bottom: 19,
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        axisLine: {
+          lineStyle: {
+            color:'rgba(255,255,255,0.15)',
+            width: 1, 
+            type: 'solid' 
+          }
+        },
+        axisTick: {
+          alignWithLabel: true
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,0.85)',  //更改坐标轴文字颜色
+            fontSize : 12      //更改坐标轴文字大小
+          }
+        },
+
+        data: []
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        max : 1000,
+        splitNumber : 5,
+        splitLine: { 
+          show: true, 
+          lineStyle:{ 
+            color:'rgba(255,255,255,0.15)',
+            width: 1, 
+            type: 'solid' 
+          } 
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,0.85)',  //更改坐标轴文字颜色
+            fontSize : 12      //更改坐标轴文字大小
+          }
+        },
+      }
+    ],
+    series: [
+  
+      {
+        name: '常住人口',
+        type: 'line',
+        stack: 'Total',
+        barWidth:12,
+        emphasis: {
+          focus: 'series'
+        },
+        itemStyle: {
+          normal: {
+              color: "#FFAA00", //图例颜色
+              borderWidth: 2,
+              borderColor: "#FFAA00",
+              lineStyle: { color: "#FFAA00", width: 1 }
+          }
+        },
+
+        areaStyle: {
+          normal: {
+              // 渐变填充色（线条下半部分）
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#FFAA00" },
+                  { offset: 1, color: "rgba(255,170,0,0)" }
+              ])
+          }
+        },
+
+        data: []
+      },
+      {
+        name: '流动人口',
+        type: 'line',
+        barWidth:12,
+        stack: 'Total',
+        emphasis: {
+          focus: 'series'
+        },
+        itemStyle: {
+          normal: {
+              color: "#1A95FF", //图例颜色
+              borderWidth: 2,
+              borderColor: "#1A95FF",
+              lineStyle: { color: "#1A95FF", width: 1 }
+          }
+        },
+
+        areaStyle: {
+          normal: {
+              // 渐变填充色（线条下半部分）
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#1A95FF" },
+                  { offset: 1, color: "rgba(255,170,0,0)" }
+              ])
+          }
+        },
+        data: []
+      },
+    
+      
+     
+    ]
+
+  }
+}
diff --git a/src/views/dataBoard/sida/cpts/jmPieOption.js b/src/views/dataBoard/sida/cpts/jmPieOption.js
new file mode 100644
index 000000000..99480650b
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/jmPieOption.js
@@ -0,0 +1,90 @@
+import * as echarts from 'echarts'
+export function pieOption() {
+  const center = ["50%", "170px"];
+  return {
+    title: {
+      text: "0",
+      top: 45,
+      left: "center",
+      textStyle: {
+        width: "100%",
+        fontSize: 24,
+        color: "#FFFFFF",
+        fontWeight: 400,
+      },
+      itemGap: 5,
+      // subtext: "总数",
+      // subtextStyle: {
+      //   fontSize: 20,
+      //   color: "#fff",
+      //   fontWeight: 400,
+      // },
+    },
+    tooltip: {
+      show: false,
+    },
+    // legend: {
+    // top: 350,
+    // bottom: 0,
+    // itemWidth: 20,
+    // itemHeight: 10,
+    // textStyle: {
+    //   color: '#D2E7FF',
+    //   fontSize: 16,
+    //   lineHeight: 20,
+    // },
+
+    // },
+    series: [
+      {
+        name: 'Access From',
+        type: 'pie',
+        radius: ['60%', '90%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        // emphasis: {
+        //   label: {
+        //     show: true,
+        //     fontSize: 40,
+        //     fontWeight: 'bold'
+        //   }
+        // },
+        labelLine: {
+          show: false
+        },
+        itemStyle: {
+          normal: {
+              color: (list) => {
+                // 注意 ！！！！！ 这里的数组一定要和实际的类目长度相等或大于，不然会缺少颜色报错
+                var colorList = [
+                  {
+                      colorStart:'#00023A',
+                      colorEnd:'#6FDEFF'                     
+                  },
+                  {
+                      colorStart:'#00023A',
+                      colorEnd:'#FFAA00'
+                  },
+                 
+                 
+                ]
+                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //左、下、右、上
+                    offset: 0,
+                    color: colorList[list.dataIndex]['colorStart']
+                }, {
+                    offset: 1,
+                    color: colorList[list.dataIndex]['colorEnd']
+                }])                                    
+              }
+          }
+      },
+
+        data: [
+        ]
+      }
+    ]
+  };
+}
diff --git a/src/views/dataBoard/sida/cpts/jmgl.vue b/src/views/dataBoard/sida/cpts/jmgl.vue
new file mode 100644
index 000000000..a498e359d
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/jmgl.vue
@@ -0,0 +1,482 @@
+<template>
+	<div>
+		<div class="m-jmgl">
+			<div class="m-pie">
+				<div class="pie-left">
+					<screen-echarts-frame
+						class=""
+						@myChartMethod="pieInitOk"
+						ref="pieChart"
+					></screen-echarts-frame>
+				</div>
+				<div class="pie-legend">
+					<div class="item">
+						<div class="item-logo logo1"></div>
+						<div class="item-name">常住人口</div>
+					</div>
+					<div class="item">
+						<div class="item-logo logo2"></div>
+						<div class="item-name">流动人口</div>
+					</div>
+				</div>
+				<div class="pie-right">
+					<div class="right-row">
+						<div class="row-item" @click="toListPage">
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/jm-logo.png"
+									alt
+								/>
+								<div class="title">居民总数</div>
+							</div>
+							<div class="item-two">
+								<div class="num">{{ info.resident_count }}</div>
+								<div class="unit">人</div>
+							</div>
+						</div>
+
+						<div
+							class="row-item marginleft10"
+							@click="toListPage('permanent', '常住人口')"
+						>
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/jm-logo.png"
+									alt
+								/>
+								<div class="title">常住人口</div>
+							</div>
+							<div class="item-two">
+								<div class="num">
+									{{ info.inhabitant_count }}
+								</div>
+								<div class="unit">人</div>
+							</div>
+						</div>
+					</div>
+					<div class="right-row margintop18">
+						<div
+							class="row-item"
+							@click="toListPage('float', '流动人口')"
+						>
+							<div class="item-one">
+								<img
+									class="img"
+									src="@/assets/images/shuju/renfang/jm-logo.png"
+									alt
+								/>
+								<div class="title">流动人口</div>
+							</div>
+							<div class="item-two">
+								<div class="num">{{ info.floating_count }}</div>
+								<div class="unit">人</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="m-bar">
+				<div class="bar-title">
+					<img
+						class="title_img"
+						src="@/assets/images/index/list-logo.png"
+						alt
+					/>
+					<div class="tip_title">近一年人口流动变化趋势图</div>
+					<div class="title_line"></div>
+				</div>
+				<div class="bar-legend">
+					<div class="item-logo logo1"></div>
+					<div class="item-name">常住人口</div>
+					<div class="item-logo logo2 marginleft10"></div>
+					<div class="item-name">流动人口</div>
+				</div>
+				<div class="bar-main">
+					<screen-echarts-frame
+						class=""
+						@myChartMethod="barInitOk"
+						ref="barChart"
+					></screen-echarts-frame>
+				</div>
+			</div>
+
+			<!-- <screen-nodata class="nodata"
+                     v-if="showNoData"></screen-nodata> -->
+		</div>
+	</div>
+</template>
+
+<script>
+import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
+import { pieOption } from "./jmPieOption.js";
+import { barOption } from "./jmBarOption.js";
+import { requestPostBi } from "@/js/dai/request-bipass";
+
+export default {
+	props: {
+		orgId: {
+			type: String,
+			default: "",
+		},
+	},
+	components: {
+		screenEchartsFrame,
+	},
+	// mixins: [animate]
+	beforeDestroy() {
+		this.timer && clearInterval(this.timer);
+	},
+	data() {
+		return {
+			showNoData: false,
+			timer: null,
+			barChart: "",
+			pieChart: "",
+			pieOption: {},
+			barOption: {},
+			pieInitState: false,
+			barInitState: false,
+			pieData: [],
+
+			info: {
+				resident_count: 0,
+				inhabitant_count: 0,
+				floating_count: 0,
+			},
+		};
+	},
+	watch: {
+		orgId() {
+			this.getData();
+		},
+	},
+	mounted() {
+		this.getData();
+	},
+	methods: {
+		toListPage(type = "", type_name = "") {
+			this.$router.push({
+				path: "/dataBoard/renfang/resi-list",
+				query: {
+					org_id: this.orgId,
+					type,
+					type_name,
+				},
+			});
+		},
+
+		pieInitOk() {
+			this.pieInitState = true;
+		},
+		barInitOk() {
+			this.barInitState = true;
+		},
+		async getData() {
+			await this.getInfo();
+			this.getBar();
+			this.getPie();
+		},
+		getBar() {
+			if (this.barInitState) {
+				this.getBarData();
+			} else {
+				setTimeout(() => {
+					this.getBar();
+				}, 500);
+			}
+		},
+		getPie() {
+			if (this.pieInitState) {
+				this.iniPieChart();
+			} else {
+				setTimeout(() => {
+					this.getPie();
+				}, 500);
+			}
+		},
+
+		// 获取房屋总数等
+		async getInfo() {
+			const url = "resident_view";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgId,
+					},
+				},
+				{
+					// mockId: 60029804,
+				}
+			);
+
+			if (code === 0) {
+				if (data && Array.isArray(data) && data.length > 0) {
+					let info = data[0];
+					this.info = { ...this.info, ...info };
+				} else {
+					this.info = {
+						resident_count: 0,
+						inhabitant_count: 0,
+						floating_count: 0,
+					};
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		// 获取饼状图
+		async iniPieChart() {
+			this.$refs.pieChart.clear();
+			// this.$refs.pieChart.showLoading()
+
+			// 获取pieChart配置
+			this.pieOption = pieOption();
+
+			const { info } = this;
+			// 设置三个配置值
+			this.pieOption.title.text =
+				(info.resident_count != 0
+					? parseInt(
+							(100 * info.inhabitant_count) / info.resident_count
+					  )
+					: "--") + "%";
+			this.pieData = [
+				{ value: info.inhabitant_count, name: "常住人口" },
+				{ value: info.floating_count, name: "流动人口" },
+			];
+			this.pieOption.series[0].data = this.pieData;
+			this.$refs.pieChart.setOption(this.pieOption);
+			// this.$refs.pieChart.hideLoading()
+
+			// 点击饼图 切换中心显示的比例
+			this.$refs.pieChart.myChart.on("selectchanged", (params) => {
+				console.log(params);
+				const {
+					fromActionPayload: { dataIndexInside },
+				} = params;
+				this.pieOption.title.text =
+					(info.resident_count != 0
+						? parseInt(
+								(100 *
+									[
+										info.inhabitant_count,
+										info.floating_count,
+									][dataIndexInside]) /
+									info.resident_count
+						  )
+						: "--") + "%";
+				this.$refs.pieChart.myChart.setOption(this.pieOption);
+			});
+		},
+
+		// 获取房屋总数等
+		async getBarData() {
+			const url = "resident_trend";
+
+			this.$refs.barChart.showLoading();
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgId,
+					},
+				},
+				{
+					// mockId: 60389779,
+				}
+			);
+
+			if (code === 0) {
+				if (data && Array.isArray(data)) {
+					let xaxis = [];
+					let series = [{ data: [] }, { data: [] }];
+					for (const {
+						month,
+						inhabitant_count,
+						floating_count,
+					} of data) {
+						xaxis.push(month);
+						series[0].data.push(inhabitant_count);
+						series[1].data.push(floating_count);
+					}
+					this.iniBarChart(xaxis, series);
+					this.$refs.barChart.hideLoading();
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		// 获取饼状图
+		async iniBarChart(xaxis, series) {
+			this.showNoData = false;
+			this.$refs.barChart.clear();
+			this.barOption = barOption();
+			this.$refs.barChart.setOption(this.barOption, true);
+			this.$refs.barChart.setOption(
+				{
+					xAxis: { data: xaxis },
+					series,
+				},
+				true
+			);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.m-jmgl {
+	height: 100%;
+	width: 100%;
+
+	.m-pie {
+		margin-top: 24px;
+		display: flex;
+		justify-content: space-around;
+
+		.pie-left {
+			height: 120px;
+			flex: 0 0 120px;
+		}
+
+		.pie-legend {
+			.item {
+				display: flex;
+				margin-bottom: 12px;
+			}
+		}
+		.pie-right {
+			.right-row {
+				display: flex;
+				// justify-content: space-between;
+
+				.row-item {
+					flex: 0 0 100px;
+					cursor: pointer;
+
+					.item-one {
+						display: flex;
+						.img {
+							width: 15px;
+							height: 15px;
+						}
+						.title {
+							margin-left: 9px;
+							font-size: 14px;
+							font-family: PingFangSC-Regular, PingFang SC;
+							font-weight: 400;
+							color: rgba(255, 255, 255, 0.65);
+						}
+					}
+
+					.item-two {
+						margin-top: 8px;
+						display: flex;
+						align-items: flex-end;
+						margin-left: 23px;
+
+						.num {
+							font-size: 24px;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #ffffff;
+						}
+
+						.unit {
+							margin-left: 9px;
+							font-size: 14px;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #ffffff;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.m-bar {
+		position: relative;
+		margin-top: 14px;
+
+		.bar-title {
+			display: flex;
+			align-items: center;
+			// margin-left: 24px;
+
+			.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%
+				);
+			}
+		}
+
+		.bar-legend {
+			position: absolute;
+			top: 37px;
+			right: 20px;
+			display: flex;
+		}
+
+		.bar-main {
+			margin-top: 10px;
+			height: 225px;
+		}
+	}
+}
+
+.item-name {
+	margin-left: 8px;
+	font-size: 12px;
+	font-family: PingFangSC-Regular, PingFang SC;
+	font-weight: 400;
+	color: #8c8c8c;
+}
+
+.item-logo {
+	margin-top: 2px;
+	width: 8px;
+	height: 8px;
+}
+
+.logo1 {
+	background: #6fdeff;
+}
+.logo2 {
+	background: #ffaa00;
+}
+.logo3 {
+	background: #1a95ff;
+}
+.marginleft10 {
+	margin-left: 10px;
+}
+
+.margintop18 {
+	margin-top: 18px;
+}
+</style>
diff --git a/src/views/dataBoard/sida/cpts/rkyj.vue b/src/views/dataBoard/sida/cpts/rkyj.vue
new file mode 100644
index 000000000..e8d375d5a
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/rkyj.vue
@@ -0,0 +1,281 @@
+<template>
+	<div class="m-list">
+		<div class="title">
+			<div>预警居民类别</div>
+			<div>
+				<span>黄色预警</span>
+				<div class="explain">
+					<img
+						class="btn-explain"
+						src="@/assets/images/shuju/renfang/remark.png"
+					/>
+					<div class="explain-box">
+						<div
+							class="explain-item"
+							v-for="(dataitem, index) in list"
+							:key="index"
+						>
+							<span>{{ dataitem.type_name }}：</span>
+							<b>{{ dataitem.yellow_threshold }}人</b>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div>
+				<span>红色预警</span>
+				<div class="explain">
+					<img
+						class="btn-explain"
+						src="@/assets/images/shuju/renfang/remark.png"
+					/>
+					<div class="explain-box">
+						<div
+							class="explain-item"
+							v-for="(dataitem, index) in list"
+							:key="index"
+						>
+							<span>{{ dataitem.type_name }}：</span>
+							<b>{{ dataitem.red_threshold }}人</b>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="list">
+			<div v-for="(dataitem, index) in list" :key="index" class="item">
+				<div class="item-title">{{ dataitem.type_name }}</div>
+
+				<div
+					class="item-num"
+					@click="
+						toListPage('yellow', dataitem.type, dataitem.type_name)
+					"
+				>
+					<img
+						class="img"
+						src="@/assets/images/shuju/renfang/warning-yellow.png"
+						alt
+					/>{{ dataitem.yellow_warn }}栋
+				</div>
+
+				<div
+					class="item-num"
+					@click="
+						toListPage('red', dataitem.type, dataitem.type_name)
+					"
+				>
+					<img
+						class="img"
+						src="@/assets/images/shuju/renfang/warning-red.png"
+						alt
+					/>{{ dataitem.red_warn }}栋
+				</div>
+			</div>
+		</div>
+
+		<div class="empty" v-if="list.length == 0">
+			<img src="~@/assets/images/shuju/renfang/index/empty.png" />
+		</div>
+	</div>
+</template>
+
+<script>
+import { requestPostBi } from "@/js/dai/request-bipass";
+
+export default {
+	props: {
+		orgId: {
+			type: String,
+			default: "",
+		},
+	},
+	data() {
+		return {
+			list: [
+				{
+					type: "",
+					type_name: "--",
+					yellow_warn: "--",
+					red_warn: "--",
+					yellow_threshold: "--",
+					red_threshold: "--",
+				},
+			],
+		};
+	},
+	mounted() {
+		this.getList();
+	},
+
+	watch: {
+		orgId() {
+			this.getList();
+		},
+	},
+	methods: {
+		toListPage(level, type_id = "", type_name) {
+			this.$router.push({
+				path: "/dataBoard/renfang/warn-building",
+				query: {
+					org_id: this.orgId,
+					type_id,
+					type_name,
+					level,
+				},
+			});
+		},
+
+		async getList() {
+			const url = "resident_class_warn";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgId,
+					},
+				},
+				{
+					// mockId: 60040087,
+				}
+			);
+
+			if (code === 0) {
+				if (data && Array.isArray(data)) {
+					this.list = data;
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/c/config.scss";
+@import "@/assets/scss/c/function.scss";
+.m-list {
+	padding-bottom: 20px;
+
+	.title {
+		margin: 24px 0 24px 24px;
+		display: flex;
+		justify-content: space-between;
+		font-size: 16px;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #ffffff;
+
+		> div {
+			width: 33%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			&:first-child {
+				text-align: left;
+				justify-content: flex-start;
+			}
+
+			.explain {
+				position: relative;
+				margin-left: 4px;
+				.btn-explain {
+					width: 15px;
+					height: 15px;
+				}
+				&:hover {
+					.explain-box {
+						display: block;
+					}
+				}
+				.explain-box {
+					position: absolute;
+					display: none;
+					top: 30px;
+					left: -140px;
+					padding: 15px 5px;
+					box-sizing: border-box;
+					width: 180px;
+					background: #00023a;
+					border-radius: 2px;
+					border: 1px solid #1a95ff;
+
+					.explain-item {
+						@include toe;
+						font-size: 14px;
+						font-family: PingFang SC;
+						font-weight: 400;
+						color: rgba(#ffffff, 0.85);
+						line-height: 28px;
+
+						span {
+							display: inline-block;
+							margin-right: 5px;
+							min-width: 90px;
+							text-align: right;
+							color: rgba(#ffffff, 0.65);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.list {
+		/deep/ .el-scrollbar__wrap {
+			// width: 100% !important;
+			overflow-x: hidden !important;
+		}
+
+		.item {
+			padding: 12px 20px 12px 24px;
+			font-size: 14px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #ffffff;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.item-title {
+				width: 33%;
+			}
+
+			.item-num {
+				width: 33%;
+				text-align: center;
+				cursor: pointer;
+				.img {
+					display: inline-block;
+					width: 32px;
+					height: 32px;
+					margin-right: 8px;
+				}
+			}
+		}
+		.item:nth-child(2n-1) {
+			background: rgba(26, 149, 255, 0.15);
+		}
+	}
+
+	.empty {
+		> img {
+			display: block;
+			width: 120px;
+			margin: 0 auto;
+			margin-top: 80px;
+		}
+		> span {
+			margin-top: 8px;
+			display: block;
+			font-size: 14px;
+			font-family: PingFangSC-Regular, PingFang SC;
+			font-weight: 400;
+			color: rgba(255, 255, 255, 0.65);
+			line-height: 20px;
+			text-align: center;
+		}
+	}
+}
+</style>
diff --git a/src/views/dataBoard/sida/cpts/sqpj.vue b/src/views/dataBoard/sida/cpts/sqpj.vue
new file mode 100644
index 000000000..64439a6c5
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/sqpj.vue
@@ -0,0 +1,160 @@
+<template>
+	<div>
+		<div class="tablist">
+			<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]" @click="currentTab = item">{{ item }}</div>
+		</div>
+		<div>
+			<div class="linecharts" v-if="resiCategoryData.length > 0">
+				<div class="item" @click="toResiClassPage(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>
+</template>
+<script>
+import screenEchartsFrame from '@/views/dataBoard/cpts/screen-echarts-frame/index';
+import { requestPostBi } from '@/js/dai/request-bipass';
+export default {
+	props: {
+		orgId: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			resiCategoryData: [],
+			showNoData: false,
+			timer: null,
+			pieChart: '',
+			pieOption: {},
+			pieInitState: false,
+			pieData: [],
+			tabList: [
+				'满意度',
+				'关注度',
+				'期盼度',
+				'烦心度'
+				// "下级人口分布",
+			],
+			currentTab: '满意度',
+			info: {
+				male_count: 0,
+				female_count: 0,
+				resi_y_house_y_count: 0,
+				resi_y_house_n_count: 0,
+				resi_n_house_y_count: 0,
+				primary_count: 0,
+				junior_high_count: 0,
+				second_speci_count: 0,
+				high_school_count: 0,
+				junior_college_count: 0,
+				undergrad_count: 0,
+				master_count: 0,
+				doctor_count: 0,
+				local_count: 0,
+				field_count: 0,
+				age50_count: 0,
+				age5059_count: 0,
+				age6069_count: 0,
+				age7079_count: 0,
+				age80_count: 0,
+				culture_count: 0,
+				committee_count: 0,
+				capable_count: 0,
+				friend_count: 0,
+				agent_count: 0,
+				mediator_count: 0,
+				collector_count: 0,
+				security_count: 0,
+				party_mem_count: 0
+			}
+		};
+	},
+	components: {
+		screenEchartsFrame
+	},
+	mounted() {
+		this.init();
+	},
+	watch: {
+		currentTab() {
+			this.getResiCategoryData();
+		},
+		orgId() {
+			this.init();
+		}
+	},
+	methods: {
+		async init() {
+			this.getResiCategoryData();
+		},
+		handleClickItem(item) {
+			const { type, name } = item;
+			this.$router.push({
+				path: '/dataBoard/renfang/resi-analyze',
+				query: {
+					org_id: this.orgId,
+					type,
+					type_category: this.currentTab,
+					type_name: name
+				}
+			});
+		},
+		selItem(selItem, selIndex) {
+			this.tabList.forEach((element, index) => {
+				if (index === selIndex) {
+					element.sel = true;
+				} else {
+					element.sel = false;
+				}
+			});
+		},
+		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);
+			}
+		}
+	}
+};
+</script>
+<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>
diff --git a/src/views/dataBoard/sida/cpts/szsq.vue b/src/views/dataBoard/sida/cpts/szsq.vue
new file mode 100644
index 000000000..7b42cf36c
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/szsq.vue
@@ -0,0 +1,197 @@
+<template>
+	<div class="szsq-main">
+		<div class="item">
+			<img
+				class="img"
+				src="@/assets/images/shuju/renfang/szsq-logo.png"
+				alt
+			/>
+			<div class="content">
+				<div class="row1">
+					<div class="title">社区开通占比</div>
+					<div class="line"></div>
+				</div>
+				<div class="row2">
+					<span class="num">{{ info.per }}</span>
+					<span class="unit">%</span>
+				</div>
+			</div>
+		</div>
+
+		<div class="item">
+			<img
+				class="img"
+				src="@/assets/images/shuju/renfang/szsq-logo.png"
+				alt
+			/>
+			<div class="content">
+				<div class="row1">
+					<div class="title">社区总数</div>
+					<div class="line"></div>
+				</div>
+				<div class="row2">
+					<span class="num">{{ info.community_count }}</span>
+					<span class="unit">个</span>
+				</div>
+			</div>
+		</div>
+
+		<div class="item">
+			<img
+				class="img"
+				src="@/assets/images/shuju/renfang/szsq-logo.png"
+				alt
+			/>
+			<div class="content">
+				<div class="row1">
+					<div class="title">开通数量</div>
+					<div class="line"></div>
+				</div>
+				<div class="row2">
+					<span class="num">{{ info.account_count }}</span>
+					<span class="unit">个</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { requestPostBi } from "@/js/dai/request-bipass";
+
+export default {
+	props: {
+		orgId: {
+			type: String,
+			default: "",
+		},
+	},
+	data() {
+		return {
+			info: {
+				per: "--",
+				community_count: "--",
+				account_count: "--",
+			},
+		};
+	},
+	mounted() {
+		this.getInfo();
+	},
+
+	watch: {
+		orgId() {
+			this.getInfo();
+		},
+	},
+	methods: {
+		// 社区开通占比
+		async getInfo() {
+			const url = "account_view";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id: this.orgId,
+					},
+				},
+				{
+					// mockId: 61305622,
+				}
+			);
+
+			if (code === 0) {
+				if (data && Array.isArray(data) && data.length > 0) {
+					let info = data[0];
+					this.info.community_count = info.community_count;
+					this.info.account_count = info.account_count;
+					this.info.per = parseInt(
+						(100 * info.account_count) / info.community_count
+					);
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.szsq-main {
+	margin-top: 22px;
+	display: flex;
+	justify-content: space-around;
+
+	.item {
+		display: flex;
+
+		.img {
+			width: 24px;
+			height: 24px;
+		}
+
+		&:first-child {
+			.img {
+				margin-top: -5px;
+				width: 64px;
+				height: 64px;
+			}
+
+			.content {
+				margin-top: 5px;
+				margin-left: 15px;
+			}
+		}
+
+		.content {
+			margin-top: 5px;
+			margin-left: 5px;
+
+			.row1 {
+				.title {
+					font-size: 14px;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: rgba(255, 255, 255, 0.65);
+					padding-left: 8px;
+				}
+
+				.line {
+					margin-top: -6px;
+					width: 88px;
+					height: 8px;
+					background: linear-gradient(
+						270deg,
+						rgba(168, 241, 255, 0) 0%,
+						#6fdeff 100%
+					);
+					opacity: 0.25;
+				}
+			}
+
+			.row2 {
+				margin-top: 4px;
+				padding-left: 8px;
+
+				.num {
+					font-size: 24px;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #ffffff;
+					line-height: 33px;
+				}
+
+				.unit {
+					margin-left: 9px;
+					font-size: 14px;
+					font-family: PingFangSC-Medium, PingFang SC;
+					font-weight: 500;
+					color: #ffffff;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/dataBoard/sida/cpts/wtqd.vue b/src/views/dataBoard/sida/cpts/wtqd.vue
new file mode 100644
index 000000000..1e5b0f10f
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/wtqd.vue
@@ -0,0 +1,318 @@
+<template>
+	<div class="m-wtqd">
+		<div class="tablist">
+			<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]"
+				@click="currentTab = item">
+				{{ item }}
+			</div>
+		</div>
+		<div class="pieMain">
+			<div class="legend">
+				<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)">
+					<div class="name">{{ item.name }}</div>
+					<div class="content">
+						<div class="num">{{ item.value }}</div>
+						<div class="unit">人</div>
+					</div>
+				</div>
+			</div>
+			<div class="pie">
+				<screen-echarts-frame @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
+	import {
+		pieOption
+	} from "./wtqdPieOption.js";
+	import {
+		requestPostBi
+	} from "@/js/dai/request-bipass";
+	export default {
+		props: {
+			orgId: {
+				type: String,
+				default: "",
+			},
+		},
+		data() {
+			return {
+				showNoData: false,
+				timer: null,
+				pieChart: "",
+				pieOption: {},
+				pieInitState: false,
+				pieData: [],
+				tabList: ["治理事件", "安全隐患", "综治人群"
+					// "下级人口分布",
+				],
+				currentTab: "治理事件",
+				info: {
+					male_count: 0,
+					female_count: 0,
+					resi_y_house_y_count: 0,
+					resi_y_house_n_count: 0,
+					resi_n_house_y_count: 0,
+					primary_count: 0,
+					junior_high_count: 0,
+					second_speci_count: 0,
+					high_school_count: 0,
+					junior_college_count: 0,
+					undergrad_count: 0,
+					master_count: 0,
+					doctor_count: 0,
+					local_count: 0,
+					field_count: 0,
+					age50_count: 0,
+					age5059_count: 0,
+					age6069_count: 0,
+					age7079_count: 0,
+					age80_count: 0,
+					culture_count: 0,
+					committee_count: 0,
+					capable_count: 0,
+					friend_count: 0,
+					agent_count: 0,
+					mediator_count: 0,
+					collector_count: 0,
+					security_count: 0,
+					party_mem_count: 0,
+				},
+			};
+		},
+		components: {
+			screenEchartsFrame,
+		},
+		mounted() {
+			this.init();
+		},
+		watch: {
+			currentTab() {
+				this.setPieData();
+			},
+			orgId() {
+				this.init();
+			},
+		},
+		methods: {
+			async init() {
+				await this.getInfo();
+				this.getPie();
+			},
+			handleClickItem(item) {
+				const {
+					type,
+					name
+				} = item;
+				this.$router.push({
+					path: "/dataBoard/renfang/resi-analyze",
+					query: {
+						org_id: this.orgId,
+						type,
+						type_category: this.currentTab,
+						type_name: name,
+					},
+				});
+			},
+			// 获取房屋总数等
+			async getInfo() {
+				const url = "resident_analyze";
+				this.$refs.pieChart.showLoading();
+				const {
+					data,
+					code,
+					msg
+				} = await requestPostBi(url, {
+					queryParam: {
+						org_id: this.orgId,
+					},
+				}, {
+					// mockId: 60041615,
+				});
+				this.$refs.pieChart.hideLoading();
+				if (code === 0) {
+					if (data && Array.isArray(data) && data.length > 0) {
+						let info = data[0];
+						this.info = {
+							...this.info,
+							...info
+						};
+					}
+				} else {
+					this.$message.error(msg);
+				}
+			},
+			selItem(selItem, selIndex) {
+				this.tabList.forEach((element, index) => {
+					if (index === selIndex) {
+						element.sel = true;
+					} else {
+						element.sel = false;
+					}
+				});
+			},
+			pieInitOk() {
+				this.pieInitState = true;
+			},
+			getPie() {
+				if (this.pieInitState) {
+					this.setPieData();
+				} else {
+					setTimeout(() => {
+						this.getPie();
+					}, 500);
+				}
+			},
+			setPieData() {
+				const {
+					currentTab,
+					info
+				} = this;
+				if (currentTab == "性别") {
+					this.pieData = [{
+						value: info.male_count || 0,
+						type: "male_count",
+						name: "男性",
+					}, {
+						value: info.female_count || 0,
+						type: "female_count",
+						name: "女性",
+					}, ];
+				} else if (currentTab == "户籍") {
+					this.pieData = [{
+						value: info.local_count || 0,
+						type: "local_count",
+						name: "本地户籍",
+					}, {
+						value: info.field_count || 0,
+						type: "field_count",
+						name: "外地户籍",
+					}, ];
+				} else if (currentTab == "人户状况") {
+					this.pieData = [{
+						value: info.resi_y_house_y_count || 0,
+						type: "resi_y_house_y_count",
+						name: "人户一致",
+					}, {
+						value: info.resi_y_house_n_count || 0,
+						type: "resi_y_house_n_count",
+						name: "人在户不在",
+					}, {
+						value: info.resi_n_house_y_count || 0,
+						type: "resi_n_house_y_count",
+						name: "户在人不在",
+					}, ];
+				} else if (currentTab == "年龄") {
+					this.pieData = [{
+						value: info.age50_count || 0,
+						type: "age50_count",
+						name: "50岁以下",
+					}, {
+						value: info.age5059_count || 0,
+						type: "age5059_count",
+						name: "50-59岁",
+					}, {
+						value: info.age6069_count || 0,
+						type: "age6069_count",
+						name: "60-69岁",
+					}, {
+						value: info.age7079_count || 0,
+						type: "age7079_count",
+						name: "70-79岁",
+					}, {
+						value: info.age80_count || 0,
+						type: "age80_count",
+						name: "80岁以上",
+					}, ];
+				} else if (currentTab == "志愿者类别") {
+					this.pieData = [{
+						value: info.culture_count || 0,
+						type: "culture_count",
+						name: "文化队伍",
+					}, {
+						value: info.committee_count || 0,
+						type: "committee_count",
+						name: "楼委会",
+					}, {
+						value: info.capable_count || 0,
+						type: "capable_count",
+						name: "能人达人",
+					}, {
+						value: info.friend_count || 0,
+						type: "friend_count",
+						name: "老友俱乐部",
+					}, {
+						value: info.agent_count || 0,
+						type: "agent_count",
+						name: "代办员",
+					}, {
+						value: info.mediator_count || 0,
+						type: "mediator_count",
+						name: "调解员",
+					}, {
+						value: info.collector_count || 0,
+						type: "collector_count",
+						name: "采集员",
+					}, {
+						value: info.security_count || 0,
+						type: "security_count",
+						name: "治安巡逻员",
+					}, {
+						value: info.party_mem_count || 0,
+						type: "party_mem_count",
+						name: "党员中心户",
+					}, ];
+				} else if (currentTab == "党员文化程度") {
+					this.pieData = [{
+						value: info.primary_count || 0,
+						type: "primary_count",
+						name: "小学及文盲",
+					}, {
+						value: info.junior_high_count || 0,
+						type: "junior_high_count",
+						name: "初中",
+					}, {
+						value: info.second_speci_count || 0,
+						type: "second_speci_count",
+						name: "中专",
+					}, {
+						value: info.high_school_count || 0,
+						type: "high_school_count",
+						name: "高中",
+					}, {
+						value: info.junior_college_count || 0,
+						type: "junior_college_count",
+						name: "大专",
+					}, {
+						value: info.undergrad_count || 0,
+						type: "undergrad_count",
+						name: "本科",
+					}, {
+						value: info.master_count || 0,
+						type: "master_count",
+						name: "硕士",
+					}, {
+						value: info.doctor_count || 0,
+						type: "doctor_count",
+						name: "博士",
+					}, ];
+				} else if (currentTab == "下级人口分布") {
+					this.pieData = [];
+				}
+				this.iniPieChart();
+			},
+			// 获取饼状图
+			async iniPieChart() {
+				this.$refs.pieChart.clear();
+				// 获取pieChart配置
+				this.pieOption = pieOption();
+				this.pieOption.series[0].name = this.currentTab;
+				this.pieOption.series[0].data = this.pieData;
+				this.$refs.pieChart.setOption(this.pieOption);
+			},
+		},
+	};
+</script>
+<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>
diff --git a/src/views/dataBoard/sida/cpts/wtqdPieOption.js b/src/views/dataBoard/sida/cpts/wtqdPieOption.js
new file mode 100644
index 000000000..5772b0f4a
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/wtqdPieOption.js
@@ -0,0 +1,54 @@
+import * as echarts from "echarts";
+export function pieOption() {
+	const center = ["50%", "170px"];
+	return {
+		color: [
+			"#1A95FF",
+			"#FF6138",
+			"#2adcea",
+			"#2cc4ad",
+			"#7377f5",
+			"#32de66",
+			"#8155d4",
+			"#c7ea48",
+			"#ef47c2",
+			"d43349",
+		],
+		tooltip: {
+			trigger: "item",
+		},
+		series: [
+			{
+				name: "",
+				type: "pie",
+				radius: [40, 130],
+				center: ["50%", "50%"],
+				roseType: "area",
+				itemStyle: {
+					borderRadius: 1,
+				},
+				avoidLabelOverlap: false,
+				labelLine: {
+					show: false,
+				},
+				label: {
+					normal: {
+						position: "inner",
+						show: true,
+						formatter: "{d}%",
+						fontSize: 24,
+						color: "#FFFFFF",
+					},
+				},
+				emphasis: {
+					label: {
+						show: true,
+						// fontSize: 36,
+						fontWeight: "bold",
+					},
+				},
+				data: [],
+			},
+		],
+	};
+}
diff --git a/src/views/dataBoard/sida/cpts/xqqd.vue b/src/views/dataBoard/sida/cpts/xqqd.vue
new file mode 100644
index 000000000..6c420e223
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/xqqd.vue
@@ -0,0 +1,319 @@
+<template>
+	<div class="m-xqqd">
+		<div class="tablist">
+			<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]"
+				@click="currentTab = item">
+				{{ item }}
+			</div>
+		</div>
+		<div class="pieMain">
+			<div class="legend">
+				<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)">
+					<div class="name">{{ item.name }}</div>
+					<div class="content">
+						<div class="num">{{ item.value }}</div>
+						<div class="unit">人</div>
+					</div>
+				</div>
+			</div>
+			<div class="pie">
+				<screen-echarts-frame @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
+	import {
+		pieOption
+	} from "./xqqdPieOption.js";
+	import {
+		requestPostBi
+	} from "@/js/dai/request-bipass";
+	export default {
+		props: {
+			orgId: {
+				type: String,
+				default: "",
+			},
+		},
+		data() {
+			return {
+				showNoData: false,
+				timer: null,
+				pieChart: "",
+				pieOption: {},
+				pieInitState: false,
+				pieData: [],
+				tabList: ["个性需求", "共性需求"
+					// "下级人口分布",
+				],
+				currentTab: "个性需求",
+				info: {
+					male_count: 0,
+					female_count: 0,
+					resi_y_house_y_count: 0,
+					resi_y_house_n_count: 0,
+					resi_n_house_y_count: 0,
+					primary_count: 0,
+					junior_high_count: 0,
+					second_speci_count: 0,
+					high_school_count: 0,
+					junior_college_count: 0,
+					undergrad_count: 0,
+					master_count: 0,
+					doctor_count: 0,
+					local_count: 0,
+					field_count: 0,
+					age50_count: 0,
+					age5059_count: 0,
+					age6069_count: 0,
+					age7079_count: 0,
+					age80_count: 0,
+					culture_count: 0,
+					committee_count: 0,
+					capable_count: 0,
+					friend_count: 0,
+					agent_count: 0,
+					mediator_count: 0,
+					collector_count: 0,
+					security_count: 0,
+					party_mem_count: 0,
+				},
+			};
+		},
+		components: {
+			screenEchartsFrame,
+		},
+		mounted() {
+			this.init();
+		},
+		watch: {
+			currentTab() {
+				this.setPieData();
+			},
+			orgId() {
+				this.init();
+			},
+		},
+		methods: {
+			async init() {
+				await this.getInfo();
+				this.getPie();
+			},
+			handleClickItem(item) {
+				const {
+					type,
+					name
+				} = item;
+				this.$router.push({
+					path: "/dataBoard/renfang/resi-analyze",
+					query: {
+						org_id: this.orgId,
+						type,
+						type_category: this.currentTab,
+						type_name: name,
+					},
+				});
+			},
+			// 获取房屋总数等
+			async getInfo() {
+				const url = "resident_analyze";
+				this.$refs.pieChart.showLoading();
+				const {
+					data,
+					code,
+					msg
+				} = await requestPostBi(url, {
+					queryParam: {
+						org_id: this.orgId,
+					},
+				}, {
+					// mockId: 60041615,
+				});
+				this.$refs.pieChart.hideLoading();
+				if (code === 0) {
+					if (data && Array.isArray(data) && data.length > 0) {
+						let info = data[0];
+						this.info = {
+							...this.info,
+							...info
+						};
+					}
+				} else {
+					this.$message.error(msg);
+				}
+			},
+			selItem(selItem, selIndex) {
+				this.tabList.forEach((element, index) => {
+					if (index === selIndex) {
+						element.sel = true;
+					} else {
+						element.sel = false;
+					}
+				});
+			},
+			pieInitOk() {
+				this.pieInitState = true;
+			},
+			getPie() {
+				if (this.pieInitState) {
+					this.setPieData();
+				} else {
+					setTimeout(() => {
+						this.getPie();
+					}, 500);
+				}
+			},
+			setPieData() {
+				const {
+					currentTab,
+					info
+				} = this;
+				if (currentTab == "性别") {
+					this.pieData = [{
+						value: info.male_count || 0,
+						type: "male_count",
+						name: "男性",
+					}, {
+						value: info.female_count || 0,
+						type: "female_count",
+						name: "女性",
+					}, ];
+				} else if (currentTab == "户籍") {
+					this.pieData = [{
+						value: info.local_count || 0,
+						type: "local_count",
+						name: "本地户籍",
+					}, {
+						value: info.field_count || 0,
+						type: "field_count",
+						name: "外地户籍",
+					}, ];
+				} else if (currentTab == "人户状况") {
+					this.pieData = [{
+						value: info.resi_y_house_y_count || 0,
+						type: "resi_y_house_y_count",
+						name: "人户一致",
+					}, {
+						value: info.resi_y_house_n_count || 0,
+						type: "resi_y_house_n_count",
+						name: "人在户不在",
+					}, {
+						value: info.resi_n_house_y_count || 0,
+						type: "resi_n_house_y_count",
+						name: "户在人不在",
+					}, ];
+				} else if (currentTab == "年龄") {
+					this.pieData = [{
+						value: info.age50_count || 0,
+						type: "age50_count",
+						name: "50岁以下",
+					}, {
+						value: info.age5059_count || 0,
+						type: "age5059_count",
+						name: "50-59岁",
+					}, {
+						value: info.age6069_count || 0,
+						type: "age6069_count",
+						name: "60-69岁",
+					}, {
+						value: info.age7079_count || 0,
+						type: "age7079_count",
+						name: "70-79岁",
+					}, {
+						value: info.age80_count || 0,
+						type: "age80_count",
+						name: "80岁以上",
+					}, ];
+				} else if (currentTab == "志愿者类别") {
+					this.pieData = [{
+						value: info.culture_count || 0,
+						type: "culture_count",
+						name: "文化队伍",
+					}, {
+						value: info.committee_count || 0,
+						type: "committee_count",
+						name: "楼委会",
+					}, {
+						value: info.capable_count || 0,
+						type: "capable_count",
+						name: "能人达人",
+					}, {
+						value: info.friend_count || 0,
+						type: "friend_count",
+						name: "老友俱乐部",
+					}, {
+						value: info.agent_count || 0,
+						type: "agent_count",
+						name: "代办员",
+					}, {
+						value: info.mediator_count || 0,
+						type: "mediator_count",
+						name: "调解员",
+					}, {
+						value: info.collector_count || 0,
+						type: "collector_count",
+						name: "采集员",
+					}, {
+						value: info.security_count || 0,
+						type: "security_count",
+						name: "治安巡逻员",
+					}, {
+						value: info.party_mem_count || 0,
+						type: "party_mem_count",
+						name: "党员中心户",
+					}, ];
+				} else if (currentTab == "党员文化程度") {
+					this.pieData = [{
+						value: info.primary_count || 0,
+						type: "primary_count",
+						name: "小学及文盲",
+					}, {
+						value: info.junior_high_count || 0,
+						type: "junior_high_count",
+						name: "初中",
+					}, {
+						value: info.second_speci_count || 0,
+						type: "second_speci_count",
+						name: "中专",
+					}, {
+						value: info.high_school_count || 0,
+						type: "high_school_count",
+						name: "高中",
+					}, {
+						value: info.junior_college_count || 0,
+						type: "junior_college_count",
+						name: "大专",
+					}, {
+						value: info.undergrad_count || 0,
+						type: "undergrad_count",
+						name: "本科",
+					}, {
+						value: info.master_count || 0,
+						type: "master_count",
+						name: "硕士",
+					}, {
+						value: info.doctor_count || 0,
+						type: "doctor_count",
+						name: "博士",
+					}, ];
+				} else if (currentTab == "下级人口分布") {
+					this.pieData = [];
+				}
+				this.iniPieChart();
+			},
+			// 获取饼状图
+			async iniPieChart() {
+				this.$refs.pieChart.clear();
+				// 获取pieChart配置
+				this.pieOption = pieOption();
+				this.pieOption.series[0].name = this.currentTab;
+				this.pieOption.series[0].data = this.pieData;
+				this.$refs.pieChart.setOption(this.pieOption);
+			},
+		},
+	};
+</script>
+
+<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>
diff --git a/src/views/dataBoard/sida/cpts/xqqdPieOption.js b/src/views/dataBoard/sida/cpts/xqqdPieOption.js
new file mode 100644
index 000000000..5772b0f4a
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/xqqdPieOption.js
@@ -0,0 +1,54 @@
+import * as echarts from "echarts";
+export function pieOption() {
+	const center = ["50%", "170px"];
+	return {
+		color: [
+			"#1A95FF",
+			"#FF6138",
+			"#2adcea",
+			"#2cc4ad",
+			"#7377f5",
+			"#32de66",
+			"#8155d4",
+			"#c7ea48",
+			"#ef47c2",
+			"d43349",
+		],
+		tooltip: {
+			trigger: "item",
+		},
+		series: [
+			{
+				name: "",
+				type: "pie",
+				radius: [40, 130],
+				center: ["50%", "50%"],
+				roseType: "area",
+				itemStyle: {
+					borderRadius: 1,
+				},
+				avoidLabelOverlap: false,
+				labelLine: {
+					show: false,
+				},
+				label: {
+					normal: {
+						position: "inner",
+						show: true,
+						formatter: "{d}%",
+						fontSize: 24,
+						color: "#FFFFFF",
+					},
+				},
+				emphasis: {
+					label: {
+						show: true,
+						// fontSize: 36,
+						fontWeight: "bold",
+					},
+				},
+				data: [],
+			},
+		],
+	};
+}
diff --git a/src/views/dataBoard/sida/cpts/zyqd.vue b/src/views/dataBoard/sida/cpts/zyqd.vue
new file mode 100644
index 000000000..b5cbc4fb9
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/zyqd.vue
@@ -0,0 +1,319 @@
+<template>
+	<div class="m-zyqd">
+		<div class="tablist">
+			<div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]"
+				@click="currentTab = item">
+				{{ item }}
+			</div>
+		</div>
+		<div class="pieMain">
+			<div class="legend">
+				<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)">
+					<div class="name">{{ item.name }}</div>
+					<div class="content">
+						<div class="num">{{ item.value }}</div>
+						<div class="unit">人</div>
+					</div>
+				</div>
+			</div>
+			<div class="pie">
+				<screen-echarts-frame @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
+	import {
+		pieOption
+	} from "./fwqdPieOption.js";
+	import {
+		requestPostBi
+	} from "@/js/dai/request-bipass";
+	export default {
+		props: {
+			orgId: {
+				type: String,
+				default: "",
+			},
+		},
+		data() {
+			return {
+				showNoData: false,
+				timer: null,
+				pieChart: "",
+				pieOption: {},
+				pieInitState: false,
+				pieData: [],
+				tabList: ["人资源", "物资源", "场所资源"
+					// "下级人口分布",
+				],
+				currentTab: "人资源",
+				info: {
+					male_count: 0,
+					female_count: 0,
+					resi_y_house_y_count: 0,
+					resi_y_house_n_count: 0,
+					resi_n_house_y_count: 0,
+					primary_count: 0,
+					junior_high_count: 0,
+					second_speci_count: 0,
+					high_school_count: 0,
+					junior_college_count: 0,
+					undergrad_count: 0,
+					master_count: 0,
+					doctor_count: 0,
+					local_count: 0,
+					field_count: 0,
+					age50_count: 0,
+					age5059_count: 0,
+					age6069_count: 0,
+					age7079_count: 0,
+					age80_count: 0,
+					culture_count: 0,
+					committee_count: 0,
+					capable_count: 0,
+					friend_count: 0,
+					agent_count: 0,
+					mediator_count: 0,
+					collector_count: 0,
+					security_count: 0,
+					party_mem_count: 0,
+				},
+			};
+		},
+		components: {
+			screenEchartsFrame,
+		},
+		mounted() {
+			this.init();
+		},
+		watch: {
+			currentTab() {
+				this.setPieData();
+			},
+			orgId() {
+				this.init();
+			},
+		},
+		methods: {
+			async init() {
+				await this.getInfo();
+				this.getPie();
+			},
+			handleClickItem(item) {
+				const {
+					type,
+					name
+				} = item;
+				this.$router.push({
+					path: "/dataBoard/renfang/resi-analyze",
+					query: {
+						org_id: this.orgId,
+						type,
+						type_category: this.currentTab,
+						type_name: name,
+					},
+				});
+			},
+			// 获取房屋总数等
+			async getInfo() {
+				const url = "resident_analyze";
+				this.$refs.pieChart.showLoading();
+				const {
+					data,
+					code,
+					msg
+				} = await requestPostBi(url, {
+					queryParam: {
+						org_id: this.orgId,
+					},
+				}, {
+					// mockId: 60041615,
+				});
+				this.$refs.pieChart.hideLoading();
+				if (code === 0) {
+					if (data && Array.isArray(data) && data.length > 0) {
+						let info = data[0];
+						this.info = {
+							...this.info,
+							...info
+						};
+					}
+				} else {
+					this.$message.error(msg);
+				}
+			},
+			selItem(selItem, selIndex) {
+				this.tabList.forEach((element, index) => {
+					if (index === selIndex) {
+						element.sel = true;
+					} else {
+						element.sel = false;
+					}
+				});
+			},
+			pieInitOk() {
+				this.pieInitState = true;
+			},
+			getPie() {
+				if (this.pieInitState) {
+					this.setPieData();
+				} else {
+					setTimeout(() => {
+						this.getPie();
+					}, 500);
+				}
+			},
+			setPieData() {
+				const {
+					currentTab,
+					info
+				} = this;
+				if (currentTab == "性别") {
+					this.pieData = [{
+						value: info.male_count || 0,
+						type: "male_count",
+						name: "男性",
+					}, {
+						value: info.female_count || 0,
+						type: "female_count",
+						name: "女性",
+					}, ];
+				} else if (currentTab == "户籍") {
+					this.pieData = [{
+						value: info.local_count || 0,
+						type: "local_count",
+						name: "本地户籍",
+					}, {
+						value: info.field_count || 0,
+						type: "field_count",
+						name: "外地户籍",
+					}, ];
+				} else if (currentTab == "人户状况") {
+					this.pieData = [{
+						value: info.resi_y_house_y_count || 0,
+						type: "resi_y_house_y_count",
+						name: "人户一致",
+					}, {
+						value: info.resi_y_house_n_count || 0,
+						type: "resi_y_house_n_count",
+						name: "人在户不在",
+					}, {
+						value: info.resi_n_house_y_count || 0,
+						type: "resi_n_house_y_count",
+						name: "户在人不在",
+					}, ];
+				} else if (currentTab == "年龄") {
+					this.pieData = [{
+						value: info.age50_count || 0,
+						type: "age50_count",
+						name: "50岁以下",
+					}, {
+						value: info.age5059_count || 0,
+						type: "age5059_count",
+						name: "50-59岁",
+					}, {
+						value: info.age6069_count || 0,
+						type: "age6069_count",
+						name: "60-69岁",
+					}, {
+						value: info.age7079_count || 0,
+						type: "age7079_count",
+						name: "70-79岁",
+					}, {
+						value: info.age80_count || 0,
+						type: "age80_count",
+						name: "80岁以上",
+					}, ];
+				} else if (currentTab == "志愿者类别") {
+					this.pieData = [{
+						value: info.culture_count || 0,
+						type: "culture_count",
+						name: "文化队伍",
+					}, {
+						value: info.committee_count || 0,
+						type: "committee_count",
+						name: "楼委会",
+					}, {
+						value: info.capable_count || 0,
+						type: "capable_count",
+						name: "能人达人",
+					}, {
+						value: info.friend_count || 0,
+						type: "friend_count",
+						name: "老友俱乐部",
+					}, {
+						value: info.agent_count || 0,
+						type: "agent_count",
+						name: "代办员",
+					}, {
+						value: info.mediator_count || 0,
+						type: "mediator_count",
+						name: "调解员",
+					}, {
+						value: info.collector_count || 0,
+						type: "collector_count",
+						name: "采集员",
+					}, {
+						value: info.security_count || 0,
+						type: "security_count",
+						name: "治安巡逻员",
+					}, {
+						value: info.party_mem_count || 0,
+						type: "party_mem_count",
+						name: "党员中心户",
+					}, ];
+				} else if (currentTab == "党员文化程度") {
+					this.pieData = [{
+						value: info.primary_count || 0,
+						type: "primary_count",
+						name: "小学及文盲",
+					}, {
+						value: info.junior_high_count || 0,
+						type: "junior_high_count",
+						name: "初中",
+					}, {
+						value: info.second_speci_count || 0,
+						type: "second_speci_count",
+						name: "中专",
+					}, {
+						value: info.high_school_count || 0,
+						type: "high_school_count",
+						name: "高中",
+					}, {
+						value: info.junior_college_count || 0,
+						type: "junior_college_count",
+						name: "大专",
+					}, {
+						value: info.undergrad_count || 0,
+						type: "undergrad_count",
+						name: "本科",
+					}, {
+						value: info.master_count || 0,
+						type: "master_count",
+						name: "硕士",
+					}, {
+						value: info.doctor_count || 0,
+						type: "doctor_count",
+						name: "博士",
+					}, ];
+				} else if (currentTab == "下级人口分布") {
+					this.pieData = [];
+				}
+				this.iniPieChart();
+			},
+			// 获取饼状图
+			async iniPieChart() {
+				this.$refs.pieChart.clear();
+				// 获取pieChart配置
+				this.pieOption = pieOption();
+				this.pieOption.series[0].name = this.currentTab;
+				this.pieOption.series[0].data = this.pieData;
+				this.$refs.pieChart.setOption(this.pieOption);
+			},
+		},
+	};
+</script>
+
+<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/dataBoard/sida/cpts/zyqdPieOption.js b/src/views/dataBoard/sida/cpts/zyqdPieOption.js
new file mode 100644
index 000000000..5772b0f4a
--- /dev/null
+++ b/src/views/dataBoard/sida/cpts/zyqdPieOption.js
@@ -0,0 +1,54 @@
+import * as echarts from "echarts";
+export function pieOption() {
+	const center = ["50%", "170px"];
+	return {
+		color: [
+			"#1A95FF",
+			"#FF6138",
+			"#2adcea",
+			"#2cc4ad",
+			"#7377f5",
+			"#32de66",
+			"#8155d4",
+			"#c7ea48",
+			"#ef47c2",
+			"d43349",
+		],
+		tooltip: {
+			trigger: "item",
+		},
+		series: [
+			{
+				name: "",
+				type: "pie",
+				radius: [40, 130],
+				center: ["50%", "50%"],
+				roseType: "area",
+				itemStyle: {
+					borderRadius: 1,
+				},
+				avoidLabelOverlap: false,
+				labelLine: {
+					show: false,
+				},
+				label: {
+					normal: {
+						position: "inner",
+						show: true,
+						formatter: "{d}%",
+						fontSize: 24,
+						color: "#FFFFFF",
+					},
+				},
+				emphasis: {
+					label: {
+						show: true,
+						// fontSize: 36,
+						fontWeight: "bold",
+					},
+				},
+				data: [],
+			},
+		],
+	};
+}
diff --git a/src/views/dataBoard/sida/house/list.vue b/src/views/dataBoard/sida/house/list.vue
new file mode 100644
index 000000000..4c943ec90
--- /dev/null
+++ b/src/views/dataBoard/sida/house/list.vue
@@ -0,0 +1,274 @@
+<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>
+
+		<cpt-tb
+			:col-list="colList"
+			:loading="loading"
+			:header="header"
+			:list="list"
+			:total="total"
+			@handleSizeChange="handleSizeChange"
+			@handlePageNoChange="handlePageNoChange"
+			@operate="showInfo"
+		></cpt-tb>
+
+		<house-details
+			@close="displayedHouseId = ''"
+			:house-id="displayedHouseId"
+			v-if="displayedHouseId"
+		/>
+	</div>
+</template>
+
+<script>
+import cptTb from "@/views/dataBoard/cpts/tb";
+import cptBread from "@/views/dataBoard/renfang/cpts/bread";
+import houseDetails from "@/views/dataBoard/cpts/house-details";
+import { requestPostBi } from "@/js/dai/request-bipass";
+import getQueryPara from "dai-js/modules/getQueryPara";
+
+export default {
+	name: "house-list",
+
+	components: {
+		cptTb,
+		cptBread,
+		houseDetails,
+	},
+
+	data() {
+		return {
+			breadList: [
+				{
+					type: "back",
+					meta: {
+						title: "人房总览",
+					},
+				},
+				{
+					meta: {
+						title: "房屋列表",
+					},
+				},
+			],
+
+			tableTitle: "房屋列表",
+			searchName: "",
+
+			orgLevel: "",
+			org_id: "",
+			houseType: "", // 流动 常驻 全部
+
+			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: "10%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "5%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "5%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+			],
+
+			header: [
+				"序号",
+				"所属小区",
+				"所属楼栋",
+				"单元号",
+				"门牌号",
+				"房屋类型",
+				"房屋用途",
+				"房屋状态",
+				"房主姓名",
+				"联系电话",
+				"证件号",
+				"操作",
+			],
+
+			displayedHouseId: "",
+		};
+	},
+
+	activated() {
+		this.org_id = getQueryPara("org_id");
+		this.houseType = getQueryPara("type");
+		const type_name = getQueryPara("type_name");
+		this.breadList[1].meta.title = type_name + "房屋列表";
+		this.tableTitle = type_name + "房屋列表";
+		this.pageNo = 1;
+		this.getList();
+		this.getCount();
+	},
+
+	methods: {
+		handleClickBreadItem({ item }) {
+			if (item.type == "back") {
+				this.$router.back();
+			}
+		},
+
+		handleSearch() {},
+
+		showInfo(index) {
+			let item = this.srcTableData[index];
+			this.displayedHouseId = item.house_id;
+		},
+
+		handlePageNoChange(pageNo) {
+			this.pageNo = pageNo;
+			this.getList();
+		},
+
+		handleSizeChange(pageSize) {
+			localStorage.setItem('dataBoard_PageSize', pageSize);
+			this.pageSize = pageSize;
+			this.getList();
+		},
+
+		async getList() {
+			const { org_id, houseType, pageNo, pageSize } = this;
+			this.loading = true;
+
+			const url = "house_list";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id,
+						type: houseType,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 60068051,
+				}
+			);
+
+			this.loading = false;
+
+			if (code === 0) {
+				this.srcTableData = data;
+				// this.total = data.total;
+
+				this.list = data.map((item, index) => {
+					return [
+						index + 1,
+						item.village ? item.village : "--",
+						item.building ? item.building : "--",
+						item.unit ? item.unit : "--",
+						item.door ? item.door : "--",
+						item.house_type ? item.house_type : "--",
+						item.house_usage ? item.house_usage : "--",
+						item.house_state ? item.house_state : "--",
+						item.holder_name ? item.holder_name : "--",
+						item.holder_phone ? item.holder_phone : "--",
+						item.holder_idcard ? item.holder_idcard : "--",
+
+						{ type: "operate", list: ["查看"] },
+					];
+				});
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		async getCount() {
+			const { org_id, houseType, pageNo, pageSize } = this;
+
+			const url = "house_list_total";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id,
+						type: houseType,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 63070189,
+				}
+			);
+
+			if (code === 0) {
+				this.total = parseInt(data[0].count);
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
+
+	destroyed() {
+		console.log("我已经离开了！");
+	},
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style>
diff --git a/src/views/dataBoard/sida/index.vue b/src/views/dataBoard/sida/index.vue
new file mode 100644
index 000000000..900bbd4b1
--- /dev/null
+++ b/src/views/dataBoard/sida/index.vue
@@ -0,0 +1,594 @@
+<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">
+						<xqqd :orgId="orgData.org_id"></xqqd>
+					</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">
+						<wtqd :orgId="orgData.org_id"></wtqd>
+					</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 ">
+					<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>
+					<div class="m-subbox  ">
+						<sqpj :orgId="orgData.org_id"></sqpj>
+						
+					</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 ">
+						<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 " :class="{
+							'z-shrink':
+								orgLevel == 'district' ||
+								orgLevel == 'street' ||
+								orgLevel == 'city',
+						}">
+						<fwqd :orgId="orgData.org_id"></fwqd>
+					</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">
+						<zyqd :orgId="orgData.org_id"></zyqd>
+					</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>
+	import gridMap from "@/views/dataBoard/cpts/map/index";
+	import xqqd from "@/views/dataBoard/sida/cpts/xqqd";
+	import wtqd from "@/views/dataBoard/sida/cpts/wtqd";
+	import zyqd from "@/views/dataBoard/sida/cpts/zyqd";
+	import fwqd from "@/views/dataBoard/sida/cpts/fwqd";
+	import szsq from "@/views/dataBoard/sida/cpts/szsq";
+	import sqpj from "@/views/dataBoard/sida/cpts/sqpj";
+	
+	import cptBread from "@/views/dataBoard/sida/cpts/bread";
+	import cptLoading from "@/views/dataBoard/cpts/loading";
+	import houseDetails from "@/views/dataBoard/cpts/house-details";
+	import resiDetails from "@/views/dataBoard/cpts/resi-details";
+	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,
+			xqqd,
+			wtqd,
+			zyqd,
+			fwqd,
+			szsq,
+			sqpj,
+			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.getResiCategoryForecastData();
+				this.getPerInfo();
+				this.loading = true;
+			},
+			toResiClassPage(type_id = "", type_name) {
+				this.$router.push({
+					path: "/dataBoard/renfang/resi-class",
+					query: {
+						org_id: this.orgId,
+						type_id,
+						type_name,
+					},
+				});
+			},
+			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,
+							...detailJson,
+							...item,
+						};
+					});
+				} 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);
+				}
+			},
+		},
+	};
+</script>
+<style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>
diff --git a/src/views/dataBoard/sida/resi/analyze.vue b/src/views/dataBoard/sida/resi/analyze.vue
new file mode 100644
index 000000000..9f5b084dc
--- /dev/null
+++ b/src/views/dataBoard/sida/resi/analyze.vue
@@ -0,0 +1,259 @@
+<template>
+	<div class="g-pgi">
+		<!-- 组织路由 -->
+		<cpt-bread
+			:separator="'/'"
+			@tap="handleClickBreadItem"
+			:breadList="breadList"
+		></cpt-bread>
+
+		<div class="m-title">
+			<img
+				class="title_img"
+				src="@/assets/images/index/list-logo.png"
+				alt
+			/>
+			<div class="tip_title">{{ tableTitle }}</div>
+			<div class="title_line"></div>
+		</div>
+
+		<div class="g-listbox">
+			<cpt-tb
+				:col-list="colList"
+				:loading="loading"
+				:header="header"
+				:list="list"
+				:total="total"
+				@handleSizeChange="handleSizeChange"
+				@handlePageNoChange="handlePageNoChange"
+				@operate="showInfo"
+			></cpt-tb>
+		</div>
+
+		<resi-details
+			@close="displayedResiId = ''"
+			:resi-id="displayedResiId"
+			v-if="displayedResiId"
+		/>
+	</div>
+</template>
+
+<script>
+import cptTb from "@/views/dataBoard/cpts/tb";
+import cptBread from "@/views/dataBoard/renfang/cpts/bread";
+import resiDetails from "@/views/dataBoard/cpts/resi-details";
+import { requestPostBi } from "@/js/dai/request-bipass";
+import getQueryPara from "dai-js/modules/getQueryPara";
+
+export default {
+	name: "resi-list",
+
+	components: {
+		cptTb,
+		cptBread,
+		resiDetails,
+	},
+
+	data() {
+		return {
+			breadList: [
+				{
+					type: "back",
+					meta: {
+						title: "人房总览",
+					},
+				},
+				{
+					meta: {
+						title: "居民列表",
+					},
+				},
+			],
+
+			tableTitle: "居民列表",
+			searchName: "",
+
+			orgLevel: "",
+			org_id: "",
+			resiType: "", // 流动 常驻 全部
+
+			loading: true,
+			pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
+			pageNo: 1,
+			total: 0,
+			srcTableData: [],
+			list: [],
+
+			colList: [
+				{
+					align: "left",
+					width: "5%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "20%",
+				},
+				{
+					align: "left",
+					width: "20%",
+				},
+				{
+					align: "left",
+					width: "15%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "5%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+			],
+
+			header: [
+				"序号",
+				"姓名",
+				"所属网格",
+				"所属房屋",
+				"联系电话",
+				"证件号",
+				"性别",
+				"出生日期",
+				"操作",
+			],
+
+			displayedResiId: "",
+		};
+	},
+
+	activated() {
+		this.org_id = getQueryPara("org_id");
+		this.resiType = getQueryPara("type");
+		const type_name = getQueryPara("type_name");
+		this.breadList[1].meta.title = type_name + "居民列表";
+		this.tableTitle = type_name + "居民列表";
+
+		this.pageNo = 1;
+		this.getList();
+		this.getCount();
+	},
+
+	methods: {
+		handleClickBreadItem({ item }) {
+			if (item.type == "back") {
+				this.$router.back();
+			}
+		},
+
+		handleSearch() {},
+
+		showInfo(index) {
+			let item = this.srcTableData[index];
+			this.displayedResiId = item.user_id;
+		},
+
+		handlePageNoChange(pageNo) {
+			this.pageNo = pageNo;
+			this.getList();
+		},
+
+		handleSizeChange(pageSize) {
+			localStorage.setItem('dataBoard_PageSize', pageSize);
+			this.pageSize = pageSize;
+			this.getList();
+		},
+
+		async getList() {
+			const { org_id, resiType, pageNo, pageSize } = this;
+			this.loading = true;
+
+			const url = "resident_analyze_list";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id,
+						type: resiType,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 60069169,
+				}
+			);
+
+			this.loading = false;
+
+			if (code === 0) {
+				this.srcTableData = data;
+				// this.total = data.total;
+
+				this.list = data.map((item, index) => {
+					return [
+						index + 1,
+						item.user_name ? item.user_name : "--",
+						item.grid ? item.grid : "--",
+						item.house ? item.house : "--",
+						item.telephone ? item.telephone : "--",
+						item.idcard ? item.idcard : "--",
+						item.gender ? item.gender : "--",
+						item.birthday ? item.birthday : "--",
+
+						{ type: "operate", list: ["查看"] },
+					];
+				});
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		async getCount() {
+			const { org_id, resiType, pageNo, pageSize } = this;
+
+			const url = "resident_analyze_list_total";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id,
+						type: resiType,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 63070408,
+				}
+			);
+
+			if (code === 0) {
+				this.total = parseInt(data[0].count);
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
+
+	destroyed() {
+		console.log("我已经离开了！");
+	},
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style>
diff --git a/src/views/dataBoard/sida/resi/class.vue b/src/views/dataBoard/sida/resi/class.vue
new file mode 100644
index 000000000..4f8e9da32
--- /dev/null
+++ b/src/views/dataBoard/sida/resi/class.vue
@@ -0,0 +1,325 @@
+<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>
+</template>
+
+<script>
+import cptTb from "@/views/dataBoard/cpts/tb";
+import cptBread from "@/views/dataBoard/renfang/cpts/bread";
+import resiDetails from "@/views/dataBoard/cpts/resi-details";
+import { requestPostBi } from "@/js/dai/request-bipass";
+import getQueryPara from "dai-js/modules/getQueryPara";
+
+export default {
+	name: "resi-list",
+
+	components: {
+		cptTb,
+		cptBread,
+		resiDetails,
+	},
+
+	data() {
+		return {
+			breadList: [
+				{
+					type: "back",
+					meta: {
+						title: "人房总览",
+					},
+				},
+				{
+					meta: {
+						title: "居民类别",
+					},
+				},
+			],
+
+			tableTitle: "居民类别",
+			searchName: "",
+
+			orgLevel: "",
+			org_id: "",
+			type_id: "", // 居民类别
+
+			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");
+		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();
+		}
+	},
+
+	watch: {
+		subclassId() {
+			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;
+
+			const url = "resident_class_list";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id,
+						type_id: subclassId || type_id,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 60069169,
+				}
+			);
+
+			this.loading = false;
+
+			if (code === 0) {
+				this.srcTableData = data;
+				// this.total = data.total;
+
+				this.list = data.map((item, index) => {
+					return [
+						index + 1,
+						item.user_name ? item.user_name : "--",
+						item.grid ? item.grid : "--",
+						item.house ? item.house : "--",
+						item.telephone ? item.telephone : "--",
+						item.idcard ? item.idcard : "--",
+						item.gender ? item.gender : "--",
+						item.birthday ? item.birthday : "--",
+
+						{ type: "operate", list: ["查看"] },
+					];
+				});
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		async getCount() {
+			const { org_id, type_id, subclassId, pageNo, pageSize } = this;
+
+			const url = "resident_class_list_total";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id,
+						type_id: subclassId || type_id,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 63070913,
+				}
+			);
+
+			if (code === 0) {
+				this.total = parseInt(data[0].count);
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
+
+	destroyed() {
+		console.log("我已经离开了！");
+	},
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style>
diff --git a/src/views/dataBoard/sida/resi/list.vue b/src/views/dataBoard/sida/resi/list.vue
new file mode 100644
index 000000000..0cdf7b3ce
--- /dev/null
+++ b/src/views/dataBoard/sida/resi/list.vue
@@ -0,0 +1,259 @@
+<template>
+	<div class="g-pgi">
+		<!-- 组织路由 -->
+		<cpt-bread
+			:separator="'/'"
+			@tap="handleClickBreadItem"
+			:breadList="breadList"
+		></cpt-bread>
+
+		<div class="m-title">
+			<img
+				class="title_img"
+				src="@/assets/images/index/list-logo.png"
+				alt
+			/>
+			<div class="tip_title">{{ tableTitle }}</div>
+			<div class="title_line"></div>
+		</div>
+
+		<div class="g-listbox">
+			<cpt-tb
+				:col-list="colList"
+				:loading="loading"
+				:header="header"
+				:list="list"
+				:total="total"
+				@handleSizeChange="handleSizeChange"
+				@handlePageNoChange="handlePageNoChange"
+				@operate="showInfo"
+			></cpt-tb>
+		</div>
+
+		<resi-details
+			@close="displayedResiId = ''"
+			:resi-id="displayedResiId"
+			v-if="displayedResiId"
+		/>
+	</div>
+</template>
+
+<script>
+import cptTb from "@/views/dataBoard/cpts/tb";
+import cptBread from "@/views/dataBoard/renfang/cpts/bread";
+import resiDetails from "@/views/dataBoard/cpts/resi-details";
+import { requestPostBi } from "@/js/dai/request-bipass";
+import getQueryPara from "dai-js/modules/getQueryPara";
+
+export default {
+	name: "resi-list",
+
+	components: {
+		cptTb,
+		cptBread,
+		resiDetails,
+	},
+
+	data() {
+		return {
+			breadList: [
+				{
+					type: "back",
+					meta: {
+						title: "人房总览",
+					},
+				},
+				{
+					meta: {
+						title: "居民列表",
+					},
+				},
+			],
+
+			tableTitle: "居民列表",
+			searchName: "",
+
+			orgLevel: "",
+			org_id: "",
+			resiType: "", // 流动 常驻 全部
+
+			loading: true,
+			pageSize: parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
+			pageNo: 1,
+			total: 0,
+			srcTableData: [],
+			list: [],
+
+			colList: [
+				{
+					align: "left",
+					width: "5%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "20%",
+				},
+				{
+					align: "left",
+					width: "20%",
+				},
+				{
+					align: "left",
+					width: "15%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "5%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+				{
+					align: "left",
+					width: "10%",
+				},
+			],
+
+			header: [
+				"序号",
+				"姓名",
+				"所属网格",
+				"所属房屋",
+				"联系电话",
+				"证件号",
+				"性别",
+				"出生日期",
+				"操作",
+			],
+
+			displayedResiId: "",
+		};
+	},
+
+	activated() {
+		this.org_id = getQueryPara("org_id");
+		this.resiType = getQueryPara("type");
+		const type_name = getQueryPara("type_name");
+		this.breadList[1].meta.title = type_name + "居民列表";
+		this.tableTitle = type_name + "居民列表";
+
+		this.pageNo = 1;
+		this.getList();
+		this.getCount();
+	},
+
+	methods: {
+		handleClickBreadItem({ item }) {
+			if (item.type == "back") {
+				this.$router.back();
+			}
+		},
+
+		handleSearch() {},
+
+		showInfo(index) {
+			let item = this.srcTableData[index];
+			this.displayedResiId = item.user_id;
+		},
+
+		handlePageNoChange(pageNo) {
+			this.pageNo = pageNo;
+			this.getList();
+		},
+
+		handleSizeChange(pageSize) {
+			localStorage.setItem('dataBoard_PageSize', pageSize);
+			this.pageSize = pageSize;
+			this.getList();
+		},
+
+		async getList() {
+			const { org_id, resiType, pageNo, pageSize } = this;
+			this.loading = true;
+
+			const url = "resident_list";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id,
+						type: resiType,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 60069169,
+				}
+			);
+
+			this.loading = false;
+
+			if (code === 0) {
+				this.srcTableData = data;
+				// this.total = data.total;
+
+				this.list = data.map((item, index) => {
+					return [
+						index + 1,
+						item.user_name ? item.user_name : "--",
+						item.grid ? item.grid : "--",
+						item.house ? item.house : "--",
+						item.telephone ? item.telephone : "--",
+						item.idcard ? item.idcard : "--",
+						item.gender ? item.gender : "--",
+						item.birthday ? item.birthday : "--",
+
+						{ type: "operate", list: ["查看"] },
+					];
+				});
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		async getCount() {
+			const { org_id, resiType, pageNo, pageSize } = this;
+
+			const url = "resident_list_total";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id,
+						type: resiType,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 63070408,
+				}
+			);
+
+			if (code === 0) {
+				this.total = parseInt(data[0].count);
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
+
+	destroyed() {
+		console.log("我已经离开了！");
+	},
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style>
diff --git a/src/views/dataBoard/sida/warn/building.vue b/src/views/dataBoard/sida/warn/building.vue
new file mode 100644
index 000000000..2a98b3571
--- /dev/null
+++ b/src/views/dataBoard/sida/warn/building.vue
@@ -0,0 +1,255 @@
+<template>
+	<div class="g-pgi">
+		<!-- 组织路由 -->
+		<cpt-bread
+			:separator="'/'"
+			@tap="handleClickBreadItem"
+			:breadList="breadList"
+		></cpt-bread>
+
+		<div v-if="!displayedId">
+			<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>
+
+			<cpt-tb
+				:col-list="colList"
+				:loading="loading"
+				:header="header"
+				:list="list"
+				:total="total"
+				@handleSizeChange="handleSizeChange"
+				@handlePageNoChange="handlePageNoChange"
+				@operate="showInfo"
+			></cpt-tb>
+		</div>
+
+		<resi-list :building_id="displayedId" :resident_type="type_id" v-if="displayedId" />
+	</div>
+</template>
+
+<script>
+import cptTb from "@/views/dataBoard/cpts/tb";
+import cptBread from "@/views/dataBoard/renfang/cpts/bread";
+import resiList from "./resi";
+import { requestPostBi } from "@/js/dai/request-bipass";
+import getQueryPara from "dai-js/modules/getQueryPara";
+
+export default {
+	name: "house-list",
+
+	components: {
+		cptTb,
+		cptBread,
+		resiList,
+	},
+
+	data() {
+		return {
+			breadList: [
+				{
+					type: "back",
+					meta: {
+						title: "人房总览",
+					},
+				},
+				{
+					type: "building",
+					meta: {
+						title: "预警楼栋列表",
+					},
+				},
+			],
+
+			tableTitle: "预警楼栋列表",
+			searchName: "",
+
+			orgLevel: "",
+			org_id: "",
+			type_id: "",
+			type_name: "",
+			level: "",
+
+			loading: true,
+			pageSize:
+				parseInt(localStorage.getItem("dataBoard_PageSize")) || 20,
+			pageNo: 1,
+			total: 0,
+			srcTableData: [],
+			list: [],
+
+			colList: [
+				{
+					align: "left",
+					width: "5%",
+				},
+				{
+					align: "left",
+					width: "15%",
+				},
+				{
+					align: "left",
+					width: "20%",
+				},
+				{
+					align: "left",
+					width: "20%",
+				},
+				{
+					align: "left",
+					width: "20%",
+				},
+				{
+					align: "left",
+					width: "20%",
+				},
+			],
+
+			header: [
+				"序号",
+				"所属网格",
+				"所属小区",
+				"楼号",
+				"预警人数",
+				"操作",
+			],
+
+			displayedId: "",
+		};
+	},
+
+	activated() {
+		this.org_id = getQueryPara("org_id");
+		this.level = getQueryPara("level");
+		this.type_id = getQueryPara("type_id");
+		const type_name = getQueryPara("type_name");
+		this.tableTitle =
+			type_name + (this.level == "red" ? "红色" : "黄色") + "预警楼栋";
+		this.breadList[1].meta.title = this.tableTitle;
+		this.pageNo = 1;
+		this.getList();
+		this.getCount();
+	},
+
+	methods: {
+		handleClickBreadItem({ item }) {
+			if (item.type == "back") {
+				this.$router.back();
+			} else if (item.type == "building") {
+				this.displayedId = "";
+
+				const { breadList } = this;
+				this.breadList = breadList.slice(0, 2);
+			}
+		},
+
+		handleSearch() {},
+
+		showInfo(index) {
+			let item = this.srcTableData[index];
+			this.displayedId = item.building_id;
+
+			this.breadList.push({
+				meta: {
+					title: "预警人员列表",
+				},
+			});
+		},
+
+		handlePageNoChange(pageNo) {
+			this.pageNo = pageNo;
+			this.getList();
+		},
+
+		handleSizeChange(pageSize) {
+			localStorage.setItem("dataBoard_PageSize", pageSize);
+			this.pageSize = pageSize;
+			this.getList();
+		},
+
+		async getList() {
+			const { org_id, type_id, level, pageNo, pageSize } = this;
+			this.loading = true;
+
+			const url = "resident_warn_building";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id,
+						warn_type: level,
+						resi_type: type_id,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 60071540,
+				}
+			);
+
+			this.loading = false;
+
+			if (code === 0) {
+				this.srcTableData = data;
+				// this.total = data.total;
+
+				this.list = data.map((item, index) => {
+					return [
+						index + 1,
+						item.grid ? item.grid : "--",
+						item.village ? item.village : "--",
+						item.building ? item.building : "--",
+						item.warn_num ? item.warn_num : "--",
+
+						{ type: "operate", list: ["查看人员"] },
+					];
+				});
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		async getCount() {
+			const { org_id, type_id, level, pageNo, pageSize } = this;
+
+			const url = "resident_warn_building_total";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						org_id,
+						warn_type: level,
+						resi_type: type_id,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 63071730,
+				}
+			);
+
+			if (code === 0) {
+				this.total = parseInt(data[0].count);
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
+
+	destroyed() {
+		console.log("我已经离开了！");
+	},
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style>
diff --git a/src/views/dataBoard/sida/warn/resi.vue b/src/views/dataBoard/sida/warn/resi.vue
new file mode 100644
index 000000000..18534820d
--- /dev/null
+++ b/src/views/dataBoard/sida/warn/resi.vue
@@ -0,0 +1,234 @@
+<template>
+	<div class="g-pgi">
+		<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>
+
+		<cpt-tb
+			:col-list="colList"
+			:loading="loading"
+			:header="header"
+			:list="list"
+			:total="total"
+			@handleSizeChange="handleSizeChange"
+			@handlePageNoChange="handlePageNoChange"
+			@operate="showInfo"
+		></cpt-tb>
+
+		<resi-details
+			@close="displayedResiId = ''"
+			:resi-id="displayedResiId"
+			v-if="displayedResiId"
+		/>
+	</div>
+</template>
+
+<script>
+import cptTb from "@/views/dataBoard/cpts/tb";
+import cptBread from "@/views/dataBoard/renfang/cpts/bread";
+import resiDetails from "@/views/dataBoard/cpts/resi-details";
+import { requestPostBi } from "@/js/dai/request-bipass";
+import getQueryPara from "dai-js/modules/getQueryPara";
+
+export default {
+	name: "resi-list",
+
+	props: {
+		building_id: {
+			type: String,
+			default: "",
+		},
+		resident_type: {
+			type: String,
+			default: "",
+		},
+	},
+
+	components: {
+		cptTb,
+		cptBread,
+		resiDetails,
+	},
+
+	data() {
+		return {
+			tableTitle: "预警人员列表",
+			searchName: "",
+
+			resident_type: "",
+			building_id: "", // 预警人员列表
+
+			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: "",
+		};
+	},
+
+	mounted() {
+		this.getList();
+		this.getCount();
+	},
+
+	methods: {
+		showInfo(index) {
+			let item = this.srcTableData[index];
+			this.displayedResiId = item.user_id;
+		},
+
+		handlePageNoChange(pageNo) {
+			this.pageNo = pageNo;
+			this.getList();
+		},
+
+		handleSizeChange(pageSize) {
+			localStorage.setItem("dataBoard_PageSize", pageSize);
+			this.pageSize = pageSize;
+			this.getList();
+		},
+
+		async getList() {
+			const { resident_type, building_id, pageNo, pageSize } = this;
+			this.loading = true;
+
+			const url = "building_resident_list";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						resident_type,
+						building_id,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 60069169,
+				}
+			);
+
+			this.loading = false;
+
+			if (code === 0) {
+				this.srcTableData = data;
+				// this.total = data.total;
+
+				this.list = data.map((item, index) => {
+					return [
+						index + 1,
+						item.user_name ? item.user_name : "--",
+						item.grid ? item.grid : "--",
+						item.house ? item.house : "--",
+						item.telephone ? item.telephone : "--",
+						item.idcard ? item.idcard : "--",
+						item.gender ? item.gender : "--",
+						item.birthday ? item.birthday : "--",
+
+						{ type: "operate", list: ["查看"] },
+					];
+				});
+			} else {
+				this.$message.error(msg);
+			}
+		},
+
+		async getCount() {
+			const { resident_type, building_id, pageNo, pageSize } = this;
+
+			const url = "building_resident_list_total";
+
+			const { data, code, msg } = await requestPostBi(
+				url,
+				{
+					queryParam: {
+						resident_type,
+						building_id,
+						pageNo,
+						pageSize,
+					},
+				},
+				{
+					// mockId: 63071800,
+				}
+			);
+
+			if (code === 0) {
+				if (Array.isArray(data) && data.length > 0) {
+					this.total = parseInt(data[0].count);
+				}
+			} else {
+				this.$message.error(msg);
+			}
+		},
+	},
+
+	destroyed() {
+		console.log("我已经离开了！");
+	},
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/dataBoard/listBox.scss" scoped></style>
diff --git a/src/views/dataBoardMain/main-content.vue b/src/views/dataBoardMain/main-content.vue
index 3a71d3a30..bed215ca7 100644
--- a/src/views/dataBoardMain/main-content.vue
+++ b/src/views/dataBoardMain/main-content.vue
@@ -1,129 +1,118 @@
 <template>
-  <main class="g-main">
-    <!-- tab展示内容 -->
-    <template>
-      <template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)">
-        <iframe
-          :src="
+	<main class="g-main">
+		<!-- tab展示内容 -->
+		<template>
+			<template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)">
+				<iframe :src="
             $router.currentRoute.meta.iframeURL +
             '?token=' +
             token +
             '&customerId=' +
             customerId
-          "
-          ref="iframe"
-          class="m-iframe"
-          id="iframe"
-          width="100%"
-          height="100%"
-          frameborder="0"
-          scrolling="yes"
-          :style="{ height: $store.state.fixed1920.height - 100 + 'px' }"
-        />
-      </template>
-      <keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)">
-        <router-view @changeCustomerName="changeCustomerName" />
-      </keep-alive>
-    </template>
-  </main>
+          " ref="iframe" class="m-iframe" id="iframe" width="100%" height="100%" frameborder="0" scrolling="yes"
+					:style="{ height: $store.state.fixed1920.height - 100 + 'px' }" />
+			</template>
+			<keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)">
+				<router-view @changeCustomerName="changeCustomerName" />
+			</keep-alive>
+		</template>
+	</main>
 </template>
-
 <script>
-import { isURL } from "@/utils/validate";
-import Cookie from "js-cookie";
-export default {
-  data() {
-    return {
-      iframeUrl: "",
-      token: "",
-      customerId: "",
-    };
-  },
-  watch: {
-    // "$router.currentRoute.name": function () {
-    //   console.log($router.currentRoute);
-    // },
-  },
-  created() {
-    this.token = localStorage.getItem("token");
-    this.customerId = localStorage.getItem("customerId");
-  },
-  methods: {
-    changeCustomerName(customerName) {
-      this.$emit("changeCustomerName", customerName);
-    },
-    // tabs, 是否通过iframe展示
-    tabIsIframe(url) {
-      // this.appendIframe(url)
-      // this.iframeUrl =
-      //   url +
-      //   "?token=" +
-      //   localStorage.getItem("token") +
-      //   "&customerId=" +
-      //   localStorage.getItem("customerId");
-
-      // return /^http[s]?:\/\/.*/.test(url);
-      return isURL(url);
-    },
-    // tabs, 选中tab
-    tabSelectedHandle(tab) {
-      tab = this.$store.state.contentTabs.filter(
-        (item) => item.name === tab.name
-      )[0];
-      if (tab) {
-        this.$router.push({
-          name: tab.name,
-          params: { ...tab.params },
-          query: { ...tab.query },
-        });
-      }
-    },
-    // tabs, 删除tab
-    tabRemoveHandle(tabName) {
-      if (tabName === "home") {
-        return false;
-      }
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-        (item) => item.name !== tabName
-      );
-      if (this.$store.state.contentTabs.length <= 0) {
-        this.$store.state.sidebarMenuActiveName =
-          this.$store.state.contentTabsActiveName = "home";
-        return false;
-      }
-      // 当前选中tab被删除
-      if (tabName === this.$store.state.contentTabsActiveName) {
-        let tab =
-          this.$store.state.contentTabs[
-            this.$store.state.contentTabs.length - 1
-          ];
-        this.$router.push({
-          name: tab.name,
-          params: { ...tab.params },
-          query: { ...tab.query },
-        });
-      }
-    },
-    // tabs, 关闭其它
-    tabsCloseOtherHandle() {
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-        (item) => {
-          return (
-            item.name === "home" ||
-            item.name === this.$store.state.contentTabsActiveName
-          );
-        }
-      );
-    },
-    // tabs, 关闭全部
-    tabsCloseAllHandle() {
-      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-        (item) => item.name === "home"
-      );
-      this.$router.push({ name: "home" });
-    },
-  },
-};
+	import {
+		isURL
+	} from "@/utils/validate";
+	import Cookie from "js-cookie";
+	export default {
+		data() {
+			return {
+				iframeUrl: "",
+				token: "",
+				customerId: "",
+			};
+		},
+		watch: {
+			// "$router.currentRoute.name": function () {
+			//   console.log($router.currentRoute);
+			// },
+		},
+		created() {
+			this.token = localStorage.getItem("token");
+			this.customerId = localStorage.getItem("customerId");
+		},
+		methods: {
+			changeCustomerName(customerName) {
+				this.$emit("changeCustomerName", customerName);
+			},
+			// tabs, 是否通过iframe展示
+			tabIsIframe(url) {
+				// this.appendIframe(url)
+				// this.iframeUrl =
+				//   url +
+				//   "?token=" +
+				//   localStorage.getItem("token") +
+				//   "&customerId=" +
+				//   localStorage.getItem("customerId");
+				// return /^http[s]?:\/\/.*/.test(url);
+				return isURL(url);
+			},
+			// tabs, 选中tab
+			tabSelectedHandle(tab) {
+				tab = this.$store.state.contentTabs.filter(
+					(item) => item.name === tab.name)[0];
+				if (tab) {
+					this.$router.push({
+						name: tab.name,
+						params: {
+							...tab.params
+						},
+						query: {
+							...tab.query
+						},
+					});
+				}
+			},
+			// tabs, 删除tab
+			tabRemoveHandle(tabName) {
+				if (tabName === "home") {
+					return false;
+				}
+				this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
+					(item) => item.name !== tabName);
+				if (this.$store.state.contentTabs.length <= 0) {
+					this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = "home";
+					return false;
+				}
+				// 当前选中tab被删除
+				if (tabName === this.$store.state.contentTabsActiveName) {
+					let tab = this.$store.state.contentTabs[this.$store.state.contentTabs.length - 1];
+					this.$router.push({
+						name: tab.name,
+						params: {
+							...tab.params
+						},
+						query: {
+							...tab.query
+						},
+					});
+				}
+			},
+			// tabs, 关闭其它
+			tabsCloseOtherHandle() {
+				this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
+					(item) => {
+						return (item.name === "home" || item.name === this.$store.state.contentTabsActiveName);
+					});
+			},
+			// tabs, 关闭全部
+			tabsCloseAllHandle() {
+				this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
+					(item) => item.name === "home");
+				this.$router.push({
+					name: "home"
+				});
+			},
+		},
+	};
 </script>
-
 <style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style>
diff --git a/src/views/dataBoardMain/main-navbar.vue b/src/views/dataBoardMain/main-navbar.vue
index 7f8422023..3151436d7 100644
--- a/src/views/dataBoardMain/main-navbar.vue
+++ b/src/views/dataBoardMain/main-navbar.vue
@@ -7,188 +7,107 @@
 			<span>返回</span>
 		</div>
 		<div class="nav-list z-left">
-			<div
-				class="nav-item"
-				:class="{ 'z-on': $route.path == '/dataBoard/renfang/index' }"
-				@click="toPage('/dataBoard/renfang/index')"
-			>
+			<div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/renfang/index' }"
+				@click="toPage('/dataBoard/renfang/index')">
 				<span>人房总览</span>
 			</div>
-			<div class="nav-item" @click="toPage('/')">
-				<span>问题清单</span>
+			<div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/sida/index' }"
+				@click="toPage('/dataBoard/sida/index')">
+				<span>四大清单</span>
 			</div>
-			<div class="nav-item" @click="toPage('/')">
-				<span>需求清单</span>
+			<div class="nav-item" >
+				<span>十五分钟生活圈</span>
 			</div>
-			<div class="nav-item" @click="toPage('/')">
-				<span>资源清单</span>
+			<div class="nav-item" >
+				<span>一级菜单</span>
 			</div>
 		</div>
-
 		<div class="nav-list z-right">
 			<div class="nav-item">
-				<span>15分钟生活圈</span>
+				<span>一级菜单</span>
+			</div>
+			<div class="nav-item">
+				<span>更多菜单</span>
 			</div>
 		</div>
-
 		<div class="msg">
 			<div class="weather">
-				<img
-					v-if="weather.weather == '小雨'"
-					src="~@/assets/images/shuju/main/weather/xiaoyu.png"
-				/>
-				<img
-					v-if="weather.weather == '中雨'"
-					src="~@/assets/images/shuju/main/weather/zhongyu.png"
-				/>
-				<img
-					v-if="weather.weather == '大雨'"
-					src="~@/assets/images/shuju/main/weather/dayu.png"
-				/>
-				<img
-					v-if="weather.weather == '雷雨'"
-					src="~@/assets/images/shuju/main/weather/leiyu.png"
-				/>
-				<img
-					v-if="weather.weather == '雷暴'"
-					src="~@/assets/images/shuju/main/weather/leibao.png"
-				/>
-				<img
-					v-if="weather.weather == '雨雪'"
-					src="~@/assets/images/shuju/main/weather/yuxue.png"
-				/>
-				<img
-					v-if="weather.weather == '阴'"
-					src="~@/assets/images/shuju/main/weather/yin.png"
-				/>
-				<img
-					v-if="weather.weather == '雾'"
-					src="~@/assets/images/shuju/main/weather/wu.png"
-				/>
-				<img
-					v-if="weather.weather == '风'"
-					src="~@/assets/images/shuju/main/weather/feng.png"
-				/>
-				<img
-					v-else-if="weather.weather == '雪'"
-					src="~@/assets/images/shuju/main/weather/xue.png"
-				/>
-				<img
-					v-else-if="weather.weather == '多云'"
-					src="~@/assets/images/shuju/main/weather/duoyun.png"
-				/>
-				<img
-					v-else
-					src="~@/assets/images/shuju/main/weather/qing.png"
-				/>
-
+				<img v-if="weather.weather == '小雨'" src="~@/assets/images/shuju/main/weather/xiaoyu.png" />
+				<img v-if="weather.weather == '中雨'" src="~@/assets/images/shuju/main/weather/zhongyu.png" />
+				<img v-if="weather.weather == '大雨'" src="~@/assets/images/shuju/main/weather/dayu.png" />
+				<img v-if="weather.weather == '雷雨'" src="~@/assets/images/shuju/main/weather/leiyu.png" />
+				<img v-if="weather.weather == '雷暴'" src="~@/assets/images/shuju/main/weather/leibao.png" />
+				<img v-if="weather.weather == '雨雪'" src="~@/assets/images/shuju/main/weather/yuxue.png" />
+				<img v-if="weather.weather == '阴'" src="~@/assets/images/shuju/main/weather/yin.png" />
+				<img v-if="weather.weather == '雾'" src="~@/assets/images/shuju/main/weather/wu.png" />
+				<img v-if="weather.weather == '风'" src="~@/assets/images/shuju/main/weather/feng.png" />
+				<img v-else-if="weather.weather == '雪'" src="~@/assets/images/shuju/main/weather/xue.png" />
+				<img v-else-if="weather.weather == '多云'" src="~@/assets/images/shuju/main/weather/duoyun.png" />
+				<img v-else src="~@/assets/images/shuju/main/weather/qing.png" />
 				<div>{{ weather.temperature }}℃</div>
 				<div>{{ weather.weather }}</div>
 			</div>
-
 			<div class="date">
 				<div class="date-time">{{ showTime }}</div>
 				<div class="date-div"></div>
 				<div class="date-week">{{ showWeek }}</div>
 			</div>
 		</div>
-
 		<nav v-if="false" class="m-navbar">
 			<div class="navbar__header">
-				<h1
-					class="navbar__brand"
-					@click="$router.push({ name: 'home' })"
-				>
-					<a class="navbar__brand-lg" href="javascript:;">{{
-						customerName
+				<h1 class="navbar__brand" @click="$router.push({ name: 'home' })">
+					<a class="navbar__brand-lg" href="javascript:;">{{ customerName
 					}}</a>
-					<a class="navbar__brand-mini" href="javascript:;">{{
-						customerName.slice(0, 2)
+					<a class="navbar__brand-mini" href="javascript:;">{{ customerName.slice(0, 2)
 					}}</a>
 				</h1>
 			</div>
 			<div class="navbar__body">
 				<el-menu class="navbar__menu mr-auto" mode="horizontal">
-					<el-menu-item
-						index="1"
-						@click="
+					<el-menu-item index="1" @click="
 							$store.state.sidebarFold = !$store.state.sidebarFold
-						"
-					>
-						<svg
-							class="icon-svg navbar__icon-menu navbar__icon-menu--switch"
-							aria-hidden="true"
-						>
+						">
+						<svg class="icon-svg navbar__icon-menu navbar__icon-menu--switch" aria-hidden="true">
 							<use xlink:href="#icon-outdent"></use>
 						</svg>
 					</el-menu-item>
-
 					<el-menu-item index="2" @click="refresh()">
-						<svg
-							class="icon-svg navbar__icon-menu"
-							aria-hidden="true"
-						>
+						<svg class="icon-svg navbar__icon-menu" aria-hidden="true">
 							<use xlink:href="#icon-sync"></use>
 						</svg>
 					</el-menu-item>
 				</el-menu>
-
-				<el-menu
-					:default-active="$store.state.mainShuju.activeName"
-					:unique-opened="true"
-					:collapseTransition="false"
-					mode="horizontal"
-					class="navbar__menu mr-auto z-div"
-				>
+				<el-menu :default-active="$store.state.mainShuju.activeName" :unique-opened="true"
+					:collapseTransition="false" mode="horizontal" class="navbar__menu mr-auto z-div">
 					<el-menu-item index="index" @click="toIndexPage">
 						<span>首页</span>
 					</el-menu-item>
-
-					<template
-						v-for="(menu, idx) in $store.state.mainShuju.menuList"
-					>
-						<li
-							class="sub-menu"
-							:class="
+					<template v-for="(menu, idx) in $store.state.mainShuju.menuList">
+						<li class="sub-menu" :class="
 								$store.state.mainShuju.activeName == menu.id
 									? 'z-on'
 									: ''
-							"
-							v-if="menu.children"
-							:key="menu.id"
-							@click="gotoRouteHandle(menu.id, idx)"
-						>
+							" v-if="menu.children" :key="menu.id" @click="gotoRouteHandle(menu.id, idx)">
 							<span>{{ menu.name }}</span>
 							<div class="sub-menu-list">
-								<div
-									:class="
+								<div :class="
 										$store.state.mainShuju.activeName ==
 										subMenu.id
 											? 'z-on'
 											: ''
-									"
-									:key="subMenu.id"
-									@click="
+									" :key="subMenu.id" @click="
 										gotoRouteHandle(subMenu.id, subIndex)
-									"
-									v-for="(subMenu, subIndex) in menu.children"
-								>
+									" v-for="(subMenu, subIndex) in menu.children">
 									{{ subMenu.name }}
 								</div>
 							</div>
 						</li>
-						<el-menu-item
-							v-else
-							:key="menu.id"
-							:menu="menu"
-							:index="menu.id"
-							@click="gotoRouteHandle(menu.id, idx)"
-						>
+						<el-menu-item v-else :key="menu.id" :menu="menu" :index="menu.id"
+							@click="gotoRouteHandle(menu.id, idx)">
 							<span>{{ menu.name }}</span>
 						</el-menu-item>
 					</template>
 				</el-menu>
-
 				<el-menu class="navbar__menu" mode="horizontal">
 					<!-- <el-menu-item index="1">
             <el-dropdown placement="bottom"
@@ -211,160 +130,130 @@
             </a>
           </el-menu-item> -->
 					<el-menu-item index="3" @click="fullscreenHandle()">
-						<svg
-							class="icon-svg navbar__icon-menu"
-							aria-hidden="true"
-						>
+						<svg class="icon-svg navbar__icon-menu" aria-hidden="true">
 							<use xlink:href="#icon-fullscreen"></use>
 						</svg>
 					</el-menu-item>
-
 					<el-menu-item index="4" class="navbar__avatar">
 						<el-dropdown placement="bottom" :show-timeout="0">
 							<span class="el-dropdown-link">
-								<img
-									src="~@/assets/img/staff-default-avatar.png"
-								/>
+								<img src="~@/assets/img/staff-default-avatar.png" />
 								<span>{{ $store.state.user.realName }}</span>
 								<i class="el-icon-arrow-down"></i>
 							</span>
 							<el-dropdown-menu slot="dropdown">
-								<el-dropdown-item
-									@click.native="updatePasswordHandle()"
-									>{{
-										$t("updatePassword.title")
-									}}</el-dropdown-item
-								>
-								<el-dropdown-item
-									@click.native="logoutHandle()"
-									>{{ $t("logout") }}</el-dropdown-item
-								>
+								<el-dropdown-item @click.native="updatePasswordHandle()">{{ $t("updatePassword.title")
+									}}</el-dropdown-item>
+								<el-dropdown-item @click.native="logoutHandle()">{{ $t("logout") }}</el-dropdown-item>
 							</el-dropdown-menu>
 						</el-dropdown>
 					</el-menu-item>
 				</el-menu>
 			</div>
 			<!-- 弹窗, 修改密码 -->
-			<update-password-work
-				v-if="updatePassowrdVisible"
-				ref="updatePassowrd"
-			></update-password-work>
+			<update-password-work v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password-work>
 		</nav>
 	</div>
 </template>
-
 <script>
-import { messages } from "@/i18n";
-import UpdatePasswordWork from "@/views/main-navbar-update-password-work";
-import dateFormat from "dai-js/tools/dateFormat";
-import nextTick from "dai-js/tools/nextTick";
-import { requestGet } from "@/js/dai/request";
-
-export default {
-	inject: ["refresh"],
-	data() {
-		return {
-			showHeader: true,
-			i18nMessages: messages,
-			updatePassowrdVisible: false,
-			customerName: "",
-
-			showWeek: "",
-			showTime: "",
-
-			weather: {
-				weather: "晴",
-				temperature: "--",
-			},
-		};
-	},
-	components: {
-		UpdatePasswordWork,
-	},
-	created() {
-		this.changeCustomerName();
-		const customerId = localStorage.getItem("customerId");
-		let siteconfigElement = window.SITE_CONFIG["menuShujuList"];
-		//暂时 亿联街道和 微笑崂山显示 社区治理-》多元化菜单
-		if (
-			"04c0d396e298f13e57aa5904a657eaa6" != customerId &&
-			"3fdd0380deff5b30f45376cdf995d1c1" != customerId
-		) {
-			for (let index in siteconfigElement) {
-				if (siteconfigElement[index].id == "6") {
-					let newMenuArr = siteconfigElement[index].children.filter(
-						(item) => item.id !== "duoyuanfuwufenxi"
-					);
-					siteconfigElement[index].children = newMenuArr;
-				}
-			}
-		}
-		this.$store.state.mainShuju.menuList = siteconfigElement;
-
-		const pollTime = async () => {
-			this.computeCurrentTime();
-			await nextTick(1000);
-			pollTime();
-		};
-		pollTime();
-
-		this.getWeatherData();
-	},
-	computed: {},
-	methods: {
-		computeCurrentTime() {
-			let now = new Date();
-			let wk = now.getDay();
-			this.showWeek = [
-				"星期日",
-				"星期一",
-				"星期二",
-				"星期三",
-				"星期四",
-				"星期五",
-				"星期六",
-			][wk];
-			this.showTime = dateFormat(now, "yyyy-MM-dd hh:mm:ss");
-		},
-
-		toPage(path) {
-			this.$router.push({ path });
+	import {
+		messages
+	} from "@/i18n";
+	import UpdatePasswordWork from "@/views/main-navbar-update-password-work";
+	import dateFormat from "dai-js/tools/dateFormat";
+	import nextTick from "dai-js/tools/nextTick";
+	import {
+		requestGet
+	} from "@/js/dai/request";
+	export default {
+		inject: ["refresh"],
+		data() {
+			return {
+				showHeader: true,
+				i18nMessages: messages,
+				updatePassowrdVisible: false,
+				customerName: "",
+				showWeek: "",
+				showTime: "",
+				weather: {
+					weather: "晴",
+					temperature: "--",
+				},
+			};
 		},
-
-		toIndexPage() {
-			this.$router.replace("/");
+		components: {
+			UpdatePasswordWork,
 		},
-		// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
-		gotoRouteHandle(menuId, idx) {
-			var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter(
-				(item) => item.meta.menuId === menuId
-			)[0];
-			if (route) {
-				this.$router.push({ name: route.name });
-				this.$store.state.mainShuju.activeName = menuId;
+		created() {
+			this.changeCustomerName();
+			const customerId = localStorage.getItem("customerId");
+			let siteconfigElement = window.SITE_CONFIG["menuShujuList"];
+			//暂时 亿联街道和 微笑崂山显示 社区治理-》多元化菜单
+			if ("04c0d396e298f13e57aa5904a657eaa6" != customerId && "3fdd0380deff5b30f45376cdf995d1c1" != customerId) {
+				for (let index in siteconfigElement) {
+					if (siteconfigElement[index].id == "6") {
+						let newMenuArr = siteconfigElement[index].children.filter(
+							(item) => item.id !== "duoyuanfuwufenxi");
+						siteconfigElement[index].children = newMenuArr;
+					}
+				}
 			}
+			this.$store.state.mainShuju.menuList = siteconfigElement;
+			const pollTime = async () => {
+				this.computeCurrentTime();
+				await nextTick(1000);
+				pollTime();
+			};
+			pollTime();
+			this.getWeatherData();
 		},
-
-		changeCustomerName() {
-			this.customerName =
-				localStorage.getItem("customerName") || "数据分析可视化平台";
-		},
-
-		async getWeatherData() {
-			const url =
-				"https://restapi.amap.com/v3/weather/weatherInfo?key=8c87678f34ce9e8e23245c5161991c4e";
-			const { data, code, msg } = await requestGet(url, {
-				city: this.$store.state.user.areaCode,
-			});
-			if (code === 0) {
-				console.log("---------------weather", data);
-				this.weather = data.lives[0];
-			} else {
-				// return this.$message.error("网络错误");
-			}
+		computed: {},
+		methods: {
+			computeCurrentTime() {
+				let now = new Date();
+				let wk = now.getDay();
+				this.showWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", ][wk];
+				this.showTime = dateFormat(now, "yyyy-MM-dd hh:mm:ss");
+			},
+			toPage(path) {
+				this.$router.push({
+					path
+				});
+			},
+			toIndexPage() {
+				this.$router.replace("/");
+			},
+			// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
+			gotoRouteHandle(menuId, idx) {
+				var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter(
+					(item) => item.meta.menuId === menuId)[0];
+				if (route) {
+					this.$router.push({
+						name: route.name
+					});
+					this.$store.state.mainShuju.activeName = menuId;
+				}
+			},
+			changeCustomerName() {
+				this.customerName = localStorage.getItem("customerName") || "数据分析可视化平台";
+			},
+			async getWeatherData() {
+				const url = "https://restapi.amap.com/v3/weather/weatherInfo?key=8c87678f34ce9e8e23245c5161991c4e";
+				const {
+					data,
+					code,
+					msg
+				} = await requestGet(url, {
+					city: this.$store.state.user.areaCode,
+				});
+				if (code === 0) {
+					console.log("---------------weather", data);
+					this.weather = data.lives[0];
+				} else {
+					// return this.$message.error("网络错误");
+				}
+			},
 		},
-	},
-};
+	};
 </script>
-
 <style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style>
diff --git a/src/views/dataBoardMain/main.vue b/src/views/dataBoardMain/main.vue
index 1d166dfbd..5f611d361 100644
--- a/src/views/dataBoardMain/main.vue
+++ b/src/views/dataBoardMain/main.vue
@@ -1,164 +1,138 @@
 <template>
 	<fixed1920 class="g-fx">
-		<div
-			v-loading.fullscreen.lock="loading"
-			:element-loading-text="$t('loading')"
-			:class="[
+		<div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="[
 				'g-pg',
 				{ 'z-sidebar--fold': $store.state.sidebarFold },
 				{
 					'z-sidebar--noside': true,
 				},
 				{ 'z-iframe': $store.state.inIframe },
-			]"
-		>
+			]">
 			<template v-if="!loading">
-				<img
-					class="i-corner z-left-top"
-					src="~@/assets/images/shuju/main/corner-left-top.png"
-				/>
-				<img
-					class="i-corner z-right-top"
-					src="~@/assets/images/shuju/main/corner-right-top.png"
-				/>
-				<img
-					class="i-corner z-right-bottom"
-					src="~@/assets/images/shuju/main/corner-right-bottom.png"
-				/>
-				<img
-					class="i-corner z-left-bottom"
-					src="~@/assets/images/shuju/main/corner-left-bottom.png"
-				/>
-
+				<img class="i-corner z-left-top" src="~@/assets/images/shuju/main/corner-left-top.png" />
+				<img class="i-corner z-right-top" src="~@/assets/images/shuju/main/corner-right-top.png" />
+				<img class="i-corner z-right-bottom" src="~@/assets/images/shuju/main/corner-right-bottom.png" />
+				<img class="i-corner z-left-bottom" src="~@/assets/images/shuju/main/corner-left-bottom.png" />
 				<main-navbar ref="ref_navbar" v-if="!$store.state.inIframe" />
-
-				<div
-					class="g-cnt"
-					:style="{
+				<div class="g-cnt" :style="{
 						minHeight: $store.state.fixed1920.height - 100 + 'px',
-					}"
-				>
-					<main-content
-						v-if="!$store.state.contentIsNeedRefresh"
-						@changeCustomerName="changeCustomerName"
-					/>
+					}">
+					<main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" />
 				</div>
 			</template>
 		</div>
 	</fixed1920>
 </template>
-
 <script>
-import MainNavbar from "./main-navbar";
-import MainContent from "./main-content";
-import debounce from "lodash/debounce";
-import { mapGetters } from "vuex";
-import nextTick from "dai-js/tools/nextTick";
-import { requestPost } from "@/js/dai/request";
-import fixed1920 from "@/views/components/fixed1920.vue";
-
-export default {
-	provide() {
-		return {
-			// 刷新
-			refresh() {
-				this.$store.state.contentIsNeedRefresh = true;
-				this.$nextTick(() => {
-					this.$store.state.contentIsNeedRefresh = false;
-				});
-			},
-		};
-	},
-	data() {
-		return {
-			loading: true,
-			userType: localStorage.getItem("userType"),
-		};
-	},
-	components: {
-		MainNavbar,
-		MainContent,
-		fixed1920,
-	},
-
-	watch: {
-		$route: "routeHandle",
-	},
-	async created() {
-		this.windowResizeHandle();
-		this.routeHandle(this.$route);
-		Promise.all([this.getWorkUserInfo()]).then(() => {
-			this.loading = false;
-		});
-	},
-	computed: {},
-	methods: {
-		changeCustomerName(customerName) {
-			this.$refs["ref_navbar"].changeCustomerName(customerName);
+	import MainNavbar from "./main-navbar";
+	import MainContent from "./main-content";
+	import debounce from "lodash/debounce";
+	import {
+		mapGetters
+	} from "vuex";
+	import nextTick from "dai-js/tools/nextTick";
+	import {
+		requestPost
+	} from "@/js/dai/request";
+	import fixed1920 from "@/views/components/fixed1920.vue";
+	export default {
+		provide() {
+			return {
+				// 刷新
+				refresh() {
+					this.$store.state.contentIsNeedRefresh = true;
+					this.$nextTick(() => {
+						this.$store.state.contentIsNeedRefresh = false;
+					});
+				},
+			};
+		},
+		data() {
+			return {
+				loading: true,
+				userType: localStorage.getItem("userType"),
+			};
 		},
-		// 窗口改变大小
-		windowResizeHandle() {
-			this.$store.state.sidebarFold =
-				document.documentElement["clientWidth"] <= 992 || false;
-			window.addEventListener(
-				"resize",
-				debounce(() => {
-					this.$store.state.sidebarFold =
-						document.documentElement["clientWidth"] <= 992 || false;
-				}, 150)
-			);
+		components: {
+			MainNavbar,
+			MainContent,
+			fixed1920,
 		},
-		// 路由, 监听
-		routeHandle(route) {
-			if (!route.meta.isTab) {
-				this.$store.state.mainShuju.activeName = "";
-				this.$store.state.mainShuju.contentTabsActiveName = "";
-				return false;
-			}
-			var tab = this.$store.state.contentTabs.filter(
-				(item) => item.name === route.name
-			)[0];
-			if (!tab) {
-				tab = {
-					...window.SITE_CONFIG["contentTabDefault"],
-					...route.meta,
-					name: route.name,
-					params: { ...route.params },
-					query: { ...route.query },
-				};
-				this.$store.state.contentTabs =
-					this.$store.state.contentTabs.concat(tab);
-			}
-
-			this.$store.state.mainShuju.activeName = tab.menuId;
-			this.$store.state.mainShuju.contentTabsActiveName = tab.name;
+		watch: {
+			$route: "routeHandle",
 		},
-
-		// 获取当前管理员信息
-		async getWorkUserInfo() {
-			const url = "/epmetuser/customerstaff/staffbasicinfo";
-			let params = {};
-			const { data, code, msg } = await requestPost(url, params);
-			if (code === 0) {
-				this.$store.state.user = { ...data };
-				console.log("user---hahha", this.$store.state.user);
-				localStorage.setItem("roleList", data.roleList);
-				localStorage.setItem("customerId", data.customerId);
-				localStorage.setItem("staffId", data.id);
-				localStorage.setItem("agencyId", data.agencyId);
-				localStorage.setItem("level", data.level);
-				if (!localStorage.getItem("customerName")) {
-					localStorage.setItem(
-						"customerName",
-						data.customerName || ""
-					);
+		async created() {
+			this.windowResizeHandle();
+			this.routeHandle(this.$route);
+			Promise.all([this.getWorkUserInfo()]).then(() => {
+				this.loading = false;
+			});
+		},
+		computed: {},
+		methods: {
+			changeCustomerName(customerName) {
+				this.$refs["ref_navbar"].changeCustomerName(customerName);
+			},
+			// 窗口改变大小
+			windowResizeHandle() {
+				this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false;
+				window.addEventListener("resize", debounce(() => {
+					this.$store.state.sidebarFold = document.documentElement["clientWidth"] <= 992 || false;
+				}, 150));
+			},
+			// 路由, 监听
+			routeHandle(route) {
+				if (!route.meta.isTab) {
+					this.$store.state.mainShuju.activeName = "";
+					this.$store.state.mainShuju.contentTabsActiveName = "";
+					return false;
+				}
+				var tab = this.$store.state.contentTabs.filter(
+					(item) => item.name === route.name)[0];
+				if (!tab) {
+					tab = {
+						...window.SITE_CONFIG["contentTabDefault"],
+						...route.meta,
+						name: route.name,
+						params: {
+							...route.params
+						},
+						query: {
+							...route.query
+						},
+					};
+					this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab);
 				}
-			} else {
-				this.$message.error(msg);
-			}
+				this.$store.state.mainShuju.activeName = tab.menuId;
+				this.$store.state.mainShuju.contentTabsActiveName = tab.name;
+			},
+			// 获取当前管理员信息
+			async getWorkUserInfo() {
+				const url = "/epmetuser/customerstaff/staffbasicinfo";
+				let params = {};
+				const {
+					data,
+					code,
+					msg
+				} = await requestPost(url, params);
+				if (code === 0) {
+					this.$store.state.user = {
+						...data
+					};
+					console.log("user---hahha", this.$store.state.user);
+					localStorage.setItem("roleList", data.roleList);
+					localStorage.setItem("customerId", data.customerId);
+					localStorage.setItem("staffId", data.id);
+					localStorage.setItem("agencyId", data.agencyId);
+					localStorage.setItem("level", data.level);
+					if (!localStorage.getItem("customerName")) {
+						localStorage.setItem("customerName", data.customerName || "");
+					}
+				} else {
+					this.$message.error(msg);
+				}
+			},
 		},
-	},
-};
+	};
 </script>
-
 <style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style>