Wulaer/src/views/OverviewView.vue

<template>
  <div class="overview-container">
    <!-- 左侧数据卡片 -->
    <div class="left-sidebar">
      <!-- 乌拉海水库简介卡片 -->
      <div class="data-card">
        <div class="card-header" @click="toggleWeatherForecast">
          <h3 class="card-title">乌拉海水库</h3>
          <div class="header-actions">
            <span class="more-header" @click.stop="showReservoirModal = true">更多</span>
            <span class="toggle-btn">{{ weatherForecastExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="weatherForecastExpanded" class="card-body">
            <div class="reservoir-image">
              <img src="/src/assets/images/乌拉海沟水库.png" alt="乌拉海沟水库" />
            </div>
            <div class="reservoir-info">
              <p><span class="info-label">基本情况：</span>属于平原区水库（中型）</p>
              <p><span class="info-label">工程等别：</span>Ⅰ等</p>
              <p><span class="info-label">水利主管部门：</span>第四师水利局</p>
              <p><span class="info-label">管理部门：</span>第四师水利管理处</p>
              <p><span class="info-label">所在地：</span>第四师乌拉海沟 经度：87°25′00″ 纬度：44°09′00″</p>
              <p><span class="info-label">主要功能：</span>防洪、灌溉、供水、生态、旅游、养殖</p>
            </div>
          </div>
      </div>

      <!-- 水库特征卡片 -->
      <div class="data-card mt-20">
        <div class="card-header" @click="toggleDistrictRainfall">
          <h3 class="card-title">水库特征</h3>
          <div class="header-actions">
            <span class="toggle-btn">{{ districtRainfallExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="districtRainfallExpanded" class="card-body">
          <div class="feature-grid">
            <div class="feature-item">
              <div class="feature-icon-small">
                <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
              </div>
              <div class="feature-info">
                <div class="feature-name">总库容</div>
                <div class="feature-data">
                  <span class="feature-value">6500</span>
                  <span class="feature-unit">万m³</span>
                </div>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon-small">
                <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
              </div>
              <div class="feature-info">
                <div class="feature-name">死库容</div>
                <div class="feature-data">
                  <span class="feature-value">860</span>
                  <span class="feature-unit">万m³</span>
                </div>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon-small">
                <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
              </div>
              <div class="feature-info">
                <div class="feature-name">死水位</div>
                <div class="feature-data">
                  <span class="feature-value">108.5</span>
                  <span class="feature-unit">m</span>
                </div>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon-small">
                <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
              </div>
              <div class="feature-info">
                <div class="feature-name">设计洪水位</div>
                <div class="feature-data">
                  <span class="feature-value">118.2</span>
                  <span class="feature-unit">m</span>
                </div>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon-small">
                <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
              </div>
              <div class="feature-info">
                <div class="feature-name">防洪高水位</div>
                <div class="feature-data">
                  <span class="feature-value">116.8</span>
                  <span class="feature-unit">m</span>
                </div>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon-small">
                <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
              </div>
              <div class="feature-info">
                <div class="feature-name">调节库容</div>
                <div class="feature-data">
                  <span class="feature-value">4200</span>
                  <span class="feature-unit">万m³</span>
                </div>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon-small">
                <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
              </div>
              <div class="feature-info">
                <div class="feature-name">正常蓄水位</div>
                <div class="feature-data">
                  <span class="feature-value">114.0</span>
                  <span class="feature-unit">m</span>
                </div>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon-small">
                <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
              </div>
              <div class="feature-info">
                <div class="feature-name">校核洪水位</div>
                <div class="feature-data">
                  <span class="feature-value">119.5</span>
                  <span class="feature-unit">m</span>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top: 16px;">
            <div class="chart-sub-header">
              <span class="chart-sub-title">主坝特征</span>
            </div>
            <div class="dam-feature-grid">
              <div class="feature-item">
                <div class="feature-icon-small">
                  <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
                </div>
                <div class="feature-info">
                  <div class="feature-name">坝基防渗形式</div>
                  <div class="feature-data">
                    <span class="feature-value">混凝土防渗墙</span>
                  </div>
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon-small">
                  <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
                </div>
                <div class="feature-info">
                  <div class="feature-name">坝型</div>
                  <div class="feature-data">
                    <span class="feature-value">均值混凝土</span>
                  </div>
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon-small">
                  <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
                </div>
                <div class="feature-info">
                  <div class="feature-name">坝顶总长度(m)</div>
                  <div class="feature-data">
                    <span class="feature-value">5400</span>
                  </div>
                </div>
              </div>
              <div class="feature-item">
                <div class="feature-icon-small">
                  <img src="/src/assets/images/水电站大坝工程.png" alt="icon" />
                </div>
                <div class="feature-info">
                  <div class="feature-name">坝顶高程(m)</div>
                  <div class="feature-data">
                    <span class="feature-value">487.37</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="margin-top: 12px;">
            <div class="chart-sub-header">
              <span class="chart-sub-title">特征图</span>
            </div>
            <ReservoirChart />
          </div>
        </div>
      </div>

    </div>
    
    <!-- 右侧数据 -->
    <div class="right-sidebar">
      
      <!-- 今日值班卡片 -->
      <div class="data-card mt-20">
        <div class="card-header">
          <h3 class="card-title">今日值班</h3>
        </div>
        <div class="card-body">
          <div class="duty-section">
            <div class="duty-section-title">四师水利局</div>
            <div class="duty-row">
              <span class="duty-tag today">今</span>
              <span class="duty-segment">值班：</span>
              <span class="duty-person">张 三</span>
              <span class="duty-segment">带班：</span>
              <span class="duty-person">李 明</span>
            </div>
            <div class="duty-row">
              <span class="duty-tag tomorrow">明</span>
              <span class="duty-segment">值班：</span>
              <span class="duty-person">张文超</span>
              <span class="duty-segment">带班：</span>
              <span class="duty-person">李小红</span>
            </div>
          </div>
          <div class="duty-section">
            <div class="duty-section-title">四师水利管理处</div>
            <div class="duty-row">
              <span class="duty-tag today">今</span>
              <span class="duty-segment">值班：</span>
              <span class="duty-person">张 三</span>
              <span class="duty-segment">带班：</span>
              <span class="duty-person">李 明</span>
            </div>
            <div class="duty-row">
              <span class="duty-tag tomorrow">明</span>
              <span class="duty-segment">值班：</span>
              <span class="duty-person">张文超</span>
              <span class="duty-segment">带班：</span>
              <span class="duty-person">李小红</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 最新调度卡片 -->
      <div class="data-card mt-20">
        <div class="card-header">
          <h3 class="card-title">最新调度</h3>
        </div>
        <div class="card-body">
          <div class="dispatch-notice">
            <div class="dispatch-notice-icon">
              <img src="/src/assets/images/铃铛.png" alt="铃铛" />
            </div>
            <div class="dispatch-notice-text">
              <div class="dispatch-notice-scroll">
                乌拉海水库调[2023]84号，出库流量按60m³/s控制
              </div>
            </div>
          </div>
          <div class="dispatch-cards">
            <div class="dispatch-card">
              <div class="dispatch-card-label">控制出库流量</div>
              <div class="dispatch-card-value">60<span class="dispatch-card-unit">m³/s</span></div>
            </div>
            <div class="dispatch-card">
              <div class="dispatch-card-label">实时出库流量</div>
              <div class="dispatch-card-value dispatch-card-value-warning">52.412<span class="dispatch-card-unit">m³/s</span></div>
            </div>
            <div class="dispatch-card">
              <div class="dispatch-card-label">日均出库流量</div>
              <div class="dispatch-card-value">60.32<span class="dispatch-card-unit">m³/s</span></div>
            </div>
          </div>
          <div class="dispatch-time">
            <span class="dispatch-time-label">最新调整时间</span>
            <span class="dispatch-time-value">2026年5月29日10:42:40</span>
          </div>
          <div class="dispatch-level-cards">
            <div class="dispatch-level-card">
              <div class="dispatch-level-icon">
                <img src="/src/assets/images/小图标库水位.png" alt="库水位" />
              </div>
              <div class="dispatch-level-info">
                <div class="dispatch-level-label">库水位(m)</div>
                <div class="dispatch-level-value">112.5</div>
              </div>
            </div>
            <div class="dispatch-level-card">
              <div class="dispatch-level-icon">
                <img src="/src/assets/images/小图标库水位.png" alt="下游水位" />
              </div>
              <div class="dispatch-level-info">
                <div class="dispatch-level-label">下游水位(m)</div>
                <div class="dispatch-level-value">12.5</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 水库监测卡片 -->
      <div class="data-card mt-20">
        <div class="card-header">
          <h3 class="card-title">水库监测</h3>
        </div>
        <div class="card-body">
          <!-- 趋势监控图表 -->
          <div class="reservoir-monitor-section">
            <div class="monitor-time-range">
              <span class="time-range-label">时间范围：</span>
              <span class="time-range-value">2026-05-29 18:30 至 2026-05-30 15:30</span>
            </div>
            <!-- 降雨与水位组合图 -->
            <div class="monitor-chart-box">
              <div class="monitor-chart-label">降雨与水位监测</div>
              <div id="waterLevelTrendChart" style="width:100%;height:200px;"></div>
              <div class="monitor-chart-desc">库水位在监测时段内稳定维持在约 113.0m，无明显波动</div>
            </div>
          </div>
          <!-- 水量统计卡片 -->
          <div class="water-stats-row">
            <div class="water-stat-card">
              <div class="water-stat-label">当日供水（万m³）</div>
              <div class="water-stat-value">502</div>
            </div>
            <div class="water-stat-card">
              <div class="water-stat-label">当日排水（万m³）</div>
              <div class="water-stat-value">0</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 水库详情弹窗 -->
    <div v-if="showReservoirModal" class="modal-overlay" @click.self="showReservoirModal = false">
      <div class="modal-content">
        <div class="modal-header">
          <h3>乌拉海沟水库</h3>
          <span class="modal-close" @click="showReservoirModal = false">✕</span>
        </div>
        <div class="modal-body">
          <div class="modal-image">
            <img src="/src/assets/images/乌拉海沟水库.png" alt="乌拉海沟水库" />
          </div>
          <div class="modal-text">
            <p><span class="info-label">基本情况：</span>属于平原区水库（中型）</p>
            <p><span class="info-label">工程等别：</span>Ⅰ等</p>
            <p><span class="info-label">水利主管部门：</span>第四师水利局</p>
            <p><span class="info-label">管理部门：</span>第四师水利管理处</p>
            <p><span class="info-label">所在地：</span>第四师乌拉海沟 经度：87°25′00″ 纬度：44°09′00″</p>
            <div class="info-section-title">建设时间：</div>
            <p style="padding-left:12px;">主体工程开工：1952年06月01日</p>
            <p style="padding-left:12px;">下闸蓄水：1956年05月01日</p>
            <p style="padding-left:12px;">竣工验收：1956年09月01日</p>
            <div class="info-section-title">加固时间：</div>
            <p style="padding-left:12px;">主体工程开工：2004年04月01日</p>
            <p style="padding-left:12px;">下闸蓄水：2005年06月02日</p>
            <p style="padding-left:12px;">竣工验收：2005年09月02日</p>
            <p><span class="info-label">主要功能：</span>防洪、灌溉、供水、生态、旅游、养殖</p>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import DataCard from '../components/DataCard.vue'
import ReservoirChart from '../components/ReservoirChart.vue'
import * as echarts from 'echarts'

export default {
  name: 'OverviewView',
  components: {
    DataCard,
    ReservoirChart
  },
  data() {
    return {
      showReservoirModal: false,
      weatherForecastExpanded: true,
      districtRainfallExpanded: true,
      heilinHydrologyExpanded: true,
      warningDiff: -2.0,
      waterLevel24hChart: null,
      rainfall24hChart: null,
      flowChart: null,
      capacityChart: null,
      waterLevelTrendChart: null,
    }
  },
  mounted() {
    // 延迟初始化图表，确保DOM已经渲染
    setTimeout(() => {
      this.initCharts()
    }, 100)
  },
  beforeUnmount() {
    this.destroyCharts()
  },
  methods: {
    toggleWeatherForecast() {
      this.weatherForecastExpanded = !this.weatherForecastExpanded
    },
    toggleDistrictRainfall() {
      this.districtRainfallExpanded = !this.districtRainfallExpanded
    },
    goToHydrologyForecast() {
      // 跳转到水文四预页面
      this.$emit('selectTab', '水文四预')
    },
    initCharts() {
      // 初始化24h水位变化趋势图（核心监测卡片中）
      if (document.getElementById('waterLevel24hChart')) {
        this.waterLevel24hChart = echarts.init(document.getElementById('waterLevel24hChart'))
        const waterLevel24hOption = {
          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: '2%',
            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: '水位(m)',
              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.5, 2.8, 3.0, 3.2, 3.5, 3.8, 4.0, 4.1, 4.2],
              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.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'))
        const flowOption = {
          animation: false,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['入库流量', '出库流量'],
            textStyle: {
              color: '#7bbef6'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['00:00', '06:00', '12:00', '18:00'],
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6'
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#7bbef6'
              }
            },
            axisLabel: {
              color: '#7bbef6'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(123, 190, 246, 0.2)'
              }
            }
          },
          series: [
            {
              name: '入库流量',
              type: 'bar',
              data: [30.2, 32.5, 35.2, 33.8],
              itemStyle: {
                color: '#62f6fb'
              }
            },
            {
              name: '出库流量',
              type: 'bar',
              data: [20.0, 22.5, 25.0, 24.5],
              itemStyle: {
                color: '#7bbef6'
              }
            }
          ]
        }
        this.flowChart.setOption(flowOption)
      }
      
      // 初始化库容占比环形图
      if (document.getElementById('capacityChart')) {
        this.capacityChart = echarts.init(document.getElementById('capacityChart'))
        const capacityOption = {
          animation: false,
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}万m³ ({d}%)'
          },
          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)
      }
      
      // 水库监测-降雨与水位组合图（双轴）
      if (document.getElementById('waterLevelTrendChart')) {
        this.waterLevelTrendChart = echarts.init(document.getElementById('waterLevelTrendChart'))
        const waterLevelTrendOption = {
          animation: false,
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' }
          },
          legend: {
            data: ['降雨量', '融雪水量', '库水位'],
            textStyle: { color: '#7bbef6' },
            bottom: '0%',
            itemWidth: 12,
            itemHeight: 8
          },
          grid: {
            left: '5%',
            right: '6%',
            bottom: '14%',
            top: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['05-29 18:30', '05-29 21:30', '05-30 00:30', '05-30 03:30', '05-30 06:30', '05-30 09:30', '05-30 12:30', '05-30 15:30'],
            axisLine: { lineStyle: { color: '#7bbef6' } },
            axisLabel: { color: '#7bbef6', fontSize: 10 }
          },
          yAxis: [
            {
              type: 'value',
              name: '水量(mm)',
              nameTextStyle: { color: '#62f6fb' },
              min: -4,
              max: 0,
              axisLine: { lineStyle: { color: '#62f6fb' } },
              axisLabel: {
                color: '#62f6fb',
                formatter: (v) => Math.abs(v)
              },
              splitLine: { show: false }
            },
            {
              type: 'value',
              name: '水位(m)',
              nameTextStyle: { color: '#00d4ff' },
              min: 112.0,
              max: 114.0,
              axisLine: { lineStyle: { color: '#00d4ff' } },
              axisLabel: { color: '#00d4ff' },
              splitLine: { lineStyle: { color: 'rgba(123, 190, 246, 0.15)' } }
            }
          ],
          series: [
            {
              name: '融雪水量',
              type: 'bar',
              yAxisIndex: 0,
              barWidth: 6,
              data: [-0.3, -0.2, -0.2, -0.5, -1.2, -2.0, -1.8, -0.8],
              itemStyle: {
                color: '#ffffff',
                borderRadius: [0, 0, 2, 2]
              }
            },
            {
              name: '降雨量',
              type: 'bar',
              yAxisIndex: 0,
              barWidth: 6,
              data: [0, 0, 0, -0.3, -1.2, -0.8, -0.2, 0],
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(98, 246, 251, 0.3)' },
                  { offset: 1, color: 'rgba(98, 246, 251, 0.9)' }
                ]),
                borderRadius: [0, 0, 2, 2]
              }
            },
            {
              name: '库水位',
              type: 'line',
              yAxisIndex: 1,
              data: [112.98, 112.99, 113.00, 113.01, 113.00, 112.99, 113.00, 113.01],
              smooth: true,
              symbol: 'circle',
              symbolSize: 4,
              lineStyle: { color: '#00d4ff', width: 2 },
              itemStyle: { color: '#00d4ff' },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(0, 212, 255, 0.35)' },
                  { offset: 1, color: 'rgba(0, 212, 255, 0.05)' }
                ])
              }
            }
          ]
        }
        this.waterLevelTrendChart.setOption(waterLevelTrendOption)
      }
    },
    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.waterLevelTrendChart) {
        this.waterLevelTrendChart.dispose()
      }
    }
  }
}
</script>

<style scoped>
.overview-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.left-sidebar {
  position: absolute;
  left: 20px;
  top: 120px;
  width: 350px;
  z-index: 5;
}

.right-sidebar {
  position: absolute;
  right: 20px;
  top: 120px;
  width: 350px;
  z-index: 5;
}

.mt-20 {
  margin-top: 10px;
}

/* 核心监测数据卡片样式 */
.data-card {
  width: 100%;
  background: rgba(0, 20, 40, 0.7);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}

.card-header {
  height: 42px;
  background-image: url('/src/assets/images/数据小标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 4px 16px 0;
  cursor: pointer;
}

.card-title {
  font-size: var(--fs-card-title);
  font-weight: bold;
  color: #e0fcff;
  margin: 0;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
  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;
  gap: 15px;
  margin-top: 5px;
}

.update-time {
  color: #62f6fb;
  font-size: 14px;
  font-family: monospace;
}

.toggle-btn {
  color: #e0fcff;
  font-size: 14px;
  cursor: pointer;
}

.card-body {
  font-size: var(--fs-body);
  line-height: 1.6;
  margin-top: -10px;
}

.forecast-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* 小节样式 */
.section {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.chart-section {
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  padding: 15px;
  margin-bottom: 25px;
  min-height: 180px;
}

.chart-section .section-title {
  margin-bottom: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #62f6fb;
  margin: 0 0 15px 0;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.main-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.aux-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 8px;
}

.indicator {
  color: #e0fcff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
}

.indicator-flood-limit {
  color: #ff6b6b;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(255, 107, 107, 0.5);
}

/* 汇总数据卡片样式 */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.summary-card {
  background: rgba(0, 30, 60, 0.6);
  border: 1px solid rgba(0, 213, 255, 0.3);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.summary-title {
  color: #7bbef6;
  font-size: 12px;
  margin-bottom: 8px;
}

.summary-value {
  color: #e0fcff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

/* 图表容器样式 */
.chart-container {
  margin: 15px 0;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  padding: 10px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.chart-container.small {
  margin: 10px 0;
  padding: 8px;
}

.chart-container.small-chart {
  width: 150px;
  float: right;
  margin-left: 15px;
}

.chart-container.small-chart.small {
  width: 130px;
  margin-left: 10px;
}

.chart-container.with-title {
  padding: 10px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.chart-container.with-title .section-title {
  margin-bottom: 10px;
  margin-top: 0;
}

/* 图表并排显示样式 */
.charts-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chart-item {
  flex: 1;
  min-width: 280px;
}

/* 上下游断面样式 */
.extreme-values {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.extreme {
  color: #e0fcff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
}

.cross-section-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.cross-section-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.section-name {
  color: #e0fcff;
  font-size: 14px;
  font-weight: bold;
}

.section-water-level {
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
}

.section-water-level.normal {
  color: #62f6fb;
}

.section-water-level.warning {
  color: #ffd93d;
}

.section-water-level.danger {
  color: #ff6b6b;
}

/* 水位联动对比表样式 */
.water-level-comparison {
  background: rgba(0, 20, 40, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  overflow: hidden;
}

.comparison-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background: rgba(0, 212, 255, 0.2);
  font-weight: bold;
  color: #e0fcff;
  font-size: 14px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.3);
}

.comparison-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 15px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
  font-size: 14px;
  color: #7bbef6;
}

.comparison-item:last-child {
  border-bottom: none;
}

.comparison-item.highest {
  background: rgba(0, 212, 255, 0.1);
  color: #e0fcff;
  font-weight: bold;
}

.comparison-item.lowest {
  background: rgba(117, 117, 117, 0.1);
  color: #7bbef6;
  font-weight: bold;
}

/* 预报卡片样式 */
.forecast-card {
  width: 100%;
}

.time-range-toggle {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.time-btn {
  padding: 5px 15px;
  background: rgba(0, 20, 40, 0.7);
  border: 1px solid rgba(0, 212, 255, 0.5);
  border-radius: 3px;
  color: #7bbef6;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.time-btn.active {
  background: rgba(0, 212, 255, 0.3);
  color: #e0fcff;
  border-color: #00d5ff;
}

/* 预报内容样式 */
.forecast-main {
  flex: 2;
  margin-bottom: 25px;
}

.forecast-secondary {
  flex: 1;
}

.main-forecast {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 15px;
}

.aux-forecast {
  margin-bottom: 15px;
}

.forecast-item {
  color: #e0fcff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(0, 212, 255, 0.5);
}

.forecast-note {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 15px;
}

.note-item {
  color: #7bbef6;
  font-size: 14px;
}

/* 预警提示样式 */
.warning-alert {
  background: rgba(255, 107, 107, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.5);
  border-radius: 3px;
  padding: 12px;
  margin: 15px 0;
}

.warning-text {
  color: #ff6b6b;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 3px rgba(255, 107, 107, 0.5);
}

/* 快捷链接样式 */
.quick-link {
  margin-top: 20px;
}

.link-btn {
  display: inline-block;
  padding: 10px 20px;
  background: rgba(0, 212, 255, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.5);
  border-radius: 3px;
  color: #62f6fb;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.link-btn:hover {
  background: rgba(0, 212, 255, 0.4);
  color: #e0fcff;
}

/* 乌拉海水库简介样式 */
.reservoir-image {
  width: 100%;
  height: 130px;
  margin-bottom: 4px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.reservoir-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reservoir-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.reservoir-info p {
  margin: 0;
  color: #e0fcff;
  font-size: 12px;
  line-height: 1.8;
}

.info-label {
  color: #62f6fb;
  font-weight: bold;
}

.info-section-title {
  color: #00d5ff;
  font-size: 12px;
  font-weight: bold;
  margin: 2px 0 0 0;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.chart-sub-header {
  height: 30px;
  background-image: url('/src/assets/images/小标题.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-flex;
  align-items: center;
  padding-left: 16px;
  padding-right: 30px;
  margin-bottom: 8px;
}

.chart-sub-title {
  color: #e0fcff;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

.more-link,
.more-header {
  color: #00d5ff;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.dam-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dam-feature-grid .feature-name {
    font-size: var(--fs-label);  font-weight: var(--fw-label);
}

.dam-feature-grid .feature-value {
  font-size: 13px;
}

.more-header {
  margin-right: 8px;
}

.more-link:hover,
.more-header:hover {
  color: #62f6fb;
}

.feature-data {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.4;
}

/* 水库详情弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: linear-gradient(135deg, rgba(0, 26, 51, 0.97) 0%, rgba(0, 51, 102, 0.97) 100%);
  border: 2px solid rgba(0, 213, 255, 0.5);
  border-radius: 8px;
  width: 700px;
  max-height: 85vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 213, 255, 0.3);
}

.modal-header h3 {
  margin: 0;
  font-size: var(--fs-value-lg);  font-weight: var(--fw-value);
  color: #e0fcff;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

.modal-close {
  color: #62f6fb;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.modal-close:hover {
  color: #00d5ff;
}

.modal-body {
  padding: 20px;
}

.modal-image {
  width: 100%;
  height: 200px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid rgba(0, 213, 255, 0.3);
}

.modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-body p {
  margin: 0;
  color: #e0fcff;
  font-size: 14px;
  line-height: 1.6;
}

/* 主管部门样式 */
.dept-info p {
  margin: 0;
  color: #e0fcff;
  font-size: 12px;
  line-height: 1.4;
  text-indent: 2em;
}

/* 水库特征样式 */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background-image: url('/src/assets/images/卡片背景.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.feature-icon-small {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.feature-icon-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.feature-name {
  color: #62f6fb;
    font-size: var(--fs-label);  font-weight: var(--fw-label);
  font-weight: bold;
  line-height: 1.3;
}

.feature-data {
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1.4;
}

.feature-value {
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
}

.feature-unit {
  color: #62f6fb;
    font-size: var(--fs-unit);  font-weight: var(--fw-normal);
}

/* 水文站实时水情样式 */
.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: var(--fs-value-lg);  font-weight: var(--fw-value);
  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;
}

/* 今日值班样式 */
.duty-section {
  margin-bottom: 10px;
}

.duty-section:last-child {
  margin-bottom: 0;
}

.duty-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 20px;
  background-image: url('/src/assets/images/小标题背景2.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #e0fcff;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.duty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1px 0;
}

.duty-segment {
  color: #62f6fb;
  font-size: 15px;
  font-weight: normal;
  white-space: nowrap;
  letter-spacing: 2px;
}

.duty-segment:first-of-type {
  width: 48px;
  text-align: center;
}

.duty-segment:last-of-type {
  width: 48px;
  text-align: center;
}

.duty-person {
  color: #ffffff;
  font-size: 15px;
  font-weight: normal;
  white-space: nowrap;
  min-width: 56px;
  text-align: center;
}

.duty-tag.today,
.duty-tag.tomorrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  flex-shrink: 0;
  margin-right: 4px;
}

.duty-tag.today {
  background: #0066cc;
}

.duty-tag.tomorrow {
  background: #f97316;
}

/* 最新调度样式 */
.dispatch-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: rgba(255, 193, 7, 0.15);
  border-radius: 4px;
  margin-bottom: 8px;
  height: 20px;
  overflow: hidden;
}

.dispatch-notice-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dispatch-notice-icon img {
  width: 100%;
  height: 100%;
}

.dispatch-notice-text {
  flex: 1;
  overflow: hidden;
  height: 20px;
  line-height: 20px;
}

.dispatch-notice-scroll {
  display: inline-block;
  white-space: nowrap;
  animation: scrollNotice 10s linear infinite;
  color: #ffc107;
  font-size: 13px;
  font-weight: normal;
}

@keyframes scrollNotice {
  0% { transform: translateX(100%); }
  10% { transform: translateX(0); }
  85% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.dispatch-cards {
  display: flex;
  gap: 6px;
}

.dispatch-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px;
  background-image: url('/src/assets/images/卡片背景2.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.dispatch-card-label {
  color: #62f6fb;
    font-size: var(--fs-label);  font-weight: var(--fw-label);
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
}

.dispatch-card-value {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}

.dispatch-card-value-warning {
  color: #ffc107;
}

.dispatch-card-unit {
  color: #62f6fb;
    font-size: var(--fs-unit);  font-weight: var(--fw-normal);
  font-weight: normal;
  margin-left: 2px;
}

.dispatch-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 30px;
  margin: 8px 0;
  border: 1px solid rgba(0, 213, 255, 0.3);
  border-radius: 4px;
}

.dispatch-time-label {
  color: #62f6fb;
  font-size: 13px;
  font-weight: normal;
}

.dispatch-time-value {
  color: #ffffff;
  font-size: 13px;
  font-weight: normal;
}

.dispatch-level-cards {
  display: flex;
  gap: 6px;
}

.dispatch-level-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  background-image: url('/src/assets/images/卡片背景2.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.dispatch-level-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dispatch-level-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dispatch-level-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.dispatch-level-label {
  color: #62f6fb;
  font-size: 11px;
  font-weight: normal;
  white-space: nowrap;
}

.dispatch-level-value {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
}

/* 水库监测卡片样式 */
.water-stats-row {
  display: flex;
  gap: 8px;
}

.water-stat-card {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  background-image: url('/src/assets/images/卡片背景2.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  height: 50px;
}

.water-stat-label {
  color: #62f6fb;
    font-size: var(--fs-label);  font-weight: var(--fw-label);
  margin-bottom: 0;
  text-align: left;
  line-height: 1.2;
  white-space: nowrap;
}

.water-stat-value {
  color: #ffffff;
    font-size: var(--fs-value-xl);  font-weight: var(--fw-value);
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
  line-height: 1.2;
}

.reservoir-monitor-section {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.15);
}

.reservoir-monitor-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.monitor-time-range {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 8px;
  padding: 4px 8px;
  background: rgba(0, 20, 40, 0.5);
  border-radius: 3px;
  border: 1px solid rgba(0, 212, 255, 0.15);
}

.time-range-label {
  color: #62f6fb;
  font-size: 11px;
  white-space: nowrap;
}

.time-range-value {
  color: #e0fcff;
  font-size: 11px;
  font-family: monospace;
}

.monitor-chart-box {
  background: rgba(0, 20, 40, 0.4);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.15);
  padding: 6px;
  margin-bottom: 8px;
}

.monitor-chart-box:last-child {
  margin-bottom: 0;
}

.monitor-chart-label {
  color: #7bbef6;
    font-size: var(--fs-label);  font-weight: var(--fw-label);
  font-weight: bold;
  margin-bottom: 2px;
}

.monitor-chart-desc {
  color: #62f6fb;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 4px;
  text-align: center;
}

.real-time-data {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.real-time-item {
  background: rgba(0, 20, 40, 0.4);
  border-radius: 4px;
  border: 1px solid rgba(0, 212, 255, 0.15);
  padding: 8px 10px;
}

.real-time-label {
  color: #7bbef6;
    font-size: var(--fs-label);  font-weight: var(--fw-label);
  margin-bottom: 4px;
}

.real-time-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}

.real-time-value {
  color: #ffffff;
    font-size: var(--fs-value-xl);  font-weight: var(--fw-value);
  font-weight: bold;
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

.real-time-unit {
  color: #62f6fb;
  font-size: 13px;
}

.real-time-value-text {
  color: #e0fcff;
  font-size: 14px;
  font-weight: bold;
}

.real-time-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  margin-left: auto;
}

.real-time-status.status-normal {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.real-time-desc {
  color: #62f6fb;
  font-size: 11px;
}

.real-time-divider {
  height: 1px;
  background: rgba(0, 212, 255, 0.15);
  margin: 0;
}

.water-volume-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.volume-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background-image: url('/src/assets/images/卡片背景2.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.volume-card-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.volume-card-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.volume-card-info {
  flex: 1;
  min-width: 0;
}

.volume-card-label {
  color: #62f6fb;
    font-size: var(--fs-label);  font-weight: var(--fw-label);
  margin-bottom: 2px;
}

.volume-card-value {
  color: #ffffff;
  font-size: var(--fs-value-lg);  font-weight: var(--fw-value);
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
}

.volume-card-unit {
  color: #62f6fb;
    font-size: var(--fs-unit);  font-weight: var(--fw-normal);
  margin-left: 2px;
}

.volume-card-desc {
  color: #7bbef6;
  font-size: 11px;
  margin-top: 2px;
}
</style>