diff --git a/src/api/floodSys/floodYP.js b/src/api/floodSys/floodYP.js
index 7f0bb05..444b597 100644
--- a/src/api/floodSys/floodYP.js
+++ b/src/api/floodSys/floodYP.js
@@ -35,7 +35,14 @@
     timeout: 60 * 1000,
   });
 }
-
+// 海绵综合一张图--内涝积水风险预报
+export function query24hourRainToYuAn(query) {
+  return request({
+    url: '/business//moduleData/query24hourRainToYuAn',
+    method: 'post',
+    data: query,
+  });
+}
 // 预报预警 积水风险占比
 export function countWaterloggingRisk(query) {
   return request({

diff --git a/src/api/floodSys/floodYP.js b/src/api/floodSys/floodYP.js
index 7f0bb05..444b597 100644
--- a/src/api/floodSys/floodYP.js
+++ b/src/api/floodSys/floodYP.js
@@ -35,7 +35,14 @@
     timeout: 60 * 1000,
   });
 }
-
+// 海绵综合一张图--内涝积水风险预报
+export function query24hourRainToYuAn(query) {
+  return request({
+    url: '/business//moduleData/query24hourRainToYuAn',
+    method: 'post',
+    data: query,
+  });
+}
 // 预报预警 积水风险占比
 export function countWaterloggingRisk(query) {
   return request({
diff --git a/src/views/sponeScreen/waterFlood/futureRain.vue b/src/views/sponeScreen/waterFlood/futureRain.vue
index 3ff4be5..702a5a7 100644
--- a/src/views/sponeScreen/waterFlood/futureRain.vue
+++ b/src/views/sponeScreen/waterFlood/futureRain.vue
@@ -10,11 +10,7 @@
     <div class="centerCont flex">
       <p class="title"></p>
       <div class="flex flex-justcontent-spacebetween timeCont">
-        <p>08:00</p>
-        <p>14:00</p>
-        <p>20:00</p>
-        <p>02:00</p>
-        <p>08:00</p>
+        <p v-for="i in timeContList">{{ i }}</p>
       </div>
       <el-button type="warning" style="visibility: hidden"></el-button>
     </div>
@@ -30,56 +26,147 @@
 </template>
 
 <script setup>
+import { query24hourRainToYuAn } from '@/api/floodSys/floodYP';
 const { proxy } = getCurrentInstance();
-
+const timeContList = ref([]);
 const processVal = ref(0);
 const ifStart = ref(true);
 const isdisabled = ref(false);
 const timer = ref(null);
-
+const timelineList = ref([]);
+const featureStep = ref(0);
+const gisJsonData = ref({});
+const gisParams = ref({
+  rainFall: '',
+  ybTime: '',
+  category: 'duration',
+  type: 'depth',
+  realTime: false,
+  hours: '24h',
+  scenario: 'P1',
+});
+let maxPoint = '114.4022666731237,34.84413283884892,0.0';
+let minPoint = '114.29210083997283,34.7401307666175,0.0';
+//内涝风险评估 地图内涝渲染模拟
+const gisModuleData = () => {
+  query24hourRainToYuAn(gisParams.value).then(res => {
+    stopImitate();
+    console.log('12------', res.data);
+    gisJsonData.value = res.data.result;
+    let timeContStart = gisJsonData.value[0].createTime.split(' ')[1].split(':').map(Number)[0];
+    if (timeContStart < 10) {
+      timeContStart = '0' + timeContStart;
+    }
+    timeContList.value.push(timeContStart + ':00');
+    console.log('timeContStart---', timeContStart);
+    for (let i = 0; i < 5; i++) {
+      let index = (i + 1) * 6;
+      let timeCont = Number(timeContStart) + index;
+      if (timeCont > 24) {
+        timeCont = timeCont - 24;
+      }
+      timeContList.value.push(timeCont + ':00');
+    }
+    timelineList.value = gisJsonData.value.map((i, idx) => ({
+      id: idx,
+      name: `${(((idx + 1) * 5) / 60).toFixed(0).padStart(2, 0)}:${((((idx + 1) * 5) % 60) + '').padStart(2, 0)}`,
+    }));
+    newfiberMapbox.map.ogcLayers
+      .filter(i => i.newfiberId == 'newfiber-CanvasLayer')[0]
+      .setInitializeParams({
+        images: gisJsonData.value.map(i => i.url).reverse(),
+        bbox: [...minPoint, ...maxPoint].map(Number).filter(Boolean),
+        width: 8360,
+        height: 5000,
+      });
+    if (!!gisJsonData.value.length && gisJsonData.value.length > 1) {
+      isdisabled.value = false;
+      !!newfiberMapbox.map.getLayer('riskAssesImage') && newfiberMapbox.map.removeLayer('riskAssesImage');
+      !!newfiberMapbox.map.getSource('riskAssesImage') && newfiberMapbox.map.removeSource('riskAssesImage');
+      addImageLayer(minPoint.split(',').map(Number), maxPoint.split(',').map(Number));
+    } else {
+      isdisabled.value = true;
+      !!newfiberMapbox.map.getLayer('riskAssesImage') && newfiberMapbox.map.removeLayer('riskAssesImage');
+      !!newfiberMapbox.map.getSource('riskAssesImage') && newfiberMapbox.map.removeSource('riskAssesImage');
+    }
+  });
+};
+//添加模型图
+const addImageLayer = (minPoint, maxPoint) => {
+  let coordinates;
+  newfiberMapbox.map.addSource('riskAssesImage', {
+    type: 'image',
+    url: gisJsonData.value[gisJsonData.value.length - 1].url,
+    coordinates: [
+      [Number(minPoint[0]), Number(maxPoint[1])],
+      [Number(maxPoint[0]), Number(maxPoint[1])],
+      [Number(maxPoint[0]), Number(minPoint[1])],
+      [Number(minPoint[0]), Number(minPoint[1])],
+    ],
+  });
+  newfiberMapbox.map.addLayer({
+    id: 'riskAssesImage',
+    type: 'raster',
+    source: 'riskAssesImage',
+    layout: {
+      visibility: 'none',
+    },
+    paint: {
+      'raster-fade-duration': 0,
+    },
+  });
+};
 // 开始
 function startImitate() {
   ifStart.value = false;
   startTimer(); // 定时器开启
-  newfiberMap.setCenter({
-    lng: 114.312,
-    lat: 32.502,
-    heading: 2.281299097855777,
-    zoom: 136358.12942752382,
-    pitch: -25.2508969308367,
-    roll: 0.005453465256790101,
-  });
-  setTimeout(() => {
-    newfiberMap.setLayersVisible(['weather_cloud'], true);
-  }, 2000);
 }
 // 开启定时器
 function startTimer() {
   if (processVal.value == 100) processVal.value = 0;
-  timer.value = setInterval(() => {
-    console.log('timer------');
-    processVal.value += 5;
-    if (processVal.value > 100) {
-      processVal.value = 100;
-      stopImitate();
-      return;
-    }
-  }, 1000);
+  if (gisJsonData.value.length < 1) {
+    return;
+  }
+  if (gisJsonData.value.length > 1) {
+    newfiberMapbox.map.setLayoutProperty('riskAssesImage', 'visibility', 'visible');
+    let proStept = Math.round(100 / gisJsonData.value.length);
+    timer.value = setInterval(() => {
+      console.log('timer------');
+      featureStep.value += 1;
+      newfiberMapbox.map
+        .getSource('riskAssesImage')
+        .updateImage({ url: gisJsonData.value[gisJsonData.value.length - 1 - featureStep.value].url });
+
+      processVal.value += proStept;
+
+      let setp_play = `step${featureStep.value}`;
+      if (processVal.value > 100) {
+        processVal.value = 100;
+        stopImitate();
+        return;
+      }
+      if (featureStep.value == gisJsonData.value.length - 1) {
+        featureStep.value = 0;
+        processVal.value = 100;
+        stopImitate();
+      }
+      //changeFeatureColor(setp_play);
+    }, 1000);
+  } else {
+    timer.value = setInterval(() => {
+      processVal.value += 100;
+      if (processVal.value > 100) {
+        processVal.value = 0;
+        stopImitate();
+      }
+    }, 1000);
+  }
 }
 
 // 暂停模拟
 function stopImitate() {
   ifStart.value = true;
   stopTimer();
-  newfiberMap.setLayersVisible(['weather_cloud'], false);
-  newfiberMap.setCenter({
-    lng: 114.312,
-    lat: 34.442,
-    heading: 2.281299097855777,
-    zoom: 16358.12942752382,
-    pitch: -25.2508969308367,
-    roll: 0.005453465256790101,
-  });
 }
 // 定时器清除
 function stopTimer() {
@@ -88,7 +175,13 @@
   }
 }
 
-onMounted(() => {});
+onMounted(() => {
+  let riskTimer = setInterval(() => {
+    if (!newfiberMapbox) return;
+    gisModuleData();
+    clearInterval(riskTimer);
+  }, 100);
+});
 onBeforeMount(() => {
   stopTimer();
 });

diff --git a/src/api/floodSys/floodYP.js b/src/api/floodSys/floodYP.js
index 7f0bb05..444b597 100644
--- a/src/api/floodSys/floodYP.js
+++ b/src/api/floodSys/floodYP.js
@@ -35,7 +35,14 @@
     timeout: 60 * 1000,
   });
 }
-
+// 海绵综合一张图--内涝积水风险预报
+export function query24hourRainToYuAn(query) {
+  return request({
+    url: '/business//moduleData/query24hourRainToYuAn',
+    method: 'post',
+    data: query,
+  });
+}
 // 预报预警 积水风险占比
 export function countWaterloggingRisk(query) {
   return request({
diff --git a/src/views/sponeScreen/waterFlood/futureRain.vue b/src/views/sponeScreen/waterFlood/futureRain.vue
index 3ff4be5..702a5a7 100644
--- a/src/views/sponeScreen/waterFlood/futureRain.vue
+++ b/src/views/sponeScreen/waterFlood/futureRain.vue
@@ -10,11 +10,7 @@
     <div class="centerCont flex">
       <p class="title"></p>
       <div class="flex flex-justcontent-spacebetween timeCont">
-        <p>08:00</p>
-        <p>14:00</p>
-        <p>20:00</p>
-        <p>02:00</p>
-        <p>08:00</p>
+        <p v-for="i in timeContList">{{ i }}</p>
       </div>
       <el-button type="warning" style="visibility: hidden"></el-button>
     </div>
@@ -30,56 +26,147 @@
 </template>
 
 <script setup>
+import { query24hourRainToYuAn } from '@/api/floodSys/floodYP';
 const { proxy } = getCurrentInstance();
-
+const timeContList = ref([]);
 const processVal = ref(0);
 const ifStart = ref(true);
 const isdisabled = ref(false);
 const timer = ref(null);
-
+const timelineList = ref([]);
+const featureStep = ref(0);
+const gisJsonData = ref({});
+const gisParams = ref({
+  rainFall: '',
+  ybTime: '',
+  category: 'duration',
+  type: 'depth',
+  realTime: false,
+  hours: '24h',
+  scenario: 'P1',
+});
+let maxPoint = '114.4022666731237,34.84413283884892,0.0';
+let minPoint = '114.29210083997283,34.7401307666175,0.0';
+//内涝风险评估 地图内涝渲染模拟
+const gisModuleData = () => {
+  query24hourRainToYuAn(gisParams.value).then(res => {
+    stopImitate();
+    console.log('12------', res.data);
+    gisJsonData.value = res.data.result;
+    let timeContStart = gisJsonData.value[0].createTime.split(' ')[1].split(':').map(Number)[0];
+    if (timeContStart < 10) {
+      timeContStart = '0' + timeContStart;
+    }
+    timeContList.value.push(timeContStart + ':00');
+    console.log('timeContStart---', timeContStart);
+    for (let i = 0; i < 5; i++) {
+      let index = (i + 1) * 6;
+      let timeCont = Number(timeContStart) + index;
+      if (timeCont > 24) {
+        timeCont = timeCont - 24;
+      }
+      timeContList.value.push(timeCont + ':00');
+    }
+    timelineList.value = gisJsonData.value.map((i, idx) => ({
+      id: idx,
+      name: `${(((idx + 1) * 5) / 60).toFixed(0).padStart(2, 0)}:${((((idx + 1) * 5) % 60) + '').padStart(2, 0)}`,
+    }));
+    newfiberMapbox.map.ogcLayers
+      .filter(i => i.newfiberId == 'newfiber-CanvasLayer')[0]
+      .setInitializeParams({
+        images: gisJsonData.value.map(i => i.url).reverse(),
+        bbox: [...minPoint, ...maxPoint].map(Number).filter(Boolean),
+        width: 8360,
+        height: 5000,
+      });
+    if (!!gisJsonData.value.length && gisJsonData.value.length > 1) {
+      isdisabled.value = false;
+      !!newfiberMapbox.map.getLayer('riskAssesImage') && newfiberMapbox.map.removeLayer('riskAssesImage');
+      !!newfiberMapbox.map.getSource('riskAssesImage') && newfiberMapbox.map.removeSource('riskAssesImage');
+      addImageLayer(minPoint.split(',').map(Number), maxPoint.split(',').map(Number));
+    } else {
+      isdisabled.value = true;
+      !!newfiberMapbox.map.getLayer('riskAssesImage') && newfiberMapbox.map.removeLayer('riskAssesImage');
+      !!newfiberMapbox.map.getSource('riskAssesImage') && newfiberMapbox.map.removeSource('riskAssesImage');
+    }
+  });
+};
+//添加模型图
+const addImageLayer = (minPoint, maxPoint) => {
+  let coordinates;
+  newfiberMapbox.map.addSource('riskAssesImage', {
+    type: 'image',
+    url: gisJsonData.value[gisJsonData.value.length - 1].url,
+    coordinates: [
+      [Number(minPoint[0]), Number(maxPoint[1])],
+      [Number(maxPoint[0]), Number(maxPoint[1])],
+      [Number(maxPoint[0]), Number(minPoint[1])],
+      [Number(minPoint[0]), Number(minPoint[1])],
+    ],
+  });
+  newfiberMapbox.map.addLayer({
+    id: 'riskAssesImage',
+    type: 'raster',
+    source: 'riskAssesImage',
+    layout: {
+      visibility: 'none',
+    },
+    paint: {
+      'raster-fade-duration': 0,
+    },
+  });
+};
 // 开始
 function startImitate() {
   ifStart.value = false;
   startTimer(); // 定时器开启
-  newfiberMap.setCenter({
-    lng: 114.312,
-    lat: 32.502,
-    heading: 2.281299097855777,
-    zoom: 136358.12942752382,
-    pitch: -25.2508969308367,
-    roll: 0.005453465256790101,
-  });
-  setTimeout(() => {
-    newfiberMap.setLayersVisible(['weather_cloud'], true);
-  }, 2000);
 }
 // 开启定时器
 function startTimer() {
   if (processVal.value == 100) processVal.value = 0;
-  timer.value = setInterval(() => {
-    console.log('timer------');
-    processVal.value += 5;
-    if (processVal.value > 100) {
-      processVal.value = 100;
-      stopImitate();
-      return;
-    }
-  }, 1000);
+  if (gisJsonData.value.length < 1) {
+    return;
+  }
+  if (gisJsonData.value.length > 1) {
+    newfiberMapbox.map.setLayoutProperty('riskAssesImage', 'visibility', 'visible');
+    let proStept = Math.round(100 / gisJsonData.value.length);
+    timer.value = setInterval(() => {
+      console.log('timer------');
+      featureStep.value += 1;
+      newfiberMapbox.map
+        .getSource('riskAssesImage')
+        .updateImage({ url: gisJsonData.value[gisJsonData.value.length - 1 - featureStep.value].url });
+
+      processVal.value += proStept;
+
+      let setp_play = `step${featureStep.value}`;
+      if (processVal.value > 100) {
+        processVal.value = 100;
+        stopImitate();
+        return;
+      }
+      if (featureStep.value == gisJsonData.value.length - 1) {
+        featureStep.value = 0;
+        processVal.value = 100;
+        stopImitate();
+      }
+      //changeFeatureColor(setp_play);
+    }, 1000);
+  } else {
+    timer.value = setInterval(() => {
+      processVal.value += 100;
+      if (processVal.value > 100) {
+        processVal.value = 0;
+        stopImitate();
+      }
+    }, 1000);
+  }
 }
 
 // 暂停模拟
 function stopImitate() {
   ifStart.value = true;
   stopTimer();
-  newfiberMap.setLayersVisible(['weather_cloud'], false);
-  newfiberMap.setCenter({
-    lng: 114.312,
-    lat: 34.442,
-    heading: 2.281299097855777,
-    zoom: 16358.12942752382,
-    pitch: -25.2508969308367,
-    roll: 0.005453465256790101,
-  });
 }
 // 定时器清除
 function stopTimer() {
@@ -88,7 +175,13 @@
   }
 }
 
-onMounted(() => {});
+onMounted(() => {
+  let riskTimer = setInterval(() => {
+    if (!newfiberMapbox) return;
+    gisModuleData();
+    clearInterval(riskTimer);
+  }, 100);
+});
 onBeforeMount(() => {
   stopTimer();
 });
diff --git a/vite.config.js b/vite.config.js
index ea36ec6..24dcf41 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,8 +7,8 @@
 const Timestamp = new Date().getTime(); //随机时间戳
 
 // const targetUrl = 'http://192.168.16.254:7200'; //孙逢时
-// const targetUrl = 'http://192.168.20.52:7300'; //杨辉
-const targetUrl = 'https://server2.wh-nf.cn:8082/prod-api'; //线上
+const targetUrl = 'http://192.168.20.52:7300'; //杨辉
+// const targetUrl = 'https://server2.wh-nf.cn:8082/prod-api'; //线上
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {