diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 8d8506f..f1c2f15 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -535,7 +535,6 @@
 }
 *::-webkit-scrollbar {
   width: 5px; /* 定义滚动条的宽度 */
-  // height: 5px;
 }
 // 一张图自动滚动播放
 .scrollMapHM {

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 8d8506f..f1c2f15 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -535,7 +535,6 @@
 }
 *::-webkit-scrollbar {
   width: 5px; /* 定义滚动条的宽度 */
-  // height: 5px;
 }
 // 一张图自动滚动播放
 .scrollMapHM {
diff --git a/src/assets/styles/rainReportDetail.scss b/src/assets/styles/rainReportDetail.scss
new file mode 100644
index 0000000..ea6f1b7
--- /dev/null
+++ b/src/assets/styles/rainReportDetail.scss
@@ -0,0 +1,502 @@
+.reportDetail {
+  width: 100%;
+  background: #fff;
+  color: #333;
+  margin-bottom: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 30px;
+
+  // 表格样式
+  .table_content {
+    .el-table {
+      background-color: transparent !important;
+
+      .el-table__cell {
+        padding: 6px 0 !important;
+      }
+
+      .success {
+        color: #24de8d;
+        font-weight: bold;
+      }
+
+      .fail {
+        color: #f85050;
+        font-weight: bold;
+      }
+
+      .el-loading-mask {
+        background: rgba(3, 20, 37, 0.9) !important;
+      }
+
+      .indexClass_1 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #f4c064 0%, rgba(244, 192, 100, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_2 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #bacdff 0%, rgba(186, 205, 255, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_3 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #e07748 0%, rgba(224, 119, 72, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      thead {
+        // background: url('@/assets/images/Sponge_screen/fangXunTiaoDu/table_head_back.png') no-repeat;
+        // background-size: 100% 100%;
+        background: #005cba !important;
+      }
+
+      .el-button--primary {
+        width: 49px;
+        height: 22px;
+        background: linear-gradient(0deg, #0566d7 0%, #007eff 100%);
+        border-radius: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 14px;
+        color: #d2efff;
+        line-height: 22px;
+      }
+
+      .el-table__header-wrapper {
+        .el-table__header {
+          th {
+            background: transparent !important;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 14px;
+            color: #fff;
+            line-height: 32px;
+          }
+        }
+      }
+
+      tr {
+        height: 36px !important;
+      }
+
+      tr:nth-of-type(even) {
+        // background: rgba(0, 72, 153, 0.3) !important;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      }
+
+      tr:nth-of-type(odd) {
+        // background: rgba(19, 108, 183, 0.5) !important;
+        background: transparent !important;
+      }
+
+      .el-table__body {
+        border-bottom: none !important;
+
+        tr:nth-of-type(odd) {
+        }
+
+        tr:nth-of-type(even) {
+          td {
+          }
+        }
+
+        tr:hover > td {
+          cursor: pointer;
+          background: linear-gradient(0deg, rgba(0, 89, 192, 0.3) 0%, rgba(0, 76, 164, 0.2) 100%) !important;
+        }
+      }
+
+      .el-table__inner-wrapper {
+        &::before {
+          display: none;
+        }
+      }
+
+      .el-table__header-wrapper,
+      .el-table__fixed-header-wrapper {
+        tr {
+          background-color: transparent !important;
+        }
+
+        th {
+          word-break: break-word;
+        }
+      }
+
+      .el-table__body-wrapper {
+        .el-button [class*='el-icon-'] + span {
+          margin-left: 1px;
+        }
+      }
+
+      th.el-table__cell {
+        color: #fff;
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+      }
+
+      th.is-left {
+        text-align: left !important;
+      }
+
+      td.el-table__cell {
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+        color: #fff !important;
+      }
+
+      td.is-left {
+        text-align: left;
+      }
+
+      td.el-table-fixed-column--right {
+        background-color: #0f3a4f !important;
+        color: #fff !important;
+
+        .el-button {
+          color: #fff !important;
+        }
+      }
+
+      .el-table__empty-block {
+        .el-table__empty-text {
+          color: #fff !important;
+        }
+      }
+    }
+
+    // .ListBoxHeader_Sel {
+    //   .el-input__wrapper {
+    //     background: linear-gradient(0deg, #1c7a99 0%, #60c0e2 100%) !important;
+    //     // box-shadow: none !important;
+    //   }
+    // }
+
+    .el-progress-bar__outer {
+      background: #2eafbf !important;
+    }
+
+    .el-tabs {
+      .el-tabs__header {
+        .el-tabs__nav {
+          .el-tabs__item {
+            color: #fff !important;
+
+            &.is-active {
+              color: #409eff !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .waterlogImg {
+    flex-wrap: wrap;
+
+    .part {
+      width: 18%;
+      margin-left: 10px;
+      margin-bottom: 10px;
+      text-align: center;
+
+      img {
+        width: 100%;
+        height: 150px;
+      }
+
+      p {
+        line-height: 20px;
+      }
+    }
+  }
+
+  #rain_chart,
+  #chartOneBG,
+  .chartOneBG,
+  #chartOneBG2,
+  #chartOneBG3,
+  #chartOneBG4 {
+    // width: 100%;
+    width: 1000px;
+    height: 300px;
+  }
+
+  h1 {
+    text-align: center;
+    color: $red;
+    font-size: 28px;
+    letter-spacing: 5px;
+  }
+
+  h4 {
+    color: $red;
+    border-bottom: 3px solid $red;
+    padding: 10px 0px;
+    text-align: right;
+  }
+
+  .title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .small_title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .button_title {
+    width: 66px;
+    height: 22px;
+    line-height: 22px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+    margin-left: 20px;
+    cursor: pointer;
+
+    &:hover {
+      background: #00a4ae;
+      border-radius: 6px;
+      text-align: center;
+    }
+  }
+
+  .active_button_title {
+    background: #00a4ae;
+    border-radius: 6px;
+    text-align: center;
+  }
+
+  .content {
+    text-indent: 14px;
+    position: relative;
+
+    span {
+      color: #333333;
+      font-weight: bolder;
+    }
+
+    &:after {
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      background: #918f8f;
+      border-radius: 50%;
+      content: '';
+      left: 0;
+      top: 16px;
+      margin-top: -4px;
+    }
+  }
+
+  .small_tip {
+    text-align: center;
+    font-weight: bold;
+    margin: 10px 0px;
+  }
+
+  .rain_date_detail {
+    margin-bottom: 10px;
+
+    .rain_box2 {
+      &:hover {
+        background: #5daee6;
+      }
+    }
+
+    .active_rain_box2 {
+      background: #5daee6 !important;
+    }
+
+    .rain_box {
+      // width: 112px;
+      height: 78px;
+      background: #155785;
+      border-radius: 6px;
+      margin-right: 10px;
+      cursor: pointer;
+      color: #ffffff;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .rainfall {
+        span {
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 20px;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.table_content_box {
+  width: 70%;
+  margin: 10px auto;
+  color: #000;
+  border: 1px solid #00314e !important;
+
+  .header {
+    text-align: center;
+    border-bottom: 0.00521rem solid #00314e !important;
+    color: #000;
+    font-weight: bolder;
+    border-right: none !important;
+    position: static !important;
+    background-color: #dee1e6 !important;
+    height: 0.20833rem !important;
+    line-height: 0.20833rem !important;
+    font-size: 0.06771rem;
+  }
+
+  .basic_label {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+    border-right: 1px solid #00314e !important;
+  }
+
+  .basic_val {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+  }
+}
+
+.img_content {
+  max-width: 80%;
+
+  .img_box {
+    width: 100%;
+  }
+}
+
+::v-deep(.el-loading-spinner) {
+  position: fixed;
+  top: 420px !important;
+  left: 0;
+}
+
+.reportDetail {
+  .detailDataTable {
+    margin-bottom: 10px !important;
+  }
+
+  ::v-deep(.el-table) {
+    --el-table-border-color: $mainColor1 !important;
+    --el-table-bg-color: $mainColor1 !important;
+
+    .el-table__body {
+      border-bottom: 1px solid #333 !important;
+    }
+
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      th {
+        word-break: break-word;
+        background-color: #dee1e6 !important;
+        height: 40px !important;
+        font-size: 13px;
+      }
+    }
+
+    .el-table__body-wrapper {
+      background-color: #004770 !important;
+
+      .el-button [class*='el-icon-'] + span {
+        margin-left: 1px;
+      }
+
+      td.el-table-fixed-column--right {
+        background: $mainBg !important;
+      }
+    }
+
+    tr {
+      background-color: #f8f8f9 !important;
+    }
+
+    tr:nth-of-type(odd) {
+      background-color: #fff !important;
+    }
+
+    tr:hover > td {
+      background-color: #f5f7fa !important;
+    }
+
+    th.el-table__cell,
+    td.el-table__cell {
+      text-align: center;
+      border-bottom: 1px solid $mainBg !important;
+      color: #000;
+      border-right: none !important;
+      position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
+    }
+
+    .el-table__empty-block {
+      background-color: #fff !important;
+
+      .el-table__empty-text {
+        color: #c6c6c6 !important;
+      }
+    }
+
+    .el-button {
+      border: none !important;
+      background: none !important;
+
+      &:hover {
+        background: none !important;
+        transform: scale(1.01);
+      }
+    }
+  }
+}

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 8d8506f..f1c2f15 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -535,7 +535,6 @@
 }
 *::-webkit-scrollbar {
   width: 5px; /* 定义滚动条的宽度 */
-  // height: 5px;
 }
 // 一张图自动滚动播放
 .scrollMapHM {
diff --git a/src/assets/styles/rainReportDetail.scss b/src/assets/styles/rainReportDetail.scss
new file mode 100644
index 0000000..ea6f1b7
--- /dev/null
+++ b/src/assets/styles/rainReportDetail.scss
@@ -0,0 +1,502 @@
+.reportDetail {
+  width: 100%;
+  background: #fff;
+  color: #333;
+  margin-bottom: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 30px;
+
+  // 表格样式
+  .table_content {
+    .el-table {
+      background-color: transparent !important;
+
+      .el-table__cell {
+        padding: 6px 0 !important;
+      }
+
+      .success {
+        color: #24de8d;
+        font-weight: bold;
+      }
+
+      .fail {
+        color: #f85050;
+        font-weight: bold;
+      }
+
+      .el-loading-mask {
+        background: rgba(3, 20, 37, 0.9) !important;
+      }
+
+      .indexClass_1 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #f4c064 0%, rgba(244, 192, 100, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_2 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #bacdff 0%, rgba(186, 205, 255, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_3 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #e07748 0%, rgba(224, 119, 72, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      thead {
+        // background: url('@/assets/images/Sponge_screen/fangXunTiaoDu/table_head_back.png') no-repeat;
+        // background-size: 100% 100%;
+        background: #005cba !important;
+      }
+
+      .el-button--primary {
+        width: 49px;
+        height: 22px;
+        background: linear-gradient(0deg, #0566d7 0%, #007eff 100%);
+        border-radius: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 14px;
+        color: #d2efff;
+        line-height: 22px;
+      }
+
+      .el-table__header-wrapper {
+        .el-table__header {
+          th {
+            background: transparent !important;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 14px;
+            color: #fff;
+            line-height: 32px;
+          }
+        }
+      }
+
+      tr {
+        height: 36px !important;
+      }
+
+      tr:nth-of-type(even) {
+        // background: rgba(0, 72, 153, 0.3) !important;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      }
+
+      tr:nth-of-type(odd) {
+        // background: rgba(19, 108, 183, 0.5) !important;
+        background: transparent !important;
+      }
+
+      .el-table__body {
+        border-bottom: none !important;
+
+        tr:nth-of-type(odd) {
+        }
+
+        tr:nth-of-type(even) {
+          td {
+          }
+        }
+
+        tr:hover > td {
+          cursor: pointer;
+          background: linear-gradient(0deg, rgba(0, 89, 192, 0.3) 0%, rgba(0, 76, 164, 0.2) 100%) !important;
+        }
+      }
+
+      .el-table__inner-wrapper {
+        &::before {
+          display: none;
+        }
+      }
+
+      .el-table__header-wrapper,
+      .el-table__fixed-header-wrapper {
+        tr {
+          background-color: transparent !important;
+        }
+
+        th {
+          word-break: break-word;
+        }
+      }
+
+      .el-table__body-wrapper {
+        .el-button [class*='el-icon-'] + span {
+          margin-left: 1px;
+        }
+      }
+
+      th.el-table__cell {
+        color: #fff;
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+      }
+
+      th.is-left {
+        text-align: left !important;
+      }
+
+      td.el-table__cell {
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+        color: #fff !important;
+      }
+
+      td.is-left {
+        text-align: left;
+      }
+
+      td.el-table-fixed-column--right {
+        background-color: #0f3a4f !important;
+        color: #fff !important;
+
+        .el-button {
+          color: #fff !important;
+        }
+      }
+
+      .el-table__empty-block {
+        .el-table__empty-text {
+          color: #fff !important;
+        }
+      }
+    }
+
+    // .ListBoxHeader_Sel {
+    //   .el-input__wrapper {
+    //     background: linear-gradient(0deg, #1c7a99 0%, #60c0e2 100%) !important;
+    //     // box-shadow: none !important;
+    //   }
+    // }
+
+    .el-progress-bar__outer {
+      background: #2eafbf !important;
+    }
+
+    .el-tabs {
+      .el-tabs__header {
+        .el-tabs__nav {
+          .el-tabs__item {
+            color: #fff !important;
+
+            &.is-active {
+              color: #409eff !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .waterlogImg {
+    flex-wrap: wrap;
+
+    .part {
+      width: 18%;
+      margin-left: 10px;
+      margin-bottom: 10px;
+      text-align: center;
+
+      img {
+        width: 100%;
+        height: 150px;
+      }
+
+      p {
+        line-height: 20px;
+      }
+    }
+  }
+
+  #rain_chart,
+  #chartOneBG,
+  .chartOneBG,
+  #chartOneBG2,
+  #chartOneBG3,
+  #chartOneBG4 {
+    // width: 100%;
+    width: 1000px;
+    height: 300px;
+  }
+
+  h1 {
+    text-align: center;
+    color: $red;
+    font-size: 28px;
+    letter-spacing: 5px;
+  }
+
+  h4 {
+    color: $red;
+    border-bottom: 3px solid $red;
+    padding: 10px 0px;
+    text-align: right;
+  }
+
+  .title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .small_title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .button_title {
+    width: 66px;
+    height: 22px;
+    line-height: 22px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+    margin-left: 20px;
+    cursor: pointer;
+
+    &:hover {
+      background: #00a4ae;
+      border-radius: 6px;
+      text-align: center;
+    }
+  }
+
+  .active_button_title {
+    background: #00a4ae;
+    border-radius: 6px;
+    text-align: center;
+  }
+
+  .content {
+    text-indent: 14px;
+    position: relative;
+
+    span {
+      color: #333333;
+      font-weight: bolder;
+    }
+
+    &:after {
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      background: #918f8f;
+      border-radius: 50%;
+      content: '';
+      left: 0;
+      top: 16px;
+      margin-top: -4px;
+    }
+  }
+
+  .small_tip {
+    text-align: center;
+    font-weight: bold;
+    margin: 10px 0px;
+  }
+
+  .rain_date_detail {
+    margin-bottom: 10px;
+
+    .rain_box2 {
+      &:hover {
+        background: #5daee6;
+      }
+    }
+
+    .active_rain_box2 {
+      background: #5daee6 !important;
+    }
+
+    .rain_box {
+      // width: 112px;
+      height: 78px;
+      background: #155785;
+      border-radius: 6px;
+      margin-right: 10px;
+      cursor: pointer;
+      color: #ffffff;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .rainfall {
+        span {
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 20px;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.table_content_box {
+  width: 70%;
+  margin: 10px auto;
+  color: #000;
+  border: 1px solid #00314e !important;
+
+  .header {
+    text-align: center;
+    border-bottom: 0.00521rem solid #00314e !important;
+    color: #000;
+    font-weight: bolder;
+    border-right: none !important;
+    position: static !important;
+    background-color: #dee1e6 !important;
+    height: 0.20833rem !important;
+    line-height: 0.20833rem !important;
+    font-size: 0.06771rem;
+  }
+
+  .basic_label {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+    border-right: 1px solid #00314e !important;
+  }
+
+  .basic_val {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+  }
+}
+
+.img_content {
+  max-width: 80%;
+
+  .img_box {
+    width: 100%;
+  }
+}
+
+::v-deep(.el-loading-spinner) {
+  position: fixed;
+  top: 420px !important;
+  left: 0;
+}
+
+.reportDetail {
+  .detailDataTable {
+    margin-bottom: 10px !important;
+  }
+
+  ::v-deep(.el-table) {
+    --el-table-border-color: $mainColor1 !important;
+    --el-table-bg-color: $mainColor1 !important;
+
+    .el-table__body {
+      border-bottom: 1px solid #333 !important;
+    }
+
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      th {
+        word-break: break-word;
+        background-color: #dee1e6 !important;
+        height: 40px !important;
+        font-size: 13px;
+      }
+    }
+
+    .el-table__body-wrapper {
+      background-color: #004770 !important;
+
+      .el-button [class*='el-icon-'] + span {
+        margin-left: 1px;
+      }
+
+      td.el-table-fixed-column--right {
+        background: $mainBg !important;
+      }
+    }
+
+    tr {
+      background-color: #f8f8f9 !important;
+    }
+
+    tr:nth-of-type(odd) {
+      background-color: #fff !important;
+    }
+
+    tr:hover > td {
+      background-color: #f5f7fa !important;
+    }
+
+    th.el-table__cell,
+    td.el-table__cell {
+      text-align: center;
+      border-bottom: 1px solid $mainBg !important;
+      color: #000;
+      border-right: none !important;
+      position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
+    }
+
+    .el-table__empty-block {
+      background-color: #fff !important;
+
+      .el-table__empty-text {
+        color: #c6c6c6 !important;
+      }
+    }
+
+    .el-button {
+      border: none !important;
+      background: none !important;
+
+      &:hover {
+        background: none !important;
+        transform: scale(1.01);
+      }
+    }
+  }
+}
diff --git a/src/utils/fixDict.js b/src/utils/fixDict.js
index ae75255..8c2b3fc 100644
--- a/src/utils/fixDict.js
+++ b/src/utils/fixDict.js
@@ -4,7 +4,7 @@
   propsColorYs: [
     { label: '(米)', color: '#5470c6', value: 'm' },
     { label: '(米/秒)', color: '#91cc75', value: 'm/s' },
-    { label: '(度)', color: '#fac858', value: '°' },
+    { label: '(度)', color: '#fac858', value: 'mg/L' },
     { label: '(立方米/小时)', color: '#ee6666', value: 'm³/h' },
     { label: '(立方米/秒)', color: '#3ba272', value: 'm³/s' },
     { label: '(立方米)', color: '#73c0de', value: 'm³' },

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 8d8506f..f1c2f15 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -535,7 +535,6 @@
 }
 *::-webkit-scrollbar {
   width: 5px; /* 定义滚动条的宽度 */
-  // height: 5px;
 }
 // 一张图自动滚动播放
 .scrollMapHM {
diff --git a/src/assets/styles/rainReportDetail.scss b/src/assets/styles/rainReportDetail.scss
new file mode 100644
index 0000000..ea6f1b7
--- /dev/null
+++ b/src/assets/styles/rainReportDetail.scss
@@ -0,0 +1,502 @@
+.reportDetail {
+  width: 100%;
+  background: #fff;
+  color: #333;
+  margin-bottom: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 30px;
+
+  // 表格样式
+  .table_content {
+    .el-table {
+      background-color: transparent !important;
+
+      .el-table__cell {
+        padding: 6px 0 !important;
+      }
+
+      .success {
+        color: #24de8d;
+        font-weight: bold;
+      }
+
+      .fail {
+        color: #f85050;
+        font-weight: bold;
+      }
+
+      .el-loading-mask {
+        background: rgba(3, 20, 37, 0.9) !important;
+      }
+
+      .indexClass_1 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #f4c064 0%, rgba(244, 192, 100, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_2 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #bacdff 0%, rgba(186, 205, 255, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_3 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #e07748 0%, rgba(224, 119, 72, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      thead {
+        // background: url('@/assets/images/Sponge_screen/fangXunTiaoDu/table_head_back.png') no-repeat;
+        // background-size: 100% 100%;
+        background: #005cba !important;
+      }
+
+      .el-button--primary {
+        width: 49px;
+        height: 22px;
+        background: linear-gradient(0deg, #0566d7 0%, #007eff 100%);
+        border-radius: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 14px;
+        color: #d2efff;
+        line-height: 22px;
+      }
+
+      .el-table__header-wrapper {
+        .el-table__header {
+          th {
+            background: transparent !important;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 14px;
+            color: #fff;
+            line-height: 32px;
+          }
+        }
+      }
+
+      tr {
+        height: 36px !important;
+      }
+
+      tr:nth-of-type(even) {
+        // background: rgba(0, 72, 153, 0.3) !important;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      }
+
+      tr:nth-of-type(odd) {
+        // background: rgba(19, 108, 183, 0.5) !important;
+        background: transparent !important;
+      }
+
+      .el-table__body {
+        border-bottom: none !important;
+
+        tr:nth-of-type(odd) {
+        }
+
+        tr:nth-of-type(even) {
+          td {
+          }
+        }
+
+        tr:hover > td {
+          cursor: pointer;
+          background: linear-gradient(0deg, rgba(0, 89, 192, 0.3) 0%, rgba(0, 76, 164, 0.2) 100%) !important;
+        }
+      }
+
+      .el-table__inner-wrapper {
+        &::before {
+          display: none;
+        }
+      }
+
+      .el-table__header-wrapper,
+      .el-table__fixed-header-wrapper {
+        tr {
+          background-color: transparent !important;
+        }
+
+        th {
+          word-break: break-word;
+        }
+      }
+
+      .el-table__body-wrapper {
+        .el-button [class*='el-icon-'] + span {
+          margin-left: 1px;
+        }
+      }
+
+      th.el-table__cell {
+        color: #fff;
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+      }
+
+      th.is-left {
+        text-align: left !important;
+      }
+
+      td.el-table__cell {
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+        color: #fff !important;
+      }
+
+      td.is-left {
+        text-align: left;
+      }
+
+      td.el-table-fixed-column--right {
+        background-color: #0f3a4f !important;
+        color: #fff !important;
+
+        .el-button {
+          color: #fff !important;
+        }
+      }
+
+      .el-table__empty-block {
+        .el-table__empty-text {
+          color: #fff !important;
+        }
+      }
+    }
+
+    // .ListBoxHeader_Sel {
+    //   .el-input__wrapper {
+    //     background: linear-gradient(0deg, #1c7a99 0%, #60c0e2 100%) !important;
+    //     // box-shadow: none !important;
+    //   }
+    // }
+
+    .el-progress-bar__outer {
+      background: #2eafbf !important;
+    }
+
+    .el-tabs {
+      .el-tabs__header {
+        .el-tabs__nav {
+          .el-tabs__item {
+            color: #fff !important;
+
+            &.is-active {
+              color: #409eff !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .waterlogImg {
+    flex-wrap: wrap;
+
+    .part {
+      width: 18%;
+      margin-left: 10px;
+      margin-bottom: 10px;
+      text-align: center;
+
+      img {
+        width: 100%;
+        height: 150px;
+      }
+
+      p {
+        line-height: 20px;
+      }
+    }
+  }
+
+  #rain_chart,
+  #chartOneBG,
+  .chartOneBG,
+  #chartOneBG2,
+  #chartOneBG3,
+  #chartOneBG4 {
+    // width: 100%;
+    width: 1000px;
+    height: 300px;
+  }
+
+  h1 {
+    text-align: center;
+    color: $red;
+    font-size: 28px;
+    letter-spacing: 5px;
+  }
+
+  h4 {
+    color: $red;
+    border-bottom: 3px solid $red;
+    padding: 10px 0px;
+    text-align: right;
+  }
+
+  .title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .small_title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .button_title {
+    width: 66px;
+    height: 22px;
+    line-height: 22px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+    margin-left: 20px;
+    cursor: pointer;
+
+    &:hover {
+      background: #00a4ae;
+      border-radius: 6px;
+      text-align: center;
+    }
+  }
+
+  .active_button_title {
+    background: #00a4ae;
+    border-radius: 6px;
+    text-align: center;
+  }
+
+  .content {
+    text-indent: 14px;
+    position: relative;
+
+    span {
+      color: #333333;
+      font-weight: bolder;
+    }
+
+    &:after {
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      background: #918f8f;
+      border-radius: 50%;
+      content: '';
+      left: 0;
+      top: 16px;
+      margin-top: -4px;
+    }
+  }
+
+  .small_tip {
+    text-align: center;
+    font-weight: bold;
+    margin: 10px 0px;
+  }
+
+  .rain_date_detail {
+    margin-bottom: 10px;
+
+    .rain_box2 {
+      &:hover {
+        background: #5daee6;
+      }
+    }
+
+    .active_rain_box2 {
+      background: #5daee6 !important;
+    }
+
+    .rain_box {
+      // width: 112px;
+      height: 78px;
+      background: #155785;
+      border-radius: 6px;
+      margin-right: 10px;
+      cursor: pointer;
+      color: #ffffff;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .rainfall {
+        span {
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 20px;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.table_content_box {
+  width: 70%;
+  margin: 10px auto;
+  color: #000;
+  border: 1px solid #00314e !important;
+
+  .header {
+    text-align: center;
+    border-bottom: 0.00521rem solid #00314e !important;
+    color: #000;
+    font-weight: bolder;
+    border-right: none !important;
+    position: static !important;
+    background-color: #dee1e6 !important;
+    height: 0.20833rem !important;
+    line-height: 0.20833rem !important;
+    font-size: 0.06771rem;
+  }
+
+  .basic_label {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+    border-right: 1px solid #00314e !important;
+  }
+
+  .basic_val {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+  }
+}
+
+.img_content {
+  max-width: 80%;
+
+  .img_box {
+    width: 100%;
+  }
+}
+
+::v-deep(.el-loading-spinner) {
+  position: fixed;
+  top: 420px !important;
+  left: 0;
+}
+
+.reportDetail {
+  .detailDataTable {
+    margin-bottom: 10px !important;
+  }
+
+  ::v-deep(.el-table) {
+    --el-table-border-color: $mainColor1 !important;
+    --el-table-bg-color: $mainColor1 !important;
+
+    .el-table__body {
+      border-bottom: 1px solid #333 !important;
+    }
+
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      th {
+        word-break: break-word;
+        background-color: #dee1e6 !important;
+        height: 40px !important;
+        font-size: 13px;
+      }
+    }
+
+    .el-table__body-wrapper {
+      background-color: #004770 !important;
+
+      .el-button [class*='el-icon-'] + span {
+        margin-left: 1px;
+      }
+
+      td.el-table-fixed-column--right {
+        background: $mainBg !important;
+      }
+    }
+
+    tr {
+      background-color: #f8f8f9 !important;
+    }
+
+    tr:nth-of-type(odd) {
+      background-color: #fff !important;
+    }
+
+    tr:hover > td {
+      background-color: #f5f7fa !important;
+    }
+
+    th.el-table__cell,
+    td.el-table__cell {
+      text-align: center;
+      border-bottom: 1px solid $mainBg !important;
+      color: #000;
+      border-right: none !important;
+      position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
+    }
+
+    .el-table__empty-block {
+      background-color: #fff !important;
+
+      .el-table__empty-text {
+        color: #c6c6c6 !important;
+      }
+    }
+
+    .el-button {
+      border: none !important;
+      background: none !important;
+
+      &:hover {
+        background: none !important;
+        transform: scale(1.01);
+      }
+    }
+  }
+}
diff --git a/src/utils/fixDict.js b/src/utils/fixDict.js
index ae75255..8c2b3fc 100644
--- a/src/utils/fixDict.js
+++ b/src/utils/fixDict.js
@@ -4,7 +4,7 @@
   propsColorYs: [
     { label: '(米)', color: '#5470c6', value: 'm' },
     { label: '(米/秒)', color: '#91cc75', value: 'm/s' },
-    { label: '(度)', color: '#fac858', value: '°' },
+    { label: '(度)', color: '#fac858', value: 'mg/L' },
     { label: '(立方米/小时)', color: '#ee6666', value: 'm³/h' },
     { label: '(立方米/秒)', color: '#3ba272', value: 'm³/s' },
     { label: '(立方米)', color: '#73c0de', value: 'm³' },
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index c0fc940..0a46262 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -17,7 +17,7 @@
               <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value" />
             </el-select>
             <el-select v-model="projectFx" placeholder="请选择典型项目分析" @change="changeProject">
-              <el-option v-for="item in XmList" :key="item.value" :label="item.name" :value="item.value" />
+              <el-option v-for="item in XmList" :key="item.index" :label="item.name" :value="item.index" />
             </el-select>
           </div>
         </div>
@@ -56,74 +56,73 @@
         </div>
       </div>
     </div>
-    <!-- 项目弹窗信息 -->
-    <div id="xmInfoWindow" class="tactics_content" v-show="xmData.visible" ref="xmPoPupBox">
-      <div class="title flex flex-r flex-justcontent-spacebetween">
-        <span>
-          {{ xmData.data.name }}
-        </span>
 
-        <el-switch
-          v-model="undergroundPipeline"
-          class="ml-2"
-          inline-prompt
-          style="--el-switch-on-color: #2393fc; --el-switch-off-color: #2393fc; float: right"
-          active-text="地表径流"
-          inactive-text="地下管网"
-          @change="changePipeLayer"
-        />
-        <el-icon :size="20" @click="closePopup">
+    <!-- 典型项目分析弹窗信息 -->
+    <div id="xmInfoWindow" class="projectContDX" v-show="xmData.visible" ref="xmPoPupBox">
+      <div class="title flex flex-r flex-justcontent-spacebetween">
+        <span>{{ xmData.data.name }} </span>
+        <el-icon :size="24" @click="closePopup" style="margin: 5px 5px 0px 0px">
           <Close class="closed" />
         </el-icon>
       </div>
       <div class="centent flex flex-v flex-justcontent-start">
         <div class="flex flex-r flex-justcontent-start content_detail">
+          <el-switch
+            v-model="undergroundPipeline"
+            inline-prompt
+            style="--el-switch-on-color: #2393fc; --el-switch-off-color: #2393fc; float: right"
+            active-text="地表径流"
+            inactive-text="地下管网"
+            @change="changePipeLayer"
+          />
+        </div>
+        <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">时间：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>2024-11-24</span>
+            <span>{{ dateRain }}</span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">收水范围：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>2000m²</span>
+            <span>{{ xmData.data.ssfw }}m²</span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">设计降雨量：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>37.8mm </span>
+            <span>{{ xmData.data.sjjyl }}mm </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">实际控制雨量：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
             <!-- <span v-if="projectInfo.trueRain == '异常'">雨前出流</span> -->
-            <span>0mm </span>
+            <span>{{ xmData.data.sjkzyl }}mm </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
-          <div class="centent_label flex flex-justcontent-start">典型降雨径流总量控制率实际值：</div>
+          <div class="centent_label flex flex-justcontent-start">径流总量控制率实际值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>0% </span>
+            <span>{{ xmData.data.jlzlkzlsj }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">年径流总量控制率目标值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>85% </span>
+            <span>{{ xmData.data.jlzlkzlmb }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">年径流污染削减率目标值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>40% </span>
+            <span>{{ xmData.data.jlwrxjmb }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
-          <div class="centent_label flex flex-justcontent-start">典型降雨径流污染物削减率实际值：</div>
+          <div class="centent_label flex flex-justcontent-start">径流污染物削减率实际值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>0% </span>
+            <span>{{ xmData.data.jlwrxjsj }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
@@ -138,8 +137,15 @@
             <span>--</span>
           </div>
         </div>
+        <div class="flex flex-r flex-justcontent-end content_detail">
+          <el-button type="warning" size="small" @click="dialogShow = true">查看更多</el-button>
+        </div>
       </div>
     </div>
+    <!-- 典型项目数据查看 -->
+    <el-dialog :title="xmData.data.name + '数据详情'" v-model="dialogShow" width="950px" append-to-body>
+      <typicalLandDiaLogDetail :pointInf="xmData.data" v-if="dialogShow"></typicalLandDiaLogDetail>
+    </el-dialog>
   </div>
 </template>
 
@@ -153,8 +159,10 @@
 import { graphicReport, getStationList } from '@/api/dataAnalysis/syntherticData';
 import { listrtuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo';
 import { rtuWarnConfigList } from '@/api/dataAnalysis/historyGj.js';
+import typicalLandDiaLogDetail from './typicalLandDiaLogDetail.vue';
 
 const areaFX = ref('0');
+const dialogShow = ref(false);
 const { proxy } = getCurrentInstance();
 const areaList = ref([
   { name: '古城蓝绿韧性示范片区', value: '0', lonlat: [114.35, 34.802] },
@@ -162,16 +170,39 @@
   { name: '综保区工业海绵化片区', value: '2', lonlat: [114.209, 34.782] },
   { name: '金明品质提升示范片区', value: '3', lonlat: [114.285, 34.799] },
 ]);
-const projectFx = ref('0');
+const projectFx = ref(0);
 const undergroundPipeline = ref(true);
+// 典型项目
 const XmList = ref([
-  { name: '汴京路管网及道路海绵化改造', projectNo: 'GW06', value: '0', lon: 114.378601, lat: 34.793947 },
+  {
+    name: '汴京路管网及道路海绵化改造',
+    projectNo: 'GW06',
+    index: 0,
+    lon: 114.378601,
+    lat: 34.793947,
+    ssfw: 110330.52,
+    sjjyl: 19.84,
+    sjkzyl: 0,
+    jlzlkzlsj: 100,
+    jlzlkzlmb: 68,
+    jlwrxjmb: 40,
+    jlwrxjsj: 43.6,
+    azTime: '2024-09-20',
+  },
   {
     name: '金明广场(西南角)改造提升',
     projectNo: 'XMBH202412180002',
-    value: '1',
+    index: 1,
     lon: 114.29615,
     lat: 34.801966,
+    ssfw: 2000,
+    sjjyl: 37.8,
+    sjkzyl: 0,
+    jlzlkzlsj: 100,
+    jlzlkzlmb: 85.5,
+    jlwrxjmb: 40,
+    jlwrxjsj: 42,
+    azTime: '2024-12-14',
   },
 ]);
 const xmData = reactive({
@@ -332,22 +363,22 @@
 }
 
 // 典型项目点击
-function changeProject(index) {
-  console.log(XmList.value[index]);
+function changeProject() {
+  xmData.data = XmList.value[projectFx.value];
+  console.log(xmData.data);
   bus.emit('ifShowLegendXM', true); //显示图例
   //显示项目设施图
-  bus.emit('setLayerVisible', { layername: XmList.value[index].name, isCheck: true });
+  bus.emit('setLayerVisible', { layername: xmData.data.name, isCheck: true });
   undergroundPipeline.value = true;
   //项目详情弹窗
   changePipeLayer();
-  xmData.data = XmList.value[index];
   setPopupDom(proxy.$refs.xmPoPupBox, [0, 0]);
-  newfiberMapbox.popup.setLngLat({ lng: XmList.value[index].lon, lat: XmList.value[index].lat });
+  newfiberMapbox.popup.setLngLat({ lng: xmData.data.lon, lat: xmData.data.lat });
   newfiberMapbox.addPopup(newfiberMapbox.popup);
   xmData.visible = true;
   // 地图移动过去
   newfiberMapbox.map.easeTo({
-    center: [XmList.value[index].lon, XmList.value[index].lat],
+    center: [xmData.data.lon, xmData.data.lat],
     zoom: 18,
     pitch: 30,
   });
@@ -422,83 +453,157 @@
     { layername: 'spongeFacility', show: true },
     { layername: 'origine', show: true },
   ]);
+  xmData.visible = false;
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .publicContainerA {
   margin-top: 10px;
-}
-.ConstrucClass {
-  width: 460px;
-  height: calc(100vh - 220px);
-  background: #004565;
-  opacity: 0.8;
-  overflow-x: hidden;
-  overflow-y: auto;
-  margin-top: -3px;
-  .WaterAccumulation {
-    width: 95%;
-    // height: 270px;
-    margin: auto;
-    background: yellow;
-    .HeadContent {
-      width: 100%;
-      height: 40px;
-      background: #217dc8;
-      border: 1px solid #61aff0;
-      position: relative;
-      top: 2px;
-      span {
+  .ConstrucClass {
+    width: 460px;
+    height: calc(100vh - 220px);
+    background: #004565;
+    opacity: 0.8;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-top: -3px;
+    .WaterAccumulation {
+      width: 95%;
+      // height: 270px;
+      margin: auto;
+      background: yellow;
+      .HeadContent {
+        width: 100%;
+        height: 40px;
+        background: #217dc8;
+        border: 1px solid #61aff0;
         position: relative;
-        top: 8px;
-        left: 15px;
-        color: #ffffff;
-        font-family: Source Han Sans CN;
-        font-weight: 500;
+        top: 2px;
+        span {
+          position: relative;
+          top: 8px;
+          left: 15px;
+          color: #ffffff;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+        }
+      }
+    }
+    .WaterList {
+      position: relative;
+      top: 8px;
+      width: 95%;
+      // height: calc(100vh - 720px);
+      margin: auto;
+      // background: yellow;
+      .DropdownBox {
+        height: 45px;
+        background: #217dc8;
+        border: 1px solid #61aff0;
+        display: flex;
+        justify-content: space-around;
+        margin: 5px;
+        .analysis {
+          width: 35%;
+          display: flex;
+          align-items: center;
+          .ICON_zp {
+            width: 28px;
+            height: 28px;
+            position: relative;
+            top: 32x;
+          }
+        }
+        .Selectionbox {
+          width: 85%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          padding-right: 5px;
+        }
+      }
+      .assessment {
+        width: 100%;
+        height: calc(100vh - 680px);
+      }
+      .assessmentJS {
+        width: 100%;
+        height: 280px;
       }
     }
   }
-  .WaterList {
-    position: relative;
-    top: 8px;
-    width: 95%;
-    // height: calc(100vh - 720px);
-    margin: auto;
-    // background: yellow;
-    .DropdownBox {
-      height: 45px;
-      background: #217dc8;
-      border: 1px solid #61aff0;
-      display: flex;
-      justify-content: space-around;
-      margin: 5px;
-      .analysis {
-        width: 35%;
-        display: flex;
-        align-items: center;
-        .ICON_zp {
-          width: 28px;
-          height: 28px;
-          position: relative;
-          top: 32x;
-        }
+}
+
+.l7-popup-content {
+  background: none !important;
+  .projectContDX {
+    width: 300px;
+    padding: 10px;
+    height: auto !important;
+    border: 1px solid red;
+    text-align: left;
+    background: linear-gradient(0deg, rgba(11, 71, 113, 0.9) 0%, rgba(22, 83, 126, 0.8) 100%);
+    border-radius: 4px;
+    border: 1px solid #42a4ef;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: 14px;
+      border: 12px solid transparent;
+      border-top: 12px solid rgba(11, 71, 113, 0.9);
+      z-index: 12;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: 10.5px;
+      border: 15px solid transparent;
+      border-top: 15px solid #42a4ef;
+      z-index: 11;
+    }
+    .title {
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 17px;
+      color: #37ceff;
+      line-height: 36px;
+      cursor: pointer;
+
+      span {
+        display: inline-block;
+        overflow: hidden;
+        /* 确保超出容器的文本被裁剪 */
+        white-space: nowrap;
+        /* 确保文本在一行内显示 */
+        text-overflow: ellipsis;
+        /* 使用省略号表示文本超出 */
       }
-      .Selectionbox {
-        width: 85%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding-right: 5px;
+
+      ::v-deep(.el-icon) {
+        cursor: pointer;
       }
     }
-    .assessment {
-      width: 100%;
-      height: calc(100vh - 680px);
-    }
-    .assessmentJS {
-      width: 100%;
-      height: 280px;
+    .centent {
+      font-family: Source Han Sans CN;
+      font-size: 15px;
+      color: #c6c6c6;
+      line-height: 23px;
+
+      .content_detail {
+        width: 100%;
+      }
+
+      .centent_val {
+        width: 0;
+        color: #3afff8;
+      }
     }
   }
 }

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 8d8506f..f1c2f15 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -535,7 +535,6 @@
 }
 *::-webkit-scrollbar {
   width: 5px; /* 定义滚动条的宽度 */
-  // height: 5px;
 }
 // 一张图自动滚动播放
 .scrollMapHM {
diff --git a/src/assets/styles/rainReportDetail.scss b/src/assets/styles/rainReportDetail.scss
new file mode 100644
index 0000000..ea6f1b7
--- /dev/null
+++ b/src/assets/styles/rainReportDetail.scss
@@ -0,0 +1,502 @@
+.reportDetail {
+  width: 100%;
+  background: #fff;
+  color: #333;
+  margin-bottom: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 30px;
+
+  // 表格样式
+  .table_content {
+    .el-table {
+      background-color: transparent !important;
+
+      .el-table__cell {
+        padding: 6px 0 !important;
+      }
+
+      .success {
+        color: #24de8d;
+        font-weight: bold;
+      }
+
+      .fail {
+        color: #f85050;
+        font-weight: bold;
+      }
+
+      .el-loading-mask {
+        background: rgba(3, 20, 37, 0.9) !important;
+      }
+
+      .indexClass_1 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #f4c064 0%, rgba(244, 192, 100, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_2 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #bacdff 0%, rgba(186, 205, 255, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_3 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #e07748 0%, rgba(224, 119, 72, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      thead {
+        // background: url('@/assets/images/Sponge_screen/fangXunTiaoDu/table_head_back.png') no-repeat;
+        // background-size: 100% 100%;
+        background: #005cba !important;
+      }
+
+      .el-button--primary {
+        width: 49px;
+        height: 22px;
+        background: linear-gradient(0deg, #0566d7 0%, #007eff 100%);
+        border-radius: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 14px;
+        color: #d2efff;
+        line-height: 22px;
+      }
+
+      .el-table__header-wrapper {
+        .el-table__header {
+          th {
+            background: transparent !important;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 14px;
+            color: #fff;
+            line-height: 32px;
+          }
+        }
+      }
+
+      tr {
+        height: 36px !important;
+      }
+
+      tr:nth-of-type(even) {
+        // background: rgba(0, 72, 153, 0.3) !important;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      }
+
+      tr:nth-of-type(odd) {
+        // background: rgba(19, 108, 183, 0.5) !important;
+        background: transparent !important;
+      }
+
+      .el-table__body {
+        border-bottom: none !important;
+
+        tr:nth-of-type(odd) {
+        }
+
+        tr:nth-of-type(even) {
+          td {
+          }
+        }
+
+        tr:hover > td {
+          cursor: pointer;
+          background: linear-gradient(0deg, rgba(0, 89, 192, 0.3) 0%, rgba(0, 76, 164, 0.2) 100%) !important;
+        }
+      }
+
+      .el-table__inner-wrapper {
+        &::before {
+          display: none;
+        }
+      }
+
+      .el-table__header-wrapper,
+      .el-table__fixed-header-wrapper {
+        tr {
+          background-color: transparent !important;
+        }
+
+        th {
+          word-break: break-word;
+        }
+      }
+
+      .el-table__body-wrapper {
+        .el-button [class*='el-icon-'] + span {
+          margin-left: 1px;
+        }
+      }
+
+      th.el-table__cell {
+        color: #fff;
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+      }
+
+      th.is-left {
+        text-align: left !important;
+      }
+
+      td.el-table__cell {
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+        color: #fff !important;
+      }
+
+      td.is-left {
+        text-align: left;
+      }
+
+      td.el-table-fixed-column--right {
+        background-color: #0f3a4f !important;
+        color: #fff !important;
+
+        .el-button {
+          color: #fff !important;
+        }
+      }
+
+      .el-table__empty-block {
+        .el-table__empty-text {
+          color: #fff !important;
+        }
+      }
+    }
+
+    // .ListBoxHeader_Sel {
+    //   .el-input__wrapper {
+    //     background: linear-gradient(0deg, #1c7a99 0%, #60c0e2 100%) !important;
+    //     // box-shadow: none !important;
+    //   }
+    // }
+
+    .el-progress-bar__outer {
+      background: #2eafbf !important;
+    }
+
+    .el-tabs {
+      .el-tabs__header {
+        .el-tabs__nav {
+          .el-tabs__item {
+            color: #fff !important;
+
+            &.is-active {
+              color: #409eff !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .waterlogImg {
+    flex-wrap: wrap;
+
+    .part {
+      width: 18%;
+      margin-left: 10px;
+      margin-bottom: 10px;
+      text-align: center;
+
+      img {
+        width: 100%;
+        height: 150px;
+      }
+
+      p {
+        line-height: 20px;
+      }
+    }
+  }
+
+  #rain_chart,
+  #chartOneBG,
+  .chartOneBG,
+  #chartOneBG2,
+  #chartOneBG3,
+  #chartOneBG4 {
+    // width: 100%;
+    width: 1000px;
+    height: 300px;
+  }
+
+  h1 {
+    text-align: center;
+    color: $red;
+    font-size: 28px;
+    letter-spacing: 5px;
+  }
+
+  h4 {
+    color: $red;
+    border-bottom: 3px solid $red;
+    padding: 10px 0px;
+    text-align: right;
+  }
+
+  .title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .small_title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .button_title {
+    width: 66px;
+    height: 22px;
+    line-height: 22px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+    margin-left: 20px;
+    cursor: pointer;
+
+    &:hover {
+      background: #00a4ae;
+      border-radius: 6px;
+      text-align: center;
+    }
+  }
+
+  .active_button_title {
+    background: #00a4ae;
+    border-radius: 6px;
+    text-align: center;
+  }
+
+  .content {
+    text-indent: 14px;
+    position: relative;
+
+    span {
+      color: #333333;
+      font-weight: bolder;
+    }
+
+    &:after {
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      background: #918f8f;
+      border-radius: 50%;
+      content: '';
+      left: 0;
+      top: 16px;
+      margin-top: -4px;
+    }
+  }
+
+  .small_tip {
+    text-align: center;
+    font-weight: bold;
+    margin: 10px 0px;
+  }
+
+  .rain_date_detail {
+    margin-bottom: 10px;
+
+    .rain_box2 {
+      &:hover {
+        background: #5daee6;
+      }
+    }
+
+    .active_rain_box2 {
+      background: #5daee6 !important;
+    }
+
+    .rain_box {
+      // width: 112px;
+      height: 78px;
+      background: #155785;
+      border-radius: 6px;
+      margin-right: 10px;
+      cursor: pointer;
+      color: #ffffff;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .rainfall {
+        span {
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 20px;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.table_content_box {
+  width: 70%;
+  margin: 10px auto;
+  color: #000;
+  border: 1px solid #00314e !important;
+
+  .header {
+    text-align: center;
+    border-bottom: 0.00521rem solid #00314e !important;
+    color: #000;
+    font-weight: bolder;
+    border-right: none !important;
+    position: static !important;
+    background-color: #dee1e6 !important;
+    height: 0.20833rem !important;
+    line-height: 0.20833rem !important;
+    font-size: 0.06771rem;
+  }
+
+  .basic_label {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+    border-right: 1px solid #00314e !important;
+  }
+
+  .basic_val {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+  }
+}
+
+.img_content {
+  max-width: 80%;
+
+  .img_box {
+    width: 100%;
+  }
+}
+
+::v-deep(.el-loading-spinner) {
+  position: fixed;
+  top: 420px !important;
+  left: 0;
+}
+
+.reportDetail {
+  .detailDataTable {
+    margin-bottom: 10px !important;
+  }
+
+  ::v-deep(.el-table) {
+    --el-table-border-color: $mainColor1 !important;
+    --el-table-bg-color: $mainColor1 !important;
+
+    .el-table__body {
+      border-bottom: 1px solid #333 !important;
+    }
+
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      th {
+        word-break: break-word;
+        background-color: #dee1e6 !important;
+        height: 40px !important;
+        font-size: 13px;
+      }
+    }
+
+    .el-table__body-wrapper {
+      background-color: #004770 !important;
+
+      .el-button [class*='el-icon-'] + span {
+        margin-left: 1px;
+      }
+
+      td.el-table-fixed-column--right {
+        background: $mainBg !important;
+      }
+    }
+
+    tr {
+      background-color: #f8f8f9 !important;
+    }
+
+    tr:nth-of-type(odd) {
+      background-color: #fff !important;
+    }
+
+    tr:hover > td {
+      background-color: #f5f7fa !important;
+    }
+
+    th.el-table__cell,
+    td.el-table__cell {
+      text-align: center;
+      border-bottom: 1px solid $mainBg !important;
+      color: #000;
+      border-right: none !important;
+      position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
+    }
+
+    .el-table__empty-block {
+      background-color: #fff !important;
+
+      .el-table__empty-text {
+        color: #c6c6c6 !important;
+      }
+    }
+
+    .el-button {
+      border: none !important;
+      background: none !important;
+
+      &:hover {
+        background: none !important;
+        transform: scale(1.01);
+      }
+    }
+  }
+}
diff --git a/src/utils/fixDict.js b/src/utils/fixDict.js
index ae75255..8c2b3fc 100644
--- a/src/utils/fixDict.js
+++ b/src/utils/fixDict.js
@@ -4,7 +4,7 @@
   propsColorYs: [
     { label: '(米)', color: '#5470c6', value: 'm' },
     { label: '(米/秒)', color: '#91cc75', value: 'm/s' },
-    { label: '(度)', color: '#fac858', value: '°' },
+    { label: '(度)', color: '#fac858', value: 'mg/L' },
     { label: '(立方米/小时)', color: '#ee6666', value: 'm³/h' },
     { label: '(立方米/秒)', color: '#3ba272', value: 'm³/s' },
     { label: '(立方米)', color: '#73c0de', value: 'm³' },
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index c0fc940..0a46262 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -17,7 +17,7 @@
               <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value" />
             </el-select>
             <el-select v-model="projectFx" placeholder="请选择典型项目分析" @change="changeProject">
-              <el-option v-for="item in XmList" :key="item.value" :label="item.name" :value="item.value" />
+              <el-option v-for="item in XmList" :key="item.index" :label="item.name" :value="item.index" />
             </el-select>
           </div>
         </div>
@@ -56,74 +56,73 @@
         </div>
       </div>
     </div>
-    <!-- 项目弹窗信息 -->
-    <div id="xmInfoWindow" class="tactics_content" v-show="xmData.visible" ref="xmPoPupBox">
-      <div class="title flex flex-r flex-justcontent-spacebetween">
-        <span>
-          {{ xmData.data.name }}
-        </span>
 
-        <el-switch
-          v-model="undergroundPipeline"
-          class="ml-2"
-          inline-prompt
-          style="--el-switch-on-color: #2393fc; --el-switch-off-color: #2393fc; float: right"
-          active-text="地表径流"
-          inactive-text="地下管网"
-          @change="changePipeLayer"
-        />
-        <el-icon :size="20" @click="closePopup">
+    <!-- 典型项目分析弹窗信息 -->
+    <div id="xmInfoWindow" class="projectContDX" v-show="xmData.visible" ref="xmPoPupBox">
+      <div class="title flex flex-r flex-justcontent-spacebetween">
+        <span>{{ xmData.data.name }} </span>
+        <el-icon :size="24" @click="closePopup" style="margin: 5px 5px 0px 0px">
           <Close class="closed" />
         </el-icon>
       </div>
       <div class="centent flex flex-v flex-justcontent-start">
         <div class="flex flex-r flex-justcontent-start content_detail">
+          <el-switch
+            v-model="undergroundPipeline"
+            inline-prompt
+            style="--el-switch-on-color: #2393fc; --el-switch-off-color: #2393fc; float: right"
+            active-text="地表径流"
+            inactive-text="地下管网"
+            @change="changePipeLayer"
+          />
+        </div>
+        <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">时间：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>2024-11-24</span>
+            <span>{{ dateRain }}</span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">收水范围：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>2000m²</span>
+            <span>{{ xmData.data.ssfw }}m²</span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">设计降雨量：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>37.8mm </span>
+            <span>{{ xmData.data.sjjyl }}mm </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">实际控制雨量：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
             <!-- <span v-if="projectInfo.trueRain == '异常'">雨前出流</span> -->
-            <span>0mm </span>
+            <span>{{ xmData.data.sjkzyl }}mm </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
-          <div class="centent_label flex flex-justcontent-start">典型降雨径流总量控制率实际值：</div>
+          <div class="centent_label flex flex-justcontent-start">径流总量控制率实际值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>0% </span>
+            <span>{{ xmData.data.jlzlkzlsj }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">年径流总量控制率目标值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>85% </span>
+            <span>{{ xmData.data.jlzlkzlmb }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">年径流污染削减率目标值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>40% </span>
+            <span>{{ xmData.data.jlwrxjmb }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
-          <div class="centent_label flex flex-justcontent-start">典型降雨径流污染物削减率实际值：</div>
+          <div class="centent_label flex flex-justcontent-start">径流污染物削减率实际值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>0% </span>
+            <span>{{ xmData.data.jlwrxjsj }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
@@ -138,8 +137,15 @@
             <span>--</span>
           </div>
         </div>
+        <div class="flex flex-r flex-justcontent-end content_detail">
+          <el-button type="warning" size="small" @click="dialogShow = true">查看更多</el-button>
+        </div>
       </div>
     </div>
+    <!-- 典型项目数据查看 -->
+    <el-dialog :title="xmData.data.name + '数据详情'" v-model="dialogShow" width="950px" append-to-body>
+      <typicalLandDiaLogDetail :pointInf="xmData.data" v-if="dialogShow"></typicalLandDiaLogDetail>
+    </el-dialog>
   </div>
 </template>
 
@@ -153,8 +159,10 @@
 import { graphicReport, getStationList } from '@/api/dataAnalysis/syntherticData';
 import { listrtuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo';
 import { rtuWarnConfigList } from '@/api/dataAnalysis/historyGj.js';
+import typicalLandDiaLogDetail from './typicalLandDiaLogDetail.vue';
 
 const areaFX = ref('0');
+const dialogShow = ref(false);
 const { proxy } = getCurrentInstance();
 const areaList = ref([
   { name: '古城蓝绿韧性示范片区', value: '0', lonlat: [114.35, 34.802] },
@@ -162,16 +170,39 @@
   { name: '综保区工业海绵化片区', value: '2', lonlat: [114.209, 34.782] },
   { name: '金明品质提升示范片区', value: '3', lonlat: [114.285, 34.799] },
 ]);
-const projectFx = ref('0');
+const projectFx = ref(0);
 const undergroundPipeline = ref(true);
+// 典型项目
 const XmList = ref([
-  { name: '汴京路管网及道路海绵化改造', projectNo: 'GW06', value: '0', lon: 114.378601, lat: 34.793947 },
+  {
+    name: '汴京路管网及道路海绵化改造',
+    projectNo: 'GW06',
+    index: 0,
+    lon: 114.378601,
+    lat: 34.793947,
+    ssfw: 110330.52,
+    sjjyl: 19.84,
+    sjkzyl: 0,
+    jlzlkzlsj: 100,
+    jlzlkzlmb: 68,
+    jlwrxjmb: 40,
+    jlwrxjsj: 43.6,
+    azTime: '2024-09-20',
+  },
   {
     name: '金明广场(西南角)改造提升',
     projectNo: 'XMBH202412180002',
-    value: '1',
+    index: 1,
     lon: 114.29615,
     lat: 34.801966,
+    ssfw: 2000,
+    sjjyl: 37.8,
+    sjkzyl: 0,
+    jlzlkzlsj: 100,
+    jlzlkzlmb: 85.5,
+    jlwrxjmb: 40,
+    jlwrxjsj: 42,
+    azTime: '2024-12-14',
   },
 ]);
 const xmData = reactive({
@@ -332,22 +363,22 @@
 }
 
 // 典型项目点击
-function changeProject(index) {
-  console.log(XmList.value[index]);
+function changeProject() {
+  xmData.data = XmList.value[projectFx.value];
+  console.log(xmData.data);
   bus.emit('ifShowLegendXM', true); //显示图例
   //显示项目设施图
-  bus.emit('setLayerVisible', { layername: XmList.value[index].name, isCheck: true });
+  bus.emit('setLayerVisible', { layername: xmData.data.name, isCheck: true });
   undergroundPipeline.value = true;
   //项目详情弹窗
   changePipeLayer();
-  xmData.data = XmList.value[index];
   setPopupDom(proxy.$refs.xmPoPupBox, [0, 0]);
-  newfiberMapbox.popup.setLngLat({ lng: XmList.value[index].lon, lat: XmList.value[index].lat });
+  newfiberMapbox.popup.setLngLat({ lng: xmData.data.lon, lat: xmData.data.lat });
   newfiberMapbox.addPopup(newfiberMapbox.popup);
   xmData.visible = true;
   // 地图移动过去
   newfiberMapbox.map.easeTo({
-    center: [XmList.value[index].lon, XmList.value[index].lat],
+    center: [xmData.data.lon, xmData.data.lat],
     zoom: 18,
     pitch: 30,
   });
@@ -422,83 +453,157 @@
     { layername: 'spongeFacility', show: true },
     { layername: 'origine', show: true },
   ]);
+  xmData.visible = false;
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .publicContainerA {
   margin-top: 10px;
-}
-.ConstrucClass {
-  width: 460px;
-  height: calc(100vh - 220px);
-  background: #004565;
-  opacity: 0.8;
-  overflow-x: hidden;
-  overflow-y: auto;
-  margin-top: -3px;
-  .WaterAccumulation {
-    width: 95%;
-    // height: 270px;
-    margin: auto;
-    background: yellow;
-    .HeadContent {
-      width: 100%;
-      height: 40px;
-      background: #217dc8;
-      border: 1px solid #61aff0;
-      position: relative;
-      top: 2px;
-      span {
+  .ConstrucClass {
+    width: 460px;
+    height: calc(100vh - 220px);
+    background: #004565;
+    opacity: 0.8;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-top: -3px;
+    .WaterAccumulation {
+      width: 95%;
+      // height: 270px;
+      margin: auto;
+      background: yellow;
+      .HeadContent {
+        width: 100%;
+        height: 40px;
+        background: #217dc8;
+        border: 1px solid #61aff0;
         position: relative;
-        top: 8px;
-        left: 15px;
-        color: #ffffff;
-        font-family: Source Han Sans CN;
-        font-weight: 500;
+        top: 2px;
+        span {
+          position: relative;
+          top: 8px;
+          left: 15px;
+          color: #ffffff;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+        }
+      }
+    }
+    .WaterList {
+      position: relative;
+      top: 8px;
+      width: 95%;
+      // height: calc(100vh - 720px);
+      margin: auto;
+      // background: yellow;
+      .DropdownBox {
+        height: 45px;
+        background: #217dc8;
+        border: 1px solid #61aff0;
+        display: flex;
+        justify-content: space-around;
+        margin: 5px;
+        .analysis {
+          width: 35%;
+          display: flex;
+          align-items: center;
+          .ICON_zp {
+            width: 28px;
+            height: 28px;
+            position: relative;
+            top: 32x;
+          }
+        }
+        .Selectionbox {
+          width: 85%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          padding-right: 5px;
+        }
+      }
+      .assessment {
+        width: 100%;
+        height: calc(100vh - 680px);
+      }
+      .assessmentJS {
+        width: 100%;
+        height: 280px;
       }
     }
   }
-  .WaterList {
-    position: relative;
-    top: 8px;
-    width: 95%;
-    // height: calc(100vh - 720px);
-    margin: auto;
-    // background: yellow;
-    .DropdownBox {
-      height: 45px;
-      background: #217dc8;
-      border: 1px solid #61aff0;
-      display: flex;
-      justify-content: space-around;
-      margin: 5px;
-      .analysis {
-        width: 35%;
-        display: flex;
-        align-items: center;
-        .ICON_zp {
-          width: 28px;
-          height: 28px;
-          position: relative;
-          top: 32x;
-        }
+}
+
+.l7-popup-content {
+  background: none !important;
+  .projectContDX {
+    width: 300px;
+    padding: 10px;
+    height: auto !important;
+    border: 1px solid red;
+    text-align: left;
+    background: linear-gradient(0deg, rgba(11, 71, 113, 0.9) 0%, rgba(22, 83, 126, 0.8) 100%);
+    border-radius: 4px;
+    border: 1px solid #42a4ef;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: 14px;
+      border: 12px solid transparent;
+      border-top: 12px solid rgba(11, 71, 113, 0.9);
+      z-index: 12;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: 10.5px;
+      border: 15px solid transparent;
+      border-top: 15px solid #42a4ef;
+      z-index: 11;
+    }
+    .title {
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 17px;
+      color: #37ceff;
+      line-height: 36px;
+      cursor: pointer;
+
+      span {
+        display: inline-block;
+        overflow: hidden;
+        /* 确保超出容器的文本被裁剪 */
+        white-space: nowrap;
+        /* 确保文本在一行内显示 */
+        text-overflow: ellipsis;
+        /* 使用省略号表示文本超出 */
       }
-      .Selectionbox {
-        width: 85%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding-right: 5px;
+
+      ::v-deep(.el-icon) {
+        cursor: pointer;
       }
     }
-    .assessment {
-      width: 100%;
-      height: calc(100vh - 680px);
-    }
-    .assessmentJS {
-      width: 100%;
-      height: 280px;
+    .centent {
+      font-family: Source Han Sans CN;
+      font-size: 15px;
+      color: #c6c6c6;
+      line-height: 23px;
+
+      .content_detail {
+        width: 100%;
+      }
+
+      .centent_val {
+        width: 0;
+        color: #3afff8;
+      }
     }
   }
 }
diff --git a/src/views/sponeScreen/projectHM/ZhongheFenXi_component/typicalLandSiteShuJuQuShi.vue b/src/views/sponeScreen/projectHM/ZhongheFenXi_component/typicalLandSiteShuJuQuShi.vue
new file mode 100644
index 0000000..4cdb097
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ZhongheFenXi_component/typicalLandSiteShuJuQuShi.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="shuJuQuShi flex" v-loading="echartLoading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0,0.4)">
+    <div class="echarts" ref="echarts" v-show="!isShow"></div>
+    <empty v-if="isShow" emptyText="暂未查到数据" :width="100" :height="100" style="margin-top: 50px"></empty>
+  </div>
+</template>
+<script setup>
+import { graphicReport } from '@/api/sponeScreen/syntherticData.js';
+
+const { proxy } = getCurrentInstance();
+const propsColor = proxy.fixDict['propsColorYs']; // 根据因子的单位来匹配
+const props = defineProps({
+  searchDate: Array,
+  typicalLandInfo: Object,
+});
+
+const echartLoading = ref(true);
+const isShow = ref(false);
+const myChart = shallowRef(null);
+const yAxisData = ref([]);
+// 获取列表数据
+function getPipelineEcharts() {
+  echartLoading.value = true;
+  let params = {
+    startTime: proxy.moment(props.searchDate[0]).format('YYYY-MM-DD'),
+    endTime: proxy.moment(props.searchDate[1]).format('YYYY-MM-DD'),
+    stCode: props.typicalLandInfo.stCode,
+  };
+  graphicReport(params).then(res => {
+    let { data } = res;
+    echartLoading.value = false;
+    //initEcharts(data.propertyMonitorXList, data.propertyMonitorList)
+    let targerts = ['小时水量', 'SS', '水位'];
+    let newPropertyMonitorList =
+      data['propertyMonitorList'] && data['propertyMonitorList'].filter(item => targerts.includes(item.monitorPropertyName));
+    data['propertyMonitorList'] = newPropertyMonitorList;
+    getRainData(data);
+  });
+}
+//根据关联的雨量站获取雨量站数据
+const getRainData = async val => {
+  let params = {
+    startTime: proxy.moment(props.searchDate[0]).format('YYYY-MM-DD'),
+    endTime: proxy.moment(props.searchDate[1]).format('YYYY-MM-DD'),
+    stCode: props.typicalLandInfo.referRainStCode,
+  };
+  let { data } = await graphicReport(params);
+  echartLoading.value = false;
+  let rainData = {};
+  if (data.propertyMonitorList.length) {
+    data.propertyMonitorList.forEach(item => {
+      if (item.monitorPropertyName.includes('5分钟时段降水量')) {
+        rainData = item;
+      }
+    });
+  }
+  isShow.value = data.propertyMonitorXList.length ? false : true;
+  if (val['propertyMonitorList'] && val['propertyMonitorList'].length) {
+    val.propertyMonitorList.unshift(rainData);
+  } else {
+    val['propertyMonitorList'] = [rainData];
+  }
+
+  initEcharts(data.propertyMonitorXList, val.propertyMonitorList);
+};
+const initEcharts = (timeList, propertyMonitorList) => {
+  if (!!myChart.value) {
+    myChart.value.dispose();
+  }
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  const xAxisData = propertyMonitorList.map((item, index) => {
+    return {
+      type: index == 0 ? 'category' : '',
+      //x轴类目名称列表
+      data: timeList,
+      //x 轴所在的 grid 的索引，默认0表示位于第一个 grid
+      gridIndex: index,
+      axisLabel: {
+        color: '#2395FF',
+        fontSize: 14,
+        fontFamily: 'Source Han Sans CN',
+        // show: index == propertyMonitorList.length - 1 ? true : false,
+      },
+      axisLine: {
+        show: true,
+        onZero: false,
+        lineStyle: {
+          color: '#2395FF',
+          width: 1,
+          type: 'solid',
+        },
+        show: true,
+      },
+    };
+  });
+  yAxisData.value = propertyMonitorList.map((item, index) => {
+    const current = propsColor.find(it => it.label === item.propertyUnit);
+    var maxNum = Math.max(...item.ylist);
+    return {
+      type: 'value',
+      //展示网格线
+      splitLine: {
+        show: true,
+      },
+      inverse: item.monitorPropertyName.includes('5分钟时段降水量') ? true : false,
+      //y 轴所在的 grid 的索引，默认0表示位于第一个 grid
+      gridIndex: index,
+      name: `${item.monitorPropertyName}(${current.value})`,
+      nameLocation: item.monitorPropertyName.includes('5分钟时段降水量') ? 'start' : 'end',
+      nameGap: 10, //纵坐标名字与轴线之间的距离
+      nameTextStyle: {
+        fontFamily: 'Source Han Sans CN',
+        fontSize: '14px',
+        color: current.color,
+        align: 'left', // 设置文字左对齐
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#ffffff1c',
+        },
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#2395FF',
+        },
+      },
+      max: function (value) {
+        if (current.value == 'mm') {
+          return (Number(maxNum) * 1.1).toFixed(0);
+        }
+      },
+      axisLabel: {
+        // formatter: '{value} ',
+        color: '#47AFFE',
+        fontSize: 14,
+        fontFamily: 'Source Han Sans CN',
+        align: 'right', // 文字右对齐
+        formatter: function (value, index) {
+          if (value >= 10000 && value < 10000000) {
+            value = value / 10000 + '万';
+          } else if (value >= 10000000) {
+            value = value / 10000000 + '千万';
+          }
+          if (index % 2 === 0) {
+            return value;
+          } else {
+            return '';
+          }
+        },
+      },
+    };
+  });
+  const seriesData = propertyMonitorList.map((item, index) => {
+    const current = propsColor.find(it => it.label === item.propertyUnit);
+    if (current.value == 'mm') {
+      return {
+        type: 'bar',
+        name: `${item.monitorPropertyName}(${current.value})`,
+        data: item.ylist, //y轴类目数据
+        barWidth: '2px',
+        itemStyle: {
+          color: current.color,
+        },
+        xAxisIndex: index, //使用x轴的索引
+        yAxisIndex: index, //使用y轴的索引
+      };
+    } else {
+      return {
+        type: 'line',
+        name: `${item.monitorPropertyName}(${current.value})`,
+        data: item.ylist, //y轴类目数据
+        lineStyle: {
+          color: current.color, // 设置线的颜色为红色
+          width: 2,
+        },
+        xAxisIndex: index, //使用x轴的索引
+        yAxisIndex: index, //使用y轴的索引
+      };
+    }
+  });
+  const legendData = propertyMonitorList.map((item, index) => {
+    const current = propsColor.find(it => it.label === item.propertyUnit);
+    let topVal = 10 + 150 * index;
+    return {
+      data: [`${item.monitorPropertyName}(${current.value})`],
+      show: false,
+      color: current.color,
+      top: topVal,
+    };
+  });
+  const gridData = propertyMonitorList.map((item, index) => {
+    let topVal = 40 + 150 * index;
+    let bottomVal = 630 - 145 * (index + 1);
+    return {
+      top: topVal,
+      bottom: bottomVal,
+
+      left: 50,
+      right: 0,
+    };
+  });
+  const dataZoomXAxisIndex = propertyMonitorList.map((item, index) => {
+    return index;
+  });
+  const option = {
+    color: ['#23d0df4a'],
+    axisPointer: {
+      link: [
+        {
+          xAxisIndex: 'all',
+        },
+      ],
+    },
+    legend: legendData,
+    grid: gridData,
+    tooltip: {
+      trigger: 'axis',
+      show: true,
+      backgroundColor: 'rgba(18,56,104,0.9)', // 设置背景色为半透明的白色
+      borderColor: '#48ABFF', // 边框颜色
+      borderWidth: 1, // 边框宽度
+      borderRadius: 4, // 设置边框圆角
+      textStyle: {
+        // 设置字体颜色
+        color: '#F0F8FF',
+        fontFamily: 'Source Han Sans CN',
+        fontWeight: 500,
+        fontSize: '15px',
+        color: '#F0F8FF',
+      },
+      formatter: function (params, b, c) {
+        let dataArr = [];
+        let newDataArr = [];
+        let formatterStr = '';
+        params.map(function (item, index) {
+          dataArr[item.seriesIndex] = item;
+        });
+        dataArr.map(function (item, index) {
+          newDataArr.push({ seriesName: item.seriesName, name: item.name, value: item.value });
+        });
+        formatterStr += params[0].axisValue + '<br />';
+        newDataArr.map(function (item, index) {
+          formatterStr += item.seriesName + '：' + item.value + '<br />';
+        });
+        return formatterStr;
+      },
+    },
+    dataZoom: {
+      // 设置滚动条的隐藏与显示
+      show: true,
+      // 设置滚动条类型
+      type: 'inside',
+      // 设置背景颜色
+      backgroundColor: '#F1F1F1',
+      // 设置选中范围的填充颜色
+      fillerColor: '#C1C1C1',
+      // 设置边框颜色
+      borderColor: '#F1F1F1',
+      // 是否显示detail，即拖拽时候显示详细数值信息
+      showDetail: false,
+      // 数据窗口范围的起始数值
+      start: 0,
+      // 数据窗口范围的结束数值（一页显示多少条数据）
+      end: 100,
+      // empty：当前数据窗口外的数据，被设置为空。
+      // 即不会影响其他轴的数据范围
+      filterMode: 'empty',
+      // 设置滚动条宽度，相对于盒子宽度
+      width: '50%',
+      // 设置滚动条高度
+      height: 8,
+      // 设置滚动条显示位置
+      left: 'center',
+      // 是否锁定选择区域（或叫做数据窗口）的大小
+      zoomLoxk: true,
+      // 控制手柄的尺寸
+      handleSize: 0,
+      // dataZoom-slider组件离容器下侧的距离
+      bottom: 0,
+      xAxisIndex: dataZoomXAxisIndex,
+    },
+    xAxis: xAxisData,
+    yAxis: yAxisData.value,
+    series: seriesData,
+  };
+
+  myChart.value.setOption(option);
+};
+
+onMounted(() => {});
+defineExpose({
+  getPipelineEcharts,
+});
+</script>
+<style lang="scss" scoped>
+.shuJuQuShi {
+  width: 100%;
+  height: 630px;
+
+  .echarts {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

diff --git a/src/assets/styles/publicXG.scss b/src/assets/styles/publicXG.scss
index 8d8506f..f1c2f15 100644
--- a/src/assets/styles/publicXG.scss
+++ b/src/assets/styles/publicXG.scss
@@ -535,7 +535,6 @@
 }
 *::-webkit-scrollbar {
   width: 5px; /* 定义滚动条的宽度 */
-  // height: 5px;
 }
 // 一张图自动滚动播放
 .scrollMapHM {
diff --git a/src/assets/styles/rainReportDetail.scss b/src/assets/styles/rainReportDetail.scss
new file mode 100644
index 0000000..ea6f1b7
--- /dev/null
+++ b/src/assets/styles/rainReportDetail.scss
@@ -0,0 +1,502 @@
+.reportDetail {
+  width: 100%;
+  background: #fff;
+  color: #333;
+  margin-bottom: 30px;
+  font-family: Source Han Sans CN;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 30px;
+
+  // 表格样式
+  .table_content {
+    .el-table {
+      background-color: transparent !important;
+
+      .el-table__cell {
+        padding: 6px 0 !important;
+      }
+
+      .success {
+        color: #24de8d;
+        font-weight: bold;
+      }
+
+      .fail {
+        color: #f85050;
+        font-weight: bold;
+      }
+
+      .el-loading-mask {
+        background: rgba(3, 20, 37, 0.9) !important;
+      }
+
+      .indexClass_1 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #f4c064 0%, rgba(244, 192, 100, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_2 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #bacdff 0%, rgba(186, 205, 255, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      .indexClass_3 {
+        width: 26px;
+        height: 26px;
+        background: linear-gradient(0deg, #e07748 0%, rgba(224, 119, 72, 0) 100%);
+        border-radius: 2px;
+        opacity: 0.9;
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ffffff;
+        display: block;
+        justify-content: center;
+        line-height: 26px;
+      }
+
+      thead {
+        // background: url('@/assets/images/Sponge_screen/fangXunTiaoDu/table_head_back.png') no-repeat;
+        // background-size: 100% 100%;
+        background: #005cba !important;
+      }
+
+      .el-button--primary {
+        width: 49px;
+        height: 22px;
+        background: linear-gradient(0deg, #0566d7 0%, #007eff 100%);
+        border-radius: 11px;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 14px;
+        color: #d2efff;
+        line-height: 22px;
+      }
+
+      .el-table__header-wrapper {
+        .el-table__header {
+          th {
+            background: transparent !important;
+            font-family: Source Han Sans CN;
+            font-weight: bold;
+            font-size: 14px;
+            color: #fff;
+            line-height: 32px;
+          }
+        }
+      }
+
+      tr {
+        height: 36px !important;
+      }
+
+      tr:nth-of-type(even) {
+        // background: rgba(0, 72, 153, 0.3) !important;
+        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
+      }
+
+      tr:nth-of-type(odd) {
+        // background: rgba(19, 108, 183, 0.5) !important;
+        background: transparent !important;
+      }
+
+      .el-table__body {
+        border-bottom: none !important;
+
+        tr:nth-of-type(odd) {
+        }
+
+        tr:nth-of-type(even) {
+          td {
+          }
+        }
+
+        tr:hover > td {
+          cursor: pointer;
+          background: linear-gradient(0deg, rgba(0, 89, 192, 0.3) 0%, rgba(0, 76, 164, 0.2) 100%) !important;
+        }
+      }
+
+      .el-table__inner-wrapper {
+        &::before {
+          display: none;
+        }
+      }
+
+      .el-table__header-wrapper,
+      .el-table__fixed-header-wrapper {
+        tr {
+          background-color: transparent !important;
+        }
+
+        th {
+          word-break: break-word;
+        }
+      }
+
+      .el-table__body-wrapper {
+        .el-button [class*='el-icon-'] + span {
+          margin-left: 1px;
+        }
+      }
+
+      th.el-table__cell {
+        color: #fff;
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+      }
+
+      th.is-left {
+        text-align: left !important;
+      }
+
+      td.el-table__cell {
+        text-align: center;
+        border-bottom: none !important;
+        border-right: none !important;
+        color: #fff !important;
+      }
+
+      td.is-left {
+        text-align: left;
+      }
+
+      td.el-table-fixed-column--right {
+        background-color: #0f3a4f !important;
+        color: #fff !important;
+
+        .el-button {
+          color: #fff !important;
+        }
+      }
+
+      .el-table__empty-block {
+        .el-table__empty-text {
+          color: #fff !important;
+        }
+      }
+    }
+
+    // .ListBoxHeader_Sel {
+    //   .el-input__wrapper {
+    //     background: linear-gradient(0deg, #1c7a99 0%, #60c0e2 100%) !important;
+    //     // box-shadow: none !important;
+    //   }
+    // }
+
+    .el-progress-bar__outer {
+      background: #2eafbf !important;
+    }
+
+    .el-tabs {
+      .el-tabs__header {
+        .el-tabs__nav {
+          .el-tabs__item {
+            color: #fff !important;
+
+            &.is-active {
+              color: #409eff !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .waterlogImg {
+    flex-wrap: wrap;
+
+    .part {
+      width: 18%;
+      margin-left: 10px;
+      margin-bottom: 10px;
+      text-align: center;
+
+      img {
+        width: 100%;
+        height: 150px;
+      }
+
+      p {
+        line-height: 20px;
+      }
+    }
+  }
+
+  #rain_chart,
+  #chartOneBG,
+  .chartOneBG,
+  #chartOneBG2,
+  #chartOneBG3,
+  #chartOneBG4 {
+    // width: 100%;
+    width: 1000px;
+    height: 300px;
+  }
+
+  h1 {
+    text-align: center;
+    color: $red;
+    font-size: 28px;
+    letter-spacing: 5px;
+  }
+
+  h4 {
+    color: $red;
+    border-bottom: 3px solid $red;
+    padding: 10px 0px;
+    text-align: right;
+  }
+
+  .title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .small_title {
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #333333;
+  }
+
+  .button_title {
+    width: 66px;
+    height: 22px;
+    line-height: 22px;
+    font-family: Source Han Sans CN;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+    margin-left: 20px;
+    cursor: pointer;
+
+    &:hover {
+      background: #00a4ae;
+      border-radius: 6px;
+      text-align: center;
+    }
+  }
+
+  .active_button_title {
+    background: #00a4ae;
+    border-radius: 6px;
+    text-align: center;
+  }
+
+  .content {
+    text-indent: 14px;
+    position: relative;
+
+    span {
+      color: #333333;
+      font-weight: bolder;
+    }
+
+    &:after {
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      background: #918f8f;
+      border-radius: 50%;
+      content: '';
+      left: 0;
+      top: 16px;
+      margin-top: -4px;
+    }
+  }
+
+  .small_tip {
+    text-align: center;
+    font-weight: bold;
+    margin: 10px 0px;
+  }
+
+  .rain_date_detail {
+    margin-bottom: 10px;
+
+    .rain_box2 {
+      &:hover {
+        background: #5daee6;
+      }
+    }
+
+    .active_rain_box2 {
+      background: #5daee6 !important;
+    }
+
+    .rain_box {
+      // width: 112px;
+      height: 78px;
+      background: #155785;
+      border-radius: 6px;
+      margin-right: 10px;
+      cursor: pointer;
+      color: #ffffff;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .rainfall {
+        span {
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          font-size: 20px;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+
+.table_content_box {
+  width: 70%;
+  margin: 10px auto;
+  color: #000;
+  border: 1px solid #00314e !important;
+
+  .header {
+    text-align: center;
+    border-bottom: 0.00521rem solid #00314e !important;
+    color: #000;
+    font-weight: bolder;
+    border-right: none !important;
+    position: static !important;
+    background-color: #dee1e6 !important;
+    height: 0.20833rem !important;
+    line-height: 0.20833rem !important;
+    font-size: 0.06771rem;
+  }
+
+  .basic_label {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+    border-right: 1px solid #00314e !important;
+  }
+
+  .basic_val {
+    text-align: center;
+    border-bottom: 1px solid #00314e !important;
+    border-right: none !important;
+    position: static !important;
+    height: 38px;
+  }
+}
+
+.img_content {
+  max-width: 80%;
+
+  .img_box {
+    width: 100%;
+  }
+}
+
+::v-deep(.el-loading-spinner) {
+  position: fixed;
+  top: 420px !important;
+  left: 0;
+}
+
+.reportDetail {
+  .detailDataTable {
+    margin-bottom: 10px !important;
+  }
+
+  ::v-deep(.el-table) {
+    --el-table-border-color: $mainColor1 !important;
+    --el-table-bg-color: $mainColor1 !important;
+
+    .el-table__body {
+      border-bottom: 1px solid #333 !important;
+    }
+
+    .el-table__header-wrapper,
+    .el-table__fixed-header-wrapper {
+      th {
+        word-break: break-word;
+        background-color: #dee1e6 !important;
+        height: 40px !important;
+        font-size: 13px;
+      }
+    }
+
+    .el-table__body-wrapper {
+      background-color: #004770 !important;
+
+      .el-button [class*='el-icon-'] + span {
+        margin-left: 1px;
+      }
+
+      td.el-table-fixed-column--right {
+        background: $mainBg !important;
+      }
+    }
+
+    tr {
+      background-color: #f8f8f9 !important;
+    }
+
+    tr:nth-of-type(odd) {
+      background-color: #fff !important;
+    }
+
+    tr:hover > td {
+      background-color: #f5f7fa !important;
+    }
+
+    th.el-table__cell,
+    td.el-table__cell {
+      text-align: center;
+      border-bottom: 1px solid $mainBg !important;
+      color: #000;
+      border-right: none !important;
+      position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
+    }
+
+    .el-table__empty-block {
+      background-color: #fff !important;
+
+      .el-table__empty-text {
+        color: #c6c6c6 !important;
+      }
+    }
+
+    .el-button {
+      border: none !important;
+      background: none !important;
+
+      &:hover {
+        background: none !important;
+        transform: scale(1.01);
+      }
+    }
+  }
+}
diff --git a/src/utils/fixDict.js b/src/utils/fixDict.js
index ae75255..8c2b3fc 100644
--- a/src/utils/fixDict.js
+++ b/src/utils/fixDict.js
@@ -4,7 +4,7 @@
   propsColorYs: [
     { label: '(米)', color: '#5470c6', value: 'm' },
     { label: '(米/秒)', color: '#91cc75', value: 'm/s' },
-    { label: '(度)', color: '#fac858', value: '°' },
+    { label: '(度)', color: '#fac858', value: 'mg/L' },
     { label: '(立方米/小时)', color: '#ee6666', value: 'm³/h' },
     { label: '(立方米/秒)', color: '#3ba272', value: 'm³/s' },
     { label: '(立方米)', color: '#73c0de', value: 'm³' },
diff --git a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
index c0fc940..0a46262 100644
--- a/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
+++ b/src/views/sponeScreen/projectHM/ProjectEvaluation.vue
@@ -17,7 +17,7 @@
               <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value" />
             </el-select>
             <el-select v-model="projectFx" placeholder="请选择典型项目分析" @change="changeProject">
-              <el-option v-for="item in XmList" :key="item.value" :label="item.name" :value="item.value" />
+              <el-option v-for="item in XmList" :key="item.index" :label="item.name" :value="item.index" />
             </el-select>
           </div>
         </div>
@@ -56,74 +56,73 @@
         </div>
       </div>
     </div>
-    <!-- 项目弹窗信息 -->
-    <div id="xmInfoWindow" class="tactics_content" v-show="xmData.visible" ref="xmPoPupBox">
-      <div class="title flex flex-r flex-justcontent-spacebetween">
-        <span>
-          {{ xmData.data.name }}
-        </span>
 
-        <el-switch
-          v-model="undergroundPipeline"
-          class="ml-2"
-          inline-prompt
-          style="--el-switch-on-color: #2393fc; --el-switch-off-color: #2393fc; float: right"
-          active-text="地表径流"
-          inactive-text="地下管网"
-          @change="changePipeLayer"
-        />
-        <el-icon :size="20" @click="closePopup">
+    <!-- 典型项目分析弹窗信息 -->
+    <div id="xmInfoWindow" class="projectContDX" v-show="xmData.visible" ref="xmPoPupBox">
+      <div class="title flex flex-r flex-justcontent-spacebetween">
+        <span>{{ xmData.data.name }} </span>
+        <el-icon :size="24" @click="closePopup" style="margin: 5px 5px 0px 0px">
           <Close class="closed" />
         </el-icon>
       </div>
       <div class="centent flex flex-v flex-justcontent-start">
         <div class="flex flex-r flex-justcontent-start content_detail">
+          <el-switch
+            v-model="undergroundPipeline"
+            inline-prompt
+            style="--el-switch-on-color: #2393fc; --el-switch-off-color: #2393fc; float: right"
+            active-text="地表径流"
+            inactive-text="地下管网"
+            @change="changePipeLayer"
+          />
+        </div>
+        <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">时间：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>2024-11-24</span>
+            <span>{{ dateRain }}</span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">收水范围：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>2000m²</span>
+            <span>{{ xmData.data.ssfw }}m²</span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">设计降雨量：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>37.8mm </span>
+            <span>{{ xmData.data.sjjyl }}mm </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">实际控制雨量：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
             <!-- <span v-if="projectInfo.trueRain == '异常'">雨前出流</span> -->
-            <span>0mm </span>
+            <span>{{ xmData.data.sjkzyl }}mm </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
-          <div class="centent_label flex flex-justcontent-start">典型降雨径流总量控制率实际值：</div>
+          <div class="centent_label flex flex-justcontent-start">径流总量控制率实际值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>0% </span>
+            <span>{{ xmData.data.jlzlkzlsj }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">年径流总量控制率目标值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>85% </span>
+            <span>{{ xmData.data.jlzlkzlmb }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
           <div class="centent_label flex flex-justcontent-start">年径流污染削减率目标值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>40% </span>
+            <span>{{ xmData.data.jlwrxjmb }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
-          <div class="centent_label flex flex-justcontent-start">典型降雨径流污染物削减率实际值：</div>
+          <div class="centent_label flex flex-justcontent-start">径流污染物削减率实际值：</div>
           <div class="centent_val flex flex-1 flex-justcontent-start flex-align-start">
-            <span>0% </span>
+            <span>{{ xmData.data.jlwrxjsj }}% </span>
           </div>
         </div>
         <div class="flex flex-r flex-justcontent-start content_detail">
@@ -138,8 +137,15 @@
             <span>--</span>
           </div>
         </div>
+        <div class="flex flex-r flex-justcontent-end content_detail">
+          <el-button type="warning" size="small" @click="dialogShow = true">查看更多</el-button>
+        </div>
       </div>
     </div>
+    <!-- 典型项目数据查看 -->
+    <el-dialog :title="xmData.data.name + '数据详情'" v-model="dialogShow" width="950px" append-to-body>
+      <typicalLandDiaLogDetail :pointInf="xmData.data" v-if="dialogShow"></typicalLandDiaLogDetail>
+    </el-dialog>
   </div>
 </template>
 
@@ -153,8 +159,10 @@
 import { graphicReport, getStationList } from '@/api/dataAnalysis/syntherticData';
 import { listrtuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo';
 import { rtuWarnConfigList } from '@/api/dataAnalysis/historyGj.js';
+import typicalLandDiaLogDetail from './typicalLandDiaLogDetail.vue';
 
 const areaFX = ref('0');
+const dialogShow = ref(false);
 const { proxy } = getCurrentInstance();
 const areaList = ref([
   { name: '古城蓝绿韧性示范片区', value: '0', lonlat: [114.35, 34.802] },
@@ -162,16 +170,39 @@
   { name: '综保区工业海绵化片区', value: '2', lonlat: [114.209, 34.782] },
   { name: '金明品质提升示范片区', value: '3', lonlat: [114.285, 34.799] },
 ]);
-const projectFx = ref('0');
+const projectFx = ref(0);
 const undergroundPipeline = ref(true);
+// 典型项目
 const XmList = ref([
-  { name: '汴京路管网及道路海绵化改造', projectNo: 'GW06', value: '0', lon: 114.378601, lat: 34.793947 },
+  {
+    name: '汴京路管网及道路海绵化改造',
+    projectNo: 'GW06',
+    index: 0,
+    lon: 114.378601,
+    lat: 34.793947,
+    ssfw: 110330.52,
+    sjjyl: 19.84,
+    sjkzyl: 0,
+    jlzlkzlsj: 100,
+    jlzlkzlmb: 68,
+    jlwrxjmb: 40,
+    jlwrxjsj: 43.6,
+    azTime: '2024-09-20',
+  },
   {
     name: '金明广场(西南角)改造提升',
     projectNo: 'XMBH202412180002',
-    value: '1',
+    index: 1,
     lon: 114.29615,
     lat: 34.801966,
+    ssfw: 2000,
+    sjjyl: 37.8,
+    sjkzyl: 0,
+    jlzlkzlsj: 100,
+    jlzlkzlmb: 85.5,
+    jlwrxjmb: 40,
+    jlwrxjsj: 42,
+    azTime: '2024-12-14',
   },
 ]);
 const xmData = reactive({
@@ -332,22 +363,22 @@
 }
 
 // 典型项目点击
-function changeProject(index) {
-  console.log(XmList.value[index]);
+function changeProject() {
+  xmData.data = XmList.value[projectFx.value];
+  console.log(xmData.data);
   bus.emit('ifShowLegendXM', true); //显示图例
   //显示项目设施图
-  bus.emit('setLayerVisible', { layername: XmList.value[index].name, isCheck: true });
+  bus.emit('setLayerVisible', { layername: xmData.data.name, isCheck: true });
   undergroundPipeline.value = true;
   //项目详情弹窗
   changePipeLayer();
-  xmData.data = XmList.value[index];
   setPopupDom(proxy.$refs.xmPoPupBox, [0, 0]);
-  newfiberMapbox.popup.setLngLat({ lng: XmList.value[index].lon, lat: XmList.value[index].lat });
+  newfiberMapbox.popup.setLngLat({ lng: xmData.data.lon, lat: xmData.data.lat });
   newfiberMapbox.addPopup(newfiberMapbox.popup);
   xmData.visible = true;
   // 地图移动过去
   newfiberMapbox.map.easeTo({
-    center: [XmList.value[index].lon, XmList.value[index].lat],
+    center: [xmData.data.lon, xmData.data.lat],
     zoom: 18,
     pitch: 30,
   });
@@ -422,83 +453,157 @@
     { layername: 'spongeFacility', show: true },
     { layername: 'origine', show: true },
   ]);
+  xmData.visible = false;
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .publicContainerA {
   margin-top: 10px;
-}
-.ConstrucClass {
-  width: 460px;
-  height: calc(100vh - 220px);
-  background: #004565;
-  opacity: 0.8;
-  overflow-x: hidden;
-  overflow-y: auto;
-  margin-top: -3px;
-  .WaterAccumulation {
-    width: 95%;
-    // height: 270px;
-    margin: auto;
-    background: yellow;
-    .HeadContent {
-      width: 100%;
-      height: 40px;
-      background: #217dc8;
-      border: 1px solid #61aff0;
-      position: relative;
-      top: 2px;
-      span {
+  .ConstrucClass {
+    width: 460px;
+    height: calc(100vh - 220px);
+    background: #004565;
+    opacity: 0.8;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-top: -3px;
+    .WaterAccumulation {
+      width: 95%;
+      // height: 270px;
+      margin: auto;
+      background: yellow;
+      .HeadContent {
+        width: 100%;
+        height: 40px;
+        background: #217dc8;
+        border: 1px solid #61aff0;
         position: relative;
-        top: 8px;
-        left: 15px;
-        color: #ffffff;
-        font-family: Source Han Sans CN;
-        font-weight: 500;
+        top: 2px;
+        span {
+          position: relative;
+          top: 8px;
+          left: 15px;
+          color: #ffffff;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+        }
+      }
+    }
+    .WaterList {
+      position: relative;
+      top: 8px;
+      width: 95%;
+      // height: calc(100vh - 720px);
+      margin: auto;
+      // background: yellow;
+      .DropdownBox {
+        height: 45px;
+        background: #217dc8;
+        border: 1px solid #61aff0;
+        display: flex;
+        justify-content: space-around;
+        margin: 5px;
+        .analysis {
+          width: 35%;
+          display: flex;
+          align-items: center;
+          .ICON_zp {
+            width: 28px;
+            height: 28px;
+            position: relative;
+            top: 32x;
+          }
+        }
+        .Selectionbox {
+          width: 85%;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          padding-right: 5px;
+        }
+      }
+      .assessment {
+        width: 100%;
+        height: calc(100vh - 680px);
+      }
+      .assessmentJS {
+        width: 100%;
+        height: 280px;
       }
     }
   }
-  .WaterList {
-    position: relative;
-    top: 8px;
-    width: 95%;
-    // height: calc(100vh - 720px);
-    margin: auto;
-    // background: yellow;
-    .DropdownBox {
-      height: 45px;
-      background: #217dc8;
-      border: 1px solid #61aff0;
-      display: flex;
-      justify-content: space-around;
-      margin: 5px;
-      .analysis {
-        width: 35%;
-        display: flex;
-        align-items: center;
-        .ICON_zp {
-          width: 28px;
-          height: 28px;
-          position: relative;
-          top: 32x;
-        }
+}
+
+.l7-popup-content {
+  background: none !important;
+  .projectContDX {
+    width: 300px;
+    padding: 10px;
+    height: auto !important;
+    border: 1px solid red;
+    text-align: left;
+    background: linear-gradient(0deg, rgba(11, 71, 113, 0.9) 0%, rgba(22, 83, 126, 0.8) 100%);
+    border-radius: 4px;
+    border: 1px solid #42a4ef;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: 14px;
+      border: 12px solid transparent;
+      border-top: 12px solid rgba(11, 71, 113, 0.9);
+      z-index: 12;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      margin-left: 10.5px;
+      border: 15px solid transparent;
+      border-top: 15px solid #42a4ef;
+      z-index: 11;
+    }
+    .title {
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 17px;
+      color: #37ceff;
+      line-height: 36px;
+      cursor: pointer;
+
+      span {
+        display: inline-block;
+        overflow: hidden;
+        /* 确保超出容器的文本被裁剪 */
+        white-space: nowrap;
+        /* 确保文本在一行内显示 */
+        text-overflow: ellipsis;
+        /* 使用省略号表示文本超出 */
       }
-      .Selectionbox {
-        width: 85%;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        padding-right: 5px;
+
+      ::v-deep(.el-icon) {
+        cursor: pointer;
       }
     }
-    .assessment {
-      width: 100%;
-      height: calc(100vh - 680px);
-    }
-    .assessmentJS {
-      width: 100%;
-      height: 280px;
+    .centent {
+      font-family: Source Han Sans CN;
+      font-size: 15px;
+      color: #c6c6c6;
+      line-height: 23px;
+
+      .content_detail {
+        width: 100%;
+      }
+
+      .centent_val {
+        width: 0;
+        color: #3afff8;
+      }
     }
   }
 }
diff --git a/src/views/sponeScreen/projectHM/ZhongheFenXi_component/typicalLandSiteShuJuQuShi.vue b/src/views/sponeScreen/projectHM/ZhongheFenXi_component/typicalLandSiteShuJuQuShi.vue
new file mode 100644
index 0000000..4cdb097
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/ZhongheFenXi_component/typicalLandSiteShuJuQuShi.vue
@@ -0,0 +1,308 @@
+<template>
+  <div class="shuJuQuShi flex" v-loading="echartLoading" element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0,0.4)">
+    <div class="echarts" ref="echarts" v-show="!isShow"></div>
+    <empty v-if="isShow" emptyText="暂未查到数据" :width="100" :height="100" style="margin-top: 50px"></empty>
+  </div>
+</template>
+<script setup>
+import { graphicReport } from '@/api/sponeScreen/syntherticData.js';
+
+const { proxy } = getCurrentInstance();
+const propsColor = proxy.fixDict['propsColorYs']; // 根据因子的单位来匹配
+const props = defineProps({
+  searchDate: Array,
+  typicalLandInfo: Object,
+});
+
+const echartLoading = ref(true);
+const isShow = ref(false);
+const myChart = shallowRef(null);
+const yAxisData = ref([]);
+// 获取列表数据
+function getPipelineEcharts() {
+  echartLoading.value = true;
+  let params = {
+    startTime: proxy.moment(props.searchDate[0]).format('YYYY-MM-DD'),
+    endTime: proxy.moment(props.searchDate[1]).format('YYYY-MM-DD'),
+    stCode: props.typicalLandInfo.stCode,
+  };
+  graphicReport(params).then(res => {
+    let { data } = res;
+    echartLoading.value = false;
+    //initEcharts(data.propertyMonitorXList, data.propertyMonitorList)
+    let targerts = ['小时水量', 'SS', '水位'];
+    let newPropertyMonitorList =
+      data['propertyMonitorList'] && data['propertyMonitorList'].filter(item => targerts.includes(item.monitorPropertyName));
+    data['propertyMonitorList'] = newPropertyMonitorList;
+    getRainData(data);
+  });
+}
+//根据关联的雨量站获取雨量站数据
+const getRainData = async val => {
+  let params = {
+    startTime: proxy.moment(props.searchDate[0]).format('YYYY-MM-DD'),
+    endTime: proxy.moment(props.searchDate[1]).format('YYYY-MM-DD'),
+    stCode: props.typicalLandInfo.referRainStCode,
+  };
+  let { data } = await graphicReport(params);
+  echartLoading.value = false;
+  let rainData = {};
+  if (data.propertyMonitorList.length) {
+    data.propertyMonitorList.forEach(item => {
+      if (item.monitorPropertyName.includes('5分钟时段降水量')) {
+        rainData = item;
+      }
+    });
+  }
+  isShow.value = data.propertyMonitorXList.length ? false : true;
+  if (val['propertyMonitorList'] && val['propertyMonitorList'].length) {
+    val.propertyMonitorList.unshift(rainData);
+  } else {
+    val['propertyMonitorList'] = [rainData];
+  }
+
+  initEcharts(data.propertyMonitorXList, val.propertyMonitorList);
+};
+const initEcharts = (timeList, propertyMonitorList) => {
+  if (!!myChart.value) {
+    myChart.value.dispose();
+  }
+  myChart.value = proxy.echarts.init(proxy.$refs.echarts);
+  const xAxisData = propertyMonitorList.map((item, index) => {
+    return {
+      type: index == 0 ? 'category' : '',
+      //x轴类目名称列表
+      data: timeList,
+      //x 轴所在的 grid 的索引，默认0表示位于第一个 grid
+      gridIndex: index,
+      axisLabel: {
+        color: '#2395FF',
+        fontSize: 14,
+        fontFamily: 'Source Han Sans CN',
+        // show: index == propertyMonitorList.length - 1 ? true : false,
+      },
+      axisLine: {
+        show: true,
+        onZero: false,
+        lineStyle: {
+          color: '#2395FF',
+          width: 1,
+          type: 'solid',
+        },
+        show: true,
+      },
+    };
+  });
+  yAxisData.value = propertyMonitorList.map((item, index) => {
+    const current = propsColor.find(it => it.label === item.propertyUnit);
+    var maxNum = Math.max(...item.ylist);
+    return {
+      type: 'value',
+      //展示网格线
+      splitLine: {
+        show: true,
+      },
+      inverse: item.monitorPropertyName.includes('5分钟时段降水量') ? true : false,
+      //y 轴所在的 grid 的索引，默认0表示位于第一个 grid
+      gridIndex: index,
+      name: `${item.monitorPropertyName}(${current.value})`,
+      nameLocation: item.monitorPropertyName.includes('5分钟时段降水量') ? 'start' : 'end',
+      nameGap: 10, //纵坐标名字与轴线之间的距离
+      nameTextStyle: {
+        fontFamily: 'Source Han Sans CN',
+        fontSize: '14px',
+        color: current.color,
+        align: 'left', // 设置文字左对齐
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dashed',
+          color: '#ffffff1c',
+        },
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: '#2395FF',
+        },
+      },
+      max: function (value) {
+        if (current.value == 'mm') {
+          return (Number(maxNum) * 1.1).toFixed(0);
+        }
+      },
+      axisLabel: {
+        // formatter: '{value} ',
+        color: '#47AFFE',
+        fontSize: 14,
+        fontFamily: 'Source Han Sans CN',
+        align: 'right', // 文字右对齐
+        formatter: function (value, index) {
+          if (value >= 10000 && value < 10000000) {
+            value = value / 10000 + '万';
+          } else if (value >= 10000000) {
+            value = value / 10000000 + '千万';
+          }
+          if (index % 2 === 0) {
+            return value;
+          } else {
+            return '';
+          }
+        },
+      },
+    };
+  });
+  const seriesData = propertyMonitorList.map((item, index) => {
+    const current = propsColor.find(it => it.label === item.propertyUnit);
+    if (current.value == 'mm') {
+      return {
+        type: 'bar',
+        name: `${item.monitorPropertyName}(${current.value})`,
+        data: item.ylist, //y轴类目数据
+        barWidth: '2px',
+        itemStyle: {
+          color: current.color,
+        },
+        xAxisIndex: index, //使用x轴的索引
+        yAxisIndex: index, //使用y轴的索引
+      };
+    } else {
+      return {
+        type: 'line',
+        name: `${item.monitorPropertyName}(${current.value})`,
+        data: item.ylist, //y轴类目数据
+        lineStyle: {
+          color: current.color, // 设置线的颜色为红色
+          width: 2,
+        },
+        xAxisIndex: index, //使用x轴的索引
+        yAxisIndex: index, //使用y轴的索引
+      };
+    }
+  });
+  const legendData = propertyMonitorList.map((item, index) => {
+    const current = propsColor.find(it => it.label === item.propertyUnit);
+    let topVal = 10 + 150 * index;
+    return {
+      data: [`${item.monitorPropertyName}(${current.value})`],
+      show: false,
+      color: current.color,
+      top: topVal,
+    };
+  });
+  const gridData = propertyMonitorList.map((item, index) => {
+    let topVal = 40 + 150 * index;
+    let bottomVal = 630 - 145 * (index + 1);
+    return {
+      top: topVal,
+      bottom: bottomVal,
+
+      left: 50,
+      right: 0,
+    };
+  });
+  const dataZoomXAxisIndex = propertyMonitorList.map((item, index) => {
+    return index;
+  });
+  const option = {
+    color: ['#23d0df4a'],
+    axisPointer: {
+      link: [
+        {
+          xAxisIndex: 'all',
+        },
+      ],
+    },
+    legend: legendData,
+    grid: gridData,
+    tooltip: {
+      trigger: 'axis',
+      show: true,
+      backgroundColor: 'rgba(18,56,104,0.9)', // 设置背景色为半透明的白色
+      borderColor: '#48ABFF', // 边框颜色
+      borderWidth: 1, // 边框宽度
+      borderRadius: 4, // 设置边框圆角
+      textStyle: {
+        // 设置字体颜色
+        color: '#F0F8FF',
+        fontFamily: 'Source Han Sans CN',
+        fontWeight: 500,
+        fontSize: '15px',
+        color: '#F0F8FF',
+      },
+      formatter: function (params, b, c) {
+        let dataArr = [];
+        let newDataArr = [];
+        let formatterStr = '';
+        params.map(function (item, index) {
+          dataArr[item.seriesIndex] = item;
+        });
+        dataArr.map(function (item, index) {
+          newDataArr.push({ seriesName: item.seriesName, name: item.name, value: item.value });
+        });
+        formatterStr += params[0].axisValue + '<br />';
+        newDataArr.map(function (item, index) {
+          formatterStr += item.seriesName + '：' + item.value + '<br />';
+        });
+        return formatterStr;
+      },
+    },
+    dataZoom: {
+      // 设置滚动条的隐藏与显示
+      show: true,
+      // 设置滚动条类型
+      type: 'inside',
+      // 设置背景颜色
+      backgroundColor: '#F1F1F1',
+      // 设置选中范围的填充颜色
+      fillerColor: '#C1C1C1',
+      // 设置边框颜色
+      borderColor: '#F1F1F1',
+      // 是否显示detail，即拖拽时候显示详细数值信息
+      showDetail: false,
+      // 数据窗口范围的起始数值
+      start: 0,
+      // 数据窗口范围的结束数值（一页显示多少条数据）
+      end: 100,
+      // empty：当前数据窗口外的数据，被设置为空。
+      // 即不会影响其他轴的数据范围
+      filterMode: 'empty',
+      // 设置滚动条宽度，相对于盒子宽度
+      width: '50%',
+      // 设置滚动条高度
+      height: 8,
+      // 设置滚动条显示位置
+      left: 'center',
+      // 是否锁定选择区域（或叫做数据窗口）的大小
+      zoomLoxk: true,
+      // 控制手柄的尺寸
+      handleSize: 0,
+      // dataZoom-slider组件离容器下侧的距离
+      bottom: 0,
+      xAxisIndex: dataZoomXAxisIndex,
+    },
+    xAxis: xAxisData,
+    yAxis: yAxisData.value,
+    series: seriesData,
+  };
+
+  myChart.value.setOption(option);
+};
+
+onMounted(() => {});
+defineExpose({
+  getPipelineEcharts,
+});
+</script>
+<style lang="scss" scoped>
+.shuJuQuShi {
+  width: 100%;
+  height: 630px;
+
+  .echarts {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/projectHM/typicalLandDiaLogDetail.vue b/src/views/sponeScreen/projectHM/typicalLandDiaLogDetail.vue
new file mode 100644
index 0000000..c93af49
--- /dev/null
+++ b/src/views/sponeScreen/projectHM/typicalLandDiaLogDetail.vue
@@ -0,0 +1,155 @@
+<template>
+  <div class="typicalLandDiaLogDetail">
+    <!-- 综合分析右侧列表 -->
+    <div class="ZhongheFenXi">
+      <!--海绵设施点位详情 -->
+      <div class="publicDetail">
+        <div class="part">
+          <div class="title">设计降雨量：</div>
+          <div class="content">{{ pointInf.sjjyl }}</div>
+        </div>
+        <div class="part">
+          <div class="title">年径流总量控制率目标值：</div>
+          <div class="content">{{ pointInf.jlzlkzlmb }}%</div>
+        </div>
+        <div class="part">
+          <div class="title">年径流污染削减率目标值：</div>
+          <div class="content">{{ pointInf.jlwrxjmb }}%</div>
+        </div>
+        <div class="part">
+          <div class="title">年径流总量控制率实际值：</div>
+          <div class="content">{{ pointInf.jlzlkzlsj }}%</div>
+        </div>
+        <div class="part">
+          <div class="title">年径流污染削减率实际值：</div>
+          <div class="content">{{ pointInf.jlwrxjsj }}%</div>
+        </div>
+        <div class="part">
+          <div class="title">安装时间：</div>
+          <div class="content">{{ pointInf.azTime }}%</div>
+        </div>
+        <div class="part">
+          <div class="title">联系人：</div>
+          <div class="content">王超</div>
+        </div>
+      </div>
+
+      <!-- 数据展示 -->
+      <div class="contAnaly">
+        <!-- 日期搜索 -->
+        <div class="search">
+          <el-form :model="search" :inline="true">
+            <el-form-item label="站点选择" prop="stCode">
+              <el-select
+                filterable
+                v-model="stationIndex"
+                :clearable="false"
+                placeholder="请选择"
+                @change="changeSite"
+                style="width: 220px"
+              >
+                <el-option v-for="item in equipArr" :key="item.index" :label="item.stName" :value="item.index" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="日期选择" prop="dateRange">
+              <el-date-picker v-model="search.dateRange" value-format="YYYY-MM-DD" type="daterange" :clearable="false"></el-date-picker>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="warning" @click="searchData">查询</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <!-- 数据趋势 -->
+        <typicalLandSiteShuJuQuShi :searchDate="search.dateRange" :typicalLandInfo="typicalLandInfo" ref="dataStatus">
+        </typicalLandSiteShuJuQuShi>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup name="rainDiaLogDetail">
+import typicalLandSiteShuJuQuShi from './ZhongheFenXi_component/typicalLandSiteShuJuQuShi.vue'; //数据趋势
+
+const props = defineProps({
+  pointInf: Object,
+  dateRain: String,
+});
+
+const { proxy } = getCurrentInstance();
+// 变量声明
+const typicalLandInfo = ref({});
+//搜索条件
+const search = ref({
+  dateRange: [],
+  monitorCodeList: [],
+});
+const dateRange = ref([]);
+const dataStatus = ref(null);
+const equipList = ref([
+  [
+    // 汴京路项目,和上一个页面保持对应关系
+    { stName: '汴京路与工农路交叉出口', stCode: '0371000044', referRainStCode: '0371000003', index: 0 },
+    { stName: '汴京路与劳动路交叉进口', stCode: '0371000038', referRainStCode: '0371000003', index: 1 },
+    { stName: '汴京路与公园路交叉出口', stCode: '0371000037', referRainStCode: '0371000003', index: 2 },
+    { stName: '汴京路与大花园街交叉口', stCode: '0371000037', referRainStCode: '0371000003', index: 3 },
+  ],
+  [
+    // 金明池项目
+    { stName: '金明池调蓄池进口', stCode: '0371000060', referRainStCode: '0371000001', index: 0 },
+    { stName: '金明池调蓄池出口', stCode: '0371000064', referRainStCode: '0371000001', index: 1 },
+    { stName: '金明广场雨水管网总出口', stCode: '0371000061', referRainStCode: '0371000001', index: 2 },
+  ],
+]);
+const stationIndex = ref(0);
+const equipArr = ref([]);
+
+// 切换站点
+function changeSite() {
+  typicalLandInfo.value = equipArr.value[stationIndex.value];
+}
+
+// 搜索数据
+function searchData() {
+  setTimeout(() => {
+    dataStatus.value.getPipelineEcharts();
+  });
+}
+
+// 初始化
+onMounted(() => {
+  let time = localStorage.getItem('setRainDateKF');
+  if (time) {
+    search.value.dateRange = [proxy.moment(time).format('YYYY-MM-DD'), proxy.moment(time).add(1, 'days').format('YYYY-MM-DD')];
+  } else {
+    search.value.dateRange = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')];
+  }
+  localStorage.setItem('searchDateRangeEquip', dateRange.value);
+  equipArr.value = equipList.value[props.pointInf.index];
+  typicalLandInfo.value = equipArr.value[stationIndex.value]; //传递站点详情
+  searchData(); //搜索数据
+});
+</script>
+<style lang="scss" scoped>
+.typicalLandDiaLogDetail {
+  .ZhongheFenXi {
+    width: 100%;
+    .publicDetail {
+      margin-bottom: 10px;
+      .part {
+        width: 30%;
+        .title {
+          font-size: 14px;
+        }
+        .content {
+          color: #3afff8;
+        }
+      }
+    }
+    .contAnaly {
+      border-radius: 6px;
+      padding: 0px 10px;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>