diff --git a/src/views/oneMap/floodPrevention/FhplLeftBox.vue b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
index 6495375..fe2bd59 100644
--- a/src/views/oneMap/floodPrevention/FhplLeftBox.vue
+++ b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
@@ -69,7 +69,7 @@
       <div class="ListBoxHeader_font">延河洪水情监测</div>
     </div>
     <div class="yhhsqjc">
-      <div class="flex flex-r button_box_list">
+      <!-- <div class="flex flex-r button_box_list">
         <div
           class="button_box flex flex-1 flex-justcontent-center flex-align-center"
           v-for="(item, index) in munuList"
@@ -80,7 +80,8 @@
           {{ item.name }}
         </div>
       </div>
-      <div class="img_box"></div>
+      <div class="img_box"></div> -->
+      <yhhsqEch :data="YhList" :refresh="ryRefresh3" />
     </div>
   </div>
 
@@ -173,6 +174,8 @@
 import lsyj from '@/assets/images/fhpl/lsyj.png';
 import BarChart from './barChart.vue';
 import bus from '@/bus';
+import yhhsqEch from './yhhsqEch.vue';
+
 const LegendShow = ref(false);
 const gjimg = ref(true);
 const lsyjimg = ref(false);
@@ -220,7 +223,6 @@
     zt: 0.12,
   },
 ]);
-
 const modelList = ref([
   {
     name: '2024年Ⅳ级蓝色预警',
@@ -264,6 +266,9 @@
     name: '监测4号位',
   },
 ];
+const YhList = ref({});
+const ryRefresh3 = ref('');
+
 //发布预警
 const handelFabu = () => {
   yuJingVisible.value = true;
@@ -302,10 +307,21 @@
     '2024-10-12 21:30:00',
   ];
   console.log(monitorData.value, '111111111');
-
   monitorData.value.refresh = Math.random();
 }
 
+// 延河
+function getDataYh() {
+  let obj = {
+    listName: ['安塞水文站', '延安水文站', '甘谷驿水文站'],
+    diduan: ['1200', '1600', '2000'],
+    zhengzhi: ['100', '120', '130'],
+  };
+  YhList.value = obj;
+  console.log(CsList.value, '  CsList.value');
+  ryRefresh3.value = Math.random();
+}
+
 // 积水弹框
 function spshowMapDalog(val) {
   let data = {
@@ -318,6 +334,7 @@
 
 onMounted(() => {
   getRainTrend();
+  getDataYh();
 });
 </script>
 
@@ -557,6 +574,7 @@
     margin: 5px auto;
     width: 430px;
     height: calc(100% - 62px);
+    // background: red;
     .button_box_list {
       width: 100%;
       margin-bottom: 10px;
@@ -585,9 +603,9 @@
     .img_box {
       margin: 0 auto;
       width: 420px;
+      height: calc(100% - 38px);
       background: url('@/assets/images/fhpl/sqjca.png') no-repeat;
       background-size: 100% 100%;
-      height: calc(100% - 38px);
     }
   }
 }

diff --git a/src/views/oneMap/floodPrevention/FhplLeftBox.vue b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
index 6495375..fe2bd59 100644
--- a/src/views/oneMap/floodPrevention/FhplLeftBox.vue
+++ b/src/views/oneMap/floodPrevention/FhplLeftBox.vue
@@ -69,7 +69,7 @@
       <div class="ListBoxHeader_font">延河洪水情监测</div>
     </div>
     <div class="yhhsqjc">
-      <div class="flex flex-r button_box_list">
+      <!-- <div class="flex flex-r button_box_list">
         <div
           class="button_box flex flex-1 flex-justcontent-center flex-align-center"
           v-for="(item, index) in munuList"
@@ -80,7 +80,8 @@
           {{ item.name }}
         </div>
       </div>
-      <div class="img_box"></div>
+      <div class="img_box"></div> -->
+      <yhhsqEch :data="YhList" :refresh="ryRefresh3" />
     </div>
   </div>
 
@@ -173,6 +174,8 @@
 import lsyj from '@/assets/images/fhpl/lsyj.png';
 import BarChart from './barChart.vue';
 import bus from '@/bus';
+import yhhsqEch from './yhhsqEch.vue';
+
 const LegendShow = ref(false);
 const gjimg = ref(true);
 const lsyjimg = ref(false);
@@ -220,7 +223,6 @@
     zt: 0.12,
   },
 ]);
-
 const modelList = ref([
   {
     name: '2024年Ⅳ级蓝色预警',
@@ -264,6 +266,9 @@
     name: '监测4号位',
   },
 ];
+const YhList = ref({});
+const ryRefresh3 = ref('');
+
 //发布预警
 const handelFabu = () => {
   yuJingVisible.value = true;
@@ -302,10 +307,21 @@
     '2024-10-12 21:30:00',
   ];
   console.log(monitorData.value, '111111111');
-
   monitorData.value.refresh = Math.random();
 }
 
+// 延河
+function getDataYh() {
+  let obj = {
+    listName: ['安塞水文站', '延安水文站', '甘谷驿水文站'],
+    diduan: ['1200', '1600', '2000'],
+    zhengzhi: ['100', '120', '130'],
+  };
+  YhList.value = obj;
+  console.log(CsList.value, '  CsList.value');
+  ryRefresh3.value = Math.random();
+}
+
 // 积水弹框
 function spshowMapDalog(val) {
   let data = {
@@ -318,6 +334,7 @@
 
 onMounted(() => {
   getRainTrend();
+  getDataYh();
 });
 </script>
 
@@ -557,6 +574,7 @@
     margin: 5px auto;
     width: 430px;
     height: calc(100% - 62px);
+    // background: red;
     .button_box_list {
       width: 100%;
       margin-bottom: 10px;
@@ -585,9 +603,9 @@
     .img_box {
       margin: 0 auto;
       width: 420px;
+      height: calc(100% - 38px);
       background: url('@/assets/images/fhpl/sqjca.png') no-repeat;
       background-size: 100% 100%;
-      height: calc(100% - 38px);
     }
   }
 }
diff --git a/src/views/oneMap/floodPrevention/yhhsqEch.vue b/src/views/oneMap/floodPrevention/yhhsqEch.vue
new file mode 100644
index 0000000..187163b
--- /dev/null
+++ b/src/views/oneMap/floodPrevention/yhhsqEch.vue
@@ -0,0 +1,204 @@
+<template>
+  <div :id="id" style="width: 100%; height: 100%"></div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import { guid } from '@/utils/util';
+
+import { reactive, toRefs, onMounted, watch, nextTick } from 'vue';
+
+export default {
+  name: 'shishijiangyu',
+  props: {
+    //刷新标志
+    refresh: {
+      type: [String, Number],
+      default: 1,
+    },
+    //数据
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  setup(props) {
+    const state = reactive({
+      id: guid(),
+      chart: null,
+      xData: [],
+      yData1: [],
+      yData2: [],
+    });
+
+    const resizeTheChart = () => {
+      if (state.chart) {
+        state.chart.resize();
+      }
+    };
+    const init = () => {
+      state.xData = props.data.listName;
+      state.yData1 = props.data.diduan;
+      state.yData2 = props.data.zhengzhi;
+
+      let chartDom = echarts.init(document.getElementById(state.id));
+      var option;
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow',
+          },
+          backgroundColor: '#000000',
+          borderColor: '#00D2FF',
+          textStyle: { fontSize: 14, fontWeight: 500, color: '#00D2FF' },
+        },
+        grid: {
+          top: '22%',
+          left: '10%',
+          right: '8%',
+          bottom: '0%',
+          containLabel: true,
+        },
+        legend: {
+          show: true,
+          textStyle: {
+            color: '#E8F7FF',
+          },
+          itemHeight: 3,
+          itemWidth: 10,
+          icon: 'rect',
+        },
+        xAxis: {
+          type: 'category',
+          data: state.xData,
+
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            color: '#ffffffFF',
+            fontSize: 11,
+          },
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '单位:立方米/秒',
+            alignTicks: true,
+            min: 0,
+            nameTextStyle: {
+              color: '#16d0dcFF',
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dotted',
+                color: 'rgba(14, 107, 165, 1)',
+              },
+            },
+            axisLabel: {
+              color: '#1cf5fcFF',
+            },
+          },
+          {
+            show: false,
+            type: 'value',
+            // name: '整治长度(km)',
+            alignTicks: true,
+            min: 0,
+            position: 'right',
+            nameTextStyle: {
+              color: '#52d183FF',
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dotted',
+                color: 'rgba(14, 107, 165, 1)',
+              },
+            },
+            axisLabel: {
+              color: 'rgb(44 252 100 / 98%)',
+            },
+          },
+        ],
+        series: [
+          {
+            name: '警戒流量',
+            // data: props.data.rainlist,
+            data: state.yData1,
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [2, 2, 0, 0],
+                color: '#1cf5fcFF',
+                // color: new proxy.echarts.graphic.LinearGradient(
+                //   0,
+                //   1,
+                //   0,
+                //   0, // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
+                //   [
+                //     { offset: 1, color: '#1cf5fcFF' },
+                //     { offset: 0, color: 'rgba(11, 167, 124, 0.3)' },
+                //   ]
+                // ),
+              },
+            },
+          },
+          {
+            name: '当前流量',
+            // data: props.data.rainlist,
+            data: state.yData2,
+            yAxisIndex: 1,
+            type: 'bar',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: [2, 2, 0, 0],
+                color: '#ad9760FF',
+                // color: new proxy.echarts.graphic.LinearGradient(
+                //   0,
+                //   1,
+                //   0,
+                //   0, // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
+                //   [
+                //     { offset: 1, color: 'rgb(44 252 100 / 98%)' },
+                //     { offset: 0, color: 'rgb(44 252 100 / 21%)' },
+                //   ]
+                // ),
+              },
+            },
+          },
+        ],
+      };
+
+      option && chartDom.setOption(option, true);
+      state.chart = chartDom;
+    };
+    watch(
+      () => props.refresh,
+      (newVal, oldVal) => {
+        console.log(props, 'props');
+        //先销毁实例
+        // myChart.value && myChart.value.dispose();
+        init();
+      }
+    );
+
+    onMounted(() => {
+      nextTick(() => {
+        init();
+      });
+      window.addEventListener('resize', resizeTheChart);
+    });
+    return {
+      ...toRefs(state),
+      resizeTheChart,
+      init,
+    };
+  },
+};
+</script>
+
+<style></style>