流域总览页面修改

src/views/OverviewView.vue

@@ -2,111 +2,169 @@
   <div class="overview-container">
     <!-- 左侧数据卡片 -->
     <div class="left-sidebar">
+      <!-- 气象预报卡片 -->
       <div class="data-card">
-        <div class="card-header" @click="toggleCoreData">
-          <h3 class="card-title">核心监测实时数据</h3>
+        <div class="card-header" @click="toggleWeatherForecast">
+          <h3 class="card-title">气象预报</h3>
           <div class="header-actions">
-            <span class="update-time">{{ updateTimeStr }}</span>
-            <span class="toggle-btn">{{ coreDataExpanded ? '▼' : '▶' }}</span>
+            <span class="toggle-btn">{{ weatherForecastExpanded ? '▼' : '▶' }}</span>
           </div>
         </div>
-        <div v-if="coreDataExpanded" class="card-body">
-          <!-- 汇总数据卡片 -->
-          <div class="summary-cards">
-            <div class="summary-card">
-              <div class="summary-title">流域累计降雨量</div>
-              <div class="summary-value">15.3mm</div>
+        <div v-if="weatherForecastExpanded" class="card-body">
+          <div class="five-day-forecast">
+            <div class="forecast-day">
+              <div class="weather-icon">☀️</div>
+              <div class="day-name">今天</div>
             </div>
-            <div class="summary-card">
-              <div class="summary-title">当前降雨强度</div>
-              <div class="summary-value">0.5mm/h</div>
+            <div class="forecast-day">
+              <div class="weather-icon">⛅</div>
+              <div class="day-name">明天</div>
             </div>
-            <div class="summary-card">
-              <div class="summary-title">流域关键断面平均水位</div>
-              <div class="summary-value">12.8m</div>
+            <div class="forecast-day">
+              <div class="weather-icon">🌧️</div>
+              <div class="day-name">后天</div>
             </div>
-            <div class="summary-card">
-              <div class="summary-title">天然来水量</div>
-              <div class="summary-value">25.6 万 m³/日</div>
+            <div class="forecast-day">
+              <div class="weather-icon">🌤️</div>
+              <div class="day-name">周四</div>
             </div>
-          </div>
-          
-          <!-- 24h水位折线图 -->
-          <div class="section">
-            <div class="chart-container small with-title">
-              <h4 class="section-title">水位</h4>
-              <canvas id="waterLevel24hChart" width="280" height="160"></canvas>
+            <div class="forecast-day">
+              <div class="weather-icon">☀️</div>
+              <div class="day-name">周五</div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    
-    <!-- 右侧短期水文预报预览 -->
-    <div class="right-sidebar">
-      <div class="data-card forecast-card">
-        <div class="card-header" @click="toggleForecast">
-          <h3 class="card-title">短期水文预报预览</h3>
+
+      <!-- 分区雨情卡片 -->
+      <div class="data-card mt-20">
+        <div class="card-header" @click="toggleDistrictRainfall">
+          <h3 class="card-title">分区雨情</h3>
           <div class="header-actions">
-            <span class="update-time">每6小时更新</span>
-            <span class="toggle-btn">{{ forecastExpanded ? '▼' : '▶' }}</span>
+            <span class="toggle-btn">{{ districtRainfallExpanded ? '▼' : '▶' }}</span>
           </div>
         </div>
-        <div v-if="forecastExpanded" class="card-body">
-          <div class="time-range-toggle">
-            <button 
-              class="time-btn" 
-              :class="{ active: forecastRange === '24h' }"
-              @click="forecastRange = '24h'"
-            >
-              24h
-            </button>
-            <button 
-              class="time-btn" 
-              :class="{ active: forecastRange === '72h' }"
-              @click="forecastRange = '72h'"
-            >
-              72h
-            </button>
-          </div>
-          <!-- 小塔山水库 -->
-          <div class="section forecast-main">
-            <h4 class="section-title">小塔山水库</h4>
-            <div class="section-content">
-              <div class="main-forecast">
-                <span class="forecast-item">预计水位涨幅 0.8m</span>
-                <span class="forecast-item">预计最高库水位 19.3m</span>
+        <div v-if="districtRainfallExpanded" class="card-body">
+          <div class="district-rainfall-content">
+            <div class="rainfall-map-container">
+              <div class="rainfall-map-placeholder">
+                <div class="map-label">分区雨情示意图</div>
               </div>
-              <div class="aux-forecast">
-                <span class="forecast-item">预计入库流量峰值 55.2m³/s（14时）</span>
+            </div>
+            <div class="rainfall-legend">
+              <div class="legend-item">
+                <div class="legend-color level-0"></div>
+                <span class="legend-text">0~10</span>
               </div>
-              <div class="forecast-note">
-                <span class="note-item">误差 ±0.1m</span>
-                <span class="note-item">基于实时数据 + 气象预报</span>
+              <div class="legend-item">
+                <div class="legend-color level-1"></div>
+                <span class="legend-text">10~25</span>
               </div>
-            </div>
-          </div>
-          
-          <!-- 黑林水文站 + 断面 -->
-          <div class="section forecast-secondary">
-            <h4 class="section-title">黑林水文站 + 断面</h4>
-            <div class="section-content">
-              <div class="main-forecast">
-                <span class="forecast-item">预计最大流量 65.2m³/s</span>
-                <span class="forecast-item">预计水位峰值 13.5m</span>
+              <div class="legend-item">
+                <div class="legend-color level-2"></div>
+                <span class="legend-text">25~50</span>
               </div>
-              <div class="warning-alert" v-if="hasWarning">
-                <span class="warning-text">上游断面预计 16时 接近警戒水位</span>
+              <div class="legend-item">
+                <div class="legend-color level-3"></div>
+                <span class="legend-text">50~100</span>
               </div>
-              <div class="quick-link">
-                <a href="#" class="link-btn" @click.prevent="goToHydrologyForecast">
-                  查看完整预报→水文四预
-                </a>
+              <div class="legend-item">
+                <div class="legend-color level-4"></div>
+                <span class="legend-text">100~250</span>
+              </div>
+              <div class="legend-item">
+                <div class="legend-color level-5"></div>
+                <span class="legend-text">&gt;=250</span>
               </div>
             </div>
           </div>
         </div>
       </div>
+
+      <!-- 黑林水文站实时水情卡片 -->
+      <div class="data-card mt-20">
+        <div class="card-header" @click="toggleHeilinHydrology">
+          <h3 class="card-title">黑林水文站实时水情</h3>
+          <div class="header-actions">
+            <span class="update-time">{{ updateTimeStr }}</span>
+            <span class="toggle-btn">{{ heilinHydrologyExpanded ? '▼' : '▶' }}</span>
+          </div>
+        </div>
+        <div v-if="heilinHydrologyExpanded" class="card-body">
+          <div class="hydrology-stats">
+            <div class="stat-item">
+              <div class="stat-label">水位</div>
+              <div class="stat-unit">(m)</div>
+              <div class="stat-value current">2.5</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">比昨日</div>
+              <div class="stat-unit">(m)</div>
+              <div class="stat-value yesterday">+0.2</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">比多年平均</div>
+              <div class="stat-unit">(m)</div>
+              <div class="stat-value average">+0.5</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">比警戒</div>
+              <div class="stat-unit">(m)</div>
+              <div class="stat-value" :class="warningDiff >= 0 ? 'warning-positive' : 'warning-negative'">{{ warningDiff >= 0 ? '+' : '' }}{{ warningDiff }}</div>
+            </div>
+          </div>
+          <div class="charts-container">
+            <div class="chart-box">
+              <div class="chart-title">水位</div>
+              <canvas id="heilinWaterLevelChart" width="300" height="120"></canvas>
+            </div>
+            <div class="chart-box">
+              <div class="chart-title">流量</div>
+              <canvas id="heilinFlowChart" width="300" height="120"></canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 右侧小塔山水情统计 -->
+    <div class="right-sidebar">
+      <div class="data-card">
+        <div class="card-header" @click="toggleXiaotaishan">
+          <h3 class="card-title">库容统计<span class="card-subtitle">小塔山</span></h3>
+          <div class="header-actions">
+            <span class="update-time">{{ updateTimeStr }}</span>
+            <span class="toggle-btn">{{ xiaotaishanExpanded ? '▼' : '▶' }}</span>
+          </div>
+        </div>
+        <div v-if="xiaotaishanExpanded" class="card-body">
+          <div class="hydrology-stats">
+            <div class="stat-item">
+              <div class="stat-label">水位</div>
+              <div class="stat-unit">(m)</div>
+              <div class="stat-value current">18.5</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">比昨日</div>
+              <div class="stat-unit">(m)</div>
+              <div class="stat-value yesterday">+0.3</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">比多年平均</div>
+              <div class="stat-unit">(m)</div>
+              <div class="stat-value average">+0.8</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-label">比汛限</div>
+              <div class="stat-unit">(m)</div>
+              <div class="stat-value" :class="xiaotaishanWarningDiff >= 0 ? 'warning-positive' : 'warning-negative'">{{ xiaotaishanWarningDiff >= 0 ? '+' : '' }}{{ xiaotaishanWarningDiff }}</div>
+            </div>
+          </div>
+          <div class="chart-box">
+            <canvas id="xiaotaishanCombinedChart" width="300" height="200"></canvas>
+          </div>
+        </div>
+      </div>
     </div>
     
     <!-- 底部数据栏 -->
@@ -146,10 +204,12 @@ export default {
     return {
       currentTime: '',
       updateTimeStr: '',
-      coreDataExpanded: true,
-      forecastExpanded: true,
-      forecastRange: '24h',
-      hasWarning: true,
+      weatherForecastExpanded: true,
+      districtRainfallExpanded: true,
+      heilinHydrologyExpanded: true,
+      xiaotaishanExpanded: true,
+      xiaotaishanWarningDiff: -1.5,
+      warningDiff: -2.0,
       monitoringData: [
         '黑林站水位 12.5m',
         '小塔山水库库容 2350.8万m³',
@@ -161,8 +221,12 @@ export default {
       scrollPosition: 0,
       scrollInterval: null,
       waterLevel24hChart: null,
+      rainfall24hChart: null,
       flowChart: null,
-      capacityChart: null
+      capacityChart: null,
+      heilinWaterLevelChart: null,
+      heilinFlowChart: null,
+      xiaotaishanCombinedChart: null
     }
   },
   mounted() {
@@ -191,17 +255,28 @@ export default {
       this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
       this.updateTimeStr = `${hours}:${minutes}:${seconds}`
     },
-    toggleCoreData() {
-      this.coreDataExpanded = !this.coreDataExpanded
-      // 当核心数据卡片展开时，重新初始化图表
-      if (this.coreDataExpanded) {
+    toggleWeatherForecast() {
+      this.weatherForecastExpanded = !this.weatherForecastExpanded
+    },
+    toggleDistrictRainfall() {
+      this.districtRainfallExpanded = !this.districtRainfallExpanded
+    },
+    toggleHeilinHydrology() {
+      this.heilinHydrologyExpanded = !this.heilinHydrologyExpanded
+      if (this.heilinHydrologyExpanded) {
         setTimeout(() => {
-          this.initCharts()
+          this.initHeilinWaterLevelChart()
+          this.initHeilinFlowChart()
         }, 100)
       }
     },
-    toggleForecast() {
-      this.forecastExpanded = !this.forecastExpanded
+    toggleXiaotaishan() {
+      this.xiaotaishanExpanded = !this.xiaotaishanExpanded
+      if (this.xiaotaishanExpanded) {
+        setTimeout(() => {
+          this.initXiaotaishanCombinedChart()
+        }, 100)
+      }
     },
     goToHydrologyForecast() {
       // 跳转到水文四预页面
@@ -221,6 +296,13 @@ export default {
       }
     },
     initCharts() {
+      // 初始化黑林水文站水位过程线图
+      this.initHeilinWaterLevelChart()
+      // 初始化黑林水文站流量过程线图
+      this.initHeilinFlowChart()
+      // 初始化小塔山水库水位和库容组合图
+      this.initXiaotaishanCombinedChart()
+      
       // 初始化24h水位变化趋势图（核心监测卡片中）
       if (document.getElementById('waterLevel24hChart')) {
         this.waterLevel24hChart = echarts.init(document.getElementById('waterLevel24hChart'))
@@ -334,6 +416,75 @@ export default {
         this.waterLevel24hChart.setOption(waterLevel24hOption)
       }
       
+      // 初始化24h雨量柱状图
+      if (document.getElementById('rainfall24hChart')) {
+        this.rainfall24hChart = echarts.init(document.getElementById('rainfall24hChart'))
+        const rainfall24hOption = {
+          animation: false,
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '15%',
+            top: '2%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
+              axisLine: {
+                lineStyle: {
+                  color: '#7bbef6'
+                }
+              },
+              axisLabel: {
+                color: '#7bbef6'
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '雨量(mm)',
+              nameTextStyle: {
+                color: '#7bbef6'
+              },
+              min: 0,
+              axisLine: {
+                lineStyle: {
+                  color: '#7bbef6'
+                }
+              },
+              axisLabel: {
+                color: '#7bbef6'
+              },
+              splitLine: {
+                lineStyle: {
+                  color: 'rgba(123, 190, 246, 0.2)'
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              name: '24h雨量',
+              type: 'bar',
+              data: [1.2, 0.8, 2.5, 3.1, 2.8, 1.5, 0.9, 1.8, 0.7],
+              itemStyle: {
+                color: '#62f6fb'
+              }
+            }
+          ]
+        }
+        this.rainfall24hChart.setOption(rainfall24hOption)
+      }
+      
       // 初始化入库/出库流量对比图
       if (document.getElementById('flowChart')) {
         this.flowChart = echarts.init(document.getElementById('flowChart'))
@@ -399,86 +550,434 @@ export default {
               type: 'bar',
               data: [20.0, 22.5, 25.0, 24.5],
               itemStyle: {
-                color: '#7bbef6'
+                color: '#7bbef6'
+              }
+            }
+          ]
+        }
+        this.flowChart.setOption(flowOption)
+      }
+      
+      // 初始化库容占比环形图
+      if (document.getElementById('capacityChart')) {
+        this.capacityChart = echarts.init(document.getElementById('capacityChart'))
+        const capacityOption = {
+          animation: false,
+          tooltip: {
+            trigger: 'item'
+          },
+          legend: {
+            orient: 'vertical',
+            left: 'left',
+            textStyle: {
+              color: '#7bbef6'
+            }
+          },
+          series: [
+            {
+              name: '库容占比',
+              type: 'pie',
+              radius: ['40%', '70%'],
+              avoidLabelOverlap: false,
+              itemStyle: {
+                borderRadius: 10,
+                borderColor: 'rgba(0, 30, 60, 0.6)',
+                borderWidth: 2
+              },
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: 14,
+                  fontWeight: 'bold',
+                  color: '#e0fcff'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                {
+                  value: 78,
+                  name: '已使用',
+                  itemStyle: {
+                    color: '#62f6fb'
+                  }
+                },
+                {
+                  value: 22,
+                  name: '剩余',
+                  itemStyle: {
+                    color: 'rgba(123, 190, 246, 0.3)'
+                  }
+                }
+              ]
+            }
+          ]
+        }
+        this.capacityChart.setOption(capacityOption)
+      }
+    },
+    destroyCharts() {
+      if (this.waterLevel24hChart) {
+        this.waterLevel24hChart.dispose()
+      }
+      if (this.rainfall24hChart) {
+        this.rainfall24hChart.dispose()
+      }
+      if (this.flowChart) {
+        this.flowChart.dispose()
+      }
+      if (this.capacityChart) {
+        this.capacityChart.dispose()
+      }
+      if (this.heilinWaterLevelChart) {
+        this.heilinWaterLevelChart.dispose()
+      }
+      if (this.heilinFlowChart) {
+        this.heilinFlowChart.dispose()
+      }
+      if (this.xiaotaishanCombinedChart) {
+        this.xiaotaishanCombinedChart.dispose()
+      }
+    },
+    initXiaotaishanCombinedChart() {
+      if (document.getElementById('xiaotaishanCombinedChart')) {
+        if (this.xiaotaishanCombinedChart) {
+          this.xiaotaishanCombinedChart.dispose()
+        }
+        this.xiaotaishanCombinedChart = echarts.init(document.getElementById('xiaotaishanCombinedChart'))
+        const xiaotaishanCombinedOption = {
+          animation: false,
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              label: {
+                backgroundColor: '#6a7985'
+              }
+            },
+            formatter: function(params) {
+              let result = params[0].axisValue + '<br/>';
+              params.forEach(function(item) {
+                let unit = item.seriesName === '水位' ? 'm' : '10⁶m³';
+                result += item.marker + item.seriesName + ': ' + item.value + ' ' + unit + '<br/>';
+              });
+              return result;
+            }
+          },
+          legend: {
+            data: ['水位', '库容'],
+            textStyle: {
+              color: '#7bbef6'
+            },
+            bottom: '0%'
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '15%',
+            top: '5%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: false,
+              data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
+              axisLine: {
+                lineStyle: {
+                  color: '#7bbef6'
+                }
+              },
+              axisLabel: {
+                color: '#7bbef6'
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '水位：m',
+              nameTextStyle: {
+                color: '#ffd93d'
+              },
+              min: 16,
+              max: 22,
+              axisLine: {
+                lineStyle: {
+                  color: '#ffd93d'
+                }
+              },
+              axisLabel: {
+                color: '#ffd93d'
+              },
+              splitLine: {
+                lineStyle: {
+                  color: 'rgba(123, 190, 246, 0.2)'
+                }
+              }
+            },
+            {
+              type: 'value',
+              name: '库容：10⁶m³',
+              nameTextStyle: {
+                color: '#62f6fb'
+              },
+              min: 0,
+              max: 300,
+              interval: 50,
+              position: 'right',
+              axisLine: {
+                lineStyle: {
+                  color: '#62f6fb'
+                }
+              },
+              axisLabel: {
+                color: '#62f6fb'
+              },
+              splitLine: {
+                show: false
+              }
+            }
+          ],
+          series: [
+            {
+              name: '水位',
+              type: 'line',
+              yAxisIndex: 0,
+              data: [18.2, 18.3, 18.5, 18.6, 18.8, 18.6, 18.5],
+              lineStyle: {
+                color: '#ffd93d',
+                width: 2
+              },
+              itemStyle: {
+                color: '#ffd93d'
+              }
+            },
+            {
+              name: '库容',
+              type: 'line',
+              yAxisIndex: 1,
+              data: [220, 225, 230, 235, 240, 235, 230],
+              lineStyle: {
+                color: '#62f6fb',
+                width: 2
+              },
+              itemStyle: {
+                color: '#62f6fb'
+              }
+            }
+          ]
+        }
+        this.xiaotaishanCombinedChart.setOption(xiaotaishanCombinedOption)
+      }
+    },
+    initHeilinWaterLevelChart() {
+      if (document.getElementById('heilinWaterLevelChart')) {
+        if (this.heilinWaterLevelChart) {
+          this.heilinWaterLevelChart.dispose()
+        }
+        this.heilinWaterLevelChart = echarts.init(document.getElementById('heilinWaterLevelChart'))
+        const heilinWaterLevelOption = {
+          animation: false,
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              label: {
+                backgroundColor: '#6a7985'
+              }
+            }
+          },
+          legend: {
+            data: ['实时水位', '保证水位', '警戒水位'],
+            textStyle: {
+              color: '#7bbef6'
+            },
+            bottom: '0%'
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '15%',
+            top: '5%',
+            containLabel: true
+          },
+          xAxis: [
+            {
+              type: 'category',
+              boundaryGap: false,
+              data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
+              axisLine: {
+                lineStyle: {
+                  color: '#7bbef6'
+                }
+              },
+              axisLabel: {
+                color: '#7bbef6'
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '水位',
+              nameTextStyle: {
+                color: '#7bbef6'
+              },
+              min: 0,
+              max: 7,
+              axisLine: {
+                lineStyle: {
+                  color: '#7bbef6'
+                }
+              },
+              axisLabel: {
+                color: '#7bbef6'
+              },
+              splitLine: {
+                lineStyle: {
+                  color: 'rgba(123, 190, 246, 0.2)'
+                }
+              }
+            }
+          ],
+          series: [
+            {
+              name: '实时水位',
+              type: 'line',
+              data: [2.2, 2.3, 2.5, 2.6, 2.8, 2.6, 2.5, 2.4, 2.5],
+              lineStyle: {
+                color: '#00d4ff',
+                width: 2
+              },
+              itemStyle: {
+                color: '#00d4ff'
+              }
+            },
+            {
+              name: '保证水位',
+              type: 'line',
+              data: [3.7, 3.7, 3.7, 3.7, 3.7, 3.7, 3.7, 3.7, 3.7],
+              symbol: 'none',
+              lineStyle: {
+                color: '#ffd93d',
+                width: 2,
+                type: 'dashed'
+              },
+              itemStyle: {
+                color: '#ffd93d'
+              }
+            },
+            {
+              name: '警戒水位',
+              type: 'line',
+              data: [4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5],
+              symbol: 'none',
+              lineStyle: {
+                color: '#ff6b6b',
+                width: 2,
+                type: 'dashed'
+              },
+              itemStyle: {
+                color: '#ff6b6b'
               }
             }
           ]
         }
-        this.flowChart.setOption(flowOption)
+        this.heilinWaterLevelChart.setOption(heilinWaterLevelOption)
       }
-      
-      // 初始化库容占比环形图
-      if (document.getElementById('capacityChart')) {
-        this.capacityChart = echarts.init(document.getElementById('capacityChart'))
-        const capacityOption = {
+    },
+    initHeilinFlowChart() {
+      if (document.getElementById('heilinFlowChart')) {
+        if (this.heilinFlowChart) {
+          this.heilinFlowChart.dispose()
+        }
+        this.heilinFlowChart = echarts.init(document.getElementById('heilinFlowChart'))
+        const heilinFlowOption = {
           animation: false,
           tooltip: {
-            trigger: 'item'
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              label: {
+                backgroundColor: '#6a7985'
+              }
+            }
           },
           legend: {
-            orient: 'vertical',
-            left: 'left',
+            data: ['实时流量'],
             textStyle: {
               color: '#7bbef6'
-            }
+            },
+            bottom: '0%'
           },
-          series: [
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '15%',
+            top: '5%',
+            containLabel: true
+          },
+          xAxis: [
             {
-              name: '库容占比',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap: false,
-              itemStyle: {
-                borderRadius: 10,
-                borderColor: 'rgba(0, 30, 60, 0.6)',
-                borderWidth: 2
+              type: 'category',
+              boundaryGap: false,
+              data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],
+              axisLine: {
+                lineStyle: {
+                  color: '#7bbef6'
+                }
               },
-              label: {
-                show: false,
-                position: 'center'
+              axisLabel: {
+                color: '#7bbef6'
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '流量',
+              nameTextStyle: {
+                color: '#7bbef6'
               },
-              emphasis: {
-                label: {
-                  show: true,
-                  fontSize: 14,
-                  fontWeight: 'bold',
-                  color: '#e0fcff'
+              min: 0,
+              max: 100,
+              axisLine: {
+                lineStyle: {
+                  color: '#7bbef6'
                 }
               },
-              labelLine: {
-                show: false
+              axisLabel: {
+                color: '#7bbef6'
               },
-              data: [
-                {
-                  value: 78,
-                  name: '已使用',
-                  itemStyle: {
-                    color: '#62f6fb'
-                  }
-                },
-                {
-                  value: 22,
-                  name: '剩余',
-                  itemStyle: {
-                    color: 'rgba(123, 190, 246, 0.3)'
-                  }
+              splitLine: {
+                lineStyle: {
+                  color: 'rgba(123, 190, 246, 0.2)'
                 }
-              ]
+              }
+            }
+          ],
+          series: [
+            {
+              name: '实时流量',
+              type: 'line',
+              data: [42.5, 43.2, 45.2, 46.8, 48.5, 46.2, 45.5, 44.8, 45.2],
+              lineStyle: {
+                color: '#62f6fb',
+                width: 2
+              },
+              itemStyle: {
+                color: '#62f6fb'
+              }
             }
           ]
         }
-        this.capacityChart.setOption(capacityOption)
-      }
-    },
-    destroyCharts() {
-      if (this.waterLevel24hChart) {
-        this.waterLevel24hChart.dispose()
-      }
-      if (this.flowChart) {
-        this.flowChart.dispose()
-      }
-      if (this.capacityChart) {
-        this.capacityChart.dispose()
+        this.heilinFlowChart.setOption(heilinFlowOption)
       }
     }
   }
@@ -522,7 +1021,7 @@ export default {
 }
 
 .card-header {
-  height: 60px;
+  height: 50px;
   background-image: url('/src/assets/images/数据小标题.png');
   background-size: 100% 100%;
   background-position: center;
@@ -530,7 +1029,7 @@ export default {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 10px 20px 0;
+  padding: 6px 20px 0;
   cursor: pointer;
 }
 
@@ -543,6 +1042,14 @@ export default {
   padding-left: 20px;
 }
 
+.card-subtitle {
+  font-size: 12px;
+  font-weight: normal;
+  color: #62f6fb;
+  margin-left: 8px;
+  text-shadow: none;
+}
+
 .header-actions {
   display: flex;
   align-items: center;
@@ -563,10 +1070,11 @@ export default {
 }
 
 .card-body {
-  padding: 20px;
-  min-height: 120px;
+  padding: 12px;
+  min-height: auto;
   font-size: 16px;
   line-height: 1.6;
+  margin-top: -10px;
 }
 
 .forecast-card .card-body {
@@ -708,6 +1216,18 @@ export default {
   margin-top: 0;
 }
 
+/* 图表并排显示样式 */
+.charts-row {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.chart-item {
+  flex: 1;
+  min-width: 280px;
+}
+
 /* 上下游断面样式 */
 .extreme-values {
   display: flex;
@@ -982,4 +1502,199 @@ export default {
   gap: 15px;
   flex-shrink: 0;
 }
+
+/* 五天气象预报样式 */
+.five-day-forecast {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  gap: 10px;
+}
+
+.forecast-day {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 2px;
+  background: rgba(0, 20, 40, 0.5);
+  border-radius: 4px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  flex: 1;
+  min-width: 50px;
+}
+
+.day-name {
+  color: #7bbef6;
+  font-size: 12px;
+  font-weight: bold;
+  margin-top: 2px;
+}
+
+.weather-icon {
+  font-size: 24px;
+}
+
+/* 分区雨情样式 */
+.district-rainfall-body {
+  padding: 12px;
+  background: rgba(0, 20, 40, 0.5);
+  border-radius: 4px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+}
+
+.district-rainfall-content {
+  display: flex;
+  gap: 12px;
+}
+
+.rainfall-map-container {
+  flex: 1;
+  height: 140px;
+  background: rgba(0, 20, 40, 0.5);
+  border-radius: 4px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.rainfall-map-placeholder {
+  text-align: center;
+  color: #7bbef6;
+}
+
+.map-label {
+  font-size: 14px;
+}
+
+.rainfall-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  justify-content: center;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.legend-color {
+  width: 10px;
+  height: 10px;
+  border-radius: 1px;
+}
+
+.legend-color.level-0 {
+  background-color: #4ade80;
+}
+
+.legend-color.level-1 {
+  background-color: #22c55e;
+}
+
+.legend-color.level-2 {
+  background-color: #38bdf8;
+}
+
+.legend-color.level-3 {
+  background-color: #3b82f6;
+}
+
+.legend-color.level-4 {
+  background-color: #f472b6;
+}
+
+.legend-color.level-5 {
+  background-color: #9f1239;
+}
+
+.legend-text {
+  color: #e0fcff;
+  font-size: 10px;
+}
+
+/* 水文站实时水情样式 */
+.hydrology-card-body {
+  padding: 6px;
+  background: rgba(0, 20, 40, 0.5);
+  border-radius: 4px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+}
+
+.hydrology-stats {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 8px;
+  margin-top: -4px;
+}
+
+.stat-item {
+  flex: 1;
+  background: rgba(0, 20, 40, 0.6);
+  border-radius: 2px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  padding: 6px 2px;
+  text-align: center;
+}
+
+.stat-label {
+  color: #7bbef6;
+  font-size: 11px;
+}
+
+.stat-unit {
+  color: #7bbef6;
+  font-size: 10px;
+  margin-bottom: 2px;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: bold;
+  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
+}
+
+.stat-value.current {
+  color: #62f6fb;
+}
+
+.stat-value.yesterday {
+  color: #f472b6;
+}
+
+.stat-value.average {
+  color: #ffd93d;
+}
+
+.stat-value.warning-negative {
+  color: #22c55e;
+}
+
+.stat-value.warning-positive {
+  color: #ff6b6b;
+}
+
+.charts-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chart-box {
+  background: rgba(0, 20, 40, 0.5);
+  border-radius: 4px;
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  padding: 8px;
+}
+
+.chart-title {
+  color: #7bbef6;
+  font-size: 13px;
+  font-weight: bold;
+  margin-bottom: 6px;
+  text-align: left;
+}
 </style>