diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..2153cb7 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(1);
+const menuIndex = ref(4);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);

diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..2153cb7 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(1);
+const menuIndex = ref(4);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
index 14c8325..192ed65 100644
--- a/src/views/sponeScreen/waterFlood/equipMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -1,10 +1,22 @@
 <template>
   <!-- 监测设备 -->
   <div class="equipJCPage">
-    <div class="partTitleHM">监测设备</div>
+    <div class="partTitleHM">
+      监测设备
+      <el-select
+        filterable
+        v-model="stationIndex"
+        placeholder="请选择站点类型"
+        @change="checkStation"
+        size="small"
+        style="float: right; margin: 8px 50px 0px 0px"
+      >
+        <el-option v-for="item in stationType" :key="item.key" :label="item.name + headerObj[item.key] || '(--)'" :value="item.key" />
+      </el-select>
+    </div>
     <div class="partContHM">
       <!-- 类型 -->
-      <div class="flex flex-wrap">
+      <!-- <div class="flex flex-wrap">
         <div
           :class="['part', stationIndex == item.key ? 'active' : '']"
           v-for="(item, index) in stationType"
@@ -13,45 +25,50 @@
         >
           {{ item.name }}{{ headerObj[item.key] || '(--)' }}
         </div>
-      </div>
+      </div> -->
       <!-- 监测内容 -->
+      <!-- <el-select clearable filterable v-model="stationCode" placeholder="请输入站点名称" class="stationSel" @change="searchData">
+        <el-option v-for="item in stationList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
+      </el-select> -->
+
       <div class="monitorCont" v-loading="loadingList">
-        <el-select clearable filterable v-model="stationCode" placeholder="请输入站点名称" class="stationSel" @change="searchData">
-          <el-option v-for="item in stationList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
-        </el-select>
-        <div class="contPart" v-for="item in stationList" :key="item.stCode">
-          <div class="title">{{ item.stName }}</div>
-          <img src="@/assets/newImgs/HMScreen/video.png" alt="" @click="dialogShowVideo = true" />
-          <div class="flex flex-wrap">
-            <div class="parts">
-              站点状态
-              <span class="green" v-if="item.onlineStatus == 'online'">在线</span>
-              <span class="red" v-if="item.onlineStatus == 'offline'">离线</span>
-            </div>
-            <div class="parts">
-              数据状态
-              <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
-                {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
-              </span>
-            </div>
-            <div class="parts">
-              监测类型
-              <span>
-                {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
-              </span>
-            </div>
-            <div class="parts">
-              建设方式
-              <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
-                {{ item.buildType == 'owner' ? '新建' : '共享' }}
-              </span>
-            </div>
-            <div class="parts" style="width: 100%">
-              最后通讯 <span>{{ item.tt }}</span>
+        <Vue3SeamlessScroll :list="stationList" :singleHeight="128" :singleWaitTime="1500" :hover="true" class="scroll">
+          <div class="contPart" v-for="item in stationList" :key="item.stCode">
+            <div class="title">{{ item.stName }}</div>
+            <img src="@/assets/newImgs/HMScreen/video.png" alt="" @click="dialogShowVideo = true" />
+            <div class="flex flex-wrap">
+              <div class="parts">
+                站点状态
+                <span class="green" v-if="item.onlineStatus == 'online'">在线</span>
+                <span class="red" v-if="item.onlineStatus == 'offline'">离线</span>
+              </div>
+              <div class="parts">
+                数据状态
+                <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
+                  {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
+                </span>
+              </div>
+              <div class="parts">
+                监测类型
+                <span>
+                  {{
+                    item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质'
+                  }}
+                </span>
+              </div>
+              <div class="parts">
+                建设方式
+                <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
+                  {{ item.buildType == 'owner' ? '新建' : '共享' }}
+                </span>
+              </div>
+              <div class="parts" style="width: 100%">
+                最后通讯 <span>{{ item.tt }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <empty v-if="stationList.length == 0" :width="100" :height="100" style="margin-top: 50px"></empty>
+          <empty v-if="stationList.length == 0" :width="100" :height="100" style="margin-top: 50px"></empty>
+        </Vue3SeamlessScroll>
       </div>
     </div>
     <!-- 视频弹窗 -->
@@ -64,9 +81,10 @@
 <script setup>
 import { getSiteInfoCountZH } from '@/api/dataAnalysis/syntherticData';
 import { getStationList } from '@/api/dataAnalysis/syntherticData';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import bus from '@/bus/index';
-const { proxy } = getCurrentInstance();
 
+const { proxy } = getCurrentInstance();
 const dialogShowVideo = ref(false);
 const stationIndex = ref('total');
 const stationType = ref([
@@ -99,8 +117,8 @@
 };
 
 // 类型点击
-function checkStation(key) {
-  stationIndex.value = key;
+function checkStation() {
+  // stationIndex.value = key;
   getStationData();
 }
 
@@ -155,7 +173,7 @@
       border: 1px solid #2cfce9;
     }
     .monitorCont {
-      height: calc(100vh - 315px);
+      height: calc(100vh - 520px);
       overflow: auto;
       .stationSel {
         width: 100%;

diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..2153cb7 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(1);
+const menuIndex = ref(4);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
index 14c8325..192ed65 100644
--- a/src/views/sponeScreen/waterFlood/equipMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -1,10 +1,22 @@
 <template>
   <!-- 监测设备 -->
   <div class="equipJCPage">
-    <div class="partTitleHM">监测设备</div>
+    <div class="partTitleHM">
+      监测设备
+      <el-select
+        filterable
+        v-model="stationIndex"
+        placeholder="请选择站点类型"
+        @change="checkStation"
+        size="small"
+        style="float: right; margin: 8px 50px 0px 0px"
+      >
+        <el-option v-for="item in stationType" :key="item.key" :label="item.name + headerObj[item.key] || '(--)'" :value="item.key" />
+      </el-select>
+    </div>
     <div class="partContHM">
       <!-- 类型 -->
-      <div class="flex flex-wrap">
+      <!-- <div class="flex flex-wrap">
         <div
           :class="['part', stationIndex == item.key ? 'active' : '']"
           v-for="(item, index) in stationType"
@@ -13,45 +25,50 @@
         >
           {{ item.name }}{{ headerObj[item.key] || '(--)' }}
         </div>
-      </div>
+      </div> -->
       <!-- 监测内容 -->
+      <!-- <el-select clearable filterable v-model="stationCode" placeholder="请输入站点名称" class="stationSel" @change="searchData">
+        <el-option v-for="item in stationList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
+      </el-select> -->
+
       <div class="monitorCont" v-loading="loadingList">
-        <el-select clearable filterable v-model="stationCode" placeholder="请输入站点名称" class="stationSel" @change="searchData">
-          <el-option v-for="item in stationList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
-        </el-select>
-        <div class="contPart" v-for="item in stationList" :key="item.stCode">
-          <div class="title">{{ item.stName }}</div>
-          <img src="@/assets/newImgs/HMScreen/video.png" alt="" @click="dialogShowVideo = true" />
-          <div class="flex flex-wrap">
-            <div class="parts">
-              站点状态
-              <span class="green" v-if="item.onlineStatus == 'online'">在线</span>
-              <span class="red" v-if="item.onlineStatus == 'offline'">离线</span>
-            </div>
-            <div class="parts">
-              数据状态
-              <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
-                {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
-              </span>
-            </div>
-            <div class="parts">
-              监测类型
-              <span>
-                {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
-              </span>
-            </div>
-            <div class="parts">
-              建设方式
-              <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
-                {{ item.buildType == 'owner' ? '新建' : '共享' }}
-              </span>
-            </div>
-            <div class="parts" style="width: 100%">
-              最后通讯 <span>{{ item.tt }}</span>
+        <Vue3SeamlessScroll :list="stationList" :singleHeight="128" :singleWaitTime="1500" :hover="true" class="scroll">
+          <div class="contPart" v-for="item in stationList" :key="item.stCode">
+            <div class="title">{{ item.stName }}</div>
+            <img src="@/assets/newImgs/HMScreen/video.png" alt="" @click="dialogShowVideo = true" />
+            <div class="flex flex-wrap">
+              <div class="parts">
+                站点状态
+                <span class="green" v-if="item.onlineStatus == 'online'">在线</span>
+                <span class="red" v-if="item.onlineStatus == 'offline'">离线</span>
+              </div>
+              <div class="parts">
+                数据状态
+                <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
+                  {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
+                </span>
+              </div>
+              <div class="parts">
+                监测类型
+                <span>
+                  {{
+                    item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质'
+                  }}
+                </span>
+              </div>
+              <div class="parts">
+                建设方式
+                <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
+                  {{ item.buildType == 'owner' ? '新建' : '共享' }}
+                </span>
+              </div>
+              <div class="parts" style="width: 100%">
+                最后通讯 <span>{{ item.tt }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <empty v-if="stationList.length == 0" :width="100" :height="100" style="margin-top: 50px"></empty>
+          <empty v-if="stationList.length == 0" :width="100" :height="100" style="margin-top: 50px"></empty>
+        </Vue3SeamlessScroll>
       </div>
     </div>
     <!-- 视频弹窗 -->
@@ -64,9 +81,10 @@
 <script setup>
 import { getSiteInfoCountZH } from '@/api/dataAnalysis/syntherticData';
 import { getStationList } from '@/api/dataAnalysis/syntherticData';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import bus from '@/bus/index';
-const { proxy } = getCurrentInstance();
 
+const { proxy } = getCurrentInstance();
 const dialogShowVideo = ref(false);
 const stationIndex = ref('total');
 const stationType = ref([
@@ -99,8 +117,8 @@
 };
 
 // 类型点击
-function checkStation(key) {
-  stationIndex.value = key;
+function checkStation() {
+  // stationIndex.value = key;
   getStationData();
 }
 
@@ -155,7 +173,7 @@
       border: 1px solid #2cfce9;
     }
     .monitorCont {
-      height: calc(100vh - 315px);
+      height: calc(100vh - 520px);
       overflow: auto;
       .stationSel {
         width: 100%;
diff --git a/src/views/sponeScreen/waterFlood/futureRain.vue b/src/views/sponeScreen/waterFlood/futureRain.vue
deleted file mode 100644
index 702a5a7..0000000
--- a/src/views/sponeScreen/waterFlood/futureRain.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<template>
-  <!-- 降雨预报 -->
-  <div class="rainFuturePage">
-    <div class="centerCont flex">
-      <p class="title">积水风险预报</p>
-      <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
-      <el-button type="warning" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
-      <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
-    </div>
-    <div class="centerCont flex">
-      <p class="title"></p>
-      <div class="flex flex-justcontent-spacebetween timeCont">
-        <p v-for="i in timeContList">{{ i }}</p>
-      </div>
-      <el-button type="warning" style="visibility: hidden"></el-button>
-    </div>
-    <!-- 颜色块 -->
-    <div class="flex colorPart" style="height: 30px">
-      <p><span></span>0.05-0.15</p>
-      <p><span></span>0.15-0.3</p>
-      <p><span></span>0.3-0.5</p>
-      <p><span></span>0.5-1.0</p>
-      <p><span></span>>1.0</p>
-    </div>
-  </div>
-</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(); // 定时器开启
-}
-// 开启定时器
-function startTimer() {
-  if (processVal.value == 100) processVal.value = 0;
-  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();
-}
-// 定时器清除
-function stopTimer() {
-  if (timer.value) {
-    clearInterval(timer.value);
-  }
-}
-
-onMounted(() => {
-  let riskTimer = setInterval(() => {
-    if (!newfiberMapbox) return;
-    gisModuleData();
-    clearInterval(riskTimer);
-  }, 100);
-});
-onBeforeMount(() => {
-  stopTimer();
-});
-</script>
-
-<style lang="scss">
-.rainFuturePage {
-  width: 100%;
-  padding: 10px 20px;
-  .centerCont {
-    justify-content: space-around;
-    align-items: center;
-    .title {
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 20px;
-      color: #3afff8;
-      width: 180px;
-    }
-    .el-progress {
-      width: 100%;
-      margin-right: 20px;
-      .el-progress-bar__outer {
-        background: rgba(0, 59, 109, 0.8);
-      }
-      .el-progress-bar__innerText {
-        color: #fff;
-      }
-    }
-    .el-progress.is-success .el-progress-bar__inner {
-      background: #3afff8;
-    }
-    .timeCont {
-      width: 100%;
-      height: 30px;
-      margin-right: 50px;
-      margin-top: -20px;
-    }
-  }
-  .colorPart {
-    justify-content: center;
-    align-items: center;
-    p {
-      width: 120px;
-      text-align: center;
-      span {
-        width: 23px;
-        height: 12px;
-        display: inline-block;
-        border-radius: 6px;
-        margin-right: 8px;
-      }
-      &:nth-of-type(1) span {
-        background: #3afff8;
-      }
-      &:nth-of-type(2) span {
-        background: #2bd2ff;
-      }
-      &:nth-of-type(3) span {
-        background: #ffed52;
-      }
-      &:nth-of-type(4) span {
-        background: #ffaa6b;
-      }
-      &:nth-of-type(5) span {
-        background: #ff4545;
-      }
-    }
-  }
-}
-</style>

diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..2153cb7 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(1);
+const menuIndex = ref(4);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
index 14c8325..192ed65 100644
--- a/src/views/sponeScreen/waterFlood/equipMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -1,10 +1,22 @@
 <template>
   <!-- 监测设备 -->
   <div class="equipJCPage">
-    <div class="partTitleHM">监测设备</div>
+    <div class="partTitleHM">
+      监测设备
+      <el-select
+        filterable
+        v-model="stationIndex"
+        placeholder="请选择站点类型"
+        @change="checkStation"
+        size="small"
+        style="float: right; margin: 8px 50px 0px 0px"
+      >
+        <el-option v-for="item in stationType" :key="item.key" :label="item.name + headerObj[item.key] || '(--)'" :value="item.key" />
+      </el-select>
+    </div>
     <div class="partContHM">
       <!-- 类型 -->
-      <div class="flex flex-wrap">
+      <!-- <div class="flex flex-wrap">
         <div
           :class="['part', stationIndex == item.key ? 'active' : '']"
           v-for="(item, index) in stationType"
@@ -13,45 +25,50 @@
         >
           {{ item.name }}{{ headerObj[item.key] || '(--)' }}
         </div>
-      </div>
+      </div> -->
       <!-- 监测内容 -->
+      <!-- <el-select clearable filterable v-model="stationCode" placeholder="请输入站点名称" class="stationSel" @change="searchData">
+        <el-option v-for="item in stationList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
+      </el-select> -->
+
       <div class="monitorCont" v-loading="loadingList">
-        <el-select clearable filterable v-model="stationCode" placeholder="请输入站点名称" class="stationSel" @change="searchData">
-          <el-option v-for="item in stationList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
-        </el-select>
-        <div class="contPart" v-for="item in stationList" :key="item.stCode">
-          <div class="title">{{ item.stName }}</div>
-          <img src="@/assets/newImgs/HMScreen/video.png" alt="" @click="dialogShowVideo = true" />
-          <div class="flex flex-wrap">
-            <div class="parts">
-              站点状态
-              <span class="green" v-if="item.onlineStatus == 'online'">在线</span>
-              <span class="red" v-if="item.onlineStatus == 'offline'">离线</span>
-            </div>
-            <div class="parts">
-              数据状态
-              <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
-                {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
-              </span>
-            </div>
-            <div class="parts">
-              监测类型
-              <span>
-                {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
-              </span>
-            </div>
-            <div class="parts">
-              建设方式
-              <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
-                {{ item.buildType == 'owner' ? '新建' : '共享' }}
-              </span>
-            </div>
-            <div class="parts" style="width: 100%">
-              最后通讯 <span>{{ item.tt }}</span>
+        <Vue3SeamlessScroll :list="stationList" :singleHeight="128" :singleWaitTime="1500" :hover="true" class="scroll">
+          <div class="contPart" v-for="item in stationList" :key="item.stCode">
+            <div class="title">{{ item.stName }}</div>
+            <img src="@/assets/newImgs/HMScreen/video.png" alt="" @click="dialogShowVideo = true" />
+            <div class="flex flex-wrap">
+              <div class="parts">
+                站点状态
+                <span class="green" v-if="item.onlineStatus == 'online'">在线</span>
+                <span class="red" v-if="item.onlineStatus == 'offline'">离线</span>
+              </div>
+              <div class="parts">
+                数据状态
+                <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
+                  {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
+                </span>
+              </div>
+              <div class="parts">
+                监测类型
+                <span>
+                  {{
+                    item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质'
+                  }}
+                </span>
+              </div>
+              <div class="parts">
+                建设方式
+                <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
+                  {{ item.buildType == 'owner' ? '新建' : '共享' }}
+                </span>
+              </div>
+              <div class="parts" style="width: 100%">
+                最后通讯 <span>{{ item.tt }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <empty v-if="stationList.length == 0" :width="100" :height="100" style="margin-top: 50px"></empty>
+          <empty v-if="stationList.length == 0" :width="100" :height="100" style="margin-top: 50px"></empty>
+        </Vue3SeamlessScroll>
       </div>
     </div>
     <!-- 视频弹窗 -->
@@ -64,9 +81,10 @@
 <script setup>
 import { getSiteInfoCountZH } from '@/api/dataAnalysis/syntherticData';
 import { getStationList } from '@/api/dataAnalysis/syntherticData';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import bus from '@/bus/index';
-const { proxy } = getCurrentInstance();
 
+const { proxy } = getCurrentInstance();
 const dialogShowVideo = ref(false);
 const stationIndex = ref('total');
 const stationType = ref([
@@ -99,8 +117,8 @@
 };
 
 // 类型点击
-function checkStation(key) {
-  stationIndex.value = key;
+function checkStation() {
+  // stationIndex.value = key;
   getStationData();
 }
 
@@ -155,7 +173,7 @@
       border: 1px solid #2cfce9;
     }
     .monitorCont {
-      height: calc(100vh - 315px);
+      height: calc(100vh - 520px);
       overflow: auto;
       .stationSel {
         width: 100%;
diff --git a/src/views/sponeScreen/waterFlood/futureRain.vue b/src/views/sponeScreen/waterFlood/futureRain.vue
deleted file mode 100644
index 702a5a7..0000000
--- a/src/views/sponeScreen/waterFlood/futureRain.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<template>
-  <!-- 降雨预报 -->
-  <div class="rainFuturePage">
-    <div class="centerCont flex">
-      <p class="title">积水风险预报</p>
-      <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
-      <el-button type="warning" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
-      <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
-    </div>
-    <div class="centerCont flex">
-      <p class="title"></p>
-      <div class="flex flex-justcontent-spacebetween timeCont">
-        <p v-for="i in timeContList">{{ i }}</p>
-      </div>
-      <el-button type="warning" style="visibility: hidden"></el-button>
-    </div>
-    <!-- 颜色块 -->
-    <div class="flex colorPart" style="height: 30px">
-      <p><span></span>0.05-0.15</p>
-      <p><span></span>0.15-0.3</p>
-      <p><span></span>0.3-0.5</p>
-      <p><span></span>0.5-1.0</p>
-      <p><span></span>>1.0</p>
-    </div>
-  </div>
-</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(); // 定时器开启
-}
-// 开启定时器
-function startTimer() {
-  if (processVal.value == 100) processVal.value = 0;
-  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();
-}
-// 定时器清除
-function stopTimer() {
-  if (timer.value) {
-    clearInterval(timer.value);
-  }
-}
-
-onMounted(() => {
-  let riskTimer = setInterval(() => {
-    if (!newfiberMapbox) return;
-    gisModuleData();
-    clearInterval(riskTimer);
-  }, 100);
-});
-onBeforeMount(() => {
-  stopTimer();
-});
-</script>
-
-<style lang="scss">
-.rainFuturePage {
-  width: 100%;
-  padding: 10px 20px;
-  .centerCont {
-    justify-content: space-around;
-    align-items: center;
-    .title {
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 20px;
-      color: #3afff8;
-      width: 180px;
-    }
-    .el-progress {
-      width: 100%;
-      margin-right: 20px;
-      .el-progress-bar__outer {
-        background: rgba(0, 59, 109, 0.8);
-      }
-      .el-progress-bar__innerText {
-        color: #fff;
-      }
-    }
-    .el-progress.is-success .el-progress-bar__inner {
-      background: #3afff8;
-    }
-    .timeCont {
-      width: 100%;
-      height: 30px;
-      margin-right: 50px;
-      margin-top: -20px;
-    }
-  }
-  .colorPart {
-    justify-content: center;
-    align-items: center;
-    p {
-      width: 120px;
-      text-align: center;
-      span {
-        width: 23px;
-        height: 12px;
-        display: inline-block;
-        border-radius: 6px;
-        margin-right: 8px;
-      }
-      &:nth-of-type(1) span {
-        background: #3afff8;
-      }
-      &:nth-of-type(2) span {
-        background: #2bd2ff;
-      }
-      &:nth-of-type(3) span {
-        background: #ffed52;
-      }
-      &:nth-of-type(4) span {
-        background: #ffaa6b;
-      }
-      &:nth-of-type(5) span {
-        background: #ff4545;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/sponeScreen/waterFlood/futureRisk.vue b/src/views/sponeScreen/waterFlood/futureRisk.vue
new file mode 100644
index 0000000..25c814b
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/futureRisk.vue
@@ -0,0 +1,255 @@
+<template>
+  <!-- 积水风险预报 -->
+  <div class="rainFuturePage">
+    <div class="centerCont flex">
+      <p class="title">积水风险预报</p>
+      <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
+      <el-button type="warning" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
+      <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
+    </div>
+    <div class="centerCont flex">
+      <p class="title"></p>
+      <div class="flex flex-justcontent-spacebetween timeCont">
+        <p v-for="i in timeContList">{{ i }}</p>
+      </div>
+      <el-button type="warning" style="visibility: hidden"></el-button>
+    </div>
+    <!-- 颜色块 -->
+    <div class="flex colorPart" style="height: 30px">
+      <p><span></span>0.05-0.15</p>
+      <p><span></span>0.15-0.3</p>
+      <p><span></span>0.3-0.5</p>
+      <p><span></span>0.5-1.0</p>
+      <p><span></span>>1.0</p>
+    </div>
+  </div>
+</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(); // 定时器开启
+}
+// 开启定时器
+function startTimer() {
+  if (processVal.value == 100) processVal.value = 0;
+  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();
+}
+// 定时器清除
+function stopTimer() {
+  if (timer.value) {
+    clearInterval(timer.value);
+  }
+}
+
+onMounted(() => {
+  let riskTimer = setInterval(() => {
+    if (!newfiberMapbox) return;
+    gisModuleData();
+    clearInterval(riskTimer);
+  }, 100);
+});
+onBeforeMount(() => {
+  stopTimer();
+});
+</script>
+
+<style lang="scss">
+.rainFuturePage {
+  width: 100%;
+  padding: 10px 20px;
+  .centerCont {
+    justify-content: space-around;
+    align-items: center;
+    .title {
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 20px;
+      color: #3afff8;
+      width: 180px;
+    }
+    .el-progress {
+      width: 100%;
+      margin-right: 20px;
+      .el-progress-bar__outer {
+        background: rgba(0, 59, 109, 0.8);
+      }
+      .el-progress-bar__innerText {
+        color: #fff;
+      }
+    }
+    .el-progress.is-success .el-progress-bar__inner {
+      background: #3afff8;
+    }
+    .timeCont {
+      width: 100%;
+      height: 30px;
+      margin-right: 50px;
+      margin-top: -20px;
+    }
+  }
+  .colorPart {
+    justify-content: center;
+    align-items: center;
+    p {
+      width: 120px;
+      text-align: center;
+      span {
+        width: 23px;
+        height: 12px;
+        display: inline-block;
+        border-radius: 6px;
+        margin-right: 8px;
+      }
+      &:nth-of-type(1) span {
+        background: #3afff8;
+      }
+      &:nth-of-type(2) span {
+        background: #2bd2ff;
+      }
+      &:nth-of-type(3) span {
+        background: #ffed52;
+      }
+      &:nth-of-type(4) span {
+        background: #ffaa6b;
+      }
+      &:nth-of-type(5) span {
+        background: #ff4545;
+      }
+    }
+  }
+}
+</style>

diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..2153cb7 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(1);
+const menuIndex = ref(4);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
index 14c8325..192ed65 100644
--- a/src/views/sponeScreen/waterFlood/equipMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -1,10 +1,22 @@
 <template>
   <!-- 监测设备 -->
   <div class="equipJCPage">
-    <div class="partTitleHM">监测设备</div>
+    <div class="partTitleHM">
+      监测设备
+      <el-select
+        filterable
+        v-model="stationIndex"
+        placeholder="请选择站点类型"
+        @change="checkStation"
+        size="small"
+        style="float: right; margin: 8px 50px 0px 0px"
+      >
+        <el-option v-for="item in stationType" :key="item.key" :label="item.name + headerObj[item.key] || '(--)'" :value="item.key" />
+      </el-select>
+    </div>
     <div class="partContHM">
       <!-- 类型 -->
-      <div class="flex flex-wrap">
+      <!-- <div class="flex flex-wrap">
         <div
           :class="['part', stationIndex == item.key ? 'active' : '']"
           v-for="(item, index) in stationType"
@@ -13,45 +25,50 @@
         >
           {{ item.name }}{{ headerObj[item.key] || '(--)' }}
         </div>
-      </div>
+      </div> -->
       <!-- 监测内容 -->
+      <!-- <el-select clearable filterable v-model="stationCode" placeholder="请输入站点名称" class="stationSel" @change="searchData">
+        <el-option v-for="item in stationList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
+      </el-select> -->
+
       <div class="monitorCont" v-loading="loadingList">
-        <el-select clearable filterable v-model="stationCode" placeholder="请输入站点名称" class="stationSel" @change="searchData">
-          <el-option v-for="item in stationList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
-        </el-select>
-        <div class="contPart" v-for="item in stationList" :key="item.stCode">
-          <div class="title">{{ item.stName }}</div>
-          <img src="@/assets/newImgs/HMScreen/video.png" alt="" @click="dialogShowVideo = true" />
-          <div class="flex flex-wrap">
-            <div class="parts">
-              站点状态
-              <span class="green" v-if="item.onlineStatus == 'online'">在线</span>
-              <span class="red" v-if="item.onlineStatus == 'offline'">离线</span>
-            </div>
-            <div class="parts">
-              数据状态
-              <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
-                {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
-              </span>
-            </div>
-            <div class="parts">
-              监测类型
-              <span>
-                {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
-              </span>
-            </div>
-            <div class="parts">
-              建设方式
-              <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
-                {{ item.buildType == 'owner' ? '新建' : '共享' }}
-              </span>
-            </div>
-            <div class="parts" style="width: 100%">
-              最后通讯 <span>{{ item.tt }}</span>
+        <Vue3SeamlessScroll :list="stationList" :singleHeight="128" :singleWaitTime="1500" :hover="true" class="scroll">
+          <div class="contPart" v-for="item in stationList" :key="item.stCode">
+            <div class="title">{{ item.stName }}</div>
+            <img src="@/assets/newImgs/HMScreen/video.png" alt="" @click="dialogShowVideo = true" />
+            <div class="flex flex-wrap">
+              <div class="parts">
+                站点状态
+                <span class="green" v-if="item.onlineStatus == 'online'">在线</span>
+                <span class="red" v-if="item.onlineStatus == 'offline'">离线</span>
+              </div>
+              <div class="parts">
+                数据状态
+                <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
+                  {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
+                </span>
+              </div>
+              <div class="parts">
+                监测类型
+                <span>
+                  {{
+                    item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质'
+                  }}
+                </span>
+              </div>
+              <div class="parts">
+                建设方式
+                <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
+                  {{ item.buildType == 'owner' ? '新建' : '共享' }}
+                </span>
+              </div>
+              <div class="parts" style="width: 100%">
+                最后通讯 <span>{{ item.tt }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <empty v-if="stationList.length == 0" :width="100" :height="100" style="margin-top: 50px"></empty>
+          <empty v-if="stationList.length == 0" :width="100" :height="100" style="margin-top: 50px"></empty>
+        </Vue3SeamlessScroll>
       </div>
     </div>
     <!-- 视频弹窗 -->
@@ -64,9 +81,10 @@
 <script setup>
 import { getSiteInfoCountZH } from '@/api/dataAnalysis/syntherticData';
 import { getStationList } from '@/api/dataAnalysis/syntherticData';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import bus from '@/bus/index';
-const { proxy } = getCurrentInstance();
 
+const { proxy } = getCurrentInstance();
 const dialogShowVideo = ref(false);
 const stationIndex = ref('total');
 const stationType = ref([
@@ -99,8 +117,8 @@
 };
 
 // 类型点击
-function checkStation(key) {
-  stationIndex.value = key;
+function checkStation() {
+  // stationIndex.value = key;
   getStationData();
 }
 
@@ -155,7 +173,7 @@
       border: 1px solid #2cfce9;
     }
     .monitorCont {
-      height: calc(100vh - 315px);
+      height: calc(100vh - 520px);
       overflow: auto;
       .stationSel {
         width: 100%;
diff --git a/src/views/sponeScreen/waterFlood/futureRain.vue b/src/views/sponeScreen/waterFlood/futureRain.vue
deleted file mode 100644
index 702a5a7..0000000
--- a/src/views/sponeScreen/waterFlood/futureRain.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<template>
-  <!-- 降雨预报 -->
-  <div class="rainFuturePage">
-    <div class="centerCont flex">
-      <p class="title">积水风险预报</p>
-      <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
-      <el-button type="warning" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
-      <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
-    </div>
-    <div class="centerCont flex">
-      <p class="title"></p>
-      <div class="flex flex-justcontent-spacebetween timeCont">
-        <p v-for="i in timeContList">{{ i }}</p>
-      </div>
-      <el-button type="warning" style="visibility: hidden"></el-button>
-    </div>
-    <!-- 颜色块 -->
-    <div class="flex colorPart" style="height: 30px">
-      <p><span></span>0.05-0.15</p>
-      <p><span></span>0.15-0.3</p>
-      <p><span></span>0.3-0.5</p>
-      <p><span></span>0.5-1.0</p>
-      <p><span></span>>1.0</p>
-    </div>
-  </div>
-</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(); // 定时器开启
-}
-// 开启定时器
-function startTimer() {
-  if (processVal.value == 100) processVal.value = 0;
-  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();
-}
-// 定时器清除
-function stopTimer() {
-  if (timer.value) {
-    clearInterval(timer.value);
-  }
-}
-
-onMounted(() => {
-  let riskTimer = setInterval(() => {
-    if (!newfiberMapbox) return;
-    gisModuleData();
-    clearInterval(riskTimer);
-  }, 100);
-});
-onBeforeMount(() => {
-  stopTimer();
-});
-</script>
-
-<style lang="scss">
-.rainFuturePage {
-  width: 100%;
-  padding: 10px 20px;
-  .centerCont {
-    justify-content: space-around;
-    align-items: center;
-    .title {
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 20px;
-      color: #3afff8;
-      width: 180px;
-    }
-    .el-progress {
-      width: 100%;
-      margin-right: 20px;
-      .el-progress-bar__outer {
-        background: rgba(0, 59, 109, 0.8);
-      }
-      .el-progress-bar__innerText {
-        color: #fff;
-      }
-    }
-    .el-progress.is-success .el-progress-bar__inner {
-      background: #3afff8;
-    }
-    .timeCont {
-      width: 100%;
-      height: 30px;
-      margin-right: 50px;
-      margin-top: -20px;
-    }
-  }
-  .colorPart {
-    justify-content: center;
-    align-items: center;
-    p {
-      width: 120px;
-      text-align: center;
-      span {
-        width: 23px;
-        height: 12px;
-        display: inline-block;
-        border-radius: 6px;
-        margin-right: 8px;
-      }
-      &:nth-of-type(1) span {
-        background: #3afff8;
-      }
-      &:nth-of-type(2) span {
-        background: #2bd2ff;
-      }
-      &:nth-of-type(3) span {
-        background: #ffed52;
-      }
-      &:nth-of-type(4) span {
-        background: #ffaa6b;
-      }
-      &:nth-of-type(5) span {
-        background: #ff4545;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/sponeScreen/waterFlood/futureRisk.vue b/src/views/sponeScreen/waterFlood/futureRisk.vue
new file mode 100644
index 0000000..25c814b
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/futureRisk.vue
@@ -0,0 +1,255 @@
+<template>
+  <!-- 积水风险预报 -->
+  <div class="rainFuturePage">
+    <div class="centerCont flex">
+      <p class="title">积水风险预报</p>
+      <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
+      <el-button type="warning" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
+      <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
+    </div>
+    <div class="centerCont flex">
+      <p class="title"></p>
+      <div class="flex flex-justcontent-spacebetween timeCont">
+        <p v-for="i in timeContList">{{ i }}</p>
+      </div>
+      <el-button type="warning" style="visibility: hidden"></el-button>
+    </div>
+    <!-- 颜色块 -->
+    <div class="flex colorPart" style="height: 30px">
+      <p><span></span>0.05-0.15</p>
+      <p><span></span>0.15-0.3</p>
+      <p><span></span>0.3-0.5</p>
+      <p><span></span>0.5-1.0</p>
+      <p><span></span>>1.0</p>
+    </div>
+  </div>
+</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(); // 定时器开启
+}
+// 开启定时器
+function startTimer() {
+  if (processVal.value == 100) processVal.value = 0;
+  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();
+}
+// 定时器清除
+function stopTimer() {
+  if (timer.value) {
+    clearInterval(timer.value);
+  }
+}
+
+onMounted(() => {
+  let riskTimer = setInterval(() => {
+    if (!newfiberMapbox) return;
+    gisModuleData();
+    clearInterval(riskTimer);
+  }, 100);
+});
+onBeforeMount(() => {
+  stopTimer();
+});
+</script>
+
+<style lang="scss">
+.rainFuturePage {
+  width: 100%;
+  padding: 10px 20px;
+  .centerCont {
+    justify-content: space-around;
+    align-items: center;
+    .title {
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 20px;
+      color: #3afff8;
+      width: 180px;
+    }
+    .el-progress {
+      width: 100%;
+      margin-right: 20px;
+      .el-progress-bar__outer {
+        background: rgba(0, 59, 109, 0.8);
+      }
+      .el-progress-bar__innerText {
+        color: #fff;
+      }
+    }
+    .el-progress.is-success .el-progress-bar__inner {
+      background: #3afff8;
+    }
+    .timeCont {
+      width: 100%;
+      height: 30px;
+      margin-right: 50px;
+      margin-top: -20px;
+    }
+  }
+  .colorPart {
+    justify-content: center;
+    align-items: center;
+    p {
+      width: 120px;
+      text-align: center;
+      span {
+        width: 23px;
+        height: 12px;
+        display: inline-block;
+        border-radius: 6px;
+        margin-right: 8px;
+      }
+      &:nth-of-type(1) span {
+        background: #3afff8;
+      }
+      &:nth-of-type(2) span {
+        background: #2bd2ff;
+      }
+      &:nth-of-type(3) span {
+        background: #ffed52;
+      }
+      &:nth-of-type(4) span {
+        background: #ffaa6b;
+      }
+      &:nth-of-type(5) span {
+        background: #ff4545;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index be3af5f..29120f3 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -3,8 +3,8 @@
   <div class="oneMapPSFL">
     <!-- 左侧 -->
     <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
-      <!-- 排水设施统计 -->
-      <PsssCount></PsssCount>
+      <!-- 降雨趋势 -->
+      <RainFutureHour></RainFutureHour>
 
       <!-- 降雨报告 -->
       <ReportRain class="mt-5"></ReportRain>
@@ -15,11 +15,14 @@
 
     <!-- 中间 -->
     <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
-      <FutureRain></FutureRain>
+      <FutureRisk></FutureRisk>
     </div>
 
     <!-- 右侧 -->
     <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <!-- 排水设施统计 -->
+      <PsssCount></PsssCount>
+
       <!-- 监测设备 -->
       <MonitorEquip class="mt-10"></MonitorEquip>
     </div>
@@ -53,8 +56,8 @@
 import ReportRain from '@/views/sponeScreen/waterFlood/rainReport.vue'; //降雨报告
 import FloodWZ from '@/views/sponeScreen/waterFlood/floodWZ.vue'; //防汛物资
 import MonitorEquip from '@/views/sponeScreen/waterFlood/equipMonitor.vue'; //监测设备
-import FutureRain from '@/views/sponeScreen/waterFlood/futureRain.vue'; //降雨预报
-import { nextTick, onBeforeUnmount } from 'vue';
+import FutureRisk from '@/views/sponeScreen/waterFlood/futureRisk.vue'; //积水风险预报
+import RainFutureHour from '@/views/sponeScreen/waterFlood/rainFutureHour.vue'; //未来24小时预报
 import bus from '@/bus/index';
 import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';

diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index c8eb408..2153cb7 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(1);
+const menuIndex = ref(4);
 const showPanel = ref(false);
 const showLegend = ref(false);
 const showPipe = ref(false);
diff --git a/src/views/sponeScreen/waterFlood/equipMonitor.vue b/src/views/sponeScreen/waterFlood/equipMonitor.vue
index 14c8325..192ed65 100644
--- a/src/views/sponeScreen/waterFlood/equipMonitor.vue
+++ b/src/views/sponeScreen/waterFlood/equipMonitor.vue
@@ -1,10 +1,22 @@
 <template>
   <!-- 监测设备 -->
   <div class="equipJCPage">
-    <div class="partTitleHM">监测设备</div>
+    <div class="partTitleHM">
+      监测设备
+      <el-select
+        filterable
+        v-model="stationIndex"
+        placeholder="请选择站点类型"
+        @change="checkStation"
+        size="small"
+        style="float: right; margin: 8px 50px 0px 0px"
+      >
+        <el-option v-for="item in stationType" :key="item.key" :label="item.name + headerObj[item.key] || '(--)'" :value="item.key" />
+      </el-select>
+    </div>
     <div class="partContHM">
       <!-- 类型 -->
-      <div class="flex flex-wrap">
+      <!-- <div class="flex flex-wrap">
         <div
           :class="['part', stationIndex == item.key ? 'active' : '']"
           v-for="(item, index) in stationType"
@@ -13,45 +25,50 @@
         >
           {{ item.name }}{{ headerObj[item.key] || '(--)' }}
         </div>
-      </div>
+      </div> -->
       <!-- 监测内容 -->
+      <!-- <el-select clearable filterable v-model="stationCode" placeholder="请输入站点名称" class="stationSel" @change="searchData">
+        <el-option v-for="item in stationList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
+      </el-select> -->
+
       <div class="monitorCont" v-loading="loadingList">
-        <el-select clearable filterable v-model="stationCode" placeholder="请输入站点名称" class="stationSel" @change="searchData">
-          <el-option v-for="item in stationList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
-        </el-select>
-        <div class="contPart" v-for="item in stationList" :key="item.stCode">
-          <div class="title">{{ item.stName }}</div>
-          <img src="@/assets/newImgs/HMScreen/video.png" alt="" @click="dialogShowVideo = true" />
-          <div class="flex flex-wrap">
-            <div class="parts">
-              站点状态
-              <span class="green" v-if="item.onlineStatus == 'online'">在线</span>
-              <span class="red" v-if="item.onlineStatus == 'offline'">离线</span>
-            </div>
-            <div class="parts">
-              数据状态
-              <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
-                {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
-              </span>
-            </div>
-            <div class="parts">
-              监测类型
-              <span>
-                {{ item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质' }}
-              </span>
-            </div>
-            <div class="parts">
-              建设方式
-              <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
-                {{ item.buildType == 'owner' ? '新建' : '共享' }}
-              </span>
-            </div>
-            <div class="parts" style="width: 100%">
-              最后通讯 <span>{{ item.tt }}</span>
+        <Vue3SeamlessScroll :list="stationList" :singleHeight="128" :singleWaitTime="1500" :hover="true" class="scroll">
+          <div class="contPart" v-for="item in stationList" :key="item.stCode">
+            <div class="title">{{ item.stName }}</div>
+            <img src="@/assets/newImgs/HMScreen/video.png" alt="" @click="dialogShowVideo = true" />
+            <div class="flex flex-wrap">
+              <div class="parts">
+                站点状态
+                <span class="green" v-if="item.onlineStatus == 'online'">在线</span>
+                <span class="red" v-if="item.onlineStatus == 'offline'">离线</span>
+              </div>
+              <div class="parts">
+                数据状态
+                <span :class="item.faultStatus == 'normal' ? 'success' : 'fail'">
+                  {{ item.faultStatus ? faultList.filter(item2 => item2.value == item.faultStatus)[0].label : '--' }}
+                </span>
+              </div>
+              <div class="parts">
+                监测类型
+                <span>
+                  {{
+                    item.siteType == 'water_level' ? '水位' : item.siteType == 'flow' ? '流量' : item.siteType == 'rain' ? '降雨' : '水质'
+                  }}
+                </span>
+              </div>
+              <div class="parts">
+                建设方式
+                <span :class="item.buildType == 'owner' ? 'success' : 'yellow'">
+                  {{ item.buildType == 'owner' ? '新建' : '共享' }}
+                </span>
+              </div>
+              <div class="parts" style="width: 100%">
+                最后通讯 <span>{{ item.tt }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <empty v-if="stationList.length == 0" :width="100" :height="100" style="margin-top: 50px"></empty>
+          <empty v-if="stationList.length == 0" :width="100" :height="100" style="margin-top: 50px"></empty>
+        </Vue3SeamlessScroll>
       </div>
     </div>
     <!-- 视频弹窗 -->
@@ -64,9 +81,10 @@
 <script setup>
 import { getSiteInfoCountZH } from '@/api/dataAnalysis/syntherticData';
 import { getStationList } from '@/api/dataAnalysis/syntherticData';
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import bus from '@/bus/index';
-const { proxy } = getCurrentInstance();
 
+const { proxy } = getCurrentInstance();
 const dialogShowVideo = ref(false);
 const stationIndex = ref('total');
 const stationType = ref([
@@ -99,8 +117,8 @@
 };
 
 // 类型点击
-function checkStation(key) {
-  stationIndex.value = key;
+function checkStation() {
+  // stationIndex.value = key;
   getStationData();
 }
 
@@ -155,7 +173,7 @@
       border: 1px solid #2cfce9;
     }
     .monitorCont {
-      height: calc(100vh - 315px);
+      height: calc(100vh - 520px);
       overflow: auto;
       .stationSel {
         width: 100%;
diff --git a/src/views/sponeScreen/waterFlood/futureRain.vue b/src/views/sponeScreen/waterFlood/futureRain.vue
deleted file mode 100644
index 702a5a7..0000000
--- a/src/views/sponeScreen/waterFlood/futureRain.vue
+++ /dev/null
@@ -1,255 +0,0 @@
-<template>
-  <!-- 降雨预报 -->
-  <div class="rainFuturePage">
-    <div class="centerCont flex">
-      <p class="title">积水风险预报</p>
-      <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
-      <el-button type="warning" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
-      <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
-    </div>
-    <div class="centerCont flex">
-      <p class="title"></p>
-      <div class="flex flex-justcontent-spacebetween timeCont">
-        <p v-for="i in timeContList">{{ i }}</p>
-      </div>
-      <el-button type="warning" style="visibility: hidden"></el-button>
-    </div>
-    <!-- 颜色块 -->
-    <div class="flex colorPart" style="height: 30px">
-      <p><span></span>0.05-0.15</p>
-      <p><span></span>0.15-0.3</p>
-      <p><span></span>0.3-0.5</p>
-      <p><span></span>0.5-1.0</p>
-      <p><span></span>>1.0</p>
-    </div>
-  </div>
-</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(); // 定时器开启
-}
-// 开启定时器
-function startTimer() {
-  if (processVal.value == 100) processVal.value = 0;
-  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();
-}
-// 定时器清除
-function stopTimer() {
-  if (timer.value) {
-    clearInterval(timer.value);
-  }
-}
-
-onMounted(() => {
-  let riskTimer = setInterval(() => {
-    if (!newfiberMapbox) return;
-    gisModuleData();
-    clearInterval(riskTimer);
-  }, 100);
-});
-onBeforeMount(() => {
-  stopTimer();
-});
-</script>
-
-<style lang="scss">
-.rainFuturePage {
-  width: 100%;
-  padding: 10px 20px;
-  .centerCont {
-    justify-content: space-around;
-    align-items: center;
-    .title {
-      font-family: Source Han Sans CN;
-      font-weight: bold;
-      font-size: 20px;
-      color: #3afff8;
-      width: 180px;
-    }
-    .el-progress {
-      width: 100%;
-      margin-right: 20px;
-      .el-progress-bar__outer {
-        background: rgba(0, 59, 109, 0.8);
-      }
-      .el-progress-bar__innerText {
-        color: #fff;
-      }
-    }
-    .el-progress.is-success .el-progress-bar__inner {
-      background: #3afff8;
-    }
-    .timeCont {
-      width: 100%;
-      height: 30px;
-      margin-right: 50px;
-      margin-top: -20px;
-    }
-  }
-  .colorPart {
-    justify-content: center;
-    align-items: center;
-    p {
-      width: 120px;
-      text-align: center;
-      span {
-        width: 23px;
-        height: 12px;
-        display: inline-block;
-        border-radius: 6px;
-        margin-right: 8px;
-      }
-      &:nth-of-type(1) span {
-        background: #3afff8;
-      }
-      &:nth-of-type(2) span {
-        background: #2bd2ff;
-      }
-      &:nth-of-type(3) span {
-        background: #ffed52;
-      }
-      &:nth-of-type(4) span {
-        background: #ffaa6b;
-      }
-      &:nth-of-type(5) span {
-        background: #ff4545;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/sponeScreen/waterFlood/futureRisk.vue b/src/views/sponeScreen/waterFlood/futureRisk.vue
new file mode 100644
index 0000000..25c814b
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/futureRisk.vue
@@ -0,0 +1,255 @@
+<template>
+  <!-- 积水风险预报 -->
+  <div class="rainFuturePage">
+    <div class="centerCont flex">
+      <p class="title">积水风险预报</p>
+      <el-progress :stroke-width="20" :percentage="processVal" status="success" :text-inside="true"></el-progress>
+      <el-button type="warning" @click="startImitate" v-if="ifStart" :disabled="isdisabled">开始</el-button>
+      <el-button type="warning" @click="stopImitate" v-else :disabled="isdisabled">暂停</el-button>
+    </div>
+    <div class="centerCont flex">
+      <p class="title"></p>
+      <div class="flex flex-justcontent-spacebetween timeCont">
+        <p v-for="i in timeContList">{{ i }}</p>
+      </div>
+      <el-button type="warning" style="visibility: hidden"></el-button>
+    </div>
+    <!-- 颜色块 -->
+    <div class="flex colorPart" style="height: 30px">
+      <p><span></span>0.05-0.15</p>
+      <p><span></span>0.15-0.3</p>
+      <p><span></span>0.3-0.5</p>
+      <p><span></span>0.5-1.0</p>
+      <p><span></span>>1.0</p>
+    </div>
+  </div>
+</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(); // 定时器开启
+}
+// 开启定时器
+function startTimer() {
+  if (processVal.value == 100) processVal.value = 0;
+  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();
+}
+// 定时器清除
+function stopTimer() {
+  if (timer.value) {
+    clearInterval(timer.value);
+  }
+}
+
+onMounted(() => {
+  let riskTimer = setInterval(() => {
+    if (!newfiberMapbox) return;
+    gisModuleData();
+    clearInterval(riskTimer);
+  }, 100);
+});
+onBeforeMount(() => {
+  stopTimer();
+});
+</script>
+
+<style lang="scss">
+.rainFuturePage {
+  width: 100%;
+  padding: 10px 20px;
+  .centerCont {
+    justify-content: space-around;
+    align-items: center;
+    .title {
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      font-size: 20px;
+      color: #3afff8;
+      width: 180px;
+    }
+    .el-progress {
+      width: 100%;
+      margin-right: 20px;
+      .el-progress-bar__outer {
+        background: rgba(0, 59, 109, 0.8);
+      }
+      .el-progress-bar__innerText {
+        color: #fff;
+      }
+    }
+    .el-progress.is-success .el-progress-bar__inner {
+      background: #3afff8;
+    }
+    .timeCont {
+      width: 100%;
+      height: 30px;
+      margin-right: 50px;
+      margin-top: -20px;
+    }
+  }
+  .colorPart {
+    justify-content: center;
+    align-items: center;
+    p {
+      width: 120px;
+      text-align: center;
+      span {
+        width: 23px;
+        height: 12px;
+        display: inline-block;
+        border-radius: 6px;
+        margin-right: 8px;
+      }
+      &:nth-of-type(1) span {
+        background: #3afff8;
+      }
+      &:nth-of-type(2) span {
+        background: #2bd2ff;
+      }
+      &:nth-of-type(3) span {
+        background: #ffed52;
+      }
+      &:nth-of-type(4) span {
+        background: #ffaa6b;
+      }
+      &:nth-of-type(5) span {
+        background: #ff4545;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/waterFlood/index.vue b/src/views/sponeScreen/waterFlood/index.vue
index be3af5f..29120f3 100644
--- a/src/views/sponeScreen/waterFlood/index.vue
+++ b/src/views/sponeScreen/waterFlood/index.vue
@@ -3,8 +3,8 @@
   <div class="oneMapPSFL">
     <!-- 左侧 -->
     <div :class="['publicLeftHM', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
-      <!-- 排水设施统计 -->
-      <PsssCount></PsssCount>
+      <!-- 降雨趋势 -->
+      <RainFutureHour></RainFutureHour>
 
       <!-- 降雨报告 -->
       <ReportRain class="mt-5"></ReportRain>
@@ -15,11 +15,14 @@
 
     <!-- 中间 -->
     <div :class="['headHMA', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
-      <FutureRain></FutureRain>
+      <FutureRisk></FutureRisk>
     </div>
 
     <!-- 右侧 -->
     <div :class="['publicRightHM', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']">
+      <!-- 排水设施统计 -->
+      <PsssCount></PsssCount>
+
       <!-- 监测设备 -->
       <MonitorEquip class="mt-10"></MonitorEquip>
     </div>
@@ -53,8 +56,8 @@
 import ReportRain from '@/views/sponeScreen/waterFlood/rainReport.vue'; //降雨报告
 import FloodWZ from '@/views/sponeScreen/waterFlood/floodWZ.vue'; //防汛物资
 import MonitorEquip from '@/views/sponeScreen/waterFlood/equipMonitor.vue'; //监测设备
-import FutureRain from '@/views/sponeScreen/waterFlood/futureRain.vue'; //降雨预报
-import { nextTick, onBeforeUnmount } from 'vue';
+import FutureRisk from '@/views/sponeScreen/waterFlood/futureRisk.vue'; //积水风险预报
+import RainFutureHour from '@/views/sponeScreen/waterFlood/rainFutureHour.vue'; //未来24小时预报
 import bus from '@/bus/index';
 import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
 import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
diff --git a/src/views/sponeScreen/waterFlood/rainFutureHour.vue b/src/views/sponeScreen/waterFlood/rainFutureHour.vue
new file mode 100644
index 0000000..2c01744
--- /dev/null
+++ b/src/views/sponeScreen/waterFlood/rainFutureHour.vue
@@ -0,0 +1,38 @@
+<template>
+  <!-- 未来24小时预报 -->
+  <div class="rainFutureHourP">
+    <div class="partTitleHM">未来24小时预报</div>
+    <div class="partContHM">
+      <div id="rainFH"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import axios from 'axios';
+const { proxy } = getCurrentInstance();
+
+// 获取天气信息
+const getWeather = () => {
+  axios
+    .get(`https://gfapi.mlogcn.com/weather/v001/now?key=F2hH0eoTQS99jaKr3v4AIWFQkJwRjMAU&areacode=101180801`)
+    .then(res => {
+      console.log(res.data);
+    })
+    .catch(error => {});
+};
+
+onMounted(() => {
+  getWeather();
+});
+</script>
+
+<style lang="scss" scoped>
+.rainFutureHourP {
+  width: 100%;
+  #rainFH {
+    width: 100%;
+    height: 200px;
+  }
+}
+</style>