diff --git a/src/api/dataAnalysis/syntherticData.js b/src/api/dataAnalysis/syntherticData.js
index 91b5a48..c874433 100644
--- a/src/api/dataAnalysis/syntherticData.js
+++ b/src/api/dataAnalysis/syntherticData.js
@@ -149,3 +149,12 @@
     params: query,
   });
 }
+
+// 未来24小时预报（高分天气）
+export function xfEachHour(query) {
+  return request({
+    url: '/business/weatherForecast/xfEachHour',
+    method: 'get',
+    params: query,
+  });
+}

diff --git a/src/api/dataAnalysis/syntherticData.js b/src/api/dataAnalysis/syntherticData.js
index 91b5a48..c874433 100644
--- a/src/api/dataAnalysis/syntherticData.js
+++ b/src/api/dataAnalysis/syntherticData.js
@@ -149,3 +149,12 @@
     params: query,
   });
 }
+
+// 未来24小时预报（高分天气）
+export function xfEachHour(query) {
+  return request({
+    url: '/business/weatherForecast/xfEachHour',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 2153cb7..c8eb408 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(4);
+const menuIndex = ref(1);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);

diff --git a/src/api/dataAnalysis/syntherticData.js b/src/api/dataAnalysis/syntherticData.js
index 91b5a48..c874433 100644
--- a/src/api/dataAnalysis/syntherticData.js
+++ b/src/api/dataAnalysis/syntherticData.js
@@ -149,3 +149,12 @@
     params: query,
   });
 }
+
+// 未来24小时预报（高分天气）
+export function xfEachHour(query) {
+  return request({
+    url: '/business/weatherForecast/xfEachHour',
+    method: 'get',
+    params: query,
+  });
+}
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index 2153cb7..c8eb408 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -179,7 +179,7 @@
   { name: '排水防涝', id: 4 },
   { name: '长效运维', id: 5 },
 ]);
-const menuIndex = ref(4);
+const menuIndex = ref(1);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/waterFlood/rainFutureHour.vue b/src/views/sponeScreen/waterFlood/rainFutureHour.vue
index 2c01744..6328b04 100644
--- a/src/views/sponeScreen/waterFlood/rainFutureHour.vue
+++ b/src/views/sponeScreen/waterFlood/rainFutureHour.vue
@@ -9,19 +9,185 @@
 </template>
 
 <script setup>
-import axios from 'axios';
+import * as echarts from 'echarts';
+import { xfEachHour } from '@/api/dataAnalysis/syntherticData';
+import SunWea from '@/assets/images/weather_icon/icon__00.png';
+import DYWea from '@/assets/images/weather_icon/icon__01.png';
+
 const { proxy } = getCurrentInstance();
+const chartOption = ref({
+  tooltip: {
+    trigger: 'axis',
+    show: false,
+  },
+  grid: {
+    top: 40,
+    bottom: 30,
+    left: 30,
+    right: 30,
+  },
+  xAxis: {
+    type: 'category',
+    axisLine: {
+      show: false,
+      lineStyle: {
+        width: 2,
+        color: '#58b2ed',
+      },
+    },
+    splitLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: 'rgba(255,255,255,1)',
+      fontSize: 12,
+      fontFamily: 'AlibabaPuHuiTi',
+    },
+    data: [],
+  },
+  yAxis: [
+    {
+      type: 'value',
+      name: 'mm',
+      axisLabel: {
+        color: 'rgba(24, 255, 255, 1)',
+        show: true,
+      },
+      nameTextStyle: {
+        color: 'rgba(24, 255, 255, 1)',
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#60C2FF',
+          opacity: 0.3,
+        },
+      },
+    },
+    {
+      type: 'value',
+      name: '℃',
+      axisLabel: {
+        color: '#FFB049',
+        show: true,
+      },
+      nameTextStyle: {
+        color: '#FFB049',
+      },
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: '#60C2FF',
+          opacity: 0.3,
+        },
+      },
+    },
+  ],
+  // dataZoom: [{ type: 'inside', start: 0, end: 48, realtime: true, xAxisIndex: [0] }],
+  series: [
+    {
+      data: [],
+      name: '降雨量',
+      type: 'bar',
+      yAxisIndex: 0,
+      barGap: '10%', // Make series be overlap
+      barCateGoryGap: '10%',
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
+          {
+            offset: 0,
+            color: 'rgba(24, 255, 255, 1)',
+          },
+          {
+            offset: 1,
+            color: 'rgba(188, 255, 255, 1)',
+          },
+        ]),
+      },
+    },
+    {
+      data: [],
+      name: '天气',
+      type: 'line',
+      yAxisIndex: 1,
+      markPoint: {
+        symbolOffset: [0, -20],
+        symbolSize: 20,
+        itemStyle: {
+          color: '#56ACEF',
+        },
+        data: [],
+      },
+      lineStyle: {
+        opacity: 0,
+      },
+      itemStyle: {
+        opacity: 0,
+      },
+    },
+    {
+      data: [],
+      name: '温度',
+      type: 'line',
+      smooth: true,
+      color: '#FFB049',
+      yAxisIndex: 1,
+    },
+  ],
+});
 
 // 获取天气信息
 const getWeather = () => {
-  axios
-    .get(`https://gfapi.mlogcn.com/weather/v001/now?key=F2hH0eoTQS99jaKr3v4AIWFQkJwRjMAU&areacode=101180801`)
-    .then(res => {
-      console.log(res.data);
-    })
-    .catch(error => {});
+  let chartDom = echarts.init(document.getElementById('rainFH'));
+  xfEachHour().then(res => {
+    let datas = JSON.parse(res.data).result.hourly_fcsts;
+    let data1 = [],
+      axisList = [],
+      tempData = [],
+      rainData = [],
+      markPointList = [];
+    datas.map((item, index) => {
+      let value = item.temp_fc;
+      data1.push(value);
+      rainData.push(item.prec); //降水量
+      axisList.push(item.data_time.slice(11, 16));
+      markPointList.push({
+        name: '天气',
+        coord: [index, value],
+        symbol: 'image://' + textToImageWea(item.text),
+        animation: true,
+      });
+      tempData.push(item.temp_fc);
+    });
+    chartOption.value.xAxis.data = axisList; //x轴日期
+    chartOption.value.series[1].data = data1; //天气数据降雨量
+    chartOption.value.series[1].markPoint.data = markPointList; //天气标记点
+    chartOption.value.series[2].data = tempData; //温度数据
+    chartOption.value.series[0].data = rainData; //降水量
+    chartDom.clear();
+    chartDom.setOption(chartOption.value, true);
+  });
 };
 
+// 天气转换
+function textToImageWea(text) {
+  if (text == '晴') {
+    return SunWea;
+  } else if (text == '阴') {
+    return SunWea;
+  } else if (text.includes('雪')) {
+    return SunWea;
+  } else if (text.includes('雨')) {
+    return SunWea;
+  } else {
+    // 其他都按多云处理
+    return DYWea;
+  }
+}
+
 onMounted(() => {
   getWeather();
 });