diff --git a/src/assets/styles/fxddMap.scss b/src/assets/styles/fxddMap.scss
index d631fce..60daf54 100644
--- a/src/assets/styles/fxddMap.scss
+++ b/src/assets/styles/fxddMap.scss
@@ -1,212 +1,228 @@
 // 弹窗
 #dialogContent {
   // background: linear-gradient(0deg, rgba(25, 96, 187, 0.9) 0%, rgba(41, 103, 173, 0.6) 100%) !important;
-  background: rgba(14,69,89,0.9) !important;
-  border: 1px solid #15D2FD;
+  background: rgba(14, 69, 89, 0.9) !important;
+  border: 1px solid #15d2fd;
   // box-shadow: 0px 0px 40px rgba(0, 21, 41, 0.35) !important;
   margin-top: 18vh !important;
   z-index: 999999999;
   border-radius: 2px;
 
-
   .el-dialog__header {
     background: url('@/assets/newImgs/partBg.png') no-repeat;
     width: 98%;
     // background-size: 100% 100%;
-      height: 40px;
-      margin-right: 0;
-      border-bottom: none !important;
-      display: flex;
-      align-items: center;
-      border-top-left-radius: 10px;
-      border-top-left-radius: 10px;
+    height: 40px;
+    margin-right: 0;
+    border-bottom: none !important;
+    display: flex;
+    align-items: center;
+    border-top-left-radius: 10px;
+    border-top-left-radius: 10px;
   }
 
   .el-dialog__footer {
-      border-top: none;
+    border-top: none;
   }
 
   .el-dialog__title {
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 17px;
-      color: #E0E5FA;
-      display: inline-block;
-      padding-left: 30px;
-      margin-bottom: 5px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 17px;
+    color: #e0e5fa;
+    display: inline-block;
+    padding-left: 30px;
+    margin-bottom: 5px;
   }
 
   .el-dialog__headerbtn {
-      top: -3px;
+    top: -3px;
 
-      .el-dialog__close {
-          color: #89DCFF !important;
-      }
+    .el-dialog__close {
+      color: #89dcff !important;
+    }
   }
 
-  .el-dialog__body {}
+  .el-dialog__body {
+  }
 
   .el-button--default {
-      // width: 110px;
-      height: 32px;
-      border-radius: 2px;
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 16px;
-      color: #FFFFFF;
-      line-height: 32px;
-      background: #0E4559FF;
-      border-radius: 6px;
-      border: 1px solid #0E4559FF;
-
+    // width: 110px;
+    height: 32px;
+    border-radius: 2px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #ffffff;
+    line-height: 32px;
+    background: #0e4559ff;
+    border-radius: 6px;
+    border: 1px solid #0e4559ff;
   }
 
   .el-button--primary {
-      background: #30A0E4 !important;
-      border: 1px solid #47AFFE;
-      border-radius: 8px;
+    background: #30a0e4 !important;
+    border: 1px solid #47affe;
+    border-radius: 8px;
 
-      .el-icon {
-          color: #FFFFFF !important;
-      }
+    .el-icon {
+      color: #ffffff !important;
+    }
   }
 
   .form {
-      .el-form-item {
-          position: relative;
-          margin-bottom: 30px;
+    .el-form-item {
+      position: relative;
+      margin-bottom: 30px;
 
-          &::after {
-              position: absolute;
-              left: 0;
-              right: 0;
-              bottom: -15px;
-              height: 1px;
-              content: '';
-              background: #347ee5;
-          }
-
-          &:last-child {
-              &::after {
-                  height: 0;
-              }
-          }
+      &::after {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -15px;
+        height: 1px;
+        content: '';
+        background: #347ee5;
       }
+
+      &:last-child {
+        &::after {
+          height: 0;
+        }
+      }
+    }
   }
 
   .el-form--inline .el-form-item {
-      margin-right: 8px !important;
+    margin-right: 8px !important;
   }
 
   .el-form-item__label {
     font-family: Source Han Sans CN;
-font-weight: 400;
-font-size: 16px;
-color: #FFFFFF;
+    font-weight: 400;
+    font-size: 16px;
+    color: #ffffff;
   }
 
   .el-tabs__nav-scroll {
-      .el-tabs__item {
-          font-size: 16px !important;
-          color: #ffffff;
-      }
+    .el-tabs__item {
+      font-size: 16px !important;
+      color: #ffffff;
+    }
 
-      .is-active {
-        color: #409eff !important;
-      }
+    .is-active {
+      color: #409eff !important;
+    }
 
-      &::after {
-          background-color: red;
-      }
-
+    &::after {
+      background-color: red;
+    }
   }
 
   .el-tag.el-tag--info {
-      background-color: transparent;
-      color: #9EC4FF;
+    background-color: transparent;
+    color: #9ec4ff;
   }
 
   .el-date-editor .el-range-input,
   .el-icon,
   .el-range-separator {
-      color: #D3F6FF !important;
-      font-size: 16px !important;
+    color: #d3f6ff !important;
+    font-size: 16px !important;
   }
 
-
-
   .el-textarea__inner {
-      background: #0E4559FF;
-      border-radius: 6px;
-      border: 1px solid #1CF5FCFF;
-      box-shadow: none !important;
-      color: #D3F6FF;
+    background: #0e4559ff;
+    border-radius: 6px;
+    border: 1px solid #1cf5fcff;
+    box-shadow: none !important;
+    color: #d3f6ff;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    font-size: 16px !important;
+
+    &::placeholder {
+      color: #d3f6ff;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 16px !important;
+    }
+  }
+
+  .el-input__wrapper {
+    box-shadow: none !important;
+    height: 35px !important;
+    background: #0e4559ff !important;
+    border-radius: 6px !important;
+    border: 1px solid #1cf5fcff !important;
+    font-size: 16px !important;
+
+    .el-input__prefix {
+      color: #d3f6ff;
+    }
+
+    .el-input__inner {
+      height: 35px !important;
+      color: #d3f6ff;
       font-family: Source Han Sans CN;
       font-weight: 500;
       font-size: 16px !important;
 
       &::placeholder {
-          color: #D3F6FF;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 16px !important;
+        color: #d3f6ff;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 16px !important;
       }
-  }
-
-  .el-input__wrapper {
-      box-shadow: none !important;
-      height: 35px !important;
-      background: #0E4559FF !important;
-      border-radius: 6px !important;
-      border: 1px solid #1CF5FCFF !important;
-      font-size: 16px !important;
-
-      .el-input__prefix {
-          color: #D3F6FF;
-      }
-
-      .el-input__inner {
-          height: 35px !important;
-          color: #D3F6FF;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 16px !important;
-
-          &::placeholder {
-              color: #D3F6FF;
-              font-family: Source Han Sans CN;
-              font-weight: 500;
-              font-size: 16px !important;
-          }
-      }
+    }
   }
 }
-   // 下拉
-   .picker.el-select {
-    width: 85px;
-    .el-input {
-        .el-input__wrapper {
-            // background: #061b3f;
-            box-shadow: none !important;
-            // border-radius: 4px;
-            height: 32px !important;
-            background: #00344FFF;
-            border-radius: 2px;
-            border: 1px solid #1CF5FCFF;
+// 下拉
+.picker.el-select {
+  .el-input {
+    .el-input__wrapper {
+      // background: #061b3f;
+      box-shadow: none !important;
+      // border-radius: 4px;
+      // height: 32px !important;
+      background: #00344fff;
+      border-radius: 2px;
+      border: 1px solid #1cf5fcff;
 
-            .el-input__inner {
-                height: 32px !important;
-                color: #fff !important;
-                font-family: Source Han Sans CN;
-                font-weight: 500;
+      .el-input__inner {
+        // height: 32px !important;
+        color: #fff !important;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
 
-                &::placeholder {
-                    color: #fff !important;
-                    font-family: Source Han Sans CN;
-                    font-weight: 500;
-                }
-            }
+        &::placeholder {
+          color: #fff !important;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
         }
+      }
     }
+  }
+}
+.datePicker {
+  .el-input {
+    .el-input__wrapper {
+      box-shadow: none !important;
+      background: #00344fff;
+      border-radius: 2px;
+      border: 1px solid #1cf5fcff;
 
+      .el-input__inner {
+        color: #fff !important;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+
+        &::placeholder {
+          color: #fff !important;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+        }
+      }
+    }
+  }
 }

diff --git a/src/assets/styles/fxddMap.scss b/src/assets/styles/fxddMap.scss
index d631fce..60daf54 100644
--- a/src/assets/styles/fxddMap.scss
+++ b/src/assets/styles/fxddMap.scss
@@ -1,212 +1,228 @@
 // 弹窗
 #dialogContent {
   // background: linear-gradient(0deg, rgba(25, 96, 187, 0.9) 0%, rgba(41, 103, 173, 0.6) 100%) !important;
-  background: rgba(14,69,89,0.9) !important;
-  border: 1px solid #15D2FD;
+  background: rgba(14, 69, 89, 0.9) !important;
+  border: 1px solid #15d2fd;
   // box-shadow: 0px 0px 40px rgba(0, 21, 41, 0.35) !important;
   margin-top: 18vh !important;
   z-index: 999999999;
   border-radius: 2px;
 
-
   .el-dialog__header {
     background: url('@/assets/newImgs/partBg.png') no-repeat;
     width: 98%;
     // background-size: 100% 100%;
-      height: 40px;
-      margin-right: 0;
-      border-bottom: none !important;
-      display: flex;
-      align-items: center;
-      border-top-left-radius: 10px;
-      border-top-left-radius: 10px;
+    height: 40px;
+    margin-right: 0;
+    border-bottom: none !important;
+    display: flex;
+    align-items: center;
+    border-top-left-radius: 10px;
+    border-top-left-radius: 10px;
   }
 
   .el-dialog__footer {
-      border-top: none;
+    border-top: none;
   }
 
   .el-dialog__title {
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 17px;
-      color: #E0E5FA;
-      display: inline-block;
-      padding-left: 30px;
-      margin-bottom: 5px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 17px;
+    color: #e0e5fa;
+    display: inline-block;
+    padding-left: 30px;
+    margin-bottom: 5px;
   }
 
   .el-dialog__headerbtn {
-      top: -3px;
+    top: -3px;
 
-      .el-dialog__close {
-          color: #89DCFF !important;
-      }
+    .el-dialog__close {
+      color: #89dcff !important;
+    }
   }
 
-  .el-dialog__body {}
+  .el-dialog__body {
+  }
 
   .el-button--default {
-      // width: 110px;
-      height: 32px;
-      border-radius: 2px;
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 16px;
-      color: #FFFFFF;
-      line-height: 32px;
-      background: #0E4559FF;
-      border-radius: 6px;
-      border: 1px solid #0E4559FF;
-
+    // width: 110px;
+    height: 32px;
+    border-radius: 2px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #ffffff;
+    line-height: 32px;
+    background: #0e4559ff;
+    border-radius: 6px;
+    border: 1px solid #0e4559ff;
   }
 
   .el-button--primary {
-      background: #30A0E4 !important;
-      border: 1px solid #47AFFE;
-      border-radius: 8px;
+    background: #30a0e4 !important;
+    border: 1px solid #47affe;
+    border-radius: 8px;
 
-      .el-icon {
-          color: #FFFFFF !important;
-      }
+    .el-icon {
+      color: #ffffff !important;
+    }
   }
 
   .form {
-      .el-form-item {
-          position: relative;
-          margin-bottom: 30px;
+    .el-form-item {
+      position: relative;
+      margin-bottom: 30px;
 
-          &::after {
-              position: absolute;
-              left: 0;
-              right: 0;
-              bottom: -15px;
-              height: 1px;
-              content: '';
-              background: #347ee5;
-          }
-
-          &:last-child {
-              &::after {
-                  height: 0;
-              }
-          }
+      &::after {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -15px;
+        height: 1px;
+        content: '';
+        background: #347ee5;
       }
+
+      &:last-child {
+        &::after {
+          height: 0;
+        }
+      }
+    }
   }
 
   .el-form--inline .el-form-item {
-      margin-right: 8px !important;
+    margin-right: 8px !important;
   }
 
   .el-form-item__label {
     font-family: Source Han Sans CN;
-font-weight: 400;
-font-size: 16px;
-color: #FFFFFF;
+    font-weight: 400;
+    font-size: 16px;
+    color: #ffffff;
   }
 
   .el-tabs__nav-scroll {
-      .el-tabs__item {
-          font-size: 16px !important;
-          color: #ffffff;
-      }
+    .el-tabs__item {
+      font-size: 16px !important;
+      color: #ffffff;
+    }
 
-      .is-active {
-        color: #409eff !important;
-      }
+    .is-active {
+      color: #409eff !important;
+    }
 
-      &::after {
-          background-color: red;
-      }
-
+    &::after {
+      background-color: red;
+    }
   }
 
   .el-tag.el-tag--info {
-      background-color: transparent;
-      color: #9EC4FF;
+    background-color: transparent;
+    color: #9ec4ff;
   }
 
   .el-date-editor .el-range-input,
   .el-icon,
   .el-range-separator {
-      color: #D3F6FF !important;
-      font-size: 16px !important;
+    color: #d3f6ff !important;
+    font-size: 16px !important;
   }
 
-
-
   .el-textarea__inner {
-      background: #0E4559FF;
-      border-radius: 6px;
-      border: 1px solid #1CF5FCFF;
-      box-shadow: none !important;
-      color: #D3F6FF;
+    background: #0e4559ff;
+    border-radius: 6px;
+    border: 1px solid #1cf5fcff;
+    box-shadow: none !important;
+    color: #d3f6ff;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    font-size: 16px !important;
+
+    &::placeholder {
+      color: #d3f6ff;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 16px !important;
+    }
+  }
+
+  .el-input__wrapper {
+    box-shadow: none !important;
+    height: 35px !important;
+    background: #0e4559ff !important;
+    border-radius: 6px !important;
+    border: 1px solid #1cf5fcff !important;
+    font-size: 16px !important;
+
+    .el-input__prefix {
+      color: #d3f6ff;
+    }
+
+    .el-input__inner {
+      height: 35px !important;
+      color: #d3f6ff;
       font-family: Source Han Sans CN;
       font-weight: 500;
       font-size: 16px !important;
 
       &::placeholder {
-          color: #D3F6FF;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 16px !important;
+        color: #d3f6ff;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 16px !important;
       }
-  }
-
-  .el-input__wrapper {
-      box-shadow: none !important;
-      height: 35px !important;
-      background: #0E4559FF !important;
-      border-radius: 6px !important;
-      border: 1px solid #1CF5FCFF !important;
-      font-size: 16px !important;
-
-      .el-input__prefix {
-          color: #D3F6FF;
-      }
-
-      .el-input__inner {
-          height: 35px !important;
-          color: #D3F6FF;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 16px !important;
-
-          &::placeholder {
-              color: #D3F6FF;
-              font-family: Source Han Sans CN;
-              font-weight: 500;
-              font-size: 16px !important;
-          }
-      }
+    }
   }
 }
-   // 下拉
-   .picker.el-select {
-    width: 85px;
-    .el-input {
-        .el-input__wrapper {
-            // background: #061b3f;
-            box-shadow: none !important;
-            // border-radius: 4px;
-            height: 32px !important;
-            background: #00344FFF;
-            border-radius: 2px;
-            border: 1px solid #1CF5FCFF;
+// 下拉
+.picker.el-select {
+  .el-input {
+    .el-input__wrapper {
+      // background: #061b3f;
+      box-shadow: none !important;
+      // border-radius: 4px;
+      // height: 32px !important;
+      background: #00344fff;
+      border-radius: 2px;
+      border: 1px solid #1cf5fcff;
 
-            .el-input__inner {
-                height: 32px !important;
-                color: #fff !important;
-                font-family: Source Han Sans CN;
-                font-weight: 500;
+      .el-input__inner {
+        // height: 32px !important;
+        color: #fff !important;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
 
-                &::placeholder {
-                    color: #fff !important;
-                    font-family: Source Han Sans CN;
-                    font-weight: 500;
-                }
-            }
+        &::placeholder {
+          color: #fff !important;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
         }
+      }
     }
+  }
+}
+.datePicker {
+  .el-input {
+    .el-input__wrapper {
+      box-shadow: none !important;
+      background: #00344fff;
+      border-radius: 2px;
+      border: 1px solid #1cf5fcff;
 
+      .el-input__inner {
+        color: #fff !important;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+
+        &::placeholder {
+          color: #fff !important;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+        }
+      }
+    }
+  }
 }
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index 2889e27..fda3f3c 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -1,25 +1,55 @@
 <template>
   <div id="ZHHM_JCFX">
-    <div
-      :class="[
-        'LeftBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
-      ]"
-    ></div>
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    ></div>
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+      <div class="ComBox">
+        <!-- 降雨日历统计 -->
+        <div class="Box_header">降雨日历统计</div>
+        <div class="rainCal">
+          <monitorCalender :hasClose="false" @change="getChangeDate" />
+        </div>
+
+        <!-- 内涝积水分析 -->
+        <div class="Box_header">内涝积水分析</div>
+        
+      </div>
+    </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <div class="ComBox">
+        <!-- 典型项目分析 -->
+        <div class="Box_header">典型项目分析</div>
+
+        <!-- 关键管网分析 -->
+        <div class="Box_header">关键管网分析</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup name="ZHHM_JCFX">
-import { ref, reactive, toRefs, onMounted } from "vue";
-const AllData = reactive({});
+import { ref, reactive, toRefs, onMounted, defineProps, defineEmits } from 'vue';
+import monitorCalender from './monitorCalender.vue';
+
+const showPanel = ref(true); //面板展开收起
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
+
+// 日历点击获取相应日期
+const getChangeDate = date => {
+  console.log(date);
+};
+
 onMounted(() => {});
 </script>
 
@@ -33,11 +63,7 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -50,16 +76,29 @@
     position: absolute;
     right: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
     padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
   }
+  .ComBox {
+    width: 100%;
+    box-sizing: border-box;
+    .Box_header {
+      width: 100%;
+      height: 43px;
+      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
+      background-size: cover;
+      font-family: PangMenZhengDao;
+      font-weight: 400;
+      font-size: 23px;
+      color: #ebfeff;
+      line-height: 43px;
+      box-sizing: border-box;
+      padding-left: 35px;
+    }
+  }
 }
 </style>

diff --git a/src/assets/styles/fxddMap.scss b/src/assets/styles/fxddMap.scss
index d631fce..60daf54 100644
--- a/src/assets/styles/fxddMap.scss
+++ b/src/assets/styles/fxddMap.scss
@@ -1,212 +1,228 @@
 // 弹窗
 #dialogContent {
   // background: linear-gradient(0deg, rgba(25, 96, 187, 0.9) 0%, rgba(41, 103, 173, 0.6) 100%) !important;
-  background: rgba(14,69,89,0.9) !important;
-  border: 1px solid #15D2FD;
+  background: rgba(14, 69, 89, 0.9) !important;
+  border: 1px solid #15d2fd;
   // box-shadow: 0px 0px 40px rgba(0, 21, 41, 0.35) !important;
   margin-top: 18vh !important;
   z-index: 999999999;
   border-radius: 2px;
 
-
   .el-dialog__header {
     background: url('@/assets/newImgs/partBg.png') no-repeat;
     width: 98%;
     // background-size: 100% 100%;
-      height: 40px;
-      margin-right: 0;
-      border-bottom: none !important;
-      display: flex;
-      align-items: center;
-      border-top-left-radius: 10px;
-      border-top-left-radius: 10px;
+    height: 40px;
+    margin-right: 0;
+    border-bottom: none !important;
+    display: flex;
+    align-items: center;
+    border-top-left-radius: 10px;
+    border-top-left-radius: 10px;
   }
 
   .el-dialog__footer {
-      border-top: none;
+    border-top: none;
   }
 
   .el-dialog__title {
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 17px;
-      color: #E0E5FA;
-      display: inline-block;
-      padding-left: 30px;
-      margin-bottom: 5px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 17px;
+    color: #e0e5fa;
+    display: inline-block;
+    padding-left: 30px;
+    margin-bottom: 5px;
   }
 
   .el-dialog__headerbtn {
-      top: -3px;
+    top: -3px;
 
-      .el-dialog__close {
-          color: #89DCFF !important;
-      }
+    .el-dialog__close {
+      color: #89dcff !important;
+    }
   }
 
-  .el-dialog__body {}
+  .el-dialog__body {
+  }
 
   .el-button--default {
-      // width: 110px;
-      height: 32px;
-      border-radius: 2px;
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 16px;
-      color: #FFFFFF;
-      line-height: 32px;
-      background: #0E4559FF;
-      border-radius: 6px;
-      border: 1px solid #0E4559FF;
-
+    // width: 110px;
+    height: 32px;
+    border-radius: 2px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #ffffff;
+    line-height: 32px;
+    background: #0e4559ff;
+    border-radius: 6px;
+    border: 1px solid #0e4559ff;
   }
 
   .el-button--primary {
-      background: #30A0E4 !important;
-      border: 1px solid #47AFFE;
-      border-radius: 8px;
+    background: #30a0e4 !important;
+    border: 1px solid #47affe;
+    border-radius: 8px;
 
-      .el-icon {
-          color: #FFFFFF !important;
-      }
+    .el-icon {
+      color: #ffffff !important;
+    }
   }
 
   .form {
-      .el-form-item {
-          position: relative;
-          margin-bottom: 30px;
+    .el-form-item {
+      position: relative;
+      margin-bottom: 30px;
 
-          &::after {
-              position: absolute;
-              left: 0;
-              right: 0;
-              bottom: -15px;
-              height: 1px;
-              content: '';
-              background: #347ee5;
-          }
-
-          &:last-child {
-              &::after {
-                  height: 0;
-              }
-          }
+      &::after {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -15px;
+        height: 1px;
+        content: '';
+        background: #347ee5;
       }
+
+      &:last-child {
+        &::after {
+          height: 0;
+        }
+      }
+    }
   }
 
   .el-form--inline .el-form-item {
-      margin-right: 8px !important;
+    margin-right: 8px !important;
   }
 
   .el-form-item__label {
     font-family: Source Han Sans CN;
-font-weight: 400;
-font-size: 16px;
-color: #FFFFFF;
+    font-weight: 400;
+    font-size: 16px;
+    color: #ffffff;
   }
 
   .el-tabs__nav-scroll {
-      .el-tabs__item {
-          font-size: 16px !important;
-          color: #ffffff;
-      }
+    .el-tabs__item {
+      font-size: 16px !important;
+      color: #ffffff;
+    }
 
-      .is-active {
-        color: #409eff !important;
-      }
+    .is-active {
+      color: #409eff !important;
+    }
 
-      &::after {
-          background-color: red;
-      }
-
+    &::after {
+      background-color: red;
+    }
   }
 
   .el-tag.el-tag--info {
-      background-color: transparent;
-      color: #9EC4FF;
+    background-color: transparent;
+    color: #9ec4ff;
   }
 
   .el-date-editor .el-range-input,
   .el-icon,
   .el-range-separator {
-      color: #D3F6FF !important;
-      font-size: 16px !important;
+    color: #d3f6ff !important;
+    font-size: 16px !important;
   }
 
-
-
   .el-textarea__inner {
-      background: #0E4559FF;
-      border-radius: 6px;
-      border: 1px solid #1CF5FCFF;
-      box-shadow: none !important;
-      color: #D3F6FF;
+    background: #0e4559ff;
+    border-radius: 6px;
+    border: 1px solid #1cf5fcff;
+    box-shadow: none !important;
+    color: #d3f6ff;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    font-size: 16px !important;
+
+    &::placeholder {
+      color: #d3f6ff;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 16px !important;
+    }
+  }
+
+  .el-input__wrapper {
+    box-shadow: none !important;
+    height: 35px !important;
+    background: #0e4559ff !important;
+    border-radius: 6px !important;
+    border: 1px solid #1cf5fcff !important;
+    font-size: 16px !important;
+
+    .el-input__prefix {
+      color: #d3f6ff;
+    }
+
+    .el-input__inner {
+      height: 35px !important;
+      color: #d3f6ff;
       font-family: Source Han Sans CN;
       font-weight: 500;
       font-size: 16px !important;
 
       &::placeholder {
-          color: #D3F6FF;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 16px !important;
+        color: #d3f6ff;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 16px !important;
       }
-  }
-
-  .el-input__wrapper {
-      box-shadow: none !important;
-      height: 35px !important;
-      background: #0E4559FF !important;
-      border-radius: 6px !important;
-      border: 1px solid #1CF5FCFF !important;
-      font-size: 16px !important;
-
-      .el-input__prefix {
-          color: #D3F6FF;
-      }
-
-      .el-input__inner {
-          height: 35px !important;
-          color: #D3F6FF;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 16px !important;
-
-          &::placeholder {
-              color: #D3F6FF;
-              font-family: Source Han Sans CN;
-              font-weight: 500;
-              font-size: 16px !important;
-          }
-      }
+    }
   }
 }
-   // 下拉
-   .picker.el-select {
-    width: 85px;
-    .el-input {
-        .el-input__wrapper {
-            // background: #061b3f;
-            box-shadow: none !important;
-            // border-radius: 4px;
-            height: 32px !important;
-            background: #00344FFF;
-            border-radius: 2px;
-            border: 1px solid #1CF5FCFF;
+// 下拉
+.picker.el-select {
+  .el-input {
+    .el-input__wrapper {
+      // background: #061b3f;
+      box-shadow: none !important;
+      // border-radius: 4px;
+      // height: 32px !important;
+      background: #00344fff;
+      border-radius: 2px;
+      border: 1px solid #1cf5fcff;
 
-            .el-input__inner {
-                height: 32px !important;
-                color: #fff !important;
-                font-family: Source Han Sans CN;
-                font-weight: 500;
+      .el-input__inner {
+        // height: 32px !important;
+        color: #fff !important;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
 
-                &::placeholder {
-                    color: #fff !important;
-                    font-family: Source Han Sans CN;
-                    font-weight: 500;
-                }
-            }
+        &::placeholder {
+          color: #fff !important;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
         }
+      }
     }
+  }
+}
+.datePicker {
+  .el-input {
+    .el-input__wrapper {
+      box-shadow: none !important;
+      background: #00344fff;
+      border-radius: 2px;
+      border: 1px solid #1cf5fcff;
 
+      .el-input__inner {
+        color: #fff !important;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+
+        &::placeholder {
+          color: #fff !important;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+        }
+      }
+    }
+  }
 }
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index 2889e27..fda3f3c 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -1,25 +1,55 @@
 <template>
   <div id="ZHHM_JCFX">
-    <div
-      :class="[
-        'LeftBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
-      ]"
-    ></div>
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    ></div>
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+      <div class="ComBox">
+        <!-- 降雨日历统计 -->
+        <div class="Box_header">降雨日历统计</div>
+        <div class="rainCal">
+          <monitorCalender :hasClose="false" @change="getChangeDate" />
+        </div>
+
+        <!-- 内涝积水分析 -->
+        <div class="Box_header">内涝积水分析</div>
+        
+      </div>
+    </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <div class="ComBox">
+        <!-- 典型项目分析 -->
+        <div class="Box_header">典型项目分析</div>
+
+        <!-- 关键管网分析 -->
+        <div class="Box_header">关键管网分析</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup name="ZHHM_JCFX">
-import { ref, reactive, toRefs, onMounted } from "vue";
-const AllData = reactive({});
+import { ref, reactive, toRefs, onMounted, defineProps, defineEmits } from 'vue';
+import monitorCalender from './monitorCalender.vue';
+
+const showPanel = ref(true); //面板展开收起
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
+
+// 日历点击获取相应日期
+const getChangeDate = date => {
+  console.log(date);
+};
+
 onMounted(() => {});
 </script>
 
@@ -33,11 +63,7 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -50,16 +76,29 @@
     position: absolute;
     right: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
     padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
   }
+  .ComBox {
+    width: 100%;
+    box-sizing: border-box;
+    .Box_header {
+      width: 100%;
+      height: 43px;
+      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
+      background-size: cover;
+      font-family: PangMenZhengDao;
+      font-weight: 400;
+      font-size: 23px;
+      color: #ebfeff;
+      line-height: 43px;
+      box-sizing: border-box;
+      padding-left: 35px;
+    }
+  }
 }
 </style>
diff --git a/src/views/oneMap/components/monitorCalender.vue b/src/views/oneMap/components/monitorCalender.vue
new file mode 100644
index 0000000..bc518af
--- /dev/null
+++ b/src/views/oneMap/components/monitorCalender.vue
@@ -0,0 +1,311 @@
+<template>
+  <!-- 海绵监测分析--降雨日历统计 -->
+  <div class="monitorCalender">
+    <div class="selectTitleHM">
+      <div class="flex select_box">
+        <!-- 日期类型选择 -->
+        <div class="typeDate flex">
+          <p :class="['partD', dateIndex == 'day' ? 'active' : '']" @click="changeDate('day')">日</p>
+          <p :class="['partD', dateIndex == 'month' ? 'active' : '']" @click="changeDate('month')">月</p>
+          <p :class="['partD', dateIndex == 'year' ? 'active' : '']" @click="changeDate('year')">年</p>
+        </div>
+        <!-- 日历 -->
+        <el-date-picker
+          format="YYYY-MM"
+          :type="dateIndex == 'day' ? 'date' : dateIndex == 'month' ? 'month' : dateIndex == 'year' ? 'year' : ''"
+          :value-format="dateIndex == 'day' ? 'YYYY-MM-DD' : dateIndex == 'month' ? 'YYYY-MM' : dateIndex == 'year' ? 'YYYY' : ''"
+          v-model="datevalue"
+          placeholder="选择日期"
+          style="width: 140px; margin: 10px 10px"
+          @change="timeChange"
+          class="datePicker"
+          popper-class="haiMianScreenPopper"
+          size="small"
+        />
+        <!-- 雨量站选择 -->
+        <el-select
+          clearable
+          filterable
+          v-model="rainStation"
+          placeholder="请选择雨量站"
+          style="margin-top: 10px"
+          size="small"
+          class="picker"
+        >
+          <el-option v-for="dict in rainList" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </div>
+    </div>
+
+    <!-- 日 -->
+    <el-calendar class="elCalendar" v-model="datevalueNew" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.6)">
+      <template #date-cell="{ data }">
+        <div
+          class="flex flex-v data-day"
+          :class="[{ active: data.day === selectVal }]"
+          @click="changepeople(data.day)"
+          style="position: relative"
+        >
+          <div class="date_box">{{ moment(data.day).format('DD') }}</div>
+          <div class="datadiv flex" style="color: #ffeb3b">
+            {{
+              scheduleData[moment(data.day).format('YYYY-MM-DD')] == 0.0
+                ? ''
+                : scheduleData[moment(data.day).format('YYYY-MM-DD')]
+                ? scheduleData[moment(data.day).format('YYYY-MM-DD')] + 'mm'
+                : ''
+            }}
+          </div>
+        </div>
+      </template>
+    </el-calendar>
+  </div>
+</template>
+
+<script setup>
+// import { rainTimeDay } from '@/api/zongHeDD.js';
+const props = defineProps({
+  defaultDate: {
+    type: String,
+    default: '',
+  },
+  hasClose: {
+    type: Boolean,
+    default: false,
+  },
+});
+const dateIndex = ref('month');
+const { proxy } = getCurrentInstance();
+const curDate = props.defaultDate ? proxy.moment(props.defaultDate).format('YYYY-MM') : proxy.moment().format('YYYY-MM');
+const curDateNew = props.defaultDate ? new Date(props.defaultDate) : new Date();
+const datevalue = ref(curDate);
+const datevalueNew = ref(curDateNew);
+const emits = defineEmits(['change', 'close']);
+const selectVal = ref(props.defaultDate);
+const scheduleData = ref({});
+const loading = ref(false);
+const rainStation = ref('1');
+const rainList = ref([
+  { value: '1', label: '雨量站1' },
+  { value: '2', label: '雨量站2' },
+]);
+
+function timeChange(val) {
+  datevalueNew.value = new Date(val);
+  getRainTimeDayData();
+}
+
+//获取降雨日历数据
+const getRainTimeDayData = () => {
+  // let data = {
+  //   fromTime: proxy.moment(datevalue.value).startOf('month').format('YYYY-MM-DD'),
+  //   toTime: proxy.moment(datevalue.value).endOf('month').format('YYYY-MM-DD'),
+  // };
+  // loading.value = true;
+  // rainTimeDay(data)
+  //   .then(res => {
+  //     res.data &&
+  //       res.data.forEach(item => {
+  //         scheduleData.value[item.rainTime] = item.rainCumulative;
+  //       });
+  //   })
+  //   .finally(() => {
+  //     loading.value = false;
+  //   });
+};
+// 降雨日历点击事件
+const changepeople = val => {
+  selectVal.value = val;
+  emits('change', val);
+};
+
+const close = () => {
+  emits('close');
+};
+
+function changeDate(val) {
+  dateIndex.value = val;
+  let valueFormat =
+    dateIndex.value == 'day' ? 'YYYY-MM-DD' : dateIndex.value == 'month' ? 'YYYY-MM' : dateIndex.value == 'year' ? 'YYYY' : '';
+  datevalue.value = proxy.moment().format(valueFormat);
+}
+
+onMounted(() => {
+  getRainTimeDayData();
+});
+</script>
+
+<style lang="scss" scoped>
+.monitorCalender {
+  .selectTitleHM {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    background-size: 100% 100%;
+    padding: 0 10px;
+
+    .name {
+      font-family: YouSheBiaoTiHei;
+      font-weight: bold;
+      font-size: 17px;
+      line-height: normal;
+      letter-spacing: 2px;
+      color: #e0e5fa;
+      padding-left: 10px;
+    }
+
+    .select_box {
+      margin-bottom: 0;
+    }
+    .typeDate {
+      color: #fff;
+      .partD {
+        width: 50px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        cursor: pointer;
+        background: #00344f;
+        border-radius: 2px;
+        margin-right: 5px;
+      }
+      .active {
+        background: #002d44;
+        border-radius: 2px;
+        border: 1px solid #1cf5fc;
+      }
+    }
+
+    .closeBtn {
+      margin-left: 10px;
+      margin-top: 5px;
+      cursor: pointer;
+      .el-icon {
+        color: rgb(0, 238, 255);
+      }
+    }
+  }
+
+  .calendar-day {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 50%;
+    color: #fff;
+
+    &.active {
+      background-color: #21adda;
+    }
+  }
+
+  .datadiv {
+    font-size: 10px;
+    height: 20px;
+  }
+}
+
+:deep(.elCalendar) {
+  border: none !important;
+  background-color: #043864;
+
+  .is-today {
+    width: 30px !important;
+    height: 30px !important;
+    // background-color: #1EFFFF !important;
+    border-radius: 15px;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  .el-calendar-table tr:first-child td,
+  .el-calendar-table td,
+  .el-calendar-table tr td:first-child {
+    border: none;
+  }
+
+  .el-calendar-table {
+    padding: 2px;
+  }
+
+  //取消日历选中背景颜色
+  .el-calendar-table td.is-selected {
+    background-color: inherit;
+  }
+
+  .el-calendar-table thead th {
+    color: #c6c6c6;
+    font-size: 16px;
+  }
+
+  .el-calendar__header {
+    display: none;
+  }
+
+  .el-calendar-day {
+    margin: 0 auto;
+    width: 100%;
+    height: 40px !important;
+    line-height: 40px !important;
+    border: none;
+    text-align: center;
+    padding: 0px !important;
+    background: #003b6d;
+    font-size: 12px;
+    border-radius: 50%;
+    .data-day {
+      width: 46%;
+      height: 80%;
+      position: relative;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      &.active {
+        background-color: #1effff;
+        color: #042e77;
+        .datadiv {
+          bottom: -20px;
+        }
+      }
+    }
+    .date_box {
+      width: 100%;
+      font-size: 15px;
+      margin-top: -5px;
+      color: #a8abb2 !important;
+    }
+
+    .datadiv {
+      width: 100%;
+      position: absolute;
+      bottom: -10px;
+      font-size: 12px;
+    }
+  }
+
+  .is-today {
+    .data-day {
+      background-color: #047af3;
+      color: #fff;
+    }
+  }
+
+  .el-calendar__body {
+    padding: 0 0 10px 0 !important;
+    background: #003b6d;
+  }
+
+  /* 日历单元格鼠标经过背景色 */
+  .el-calendar-table .el-calendar-day:hover {
+    background-color: transparent !important;
+  }
+
+  .el-calendar-table:not(.is-range) td.next {
+    .calendar-day {
+      color: #a8abb2 !important;
+    }
+  }
+}
+</style>

diff --git a/src/assets/styles/fxddMap.scss b/src/assets/styles/fxddMap.scss
index d631fce..60daf54 100644
--- a/src/assets/styles/fxddMap.scss
+++ b/src/assets/styles/fxddMap.scss
@@ -1,212 +1,228 @@
 // 弹窗
 #dialogContent {
   // background: linear-gradient(0deg, rgba(25, 96, 187, 0.9) 0%, rgba(41, 103, 173, 0.6) 100%) !important;
-  background: rgba(14,69,89,0.9) !important;
-  border: 1px solid #15D2FD;
+  background: rgba(14, 69, 89, 0.9) !important;
+  border: 1px solid #15d2fd;
   // box-shadow: 0px 0px 40px rgba(0, 21, 41, 0.35) !important;
   margin-top: 18vh !important;
   z-index: 999999999;
   border-radius: 2px;
 
-
   .el-dialog__header {
     background: url('@/assets/newImgs/partBg.png') no-repeat;
     width: 98%;
     // background-size: 100% 100%;
-      height: 40px;
-      margin-right: 0;
-      border-bottom: none !important;
-      display: flex;
-      align-items: center;
-      border-top-left-radius: 10px;
-      border-top-left-radius: 10px;
+    height: 40px;
+    margin-right: 0;
+    border-bottom: none !important;
+    display: flex;
+    align-items: center;
+    border-top-left-radius: 10px;
+    border-top-left-radius: 10px;
   }
 
   .el-dialog__footer {
-      border-top: none;
+    border-top: none;
   }
 
   .el-dialog__title {
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 17px;
-      color: #E0E5FA;
-      display: inline-block;
-      padding-left: 30px;
-      margin-bottom: 5px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 17px;
+    color: #e0e5fa;
+    display: inline-block;
+    padding-left: 30px;
+    margin-bottom: 5px;
   }
 
   .el-dialog__headerbtn {
-      top: -3px;
+    top: -3px;
 
-      .el-dialog__close {
-          color: #89DCFF !important;
-      }
+    .el-dialog__close {
+      color: #89dcff !important;
+    }
   }
 
-  .el-dialog__body {}
+  .el-dialog__body {
+  }
 
   .el-button--default {
-      // width: 110px;
-      height: 32px;
-      border-radius: 2px;
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 16px;
-      color: #FFFFFF;
-      line-height: 32px;
-      background: #0E4559FF;
-      border-radius: 6px;
-      border: 1px solid #0E4559FF;
-
+    // width: 110px;
+    height: 32px;
+    border-radius: 2px;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    font-size: 16px;
+    color: #ffffff;
+    line-height: 32px;
+    background: #0e4559ff;
+    border-radius: 6px;
+    border: 1px solid #0e4559ff;
   }
 
   .el-button--primary {
-      background: #30A0E4 !important;
-      border: 1px solid #47AFFE;
-      border-radius: 8px;
+    background: #30a0e4 !important;
+    border: 1px solid #47affe;
+    border-radius: 8px;
 
-      .el-icon {
-          color: #FFFFFF !important;
-      }
+    .el-icon {
+      color: #ffffff !important;
+    }
   }
 
   .form {
-      .el-form-item {
-          position: relative;
-          margin-bottom: 30px;
+    .el-form-item {
+      position: relative;
+      margin-bottom: 30px;
 
-          &::after {
-              position: absolute;
-              left: 0;
-              right: 0;
-              bottom: -15px;
-              height: 1px;
-              content: '';
-              background: #347ee5;
-          }
-
-          &:last-child {
-              &::after {
-                  height: 0;
-              }
-          }
+      &::after {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -15px;
+        height: 1px;
+        content: '';
+        background: #347ee5;
       }
+
+      &:last-child {
+        &::after {
+          height: 0;
+        }
+      }
+    }
   }
 
   .el-form--inline .el-form-item {
-      margin-right: 8px !important;
+    margin-right: 8px !important;
   }
 
   .el-form-item__label {
     font-family: Source Han Sans CN;
-font-weight: 400;
-font-size: 16px;
-color: #FFFFFF;
+    font-weight: 400;
+    font-size: 16px;
+    color: #ffffff;
   }
 
   .el-tabs__nav-scroll {
-      .el-tabs__item {
-          font-size: 16px !important;
-          color: #ffffff;
-      }
+    .el-tabs__item {
+      font-size: 16px !important;
+      color: #ffffff;
+    }
 
-      .is-active {
-        color: #409eff !important;
-      }
+    .is-active {
+      color: #409eff !important;
+    }
 
-      &::after {
-          background-color: red;
-      }
-
+    &::after {
+      background-color: red;
+    }
   }
 
   .el-tag.el-tag--info {
-      background-color: transparent;
-      color: #9EC4FF;
+    background-color: transparent;
+    color: #9ec4ff;
   }
 
   .el-date-editor .el-range-input,
   .el-icon,
   .el-range-separator {
-      color: #D3F6FF !important;
-      font-size: 16px !important;
+    color: #d3f6ff !important;
+    font-size: 16px !important;
   }
 
-
-
   .el-textarea__inner {
-      background: #0E4559FF;
-      border-radius: 6px;
-      border: 1px solid #1CF5FCFF;
-      box-shadow: none !important;
-      color: #D3F6FF;
+    background: #0e4559ff;
+    border-radius: 6px;
+    border: 1px solid #1cf5fcff;
+    box-shadow: none !important;
+    color: #d3f6ff;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    font-size: 16px !important;
+
+    &::placeholder {
+      color: #d3f6ff;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      font-size: 16px !important;
+    }
+  }
+
+  .el-input__wrapper {
+    box-shadow: none !important;
+    height: 35px !important;
+    background: #0e4559ff !important;
+    border-radius: 6px !important;
+    border: 1px solid #1cf5fcff !important;
+    font-size: 16px !important;
+
+    .el-input__prefix {
+      color: #d3f6ff;
+    }
+
+    .el-input__inner {
+      height: 35px !important;
+      color: #d3f6ff;
       font-family: Source Han Sans CN;
       font-weight: 500;
       font-size: 16px !important;
 
       &::placeholder {
-          color: #D3F6FF;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 16px !important;
+        color: #d3f6ff;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+        font-size: 16px !important;
       }
-  }
-
-  .el-input__wrapper {
-      box-shadow: none !important;
-      height: 35px !important;
-      background: #0E4559FF !important;
-      border-radius: 6px !important;
-      border: 1px solid #1CF5FCFF !important;
-      font-size: 16px !important;
-
-      .el-input__prefix {
-          color: #D3F6FF;
-      }
-
-      .el-input__inner {
-          height: 35px !important;
-          color: #D3F6FF;
-          font-family: Source Han Sans CN;
-          font-weight: 500;
-          font-size: 16px !important;
-
-          &::placeholder {
-              color: #D3F6FF;
-              font-family: Source Han Sans CN;
-              font-weight: 500;
-              font-size: 16px !important;
-          }
-      }
+    }
   }
 }
-   // 下拉
-   .picker.el-select {
-    width: 85px;
-    .el-input {
-        .el-input__wrapper {
-            // background: #061b3f;
-            box-shadow: none !important;
-            // border-radius: 4px;
-            height: 32px !important;
-            background: #00344FFF;
-            border-radius: 2px;
-            border: 1px solid #1CF5FCFF;
+// 下拉
+.picker.el-select {
+  .el-input {
+    .el-input__wrapper {
+      // background: #061b3f;
+      box-shadow: none !important;
+      // border-radius: 4px;
+      // height: 32px !important;
+      background: #00344fff;
+      border-radius: 2px;
+      border: 1px solid #1cf5fcff;
 
-            .el-input__inner {
-                height: 32px !important;
-                color: #fff !important;
-                font-family: Source Han Sans CN;
-                font-weight: 500;
+      .el-input__inner {
+        // height: 32px !important;
+        color: #fff !important;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
 
-                &::placeholder {
-                    color: #fff !important;
-                    font-family: Source Han Sans CN;
-                    font-weight: 500;
-                }
-            }
+        &::placeholder {
+          color: #fff !important;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
         }
+      }
     }
+  }
+}
+.datePicker {
+  .el-input {
+    .el-input__wrapper {
+      box-shadow: none !important;
+      background: #00344fff;
+      border-radius: 2px;
+      border: 1px solid #1cf5fcff;
 
+      .el-input__inner {
+        color: #fff !important;
+        font-family: Source Han Sans CN;
+        font-weight: 500;
+
+        &::placeholder {
+          color: #fff !important;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+        }
+      }
+    }
+  }
 }
diff --git a/src/views/oneMap/components/ZHHM_JCFX.vue b/src/views/oneMap/components/ZHHM_JCFX.vue
index 2889e27..fda3f3c 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -1,25 +1,55 @@
 <template>
   <div id="ZHHM_JCFX">
-    <div
-      :class="[
-        'LeftBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
-      ]"
-    ></div>
-    <div
-      :class="[
-        'RightBox',
-        'animate__animated',
-        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
-      ]"
-    ></div>
+    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
+      <div class="ComBox">
+        <!-- 降雨日历统计 -->
+        <div class="Box_header">降雨日历统计</div>
+        <div class="rainCal">
+          <monitorCalender :hasClose="false" @change="getChangeDate" />
+        </div>
+
+        <!-- 内涝积水分析 -->
+        <div class="Box_header">内涝积水分析</div>
+        
+      </div>
+    </div>
+    <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <div class="ComBox">
+        <!-- 典型项目分析 -->
+        <div class="Box_header">典型项目分析</div>
+
+        <!-- 关键管网分析 -->
+        <div class="Box_header">关键管网分析</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup name="ZHHM_JCFX">
-import { ref, reactive, toRefs, onMounted } from "vue";
-const AllData = reactive({});
+import { ref, reactive, toRefs, onMounted, defineProps, defineEmits } from 'vue';
+import monitorCalender from './monitorCalender.vue';
+
+const showPanel = ref(true); //面板展开收起
+
+// 面板内容展开收起控制
+const props = defineProps({
+  showPanel: {
+    type: Boolean,
+  },
+});
+watch(
+  () => props.showPanel,
+  () => {
+    showPanel.value = props.showPanel;
+  },
+  { immediate: true }
+);
+
+// 日历点击获取相应日期
+const getChangeDate = date => {
+  console.log(date);
+};
+
 onMounted(() => {});
 </script>
 
@@ -33,11 +63,7 @@
     position: absolute;
     left: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
@@ -50,16 +76,29 @@
     position: absolute;
     right: 10px;
     top: 70px;
-    background: linear-gradient(
-      0deg,
-      rgba(0, 43, 67, 0.8) 0%,
-      rgba(0, 69, 108, 0.8) 100%
-    );
+    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%);
     border-radius: 6px;
     border: 1px solid #47eef3;
     box-sizing: border-box;
     padding: 10px;
     box-shadow: inset 0 0 5px 5px #47eef38a;
   }
+  .ComBox {
+    width: 100%;
+    box-sizing: border-box;
+    .Box_header {
+      width: 100%;
+      height: 43px;
+      background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center;
+      background-size: cover;
+      font-family: PangMenZhengDao;
+      font-weight: 400;
+      font-size: 23px;
+      color: #ebfeff;
+      line-height: 43px;
+      box-sizing: border-box;
+      padding-left: 35px;
+    }
+  }
 }
 </style>
diff --git a/src/views/oneMap/components/monitorCalender.vue b/src/views/oneMap/components/monitorCalender.vue
new file mode 100644
index 0000000..bc518af
--- /dev/null
+++ b/src/views/oneMap/components/monitorCalender.vue
@@ -0,0 +1,311 @@
+<template>
+  <!-- 海绵监测分析--降雨日历统计 -->
+  <div class="monitorCalender">
+    <div class="selectTitleHM">
+      <div class="flex select_box">
+        <!-- 日期类型选择 -->
+        <div class="typeDate flex">
+          <p :class="['partD', dateIndex == 'day' ? 'active' : '']" @click="changeDate('day')">日</p>
+          <p :class="['partD', dateIndex == 'month' ? 'active' : '']" @click="changeDate('month')">月</p>
+          <p :class="['partD', dateIndex == 'year' ? 'active' : '']" @click="changeDate('year')">年</p>
+        </div>
+        <!-- 日历 -->
+        <el-date-picker
+          format="YYYY-MM"
+          :type="dateIndex == 'day' ? 'date' : dateIndex == 'month' ? 'month' : dateIndex == 'year' ? 'year' : ''"
+          :value-format="dateIndex == 'day' ? 'YYYY-MM-DD' : dateIndex == 'month' ? 'YYYY-MM' : dateIndex == 'year' ? 'YYYY' : ''"
+          v-model="datevalue"
+          placeholder="选择日期"
+          style="width: 140px; margin: 10px 10px"
+          @change="timeChange"
+          class="datePicker"
+          popper-class="haiMianScreenPopper"
+          size="small"
+        />
+        <!-- 雨量站选择 -->
+        <el-select
+          clearable
+          filterable
+          v-model="rainStation"
+          placeholder="请选择雨量站"
+          style="margin-top: 10px"
+          size="small"
+          class="picker"
+        >
+          <el-option v-for="dict in rainList" :key="dict.value" :label="dict.label" :value="dict.value" />
+        </el-select>
+      </div>
+    </div>
+
+    <!-- 日 -->
+    <el-calendar class="elCalendar" v-model="datevalueNew" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.6)">
+      <template #date-cell="{ data }">
+        <div
+          class="flex flex-v data-day"
+          :class="[{ active: data.day === selectVal }]"
+          @click="changepeople(data.day)"
+          style="position: relative"
+        >
+          <div class="date_box">{{ moment(data.day).format('DD') }}</div>
+          <div class="datadiv flex" style="color: #ffeb3b">
+            {{
+              scheduleData[moment(data.day).format('YYYY-MM-DD')] == 0.0
+                ? ''
+                : scheduleData[moment(data.day).format('YYYY-MM-DD')]
+                ? scheduleData[moment(data.day).format('YYYY-MM-DD')] + 'mm'
+                : ''
+            }}
+          </div>
+        </div>
+      </template>
+    </el-calendar>
+  </div>
+</template>
+
+<script setup>
+// import { rainTimeDay } from '@/api/zongHeDD.js';
+const props = defineProps({
+  defaultDate: {
+    type: String,
+    default: '',
+  },
+  hasClose: {
+    type: Boolean,
+    default: false,
+  },
+});
+const dateIndex = ref('month');
+const { proxy } = getCurrentInstance();
+const curDate = props.defaultDate ? proxy.moment(props.defaultDate).format('YYYY-MM') : proxy.moment().format('YYYY-MM');
+const curDateNew = props.defaultDate ? new Date(props.defaultDate) : new Date();
+const datevalue = ref(curDate);
+const datevalueNew = ref(curDateNew);
+const emits = defineEmits(['change', 'close']);
+const selectVal = ref(props.defaultDate);
+const scheduleData = ref({});
+const loading = ref(false);
+const rainStation = ref('1');
+const rainList = ref([
+  { value: '1', label: '雨量站1' },
+  { value: '2', label: '雨量站2' },
+]);
+
+function timeChange(val) {
+  datevalueNew.value = new Date(val);
+  getRainTimeDayData();
+}
+
+//获取降雨日历数据
+const getRainTimeDayData = () => {
+  // let data = {
+  //   fromTime: proxy.moment(datevalue.value).startOf('month').format('YYYY-MM-DD'),
+  //   toTime: proxy.moment(datevalue.value).endOf('month').format('YYYY-MM-DD'),
+  // };
+  // loading.value = true;
+  // rainTimeDay(data)
+  //   .then(res => {
+  //     res.data &&
+  //       res.data.forEach(item => {
+  //         scheduleData.value[item.rainTime] = item.rainCumulative;
+  //       });
+  //   })
+  //   .finally(() => {
+  //     loading.value = false;
+  //   });
+};
+// 降雨日历点击事件
+const changepeople = val => {
+  selectVal.value = val;
+  emits('change', val);
+};
+
+const close = () => {
+  emits('close');
+};
+
+function changeDate(val) {
+  dateIndex.value = val;
+  let valueFormat =
+    dateIndex.value == 'day' ? 'YYYY-MM-DD' : dateIndex.value == 'month' ? 'YYYY-MM' : dateIndex.value == 'year' ? 'YYYY' : '';
+  datevalue.value = proxy.moment().format(valueFormat);
+}
+
+onMounted(() => {
+  getRainTimeDayData();
+});
+</script>
+
+<style lang="scss" scoped>
+.monitorCalender {
+  .selectTitleHM {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    background-size: 100% 100%;
+    padding: 0 10px;
+
+    .name {
+      font-family: YouSheBiaoTiHei;
+      font-weight: bold;
+      font-size: 17px;
+      line-height: normal;
+      letter-spacing: 2px;
+      color: #e0e5fa;
+      padding-left: 10px;
+    }
+
+    .select_box {
+      margin-bottom: 0;
+    }
+    .typeDate {
+      color: #fff;
+      .partD {
+        width: 50px;
+        height: 22px;
+        line-height: 22px;
+        text-align: center;
+        cursor: pointer;
+        background: #00344f;
+        border-radius: 2px;
+        margin-right: 5px;
+      }
+      .active {
+        background: #002d44;
+        border-radius: 2px;
+        border: 1px solid #1cf5fc;
+      }
+    }
+
+    .closeBtn {
+      margin-left: 10px;
+      margin-top: 5px;
+      cursor: pointer;
+      .el-icon {
+        color: rgb(0, 238, 255);
+      }
+    }
+  }
+
+  .calendar-day {
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 50%;
+    color: #fff;
+
+    &.active {
+      background-color: #21adda;
+    }
+  }
+
+  .datadiv {
+    font-size: 10px;
+    height: 20px;
+  }
+}
+
+:deep(.elCalendar) {
+  border: none !important;
+  background-color: #043864;
+
+  .is-today {
+    width: 30px !important;
+    height: 30px !important;
+    // background-color: #1EFFFF !important;
+    border-radius: 15px;
+    font-family: Source Han Sans CN;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  .el-calendar-table tr:first-child td,
+  .el-calendar-table td,
+  .el-calendar-table tr td:first-child {
+    border: none;
+  }
+
+  .el-calendar-table {
+    padding: 2px;
+  }
+
+  //取消日历选中背景颜色
+  .el-calendar-table td.is-selected {
+    background-color: inherit;
+  }
+
+  .el-calendar-table thead th {
+    color: #c6c6c6;
+    font-size: 16px;
+  }
+
+  .el-calendar__header {
+    display: none;
+  }
+
+  .el-calendar-day {
+    margin: 0 auto;
+    width: 100%;
+    height: 40px !important;
+    line-height: 40px !important;
+    border: none;
+    text-align: center;
+    padding: 0px !important;
+    background: #003b6d;
+    font-size: 12px;
+    border-radius: 50%;
+    .data-day {
+      width: 46%;
+      height: 80%;
+      position: relative;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      &.active {
+        background-color: #1effff;
+        color: #042e77;
+        .datadiv {
+          bottom: -20px;
+        }
+      }
+    }
+    .date_box {
+      width: 100%;
+      font-size: 15px;
+      margin-top: -5px;
+      color: #a8abb2 !important;
+    }
+
+    .datadiv {
+      width: 100%;
+      position: absolute;
+      bottom: -10px;
+      font-size: 12px;
+    }
+  }
+
+  .is-today {
+    .data-day {
+      background-color: #047af3;
+      color: #fff;
+    }
+  }
+
+  .el-calendar__body {
+    padding: 0 0 10px 0 !important;
+    background: #003b6d;
+  }
+
+  /* 日历单元格鼠标经过背景色 */
+  .el-calendar-table .el-calendar-day:hover {
+    background-color: transparent !important;
+  }
+
+  .el-calendar-table:not(.is-range) td.next {
+    .calendar-day {
+      color: #a8abb2 !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/oneMap/floodPrevention/FholRightBox.vue b/src/views/oneMap/floodPrevention/FholRightBox.vue
index 0e79944..a19cc31 100644
--- a/src/views/oneMap/floodPrevention/FholRightBox.vue
+++ b/src/views/oneMap/floodPrevention/FholRightBox.vue
@@ -40,7 +40,6 @@
           popper-class="fxddPopperClass"
           v-model="search.stCode"
           placeholder="请选择节点"
-          size="large"
           style="width: 200px"
         >
           <el-option v-for="item in siteData" :key="item.stCode" :label="item.stName" :value="item.stCode" />