<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="toggle-btn">{{ weatherForecastExpanded ? '▼' : '▶' }}</span>
          </div>
        </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="forecast-day">
              <div class="weather-icon">⛅</div>
              <div class="day-name">明天</div>
            </div>
            <div class="forecast-day">
              <div class="weather-icon">🌧️</div>
              <div class="day-name">后天</div>
            </div>
            <div class="forecast-day">
              <div class="weather-icon">🌤️</div>
              <div class="day-name">周四</div>
            </div>
            <div class="forecast-day">
              <div class="weather-icon">☀️</div>
              <div class="day-name">周五</div>
            </div>
          </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="update-time">{{ rainfallDateRange }}</span>
            <span class="toggle-btn">{{ districtRainfallExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="districtRainfallExpanded" class="card-body">
          <div class="district-rainfall-content">
            <div class="rainfall-map-container">
              <img :src="rainfallMapImage" alt="连云港降雨分布图" class="rainfall-map-image">
            </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="legend-item">
                <div class="legend-color level-1"></div>
                <span class="legend-text">10~25</span>
              </div>
              <div class="legend-item">
                <div class="legend-color level-2"></div>
                <span class="legend-text">25~50</span>
              </div>
              <div class="legend-item">
                <div class="legend-color level-3"></div>
                <span class="legend-text">50~100</span>
              </div>
              <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="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 class="data-card mt-20">
        <div class="card-header" @click="toggleInOutFlow">
          <h3 class="card-title">出入库水量</h3>
          <div class="header-actions">
            <span class="toggle-btn">{{ inOutFlowExpanded ? '▼' : '▶' }}</span>
          </div>
        </div>
        <div v-if="inOutFlowExpanded" class="card-body">
          <div class="inout-charts-container">
            <div class="chart-item-small">
              <div class="chart-subtitle">入库水量</div>
              <canvas id="inflowChart" width="150" height="170"></canvas>
            </div>
            <div class="chart-item-small">
              <div class="chart-subtitle">出库水量</div>
              <canvas id="outflowChart" width="150" height="170"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部数据栏 -->
    <div class="bottom-fixed-bar">
      <div class="fixed-bar-left">
        <span class="time-label">数据更新时间：</span>
        <span class="time-value">{{ currentTime }}</span>
      </div>
      <div class="fixed-bar-center">
        <div class="marquee-container">
          <div class="marquee-content" :style="{ transform: 'translateX(' + scrollPosition + '%)' }">
            <span v-for="(item, index) in monitoringData" :key="index" class="data-item">
              {{ item }}
            </span>
            <span v-for="(item, index) in monitoringData" :key="'repeat-' + index" class="data-item">
              {{ item }}
            </span>
          </div>
        </div>
      </div>
      <div class="fixed-bar-right">
      </div>
    </div>
  </div>
</template>

<script>
import DataCard from '../components/DataCard.vue'
import * as echarts from 'echarts'
import rainfallMapImage from '../assets/images/连云港降雨分布图.png'

export default {
  name: 'OverviewView',
  components: {
    DataCard
  },
  data() {
    return {
      currentTime: '',
      updateTimeStr: '',
      rainfallDateRange: '',
      weatherForecastExpanded: true,
      districtRainfallExpanded: true,
      heilinHydrologyExpanded: true,
      xiaotaishanExpanded: true,
      inOutFlowExpanded: true,
      xiaotaishanWarningDiff: -1.5,
      warningDiff: -2.0,
      monitoringData: [
        '黑林站水位 12.5m',
        '小塔山水库库容 2350.8万m³',
        '流域降雨量 15.3mm',
        '水库预计水位涨幅 0.8m',
        '当前流量 45.2m³/s',
        '警戒水位 15.0m'
      ],
      scrollPosition: 0,
      scrollInterval: null,
      rainfallMapImage: rainfallMapImage,
      waterLevel24hChart: null,
      rainfall24hChart: null,
      flowChart: null,
      capacityChart: null,
      heilinWaterLevelChart: null,
      heilinFlowChart: null,
      xiaotaishanCombinedChart: null,
      inflowChart: null,
      outflowChart: null
    }
  },
  mounted() {
    this.updateTime()
    this.startScroll()
    setInterval(this.updateTime, 1000)
    
    // 初始化雨情日期范围
    const now = new Date()
    const month = now.getMonth() + 1
    const day = now.getDate()
    this.rainfallDateRange = `${month}月${day}日至今`
    
    // 延迟初始化图表，确保DOM已经渲染
    setTimeout(() => {
      this.initCharts()
    }, 100)
  },
  beforeUnmount() {
    this.stopScroll()
    this.destroyCharts()
  },
  methods: {
    updateTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const seconds = String(now.getSeconds()).padStart(2, '0')
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      this.updateTimeStr = `${hours}:${minutes}:${seconds}`
    },
    toggleWeatherForecast() {
      this.weatherForecastExpanded = !this.weatherForecastExpanded
    },
    toggleDistrictRainfall() {
      this.districtRainfallExpanded = !this.districtRainfallExpanded
    },
    toggleHeilinHydrology() {
      this.heilinHydrologyExpanded = !this.heilinHydrologyExpanded
      if (this.heilinHydrologyExpanded) {
        setTimeout(() => {
          this.initHeilinWaterLevelChart()
          this.initHeilinFlowChart()
        }, 100)
      }
    },
    toggleXiaotaishan() {
      this.xiaotaishanExpanded = !this.xiaotaishanExpanded
      if (this.xiaotaishanExpanded) {
        setTimeout(() => {
          this.initXiaotaishanCombinedChart()
        }, 100)
      }
    },
    toggleInOutFlow() {
      this.inOutFlowExpanded = !this.inOutFlowExpanded
      if (this.inOutFlowExpanded) {
        setTimeout(() => {
          this.initInflowChart()
          this.initOutflowChart()
        }, 100)
      }
    },
    goToHydrologyForecast() {
      // 跳转到水文四预页面
      this.$emit('selectTab', '水文四预')
    },
    startScroll() {
      this.scrollInterval = setInterval(() => {
        this.scrollPosition -= 0.2
        if (this.scrollPosition < -100) {
          this.scrollPosition = 0
        }
      }, 50)
    },
    stopScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval)
      }
    },
    initCharts() {
      // 初始化黑林水文站水位过程线图
      this.initHeilinWaterLevelChart()
      // 初始化黑林水文站流量过程线图
      this.initHeilinFlowChart()
      // 初始化小塔山水库水位和库容组合图
      this.initXiaotaishanCombinedChart()
      // 初始化入库水量饼图
      this.initInflowChart()
      // 初始化出库水量饼图
      this.initOutflowChart()
      
      // 初始化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)
      }
    },
    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()
      }
      if (this.inflowChart) {
        this.inflowChart.dispose()
      }
      if (this.outflowChart) {
        this.outflowChart.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',
            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: '15%',
            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.heilinWaterLevelChart.setOption(heilinWaterLevelOption)
      }
    },
    initHeilinFlowChart() {
      if (document.getElementById('heilinFlowChart')) {
        if (this.heilinFlowChart) {
          this.heilinFlowChart.dispose()
        }
        this.heilinFlowChart = echarts.init(document.getElementById('heilinFlowChart'))
        const heilinFlowOption = {
          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: 100,
              axisLine: {
                lineStyle: {
                  color: '#7bbef6'
                }
              },
              axisLabel: {
                color: '#7bbef6'
              },
              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.heilinFlowChart.setOption(heilinFlowOption)
      }
    },
    initInflowChart() {
      if (document.getElementById('inflowChart')) {
        if (this.inflowChart) {
          this.inflowChart.dispose()
        }
        this.inflowChart = echarts.init(document.getElementById('inflowChart'))
        const inflowOption = {
          animation: false,
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}万m³ ({d}%)'
          },
          legend: {
            orient: 'horizontal',
            bottom: 8,
            textStyle: {
              color: '#7bbef6',
              fontSize: 9
            },
            itemGap: 8,
            itemWidth: 8,
            itemHeight: 8
          },
          grid: {
            top: 10,
            bottom: 10,
            left: 60,
            right: 10
          },
          series: [
            {
              name: '入库水量',
              type: 'pie',
              radius: ['35%', '60%'],
              center: ['50%', '32%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderColor: 'rgba(0, 30, 60, 0.6)',
                borderWidth: 1.5
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 11,
                  fontWeight: 'bold',
                  color: '#e0fcff',
                  formatter: '{b}\n{c}万m³'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  value: 450,
                  name: '降雨径流入库',
                  itemStyle: {
                    color: '#62f6fb'
                  }
                },
                {
                  value: 380,
                  name: '上游河道来水',
                  itemStyle: {
                    color: '#00d4ff'
                  }
                },
                {
                  value: 180,
                  name: '地下水补给',
                  itemStyle: {
                    color: '#38bdf8'
                  }
                },
                {
                  value: 120,
                  name: '其他调水入库',
                  itemStyle: {
                    color: 'rgba(123, 190, 246, 0.5)'
                  }
                }
              ]
            }
          ]
        }
        this.inflowChart.setOption(inflowOption)
      }
    },
    initOutflowChart() {
      if (document.getElementById('outflowChart')) {
        if (this.outflowChart) {
          this.outflowChart.dispose()
        }
        this.outflowChart = echarts.init(document.getElementById('outflowChart'))
        const outflowOption = {
          animation: false,
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}万m³ ({d}%)'
          },
          legend: {
            orient: 'horizontal',
            bottom: 8,
            textStyle: {
              color: '#7bbef6',
              fontSize: 9
            },
            itemGap: 8,
            itemWidth: 8,
            itemHeight: 8
          },
          grid: {
            top: 10,
            bottom: 10,
            left: 60,
            right: 10
          },
          series: [
            {
              name: '出库水量',
              type: 'pie',
              radius: ['35%', '60%'],
              center: ['50%', '32%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderColor: 'rgba(0, 30, 60, 0.6)',
                borderWidth: 1.5
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 11,
                  fontWeight: 'bold',
                  color: '#e0fcff',
                  formatter: '{b}\n{c}万m³'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {
                  value: 220,
                  name: '工业供水',
                  itemStyle: {
                    color: '#f97316'
                  }
                },
                {
                  value: 300,
                  name: '农业灌溉用水',
                  itemStyle: {
                    color: '#eab308'
                  }
                },
                {
                  value: 120,
                  name: '发电用水',
                  itemStyle: {
                    color: '#84cc16'
                  }
                },
                {
                  value: 80,
                  name: '生态流量下放',
                  itemStyle: {
                    color: '#22c55e'
                  }
                },
                {
                  value: 50,
                  name: '泄洪/排沙',
                  itemStyle: {
                    color: '#ef4444'
                  }
                },
                {
                  value: 30,
                  name: '蒸发渗漏损失',
                  itemStyle: {
                    color: 'rgba(123, 190, 246, 0.3)'
                  }
                }
              ]
            }
          ]
        }
        this.outflowChart.setOption(outflowOption)
      }
    }
  }
}
</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: 20px;
}

/* 核心监测数据卡片样式 */
.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: 50px;
  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: 6px 20px 0;
  cursor: pointer;
}

.card-title {
  font-size: 18px;
  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 {
  padding: 12px;
  min-height: auto;
  font-size: 16px;
  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;
}

/* 底部固定栏样式 */
.bottom-fixed-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: rgba(0, 20, 40, 0.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 10;
}

.fixed-bar-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0;
}

.time-label {
  color: #7bbef6;
  font-size: 12px;
}

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

.fixed-bar-center {
  flex: 1;
  overflow: hidden;
  margin: 0 30px;
}

.marquee-container {
  width: 100%;
  overflow: hidden;
}

.marquee-content {
  display: flex;
  white-space: nowrap;
  gap: 50px;
}

.marquee-content .data-item {
  color: #62f6fb;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  display: inline-block;
}

.fixed-bar-right {
  display: flex;
  align-items: center;
  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-image {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.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;
}

.inout-charts-container {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.chart-item-small {
  flex: 1;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chart-subtitle {
  color: #7bbef6;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 4px;
  text-align: center;
}
</style>