diff --git a/src/views/oneMap/FloodStuationReview/xqRightBox.vue b/src/views/oneMap/FloodStuationReview/xqRightBox.vue
index f049f76..3389e46 100644
--- a/src/views/oneMap/FloodStuationReview/xqRightBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqRightBox.vue
@@ -176,7 +176,7 @@
 const activeIndex = ref(0);
 const munuList = [
   {
-    name: '管网(43)',
+    name: '管网(29)',
   },
   {
     name: '积水点(16)',

diff --git a/src/views/oneMap/FloodStuationReview/xqRightBox.vue b/src/views/oneMap/FloodStuationReview/xqRightBox.vue
index f049f76..3389e46 100644
--- a/src/views/oneMap/FloodStuationReview/xqRightBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqRightBox.vue
@@ -176,7 +176,7 @@
 const activeIndex = ref(0);
 const munuList = [
   {
-    name: '管网(43)',
+    name: '管网(29)',
   },
   {
     name: '积水点(16)',
diff --git a/src/views/oneMap/floodPrevention/FhplLeftBox.vue b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
index df08091..77e3fe7 100644
--- a/src/views/oneMap/floodPrevention/FhplLeftBox.vue
+++ b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
@@ -19,7 +19,15 @@
         <div class="weight">气象预报</div>
         <div class="text">未来24h中心城区累计降雨达12mm</div>
       </div>
-      <div class="echartBox"></div>
+      <div class="rainChartInfo flex flex-align-center">
+        <div class="square"></div>
+        <div style="margin-left: 5px">监测降雨</div>
+        <div class="squareA"></div>
+        <div style="margin-left: 5px">未来24h预报降雨</div>
+      </div>
+      <div class="echartBox">
+        <BarChart :echartData="monitorData" :refresh="monitorData.refresh" :key="monitorKey" />
+      </div>
     </div>
   </div>
   <!-- 城市易涝点监测 -->
@@ -163,11 +171,12 @@
 import monitor_icon from '@/assets/images/fhpl/monitor_icon.png';
 import warn from '@/assets/images/fhpl/warn.png';
 import lsyj from '@/assets/images/fhpl/lsyj.png';
-
+import BarChart from './barChart.vue';
 const LegendShow = ref(false);
 const gjimg = ref(true);
 const lsyjimg = ref(false);
-
+const monitorKey = ref(1);
+const monitorData = ref({ refresh: '1' });
 const form = ref({
   modelId: '',
   rangeTime: [],
@@ -265,6 +274,25 @@
   gjimg.value = false;
   lsyjimg.value = true;
 }
+
+function getRainTrend() {
+  monitorData.value.history = ['0.50', '0.00'];
+  monitorData.value.forecast = ['0.50', '0.00'];
+  monitorData.value.totalData = [...monitorData.value.history, ...monitorData.value.forecast];
+  monitorData.value.dateRange = [
+    '2024-10-09 16:00:00',
+    '2024-10-09 19:00:00',
+    '2024-10-09 22:00:00',
+    '2024-10-10 01:00:00',
+    '2024-10-10 04:00:00',
+  ];
+  console.log(monitorData.value, '111111111');
+
+  monitorData.value.refresh = Math.random();
+}
+onMounted(() => {
+  getRainTrend();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -283,7 +311,7 @@
 .meteorological {
   width: 450px;
   height: 33%;
-  // background: rgb(204, 184, 184);
+
   .qxyb {
     margin: 5px auto;
     width: 430px;
@@ -309,13 +337,33 @@
         margin-left: 30px;
       }
     }
+    .rainChartInfo {
+      margin: auto;
+      height: 20px;
+      width: 70%;
+      color: #c6c6c6;
+      // background: red;
+      .square {
+        width: 10px;
+        height: 10px;
+        background-color: #48a0fb;
+        margin-left: 50px;
+      }
+      .squareA {
+        width: 10px;
+        height: 10px;
+        background-color: #d3c60b;
+        margin-left: 30px;
+      }
+    }
     .echartBox {
       position: relative;
       top: 3px;
       width: 430px;
-      height: calc(100% - 38px);
-      background: url('@/assets/images/fhpl/eachar.png') no-repeat;
-      background-size: 100% 100%;
+      height: calc(100% - 50px);
+
+      // background: url('@/assets/images/fhpl/eachar.png') no-repeat;
+      // background-size: 100% 100%;
     }
   }
 }

diff --git a/src/views/oneMap/FloodStuationReview/xqRightBox.vue b/src/views/oneMap/FloodStuationReview/xqRightBox.vue
index f049f76..3389e46 100644
--- a/src/views/oneMap/FloodStuationReview/xqRightBox.vue
+++ b/src/views/oneMap/FloodStuationReview/xqRightBox.vue
@@ -176,7 +176,7 @@
 const activeIndex = ref(0);
 const munuList = [
   {
-    name: '管网(43)',
+    name: '管网(29)',
   },
   {
     name: '积水点(16)',
diff --git a/src/views/oneMap/floodPrevention/FhplLeftBox.vue b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
index df08091..77e3fe7 100644
--- a/src/views/oneMap/floodPrevention/FhplLeftBox.vue
+++ b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
@@ -19,7 +19,15 @@
         <div class="weight">气象预报</div>
         <div class="text">未来24h中心城区累计降雨达12mm</div>
       </div>
-      <div class="echartBox"></div>
+      <div class="rainChartInfo flex flex-align-center">
+        <div class="square"></div>
+        <div style="margin-left: 5px">监测降雨</div>
+        <div class="squareA"></div>
+        <div style="margin-left: 5px">未来24h预报降雨</div>
+      </div>
+      <div class="echartBox">
+        <BarChart :echartData="monitorData" :refresh="monitorData.refresh" :key="monitorKey" />
+      </div>
     </div>
   </div>
   <!-- 城市易涝点监测 -->
@@ -163,11 +171,12 @@
 import monitor_icon from '@/assets/images/fhpl/monitor_icon.png';
 import warn from '@/assets/images/fhpl/warn.png';
 import lsyj from '@/assets/images/fhpl/lsyj.png';
-
+import BarChart from './barChart.vue';
 const LegendShow = ref(false);
 const gjimg = ref(true);
 const lsyjimg = ref(false);
-
+const monitorKey = ref(1);
+const monitorData = ref({ refresh: '1' });
 const form = ref({
   modelId: '',
   rangeTime: [],
@@ -265,6 +274,25 @@
   gjimg.value = false;
   lsyjimg.value = true;
 }
+
+function getRainTrend() {
+  monitorData.value.history = ['0.50', '0.00'];
+  monitorData.value.forecast = ['0.50', '0.00'];
+  monitorData.value.totalData = [...monitorData.value.history, ...monitorData.value.forecast];
+  monitorData.value.dateRange = [
+    '2024-10-09 16:00:00',
+    '2024-10-09 19:00:00',
+    '2024-10-09 22:00:00',
+    '2024-10-10 01:00:00',
+    '2024-10-10 04:00:00',
+  ];
+  console.log(monitorData.value, '111111111');
+
+  monitorData.value.refresh = Math.random();
+}
+onMounted(() => {
+  getRainTrend();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -283,7 +311,7 @@
 .meteorological {
   width: 450px;
   height: 33%;
-  // background: rgb(204, 184, 184);
+
   .qxyb {
     margin: 5px auto;
     width: 430px;
@@ -309,13 +337,33 @@
         margin-left: 30px;
       }
     }
+    .rainChartInfo {
+      margin: auto;
+      height: 20px;
+      width: 70%;
+      color: #c6c6c6;
+      // background: red;
+      .square {
+        width: 10px;
+        height: 10px;
+        background-color: #48a0fb;
+        margin-left: 50px;
+      }
+      .squareA {
+        width: 10px;
+        height: 10px;
+        background-color: #d3c60b;
+        margin-left: 30px;
+      }
+    }
     .echartBox {
       position: relative;
       top: 3px;
       width: 430px;
-      height: calc(100% - 38px);
-      background: url('@/assets/images/fhpl/eachar.png') no-repeat;
-      background-size: 100% 100%;
+      height: calc(100% - 50px);
+
+      // background: url('@/assets/images/fhpl/eachar.png') no-repeat;
+      // background-size: 100% 100%;
     }
   }
 }
diff --git a/src/views/oneMap/floodPrevention/barChart.vue b/src/views/oneMap/floodPrevention/barChart.vue
new file mode 100644
index 0000000..f3ec835
--- /dev/null
+++ b/src/views/oneMap/floodPrevention/barChart.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="chartBox" :id="id"></div>
+</template>
+<script setup name="pieChartGszl">
+import { guid } from '@/utils/ruoyi';
+const { proxy } = getCurrentInstance();
+import { nowSize } from '@/utils/util.js';
+import moment from 'moment';
+const props = defineProps({
+  //刷新标志
+  refresh: {
+    type: [String, Number],
+    default: 1,
+  },
+  //数据
+  echartData: {
+    type: Object,
+    default: {},
+  },
+});
+
+const id = guid();
+const myChart = shallowRef('');
+
+watch(
+  () => props.refresh,
+  value => {
+    //先销毁实例
+    myChart.value && myChart.value.dispose();
+    intChart();
+  }
+);
+//自适应
+function resizeTheChart() {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+}
+//初始化
+function intChart() {
+  myChart.value = proxy.echarts.init(document.getElementById(id));
+  myChart.value.clear();
+  // 绘制图表
+  myChart.value.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+        label: {
+          show: true,
+        },
+      },
+    },
+    grid: {
+      top: nowSize(30, 1920),
+      bottom: nowSize(30, 1920), //也可设置left和right设置距离来控制图表的大小
+      left: nowSize(50, 1920),
+      right: nowSize(10, 1920),
+    },
+    xAxis: {
+      data: props.echartData.dateRange,
+      axisLine: {
+        show: true, //隐藏X轴轴线
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisTick: {
+        show: false, //隐藏X轴刻度
+        lineStyle: {
+          color: 'rgba(44, 110, 189, 1)',
+        },
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(179, 194, 209, 1)',
+        fontSize: nowSize(12, 1920),
+        formatter: value => {
+          return moment(value).format('HH:mm');
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      name: '单位:mm',
+      nameTextStyle: {
+        color: 'rgba(179, 194, 209, 1)',
+        fontSize: nowSize(14, 1920),
+      },
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        color: 'rgba(179, 194, 209, 1)',
+        fontSize: nowSize(12, 1920),
+      },
+      splitLine: {
+        //网格线
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(44, 110, 189, 1)', //设置网格线类型 dotted：虚线   solid:实线
+        },
+        show: true, //隐藏或显示
+      },
+    },
+    series: {
+      type: 'bar',
+      name: '雨量',
+      data: props.echartData.totalData,
+      barWidth: nowSize(8, 1920),
+      itemStyle: {
+        barBorderRadius: nowSize(15, 1920),
+        color: parms => {
+          let color1 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#48a0fb',
+            },
+            {
+              offset: 1,
+              color: 'rgba(57, 247, 255, 0.2)',
+            },
+          ]);
+          let color2 = new proxy.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(254,203,21, 1)',
+            },
+            {
+              offset: 1,
+              color: 'rgba(254,203,21, 0.2)',
+            },
+          ]);
+          if (parms.dataIndex < props.echartData.history.length) {
+            return color1;
+          } else {
+            return color2;
+          }
+        },
+      },
+    },
+  });
+}
+onMounted(() => {
+  intChart();
+  window.addEventListener('resize', resizeTheChart);
+});
+</script>
+
+<style lang="scss" scoped>
+.chartBox {
+  width: 100%;
+  height: 100%;
+}
+</style>