diff --git a/src/assets/styles/fxddMap.scss b/src/assets/styles/fxddMap.scss
index 60daf54..bd90217 100644
--- a/src/assets/styles/fxddMap.scss
+++ b/src/assets/styles/fxddMap.scss
@@ -181,16 +181,12 @@
 .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;
@@ -204,24 +200,23 @@
     }
   }
 }
-.datePicker {
-  .el-input {
-    .el-input__wrapper {
-      box-shadow: none !important;
-      background: #00344fff;
-      border-radius: 2px;
-      border: 1px solid #1cf5fcff;
+.datePickerHM {
+  .el-input__wrapper {
+    box-shadow: none !important;
+    background: #00344fff;
+    border-radius: 2px;
+    border: 1px solid #1cf5fcff;
+    height: 26px;
 
-      .el-input__inner {
+    .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;
-
-        &::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 60daf54..bd90217 100644
--- a/src/assets/styles/fxddMap.scss
+++ b/src/assets/styles/fxddMap.scss
@@ -181,16 +181,12 @@
 .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;
@@ -204,24 +200,23 @@
     }
   }
 }
-.datePicker {
-  .el-input {
-    .el-input__wrapper {
-      box-shadow: none !important;
-      background: #00344fff;
-      border-radius: 2px;
-      border: 1px solid #1cf5fcff;
+.datePickerHM {
+  .el-input__wrapper {
+    box-shadow: none !important;
+    background: #00344fff;
+    border-radius: 2px;
+    border: 1px solid #1cf5fcff;
+    height: 26px;
 
-      .el-input__inner {
+    .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;
-
-        &::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 fda3f3c..00e1132 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -10,16 +10,132 @@
 
         <!-- 内涝积水分析 -->
         <div class="Box_header">内涝积水分析</div>
-        
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">内涝风险点</div>
+          </div>
+          <el-select clearable filterable v-model="riskStation" placeholder="请选择内涝风险点" size="small" class="picker">
+            <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </div>
+        <div class="chartHeight">
+          <chartLogging :data="chartData1" :refresh="chartData1.refresh"></chartLogging>
+        </div>
+        <div class="flex flexLeg">
+          <div class="legPart"><span class="yellow"></span>轻微内涝警戒线</div>
+          <div class="legPart"><span class="red"></span>严重内涝警戒线</div>
+        </div>
+
+        <!-- 内涝分析成因分析 -->
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">内涝分析成因分析</div>
+          </div>
+        </div>
+        <table class="tableFX">
+          <tr>
+            <td class="title">当前状况</td>
+            <td>未出现内涝积水情况</td>
+          </tr>
+          <tr>
+            <td class="title">数据分析</td>
+            <td>初雨出流较慢但持续一段时间正常</td>
+          </tr>
+          <tr>
+            <td class="title">历史成因</td>
+            <td>区域局部地理位置较低，收水范围过大</td>
+          </tr>
+        </table>
       </div>
     </div>
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox">
         <!-- 典型项目分析 -->
         <div class="Box_header">典型项目分析</div>
+        <div class="flex flex-justcontent-end">
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择典型项目"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </div>
+        <div style="height: 220px">
+          <projectDX :data="chartData2" :refresh="chartData2.refresh"></projectDX>
+        </div>
 
         <!-- 关键管网分析 -->
         <div class="Box_header">关键管网分析</div>
+        <div class="flex flex-justcontent-spacearound">
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择分区"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option label="延河南岸分区" value="1" />
+          </el-select>
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择管网监测点"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option label="延河南岸监测点1" value="1" />
+          </el-select>
+        </div>
+        <div class="chartHeightR">
+          <pipeFX :data="chartData3" :refresh="chartData3.refresh"></pipeFX>
+        </div>
+        <div class="flex flexLeg">
+          <div class="legPart"><span class="yellow"></span>轻微风险警戒线</div>
+          <div class="legPart"><span class="red"></span>溢流风险警戒线</div>
+        </div>
+
+        <!-- 风险成因分析 -->
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">风险成因分析</div>
+          </div>
+        </div>
+        <table class="tableFX">
+          <tr>
+            <td class="title">当前状况</td>
+            <td>未出现风险运行</td>
+          </tr>
+          <tr>
+            <td class="title" rowspan="2">数据分析</td>
+            <td>出流时间与降雨峰值有时间偏差</td>
+          </tr>
+          <tr>
+            <td>降雨过后1小时后管网有积水</td>
+          </tr>
+          <tr>
+            <td class="title">管网管径</td>
+            <td>DN300</td>
+          </tr>
+          <tr>
+            <td class="title" rowspan="2">风险分析</td>
+            <td>管网普查报告中该段管网存在缺陷</td>
+          </tr>
+          <tr>
+            <td>溢流风险运行35分钟</td>
+          </tr>
+        </table>
       </div>
     </div>
   </div>
@@ -28,8 +144,36 @@
 <script setup name="ZHHM_JCFX">
 import { ref, reactive, toRefs, onMounted, defineProps, defineEmits } from 'vue';
 import monitorCalender from './monitorCalender.vue';
+import chartLogging from './chartLogging'; //内涝积水点
+import projectDX from './projectDX'; //典型项目分析
+import pipeFX from './pipeFX'; //管网分析
 
 const showPanel = ref(true); //面板展开收起
+const chartData1 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  inverse: true,
+  yAxis: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
+  yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流量
+  refresh: 1,
+});
+const chartData2 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  yAxis1: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //水深
+  yAxis2: [50, 55, 80, 50, 46, 65, 70, 50, 78, 52, 69, 90], //ss
+  yAxisName1: '水深(cm)',
+  yAxisName2: 'ss(mg/L)',
+  refresh: 1,
+});
+const chartData3 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  inverse: true,
+  yAxis1: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
+  yAxis2: [20, 20.2, 21.3, 20.2, 22.1, 19.4, 20, 21, 23.6, 20.1, 21.2, 29], //水深
+  yAxis3: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流速
+  refresh: 1,
+});
+const riskStation = ref('1');
+const riskList = ref([{ value: '1', label: '大砭沟与北大街交叉口' }]);
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -57,6 +201,34 @@
 #ZHHM_JCFX {
   width: 100%;
   height: 100%;
+  .chartHeight {
+    width: 100%;
+    height: calc(100vh - 720px);
+    margin: 5px auto;
+  }
+  .chartHeightR {
+    width: 100%;
+    height: calc(100vh - 780px);
+    margin: 5px auto;
+  }
+  .tableFX {
+    border-collapse: collapse;
+    width: 95%;
+    margin: 10px 2%;
+    td {
+      border: 1px solid #1cf5fc;
+      text-align: center;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+      color: #a5d2ff;
+      background: #075680;
+    }
+    .title {
+      color: #00f2ff;
+    }
+  }
   .LeftBox {
     width: 450px;
     height: calc(100% - 98px);
@@ -86,6 +258,7 @@
   .ComBox {
     width: 100%;
     box-sizing: border-box;
+
     .Box_header {
       width: 100%;
       height: 43px;
@@ -99,6 +272,57 @@
       box-sizing: border-box;
       padding-left: 35px;
     }
+    .titSmall {
+      justify-content: space-between;
+      padding: 0px 15px;
+      margin-top: 10px;
+      .flex {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        align-items: center;
+        span {
+          width: 10px;
+          height: 10px;
+          display: inline-block;
+          margin-right: 6px;
+          background: #fff;
+          transform: rotate(45deg);
+        }
+        .name {
+          background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+          padding: 0px 3px;
+          height: 10px;
+          line-height: 0px;
+          margin-top: 6px;
+        }
+      }
+    }
+    .flexLeg {
+      justify-content: center;
+      margin-bottom: 20px;
+      .legPart {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        text-align: center;
+        margin-right: 20px;
+        span {
+          width: 10px;
+          height: 10px;
+          display: inline-block;
+          margin-right: 6px;
+        }
+        .yellow {
+          background: #ffff80;
+        }
+        .red {
+          background: #e20f36;
+        }
+      }
+    }
   }
 }
 </style>

diff --git a/src/assets/styles/fxddMap.scss b/src/assets/styles/fxddMap.scss
index 60daf54..bd90217 100644
--- a/src/assets/styles/fxddMap.scss
+++ b/src/assets/styles/fxddMap.scss
@@ -181,16 +181,12 @@
 .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;
@@ -204,24 +200,23 @@
     }
   }
 }
-.datePicker {
-  .el-input {
-    .el-input__wrapper {
-      box-shadow: none !important;
-      background: #00344fff;
-      border-radius: 2px;
-      border: 1px solid #1cf5fcff;
+.datePickerHM {
+  .el-input__wrapper {
+    box-shadow: none !important;
+    background: #00344fff;
+    border-radius: 2px;
+    border: 1px solid #1cf5fcff;
+    height: 26px;
 
-      .el-input__inner {
+    .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;
-
-        &::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 fda3f3c..00e1132 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -10,16 +10,132 @@
 
         <!-- 内涝积水分析 -->
         <div class="Box_header">内涝积水分析</div>
-        
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">内涝风险点</div>
+          </div>
+          <el-select clearable filterable v-model="riskStation" placeholder="请选择内涝风险点" size="small" class="picker">
+            <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </div>
+        <div class="chartHeight">
+          <chartLogging :data="chartData1" :refresh="chartData1.refresh"></chartLogging>
+        </div>
+        <div class="flex flexLeg">
+          <div class="legPart"><span class="yellow"></span>轻微内涝警戒线</div>
+          <div class="legPart"><span class="red"></span>严重内涝警戒线</div>
+        </div>
+
+        <!-- 内涝分析成因分析 -->
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">内涝分析成因分析</div>
+          </div>
+        </div>
+        <table class="tableFX">
+          <tr>
+            <td class="title">当前状况</td>
+            <td>未出现内涝积水情况</td>
+          </tr>
+          <tr>
+            <td class="title">数据分析</td>
+            <td>初雨出流较慢但持续一段时间正常</td>
+          </tr>
+          <tr>
+            <td class="title">历史成因</td>
+            <td>区域局部地理位置较低，收水范围过大</td>
+          </tr>
+        </table>
       </div>
     </div>
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox">
         <!-- 典型项目分析 -->
         <div class="Box_header">典型项目分析</div>
+        <div class="flex flex-justcontent-end">
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择典型项目"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </div>
+        <div style="height: 220px">
+          <projectDX :data="chartData2" :refresh="chartData2.refresh"></projectDX>
+        </div>
 
         <!-- 关键管网分析 -->
         <div class="Box_header">关键管网分析</div>
+        <div class="flex flex-justcontent-spacearound">
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择分区"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option label="延河南岸分区" value="1" />
+          </el-select>
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择管网监测点"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option label="延河南岸监测点1" value="1" />
+          </el-select>
+        </div>
+        <div class="chartHeightR">
+          <pipeFX :data="chartData3" :refresh="chartData3.refresh"></pipeFX>
+        </div>
+        <div class="flex flexLeg">
+          <div class="legPart"><span class="yellow"></span>轻微风险警戒线</div>
+          <div class="legPart"><span class="red"></span>溢流风险警戒线</div>
+        </div>
+
+        <!-- 风险成因分析 -->
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">风险成因分析</div>
+          </div>
+        </div>
+        <table class="tableFX">
+          <tr>
+            <td class="title">当前状况</td>
+            <td>未出现风险运行</td>
+          </tr>
+          <tr>
+            <td class="title" rowspan="2">数据分析</td>
+            <td>出流时间与降雨峰值有时间偏差</td>
+          </tr>
+          <tr>
+            <td>降雨过后1小时后管网有积水</td>
+          </tr>
+          <tr>
+            <td class="title">管网管径</td>
+            <td>DN300</td>
+          </tr>
+          <tr>
+            <td class="title" rowspan="2">风险分析</td>
+            <td>管网普查报告中该段管网存在缺陷</td>
+          </tr>
+          <tr>
+            <td>溢流风险运行35分钟</td>
+          </tr>
+        </table>
       </div>
     </div>
   </div>
@@ -28,8 +144,36 @@
 <script setup name="ZHHM_JCFX">
 import { ref, reactive, toRefs, onMounted, defineProps, defineEmits } from 'vue';
 import monitorCalender from './monitorCalender.vue';
+import chartLogging from './chartLogging'; //内涝积水点
+import projectDX from './projectDX'; //典型项目分析
+import pipeFX from './pipeFX'; //管网分析
 
 const showPanel = ref(true); //面板展开收起
+const chartData1 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  inverse: true,
+  yAxis: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
+  yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流量
+  refresh: 1,
+});
+const chartData2 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  yAxis1: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //水深
+  yAxis2: [50, 55, 80, 50, 46, 65, 70, 50, 78, 52, 69, 90], //ss
+  yAxisName1: '水深(cm)',
+  yAxisName2: 'ss(mg/L)',
+  refresh: 1,
+});
+const chartData3 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  inverse: true,
+  yAxis1: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
+  yAxis2: [20, 20.2, 21.3, 20.2, 22.1, 19.4, 20, 21, 23.6, 20.1, 21.2, 29], //水深
+  yAxis3: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流速
+  refresh: 1,
+});
+const riskStation = ref('1');
+const riskList = ref([{ value: '1', label: '大砭沟与北大街交叉口' }]);
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -57,6 +201,34 @@
 #ZHHM_JCFX {
   width: 100%;
   height: 100%;
+  .chartHeight {
+    width: 100%;
+    height: calc(100vh - 720px);
+    margin: 5px auto;
+  }
+  .chartHeightR {
+    width: 100%;
+    height: calc(100vh - 780px);
+    margin: 5px auto;
+  }
+  .tableFX {
+    border-collapse: collapse;
+    width: 95%;
+    margin: 10px 2%;
+    td {
+      border: 1px solid #1cf5fc;
+      text-align: center;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+      color: #a5d2ff;
+      background: #075680;
+    }
+    .title {
+      color: #00f2ff;
+    }
+  }
   .LeftBox {
     width: 450px;
     height: calc(100% - 98px);
@@ -86,6 +258,7 @@
   .ComBox {
     width: 100%;
     box-sizing: border-box;
+
     .Box_header {
       width: 100%;
       height: 43px;
@@ -99,6 +272,57 @@
       box-sizing: border-box;
       padding-left: 35px;
     }
+    .titSmall {
+      justify-content: space-between;
+      padding: 0px 15px;
+      margin-top: 10px;
+      .flex {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        align-items: center;
+        span {
+          width: 10px;
+          height: 10px;
+          display: inline-block;
+          margin-right: 6px;
+          background: #fff;
+          transform: rotate(45deg);
+        }
+        .name {
+          background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+          padding: 0px 3px;
+          height: 10px;
+          line-height: 0px;
+          margin-top: 6px;
+        }
+      }
+    }
+    .flexLeg {
+      justify-content: center;
+      margin-bottom: 20px;
+      .legPart {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        text-align: center;
+        margin-right: 20px;
+        span {
+          width: 10px;
+          height: 10px;
+          display: inline-block;
+          margin-right: 6px;
+        }
+        .yellow {
+          background: #ffff80;
+        }
+        .red {
+          background: #e20f36;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/oneMap/components/chartLogging.vue b/src/views/oneMap/components/chartLogging.vue
new file mode 100644
index 0000000..294e59a
--- /dev/null
+++ b/src/views/oneMap/components/chartLogging.vue
@@ -0,0 +1,231 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+      var barWidth = 12;
+      var option;
+      option = {
+        color: ['#FFB049', '#FFB049'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 30,
+          bottom: 30,
+          right: 50,
+        },
+        legend: {
+          data: ['降雨量(mm)', '积水深(cm)'],
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 14,
+              fontFamily: 'AlibabaPuHuiTi',
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.yAxisName1 || '',
+            inverse: props.data.inverse || false, //翻转
+            type: 'value',
+            axisLabel: {
+              color: 'rgba(73, 197, 255, 1)',
+              show: true,
+            },
+            nameTextStyle: {
+              color: 'rgba(73, 197, 255, 1)',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+          },
+          {
+            name: props.data.yAxisName2 || '',
+            inverse: true,
+            nameLocation: 'start', // 坐标轴名称显示位置
+            type: 'value',
+            nameTextStyle: {
+              color: '#FFB049',
+            },
+            axisLabel: {
+              show: true,
+              color: '#FFB049',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#1D5D81',
+                type: 'dashed',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '降雨量(mm)',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(169, 210, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(73, 197, 255, 1)',
+                },
+              ]),
+              borderRadius: [0, 0, 10, 10],
+            },
+            yAxisIndex: 0,
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '积水深(cm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFB049',
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '轻微内涝警戒线：{c}',
+                color: '#FFFF80',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#FFFF80',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '轻微内涝警戒线',
+                  yAxis: '0.2',
+                },
+              ],
+            },
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '严重内涝警戒线：{c}',
+                color: '#E20F36',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#E20F36',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '严重内涝警戒线',
+                  yAxis: '0.4',
+                },
+              ],
+            },
+          },
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 2000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>

diff --git a/src/assets/styles/fxddMap.scss b/src/assets/styles/fxddMap.scss
index 60daf54..bd90217 100644
--- a/src/assets/styles/fxddMap.scss
+++ b/src/assets/styles/fxddMap.scss
@@ -181,16 +181,12 @@
 .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;
@@ -204,24 +200,23 @@
     }
   }
 }
-.datePicker {
-  .el-input {
-    .el-input__wrapper {
-      box-shadow: none !important;
-      background: #00344fff;
-      border-radius: 2px;
-      border: 1px solid #1cf5fcff;
+.datePickerHM {
+  .el-input__wrapper {
+    box-shadow: none !important;
+    background: #00344fff;
+    border-radius: 2px;
+    border: 1px solid #1cf5fcff;
+    height: 26px;
 
-      .el-input__inner {
+    .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;
-
-        &::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 fda3f3c..00e1132 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -10,16 +10,132 @@
 
         <!-- 内涝积水分析 -->
         <div class="Box_header">内涝积水分析</div>
-        
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">内涝风险点</div>
+          </div>
+          <el-select clearable filterable v-model="riskStation" placeholder="请选择内涝风险点" size="small" class="picker">
+            <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </div>
+        <div class="chartHeight">
+          <chartLogging :data="chartData1" :refresh="chartData1.refresh"></chartLogging>
+        </div>
+        <div class="flex flexLeg">
+          <div class="legPart"><span class="yellow"></span>轻微内涝警戒线</div>
+          <div class="legPart"><span class="red"></span>严重内涝警戒线</div>
+        </div>
+
+        <!-- 内涝分析成因分析 -->
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">内涝分析成因分析</div>
+          </div>
+        </div>
+        <table class="tableFX">
+          <tr>
+            <td class="title">当前状况</td>
+            <td>未出现内涝积水情况</td>
+          </tr>
+          <tr>
+            <td class="title">数据分析</td>
+            <td>初雨出流较慢但持续一段时间正常</td>
+          </tr>
+          <tr>
+            <td class="title">历史成因</td>
+            <td>区域局部地理位置较低，收水范围过大</td>
+          </tr>
+        </table>
       </div>
     </div>
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox">
         <!-- 典型项目分析 -->
         <div class="Box_header">典型项目分析</div>
+        <div class="flex flex-justcontent-end">
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择典型项目"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </div>
+        <div style="height: 220px">
+          <projectDX :data="chartData2" :refresh="chartData2.refresh"></projectDX>
+        </div>
 
         <!-- 关键管网分析 -->
         <div class="Box_header">关键管网分析</div>
+        <div class="flex flex-justcontent-spacearound">
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择分区"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option label="延河南岸分区" value="1" />
+          </el-select>
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择管网监测点"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option label="延河南岸监测点1" value="1" />
+          </el-select>
+        </div>
+        <div class="chartHeightR">
+          <pipeFX :data="chartData3" :refresh="chartData3.refresh"></pipeFX>
+        </div>
+        <div class="flex flexLeg">
+          <div class="legPart"><span class="yellow"></span>轻微风险警戒线</div>
+          <div class="legPart"><span class="red"></span>溢流风险警戒线</div>
+        </div>
+
+        <!-- 风险成因分析 -->
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">风险成因分析</div>
+          </div>
+        </div>
+        <table class="tableFX">
+          <tr>
+            <td class="title">当前状况</td>
+            <td>未出现风险运行</td>
+          </tr>
+          <tr>
+            <td class="title" rowspan="2">数据分析</td>
+            <td>出流时间与降雨峰值有时间偏差</td>
+          </tr>
+          <tr>
+            <td>降雨过后1小时后管网有积水</td>
+          </tr>
+          <tr>
+            <td class="title">管网管径</td>
+            <td>DN300</td>
+          </tr>
+          <tr>
+            <td class="title" rowspan="2">风险分析</td>
+            <td>管网普查报告中该段管网存在缺陷</td>
+          </tr>
+          <tr>
+            <td>溢流风险运行35分钟</td>
+          </tr>
+        </table>
       </div>
     </div>
   </div>
@@ -28,8 +144,36 @@
 <script setup name="ZHHM_JCFX">
 import { ref, reactive, toRefs, onMounted, defineProps, defineEmits } from 'vue';
 import monitorCalender from './monitorCalender.vue';
+import chartLogging from './chartLogging'; //内涝积水点
+import projectDX from './projectDX'; //典型项目分析
+import pipeFX from './pipeFX'; //管网分析
 
 const showPanel = ref(true); //面板展开收起
+const chartData1 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  inverse: true,
+  yAxis: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
+  yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流量
+  refresh: 1,
+});
+const chartData2 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  yAxis1: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //水深
+  yAxis2: [50, 55, 80, 50, 46, 65, 70, 50, 78, 52, 69, 90], //ss
+  yAxisName1: '水深(cm)',
+  yAxisName2: 'ss(mg/L)',
+  refresh: 1,
+});
+const chartData3 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  inverse: true,
+  yAxis1: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
+  yAxis2: [20, 20.2, 21.3, 20.2, 22.1, 19.4, 20, 21, 23.6, 20.1, 21.2, 29], //水深
+  yAxis3: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流速
+  refresh: 1,
+});
+const riskStation = ref('1');
+const riskList = ref([{ value: '1', label: '大砭沟与北大街交叉口' }]);
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -57,6 +201,34 @@
 #ZHHM_JCFX {
   width: 100%;
   height: 100%;
+  .chartHeight {
+    width: 100%;
+    height: calc(100vh - 720px);
+    margin: 5px auto;
+  }
+  .chartHeightR {
+    width: 100%;
+    height: calc(100vh - 780px);
+    margin: 5px auto;
+  }
+  .tableFX {
+    border-collapse: collapse;
+    width: 95%;
+    margin: 10px 2%;
+    td {
+      border: 1px solid #1cf5fc;
+      text-align: center;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+      color: #a5d2ff;
+      background: #075680;
+    }
+    .title {
+      color: #00f2ff;
+    }
+  }
   .LeftBox {
     width: 450px;
     height: calc(100% - 98px);
@@ -86,6 +258,7 @@
   .ComBox {
     width: 100%;
     box-sizing: border-box;
+
     .Box_header {
       width: 100%;
       height: 43px;
@@ -99,6 +272,57 @@
       box-sizing: border-box;
       padding-left: 35px;
     }
+    .titSmall {
+      justify-content: space-between;
+      padding: 0px 15px;
+      margin-top: 10px;
+      .flex {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        align-items: center;
+        span {
+          width: 10px;
+          height: 10px;
+          display: inline-block;
+          margin-right: 6px;
+          background: #fff;
+          transform: rotate(45deg);
+        }
+        .name {
+          background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+          padding: 0px 3px;
+          height: 10px;
+          line-height: 0px;
+          margin-top: 6px;
+        }
+      }
+    }
+    .flexLeg {
+      justify-content: center;
+      margin-bottom: 20px;
+      .legPart {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        text-align: center;
+        margin-right: 20px;
+        span {
+          width: 10px;
+          height: 10px;
+          display: inline-block;
+          margin-right: 6px;
+        }
+        .yellow {
+          background: #ffff80;
+        }
+        .red {
+          background: #e20f36;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/oneMap/components/chartLogging.vue b/src/views/oneMap/components/chartLogging.vue
new file mode 100644
index 0000000..294e59a
--- /dev/null
+++ b/src/views/oneMap/components/chartLogging.vue
@@ -0,0 +1,231 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+      var barWidth = 12;
+      var option;
+      option = {
+        color: ['#FFB049', '#FFB049'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 30,
+          bottom: 30,
+          right: 50,
+        },
+        legend: {
+          data: ['降雨量(mm)', '积水深(cm)'],
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 14,
+              fontFamily: 'AlibabaPuHuiTi',
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.yAxisName1 || '',
+            inverse: props.data.inverse || false, //翻转
+            type: 'value',
+            axisLabel: {
+              color: 'rgba(73, 197, 255, 1)',
+              show: true,
+            },
+            nameTextStyle: {
+              color: 'rgba(73, 197, 255, 1)',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+          },
+          {
+            name: props.data.yAxisName2 || '',
+            inverse: true,
+            nameLocation: 'start', // 坐标轴名称显示位置
+            type: 'value',
+            nameTextStyle: {
+              color: '#FFB049',
+            },
+            axisLabel: {
+              show: true,
+              color: '#FFB049',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#1D5D81',
+                type: 'dashed',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '降雨量(mm)',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(169, 210, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(73, 197, 255, 1)',
+                },
+              ]),
+              borderRadius: [0, 0, 10, 10],
+            },
+            yAxisIndex: 0,
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '积水深(cm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFB049',
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '轻微内涝警戒线：{c}',
+                color: '#FFFF80',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#FFFF80',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '轻微内涝警戒线',
+                  yAxis: '0.2',
+                },
+              ],
+            },
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '严重内涝警戒线：{c}',
+                color: '#E20F36',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#E20F36',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '严重内涝警戒线',
+                  yAxis: '0.4',
+                },
+              ],
+            },
+          },
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 2000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/oneMap/components/monitorCalender.vue b/src/views/oneMap/components/monitorCalender.vue
index bc518af..e045dba 100644
--- a/src/views/oneMap/components/monitorCalender.vue
+++ b/src/views/oneMap/components/monitorCalender.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 海绵监测分析--降雨日历统计 -->
-  <div class="monitorCalender">
+  <div class="monitorCalenderHM">
     <div class="selectTitleHM">
       <div class="flex select_box">
         <!-- 日期类型选择 -->
@@ -12,13 +12,13 @@
         <!-- 日历 -->
         <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' : ''"
+          value-format="YYYY-MM"
+          type="month"
           v-model="datevalue"
           placeholder="选择日期"
           style="width: 140px; margin: 10px 10px"
           @change="timeChange"
-          class="datePicker"
+          class="datePickerHM"
           popper-class="haiMianScreenPopper"
           size="small"
         />
@@ -136,7 +136,7 @@
 </script>
 
 <style lang="scss" scoped>
-.monitorCalender {
+.monitorCalenderHM {
   .selectTitleHM {
     display: flex;
     align-items: center;

diff --git a/src/assets/styles/fxddMap.scss b/src/assets/styles/fxddMap.scss
index 60daf54..bd90217 100644
--- a/src/assets/styles/fxddMap.scss
+++ b/src/assets/styles/fxddMap.scss
@@ -181,16 +181,12 @@
 .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;
@@ -204,24 +200,23 @@
     }
   }
 }
-.datePicker {
-  .el-input {
-    .el-input__wrapper {
-      box-shadow: none !important;
-      background: #00344fff;
-      border-radius: 2px;
-      border: 1px solid #1cf5fcff;
+.datePickerHM {
+  .el-input__wrapper {
+    box-shadow: none !important;
+    background: #00344fff;
+    border-radius: 2px;
+    border: 1px solid #1cf5fcff;
+    height: 26px;
 
-      .el-input__inner {
+    .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;
-
-        &::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 fda3f3c..00e1132 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -10,16 +10,132 @@
 
         <!-- 内涝积水分析 -->
         <div class="Box_header">内涝积水分析</div>
-        
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">内涝风险点</div>
+          </div>
+          <el-select clearable filterable v-model="riskStation" placeholder="请选择内涝风险点" size="small" class="picker">
+            <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </div>
+        <div class="chartHeight">
+          <chartLogging :data="chartData1" :refresh="chartData1.refresh"></chartLogging>
+        </div>
+        <div class="flex flexLeg">
+          <div class="legPart"><span class="yellow"></span>轻微内涝警戒线</div>
+          <div class="legPart"><span class="red"></span>严重内涝警戒线</div>
+        </div>
+
+        <!-- 内涝分析成因分析 -->
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">内涝分析成因分析</div>
+          </div>
+        </div>
+        <table class="tableFX">
+          <tr>
+            <td class="title">当前状况</td>
+            <td>未出现内涝积水情况</td>
+          </tr>
+          <tr>
+            <td class="title">数据分析</td>
+            <td>初雨出流较慢但持续一段时间正常</td>
+          </tr>
+          <tr>
+            <td class="title">历史成因</td>
+            <td>区域局部地理位置较低，收水范围过大</td>
+          </tr>
+        </table>
       </div>
     </div>
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox">
         <!-- 典型项目分析 -->
         <div class="Box_header">典型项目分析</div>
+        <div class="flex flex-justcontent-end">
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择典型项目"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </div>
+        <div style="height: 220px">
+          <projectDX :data="chartData2" :refresh="chartData2.refresh"></projectDX>
+        </div>
 
         <!-- 关键管网分析 -->
         <div class="Box_header">关键管网分析</div>
+        <div class="flex flex-justcontent-spacearound">
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择分区"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option label="延河南岸分区" value="1" />
+          </el-select>
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择管网监测点"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option label="延河南岸监测点1" value="1" />
+          </el-select>
+        </div>
+        <div class="chartHeightR">
+          <pipeFX :data="chartData3" :refresh="chartData3.refresh"></pipeFX>
+        </div>
+        <div class="flex flexLeg">
+          <div class="legPart"><span class="yellow"></span>轻微风险警戒线</div>
+          <div class="legPart"><span class="red"></span>溢流风险警戒线</div>
+        </div>
+
+        <!-- 风险成因分析 -->
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">风险成因分析</div>
+          </div>
+        </div>
+        <table class="tableFX">
+          <tr>
+            <td class="title">当前状况</td>
+            <td>未出现风险运行</td>
+          </tr>
+          <tr>
+            <td class="title" rowspan="2">数据分析</td>
+            <td>出流时间与降雨峰值有时间偏差</td>
+          </tr>
+          <tr>
+            <td>降雨过后1小时后管网有积水</td>
+          </tr>
+          <tr>
+            <td class="title">管网管径</td>
+            <td>DN300</td>
+          </tr>
+          <tr>
+            <td class="title" rowspan="2">风险分析</td>
+            <td>管网普查报告中该段管网存在缺陷</td>
+          </tr>
+          <tr>
+            <td>溢流风险运行35分钟</td>
+          </tr>
+        </table>
       </div>
     </div>
   </div>
@@ -28,8 +144,36 @@
 <script setup name="ZHHM_JCFX">
 import { ref, reactive, toRefs, onMounted, defineProps, defineEmits } from 'vue';
 import monitorCalender from './monitorCalender.vue';
+import chartLogging from './chartLogging'; //内涝积水点
+import projectDX from './projectDX'; //典型项目分析
+import pipeFX from './pipeFX'; //管网分析
 
 const showPanel = ref(true); //面板展开收起
+const chartData1 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  inverse: true,
+  yAxis: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
+  yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流量
+  refresh: 1,
+});
+const chartData2 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  yAxis1: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //水深
+  yAxis2: [50, 55, 80, 50, 46, 65, 70, 50, 78, 52, 69, 90], //ss
+  yAxisName1: '水深(cm)',
+  yAxisName2: 'ss(mg/L)',
+  refresh: 1,
+});
+const chartData3 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  inverse: true,
+  yAxis1: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
+  yAxis2: [20, 20.2, 21.3, 20.2, 22.1, 19.4, 20, 21, 23.6, 20.1, 21.2, 29], //水深
+  yAxis3: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流速
+  refresh: 1,
+});
+const riskStation = ref('1');
+const riskList = ref([{ value: '1', label: '大砭沟与北大街交叉口' }]);
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -57,6 +201,34 @@
 #ZHHM_JCFX {
   width: 100%;
   height: 100%;
+  .chartHeight {
+    width: 100%;
+    height: calc(100vh - 720px);
+    margin: 5px auto;
+  }
+  .chartHeightR {
+    width: 100%;
+    height: calc(100vh - 780px);
+    margin: 5px auto;
+  }
+  .tableFX {
+    border-collapse: collapse;
+    width: 95%;
+    margin: 10px 2%;
+    td {
+      border: 1px solid #1cf5fc;
+      text-align: center;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+      color: #a5d2ff;
+      background: #075680;
+    }
+    .title {
+      color: #00f2ff;
+    }
+  }
   .LeftBox {
     width: 450px;
     height: calc(100% - 98px);
@@ -86,6 +258,7 @@
   .ComBox {
     width: 100%;
     box-sizing: border-box;
+
     .Box_header {
       width: 100%;
       height: 43px;
@@ -99,6 +272,57 @@
       box-sizing: border-box;
       padding-left: 35px;
     }
+    .titSmall {
+      justify-content: space-between;
+      padding: 0px 15px;
+      margin-top: 10px;
+      .flex {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        align-items: center;
+        span {
+          width: 10px;
+          height: 10px;
+          display: inline-block;
+          margin-right: 6px;
+          background: #fff;
+          transform: rotate(45deg);
+        }
+        .name {
+          background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+          padding: 0px 3px;
+          height: 10px;
+          line-height: 0px;
+          margin-top: 6px;
+        }
+      }
+    }
+    .flexLeg {
+      justify-content: center;
+      margin-bottom: 20px;
+      .legPart {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        text-align: center;
+        margin-right: 20px;
+        span {
+          width: 10px;
+          height: 10px;
+          display: inline-block;
+          margin-right: 6px;
+        }
+        .yellow {
+          background: #ffff80;
+        }
+        .red {
+          background: #e20f36;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/oneMap/components/chartLogging.vue b/src/views/oneMap/components/chartLogging.vue
new file mode 100644
index 0000000..294e59a
--- /dev/null
+++ b/src/views/oneMap/components/chartLogging.vue
@@ -0,0 +1,231 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+      var barWidth = 12;
+      var option;
+      option = {
+        color: ['#FFB049', '#FFB049'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 30,
+          bottom: 30,
+          right: 50,
+        },
+        legend: {
+          data: ['降雨量(mm)', '积水深(cm)'],
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 14,
+              fontFamily: 'AlibabaPuHuiTi',
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.yAxisName1 || '',
+            inverse: props.data.inverse || false, //翻转
+            type: 'value',
+            axisLabel: {
+              color: 'rgba(73, 197, 255, 1)',
+              show: true,
+            },
+            nameTextStyle: {
+              color: 'rgba(73, 197, 255, 1)',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+          },
+          {
+            name: props.data.yAxisName2 || '',
+            inverse: true,
+            nameLocation: 'start', // 坐标轴名称显示位置
+            type: 'value',
+            nameTextStyle: {
+              color: '#FFB049',
+            },
+            axisLabel: {
+              show: true,
+              color: '#FFB049',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#1D5D81',
+                type: 'dashed',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '降雨量(mm)',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(169, 210, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(73, 197, 255, 1)',
+                },
+              ]),
+              borderRadius: [0, 0, 10, 10],
+            },
+            yAxisIndex: 0,
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '积水深(cm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFB049',
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '轻微内涝警戒线：{c}',
+                color: '#FFFF80',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#FFFF80',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '轻微内涝警戒线',
+                  yAxis: '0.2',
+                },
+              ],
+            },
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '严重内涝警戒线：{c}',
+                color: '#E20F36',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#E20F36',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '严重内涝警戒线',
+                  yAxis: '0.4',
+                },
+              ],
+            },
+          },
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 2000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/oneMap/components/monitorCalender.vue b/src/views/oneMap/components/monitorCalender.vue
index bc518af..e045dba 100644
--- a/src/views/oneMap/components/monitorCalender.vue
+++ b/src/views/oneMap/components/monitorCalender.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 海绵监测分析--降雨日历统计 -->
-  <div class="monitorCalender">
+  <div class="monitorCalenderHM">
     <div class="selectTitleHM">
       <div class="flex select_box">
         <!-- 日期类型选择 -->
@@ -12,13 +12,13 @@
         <!-- 日历 -->
         <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' : ''"
+          value-format="YYYY-MM"
+          type="month"
           v-model="datevalue"
           placeholder="选择日期"
           style="width: 140px; margin: 10px 10px"
           @change="timeChange"
-          class="datePicker"
+          class="datePickerHM"
           popper-class="haiMianScreenPopper"
           size="small"
         />
@@ -136,7 +136,7 @@
 </script>
 
 <style lang="scss" scoped>
-.monitorCalender {
+.monitorCalenderHM {
   .selectTitleHM {
     display: flex;
     align-items: center;
diff --git a/src/views/oneMap/components/pipeFX.vue b/src/views/oneMap/components/pipeFX.vue
new file mode 100644
index 0000000..8e4d4db
--- /dev/null
+++ b/src/views/oneMap/components/pipeFX.vue
@@ -0,0 +1,259 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+      var barWidth = 12;
+      var option;
+      option = {
+        color: ['#FFB049', '#FFB049'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 30,
+          bottom: 30,
+          right: 70,
+        },
+        legend: {
+          data: ['降雨量(mm)', '流速(m/s)', '水深(cm)'],
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 14,
+              fontFamily: 'AlibabaPuHuiTi',
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.yAxisName1 || '',
+            inverse: props.data.inverse || false, //翻转
+            type: 'value',
+            axisLabel: {
+              color: 'rgba(73, 197, 255, 1)',
+              show: true,
+            },
+            nameTextStyle: {
+              color: 'rgba(73, 197, 255, 1)',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+          },
+          {
+            name: props.data.yAxisName2 || '',
+            inverse: true,
+            nameLocation: 'start', // 坐标轴名称显示位置
+            type: 'value',
+            offset: 30,
+            nameTextStyle: {
+              color: '#FFB049',
+            },
+            axisLabel: {
+              show: true,
+              color: '#FFB049',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#1D5D81',
+                type: 'dashed',
+              },
+            },
+          },
+          {
+            name: props.data.yAxisName3 || '',
+            inverse: true,
+            nameLocation: 'start', // 坐标轴名称显示位置
+            type: 'value',
+            nameTextStyle: {
+              color: '#1BFFF7',
+            },
+            axisLabel: {
+              show: true,
+              color: '#1BFFF7',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#1D5D81',
+                type: 'dashed',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '降雨量(mm)',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(169, 210, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(73, 197, 255, 1)',
+                },
+              ]),
+              borderRadius: [0, 0, 10, 10],
+            },
+            yAxisIndex: 0,
+            data: props.data.yAxis1,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '水深(cm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFB049',
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '流速(m/s)',
+            type: 'line',
+            data: props.data.yAxis3,
+            yAxisIndex: 2,
+            color: '#1BFFF7',
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '轻微风险警戒线：{c}',
+                color: '#FFFF80',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#FFFF80',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '轻微风险警戒线',
+                  yAxis: '24.2',
+                },
+              ],
+            },
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '溢流风险警戒线：{c}',
+                color: '#E20F36',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#E20F36',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '溢流风险警戒线',
+                  yAxis: '28',
+                },
+              ],
+            },
+          },
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 2000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>

diff --git a/src/assets/styles/fxddMap.scss b/src/assets/styles/fxddMap.scss
index 60daf54..bd90217 100644
--- a/src/assets/styles/fxddMap.scss
+++ b/src/assets/styles/fxddMap.scss
@@ -181,16 +181,12 @@
 .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;
@@ -204,24 +200,23 @@
     }
   }
 }
-.datePicker {
-  .el-input {
-    .el-input__wrapper {
-      box-shadow: none !important;
-      background: #00344fff;
-      border-radius: 2px;
-      border: 1px solid #1cf5fcff;
+.datePickerHM {
+  .el-input__wrapper {
+    box-shadow: none !important;
+    background: #00344fff;
+    border-radius: 2px;
+    border: 1px solid #1cf5fcff;
+    height: 26px;
 
-      .el-input__inner {
+    .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;
-
-        &::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 fda3f3c..00e1132 100644
--- a/src/views/oneMap/components/ZHHM_JCFX.vue
+++ b/src/views/oneMap/components/ZHHM_JCFX.vue
@@ -10,16 +10,132 @@
 
         <!-- 内涝积水分析 -->
         <div class="Box_header">内涝积水分析</div>
-        
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">内涝风险点</div>
+          </div>
+          <el-select clearable filterable v-model="riskStation" placeholder="请选择内涝风险点" size="small" class="picker">
+            <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </div>
+        <div class="chartHeight">
+          <chartLogging :data="chartData1" :refresh="chartData1.refresh"></chartLogging>
+        </div>
+        <div class="flex flexLeg">
+          <div class="legPart"><span class="yellow"></span>轻微内涝警戒线</div>
+          <div class="legPart"><span class="red"></span>严重内涝警戒线</div>
+        </div>
+
+        <!-- 内涝分析成因分析 -->
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">内涝分析成因分析</div>
+          </div>
+        </div>
+        <table class="tableFX">
+          <tr>
+            <td class="title">当前状况</td>
+            <td>未出现内涝积水情况</td>
+          </tr>
+          <tr>
+            <td class="title">数据分析</td>
+            <td>初雨出流较慢但持续一段时间正常</td>
+          </tr>
+          <tr>
+            <td class="title">历史成因</td>
+            <td>区域局部地理位置较低，收水范围过大</td>
+          </tr>
+        </table>
       </div>
     </div>
     <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
       <div class="ComBox">
         <!-- 典型项目分析 -->
         <div class="Box_header">典型项目分析</div>
+        <div class="flex flex-justcontent-end">
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择典型项目"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option v-for="dict in riskList" :key="dict.value" :label="dict.label" :value="dict.value" />
+          </el-select>
+        </div>
+        <div style="height: 220px">
+          <projectDX :data="chartData2" :refresh="chartData2.refresh"></projectDX>
+        </div>
 
         <!-- 关键管网分析 -->
         <div class="Box_header">关键管网分析</div>
+        <div class="flex flex-justcontent-spacearound">
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择分区"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option label="延河南岸分区" value="1" />
+          </el-select>
+          <el-select
+            clearable
+            filterable
+            v-model="riskStation"
+            placeholder="请选择管网监测点"
+            size="small"
+            class="picker"
+            style="margin: 10px 0px"
+          >
+            <el-option label="延河南岸监测点1" value="1" />
+          </el-select>
+        </div>
+        <div class="chartHeightR">
+          <pipeFX :data="chartData3" :refresh="chartData3.refresh"></pipeFX>
+        </div>
+        <div class="flex flexLeg">
+          <div class="legPart"><span class="yellow"></span>轻微风险警戒线</div>
+          <div class="legPart"><span class="red"></span>溢流风险警戒线</div>
+        </div>
+
+        <!-- 风险成因分析 -->
+        <div class="titSmall flex flex-align-center">
+          <div class="flex">
+            <span></span>
+            <div class="name">风险成因分析</div>
+          </div>
+        </div>
+        <table class="tableFX">
+          <tr>
+            <td class="title">当前状况</td>
+            <td>未出现风险运行</td>
+          </tr>
+          <tr>
+            <td class="title" rowspan="2">数据分析</td>
+            <td>出流时间与降雨峰值有时间偏差</td>
+          </tr>
+          <tr>
+            <td>降雨过后1小时后管网有积水</td>
+          </tr>
+          <tr>
+            <td class="title">管网管径</td>
+            <td>DN300</td>
+          </tr>
+          <tr>
+            <td class="title" rowspan="2">风险分析</td>
+            <td>管网普查报告中该段管网存在缺陷</td>
+          </tr>
+          <tr>
+            <td>溢流风险运行35分钟</td>
+          </tr>
+        </table>
       </div>
     </div>
   </div>
@@ -28,8 +144,36 @@
 <script setup name="ZHHM_JCFX">
 import { ref, reactive, toRefs, onMounted, defineProps, defineEmits } from 'vue';
 import monitorCalender from './monitorCalender.vue';
+import chartLogging from './chartLogging'; //内涝积水点
+import projectDX from './projectDX'; //典型项目分析
+import pipeFX from './pipeFX'; //管网分析
 
 const showPanel = ref(true); //面板展开收起
+const chartData1 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  inverse: true,
+  yAxis: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
+  yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流量
+  refresh: 1,
+});
+const chartData2 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  yAxis1: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //水深
+  yAxis2: [50, 55, 80, 50, 46, 65, 70, 50, 78, 52, 69, 90], //ss
+  yAxisName1: '水深(cm)',
+  yAxisName2: 'ss(mg/L)',
+  refresh: 1,
+});
+const chartData3 = ref({
+  xAxis: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'],
+  inverse: true,
+  yAxis1: [1, 2, 2.3, 2, 1.1, 2.5, 1.9, 2.5, 2.8, 1.1, 2.1, 3], //降雨量
+  yAxis2: [20, 20.2, 21.3, 20.2, 22.1, 19.4, 20, 21, 23.6, 20.1, 21.2, 29], //水深
+  yAxis3: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5], //流速
+  refresh: 1,
+});
+const riskStation = ref('1');
+const riskList = ref([{ value: '1', label: '大砭沟与北大街交叉口' }]);
 
 // 面板内容展开收起控制
 const props = defineProps({
@@ -57,6 +201,34 @@
 #ZHHM_JCFX {
   width: 100%;
   height: 100%;
+  .chartHeight {
+    width: 100%;
+    height: calc(100vh - 720px);
+    margin: 5px auto;
+  }
+  .chartHeightR {
+    width: 100%;
+    height: calc(100vh - 780px);
+    margin: 5px auto;
+  }
+  .tableFX {
+    border-collapse: collapse;
+    width: 95%;
+    margin: 10px 2%;
+    td {
+      border: 1px solid #1cf5fc;
+      text-align: center;
+      font-family: Source Han Sans CN;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 5px 0px;
+      color: #a5d2ff;
+      background: #075680;
+    }
+    .title {
+      color: #00f2ff;
+    }
+  }
   .LeftBox {
     width: 450px;
     height: calc(100% - 98px);
@@ -86,6 +258,7 @@
   .ComBox {
     width: 100%;
     box-sizing: border-box;
+
     .Box_header {
       width: 100%;
       height: 43px;
@@ -99,6 +272,57 @@
       box-sizing: border-box;
       padding-left: 35px;
     }
+    .titSmall {
+      justify-content: space-between;
+      padding: 0px 15px;
+      margin-top: 10px;
+      .flex {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        align-items: center;
+        span {
+          width: 10px;
+          height: 10px;
+          display: inline-block;
+          margin-right: 6px;
+          background: #fff;
+          transform: rotate(45deg);
+        }
+        .name {
+          background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%);
+          padding: 0px 3px;
+          height: 10px;
+          line-height: 0px;
+          margin-top: 6px;
+        }
+      }
+    }
+    .flexLeg {
+      justify-content: center;
+      margin-bottom: 20px;
+      .legPart {
+        font-family: Source Han Sans CN;
+        font-weight: bold;
+        font-size: 14px;
+        color: #ebfeff;
+        text-align: center;
+        margin-right: 20px;
+        span {
+          width: 10px;
+          height: 10px;
+          display: inline-block;
+          margin-right: 6px;
+        }
+        .yellow {
+          background: #ffff80;
+        }
+        .red {
+          background: #e20f36;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/oneMap/components/chartLogging.vue b/src/views/oneMap/components/chartLogging.vue
new file mode 100644
index 0000000..294e59a
--- /dev/null
+++ b/src/views/oneMap/components/chartLogging.vue
@@ -0,0 +1,231 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+      var barWidth = 12;
+      var option;
+      option = {
+        color: ['#FFB049', '#FFB049'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 30,
+          bottom: 30,
+          right: 50,
+        },
+        legend: {
+          data: ['降雨量(mm)', '积水深(cm)'],
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 14,
+              fontFamily: 'AlibabaPuHuiTi',
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.yAxisName1 || '',
+            inverse: props.data.inverse || false, //翻转
+            type: 'value',
+            axisLabel: {
+              color: 'rgba(73, 197, 255, 1)',
+              show: true,
+            },
+            nameTextStyle: {
+              color: 'rgba(73, 197, 255, 1)',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+          },
+          {
+            name: props.data.yAxisName2 || '',
+            inverse: true,
+            nameLocation: 'start', // 坐标轴名称显示位置
+            type: 'value',
+            nameTextStyle: {
+              color: '#FFB049',
+            },
+            axisLabel: {
+              show: true,
+              color: '#FFB049',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#1D5D81',
+                type: 'dashed',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '降雨量(mm)',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(169, 210, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(73, 197, 255, 1)',
+                },
+              ]),
+              borderRadius: [0, 0, 10, 10],
+            },
+            yAxisIndex: 0,
+            data: props.data.yAxis,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '积水深(cm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFB049',
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '轻微内涝警戒线：{c}',
+                color: '#FFFF80',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#FFFF80',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '轻微内涝警戒线',
+                  yAxis: '0.2',
+                },
+              ],
+            },
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '严重内涝警戒线：{c}',
+                color: '#E20F36',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#E20F36',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '严重内涝警戒线',
+                  yAxis: '0.4',
+                },
+              ],
+            },
+          },
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 2000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/oneMap/components/monitorCalender.vue b/src/views/oneMap/components/monitorCalender.vue
index bc518af..e045dba 100644
--- a/src/views/oneMap/components/monitorCalender.vue
+++ b/src/views/oneMap/components/monitorCalender.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 海绵监测分析--降雨日历统计 -->
-  <div class="monitorCalender">
+  <div class="monitorCalenderHM">
     <div class="selectTitleHM">
       <div class="flex select_box">
         <!-- 日期类型选择 -->
@@ -12,13 +12,13 @@
         <!-- 日历 -->
         <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' : ''"
+          value-format="YYYY-MM"
+          type="month"
           v-model="datevalue"
           placeholder="选择日期"
           style="width: 140px; margin: 10px 10px"
           @change="timeChange"
-          class="datePicker"
+          class="datePickerHM"
           popper-class="haiMianScreenPopper"
           size="small"
         />
@@ -136,7 +136,7 @@
 </script>
 
 <style lang="scss" scoped>
-.monitorCalender {
+.monitorCalenderHM {
   .selectTitleHM {
     display: flex;
     align-items: center;
diff --git a/src/views/oneMap/components/pipeFX.vue b/src/views/oneMap/components/pipeFX.vue
new file mode 100644
index 0000000..8e4d4db
--- /dev/null
+++ b/src/views/oneMap/components/pipeFX.vue
@@ -0,0 +1,259 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+      var barWidth = 12;
+      var option;
+      option = {
+        color: ['#FFB049', '#FFB049'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 30,
+          bottom: 30,
+          right: 70,
+        },
+        legend: {
+          data: ['降雨量(mm)', '流速(m/s)', '水深(cm)'],
+          textStyle: {
+            color: '#fff',
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 14,
+              fontFamily: 'AlibabaPuHuiTi',
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.yAxisName1 || '',
+            inverse: props.data.inverse || false, //翻转
+            type: 'value',
+            axisLabel: {
+              color: 'rgba(73, 197, 255, 1)',
+              show: true,
+            },
+            nameTextStyle: {
+              color: 'rgba(73, 197, 255, 1)',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+          },
+          {
+            name: props.data.yAxisName2 || '',
+            inverse: true,
+            nameLocation: 'start', // 坐标轴名称显示位置
+            type: 'value',
+            offset: 30,
+            nameTextStyle: {
+              color: '#FFB049',
+            },
+            axisLabel: {
+              show: true,
+              color: '#FFB049',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#1D5D81',
+                type: 'dashed',
+              },
+            },
+          },
+          {
+            name: props.data.yAxisName3 || '',
+            inverse: true,
+            nameLocation: 'start', // 坐标轴名称显示位置
+            type: 'value',
+            nameTextStyle: {
+              color: '#1BFFF7',
+            },
+            axisLabel: {
+              show: true,
+              color: '#1BFFF7',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#1D5D81',
+                type: 'dashed',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '降雨量(mm)',
+            type: 'bar',
+            barWidth: barWidth,
+            barGap: '10%', // Make series be overlap
+            barCateGoryGap: '10%',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+                {
+                  offset: 0,
+                  color: 'rgba(169, 210, 255, 1)',
+                },
+                {
+                  offset: 1,
+                  color: 'rgba(73, 197, 255, 1)',
+                },
+              ]),
+              borderRadius: [0, 0, 10, 10],
+            },
+            yAxisIndex: 0,
+            data: props.data.yAxis1,
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '水深(cm)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#FFB049',
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '流速(m/s)',
+            type: 'line',
+            data: props.data.yAxis3,
+            yAxisIndex: 2,
+            color: '#1BFFF7',
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '轻微风险警戒线：{c}',
+                color: '#FFFF80',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#FFFF80',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '轻微风险警戒线',
+                  yAxis: '24.2',
+                },
+              ],
+            },
+          },
+          {
+            type: 'line',
+            yAxisIndex: 1,
+            markLine: {
+              symbol: 'none',
+              label: {
+                show: false,
+                position: 'middle',
+                formatter: '溢流风险警戒线：{c}',
+                color: '#E20F36',
+                fontWeight: 'bold',
+              },
+              lineStyle: {
+                color: '#E20F36',
+                width: 1,
+                type: 'solid',
+              },
+              data: [
+                {
+                  name: '溢流风险警戒线',
+                  yAxis: '28',
+                },
+              ],
+            },
+          },
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 2000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
diff --git a/src/views/oneMap/components/projectDX.vue b/src/views/oneMap/components/projectDX.vue
new file mode 100644
index 0000000..96a825c
--- /dev/null
+++ b/src/views/oneMap/components/projectDX.vue
@@ -0,0 +1,158 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/ruoyi';
+import { reactive, toRefs, onMounted, watch, onUnmounted } from 'vue';
+export default {
+  name: 'line-chart',
+  props: {
+    data: Object,
+    refresh: Number,
+  },
+  setup(props) {
+    const allData = reactive({
+      series: [],
+      legend: [],
+      id: guid(),
+      chart: null,
+      timer: null,
+    });
+    const resizeTheChart = () => {
+      if (allData.chart) {
+        allData.chart.resize();
+      }
+    };
+
+    const init = () => {
+      let chartDom = echarts.init(document.getElementById(allData.id));
+      var barWidth = 12;
+      var option;
+      option = {
+        color: ['#FFB049', '#FFB049'],
+        tooltip: {
+          trigger: 'axis',
+        },
+        grid: {
+          top: 30,
+          bottom: 30,
+          right: 50,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: 'rgba(255,255,255,1)',
+              fontSize: 14,
+              fontFamily: 'AlibabaPuHuiTi',
+            },
+            data: props.data.xAxis,
+          },
+        ],
+        yAxis: [
+          {
+            name: props.data.yAxisName1 || '',
+            type: 'value',
+            axisLabel: {
+              color: '#FFB049',
+              show: true,
+            },
+            nameTextStyle: {
+              color: '#FFB049',
+            },
+            splitLine: {
+              lineStyle: {
+                type: 'dashed',
+                color: '#60C2FF',
+              },
+            },
+          },
+          {
+            name: props.data.yAxisName2 || '',
+            type: 'value',
+            nameTextStyle: {
+              color: '#1BFFF7',
+            },
+            axisLabel: {
+              show: true,
+              color: '#1BFFF7',
+            },
+            splitLine: {
+              lineStyle: {
+                color: '#1D5D81',
+                type: 'dashed',
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: '水深(cm)',
+            type: 'line',
+            data: props.data.yAxis1,
+            yAxisIndex: 0,
+            color: '#FFB049',
+          },
+          {
+            // smooth: true, //变为曲线 默认false折线
+            name: 'ss(mg/L)',
+            type: 'line',
+            data: props.data.yAxis2,
+            yAxisIndex: 1,
+            color: '#1BFFF7',
+          },
+        ],
+      };
+      option && chartDom.setOption(option, true);
+      allData.chart = chartDom;
+      animateChart();
+    };
+    watch(
+      () => props.refresh,
+      () => {
+        if (allData.chart) {
+          allData.chart.dispose();
+          allData.chart = null;
+        }
+        setTimeout(() => {
+          init();
+        }, 0);
+      }
+    );
+    // echarts动画
+    function animateChart() {
+      let length = props.data.xAxis.length;
+      let i = 0;
+      allData.timer = setInterval(() => {
+        i++;
+        if (i == length) i = 0;
+        allData.chart.dispatchAction({
+          type: 'showTip',
+          seriesIndex: 0,
+          dataIndex: i,
+        });
+      }, 2000);
+    }
+    onMounted(() => {
+      init();
+      window.addEventListener('resize', resizeTheChart);
+    });
+    onUnmounted(() => {
+      if (allData.timer) clearInterval(allData.timer);
+    });
+    return {
+      ...toRefs(allData),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>