From a611e5d6d4cdfeb95e6c8cb0d506fc650f70a57e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=98=E7=AB=8B=E6=A0=87?= <2658037827@qq.com>
Date: Tue, 28 Nov 2023 15:02:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=92=8C=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/dataBoard/renfang/index.scss  | 1474 ++++++++---------
 src/router/index.js                           |   60 +
 .../dataBoard/overview/components/Bmysxxq.vue |   14 +-
 .../overview/components/DemandSwiperList.vue  |    2 +-
 .../overview/components/RequirementList.vue   |   25 +-
 .../overview/components/ServiceDetails.vue    |   31 +-
 .../dataBoard/overview/components/jdtphx.vue  |    2 +-
 .../dataBoard/overview/components/rfsjtj.vue  |    2 +-
 src/views/dataBoard/overview/index.vue        |    4 +-
 .../dataBoard/renfang/cpts/fwPieOption.js     |   51 +-
 src/views/dataBoard/renfang/cpts/fwgl.vue     |  982 ++++++-----
 .../dataBoard/renfang/cpts/jmPieOption.js     |  171 +-
 src/views/dataBoard/renfang/cpts/jmgl.vue     |  906 +++++-----
 src/views/dataBoard/renfang/cpts/rkfx.vue     |  890 +++++-----
 .../dataBoard/renfang/cpts/rkfxPieOption.js   |   24 +-
 src/views/dataBoard/renfang/index.vue         |  494 +++---
 .../Problem/tddtlxsj/detail.vue               |  141 ++
 .../Problem/tddtlxsj/list.vue                 |  196 +++
 .../Problem/tyqybtlx/detail.vue               |  141 ++
 .../Problem/tyqybtlx/list.vue                 |  239 +++
 .../satisfactionEval/Problem/tyry/detail.vue  |  140 ++
 .../satisfactionEval/Problem/tyry/list.vue    |  195 +++
 .../dissatisfieReason/index.vue               |    9 +-
 .../modules/DissatisfiedReason/index.vue      |   14 +-
 .../modules/eventAnalysis/index.vue           |    8 +-
 25 files changed, 3659 insertions(+), 2556 deletions(-)
 create mode 100644 src/views/dataBoard/satisfactionEval/Problem/tddtlxsj/detail.vue
 create mode 100644 src/views/dataBoard/satisfactionEval/Problem/tddtlxsj/list.vue
 create mode 100644 src/views/dataBoard/satisfactionEval/Problem/tyqybtlx/detail.vue
 create mode 100644 src/views/dataBoard/satisfactionEval/Problem/tyqybtlx/list.vue
 create mode 100644 src/views/dataBoard/satisfactionEval/Problem/tyry/detail.vue
 create mode 100644 src/views/dataBoard/satisfactionEval/Problem/tyry/list.vue

diff --git a/src/assets/scss/dataBoard/renfang/index.scss b/src/assets/scss/dataBoard/renfang/index.scss
index d9543ccb9..90811c0ea 100644
--- a/src/assets/scss/dataBoard/renfang/index.scss
+++ b/src/assets/scss/dataBoard/renfang/index.scss
@@ -3,793 +3,793 @@
 @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-search2 {
-	position: absolute;
-	z-index: 70;
-	top: 24px;
-	width: 100%;
-	text-align: center;
-
-	.el-date-editor {
-		background: #00023a;
-		box-shadow: inset 0px 0px 40px 0px rgba(26, 149, 255, 0.45);
-		border-radius: 4px;
-		border: 1px solid #1a95ff;
-		margin-right: 16px;
-
-		::v-deep .el-range-input {
-			background: transparent;
-			border: none;
-			color: #fff;
-		}
-	}
+  position: absolute;
+  z-index: 70;
+  top: 24px;
+  width: 100%;
+  text-align: center;
+
+  .el-date-editor {
+    background: #00023a;
+    box-shadow: inset 0px 0px 40px 0px rgba(26, 149, 255, 0.45);
+    border-radius: 4px;
+    border: 1px solid #1a95ff;
+    margin-right: 16px;
+
+    ::v-deep .el-range-input {
+      background: transparent;
+      border: none;
+      color: #fff;
+    }
+  }
 }
 
 .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;
+  //height: 423px;
 
-	&.z-shrink {
-		height: 253px;
-	}
+  &.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: 0 24px;
+    height: 268px;
+    overflow-y: auto;
+
+    .item {
+      margin-bottom: 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%;
-				}
-			}
-		}
-	}
+  @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;
-	}
+  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(10n+1) .name::before {
-				background: #1a95ff;
-			}
-
-			&:nth-child(10n+2) .name::before {
-				background: #ff6138;
-			}
-
-			&:nth-child(10n+3) .name::before {
-				background: #2adcea;
-			}
-
-			&:nth-child(10n+4) .name::before {
-				background: #2cc4ad;
-			}
-
-			&:nth-child(10n+5) .name::before {
-				background: #7377f5;
-			}
-
-			&:nth-child(10n+6) .name::before {
-				background: #32de66;
-			}
-
-			&:nth-child(10n+7) .name::before {
-				background: #8155d4;
-			}
-
-			&:nth-child(10n+8) .name::before {
-				background: #c7ea48;
-			}
-
-			&:nth-child(10n+9) .name::before {
-				background: #ef47c2;
-			}
-
-			&:nth-child(10n+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;
-	}
+  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(10n+1) .name::before {
+        background: #1a95ff;
+      }
+
+      &:nth-child(10n+2) .name::before {
+        background: #ff6138;
+      }
+
+      &:nth-child(10n+3) .name::before {
+        background: #2adcea;
+      }
+
+      &:nth-child(10n+4) .name::before {
+        background: #2cc4ad;
+      }
+
+      &:nth-child(10n+5) .name::before {
+        background: #7377f5;
+      }
+
+      &:nth-child(10n+6) .name::before {
+        background: #32de66;
+      }
+
+      &:nth-child(10n+7) .name::before {
+        background: #8155d4;
+      }
+
+      &:nth-child(10n+8) .name::before {
+        background: #c7ea48;
+      }
+
+      &:nth-child(10n+9) .name::before {
+        background: #ef47c2;
+      }
+
+      &:nth-child(10n+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;
+  }
 }
 
 .pieMain2 {
-	.pie {
-		margin-top: 32px;
-		flex: 0px !important;
-		height: 270px;
-	}
+  .pie {
+    margin-top: 32px;
+    flex: 0px !important;
+    height: 270px;
+  }
 }
 
 .pieMain3 {
-	.pie {
-		margin-top: 32px;
-		flex: 0 0 480px !important;
-		height: 480px !important;
-	}
+  .pie {
+    margin-top: 32px;
+    flex: 0 0 480px !important;
+    height: 480px !important;
+  }
 }
 
 .kuangkuang {
-	height: 122px;
-	width: 100%;
-	// height: calc(100% - 120px);
-	border: 0px solid rgb(26, 149, 255);
-	// background: rgba(26, 149, 255, 0.3);
-	box-shadow: inset 0px 0px 20px 0px rgba(26, 149, 255, 1);
-	background: linear-gradient(to left, rgb(26, 149, 255), rgb(26, 149, 255)) left top no-repeat,
-		linear-gradient(to bottom, rgb(26, 149, 255), rgb(26, 149, 255)) left top no-repeat, linear-gradient(to left, rgb(26, 149, 255), rgb(26, 149, 255)) right top no-repeat,
-		linear-gradient(to bottom, rgb(26, 149, 255), rgb(26, 149, 255)) right top no-repeat, linear-gradient(to left, rgb(26, 149, 255), rgb(26, 149, 255)) left bottom no-repeat,
-		linear-gradient(to bottom, rgb(26, 149, 255), rgb(26, 149, 255)) left bottom no-repeat,
-		linear-gradient(to left, rgb(26, 149, 255), rgb(26, 149, 255)) right bottom no-repeat, linear-gradient(to left, rgb(26, 149, 255), rgb(26, 149, 255)) right bottom no-repeat;
-	background-size: 3px 10px, 10px 3px, 3px 10px, 10px 3px;
-	margin-top: 20px;
-	text-align: center;
-	color: #fff;
-	overflow: hidden;
-
-	h3 {
-		font-size: 14px;
-		font-weight: 400;
-		color: #ffffff;
-		line-height: 20px;
-		margin-top: 16px;
-	}
-
-	h2 {
-		font-size: 32px;
-
-		font-weight: 500;
-		color: #ffffff;
-		line-height: 32px;
-		letter-spacing: 2px;
-	}
+  height: 122px;
+  width: 100%;
+  // height: calc(100% - 120px);
+  border: 0px solid rgb(26, 149, 255);
+  // background: rgba(26, 149, 255, 0.3);
+  box-shadow: inset 0px 0px 20px 0px rgba(26, 149, 255, 1);
+  background: linear-gradient(to left, rgb(26, 149, 255), rgb(26, 149, 255)) left top no-repeat,
+  linear-gradient(to bottom, rgb(26, 149, 255), rgb(26, 149, 255)) left top no-repeat, linear-gradient(to left, rgb(26, 149, 255), rgb(26, 149, 255)) right top no-repeat,
+  linear-gradient(to bottom, rgb(26, 149, 255), rgb(26, 149, 255)) right top no-repeat, linear-gradient(to left, rgb(26, 149, 255), rgb(26, 149, 255)) left bottom no-repeat,
+  linear-gradient(to bottom, rgb(26, 149, 255), rgb(26, 149, 255)) left bottom no-repeat,
+  linear-gradient(to left, rgb(26, 149, 255), rgb(26, 149, 255)) right bottom no-repeat, linear-gradient(to left, rgb(26, 149, 255), rgb(26, 149, 255)) right bottom no-repeat;
+  background-size: 3px 10px, 10px 3px, 3px 10px, 10px 3px;
+  margin-top: 20px;
+  text-align: center;
+  color: #fff;
+  overflow: hidden;
+
+  h3 {
+    font-size: 14px;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 20px;
+    margin-top: 16px;
+  }
+
+  h2 {
+    font-size: 32px;
+
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 32px;
+    letter-spacing: 2px;
+  }
 }
 
 .cur {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .visualizing {
-	display: flex;
-	justify-content: space-between;
-
-	&-left {
-		width: 50%;
-		height: 400px;
-	}
-
-	&-right {
-		width: 50%;
-		height: 400px;
-	}
-
-	&-item {
-		width: 33.3%;
-		height: 400px;
-	}
+  display: flex;
+  justify-content: space-between;
+
+  &-left {
+    width: 50%;
+    height: 400px;
+  }
+
+  &-right {
+    width: 50%;
+    height: 400px;
+  }
+
+  &-item {
+    width: 33.3%;
+    height: 400px;
+  }
 }
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 7bf47e4c5..bdfe6d479 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -654,6 +654,66 @@ export const dataBoardRoutes = {
         isTab: false,
       },
     },
+    {
+      path: "satisfactionEval/Problem/tddtlxsj",
+      props: true,
+      component: () => import("@/views/dataBoard/satisfactionEval/Problem/tddtlxsj/list"),
+      name: "dataBoard-satisfactionEval-Problem-tddtlxsj-list",
+      meta: {
+        title: "同地点同类型重复投诉问题列表",
+        isTab: false,
+      },
+    },
+    {
+      path: "satisfactionEval/Problem/tddtlxsj/detail",
+      props: true,
+      component: () => import("@/views/dataBoard/satisfactionEval/Problem/tddtlxsj/detail"),
+      name: "dataBoard-satisfactionEval-Problem-tddtlxsj-detail",
+      meta: {
+        title: "同地点同类型重复投诉问题详情",
+        isTab: false,
+      },
+    },
+    {
+      path: "satisfactionEval/Problem/tyqybtlx",
+      props: true,
+      component: () => import("@/views/dataBoard/satisfactionEval/Problem/tyqybtlx/list"),
+      name: "dataBoard-satisfactionEval-Problem-tyqybtlx-list",
+      meta: {
+        title: "同一区域不同类型重复投诉问题列表",
+        isTab: false,
+      },
+    },
+    {
+      path: "satisfactionEval/Problem/tyqybtlx/detail",
+      props: true,
+      component: () => import("@/views/dataBoard/satisfactionEval/Problem/tyqybtlx/detail"),
+      name: "dataBoard-satisfactionEval-Problem-tyqybtlx-detail",
+      meta: {
+        title: "同一区域不同类型重复投诉问题详情",
+        isTab: false,
+      },
+    },
+    {
+      path: "satisfactionEval/Problem/tyry",
+      props: true,
+      component: () => import("@/views/dataBoard/satisfactionEval/Problem/tyry/list"),
+      name: "dataBoard-satisfactionEval-Problem-tyry-list",
+      meta: {
+        title: "同一人员重复投诉问题列表",
+        isTab: false,
+      },
+    },
+    {
+      path: "satisfactionEval/Problem/tyry/detail",
+      props: true,
+      component: () => import("@/views/dataBoard/satisfactionEval/Problem/tyry/detail"),
+      name: "dataBoard-satisfactionEval-Problem-xqwmz-detail",
+      meta: {
+        title: "同一人员重复投诉问题详情",
+        isTab: false,
+      },
+    },
     {
       path: "organizational/index",
       props: true,
diff --git a/src/views/dataBoard/overview/components/Bmysxxq.vue b/src/views/dataBoard/overview/components/Bmysxxq.vue
index e785ef28e..25953743f 100644
--- a/src/views/dataBoard/overview/components/Bmysxxq.vue
+++ b/src/views/dataBoard/overview/components/Bmysxxq.vue
@@ -19,21 +19,20 @@
             <el-col :span="12">
               <div class="items">
                 <div class="label">需求类别：</div>
-                <div class="value">教育讲座类-健康知识专业讲座</div>
+                <div class="value">{{detail.commonServiceTypeName}}</div>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="items">
                 <div class="label">需求标题：</div>
-                <div class="value">教育讲座类共性需求</div>
+                <div class="value">{{detail.title}}</div>
               </div>
             </el-col>
             <el-col :span="24">
               <div class="items">
                 <div class="label">详细说明：</div>
                 <div class="value">
-                  健康生活方式，是指有益于健康的习惯化的行为方式。主要表现为生活有规律，没有不良嗜好，讲求个人卫生、环境卫生、饮食卫生，讲科学、不迷
-                  信，平时注意保健、生病及时就医，积极参加健康有益的文体活动和社会活动等等。
+                  {{detail.content}}
                 </div>
               </div>
             </el-col>
@@ -120,7 +119,8 @@ export default {
       form: {
         roles: "",
         user: "",
-      }
+      },
+      detail: {}
     };
   },
   methods: {
@@ -132,7 +132,9 @@ export default {
       this.getDetail(id);
     },
     getDetail(id) {
-
+      this.$http.get('/governance/commonDemand/detail/'+id,{}).then(({data:{data}}) => {
+        this.detail = data
+      });
     },
     handleDispatch() {
       this.$refs.ResourceScheduling.open()
diff --git a/src/views/dataBoard/overview/components/DemandSwiperList.vue b/src/views/dataBoard/overview/components/DemandSwiperList.vue
index e6f02a13b..8f2a69c3f 100644
--- a/src/views/dataBoard/overview/components/DemandSwiperList.vue
+++ b/src/views/dataBoard/overview/components/DemandSwiperList.vue
@@ -51,7 +51,7 @@ export default {
   },
   methods: {
     handleView(item) {
-      this.$emit('showDetail', item.id)
+      this.$emit('showDetail', item)
     }
   }
 }
diff --git a/src/views/dataBoard/overview/components/RequirementList.vue b/src/views/dataBoard/overview/components/RequirementList.vue
index 978b29aff..b0d653f0c 100644
--- a/src/views/dataBoard/overview/components/RequirementList.vue
+++ b/src/views/dataBoard/overview/components/RequirementList.vue
@@ -4,9 +4,9 @@
       <Tabs :list="tab" :value="tabval" @changeVal="(val) => tabval = val"/>
     </div>
     <DemandSwiperList v-if="tabval === 1" :list="userDemandList" @showDetail="showDetail">
-      <template slot-scope="item">
-        <span>{{ item.demandUser }}</span>
-        <span>{{ item.content }}</span>
+      <template slot-scope="{data}">
+        <span>{{ data.demandUserName }}</span>
+        <span>{{ data.content }}</span>
       </template>
 
     </DemandSwiperList>
@@ -15,9 +15,9 @@
       <Tabs :list="tab2" :value="tabval2" @changeVal="(val) => tabval2 = val"/>
     </div>
     <DemandSwiperList v-if="tabval2 === 1" :list="commonDemandList" @showDetail="showDetail2">
-      <template slot-scope="item">
-        <span>{{ item.createdTime }}</span>
-        <span>{{ item.title }}</span>
+      <template slot-scope="{data}">
+        <span>{{ data.createdTime }}</span>
+        <span>{{ data.title }}</span>
       </template>
     </DemandSwiperList>
     <DemandCharts v-else/>
@@ -69,20 +69,21 @@ export default {
     this.getCommonDemandList()
   },
   methods: {
-    showDetail() {
-      this.$refs.ServiceDetails.open();
+    showDetail({demandRecId}) {
+      this.$refs.ServiceDetails.open(demandRecId);
     },
     showDetail2() {
       this.$refs.Bmysxxq.open();
     },
     getUserDemandList() {
-      this.$http.post('/governance/userdemand/pagelist').then(({data}) => {
-        this.userDemandList = data.list || []
+      this.$http.post('/governance/userdemand/pagelist', {status: "pending", pageSize: 20}).then(({data: {data}}) => {
+        console.log(data.list, 'data.list ', data)
+        this.userDemandList = data ? data.list : []
       })
     },
     getCommonDemandList() {
-      this.$http.get('/governance/commonDemand/list?assignFlag=0').then(({data}) => {
-        this.commonDemandList = data.list || []
+      this.$http.get('/governance/commonDemand/list?assignFlag=0&pageSize=20').then(({data: {data}}) => {
+        this.commonDemandList = data ? data.list : []
       })
     }
   }
diff --git a/src/views/dataBoard/overview/components/ServiceDetails.vue b/src/views/dataBoard/overview/components/ServiceDetails.vue
index 43ee1190c..e22283ec2 100644
--- a/src/views/dataBoard/overview/components/ServiceDetails.vue
+++ b/src/views/dataBoard/overview/components/ServiceDetails.vue
@@ -20,38 +20,38 @@
             <el-col :span="12">
               <div class="items">
                 <div class="label">所属网格：</div>
-                <div class="value">xxxx社区第一网格</div>
+                <div class="value">{{detail.gridName}}</div>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="items">
                 <div class="label">需求类型：</div>
-                <div class="value">公益事业类-社会困难群体生活帮扶</div>
+                <div class="value">缺字段</div>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="items">
                 <div class="label">上报类型：</div>
-                <div class="value">社区帮办</div>
+                <div class="value">{{detail.reportTypeName}}</div>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="items">
                 <div class="label">上报人：</div>
-                <div class="value">张俊男</div>
+                <div class="value">{{detail.reportUserName}}</div>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="items">
                 <div class="label">上报人联系电话：</div>
-                <div class="value">182****8989</div>
+                <div class="value">{{detail.reportUserMobile}}</div>
                 <CallPhone icon="el-icon-phone"/>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="items">
                 <div class="label">上报时间：</div>
-                <div class="value">2023-08-22 15:20:20</div>
+                <div class="value">{{detail.reportTime}}</div>
               </div>
             </el-col>
           </el-row>
@@ -60,27 +60,27 @@
             <el-col :span="12">
               <div class="items">
                 <div class="label">需求人：</div>
-                <div class="value">李兵</div>
+                <div class="value">{{detail.demandUserName}}</div>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="items">
                 <div class="label">需求人联系电话：</div>
-                <div class="value">133****5656</div>
+                <div class="value">{{detail.demandUserMobile}}</div>
                 <CallPhone icon="el-icon-phone"/>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="items">
                 <div class="label">服务时间：</div>
-                <div class="value">2023-08-23 14:20:30</div>
+                <div class="value">{{detail.serviceStartTime}}-{{detail.serviceEndTime}}</div>
               </div>
             </el-col>
             <el-col :span="24">
               <div class="items">
                 <div class="label">需求内容：</div>
                 <div class="value">
-                  一直失业在家，没有生活来源，生活比较困难。希望社区能给与帮助，找一份稳定的工作维持生活开销。
+                  {{detail.content}}
                 </div>
               </div>
             </el-col>
@@ -90,13 +90,13 @@
             <el-col :span="12">
               <div class="items">
                 <div class="label">服务方：</div>
-                <div class="value">志愿者-王佳俊</div>
+                <div class="value">{{detail.serviceShowName}}</div>
               </div>
             </el-col>
             <el-col :span="12">
               <div class="items">
                 <div class="label">服务方联系电话：</div>
-                <div class="value">156****5656</div>
+                <div class="value">缺字段</div>
                 <CallPhone icon="el-icon-phone"/>
               </div>
             </el-col>
@@ -150,7 +150,8 @@ export default {
       form: {
         roles: "",
         user: "",
-      }
+      },
+      detail: {}
     };
   },
   methods: {
@@ -162,7 +163,9 @@ export default {
       this.getDetail(id);
     },
     getDetail(id) {
-
+      this.$http.post('/governance/userdemand/demandDetail', {demandRecId: id}).then(({data: {data}}) => {
+        this.detail = data
+      })
     },
     handleDispatch() {
       this.$refs.ResourceScheduling.open()
diff --git a/src/views/dataBoard/overview/components/jdtphx.vue b/src/views/dataBoard/overview/components/jdtphx.vue
index 12bbb0b91..faa81bfb8 100644
--- a/src/views/dataBoard/overview/components/jdtphx.vue
+++ b/src/views/dataBoard/overview/components/jdtphx.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-subbox m-jdhx">
+  <div class=" m-jdhx">
     <div class="m-jdhx-top">
       <div class="m-jdhx-card">
         <div class="m-jdhx-card-title">
diff --git a/src/views/dataBoard/overview/components/rfsjtj.vue b/src/views/dataBoard/overview/components/rfsjtj.vue
index 4b297b879..30cf452ef 100644
--- a/src/views/dataBoard/overview/components/rfsjtj.vue
+++ b/src/views/dataBoard/overview/components/rfsjtj.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="m-subbox m-rfsjtj">
+  <div class=" m-rfsjtj">
     <div class="m-rfsjtj-item">
       <div class="m-rfsjtj-item-des">采集房屋数</div>
       <div class="m-rfsjtj-item-jian">
diff --git a/src/views/dataBoard/overview/index.vue b/src/views/dataBoard/overview/index.vue
index a6a5b5925..d5472e6b3 100644
--- a/src/views/dataBoard/overview/index.vue
+++ b/src/views/dataBoard/overview/index.vue
@@ -648,5 +648,7 @@ export default {
   }
 
 }
-
+.m-map {
+  height: 1050px;
+}
 </style>
diff --git a/src/views/dataBoard/renfang/cpts/fwPieOption.js b/src/views/dataBoard/renfang/cpts/fwPieOption.js
index c7ca041d4..c19de5795 100644
--- a/src/views/dataBoard/renfang/cpts/fwPieOption.js
+++ b/src/views/dataBoard/renfang/cpts/fwPieOption.js
@@ -2,23 +2,21 @@ import * as echarts from 'echarts'
 export function pieOption() {
   const center = ["50%", "170px"];
   return {
+    color: ["#1A95FF","#FFAA00","#04C790"],
     title: {
-      text: "0",
-      top: 45,
-      left: "center",
+      text: "",
+      subtext: '总数',
+      left: '45%',
+      top: '35%',
+      textAlign :'center',
       textStyle: {
-        width: "100%",
-        fontSize: 24,
-        color: "#FFFFFF",
-        fontWeight: 400,
+        color: '#7FCEFF',
+        fontSize: 18,
+      },
+      subtextStyle: {
+        fontSize: 12,
+        color: '#A3B9DA'
       },
-      itemGap: 5,
-      // subtext: "总数",
-      // subtextStyle: {
-      //   fontSize: 20,
-      //   color: "#fff",
-      //   fontWeight: 400,
-      // },
     },
     tooltip: {
       show: false,
@@ -57,31 +55,6 @@ export function pieOption() {
         },
         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']
-                }])                                    
-              }
           }
       },
 
diff --git a/src/views/dataBoard/renfang/cpts/fwgl.vue b/src/views/dataBoard/renfang/cpts/fwgl.vue
index 10f28bc7e..5bea80d29 100644
--- a/src/views/dataBoard/renfang/cpts/fwgl.vue
+++ b/src/views/dataBoard/renfang/cpts/fwgl.vue
@@ -1,542 +1,504 @@
 <template>
-	<div>
-		<div class="m-fwgl">
-			<div class="m-pie">
-				<div class="pie-left">
-					<screen-echarts-frame
-						class=""
-						@myChartMethod="pieInitOk"
-						ref="pieChart"
-						v-if="pandectData.homeCount"
-					></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('all')">
-							<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">{{ pandectData.homeCount }}</div>
-								<div class="unit">户</div>
-							</div>
-						</div>
-
-						<div
-							class="row-item marginleft10"
-							@click="toListPage('self', '自住')"
-						>
-							<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">
-									{{ pandectData.selfStay }}
-								</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">  {{pandectData.rentOut}}</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">{{ pandectData.vacantHouse }}</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>
+  <div>
+    <div class="m-fwgl">
+      <div class="m-pie">
+        <div class="pie-left">
+          <screen-echarts-frame
+              v-if="pandectData.homeCount"
+              ref="pieChart"
+              class=""
+              @myChartMethod="pieInitOk"
+          ></screen-echarts-frame>
+        </div>
+        <div class="pie-right">
+          <div class="new-number">
+            <!--						<div class="row-item" @click="toListPage('all')">
+                          <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">{{ pandectData.homeCount }}</div>
+                            <div class="unit">户</div>
+                          </div>
+                        </div>-->
+
+            <div class="new-number-item" @click="toListPage('self', '自住')">
+              <div class="title">自住房屋</div>
+              <div class="numbers">
+                <div class="num color1">
+                  {{ pandectData.selfStay }}
+                </div>
+                <div class="unit">户</div>
+              </div>
+            </div>
+            <div class="new-number-item" @click="toListPage('lease', '出租')">
+              <div class="title">出租房屋</div>
+              <div class="numbers">
+                <div class="num color2"> {{ pandectData.rentOut }}</div>
+                <div class="unit">户</div>
+              </div>
+            </div>
+
+            <div class="new-number-item" @click="toListPage('unused', '闲置')">
+              <div class="title">闲置房屋</div>
+              <div class="numbers">
+                <div class="num color3">{{ pandectData.vacantHouse }}</div>
+                <div class="unit">户</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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";
+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,
-			},
-			pandectData:{}
-		};
-	},
-	mounted() {
-			this.$nextTick(()=>{
-				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.getPie();
-			this.getBar();
-		
-		},
-		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);
-			}
-		},
-		// 获取饼状图
-		 iniPieChart() {
-			this.$refs.pieChart.clear();
-			// 获取pieChart配置
-			this.pieOption = pieOption();
-			const {pandectData} = this
-			// 设置三个配置值
-			this.pieOption.title.text =
-				(pandectData.homeCount != 0
-					? parseInt(
-							(100 *  pandectData.selfStay) / pandectData.homeCount
-					  )
-					: "--") + "%";
-			this.pieData = [
-				{ value:  pandectData.selfStay, name: "自住房屋" },
-				{ value: pandectData.rentOut, name: "出租房屋" },
-				{ value: pandectData.vacantHouse, 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 =
-					(pandectData.homeCount != 0
-						? parseInt(
-								(100 *
-									[
-									pandectData.selfStay,
-									pandectData.rentOut,
-									pandectData.vacantHouse,
-									][dataIndexInside]) /
-									pandectData.homeCount
-						  )
-						: "--") + "%";
-				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
-			);
-		},
-	},
+  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,
+      },
+      pandectData: {}
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      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.getPie();
+      // this.getBar();
+
+    },
+    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);
+      }
+    },
+    // 获取饼状图
+    iniPieChart() {
+      this.$refs.pieChart.clear();
+      // 获取pieChart配置
+      this.pieOption = pieOption();
+      const {pandectData} = this
+      // 设置三个配置值
+      this.pieOption.title.text = pandectData.homeCount;
+      this.pieData = [
+        {value: pandectData.selfStay, name: "自住房屋"},
+        {value: pandectData.rentOut, name: "出租房屋"},
+        {value: pandectData.vacantHouse, name: "闲置房屋"},
+      ];
+      this.pieOption.series[0].data = this.pieData;
+      console.log(this.pieOption, 'this.pieOption.series')
+      this.$refs.pieChart.setOption(this.pieOption);
+      // this.$refs.pieChart.hideLoading()
+    },
+
+    // 获取房屋总数等
+    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;
-		}
-	}
+  width: 100%;
+  height: 100%;
+
+  .m-pie {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 24px;
+
+    .pie-left {
+      flex: 0 0 120px;
+      height: 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 {
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-size: 14px;
+              font-weight: 400;
+              color: #fff;
+              //color: rgba(255, 255, 255, 0.65);
+            }
+          }
+
+          .item-two {
+            display: flex;
+            align-items: flex-end;
+            margin-top: 8px;
+
+            .num {
+              font-size: 30px;
+              font-weight: "bold";
+            }
+
+            .unit {
+              font-size: 14px;
+              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 {
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 22px;
+        margin-left: 8px;
+        color: #ffffff;
+      }
+
+      .title_line {
+        width: 244px;
+        height: 1px;
+        margin-left: 8px;
+        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 {
+      height: 225px;
+      margin-top: 10px;
+    }
+  }
 }
 
 .item-name {
-	margin-left: 8px;
-	font-size: 12px;
-	font-family: PingFangSC-Regular, PingFang SC;
-	font-weight: 400;
-	color: #8c8c8c;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-size: 12px;
+  font-weight: 400;
+  margin-left: 8px;
+  color: #8c8c8c;
 }
 
 .item-logo {
-	margin-top: 2px;
-	width: 8px;
-	height: 8px;
+  width: 8px;
+  height: 8px;
+  margin-top: 2px;
 }
 
 .logo1 {
-	background: #6fdeff;
+  background: #6fdeff;
 }
+
 .logo2 {
-	background: #ffaa00;
+  background: #ffaa00;
 }
+
 .logo3 {
-	background: #1a95ff;
+  background: #1a95ff;
+}
+
+.color1 {
+  color: #1A95FF;
+}
+
+.color2 {
+  color: #ffaa00;
 }
+
+.color3 {
+  color: #04C790;
+}
+
+
 .marginleft10 {
-	margin-left: 10px;
+  margin-left: 10px;
 }
 
 .margintop18 {
-	margin-top: 18px;
+  margin-top: 18px;
+}
+.pie-right {
+  width: calc(100% - 200px);
+}
+.new-number {
+  display: flex;
+  flex-wrap: wrap;
+
+  .new-number-item:nth-of-type(odd) {
+    margin-right: 20px;
+  }
+
+  .new-number-item:nth-of-type(3) {
+    margin-top: 10px;
+  }
+
+  .new-number-item {
+    flex: 0 0 calc(50% - 10px);
+
+    .title {
+      font-size: 16px;
+      font-weight: 400;
+      margin-bottom: 5px;
+      color: #FFFFFF;
+    }
+
+    .numbers {
+      display: flex;
+      align-items: flex-end;
+
+      .num {
+        font-size: 30px;
+        font-weight: bold;
+        font-style: italic;
+      }
+
+      .unit {
+        font-size: 14px;
+        font-weight: 500;
+        position: relative;
+        top: -5px;
+        margin-left: 5px;
+        color: #A3B9DA;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/dataBoard/renfang/cpts/jmPieOption.js b/src/views/dataBoard/renfang/cpts/jmPieOption.js
index 99480650b..c88b39cc0 100644
--- a/src/views/dataBoard/renfang/cpts/jmPieOption.js
+++ b/src/views/dataBoard/renfang/cpts/jmPieOption.js
@@ -1,90 +1,95 @@
 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'
+export function pieOption() {
+    const center = ["50%", "170px"];
+    return {
+        color: ["#1A95FF", "#FFAA00", "#04C790"],
+       /* 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,
         },
-        // emphasis: {
-        //   label: {
-        //     show: true,
-        //     fontSize: 40,
-        //     fontWeight: 'bold'
-        //   }
+        // legend: {
+        // top: 350,
+        // bottom: 0,
+        // itemWidth: 20,
+        // itemHeight: 10,
+        // textStyle: {
+        //   color: '#D2E7FF',
+        //   fontSize: 16,
+        //   lineHeight: 20,
         // },
-        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: [
+        // },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['60%', '90%'],
+                avoidLabelOverlap: false,
+                labelLine: {
+                    show: false
+                },
+                data: [],
+                label: {
+                    show: false,
+                    position: 'center',
+                    formatter:  data => {
+                        console.log(data.color)
+                        return `{c_style|${data.percent.toFixed(0)}%}\n{b_style|${data.name}}`
+                        // '{c_style|{d}%}\n{b_style|{b}}'
+                    },
+                    rich: {
+                        b_style: {
+                            fontSize: 12,
+                            fontWeight: 400,
+                            color: '#A3B9DA'
+                        },
+                        c_style: {
+                            padding: [0, 0, 5, 0],
+                            fontSize: 24,
+                            fontWeight: 'bold',
+                            color: '#fff'
+                        }
+                    }
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: '14',
+                        fontWeight: 'normal'
+                    }
+                },
+             /*   label: {
+                    show: false,
+                    position: 'center'
+                },
+                emphasis: {
+                  label: {
+                    show: true,
+                    fontSize: 40,
+                    fontWeight: 'bold'
+                  }
+                },*/
+
+            }
         ]
-      }
-    ]
-  };
+    };
+
 }
diff --git a/src/views/dataBoard/renfang/cpts/jmgl.vue b/src/views/dataBoard/renfang/cpts/jmgl.vue
index ebea4003f..4b8cf38f3 100644
--- a/src/views/dataBoard/renfang/cpts/jmgl.vue
+++ b/src/views/dataBoard/renfang/cpts/jmgl.vue
@@ -1,484 +1,486 @@
 <template>
-	<div>
-		<div class="m-jmgl">
-			<div class="m-pie">
-				<div class="pie-left">
-					<screen-echarts-frame
-						class=""
-						@myChartMethod="pieInitOk"
-						ref="pieChart"
-						v-if="pandectData.totalResidents"
-					></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">{{ pandectData.totalResidents }}</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">
-									{{ pandectData.permanentResiCount }}
-								</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">{{ pandectData.floatingResiCount }}</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>
+  <div>
+    <div class="m-jmgl">
+      <div class="m-pie">
+        <div class="pie-left">
+          <screen-echarts-frame
+              v-if="pandectData.totalResidents"
+              ref="pieChart"
+              class=""
+              @myChartMethod="pieInitOk"
+          ></screen-echarts-frame>
+        </div>
+
+        <div class="pie-right">
+          <div class="new-number">
+            <!--						<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">{{ pandectData.totalResidents }}</div>
+                            <div class="unit">人</div>
+                          </div>
+                        </div>-->
+            <div class="new-number-item" @click="toListPage('permanent', '常住人口')">
+              <div class="title">常住人口</div>
+              <div class="numbers">
+                <div class="num color1">
+                  {{ pandectData.permanentResiCount }}
+                </div>
+                <div class="unit">人</div>
+              </div>
+            </div>
+            <div class="new-number-item" @click="toListPage('float', '流动人口')">
+              <div class="title">流动人口</div>
+              <div class="numbers color2">
+                <div class="num">{{ pandectData.floatingResiCount }}</div>
+                <div class="unit">人</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </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";
+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,
-			},
-			pandectData:{}
-		};
-	},
-	watch: {
-		orgId() {
-			this.getData();
-		},
-	},
-	mounted() {
-		this.$nextTick(()=>{
-			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 { pandectData } = this;
-			// 设置三个配置值
-			this.pieOption.title.text =
-				(pandectData.totalResidents != 0
-					? parseInt(
-							(100 * pandectData.permanentResiCount) / pandectData.totalResidents
-					  )
-					: "--") + "%";
-			this.pieData = [
-				{ value: pandectData.permanentResiCount, name: "常住人口" },
-				{ value: pandectData.floatingResiCount, 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 =
-					(pandectData.totalResidents != 0
-						? parseInt(
-								(100 *
-									[
-										pandectData.permanentResiCount,
-										pandectData.floatingResiCount,
-									][dataIndexInside]) /
-									pandectData.totalResidents
-						  )
-						: "--") + "%";
-				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
-			);
-		},
-	},
+  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,
+      },
+      pandectData: {}
+    };
+  },
+  watch: {
+    orgId() {
+      this.getData();
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      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.pieOption = pieOption();
+      const {pandectData} = this;
+      this.pieData = [
+        {value: pandectData.permanentResiCount, name: "常住人口"},
+        {value: pandectData.floatingResiCount, name: "流动人口"},
+      ];
+      this.pieOption.series[0].data = this.pieData;
+      this.$refs.pieChart.setOption(this.pieOption);
+      this.$refs.pieChart.myChart.setOption(this.pieOption);
+      this.$refs.pieChart.myChart.on('mouseover', (params) => {
+        var oldIndex = currentIndex;
+        var currentIndex = params.dataIndex;
+        this.highlightPie(currentIndex, oldIndex);
+      })
+
+      setTimeout(() => {
+        this.highlightPie(0, 1);
+      }, 50)
+    },
+    highlightPie(currentIndex, oldIndex) {
+      this.$refs.pieChart.myChart.dispatchAction({
+        type: 'downplay',
+        seriesIndex: 1,
+        dataIndex: oldIndex
+      })
+      this.$refs.pieChart.myChart.dispatchAction({
+        type: 'highlight',
+        seriesIndex: 1,
+        dataIndex: currentIndex
+      })
+    },
+    // 获取房屋总数等
+    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;
-		}
-	}
+  width: 100%;
+  height: 100%;
+
+  .m-pie {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 24px;
+    align-items: center;
+
+    .pie-left {
+      flex: 0 0 120px;
+      height: 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 {
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-size: 14px;
+              font-weight: 400;
+              margin-left: 9px;
+              color: rgba(255, 255, 255, 0.65);
+            }
+          }
+
+          .item-two {
+            display: flex;
+            align-items: flex-end;
+            margin-top: 8px;
+            margin-left: 23px;
+
+            .num {
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-size: 24px;
+              font-weight: 500;
+              color: #ffffff;
+            }
+
+            .unit {
+              font-family: PingFangSC-Medium, PingFang SC;
+              font-size: 14px;
+              font-weight: 500;
+              margin-left: 9px;
+              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 {
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 22px;
+        margin-left: 8px;
+        color: #ffffff;
+      }
+
+      .title_line {
+        width: 244px;
+        height: 1px;
+        margin-left: 8px;
+        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 {
+      height: 225px;
+      margin-top: 10px;
+    }
+  }
 }
 
 .item-name {
-	margin-left: 8px;
-	font-size: 12px;
-	font-family: PingFangSC-Regular, PingFang SC;
-	font-weight: 400;
-	color: #8c8c8c;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-size: 12px;
+  font-weight: 400;
+  margin-left: 8px;
+  color: #8c8c8c;
 }
 
 .item-logo {
-	margin-top: 2px;
-	width: 8px;
-	height: 8px;
+  width: 8px;
+  height: 8px;
+  margin-top: 2px;
 }
 
 .logo1 {
-	background: #6fdeff;
+  background: #6fdeff;
 }
+
 .logo2 {
-	background: #ffaa00;
+  background: #ffaa00;
 }
+
 .logo3 {
-	background: #1a95ff;
+  background: #1a95ff;
+}
+
+
+.color1 {
+  color: #1A95FF;
+}
+
+.color2 {
+  color: #ffaa00;
 }
+
+.color3 {
+  color: #04C790;
+}
+
+
 .marginleft10 {
-	margin-left: 10px;
+  margin-left: 10px;
 }
 
 .margintop18 {
-	margin-top: 18px;
+  margin-top: 18px;
+}
+
+.pie-right {
+  width: calc(100% - 200px);
+}
+
+.new-number {
+  display: flex;
+  flex-wrap: wrap;
+
+  .new-number-item:nth-of-type(odd) {
+    margin-right: 20px;
+  }
+
+  .new-number-item:nth-of-type(3) {
+    margin-top: 23px;
+  }
+
+  .new-number-item {
+    flex: 0 0 calc(50% - 10px);
+
+    .title {
+      font-size: 16px;
+      font-weight: 400;
+      margin-bottom: 10px;
+      color: #FFFFFF;
+    }
+
+    .numbers {
+      display: flex;
+      align-items: flex-end;
+
+      .num {
+        font-size: 30px;
+        font-weight: bold;
+        font-style: italic;
+      }
+
+      .unit {
+        font-size: 14px;
+        font-weight: 500;
+        position: relative;
+        top: -5px;
+        margin-left: 5px;
+        color: #A3B9DA;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/dataBoard/renfang/cpts/rkfx.vue b/src/views/dataBoard/renfang/cpts/rkfx.vue
index 18c03ba11..2baa0da36 100644
--- a/src/views/dataBoard/renfang/cpts/rkfx.vue
+++ b/src/views/dataBoard/renfang/cpts/rkfx.vue
@@ -1,453 +1,493 @@
 <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">
-				{{ item }}
-			</div>
-		</div>
-		<div class="pie-main">
-			<div class="legend cur">
-				<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" @handelClickMyPei="handelClickMyPei" ref="pieChart"></screen-echarts-frame>
-			</div>
-		</div>
-	</div>
+  <div class="m-rkyj">
+    <!--		<div class="list">
+          <div v-for="item in tabList" :key="item" :class="['item', { 'item-sel': currentTab == item }]"
+            @click="currentTab = item">
+            {{ item }}
+          </div>
+        </div>-->
+    <Tabs :list="tabList" :value="currentTab" @changeVal="(val) => currentTab = val"/>
+    <div class="pie-main">
+      <div class="pie">
+        <screen-echarts-frame
+            ref="pieChart"
+            @handelClickMyPei="handelClickMyPei"
+            @myChartMethod="pieInitOk"
+        />
+      </div>
+      <div class="legend cur">
+        <div v-for="item in pieData" :key="'pie' + item.name" class="legend-row" @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>
+  </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: ["性别", "户籍", "人户状况", "年龄", "志愿者类别", "党员文化程度",
+import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
+import {
+  pieOption
+} from "./rkfxPieOption.js";
+import {
+  requestPostBi
+} from "@/js/dai/request-bipass";
+import Tabs from "@/views/dataBoard/satisfactionEval/components/Tabs/index.vue";
+
+export default {
+  components: {
+    screenEchartsFrame, Tabs
+  },
+  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.data;
-				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);
-			},
-			handelClickMyPei(item){
-				this.handleClickItem(item)
-			}
-		},
-	};
+				],*/
+      tabList: [
+        {
+          label: "性别",
+          value: "性别"
+        }, {
+          label: "户籍",
+          value: "户籍"
+        }, {
+          label: "人户状况",
+          value: "人户状况"
+        }, {
+          label: "年龄",
+          value: "年龄"
+        }, {
+          label: "志愿者类别",
+          value: "志愿者类别"
+        }, {
+          label: "党员文化程度",
+          value: "党员文化程度"
+        }
+      ],
+      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,
+      },
+    };
+  },
+
+  mounted() {
+    this.init();
+  },
+  watch: {
+    currentTab() {
+      this.setPieData();
+    },
+    orgId() {
+      this.init();
+    },
+  },
+  methods: {
+    async init() {
+      await this.getInfo();
+      this.getPie();
+    },
+    handleClickItem(item) {
+      const {
+        type,
+        name
+      } = item.data;
+      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);
+    },
+    handelClickMyPei(item) {
+      this.handleClickItem(item)
+    }
+  },
+};
 </script>
 <style lang="scss" scoped>
-	.cur{cursor: pointer;}
-	.m-rkyj {
-		.list {
-			margin-top: 8px;
-			display: flex;
-			flex-wrap: wrap;
+/deep/ .tabs .tab {
+  min-width: 0 !important;
+}
+
+.cur {
+  cursor: pointer;
+}
+
+.m-rkyj {
+  padding: 10px;
+
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 8px;
+
+    .item {
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 32px;
+      align-items: center;
+      flex: 0 0 117px;
+      height: 32px;
+      margin-top: 8px;
+      margin-right: 2px;
+      cursor: pointer;
+      text-align: center;
+      color: #ffffff;
+      background-image: url(../../../../assets/images/shuju/renfang/rkfx-bg.png);
+      background-size: cover;
+    }
 
-			.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;
+    align-items: center;
+    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 {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 15px;
 
-				.legend-row {
-					margin-top: 15px;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
+        &:nth-child(1) .name::before {
+          background: #1a95ff;
+        }
 
-					&:nth-child(1) .name::before {
-						background: #1a95ff;
-					}
+        &:nth-child(2) .name::before {
+          background: #ff6138;
+        }
 
-					&:nth-child(2) .name::before {
-						background: #ff6138;
-					}
+        &:nth-child(3) .name::before {
+          background: #2adcea;
+        }
 
-					&:nth-child(3) .name::before {
-						background: #2adcea;
-					}
+        &:nth-child(4) .name::before {
+          background: #2cc4ad;
+        }
 
-					&:nth-child(4) .name::before {
-						background: #2cc4ad;
-					}
+        &:nth-child(5) .name::before {
+          background: #7377f5;
+        }
 
-					&:nth-child(5) .name::before {
-						background: #7377f5;
-					}
+        &:nth-child(6) .name::before {
+          background: #32de66;
+        }
 
-					&:nth-child(6) .name::before {
-						background: #32de66;
-					}
+        &:nth-child(7) .name::before {
+          background: #8155d4;
+        }
 
-					&:nth-child(7) .name::before {
-						background: #8155d4;
-					}
+        &:nth-child(8) .name::before {
+          background: #c7ea48;
+        }
 
-					&:nth-child(8) .name::before {
-						background: #c7ea48;
-					}
+        &:nth-child(9) .name::before {
+          background: #ef47c2;
+        }
 
-					&:nth-child(9) .name::before {
-						background: #ef47c2;
-					}
+        &:nth-child(10) .name::before {
+          background: #d43349;
+        }
 
-					&:nth-child(10) .name::before {
-						background: #d43349;
-					}
+        .name {
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 17px;
+          position: relative;
+          margin-left: 5px;
+          color: rgba(255, 255, 255, 0.65);
 
-					.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 {
+            position: absolute;
+            top: 4px;
+            left: -15px;
+            width: 8px;
+            height: 8px;
+            content: "";
+          }
+        }
 
-						&::before {
-							content: "";
-							position: absolute;
-							top: 4px;
-							left: -15px;
-							width: 8px;
-							height: 8px;
-						}
-					}
+        .content {
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          display: flex;
+          align-items: flex-end;
+          margin-left: 24px;
+          color: #ffffff;
+        }
 
-					.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;
+        }
 
-					.num {
-						font-size: 20px;
-					}
+        .unit {
+          font-size: 14px;
+          margin-left: 5px;
+        }
+      }
+    }
 
-					.unit {
-						margin-left: 5px;
-						font-size: 14px;
-					}
-				}
-			}
+    .pie {
+      flex: 0 0 280px;
+      height: 146px;
+      margin-top: 32px;
+    }
+  }
+}
 
-			.pie {
-				margin-top: 32px;
-				flex: 0 0 280px;
-				height: 270px;
-			}
-		}
-	}
 </style>
diff --git a/src/views/dataBoard/renfang/cpts/rkfxPieOption.js b/src/views/dataBoard/renfang/cpts/rkfxPieOption.js
index 5772b0f4a..5c4e33fe9 100644
--- a/src/views/dataBoard/renfang/cpts/rkfxPieOption.js
+++ b/src/views/dataBoard/renfang/cpts/rkfxPieOption.js
@@ -21,23 +21,35 @@ export function pieOption() {
 			{
 				name: "",
 				type: "pie",
-				radius: [40, 130],
+				radius: ["50%", "100%"],
 				center: ["50%", "50%"],
 				roseType: "area",
 				itemStyle: {
 					borderRadius: 1,
 				},
-				avoidLabelOverlap: false,
+				avoidLabelOverlap: true,
 				labelLine: {
-					show: false,
+					show: true,
 				},
 				label: {
+
 					normal: {
-						position: "inner",
 						show: true,
-						formatter: "{d}%",
-						fontSize: 24,
 						color: "#FFFFFF",
+						formatter: '{name|{b}}\n{rate|{d}%}',
+						minMargin: 5,
+						edgeDistance: 1,
+						lineHeight: 15,
+						fontSize: 14,
+						// distanceToLabelLine: -60,
+						rich: {
+							name: {
+								padding: [0, 0, 10, 0],
+							},
+							rate: {
+								padding: [10, 0, 0, 0],
+							}
+						}
 					},
 				},
 				emphasis: {
diff --git a/src/views/dataBoard/renfang/index.vue b/src/views/dataBoard/renfang/index.vue
index 764a52381..1d3c4af9e 100644
--- a/src/views/dataBoard/renfang/index.vue
+++ b/src/views/dataBoard/renfang/index.vue
@@ -1,38 +1,24 @@
 <template>
   <div>
     <cpt-bread
-      @tap="clickBreadItem"
-      v-if="breadList.length > 1"
-      :bread-list="breadList"
+        v-if="breadList.length > 1"
+        :bread-list="breadList"
+        @tap="clickBreadItem"
     />
     <div class="g-row">
       <div class="g-left">
-        <div class="m-box">
-          <div class="box-title">
-            <img
-              src="~@/assets/images/shuju/main/card-title-bg-480.png"
-              class="box-title-bg"
-            />
-            <div class="box-title-txt">房屋概览</div>
-          </div>
-
-          <div class="m-subbox">
-            <fwgl ref="fwgl" :orgId="orgData.org_id"></fwgl>
-          </div>
+        <div class="bgImg">
+          <Title text="房屋概览"/>
+          <fwgl ref="fwgl" :orgId="orgData.org_id"></fwgl>
         </div>
 
-        <div class="m-box">
-          <div class="box-title">
-            <img
-              src="~@/assets/images/shuju/main/card-title-bg-480.png"
-              class="box-title-bg"
-            />
-            <div class="box-title-txt">居民概览</div>
-          </div>
-
-          <div class="m-subbox">
-            <jmgl :orgId="orgData.org_id" ref="jmgl"></jmgl>
-          </div>
+        <div class="bgImg">
+          <Title text="居民概览"/>
+          <jmgl ref="jmgl" :orgId="orgData.org_id"></jmgl>
+        </div>
+        <div class="bgImg">
+          <Title text="图谱画像"/>
+          <jdtphx :id="orgData.org_id" />
         </div>
       </div>
 
@@ -43,7 +29,7 @@
               <div class="item-info">
                 <div>
                   <img
-                    src="~@/assets/images/shuju/renfang/index/per/lnr.png"
+                      src="~@/assets/images/shuju/renfang/index/per/lnr.png"
                   />老年人
                 </div>
                 <div>
@@ -56,7 +42,7 @@
               <div class="item-info">
                 <div>
                   <img
-                    src="~@/assets/images/shuju/renfang/index/per/qsn.png"
+                      src="~@/assets/images/shuju/renfang/index/per/qsn.png"
                   />低保人员
                 </div>
                 <div>
@@ -70,7 +56,7 @@
               <div class="item-info">
                 <div>
                   <img
-                    src="~@/assets/images/shuju/renfang/index/per/syry.png"
+                      src="~@/assets/images/shuju/renfang/index/per/syry.png"
                   />失业人员
                 </div>
                 <div>
@@ -120,27 +106,27 @@
               </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 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"
+              ref="map"
+              :srcGridData="orgData"
+              @clickAgency="clickAgencyItem"
+              @clickDotBtn="handleClickDotBtn"
           />
           <mapRight/>
         </div>
@@ -148,154 +134,158 @@
         <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"
+                class="btn-bg"
+                src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
             />
             <img
-              src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
-              class="btn-bg-hover"
+                class="btn-bg-hover"
+                src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
             />
             <span>点击搜索</span>
           </div>
 
-          <div class="card" v-show="searchModule.displayedCard">
+          <div v-show="searchModule.displayedCard" class="card">
             <div class="card-input">
               <div class="card-btn" @click="handleSearch">
                 <img
-                  src="~@/assets/images/shuju/renfang/index/search/search.png"
+                    src="~@/assets/images/shuju/renfang/index/search/search.png"
                 />
               </div>
 
               <input
-                type="text"
-                placeholder="搜索本组织及下级的居民、小区、楼栋、房屋"
-                @keyup.enter="handleSearch"
-                v-model="searchModule.keyword"
+                  v-model="searchModule.keyword"
+                  placeholder="搜索本组织及下级的居民、小区、楼栋、房屋"
+                  type="text"
+                  @keyup.enter="handleSearch"
               />
 
               <div class="i-div"></div>
 
               <div class="card-btn" @click="searchModule.displayedCard = false">
                 <img
-                  src="~@/assets/images/shuju/renfang/index/search/close.png"
+                    src="~@/assets/images/shuju/renfang/index/search/close.png"
                 />
               </div>
             </div>
             <div class="card-show">
               <div class="card-tabs">
                 <div
-                  :class="{
+                    :class="{
                     'z-on': searchModule.resultTab == '0',
                   }"
-                  @click="searchModule.resultTab = '0'"
+                    @click="searchModule.resultTab = '0'"
                 >
                   全部
                 </div>
                 <div
-                  :class="{
+                    :class="{
                     'z-on': searchModule.resultTab == '1',
                   }"
-                  @click="searchModule.resultTab = '1'"
+                    @click="searchModule.resultTab = '1'"
                 >
                   居民
                 </div>
                 <div
-                  :class="{
+                    :class="{
                     'z-on': searchModule.resultTab == '2',
                   }"
-                  @click="searchModule.resultTab = '2'"
+                    @click="searchModule.resultTab = '2'"
                 >
                   小区
                 </div>
                 <div
-                  :class="{
+                    :class="{
                     'z-on': searchModule.resultTab == '3',
                   }"
-                  @click="searchModule.resultTab = '3'"
+                    @click="searchModule.resultTab = '3'"
                 >
                   楼栋
                 </div>
                 <div
-                  :class="{
+                    :class="{
                     'z-on': searchModule.resultTab == '4',
                   }"
-                  @click="searchModule.resultTab = '4'"
+                    @click="searchModule.resultTab = '4'"
                 >
                   房屋
                 </div>
               </div>
 
-              <div class="card-list" v-if="searchModule.result.length > 0">
+              <div v-if="searchModule.result.length > 0" class="card-list">
                 <div
-                  class="card-item"
-                  :key="item.title + index"
-                  @click="handleClickSearchItem(item)"
-                  v-for="(item, index) in searchModule.result"
+                    v-for="(item, index) in searchModule.result"
+                    :key="item.title + index"
+                    class="card-item"
+                    @click="handleClickSearchItem(item)"
                 >
                   <span>{{ item.title }}</span>
                   <img
-                    src="~@/assets/images/shuju/renfang/index/search/arrow.png"
-                    class="i-arrow"
+                      class="i-arrow"
+                      src="~@/assets/images/shuju/renfang/index/search/arrow.png"
                   />
                   <img
-                    src="~@/assets/images/shuju/renfang/index/search/arrow-on.png"
-                    class="i-arrow z-on"
+                      class="i-arrow z-on"
+                      src="~@/assets/images/shuju/renfang/index/search/arrow-on.png"
                   />
                 </div>
               </div>
 
-              <div class="card-empty" v-else>
-                <img src="~@/assets/images/shuju/renfang/index/empty.png" />
+              <div v-else class="card-empty">
+                <img src="~@/assets/images/shuju/renfang/index/empty.png"/>
                 <span>没有找到搜索结果～</span>
               </div>
             </div>
           </div>
         </div>
 
-        <div class="m-box m-cate">
+        <div class="bgImg m-box m-cate">
           <div class="box-title">
-            <img
-              src="~@/assets/images/shuju/main/card-title-bg-800.png"
-              class="box-title-bg"
-            />
-            <div class="box-title-txt" v-if="!displayedForecast">
-              居民分类统计
-            </div>
-            <div class="box-title-txt" v-else>居民分类统计-智能预测</div>
-
-            <div
-              class="box-title-btn"
+            <!--            <img
+                            class="box-title-bg"
+                            src="~@/assets/images/shuju/main/card-title-bg-800.png"
+                        />
+                        <div v-if="!displayedForecast" class="box-title-txt">
+                          居民分类统计
+                        </div>
+                        <div v-else class="box-title-txt">居民分类统计-智能预测</div>
+                        -->
+            <Title v-if="!displayedForecast" text="居民概览">
+              <template>
+              <div
               v-if="!displayedForecast"
+              class="box-title-btn"
               @click="displayedForecast = true"
-            >
-              <img src="~@/assets/images/shuju/renfang/index/znyc.png" />
+              >
+              <img src="~@/assets/images/shuju/renfang/index/znyc.png"/>
               <span>智能预测</span>
 
               <el-tooltip placement="top">
-                <div slot="content">
-                  根据智能分类设置规则，预测来年育龄妇女、老年人、空巢老人、独居老人分别有多少人
-                </div>
-                <img src="~@/assets/images/shuju/renfang/index/i-hint.png" />
+              <div slot="content">
+              根据智能分类设置规则，预测来年育龄妇女、老年人、空巢老人、独居老人分别有多少人
+              </div>
+              <img src="~@/assets/images/shuju/renfang/index/i-hint.png"/>
               </el-tooltip>
-            </div>
-
+              </div>
+              </template>
+            </Title>
+            <Title v-else text="居民分类统计-智能预测"/>
             <div
-              class="box-title-btn"
-              v-else
-              @click="displayedForecast = false"
+                v-else
+                class="box-title-btn"
+                @click="displayedForecast = false"
             >
-              <img src="~@/assets/images/shuju/main/back-on.png" />
+              <img src="~@/assets/images/shuju/main/back-on.png"/>
               <span style="color: #fff">返回</span>
             </div>
           </div>
 
           <div v-if="!displayedForecast">
-            <div class="list" v-if="resiCategoryData.length > 0">
+            <div v-if="resiCategoryData.length > 0" class="list">
               <div
-                class="item"
-                @click="toResiClassPage('normal', item.code, item.name)"
-                :key="item.code + index"
-                v-for="(item, index) in resiCategoryData"
+                  v-for="(item, index) in resiCategoryData"
+                  :key="item.code + index"
+                  class="item"
+                  @click="toResiClassPage('normal', item.code, item.name)"
               >
                 <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
                 <div class="item-name">{{ item.name }}</div>
@@ -308,12 +298,12 @@
                 <div class="item-per">
                   <span>较上月</span>
                   <img
-                    v-if="item.growth >= 0"
-                    src="~@/assets/images/shuju/renfang/index/up.png"
+                      v-if="item.growth >= 0"
+                      src="~@/assets/images/shuju/renfang/index/up.png"
                   />
                   <img
-                    v-else
-                    src="~@/assets/images/shuju/renfang/index/down.png"
+                      v-else
+                      src="~@/assets/images/shuju/renfang/index/down.png"
                   />
                   <b>{{ item.growthAbs }}</b>
                   <span>人</span>
@@ -321,17 +311,17 @@
               </div>
             </div>
 
-            <div class="empty" v-else>
-              <img src="~@/assets/images/shuju/renfang/index/empty.png" />
+            <div v-else class="empty">
+              <img src="~@/assets/images/shuju/renfang/index/empty.png"/>
             </div>
           </div>
           <div v-else>
-            <div class="list" v-if="resiCategoryForecastData.length > 0">
+            <div v-if="resiCategoryForecastData.length > 0" class="list">
               <div
-                @click="toResiClassPage('ai', item.code, item.name)"
-                class="item"
-                :key="item.code + index"
-                v-for="(item, index) in resiCategoryForecastData"
+                  v-for="(item, index) in resiCategoryForecastData"
+                  :key="item.code + index"
+                  class="item"
+                  @click="toResiClassPage('ai', item.code, item.name)"
               >
                 <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
                 <div class="item-name">{{ item.name }}</div>
@@ -345,12 +335,12 @@
                 <div class="item-per">
                   <span>较上一年</span>
                   <img
-                    v-if="item.growth >= 0"
-                    src="~@/assets/images/shuju/renfang/index/up.png"
+                      v-if="item.growth >= 0"
+                      src="~@/assets/images/shuju/renfang/index/up.png"
                   />
                   <img
-                    v-else
-                    src="~@/assets/images/shuju/renfang/index/down.png"
+                      v-else
+                      src="~@/assets/images/shuju/renfang/index/down.png"
                   />
                   <b>{{ item.growthAbs }}</b>
                   <span>人</span>
@@ -358,85 +348,70 @@
               </div>
             </div>
 
-            <div class="empty" v-else>
-              <img src="~@/assets/images/shuju/renfang/index/empty.png" />
+            <div v-else class="empty">
+              <img src="~@/assets/images/shuju/renfang/index/empty.png"/>
             </div>
           </div>
         </div>
       </div>
 
       <div class="g-right">
-        <div
-          class="m-box"
-          v-if="
-            orgLevel == 'district' || orgLevel == 'street' || orgLevel == 'city'
-          "
-        >
-          <div class="box-title">
-            <img
-              src="~@/assets/images/shuju/main/card-title-bg-480.png"
-              class="box-title-bg"
-            />
-            <div class="box-title-txt">数字社区</div>
-          </div>
-
-          <div class="m-subbox m-szsq">
-            <szsq :orgId="orgData.org_id"></szsq>
-          </div>
+        <!--        <div
+                    v-if="
+                    orgLevel == 'district' || orgLevel == 'street' || orgLevel == 'city'
+                  "
+                    class="m-box"
+                >
+                  <div class="box-title">
+                    <img
+                        class="box-title-bg"
+                        src="~@/assets/images/shuju/main/card-title-bg-480.png"
+                    />
+                    <div class="box-title-txt">数字社区</div>
+                  </div>
+
+                  <div class="m-subbox m-szsq">
+                    <szsq :orgId="orgData.org_id"></szsq>
+                  </div>
+                </div>-->
+        <div class="bgImg">
+          <Title text="信息采集统计"></Title>
+          <rfsjtj :currentLevelData="{orgId: orgData.org_id}"/>
         </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="bgImg">
+          <Title text="人口预警"></Title>
 
           <div
-            class="m-subbox m-rkyj"
-            :class="{
+              :class="{
               'z-shrink':
                 orgLevel == 'district' ||
                 orgLevel == 'street' ||
                 orgLevel == 'city',
             }"
+              class="m-subbox m-rkyj"
           >
-            <rkyj :orgId="orgData.org_id"></rkyj>
+            <rkyj :orgId="orgData.org_id"/>
           </div>
         </div>
-        <div class="m-box">
-          <div class="box-title">
-            <img
-              src="~@/assets/images/shuju/main/card-title-bg-480.png"
-              class="box-title-bg"
-            />
-            <div class="box-title-txt">人口分析</div>
-          </div>
-
-          <div class="m-subbox">
-            <rkfx
-              :orgId="orgData.org_id"
-              @handelClickRkfxPei="handelClickRkfxPei"
-            ></rkfx>
-          </div>
+        <div class="bgImg">
+          <Title text="人口分析"></Title>
+          <rkfx :orgId="orgData.org_id" @handelClickRkfxPei="handelClickRkfxPei"/>
         </div>
       </div>
 
-      <cpt-loading v-show="false" />
+      <cpt-loading v-show="false"/>
     </div>
 
     <resi-details
-      @close="displayedResiId = ''"
-      :resi-id="displayedResiId"
-      v-if="displayedResiId"
+        v-if="displayedResiId"
+        :resi-id="displayedResiId"
+        @close="displayedResiId = ''"
     />
 
     <house-details
-      @close="displayedHouseId = ''"
-      :house-id="displayedHouseId"
-      v-if="displayedHouseId"
+        v-if="displayedHouseId"
+        :house-id="displayedHouseId"
+        @close="displayedHouseId = ''"
     />
   </div>
 </template>
@@ -453,11 +428,14 @@ import cptBread from "@/views/dataBoard/renfang/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 {requestPostBi} from "@/js/dai/request-bipass";
+import {requestPost} from "@/js/dai/request";
 import getQueryPara from "dai-js/modules/getQueryPara";
 import {requestGet} from "@/js/dai/request";
 import resiCategoryMap from "@/views/business/resi-category-map.js";
+import Title from "@/views/dataBoard/satisfactionEval/components/Title/index.vue";
+import rfsjtj from "@/views/dataBoard/overview/components/rfsjtj.vue";
+import jdtphx from "@/views/dataBoard/overview/components/jdtphx.vue";
 
 function iniGetPerInfo() {
   return {
@@ -474,6 +452,7 @@ export default {
   name: "renfang",
 
   components: {
+    Title,
     gridMap,
     fwgl,
     jmgl,
@@ -484,7 +463,9 @@ export default {
     cptBread,
     houseDetails,
     resiDetails,
-    mapRight
+    mapRight,
+    rfsjtj,
+    jdtphx
   },
 
   data() {
@@ -501,7 +482,7 @@ export default {
         {
           orgId: "",
           orgLevel: "",
-          meta: { title: "人房总览" },
+          meta: {title: "人房总览"},
         },
       ],
 
@@ -559,8 +540,8 @@ export default {
       this.getPandectData()
       this.loading = true;
     },
-     //加载组织数据
-     async getPandectData() {
+    //加载组织数据
+    async getPandectData() {
       const url = "/actual/base/residentHouseMerge/communityOverview";
       let params = {
         // orgId: "",
@@ -570,10 +551,10 @@ export default {
       const {data, code, msg} = await requestGet(url, params);
       if (code === 0) {
         if (data) {
-          this.$nextTick(()=>{
-            this.$refs['fwgl'].pandectData = data
-            this.$refs['jmgl'].pandectData = data
-            }
+          this.$nextTick(() => {
+                this.$refs['fwgl'].pandectData = data
+                this.$refs['jmgl'].pandectData = data
+              }
           )
         }
       } else {
@@ -615,7 +596,7 @@ export default {
       }
     },
 
-    clickBreadItem({ item }) {
+    clickBreadItem({item}) {
       this.toBread(item);
     },
 
@@ -623,13 +604,13 @@ export default {
       this.toBread({
         orgId: item.id,
         orgLevel: item.level,
-        meta: { title: item.name },
+        meta: {title: item.name},
       });
     },
 
     toBread(item) {
-      const { orgId } = item;
-      const { breadList } = this;
+      const {orgId} = item;
+      const {breadList} = this;
       let index = breadList.findIndex((val) => val.orgId === orgId);
       if (index >= 0) {
         this.breadList = breadList.slice(0, index + 1);
@@ -654,7 +635,7 @@ export default {
     // 根据类别搜索
     async handleSearch() {
       this.searchModule.result = [];
-      const { searchModule } = this;
+      const {searchModule} = this;
 
       const url = [
         "search_all",
@@ -664,18 +645,18 @@ export default {
         "search_house",
       ][searchModule.resultTab];
 
-      const { data, code, msg } = await requestPostBi(
-        url,
-        {
-          queryParam: {
-            org_id: this.orgId,
-            name: this.searchModule.keyword,
+      const {data, code, msg} = await requestPostBi(
+          url,
+          {
+            queryParam: {
+              org_id: this.orgId,
+              name: this.searchModule.keyword,
+            },
           },
-        },
-        {
-          // mockId: 60044224,
-          // mockId: 60048067,
-        }
+          {
+            // mockId: 60044224,
+            // mockId: 60048067,
+          }
       );
 
       if (code === 0) {
@@ -717,16 +698,16 @@ export default {
     async getPerInfo() {
       const url = "resident_ratio";
 
-      const { data, code, msg } = await requestPostBi(
-        url,
-        {
-          queryParam: {
-            org_id: this.orgId,
+      const {data, code, msg} = await requestPostBi(
+          url,
+          {
+            queryParam: {
+              org_id: this.orgId,
+            },
           },
-        },
-        {
-          // mockId: 61167746,
-        }
+          {
+            // mockId: 61167746,
+          }
       );
 
       if (code === 0) {
@@ -746,7 +727,7 @@ export default {
         // id: this.orgData.id,
         // level: "agency",
       };
-      const { data, code, msg } = await requestGet(url, params);
+      const {data, code, msg} = await requestGet(url, params);
       if (code === 0) {
         if (data) {
           this.resiCategoryData = data.categoryList.map((item) => {
@@ -768,24 +749,23 @@ export default {
     //居民分类预测数据
     async getResiCategoryForecastData() {
       const url = "/actual/base/resiCategory/intelligentPredictioncategoryCountList";
-      let params = {
-      };
+      let params = {};
       const {data, code, msg} = await requestGet(url, params);
       if (code === 0) {
-          this.resiCategoryForecastData = data.categoryList.map((item) => {
-            return {
-              code: item.categoryName,
-              name: resiCategoryMap[item.categoryName] || "",
-              count: item.categoryCountNext,
-              // name:item.categoryCountName,
-              per: parseInt(
+        this.resiCategoryForecastData = data.categoryList.map((item) => {
+          return {
+            code: item.categoryName,
+            name: resiCategoryMap[item.categoryName] || "",
+            count: item.categoryCountNext,
+            // name:item.categoryCountName,
+            per: parseInt(
                 (100 * item.categoryCount) / data.resiCount
-              ),
-              // per: item.change_ratio,
-              growth: item.change_ratio,
-              growthAbs: Math.abs(item.categoryCountNext - item.categoryCount)
-            };
-          });
+            ),
+            // per: item.change_ratio,
+            growth: item.change_ratio,
+            growthAbs: Math.abs(item.categoryCountNext - item.categoryCount)
+          };
+        });
       } else {
         this.$message.error(msg);
       }
@@ -795,16 +775,16 @@ export default {
     async getMapData() {
       const url = "org_map";
 
-      const { data, code, msg } = await requestPostBi(
-        url,
-        {
-          queryParam: {
-            org_id: this.orgId,
+      const {data, code, msg} = await requestPostBi(
+          url,
+          {
+            queryParam: {
+              org_id: this.orgId,
+            },
           },
-        },
-        {
-          // mockId: 60810589,
-        }
+          {
+            // mockId: 60810589,
+          }
       );
 
       if (code === 0) {
@@ -829,20 +809,20 @@ export default {
     async getSubMapData() {
       const url = "sub_org_map";
 
-      const { data, code, msg } = await requestPostBi(
-        url,
-        {
-          queryParam: {
-            org_id: this.orgId,
+      const {data, code, msg} = await requestPostBi(
+          url,
+          {
+            queryParam: {
+              org_id: this.orgId,
+            },
           },
-        },
-        {
-          // mockId: 61831860,
-        }
+          {
+            // mockId: 61831860,
+          }
       );
 
       if (code === 0) {
-        const { orgData } = this;
+        const {orgData} = this;
         orgData.children = data.map((item) => {
           return {
             ...item,
@@ -853,7 +833,7 @@ export default {
             coordinates: item.coordinates || "",
           };
         });
-        this.orgData = { ...orgData };
+        this.orgData = {...orgData};
       } else {
         this.$message.error(msg);
       }
@@ -867,7 +847,7 @@ export default {
         level: this.orgLevel,
       };
 
-      const { data, code, msg } = await requestPost(url, params);
+      const {data, code, msg} = await requestPost(url, params);
 
       if (code === 0) {
         this.orgData = data;
@@ -883,9 +863,15 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+@import "@/assets/scss/dataBoard/renfang/index.scss";
 
-<style
-  lang="scss"
-  src="@/assets/scss/dataBoard/renfang/index.scss"
-  scoped
-></style>
+.bgImg {
+  margin-top: 5px;
+  background: url('@/assets/images/shuju/overview/box-bg.png') no-repeat;
+  background-size: 100% 100%;
+}
+.m-box {
+  height: 320px;
+}
+</style>
diff --git a/src/views/dataBoard/satisfactionEval/Problem/tddtlxsj/detail.vue b/src/views/dataBoard/satisfactionEval/Problem/tddtlxsj/detail.vue
new file mode 100644
index 000000000..7e6dd83a4
--- /dev/null
+++ b/src/views/dataBoard/satisfactionEval/Problem/tddtlxsj/detail.vue
@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <Breadcrumb :list="breadcrumbList"/>
+    <div class="table">
+      <el-table
+          v-loading="loading"
+          :data="list"
+          element-loading-background="rgba(0,0,0,0.5)"
+          element-loading-spinner="el-icon-loading"
+          element-loading-text="加载中..."
+      >
+        <el-table-column label="序号" type="index" width="80"/>
+        <el-table-column label="地点" prop="key"/>
+        <el-table-column label="工单号" prop="key"/>
+        <el-table-column label="所属社区" prop="key"></el-table-column>
+        <el-table-column label="事件分类" prop="key"></el-table-column>
+        <el-table-column label="投诉内容" prop="key"></el-table-column>
+        <el-table-column label="接收时间" prop="key"></el-table-column>
+        <el-table-column label="联系人" prop="key"></el-table-column>
+        <el-table-column label="联系电话" prop="key"></el-table-column>
+        <el-table-column label="状态" prop="key"></el-table-column>
+        <el-table-column align="center" label="详情">
+          <template slot-scope="data">
+            <el-button type="text" @click="handleView(data.row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <EventDetails :id="rowId" :showDialog="showDialog" @close="showDialog = false"/>
+
+    <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total"
+                @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
+import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
+import Title from "@/views/dataBoard/satisfactionEval/components/Title";
+import EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue";
+
+export default {
+  name: "TddtlxsjDetail",
+  components: {Breadcrumb, Pagination, Title, EventDetails},
+  data() {
+    return {
+      showDialog: false,
+      rowId: "",
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      orgOptions: [],
+      breadcrumbList: [
+        {
+          path: "/dataBoard/satisfactionEval/index",
+          name: "满意度评价",
+        },
+        {
+          path: "/dataBoard/satisfactionEval/Problem/tddtlxsj",
+          name: "同地点同类型重复投诉问题列表",
+        },
+        {
+          path: "",
+          name: "详情",
+        },
+      ],
+      list: [{}, {}, {}],
+      title: "",
+      loading: false,
+    };
+  },
+  activated() {
+    this.title = this.$route.query.title;
+    let searchParams = JSON.parse(this.$route.query.searchParams);
+    this.queryParams = {
+      ...this.queryParams,
+      ...searchParams,
+    };
+    this.getList();
+  },
+  methods: {
+    search() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      let params = {
+        ...this.queryParams,
+      }
+
+      this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => {
+        this.total = data.total;
+        this.list = data.list;
+        this.loading = false;
+      });
+    },
+    handleView({id}) {
+      this.showDialog = true;
+      this.rowId = id;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/dataBoard/table.scss";
+
+.screen {
+  margin: 25px 0 40px;
+
+  .el-select,
+  .el-input {
+    width: 150px;
+    margin-right: 4px;
+    border: 1px solid #126ac5;
+    border-radius: 2px;
+
+    /deep/ .el-input__inner {
+      color: #fff;
+      border: none;
+      background: none;
+    }
+  }
+
+  .btn {
+    height: 32px;
+    margin-left: 46px;
+  }
+}
+
+.main-title {
+  margin: 25px 0 32px;
+}
+
+.table {
+  margin-top: 32px;
+}
+</style>
diff --git a/src/views/dataBoard/satisfactionEval/Problem/tddtlxsj/list.vue b/src/views/dataBoard/satisfactionEval/Problem/tddtlxsj/list.vue
new file mode 100644
index 000000000..af1da1a90
--- /dev/null
+++ b/src/views/dataBoard/satisfactionEval/Problem/tddtlxsj/list.vue
@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <Breadcrumb :list="breadcrumbList"/>
+    <div class="screen">
+      <el-form :model="queryParams" inline>
+        <el-select
+            v-model="typeCondition"
+            class="select"
+            placeholder="请选择"
+            popper-class="selectPopClass"
+            size="small"
+            @change="timeChange"
+        >
+          <el-option
+              v-for="item in typeConditionList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+        <el-button class="btn" size="small" type="primary" @click="search">查询</el-button>
+      </el-form>
+    </div>
+    <div class="table">
+      <el-table v-loading="loading" :data="list" element-loading-background="rgba(0,0,0,0.5)"
+                element-loading-spinner="el-icon-loading" element-loading-text="加载中...">
+        <el-table-column label="序号" type="index"/>
+        <el-table-column label="地点" prop="key"/>
+        <el-table-column label="类型" prop="gridName"/>
+        <el-table-column label="投诉次数" prop="restName"></el-table-column>
+        <el-table-column align="center" label="详情">
+          <template slot-scope="data">
+            <el-button type="text" @click="handleView(data.row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total"
+                @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
+import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
+import Title from "@/views/dataBoard/satisfactionEval/components/Title";
+
+export default {
+  name: "tddtlxsjList",
+  components: {Breadcrumb, Pagination, Title},
+  data() {
+    return {
+      queryParams: {
+        month: "",
+        agencyId: "",
+        pageNo: 1,
+        pageSize: 10,
+      },
+      typeCondition: 5,
+      typeConditionList: [
+        {
+          label: "本月",
+          value: 1,
+        },
+        {
+          label: "上月",
+          value: 2,
+        },
+        {
+          label: "近三月",
+          value: 3,
+        },
+        {
+          label: "近半年",
+          value: 4,
+        },
+        {
+          label: "近一年",
+          value: 5,
+        },
+      ],
+      total: 0,
+      orgOptions: [],
+      breadcrumbList: [
+        {
+          path: "/dataBoard/satisfactionEval/index",
+          name: "满意度评价",
+        },
+        {
+          path: "",
+          name: "同地点同类型重复投诉问题列表 ",
+        },
+      ],
+      monthOptions: new Array(12).fill(0).map((_, index) => {
+        return {label: index - 0 + 1 + "月", value: index - 0 + 1};
+      }),
+      list: [{}, {}, {}],
+      title: "",
+      loading: false,
+    };
+  },
+  activated() {
+    this.title = this.$route.query.title;
+    let searchParams = JSON.parse(this.$route.query.searchParams);
+    this.queryParams = {
+      ...this.queryParams,
+      ...searchParams,
+    };
+    this.getList();
+  },
+  methods: {
+    search() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      let params = {
+        ...this.queryParams,
+        ...this.timeChange(this.typeCondition)
+      }
+
+      this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => {
+        this.total = data.total;
+        this.list = data.list;
+        this.loading = false;
+      });
+    },
+    timeChange(type) {
+      let startTime = "",
+          endTime = "";
+      if (type == 1) {
+        startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 2) {
+        startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 3) {
+        startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 4) {
+        startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 5) {
+        startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
+      }
+
+      if (type == 2) {
+        endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
+      } else {
+        endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
+      }
+      return {startTime, endTime};
+    },
+    handleView(id) {
+      this.id = id;
+      this.$router.push('/dataBoard/satisfactionEval/Problem/tddtlxsj/detail?id='+id)
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/dataBoard/table.scss";
+
+.screen {
+  margin: 25px 0 40px;
+
+  .el-select,
+  .el-input {
+    width: 150px;
+    margin-right: 4px;
+    border: 1px solid #126ac5;
+    border-radius: 2px;
+
+    /deep/ .el-input__inner {
+      color: #fff;
+      border: none;
+      background: none;
+    }
+  }
+
+  .btn {
+    height: 32px;
+    margin-left: 46px;
+  }
+}
+
+.main-title {
+  margin: 25px 0 32px;
+}
+
+.table {
+  margin-top: 32px;
+}
+</style>
diff --git a/src/views/dataBoard/satisfactionEval/Problem/tyqybtlx/detail.vue b/src/views/dataBoard/satisfactionEval/Problem/tyqybtlx/detail.vue
new file mode 100644
index 000000000..05fa3b6a2
--- /dev/null
+++ b/src/views/dataBoard/satisfactionEval/Problem/tyqybtlx/detail.vue
@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <Breadcrumb :list="breadcrumbList"/>
+    <div class="table">
+      <el-table
+          v-loading="loading"
+          :data="list"
+          element-loading-background="rgba(0,0,0,0.5)"
+          element-loading-spinner="el-icon-loading"
+          element-loading-text="加载中..."
+      >
+        <el-table-column label="序号" type="index" width="80"/>
+        <el-table-column label="地点" prop="key"/>
+        <el-table-column label="工单号" prop="key"/>
+        <el-table-column label="所属社区" prop="key"></el-table-column>
+        <el-table-column label="事件分类" prop="key"></el-table-column>
+        <el-table-column label="投诉内容" prop="key"></el-table-column>
+        <el-table-column label="接收时间" prop="key"></el-table-column>
+        <el-table-column label="联系人" prop="key"></el-table-column>
+        <el-table-column label="联系电话" prop="key"></el-table-column>
+        <el-table-column label="状态" prop="key"></el-table-column>
+        <el-table-column align="center" label="详情">
+          <template slot-scope="data">
+            <el-button type="text" @click="handleView(data.row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <EventDetails :id="rowId" :showDialog="showDialog" @close="showDialog = false"/>
+
+    <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total"
+                @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
+import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
+import Title from "@/views/dataBoard/satisfactionEval/components/Title";
+import EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue";
+
+export default {
+  name: "tyrydetail",
+  components: {Breadcrumb, Pagination, Title, EventDetails},
+  data() {
+    return {
+      showDialog: false,
+      rowId: "",
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      orgOptions: [],
+      breadcrumbList: [
+        {
+          path: "/dataBoard/satisfactionEval/index",
+          name: "满意度评价",
+        },
+        {
+          path: "/dataBoard/satisfactionEval/Problem/tyqybtlx",
+          name: "同一区域不同类型重复投诉问题列表",
+        },
+        {
+          path: "",
+          name: "详情",
+        },
+      ],
+      list: [{}, {}, {}],
+      title: "",
+      loading: false,
+    };
+  },
+  activated() {
+    this.title = this.$route.query.title;
+    let searchParams = JSON.parse(this.$route.query.searchParams);
+    this.queryParams = {
+      ...this.queryParams,
+      ...searchParams,
+    };
+    this.getList();
+  },
+  methods: {
+    search() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      let params = {
+        ...this.queryParams,
+      }
+
+      this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => {
+        this.total = data.total;
+        this.list = data.list;
+        this.loading = false;
+      });
+    },
+    handleView({id}) {
+      this.showDialog = true;
+      this.rowId = id;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/dataBoard/table.scss";
+
+.screen {
+  margin: 25px 0 40px;
+
+  .el-select,
+  .el-input {
+    width: 150px;
+    margin-right: 4px;
+    border: 1px solid #126ac5;
+    border-radius: 2px;
+
+    /deep/ .el-input__inner {
+      color: #fff;
+      border: none;
+      background: none;
+    }
+  }
+
+  .btn {
+    height: 32px;
+    margin-left: 46px;
+  }
+}
+
+.main-title {
+  margin: 25px 0 32px;
+}
+
+.table {
+  margin-top: 32px;
+}
+</style>
diff --git a/src/views/dataBoard/satisfactionEval/Problem/tyqybtlx/list.vue b/src/views/dataBoard/satisfactionEval/Problem/tyqybtlx/list.vue
new file mode 100644
index 000000000..88b52e1c3
--- /dev/null
+++ b/src/views/dataBoard/satisfactionEval/Problem/tyqybtlx/list.vue
@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <Breadcrumb :list="breadcrumbList"/>
+    <div class="screen">
+      <el-form :model="queryParams" inline>
+        <el-select
+            v-model="typeCondition"
+            class="select"
+            placeholder="请选择"
+            popper-class="selectPopClass"
+            size="small"
+            @change="timeChange"
+        >
+          <el-option
+              v-for="item in typeConditionList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+        <el-button class="btn" size="small" type="primary" @click="search">查询</el-button>
+      </el-form>
+    </div>
+    <div class="table">
+      <el-table
+          v-loading="loading"
+          :data="data"
+          :span-method="objectSpanMethod"
+          element-loading-background="rgba(0,0,0,0.5)"
+          element-loading-spinner="el-icon-loading"
+          element-loading-text="加载中..."
+      >
+        <el-table-column label="序号" prop="number" width="80"/>
+        <el-table-column label="地点" prop="column1"/>
+        <el-table-column label="类型" prop="column3"/>
+        <el-table-column label="投诉次数" prop="column2"/>
+        <el-table-column align="center" label="详情">
+          <template slot-scope="data">
+            <el-button type="text" @click="handleView(data.row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total"
+                @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
+import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
+import Title from "@/views/dataBoard/satisfactionEval/components/Title";
+
+export default {
+  name: "tyryList",
+  components: {Breadcrumb, Pagination, Title},
+  data() {
+    return {
+      queryParams: {
+        month: "",
+        agencyId: "",
+        pageNo: 1,
+        pageSize: 10,
+      },
+      typeCondition: 5,
+      typeConditionList: [
+        {
+          label: "本月",
+          value: 1,
+        },
+        {
+          label: "上月",
+          value: 2,
+        },
+        {
+          label: "近三月",
+          value: 3,
+        },
+        {
+          label: "近半年",
+          value: 4,
+        },
+        {
+          label: "近一年",
+          value: 5,
+        },
+      ],
+      total: 0,
+      orgOptions: [],
+      breadcrumbList: [
+        {
+          path: "/dataBoard/satisfactionEval/index",
+          name: "满意度评价",
+        },
+        {
+          path: "",
+          name: "同一区域不同类型重复投诉问题列表 ",
+        },
+      ],
+      monthOptions: new Array(12).fill(0).map((_, index) => {
+        return {label: index - 0 + 1 + "月", value: index - 0 + 1};
+      }),
+      data: [
+        {number: 1, column1: '市北区清江路100号', column2: '10', column3: '100'},
+        {number: 2, column1: '市北区清江路100号', column2: '10', column3: '100'},
+        {number: 3, column1: '市北区清江路100号', column2: '10', column3: '100'},
+        {number: 4, column1: '市北区清江路**号', column2: '10', column3: '100'},
+        {number: 5, column1: '市北区清江路**号', column2: '10', column3: '100'},
+      ],
+      data1: [
+        "number",
+        "column1",
+        "column2",
+        "column3"
+      ],
+      title: "",
+      loading: false,
+    };
+  },
+  activated() {
+    this.title = this.$route.query.title;
+    let searchParams = JSON.parse(this.$route.query.searchParams);
+    this.queryParams = {
+      ...this.queryParams,
+      ...searchParams,
+    };
+    this.getList();
+  },
+  methods: {
+    objectSpanMethod({row, column, rowIndex, columnIndex}) {
+      if (columnIndex === 1 || columnIndex === 0 || columnIndex === 4) {
+        if (rowIndex > 0 && row.column1 === this.data[rowIndex - 1].column1) {
+          return {
+            rowspan: 0,
+            colspan: 0,
+          };
+        } else {
+          let rowspan = 1;
+          for (let i = rowIndex + 1; i < this.data.length; i++) {
+            if (row.column1 === this.data[i].column1) {
+              rowspan++;
+            } else {
+              //else：当遇到与当前行 "Name" 值不同的行时，我们退出循环。
+              break;
+            }
+          }
+          //最后，我们返回 { rowspan, colspan: 1 }，其中 rowspan 表示需要合并的行数，而 colspan: 1 表示不合并列
+          return {
+            rowspan,
+            colspan: 1,
+          };
+        }
+      }
+    },
+    search() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      let params = {
+        ...this.queryParams,
+        ...this.timeChange(this.typeCondition)
+      }
+
+      this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => {
+        this.total = data.total;
+        this.list = data.list;
+        this.loading = false;
+      });
+    },
+    timeChange(type) {
+      let startTime = "",
+          endTime = "";
+      if (type == 1) {
+        startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 2) {
+        startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 3) {
+        startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 4) {
+        startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 5) {
+        startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
+      }
+
+      if (type == 2) {
+        endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
+      } else {
+        endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
+      }
+      return {startTime, endTime};
+    },
+    handleView(id) {
+      this.id = id;
+      this.$router.push('/dataBoard/satisfactionEval/Problem/tyqybtlx/detail?id=' + id)
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/dataBoard/table-border.scss";
+
+.screen {
+  margin: 25px 0 40px;
+
+  .el-select,
+  .el-input {
+    width: 150px;
+    margin-right: 4px;
+    border: 1px solid #126ac5;
+    border-radius: 2px;
+
+    /deep/ .el-input__inner {
+      color: #fff;
+      border: none;
+      background: none;
+    }
+  }
+
+  .btn {
+    height: 32px;
+    margin-left: 46px;
+  }
+}
+
+.main-title {
+  margin: 25px 0 32px;
+}
+
+.table {
+  margin-top: 32px;
+}
+</style>
diff --git a/src/views/dataBoard/satisfactionEval/Problem/tyry/detail.vue b/src/views/dataBoard/satisfactionEval/Problem/tyry/detail.vue
new file mode 100644
index 000000000..a8242c558
--- /dev/null
+++ b/src/views/dataBoard/satisfactionEval/Problem/tyry/detail.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <Breadcrumb :list="breadcrumbList"/>
+    <div class="table">
+      <el-table
+          v-loading="loading"
+          :data="list"
+          element-loading-background="rgba(0,0,0,0.5)"
+          element-loading-spinner="el-icon-loading"
+          element-loading-text="加载中..."
+      >
+        <el-table-column label="序号" type="index" width="80"/>
+        <el-table-column label="工单号" prop="key"/>
+        <el-table-column label="所属社区" prop="key"></el-table-column>
+        <el-table-column label="事件分类" prop="key"></el-table-column>
+        <el-table-column label="投诉内容" prop="key"></el-table-column>
+        <el-table-column label="接收时间" prop="key"></el-table-column>
+        <el-table-column label="联系人" prop="key"></el-table-column>
+        <el-table-column label="联系电话" prop="key"></el-table-column>
+        <el-table-column label="状态" prop="key"></el-table-column>
+        <el-table-column align="center" label="详情">
+          <template slot-scope="data">
+            <el-button type="text" @click="handleView(data.row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <EventDetails :id="rowId" :showDialog="showDialog" @close="showDialog = false"/>
+
+    <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total"
+                @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
+import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
+import Title from "@/views/dataBoard/satisfactionEval/components/Title";
+import EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue";
+
+export default {
+  name: "tyrydetail",
+  components: {Breadcrumb, Pagination, Title, EventDetails},
+  data() {
+    return {
+      showDialog: false,
+      rowId: "",
+      queryParams: {
+        pageNo: 1,
+        pageSize: 10,
+      },
+      total: 0,
+      orgOptions: [],
+      breadcrumbList: [
+        {
+          path: "/dataBoard/satisfactionEval/index",
+          name: "满意度评价",
+        },
+        {
+          path: "/dataBoard/satisfactionEval/Problem/tyry",
+          name: "同一人员重复投诉问题列表",
+        },
+        {
+          path: "",
+          name: "详情",
+        },
+      ],
+      list: [{}, {}, {}],
+      title: "",
+      loading: false,
+    };
+  },
+  activated() {
+    this.title = this.$route.query.title;
+    let searchParams = JSON.parse(this.$route.query.searchParams);
+    this.queryParams = {
+      ...this.queryParams,
+      ...searchParams,
+    };
+    this.getList();
+  },
+  methods: {
+    search() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      let params = {
+        ...this.queryParams,
+      }
+
+      this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => {
+        this.total = data.total;
+        this.list = data.list;
+        this.loading = false;
+      });
+    },
+    handleView({id}) {
+      this.showDialog = true;
+      this.rowId = id;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/dataBoard/table.scss";
+
+.screen {
+  margin: 25px 0 40px;
+
+  .el-select,
+  .el-input {
+    width: 150px;
+    margin-right: 4px;
+    border: 1px solid #126ac5;
+    border-radius: 2px;
+
+    /deep/ .el-input__inner {
+      color: #fff;
+      border: none;
+      background: none;
+    }
+  }
+
+  .btn {
+    height: 32px;
+    margin-left: 46px;
+  }
+}
+
+.main-title {
+  margin: 25px 0 32px;
+}
+
+.table {
+  margin-top: 32px;
+}
+</style>
diff --git a/src/views/dataBoard/satisfactionEval/Problem/tyry/list.vue b/src/views/dataBoard/satisfactionEval/Problem/tyry/list.vue
new file mode 100644
index 000000000..6882a0f87
--- /dev/null
+++ b/src/views/dataBoard/satisfactionEval/Problem/tyry/list.vue
@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <Breadcrumb :list="breadcrumbList"/>
+    <div class="screen">
+      <el-form :model="queryParams" inline>
+        <el-select
+            v-model="typeCondition"
+            class="select"
+            placeholder="请选择"
+            popper-class="selectPopClass"
+            size="small"
+            @change="timeChange"
+        >
+          <el-option
+              v-for="item in typeConditionList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+        <el-button class="btn" size="small" type="primary" @click="search">查询</el-button>
+      </el-form>
+    </div>
+    <div class="table">
+      <el-table v-loading="loading" :data="list" element-loading-background="rgba(0,0,0,0.5)"
+                element-loading-spinner="el-icon-loading" element-loading-text="加载中...">
+        <el-table-column label="序号" type="index"/>
+        <el-table-column label="联系方式" prop="key"/>
+        <el-table-column label="投诉次数" prop="restName"></el-table-column>
+        <el-table-column align="center" label="详情">
+          <template slot-scope="data">
+            <el-button type="text" @click="handleView(data.row)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total"
+                @pagination="getList"/>
+  </div>
+</template>
+
+<script>
+import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
+import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
+import Title from "@/views/dataBoard/satisfactionEval/components/Title";
+
+export default {
+  name: "tyryList",
+  components: {Breadcrumb, Pagination, Title},
+  data() {
+    return {
+      queryParams: {
+        month: "",
+        agencyId: "",
+        pageNo: 1,
+        pageSize: 10,
+      },
+      typeCondition: 5,
+      typeConditionList: [
+        {
+          label: "本月",
+          value: 1,
+        },
+        {
+          label: "上月",
+          value: 2,
+        },
+        {
+          label: "近三月",
+          value: 3,
+        },
+        {
+          label: "近半年",
+          value: 4,
+        },
+        {
+          label: "近一年",
+          value: 5,
+        },
+      ],
+      total: 0,
+      orgOptions: [],
+      breadcrumbList: [
+        {
+          path: "/dataBoard/satisfactionEval/index",
+          name: "满意度评价",
+        },
+        {
+          path: "",
+          name: "同一人员重复投诉问题列表 ",
+        },
+      ],
+      monthOptions: new Array(12).fill(0).map((_, index) => {
+        return {label: index - 0 + 1 + "月", value: index - 0 + 1};
+      }),
+      list: [{}, {}, {}],
+      title: "",
+      loading: false,
+    };
+  },
+  activated() {
+    this.title = this.$route.query.title;
+    let searchParams = JSON.parse(this.$route.query.searchParams);
+    this.queryParams = {
+      ...this.queryParams,
+      ...searchParams,
+    };
+    this.getList();
+  },
+  methods: {
+    search() {
+      this.queryParams.pageNo = 1;
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      let params = {
+        ...this.queryParams,
+        ...this.timeChange(this.typeCondition)
+      }
+
+      this.$http.get("?" + this.$paramsFormat(params)).then(({data: {data}}) => {
+        this.total = data.total;
+        this.list = data.list;
+        this.loading = false;
+      });
+    },
+    timeChange(type) {
+      let startTime = "",
+          endTime = "";
+      if (type == 1) {
+        startTime = this.$moment().startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 2) {
+        startTime = this.$moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 3) {
+        startTime = this.$moment().subtract(2, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 4) {
+        startTime = this.$moment().subtract(5, "months").startOf("month").format("YYYY-MM-DD");
+      }
+      if (type == 5) {
+        startTime = this.$moment().subtract(11, "months").startOf("month").format("YYYY-MM-DD");
+      }
+
+      if (type == 2) {
+        endTime = this.$moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD");
+      } else {
+        endTime = this.$moment().endOf("month").format("YYYY-MM-DD");
+      }
+      return {startTime, endTime};
+    },
+    handleView(id) {
+      this.id = id;
+      this.$router.push('/dataBoard/satisfactionEval/Problem/tyry/detail?id='+id)
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/scss/dataBoard/table.scss";
+
+.screen {
+  margin: 25px 0 40px;
+
+  .el-select,
+  .el-input {
+    width: 150px;
+    margin-right: 4px;
+    border: 1px solid #126ac5;
+    border-radius: 2px;
+
+    /deep/ .el-input__inner {
+      color: #fff;
+      border: none;
+      background: none;
+    }
+  }
+
+  .btn {
+    height: 32px;
+    margin-left: 46px;
+  }
+}
+
+.main-title {
+  margin: 25px 0 32px;
+}
+
+.table {
+  margin-top: 32px;
+}
+</style>
diff --git a/src/views/dataBoard/satisfactionEval/dissatisfieReason/index.vue b/src/views/dataBoard/satisfactionEval/dissatisfieReason/index.vue
index 11f988ce7..d91070f54 100644
--- a/src/views/dataBoard/satisfactionEval/dissatisfieReason/index.vue
+++ b/src/views/dataBoard/satisfactionEval/dissatisfieReason/index.vue
@@ -40,7 +40,7 @@
 
         <el-table-column label="姓名" prop="restName"></el-table-column>
 
-        <el-table-column label="连写电话" prop="mobile">
+        <el-table-column label="联系电话" prop="mobile">
           <template slot-scope="scope">
             {{ $sensitive(scope.row.mobile, 3, 7) }}
           </template>
@@ -106,16 +106,17 @@ export default {
       }),
       list: [{},{},{}],
       title: "",
-      loading: false,
+      loading: true,
     };
   },
   activated() {
     this.title = this.$route.query.title;
-    let searchParams = JSON.parse(this.$route.query.searchParams);
+    let searchParams = this.$route.query.searchParams?JSON.parse(this.$route.query.searchParams):{};
     this.queryParams = {
       ...this.queryParams,
       ...searchParams,
     };
+    this.getOrg();
     this.getList();
   },
   methods: {
@@ -125,7 +126,7 @@ export default {
     },
     getList() {
       this.loading = true;
-      this.$http.get("?" + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => {
+      this.$http.get("/governance/satisfaction/communitySelfInsp/inspResult/list?" + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => {
         this.total = data.total;
         this.list = data.list;
         this.loading = false;
diff --git a/src/views/dataBoard/satisfactionEval/modules/DissatisfiedReason/index.vue b/src/views/dataBoard/satisfactionEval/modules/DissatisfiedReason/index.vue
index d5e84a58f..1779db72a 100644
--- a/src/views/dataBoard/satisfactionEval/modules/DissatisfiedReason/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/DissatisfiedReason/index.vue
@@ -17,21 +17,22 @@ export default {
     }
   },
   data() {
-    return {
-    }
+    return {}
   },
   mounted() {
-    this.initChart();
+    this.$http("/governance/satisfaction/communitySelfInsp/stats/dissatisfactionReason/classification", {}).then(({data: {data}}) => {
+      this.initChart(data);
+    })
   },
   methods: {
     timeChange() {
 
     },
-    initChart() {
+    initChart(data) {
       let div = document.getElementById('DissatisfiedReason');
       this.myChart = echarts.init(div);
-      var getname = ['社区工作不了解', '宣传力度小', '对社区工作不满意', '其他']; // 课程名
-      var getNum = [8, 9, 16, 21];
+      var getname = data.map(item => item.dissatisfactionReasonName); // 课程名
+      var getNum = data.map(item => item.qty);
 
       var data = [];
       for (var i = 0; i < getname.length; i++) {
@@ -133,6 +134,7 @@ export default {
   display: flex;
   justify-content: space-between;
   padding: 32px;
+
   #DissatisfiedReason {
     flex: calc(100% - 100px);
     width: calc(100% - 100px);
diff --git a/src/views/dataBoard/satisfactionEval/modules/eventAnalysis/index.vue b/src/views/dataBoard/satisfactionEval/modules/eventAnalysis/index.vue
index ce6427811..9dd080dc5 100644
--- a/src/views/dataBoard/satisfactionEval/modules/eventAnalysis/index.vue
+++ b/src/views/dataBoard/satisfactionEval/modules/eventAnalysis/index.vue
@@ -9,7 +9,7 @@
         </el-select>
       </template>
       <template v-slot:info>
-        <span class="infoColor">更多></span>
+        <span class="infoColor" @click="$router.push('/dataBoard/satisfactionEval/Problem/tddtlxsj')">更多></span>
       </template>
     </title-small>
     <div class="t-list f-hflex">
@@ -39,8 +39,8 @@
                      :value="item.value"></el-option>
         </el-select>
       </template>
-      <template v-slot:info>
-        <span class="infoColor">更多></span>
+      <template v-slot:info>tyqybtlx
+        <span class="infoColor" @click="$router.push('/dataBoard/satisfactionEval/Problem/tyry')">更多></span>
       </template>
     </title-small>
     <div class="t-list f-hflex">
@@ -69,7 +69,7 @@
         </el-select>
       </template>
       <template v-slot:info>
-        <span class="infoColor">更多></span>
+        <span class="infoColor" @click="$router.push('/dataBoard/satisfactionEval/Problem/tyqybtlx')">更多></span>
       </template>
     </title-small>
     <div class="table">