feat(水文站): 优化圩区详情页面布局并增加可纳雨量图表

重构降雨预报展示为轮播形式，增加可纳雨量柱状图展示
调整各卡片高度和布局，优化图表显示效果

src/views/map/index.vue

@@ -80,8 +80,8 @@
           <mMenuItem index="2">融合体系</mMenuItem>
           <div class="top-menu-mid-space"></div>
           <mMenuItem index="4">历史沿革</mMenuItem>
-          <mMenuItem index="5">水文科普</mMenuItem>
           <mMenuItem index="6">研学联建</mMenuItem>
+          <mMenuItem index="5">工作平台</mMenuItem>
         </mMenu>
       </div>
       <!-- 区域总览内容 -->

src/views/waterStation/PolderDetail.vue

@@ -4,7 +4,7 @@
     <div class="left-panel">
       <div class="left-panel-3d">
         <!-- 圩区水位分析 -->
-        <m-card :title="selectedPolderDetail === 'konggang' ? '孔巷联圩水位分析' : '圩区水位分析'" class="water-station-card water-station-card-top" :width="398" :height="320">
+        <m-card :title="selectedPolderDetail === 'konggang' ? '孔巷联圩水位分析' : '圩区水位分析'" class="water-station-card water-station-card-top" :width="398" :height="420">
           <div class="water-level-analysis-panel">
             <!-- 切换按钮 -->
             <div class="water-level-tabs" v-if="selectedPolderDetail === 'konggang'">
@@ -81,22 +81,42 @@
     <div class="right-panel">
       <div class="right-panel-3d">
         <!-- 降雨预报和降雨量 -->
-        <m-card title="降雨预报" class="water-station-card water-station-card-top" :width="398" :height="320">
+        <m-card title="降雨预报" class="water-station-card water-station-card-top" :width="398" :height="450">
           <div class="rainfall-forecast-panel">
-            <!-- 降雨预报卡片 -->
-            <div class="forecast-cards">
-              <div class="forecast-card" v-for="(forecast, index) in rainfallForecast" :key="index">
-                <div class="forecast-date">{{ forecast.date }}</div>
-                <div class="forecast-icon" :class="forecast.icon"></div>
-                <div class="forecast-desc">{{ forecast.desc }}</div>
-                <div class="forecast-temp">{{ forecast.temp }}</div>
+            <!-- 第一行：两列布局（比例6:4） -->
+            <div class="rainfall-top-row">
+              <!-- 可纳雨量柱状图 -->
+              <div class="rainfall-capacity-chart-container">
+                <h4 class="chart-title">可纳雨量</h4>
+              <VChart ref="rainfallCapacityChart" :option="rainfallCapacityChartOption" :autoresize="true" style="width: 100%; height: calc(100% - 20px);" />
+              </div>
+              
+              <!-- 降雨预报轮播 -->
+              <div class="forecast-carousel">
+                <div class="carousel-wrapper" :style="{ transform: `translateX(-${currentForecastIndex * 100}%)` }">
+                  <div class="forecast-card" v-for="(forecast, index) in rainfallForecast" :key="index">
+                    <div class="forecast-date">{{ forecast.date }}</div>
+                    <div class="forecast-icon" :class="forecast.icon"></div>
+                    <div class="forecast-desc">{{ forecast.desc }}</div>
+                    <div class="forecast-temp">{{ forecast.temp }}</div>
+                  </div>
+                </div>
+                <div class="carousel-indicators">
+                  <span 
+                    v-for="(forecast, index) in rainfallForecast" 
+                    :key="index"
+                    class="indicator" 
+                    :class="{ active: currentForecastIndex === index }"
+                    @click="currentForecastIndex = index"
+                  ></span>
+                </div>
               </div>
             </div>
             
-            <!-- 降雨量柱状图 -->
+            <!-- 第二行：降雨量柱状图 -->
             <div class="rainfall-chart-container">
               <h4 class="chart-title">降雨量</h4>
-              <VChart ref="rainfallChart" :option="polderRainfallChartOption" :autoresize="true" style="width: 100%; height: 120px;" />
+              <VChart ref="rainfallChart" :option="polderRainfallChartOption" :autoresize="true" style="width: 100%; height: calc(100% - 20px);" />
             </div>
           </div>
         </m-card>
@@ -194,7 +214,7 @@ const pumpStatus = ref([
 // 开泵流量图表配置
 const pumpFlowChartOption = ref({
   grid: {
-    left: '2%',
+    left: '1%',
     top: '15%',
     right: '5%',
     bottom: '15%',
@@ -293,7 +313,7 @@ const pumpFlowChartOption = ref({
 // 日排水量图表配置
 const dailyDischargeChartOption = ref({
   grid: {
-    left: '2%',
+    left: '1%',
     top: '15%',
     right: '5%',
     bottom: '15%',
@@ -414,10 +434,10 @@ const currentWaterLevelChartOption = computed(() => {
   const data = currentWaterLevelTab.value === 'inner' ? innerWaterLevelData : outerWaterLevelData
   return {
     grid: {
-      left: '4%',
-      top: '12%',
-      right: '10%',
-      bottom: '18%',
+      left: '2%',
+      top: '15%',
+      right: '5%',
+      bottom: '15%',
       containLabel: true
     },
     legend: {
@@ -601,6 +621,168 @@ const rainfallForecast = ref([
   { date: '周四', icon: 'rainy', desc: '中雨', temp: '5°C' }
 ])
 
+// 降雨预报轮播状态
+const currentForecastIndex = ref(0)
+let forecastInterval
+
+// 开始轮播
+function startForecastCarousel() {
+  forecastInterval = setInterval(() => {
+    currentForecastIndex.value = (currentForecastIndex.value + 1) % rainfallForecast.value.length
+  }, 3000) // 3秒切换一次
+}
+
+// 停止轮播
+function stopForecastCarousel() {
+  if (forecastInterval) {
+    clearInterval(forecastInterval)
+  }
+}
+
+// 生命周期钩子
+import { onMounted, onBeforeUnmount } from 'vue'
+
+onMounted(() => {
+  startForecastCarousel()
+})
+
+onBeforeUnmount(() => {
+  stopForecastCarousel()
+})
+
+// 可纳雨量图表配置
+const rainfallCapacityChartOption = ref({
+  grid: {
+    left: '8%',
+    top: '15%',
+    right: '8%',
+    bottom: '15%',
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    backgroundColor: 'rgba(0, 20, 40, 0.9)',
+    borderColor: 'rgba(48, 220, 255, 0.5)',
+    textStyle: {
+      color: '#fff'
+    },
+    formatter: function(params) {
+      let result = params[0].name + '<br/>';
+      params.forEach(item => {
+        result += item.marker + item.seriesName + ': ' + item.value + ' mm<br/>';
+      });
+      return result;
+    }
+  },
+  xAxis: {
+    type: 'category',
+    data: ['可纳雨量'],
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10
+    }
+  },
+  yAxis: {
+    type: 'value',
+    min: 0,
+    max: 50,
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      color: 'rgba(255, 255, 255, 0.8)',
+      fontSize: 10,
+      formatter: '{value} mm'
+    },
+    splitLine: {
+      show: false
+    }
+  },
+  series: [
+    {
+      name: '可纳雨量',
+      type: 'bar',
+      barWidth: 80,
+      data: [20.16],
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgba(48, 220, 255, 0.8)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(48, 220, 255, 0.3)'
+          }
+        ]),
+        shadowColor: 'rgba(48, 220, 255, 0.6)',
+        shadowBlur: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(48, 220, 255, 0.5)'
+      },
+      emphasis: {
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(48, 220, 255, 1)'
+            },
+            {
+              offset: 1,
+              color: 'rgba(48, 220, 255, 0.5)'
+            }
+          ]),
+          shadowColor: 'rgba(48, 220, 255, 0.8)',
+          shadowBlur: 15
+        }
+      },
+      markLine: {
+        data: [
+          {
+            yAxis: 15.5,
+            label: {
+              formatter: '警戒水位可纳雨量',
+              color: '#ffcc00',
+              position: 'insideMiddleTop',
+              fontSize: 10,
+              align: 'center'
+            },
+            lineStyle: {
+              color: '#ffcc00',
+              width: 1,
+              type: 'dashed'
+            }
+          },
+          {
+            yAxis: 28.3,
+            label: {
+              formatter: '堤顶高程可纳雨量',
+              color: '#ff0000',
+              position: 'insideMiddleTop',
+              fontSize: 10,
+              align: 'center'
+            },
+            lineStyle: {
+              color: '#ff0000',
+              width: 1,
+              type: 'dashed'
+            }
+          }
+        ]
+      }
+    }
+  ]
+})
+
 // 降雨量图表配置
 const polderRainfallChartOption = ref({
   grid: {
@@ -805,7 +987,7 @@ const showMonitoringPoints = ref(true)
     border: 1px solid rgba(48, 220, 255, 0.3);
     
     span {
-      font-size: 9px;
+      font-size: 12px;
       color: rgba(255, 255, 255, 0.8);
     }
     
@@ -859,8 +1041,9 @@ const showMonitoringPoints = ref(true)
 
 .water-level-chart {
   flex: 1;
-  min-height: 240px;
+  min-height: 180px;
   padding: 0;
+  display: flex;
   
   :deep(.echarts-container) {
     width: 100% !important;
@@ -929,7 +1112,7 @@ const showMonitoringPoints = ref(true)
   min-height: 160px;
   
   .chart-title {
-    font-size: 9px;
+    font-size: 12px;
     color: #30dcff;
     margin-bottom: 2px;
     text-align: center;
@@ -953,55 +1136,130 @@ const showMonitoringPoints = ref(true)
   gap: 8px;
 }
 
-.forecast-cards {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 6px;
+.rainfall-top-row {
+  display: flex;
+  gap: 8px;
+  flex: 1;
+  min-height: 200px;
+}
+
+.empty-container {
+  flex: 1;
+  background: rgba(0, 100, 150, 0.2);
+  border: 1px solid rgba(48, 220, 255, 0.3);
+  border-radius: 4px;
+  padding: 4px;
+  min-height: 100px;
 }
 
-.forecast-card {
+.forecast-carousel {
+  flex: 4;
+  position: relative;
+  overflow: hidden;
   background: rgba(0, 100, 150, 0.3);
   border: 1px solid rgba(48, 220, 255, 0.3);
   border-radius: 4px;
-  padding: 6px;
-  text-align: center;
-  
-  .forecast-date {
-    font-size: 10px;
-    color: rgba(255, 255, 255, 0.9);
-    margin-bottom: 4px;
-  }
-  
-  .forecast-icon {
-    width: 40px;
-    height: 40px;
-    margin: 0 auto 4px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-  
-  .forecast-icon.rainy {
-    background-image: url('@/assets/images/qixiang/暴雨.png');
-  }
+  padding: 10px;
   
-  .forecast-icon.cloudy {
-    background-image: url('@/assets/images/qixiang/多云.png');
+  .carousel-wrapper {
+    display: flex;
+    transition: transform 0.5s ease;
+    height: 120px;
+    
+    .forecast-card {
+      flex: 0 0 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      
+      .forecast-date {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.9);
+        margin-bottom: 8px;
+      }
+      
+      .forecast-icon {
+        width: 60px;
+        height: 60px;
+        margin: 0 auto 8px;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+      
+      .forecast-icon.rainy {
+        background-image: url('@/assets/images/qixiang/暴雨.png');
+      }
+      
+      .forecast-icon.cloudy {
+        background-image: url('@/assets/images/qixiang/多云.png');
+      }
+      
+      .forecast-icon.sunny {
+        background-image: url('@/assets/images/qixiang/晴天.png');
+      }
+      
+      .forecast-desc {
+        font-size: 14px;
+        color: #30dcff;
+        margin-bottom: 4px;
+      }
+      
+      .forecast-temp {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.8);
+      }
+    }
   }
   
-  .forecast-icon.sunny {
-    background-image: url('@/assets/images/qixiang/晴天.png');
+  .carousel-indicators {
+    position: absolute;
+    bottom: 5px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 5px;
+    
+    .indicator {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.3);
+      cursor: pointer;
+      transition: all 0.3s ease;
+      
+      &.active {
+        background: #30dcff;
+        transform: scale(1.2);
+      }
+    }
   }
+}
+
+.rainfall-capacity-chart-container {
+  flex: 6;
+  background: rgba(0, 100, 150, 0.2);
+  border: 1px solid rgba(48, 220, 255, 0.3);
+  border-radius: 4px;
+  padding: 4px;
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
   
-  .forecast-desc {
-    font-size: 10px;
+  .chart-title {
+    font-size: 12px;
     color: #30dcff;
-    margin-bottom: 2px;
+    margin-bottom: 4px;
+    text-align: center;
+    font-weight: bold;
+    flex-shrink: 0;
   }
   
-  .forecast-temp {
-    font-size: 9px;
-    color: rgba(255, 255, 255, 0.8);
+  :deep(.echarts-container) {
+    width: 100% !important;
+    height: 90px !important;
   }
 }
 
@@ -1011,19 +1269,22 @@ const showMonitoringPoints = ref(true)
   border: 1px solid rgba(48, 220, 255, 0.3);
   border-radius: 4px;
   padding: 4px;
-  min-height: 100px;
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
   
   .chart-title {
-    font-size: 10px;
+    font-size: 12px;
     color: #30dcff;
     margin-bottom: 4px;
     text-align: center;
     font-weight: bold;
+    flex-shrink: 0;
   }
   
   :deep(.echarts-container) {
     width: 100% !important;
-    height: 100% !important;
+    height: 100px !important;
   }
 }
 
@@ -1149,9 +1410,8 @@ const showMonitoringPoints = ref(true)
 
 .polder-layer-controls {
   position: absolute;
-  right: 420px;
-  top: 65%;
-  transform: translateY(-50%);
+  left: 1450px;
+  top: 260px;
   display: flex;
   flex-direction: column;
   gap: 15px;

src/views/waterStation/index.vue

@@ -60,7 +60,7 @@
         <div class="right-panel">
           <div class="right-panel-3d">
             <!-- 气象预警信息 -->
-            <m-card title="气象预警信息" class="water-station-card water-station-card-top" :width="398" :height="280">
+            <m-card title="气象预警信息" class="water-station-card water-station-card-top" :width="398" :height="350">
               <div class="weather-warning-panel">
                 <div class="warning-grid">
                   <div class="warning-item">
@@ -100,7 +100,7 @@
             </m-card>
             
             <!-- 预警统计 -->
-            <m-card title="预警统计" class="water-station-card water-station-card-middle" :width="398" :height="180">
+            <m-card title="预警统计" class="water-station-card water-station-card-middle" :width="398" :height="150">
               <div class="warning-stats-panel">
                 <div class="stats-grid">
                   <div class="stat-card warning-stat">
@@ -120,7 +120,7 @@
             </m-card>
             
             <!-- 圩区信息 -->
-            <m-card title="圩区信息" class="water-station-card water-station-card-bottom" :width="398" :height="420">
+            <m-card title="圩区信息" class="water-station-card water-station-card-bottom" :width="398" :height="350">
               <div class="polder-list">
                 <div class="polder-list-header">
                   <div class="header-item">序号</div>