<template>
  <div class="water-energy-trend">
    <!-- 时间选择器 -->
    <div class="time-selector">
      <div class="selector-label">时间段选择</div>
      <div class="time-periods">
        <div
          v-for="(period, index) in timePeriods"
          :key="index"
          :class="['period-item', { active: activePeriod === index }]"
          @click="handlePeriodChange(index)"
        >
          {{ period }}
        </div>
      </div>
      <div class="date-range" v-if="activePeriod === 3">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="handleDateChange"
          class="custom-picker"
        />
      </div>
    </div>

    <!-- 对比控制 -->
    <div class="compare-control">
      <el-checkbox v-model="enableCompare">开启对比模式</el-checkbox>
      <div class="compare-range" v-if="enableCompare">
        <span class="compare-label">对比时间段：</span>
        <el-date-picker
          v-model="compareRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          size="small"
        />
      </div>
      <el-checkbox v-model="showWarningMarkers" style="margin-left: 0.2rem;">显示预警标记</el-checkbox>
    </div>

    <!-- 核心指标卡片 -->
    <div class="indicator-cards">
      <div class="indicator-card">
        <div class="card-icon" style="background: linear-gradient(135deg, #5470C6 0%, #91CAFC 100%);">
          <span>总用电</span>
        </div>
        <div class="card-content">
          <div class="card-value">{{ indicators.totalElectricity }}</div>
          <div class="card-label">总用电量(kWh)</div>
          <div class="card-change" :class="indicators.electricityChange <= 0 ? 'positive' : 'negative'">
            <span v-if="indicators.electricityChange > 0">↑</span>
            <span v-else>↓</span>
            {{ Math.abs(indicators.electricityChange) }}%
          </div>
        </div>
      </div>
      <div class="indicator-card">
        <div class="card-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
          <span>总供水</span>
        </div>
        <div class="card-content">
          <div class="card-value">{{ indicators.totalWaterSupply }}</div>
          <div class="card-label">总供水量(m³)</div>
          <div class="card-change" :class="indicators.waterSupplyChange >= 0 ? 'positive' : 'negative'">
            <span v-if="indicators.waterSupplyChange >= 0">↑</span>
            <span v-else>↓</span>
            {{ Math.abs(indicators.waterSupplyChange) }}%
          </div>
        </div>
      </div>
      <div class="indicator-card">
        <div class="card-icon" style="background: linear-gradient(135deg, #91CC75 0%, #F5A623 100%);">
          <span>节能率</span>
        </div>
        <div class="card-content">
          <div class="card-value">{{ indicators.savingRate }}%</div>
          <div class="card-label">综合节能率</div>
          <div class="card-change" :class="indicators.savingRateChange >= 0 ? 'positive' : 'negative'">
            <span v-if="indicators.savingRateChange >= 0">↑</span>
            <span v-else>↓</span>
            {{ Math.abs(indicators.savingRateChange) }}%
          </div>
        </div>
      </div>
      <div class="indicator-card">
        <div class="card-icon" style="background: linear-gradient(135deg, #FAC858 0%, #F59E0B 100%);">
          <span>吨水能耗</span>
        </div>
        <div class="card-content">
          <div class="card-value">{{ indicators.unitWaterEnergy }}</div>
          <div class="card-label">吨水能耗(kWh/m³)</div>
          <div class="card-change" :class="indicators.unitWaterEnergyChange <= 0 ? 'positive' : 'negative'">
            <span v-if="indicators.unitWaterEnergyChange > 0">↑</span>
            <span v-else>↓</span>
            {{ Math.abs(indicators.unitWaterEnergyChange) }}%
          </div>
        </div>
      </div>
      <div class="indicator-card">
        <div class="card-icon" style="background: linear-gradient(135deg, #73C0DE 0%, #3BA272 100%);">
          <span>节电金额</span>
        </div>
        <div class="card-content">
          <div class="card-value">{{ indicators.savingMoney }}万元</div>
          <div class="card-label">累计节电金额</div>
          <div class="card-change" :class="indicators.savingMoneyChange >= 0 ? 'positive' : 'negative'">
            <span v-if="indicators.savingMoneyChange >= 0">↑</span>
            <span v-else>↓</span>
            {{ Math.abs(indicators.savingMoneyChange) }}%
          </div>
        </div>
      </div>
    </div>

    <!-- 水泵系统总用电量趋势图 -->
    <div class="chart-container">
      <div class="chart-header">
        <div class="chart-title">
          <span class="title-icon" style="background: #15e1fd;"></span>
          <span>水泵系统总用电量趋势</span>
        </div>
        <div class="chart-legend">
          <div class="legend-item">
            <span class="legend-dot" style="background: #15e1fd;"></span>
            <span>当前时段</span>
          </div>
          <div class="legend-item" v-if="enableCompare">
            <span class="legend-dot" style="background: #91CC75;"></span>
            <span>对比时段</span>
          </div>
          <div class="legend-item">
            <span class="legend-dot" style="background: #EE6666;"></span>
            <span>预警时段</span>
          </div>
        </div>
      </div>
      <div class="chart" ref="totalElectricityChartRef"></div>
    </div>

    <!-- 水泵系统总供水量趋势图 -->
    <div class="chart-container">
      <div class="chart-header">
        <div class="chart-title">
          <span class="title-icon" style="background: #4facfe;"></span>
          <span>水泵系统总供水量趋势</span>
        </div>
        <div class="chart-legend">
          <div class="legend-item">
            <span class="legend-dot" style="background: #4facfe;"></span>
            <span>当前时段</span>
          </div>
          <div class="legend-item" v-if="enableCompare">
            <span class="legend-dot" style="background: #5470C6;"></span>
            <span>对比时段</span>
          </div>
        </div>
      </div>
      <div class="chart" ref="totalWaterSupplyChartRef"></div>
    </div>

    <!-- 分区用电量趋势图 -->
    <div class="chart-container">
      <div class="chart-header">
        <div class="chart-title">
          <span class="title-icon" style="background: #FAC858;"></span>
          <span>分区用电量趋势</span>
        </div>
        <div class="chart-legend">
          <div class="legend-item">
            <span class="legend-dot" style="background: #667eea;"></span>
            <span>高区</span>
          </div>
          <div class="legend-item">
            <span class="legend-dot" style="background: #f093fb;"></span>
            <span>中区</span>
          </div>
          <div class="legend-item">
            <span class="legend-dot" style="background: #4facfe;"></span>
            <span>低区</span>
          </div>
          <div class="legend-item">
            <span class="legend-dot" style="background: #fa709a;"></span>
            <span>消防区</span>
          </div>
        </div>
      </div>
      <div class="chart" ref="zoneElectricityChartRef"></div>
    </div>

    <!-- 分区供水量趋势图 -->
    <div class="chart-container">
      <div class="chart-header">
        <div class="chart-title">
          <span class="title-icon" style="background: #91CC75;"></span>
          <span>分区供水量趋势</span>
        </div>
        <div class="chart-legend">
          <div class="legend-item">
            <span class="legend-dot" style="background: #667eea;"></span>
            <span>高区</span>
          </div>
          <div class="legend-item">
            <span class="legend-dot" style="background: #f093fb;"></span>
            <span>中区</span>
          </div>
          <div class="legend-item">
            <span class="legend-dot" style="background: #4facfe;"></span>
            <span>低区</span>
          </div>
          <div class="legend-item">
            <span class="legend-dot" style="background: #fa709a;"></span>
            <span>消防区</span>
          </div>
        </div>
      </div>
      <div class="chart" ref="zoneWaterSupplyChartRef"></div>
    </div>

    <!-- 吨水能耗对比图 -->
    <div class="chart-container">
      <div class="chart-header">
        <div class="chart-title">
          <span class="title-icon" style="background: #5470C6;"></span>
          <span>吨水能耗对比</span>
        </div>
        <div class="chart-controls">
          <el-select v-model="waterEnergyChartType" @change="updateWaterEnergyChart" size="small" class="custom-select" style="width: 1rem;">
            <el-option label="柱状图" value="bar"></el-option>
            <el-option label="折线图" value="line"></el-option>
          </el-select>
        </div>
      </div>
      <div class="chart" ref="waterEnergyChartRef"></div>
    </div>

    <!-- 节能效果对比分析 -->
    <div class="compare-analysis">
      <div class="analysis-header">
        <div class="analysis-title">节能效果对比分析</div>
      </div>
      <div class="analysis-content" v-if="enableCompare">
        <div class="analysis-item">
          <div class="analysis-label">用电量变化</div>
          <div class="analysis-value" :class="compareAnalysis.electricityDiff <= 0 ? 'up' : 'down'">
            {{ compareAnalysis.electricityDiff > 0 ? '+' : '' }}{{ compareAnalysis.electricityDiff }}kWh
          </div>
          <div class="analysis-percentage" :class="compareAnalysis.electricityRate <= 0 ? 'up' : 'down'">
            ({{ compareAnalysis.electricityRate > 0 ? '+' : '' }}{{ compareAnalysis.electricityRate }}%)
          </div>
        </div>
        <div class="analysis-item">
          <div class="analysis-label">供水量变化</div>
          <div class="analysis-value" :class="compareAnalysis.waterSupplyDiff >= 0 ? 'up' : 'down'">
            {{ compareAnalysis.waterSupplyDiff > 0 ? '+' : '' }}{{ compareAnalysis.waterSupplyDiff }}m³
          </div>
          <div class="analysis-percentage" :class="compareAnalysis.waterSupplyRate >= 0 ? 'up' : 'down'">
            ({{ compareAnalysis.waterSupplyRate > 0 ? '+' : '' }}{{ compareAnalysis.waterSupplyRate }}%)
          </div>
        </div>
        <div class="analysis-item">
          <div class="analysis-label">节能率变化</div>
          <div class="analysis-value" :class="compareAnalysis.savingRateDiff >= 0 ? 'up' : 'down'">
            {{ compareAnalysis.savingRateDiff > 0 ? '+' : '' }}{{ compareAnalysis.savingRateDiff }}%
          </div>
          <div class="analysis-percentage" :class="compareAnalysis.savingRateRate >= 0 ? 'up' : 'down'">
            ({{ compareAnalysis.savingRateRate > 0 ? '+' : '' }}{{ compareAnalysis.savingRateRate }}%)
          </div>
        </div>
        <div class="analysis-item">
          <div class="analysis-label">节电金额变化</div>
          <div class="analysis-value" :class="compareAnalysis.moneyDiff >= 0 ? 'up' : 'down'">
            {{ compareAnalysis.moneyDiff > 0 ? '+' : '' }}{{ compareAnalysis.moneyDiff }}万元
          </div>
          <div class="analysis-percentage" :class="compareAnalysis.moneyRate >= 0 ? 'up' : 'down'">
            ({{ compareAnalysis.moneyRate > 0 ? '+' : '' }}{{ compareAnalysis.moneyRate }}%)
          </div>
        </div>
      </div>
      <div class="analysis-hint" v-else>
        <svg class="hint-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
          <path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" fill="currentColor"/>
        </svg>
        <span>开启对比模式后可查看两个时间段的用电量、供水量及节能效果对比分析</span>
      </div>
    </div>

    <!-- 能耗预警与关联分析 -->
    <div class="warning-energy-analysis">
      <div class="section-header">
        <div class="section-title">能耗预警与关联分析</div>
        <div class="section-actions">
          <el-select v-model="warningFilter.level" placeholder="预警级别" clearable size="small" class="custom-select" style="width: 1.2rem;">
            <el-option label="全部" value=""></el-option>
            <el-option label="严重" value="critical"></el-option>
            <el-option label="重要" value="major"></el-option>
            <el-option label="一般" value="minor"></el-option>
          </el-select>
        </div>
      </div>

      <!-- 预警时间轴与能耗影响 -->
      <div class="warning-timeline-chart">
        <div class="timeline-header">
          <div class="header-item">
            <span class="label">预警次数</span>
            <span class="value">{{ warningStats.total }}</span>
          </div>
          <div class="header-item">
            <span class="label">用电损失</span>
            <span class="value warning-impact">{{ warningStats.electricityLoss }}kWh</span>
          </div>
          <div class="header-item">
            <span class="label">节能率下降</span>
            <span class="value warning-impact">{{ warningStats.savingRateDrop }}%</span>
          </div>
          <div class="header-item">
            <span class="label">影响时长</span>
            <span class="value">{{ warningStats.impactDuration }}小时</span>
          </div>
        </div>
        <div class="timeline-chart" ref="warningTimelineChartRef"></div>
      </div>

      <!-- 预警影响详情表格 -->
      <div class="warning-impact-table">
        <div class="table-header">
          <div class="table-title">预警影响详情</div>
        </div>
        <div class="table-container">
          <table class="impact-table">
            <thead>
              <tr>
                <th>预警时间</th>
                <th>预警级别</th>
                <th>预警标题</th>
                <th>区域</th>
                <th>状态</th>
                <th>用电影响</th>
                <th>供水影响</th>
                <th>节能率影响</th>
                <th>影响时长</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="warning in filteredWarnings" :key="warning.id">
                <td>{{ warning.warningTime }}</td>
                <td>
                  <span class="level-badge" :class="warning.level">{{ getWarningLevelText(warning.level) }}</span>
                </td>
                <td class="title-cell">{{ warning.title }}</td>
                <td>{{ warning.zoneName }}</td>
                <td>
                  <span class="status-badge" :class="warning.status">{{ getWarningStatusText(warning.status) }}</span>
                </td>
                <td :class="warning.electricityImpact > 0 ? 'energy-loss' : 'energy-save'">
                  {{ warning.electricityImpact > 0 ? '+' : '' }}{{ warning.electricityImpact }}kWh
                </td>
                <td :class="warning.waterSupplyImpact >= 0 ? 'water-up' : 'water-down'">
                  {{ warning.waterSupplyImpact > 0 ? '+' : '' }}{{ warning.waterSupplyImpact }}m³
                </td>
                <td :class="warning.savingRateImpact < 0 ? 'saving-drop' : 'saving-rise'">
                  {{ warning.savingRateImpact > 0 ? '+' : '' }}{{ warning.savingRateImpact }}%
                </td>
                <td>{{ warning.impactDuration }}h</td>
                <td>
                  <div class="action-buttons">
                    <el-button
                      size="small"
                      type="primary"
                      @click="viewWarningDetail(warning)"
                      class="action-btn"
                    >
                      详情
                    </el-button>
                    <el-button
                      v-if="warning.status === 'pending' || warning.status === 'processing'"
                      size="small"
                      type="success"
                      @click="handleWarningResolve(warning)"
                      class="action-btn"
                    >
                      处理
                    </el-button>
                    <el-dropdown @command="(cmd) => handleWarningCommand(cmd, warning)" class="action-dropdown">
                      <el-button size="small" class="action-btn">
                        更多
                        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" style="margin-left: 0.04rem; width: 0.1rem; height: 0.1rem;">
                          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
                          <path d="M688 464H336c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h352c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16z" fill="currentColor"/>
                        </svg>
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu class="custom-dropdown-menu">
                          <el-dropdown-item command="markResolved" v-if="warning.status !== 'resolved'">标记已处理</el-dropdown-item>
                          <el-dropdown-item command="close" v-if="warning.status !== 'resolved'">关闭预警</el-dropdown-item>
                          <el-dropdown-item command="reopen" v-if="warning.status === 'resolved'">重新打开</el-dropdown-item>
                          <el-dropdown-item command="export" divided>导出报告</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 预警详情弹窗 -->
    <el-dialog
      v-model="warningDetailDialogVisible"
      title="预警与能耗关联详情"
      width="900px"
      class="custom-dialog"
    >
      <div class="warning-detail-content" v-if="selectedWarning">
        <div class="detail-section">
          <div class="section-title">预警信息</div>
          <div class="info-grid">
            <div class="info-item">
              <span class="item-label">预警ID:</span>
              <span class="item-value">{{ selectedWarning.id }}</span>
            </div>
            <div class="info-item">
              <span class="item-label">预警级别:</span>
              <span class="item-value level-badge" :class="selectedWarning.level">{{ getWarningLevelText(selectedWarning.level) }}</span>
            </div>
            <div class="info-item">
              <span class="item-label">区域名称:</span>
              <span class="item-value">{{ selectedWarning.zoneName }}</span>
            </div>
            <div class="info-item">
              <span class="item-label">预警时间:</span>
              <span class="item-value">{{ selectedWarning.warningTime }}</span>
            </div>
            <div class="info-item full-width">
              <span class="item-label">预警描述:</span>
              <span class="item-value">{{ selectedWarning.description }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <div class="section-title">能耗影响分析</div>
          <div class="impact-cards">
            <div class="impact-card">
              <div class="card-label">用电增加</div>
              <div class="card-value energy-impact">{{ selectedWarning.electricityImpact }}kWh</div>
              <div class="card-desc">相比正常运行时段</div>
            </div>
            <div class="impact-card">
              <div class="card-label">供水减少</div>
              <div class="card-value water-impact">{{ selectedWarning.waterSupplyImpact }}m³</div>
              <div class="card-desc">系统供水量减少</div>
            </div>
            <div class="impact-card">
              <div class="card-label">节能率下降</div>
              <div class="card-value saving-impact">{{ selectedWarning.savingRateImpact }}%</div>
              <div class="card-desc">系统节能率降低</div>
            </div>
            <div class="impact-card">
              <div class="card-label">经济损失</div>
              <div class="card-value cost-impact">{{ selectedWarning.costImpact }}元</div>
              <div class="card-desc">电费损失估算</div>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <div class="section-title">能耗与供水趋势对比</div>
          <div class="energy-comparison-chart" ref="energyComparisonChartRef"></div>
        </div>
      </div>
      <template #footer>
        <el-button @click="warningDetailDialogVisible = false" class="custom-btn">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "WaterEnergyConsumptionEfficiencyTrend",
  data() {
    return {
      timePeriods: ["近七日", "近一月", "近三月", "自定义"],
      activePeriod: 0,
      dateRange: [],
      compareRange: [],
      enableCompare: false,
      showWarningMarkers: true,
      indicators: {
        totalElectricity: 285600,
        electricityChange: -8.5,
        totalWaterSupply: 125000,
        waterSupplyChange: 5.2,
        savingRate: 25.8,
        savingRateChange: 6.8,
        unitWaterEnergy: 0.73,
        unitWaterEnergyChange: -12.5,
        savingMoney: 28.6,
        savingMoneyChange: 9.3
      },
      compareAnalysis: {
        electricityDiff: -26500,
        electricityRate: -8.5,
        waterSupplyDiff: 6200,
        waterSupplyRate: 5.2,
        savingRateDiff: 1.8,
        savingRateRate: 7.5,
        moneyDiff: 2.5,
        moneyRate: 9.6
      },
      warningStats: {
        total: 15,
        electricityLoss: 3850,
        savingRateDrop: -4.8,
        impactDuration: 72
      },
      warningFilter: {
        level: ""
      },
      warningList: [],
      waterEnergyChartType: "bar",
      totalElectricityChart: null,
      totalWaterSupplyChart: null,
      zoneElectricityChart: null,
      zoneWaterSupplyChart: null,
      waterEnergyChart: null,
      warningTimelineChart: null,
      energyComparisonChart: null,
      warningDetailDialogVisible: false,
      selectedWarning: null
    };
  },
  computed: {
    filteredWarnings() {
      let warnings = [...this.warningList];
      if (this.warningFilter.level) {
        warnings = warnings.filter(w => w.level === this.warningFilter.level);
      }
      return warnings;
    }
  },
  mounted() {
    this.initTotalElectricityChart();
    this.initTotalWaterSupplyChart();
    this.initZoneElectricityChart();
    this.initZoneWaterSupplyChart();
    this.initWaterEnergyChart();
    this.initWarningTimelineChart();
    this.initWarningList();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    if (this.totalElectricityChart) this.totalElectricityChart.dispose();
    if (this.totalWaterSupplyChart) this.totalWaterSupplyChart.dispose();
    if (this.zoneElectricityChart) this.zoneElectricityChart.dispose();
    if (this.zoneWaterSupplyChart) this.zoneWaterSupplyChart.dispose();
    if (this.waterEnergyChart) this.waterEnergyChart.dispose();
    if (this.warningTimelineChart) this.warningTimelineChart.dispose();
    if (this.energyComparisonChart) this.energyComparisonChart.dispose();
  },
  watch: {
    activePeriod() {
      this.updateAllCharts();
    },
    enableCompare() {
      this.updateAllCharts();
    },
    compareRange() {
      if (this.enableCompare) {
        this.updateAllCharts();
      }
    },
    showWarningMarkers() {
      this.updateAllCharts();
    },
    "warningFilter.level"() {
      this.updateWarningTimelineChart();
    }
  },
  methods: {
    handlePeriodChange(index) {
      this.activePeriod = index;
    },
    handleDateChange(value) {
      this.updateAllCharts();
    },
    initTotalElectricityChart() {
      this.totalElectricityChart = echarts.init(this.$refs.totalElectricityChartRef);
      this.updateTotalElectricityChart();
    },
    updateTotalElectricityChart() {
      const dataMap = {
        0: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          current: [42000, 45000, 43000, 48000, 51000, 46000, 44000],
          compare: [46000, 49000, 47000, 52000, 55000, 50000, 48000],
          warningData: [0, 1, 0, 2, 1, 0, 0]
        },
        1: {
          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
          current: [410000, 450000, 430000, 480000, 510000, 460000, 440000],
          compare: [450000, 490000, 470000, 520000, 550000, 500000, 480000],
          warningData: [3, 5, 2, 8, 6, 4, 3]
        },
        2: {
          xData: ["1月", "2月", "3月"],
          current: [12500000, 13800000, 13200000],
          compare: [13600000, 15000000, 14400000],
          warningData: [45, 62, 38]
        },
        3: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          current: [42000, 45000, 43000, 48000, 51000, 46000, 44000],
          compare: [46000, 49000, 47000, 52000, 55000, 50000, 48000],
          warningData: [0, 1, 0, 2, 1, 0, 0]
        }
      };

      const currentData = dataMap[this.activePeriod];
      const series = [
        {
          name: "当前时段",
          type: "line",
          smooth: true,
          data: currentData.current,
          itemStyle: { color: "#15e1fd" },
          lineStyle: { color: "#15e1fd", width: 3 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(21, 225, 253, 0.5)" },
              { offset: 1, color: "rgba(21, 225, 253, 0)" }
            ])
          }
        }
      ];

      if (this.showWarningMarkers) {
        const warningPoints = currentData.warningData.map((value, index) => {
          if (value > 0) {
            return {
              name: currentData.xData[index],
              value: value,
              xAxis: index,
              yAxis: this.activePeriod === 2 ? 14000000 : 50000,
              itemStyle: { color: "#EE6666" }
            };
          }
          return null;
        }).filter(item => item !== null);
        
        if (warningPoints.length > 0) {
          series[0].markPoint = {
            data: warningPoints,
            symbol: "pin",
            symbolSize: 30,
            label: { show: true, color: "#ffffff", fontSize: 10, formatter: "预警" }
          };
        }
      }

      if (this.enableCompare) {
        series.push({
          name: "对比时段",
          type: "line",
          smooth: true,
          data: currentData.compare,
          itemStyle: { color: "#91CC75" },
          lineStyle: { color: "#91CC75", width: 2, type: "dashed" }
        });
      }

      const option = {
        tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: currentData.xData,
          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
          axisLine: { lineStyle: { color: "#365576" } },
          axisTick: { show: false }
        },
        yAxis: {
          type: "value",
          name: "kWh",
          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
          axisLine: { lineStyle: { color: "#365576" } },
          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
        },
        series: series
      };
      this.totalElectricityChart.setOption(option);
    },
    initTotalWaterSupplyChart() {
      this.totalWaterSupplyChart = echarts.init(this.$refs.totalWaterSupplyChartRef);
      this.updateTotalWaterSupplyChart();
    },
    updateTotalWaterSupplyChart() {
      const dataMap = {
        0: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          current: [18500, 19500, 18800, 21000, 22500, 20000, 19000],
          compare: [17500, 18500, 17800, 20000, 21500, 19000, 18000]
        },
        1: {
          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
          current: [180000, 190000, 183000, 205000, 220000, 195000, 185000],
          compare: [170000, 180000, 173000, 195000, 210000, 185000, 175000]
        },
        2: {
          xData: ["1月", "2月", "3月"],
          current: [5500000, 5800000, 5650000],
          compare: [5200000, 5500000, 5350000]
        },
        3: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          current: [18500, 19500, 18800, 21000, 22500, 20000, 19000],
          compare: [17500, 18500, 17800, 20000, 21500, 19000, 18000]
        }
      };

      const currentData = dataMap[this.activePeriod];
      const series = [
        {
          name: "当前时段",
          type: "line",
          smooth: true,
          data: currentData.current,
          itemStyle: { color: "#4facfe" },
          lineStyle: { color: "#4facfe", width: 3 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(79, 172, 254, 0.5)" },
              { offset: 1, color: "rgba(79, 172, 254, 0)" }
            ])
          }
        }
      ];

      if (this.enableCompare) {
        series.push({
          name: "对比时段",
          type: "line",
          smooth: true,
          data: currentData.compare,
          itemStyle: { color: "#5470C6" },
          lineStyle: { color: "#5470C6", width: 2, type: "dashed" }
        });
      }

      const option = {
        tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: currentData.xData,
          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
          axisLine: { lineStyle: { color: "#365576" } },
          axisTick: { show: false }
        },
        yAxis: {
          type: "value",
          name: "m³",
          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
          axisLine: { lineStyle: { color: "#365576" } },
          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
        },
        series: series
      };
      this.totalWaterSupplyChart.setOption(option);
    },
    initZoneElectricityChart() {
      this.zoneElectricityChart = echarts.init(this.$refs.zoneElectricityChartRef);
      this.updateZoneElectricityChart();
    },
    updateZoneElectricityChart() {
      const dataMap = {
        0: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          highZone: [12500, 13500, 12800, 14500, 15500, 13800, 13000],
          middleZone: [9200, 9800, 9400, 10500, 11200, 10100, 9500],
          lowZone: [18000, 19000, 18500, 20500, 22000, 19500, 18500],
          fireZone: [2300, 2200, 2300, 2500, 2300, 2400, 2500]
        },
        1: {
          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
          highZone: [120000, 135000, 128000, 145000, 155000, 138000, 130000],
          middleZone: [88000, 94000, 90000, 101000, 108000, 97000, 91000],
          middleZone: [172000, 182000, 177000, 197000, 212000, 187000, 177000],
          fireZone: [22000, 21000, 22000, 24000, 22000, 23000, 24000]
        },
        2: {
          xData: ["1月", "2月", "3月"],
          highZone: [3750000, 4200000, 4000000],
          middleZone: [2750000, 2920000, 2820000],
          lowZone: [5380000, 5700000, 5550000],
          fireZone: [680000, 650000, 680000]
        },
        3: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          highZone: [12500, 13500, 12800, 14500, 15500, 13800, 13000],
          middleZone: [9200, 9800, 9400, 10500, 11200, 10100, 9500],
          lowZone: [18000, 19000, 18500, 20500, 22000, 19500, 18500],
          fireZone: [2300, 2200, 2300, 2500, 2300, 2400, 2500]
        }
      };

      const currentData = dataMap[this.activePeriod];

      const option = {
        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
        xAxis: {
          type: "category",
          data: currentData.xData,
          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
          axisLine: { lineStyle: { color: "#365576" } },
          axisTick: { show: false }
        },
        yAxis: {
          type: "value",
          name: "kWh",
          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
          axisLine: { lineStyle: { color: "#365576" } },
          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
        },
        series: [
          {
            name: "高区",
            type: "bar",
            stack: "zone",
            data: currentData.highZone,
            itemStyle: { color: "#667eea" }
          },
          {
            name: "中区",
            type: "bar",
            stack: "zone",
            data: currentData.middleZone,
            itemStyle: { color: "#f093fb" }
          },
          {
            name: "低区",
            type: "bar",
            stack: "zone",
            data: currentData.lowZone,
            itemStyle: { color: "#4facfe" }
          },
          {
            name: "消防区",
            type: "bar",
            stack: "zone",
            data: currentData.fireZone,
            itemStyle: { color: "#fa709a" }
          }
        ]
      };
      this.zoneElectricityChart.setOption(option);
    },
    initZoneWaterSupplyChart() {
      this.zoneWaterSupplyChart = echarts.init(this.$refs.zoneWaterSupplyChartRef);
      this.updateZoneWaterSupplyChart();
    },
    updateZoneWaterSupplyChart() {
      const dataMap = {
        0: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          highZone: [5500, 5800, 5600, 6300, 6800, 6100, 5700],
          middleZone: [4100, 4300, 4200, 4700, 5100, 4600, 4300],
          lowZone: [8000, 8500, 8200, 9200, 9800, 8800, 8200],
          fireZone: [900, 900, 900, 1000, 900, 950, 1000]
        },
        1: {
          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
          highZone: [52000, 56000, 54000, 61000, 66000, 59000, 55000],
          middleZone: [39000, 41000, 40000, 45000, 49000, 44000, 41000],
          lowZone: [76000, 81000, 78000, 88000, 94000, 84000, 78000],
          fireZone: [8500, 8500, 8500, 9500, 8500, 9000, 9500]
        },
        2: {
          xData: ["1月", "2月", "3月"],
          highZone: [1620000, 1820000, 1740000],
          middleZone: [1210000, 1280000, 1230000],
          lowZone: [2360000, 2520000, 2420000],
          fireZone: [265000, 250000, 265000]
        },
        3: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          highZone: [5500, 5800, 5600, 6300, 6800, 6100, 5700],
          middleZone: [4100, 4300, 4200, 4700, 5100, 4600, 4300],
          lowZone: [8000, 8500, 8200, 9200, 9800, 8800, 8200],
          fireZone: [900, 900, 900, 1000, 900, 950, 1000]
        }
      };

      const currentData = dataMap[this.activePeriod];

      const option = {
        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
        xAxis: {
          type: "category",
          data: currentData.xData,
          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
          axisLine: { lineStyle: { color: "#365576" } },
          axisTick: { show: false }
        },
        yAxis: {
          type: "value",
          name: "m³",
          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
          axisLine: { lineStyle: { color: "#365576" } },
          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
        },
        series: [
          {
            name: "高区",
            type: "line",
            smooth: true,
            data: currentData.highZone,
            itemStyle: { color: "#667eea" },
            lineStyle: { color: "#667eea", width: 2 }
          },
          {
            name: "中区",
            type: "line",
            smooth: true,
            data: currentData.middleZone,
            itemStyle: { color: "#f093fb" },
            lineStyle: { color: "#f093fb", width: 2 }
          },
          {
            name: "低区",
            type: "line",
            smooth: true,
            data: currentData.lowZone,
            itemStyle: { color: "#4facfe" },
            lineStyle: { color: "#4facfe", width: 2 }
          },
          {
            name: "消防区",
            type: "line",
            smooth: true,
            data: currentData.fireZone,
            itemStyle: { color: "#fa709a" },
            lineStyle: { color: "#fa709a", width: 2 }
          }
        ]
      };
      this.zoneWaterSupplyChart.setOption(option);
    },
    initWaterEnergyChart() {
      this.waterEnergyChart = echarts.init(this.$refs.waterEnergyChartRef);
      this.updateWaterEnergyChart();
    },
    updateWaterEnergyChart() {
      const dataMap = {
        0: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          current: [0.72, 0.73, 0.71, 0.74, 0.75, 0.72, 0.73],
          compare: [0.78, 0.79, 0.77, 0.80, 0.81, 0.78, 0.79]
        },
        1: {
          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
          current: [0.71, 0.72, 0.70, 0.73, 0.74, 0.71, 0.72],
          compare: [0.76, 0.77, 0.75, 0.78, 0.79, 0.76, 0.77]
        },
        2: {
          xData: ["1月", "2月", "3月"],
          current: [0.73, 0.74, 0.73],
          compare: [0.78, 0.79, 0.78]
        },
        3: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          current: [0.72, 0.73, 0.71, 0.74, 0.75, 0.72, 0.73],
          compare: [0.78, 0.79, 0.77, 0.80, 0.81, 0.78, 0.79]
        }
      };

      const currentData = dataMap[this.activePeriod];

      if (this.waterEnergyChartType === "bar") {
        const series = [
          {
            name: "当前时段",
            type: "bar",
            data: currentData.current,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#5470C6" },
                { offset: 1, color: "#3E5F8A" }
              ])
            }
          }
        ];

        if (this.enableCompare) {
          series.push({
            name: "对比时段",
            type: "bar",
            data: currentData.compare,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#91CC75" },
                { offset: 1, color: "#66BB6A" }
              ])
            }
          });
        }

        const option = {
          tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
          grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
          xAxis: {
            type: "category",
            data: currentData.xData,
            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
            axisLine: { lineStyle: { color: "#365576" } },
            axisTick: { show: false }
          },
          yAxis: {
            type: "value",
            name: "kWh/m³",
            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
            axisLine: { lineStyle: { color: "#365576" } },
            splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
          },
          series: series
        };
        this.waterEnergyChart.setOption(option);
      } else {
        const series = [
          {
            name: "当前时段",
            type: "line",
            smooth: true,
            data: currentData.current,
            itemStyle: { color: "#5470C6" },
            lineStyle: { color: "#5470C6", width: 3 }
          }
        ];

        if (this.enableCompare) {
          series.push({
            name: "对比时段",
            type: "line",
            smooth: true,
            data: currentData.compare,
            itemStyle: { color: "#91CC75" },
            lineStyle: { color: "#91CC75", width: 2, type: "dashed" }
          });
        }

        const option = {
          tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
          grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: currentData.xData,
            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
            axisLine: { lineStyle: { color: "#365576" } },
            axisTick: { show: false }
          },
          yAxis: {
            type: "value",
            name: "kWh/m³",
            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
            axisLine: { lineStyle: { color: "#365576" } },
            splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
          },
          series: series
        };
        this.waterEnergyChart.setOption(option);
      }
    },
    updateAllCharts() {
      this.updateTotalElectricityChart();
      this.updateTotalWaterSupplyChart();
      this.updateZoneElectricityChart();
      this.updateZoneWaterSupplyChart();
      this.updateWaterEnergyChart();
      this.updateWarningTimelineChart();
    },
    handleResize() {
      if (this.totalElectricityChart) this.totalElectricityChart.resize();
      if (this.totalWaterSupplyChart) this.totalWaterSupplyChart.resize();
      if (this.zoneElectricityChart) this.zoneElectricityChart.resize();
      if (this.zoneWaterSupplyChart) this.zoneWaterSupplyChart.resize();
      if (this.waterEnergyChart) this.waterEnergyChart.resize();
      if (this.warningTimelineChart) this.warningTimelineChart.resize();
      if (this.energyComparisonChart) this.energyComparisonChart.resize();
    },
    initWarningList() {
      this.warningList = [
        {
          id: "WRN202403050001",
          level: "critical",
          title: "高区水泵能耗超标",
          description: "高区水泵系统能耗超出阈值28.56%",
          zoneName: "高区供水",
          warningTime: "2024-03-05 10:30:25",
          status: "pending",
          electricityImpact: 520,
          waterSupplyImpact: -85,
          savingRateImpact: -9.2,
          impactDuration: 8,
          costImpact: 624,
          energyData: { before: [12500, 12200, 12400, 12300], after: [13200, 12900, 13100, 13000] }
        },
        {
          id: "WRN202403050002",
          level: "critical",
          title: "中区水泵异常",
          description: "中区水泵系统能耗超出阈值35.68%",
          zoneName: "中区供水",
          warningTime: "2024-03-05 09:15:42",
          status: "processing",
          electricityImpact: 680,
          waterSupplyImpact: -120,
          savingRateImpact: -11.5,
          impactDuration: 6,
          costImpact: 816,
          energyData: { before: [9200, 9100, 9300, 9200], after: [9950, 9850, 10050, 9950] }
        },
        {
          id: "WRN202403050003",
          level: "major",
          title: "低区水泵运行异常",
          description: "低区水泵系统能耗超出阈值15.25%",
          zoneName: "低区供水",
          warningTime: "2024-03-05 08:45:18",
          status: "pending",
          electricityImpact: 380,
          waterSupplyImpact: -65,
          savingRateImpact: -7.8,
          impactDuration: 5,
          costImpact: 456,
          energyData: { before: [18000, 17800, 17900, 17800], after: [18550, 18350, 18450, 18350] }
        },
        {
          id: "WRN202403040004",
          level: "major",
          title: "消防区泵能耗异常",
          description: "消防区水泵能耗超出时长超标12.35%",
          zoneName: "消防供水",
          warningTime: "2024-03-04 16:22:33",
          status: "resolved",
          electricityImpact: 220,
          waterSupplyImpact: 0,
          savingRateImpact: -5.5,
          impactDuration: 4,
          costImpact: 264,
          energyData: { before: [2300, 2250, 2280, 2270], after: [2480, 2430, 2460, 2450] }
        },
        {
          id: "WRN202403040005",
          level: "minor",
          title: "系统吨水能耗轻微超标",
          description: "系统吨水能耗超出阈值6.80%",
          zoneName: "全系统",
          warningTime: "2024-03-04 14:10:22",
          status: "resolved",
          electricityImpact: 180,
          waterSupplyImpact: -25,
          savingRateImpact: -4.2,
          impactDuration: 3,
          costImpact: 216,
          energyData: { before: [42000, 41500, 41800, 41700], after: [42300, 41800, 42100, 42000] }
        }
      ];
    },
    getWarningLevelText(level) {
      const map = { critical: "严重", major: "重要", minor: "一般" };
      return map[level] || level;
    },
    getWarningStatusText(status) {
      const map = { pending: "待处理", processing: "处理中", resolved: "已处理" };
      return map[status] || status;
    },
    initWarningTimelineChart() {
      this.warningTimelineChart = echarts.init(this.$refs.warningTimelineChartRef);
      this.updateWarningTimelineChart();
    },
    updateWarningTimelineChart() {
      const dataMap = {
        0: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          electricityData: [42000, 45000, 43000, 48000, 51000, 46000, 44000],
          waterSupplyData: [18500, 19500, 18800, 21000, 22500, 20000, 19000],
          savingRateData: [25.5, 26.2, 25.8, 24.5, 23.8, 25.0, 25.3],
          warningData: [0, 1, 0, 2, 1, 0, 0]
        },
        1: {
          xData: ["1日", "5日", "10日", "15日", "20日", "25日", "30日"],
          electricityData: [410000, 450000, 430000, 480000, 510000, 460000, 440000],
          waterSupplyData: [180000, 190000, 183000, 205000, 220000, 195000, 185000],
          savingRateData: [25.0, 26.0, 25.5, 24.8, 24.0, 25.2, 25.5],
          warningData: [3, 5, 2, 8, 6, 4, 3]
        },
        2: {
          xData: ["1月", "2月", "3月"],
          electricityData: [12500000, 13800000, 13200000],
          waterSupplyData: [5500000, 5800000, 5650000],
          savingRateData: [24.5, 26.0, 25.5],
          warningData: [45, 62, 38]
        },
        3: {
          xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          electricityData: [42000, 45000, 43000, 48000, 51000, 46000, 44000],
          waterSupplyData: [18500, 19500, 18800, 21000, 22500, 20000, 19000],
          savingRateData: [25.5, 26.2, 25.8, 24.5, 23.8, 25.0, 25.3],
          warningData: [0, 1, 0, 2, 1, 0, 0]
        }
      };

      const currentData = dataMap[this.activePeriod];

      const option = {
        tooltip: { trigger: "axis", axisPointer: { type: "cross" } },
        legend: {
          data: ["用电量", "供水量", "节能率", "预警次数"],
          textStyle: { color: "rgba(255, 255, 255, 0.8)" },
          top: 0
        },
        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, top: "15%" },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: currentData.xData,
          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
          axisLine: { lineStyle: { color: "#365576" } },
          axisTick: { show: false }
        },
        yAxis: [
          {
            type: "value",
            name: "用电量(kWh)",
            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
            axisLine: { lineStyle: { color: "#365576" } },
            splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
          },
          {
            type: "value",
            name: "供水量(m³)",
            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
            axisLine: { lineStyle: { color: "#365576" } },
            splitLine: { show: false }
          },
          {
            type: "value",
            name: "节能率/预警数",
            nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
            axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
            axisLine: { lineStyle: { color: "#365576" } },
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: "用电量",
            type: "line",
            smooth: true,
            data: currentData.electricityData,
            itemStyle: { color: "#15e1fd" },
            lineStyle: { color: "#15e1fd", width: 3 }
          },
          {
            name: "供水量",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data: currentData.waterSupplyData,
            itemStyle: { color: "#4facfe" },
            lineStyle: { color: "#4facfe", width: 2 }
          },
          {
            name: "节能率",
            type: "line",
            smooth: true,
            yAxisIndex: 2,
            data: currentData.savingRateData,
            itemStyle: { color: "#91CC75" },
            lineStyle: { color: "#91CC75", width: 2 }
          },
          {
            name: "预警次数",
            type: "bar",
            yAxisIndex: 2,
            data: currentData.warningData,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(238, 102, 102, 0.8)" },
                { offset: 1, color: "rgba(238, 102, 102, 0.3)" }
              ])
            }
          }
        ]
      };
      this.warningTimelineChart.setOption(option);
    },
    viewWarningDetail(warning) {
      this.selectedWarning = warning;
      this.warningDetailDialogVisible = true;
      this.$nextTick(() => {
        this.initEnergyComparisonChart();
      });
    },
    handleWarningResolve(warning) {
      warning.status = "processing";
      this.$message.success("预警已开始处理");
    },
    handleWarningCommand(command, warning) {
      if (command === "markResolved") {
        warning.status = "resolved";
        this.$message.success("已标记为已处理");
      } else if (command === "close") {
        warning.status = "resolved";
        this.$message.success("预警已关闭");
      } else if (command === "reopen") {
        warning.status = "pending";
        this.$message.success("预警已重新打开");
      } else if (command === "export") {
        this.$message.success("预警报告导出成功");
      }
    },
    initEnergyComparisonChart() {
      if (!this.$refs.energyComparisonChartRef || !this.selectedWarning) return;
      this.energyComparisonChart = echarts.init(this.$refs.energyComparisonChartRef);
      const { energyData } = this.selectedWarning;

      const option = {
        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        legend: {
          data: ["预警前", "预警后"],
          textStyle: { color: "rgba(255, 255, 255, 0.8)" },
          top: 0
        },
        grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, top: "10%" },
        xAxis: {
          type: "category",
          data: ["时段1", "时段2", "时段3", "时段4", "时段5"],
          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
          axisLine: { lineStyle: { color: "#365576" } },
          axisTick: { show: false }
        },
        yAxis: {
          type: "value",
          name: "kWh",
          nameTextStyle: { color: "rgba(255, 255, 255, 0.8)" },
          axisLabel: { color: "rgba(255, 255, 255, 0.8)" },
          axisLine: { lineStyle: { color: "#365576" } },
          splitLine: { lineStyle: { color: "#1a3d62", type: "dashed" } }
        },
        series: [
          {
            name: "预警前",
            type: "bar",
            data: energyData.before,
            itemStyle: { color: "#91CC75" }
          },
          {
            name: "预警后",
            type: "bar",
            data: energyData.after,
            itemStyle: { color: "#EE6666" }
          }
        ]
      };
      this.energyComparisonChart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>
.water-energy-trend {
  padding: 0.16rem;
}

.time-selector {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.08rem;
  margin-bottom: 0.16rem;

  .selector-label {
    font-size: 0.14rem;
    color: #ffffff;
    font-weight: bold;
  }

  .time-periods {
    display: flex;
    gap: 0.08rem;

    .period-item {
      padding: 0.06rem 0.15rem;
      font-size: 0.13rem;
      color: #ffffff;
      opacity: 0.6;
      cursor: pointer;
      border-radius: 0.04rem;
      transition: all 0.3s ease;
      border: 1px solid transparent;

      &:hover {
        opacity: 0.9;
        background: rgba(255, 255, 255, 0.1);
      }

      &.active {
        opacity: 1;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: transparent;
      }
    }
  }

  .date-range {
    ::v-deep .custom-picker {
      .el-input__wrapper {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);

        .el-input__inner {
          color: #ffffff;
        }
      }
    }
  }
}

.compare-control {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.15rem 0.2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.08rem;
  margin-bottom: 0.16rem;

  .compare-range {
    display: flex;
    align-items: center;
    gap: 0.1rem;

    .compare-label {
      font-size: 0.13rem;
      color: #ffffff;
      opacity: 0.7;
    }

    ::v-deep .el-date-picker {
      .el-input__wrapper {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);

        .el-input__inner {
          color: #ffffff;
        }
      }
    }
  }

  ::v-deep .el-checkbox {
    .el-checkbox__label {
      color: #ffffff;
    }
  }
}

.indicator-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr));
  gap: 0.15rem;
  margin-bottom: 0.16rem;

  .indicator-card {
    display: flex;
    align-items: center;
    padding: 0.2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.08rem;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-0.02rem);
      box-shadow: 0 0.08rem 0.16rem rgba(0, 0, 0, 0.3);
    }

    .card-icon {
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 0.06rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0.15rem;
      color: #ffffff;
      font-size: 0.18rem;
      font-weight: bold;
    }

    .card-content {
      flex: 1;

      .card-value {
        font-size: 0.24rem;
        color: #15e1fd;
        font-weight: bold;
        margin-bottom: 0.05rem;
      }

      .card-label {
        font-size: 0.12rem;
        color: #ffffff;
        opacity: 0.7;
        margin-bottom: 0.05rem;
      }

      .card-change {
        font-size: 0.12rem;
        font-weight: 500;

        &.positive {
          color: #91CC75;
        }

        &.negative {
          color: #EE6666;
        }
      }
    }
  }
}

.chart-container {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.08rem;
  padding: 0.2rem;
  margin-bottom: 0.16rem;

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;

    .chart-title {
      font-size: 0.15rem;
      color: #ffffff;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 0.08rem;

      .title-icon {
        width: 0.04rem;
        height: 0.16rem;
        border-radius: 0.02rem;
      }
    }

    .chart-legend {
      display: flex;
      gap: 0.15rem;

      .legend-item {
        display: flex;
        align-items: center;
        gap: 0.05rem;
        font-size: 0.13rem;
        color: #ffffff;
        opacity: 0.7;

        .legend-dot {
          width: 0.1rem;
          height: 0.1rem;
          border-radius: 50%;
        }
      }
    }

    .chart-controls {
      ::v-deep .custom-select {
        .el-input__wrapper {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);

          .el-input__inner {
            color: #ffffff;
          }
        }
      }
    }
  }

  .chart {
    width: 100%;
    height: 3.5rem;
  }
}

.compare-analysis {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.08rem;
  padding: 0.2rem;
  margin-bottom: 0.16rem;

  .analysis-header {
    margin-bottom: 0.2rem;

    .analysis-title {
      font-size: 0.15rem;
      color: #ffffff;
      font-weight: bold;
      padding-left: 0.12rem;
      border-left: 0.04rem solid #15e1fd;
    }
  }

  .analysis-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
    gap: 0.15rem;

    .analysis-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0.15rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 0.06rem;

      .analysis-label {
        font-size: 0.13rem;
        color: #ffffff;
        opacity: 0.7;
        margin-bottom: 0.08rem;
      }

      .analysis-value {
        font-size: 0.18rem;
        font-weight: bold;
        margin-bottom: 0.05rem;

        &.up {
          color: #91CC75;
        }

        &.down {
          color: #EE6666;
        }
      }

      .analysis-percentage {
        font-size: 0.12rem;

        &.up {
          color: #91CC75;
        }

        &.down {
          color: #EE6666;
        }
      }
    }
  }

  .analysis-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    color: #ffffff;
    opacity: 0.6;

    .hint-icon {
      margin-right: 0.1rem;
      font-size: 0.18rem;
      width: 0.18rem;
      height: 0.18rem;
      fill: currentColor;
    }
  }
}

.warning-energy-analysis {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0.08rem;
  padding: 0.2rem;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;

    .section-title {
      font-size: 0.15rem;
      color: #ffffff;
      font-weight: bold;
      padding-left: 0.12rem;
      border-left: 0.04rem solid #15e1fd;
    }

    .section-actions {
      ::v-deep .custom-select {
        .el-input__wrapper {
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);

          .el-input__inner {
            color: #ffffff;
          }
        }
      }
    }
  }

  .warning-timeline-chart {
    .timeline-header {
      display: flex;
      gap: 0.3rem;
      padding: 0.15rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 0.06rem;
      margin-bottom: 0.2rem;

      .header-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;

        .label {
          font-size: 0.12rem;
          color: #ffffff;
          opacity: 0.7;
          margin-bottom: 0.05rem;
        }

        .value {
          font-size: 0.18rem;
          font-weight: bold;
          color: #15e1fd;

          &.warning-impact {
            color: #EE6666;
          }
        }
      }
    }

    .timeline-chart {
      height: 3.5rem;
    }
  }

  .warning-impact-table {
    margin-top: 0.2rem;

    .table-header {
      margin-bottom: 0.15rem;

      .table-title {
        font-size: 0.14rem;
        color: #ffffff;
        font-weight: bold;
      }
    }

    .table-container {
      overflow-x: auto;
      border-radius: 0.04rem;
      background: rgba(255, 255, 255, 0.02);

      .impact-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 14rem;

        thead {
          position: sticky;
          top: 0;
          z-index: 10;

          tr {
            background: linear-gradient(135deg, rgba(21, 225, 253, 0.1) 0%, rgba(145, 204, 117, 0.1) 100%);

            th {
              padding: 0.12rem 0.1rem;
              text-align: left;
              font-size: 0.13rem;
              color: #15e1fd;
              font-weight: 600;
              border-bottom: 2px solid rgba(21, 225, 253, 0.3);
              white-space: nowrap;

              &:first-child {
                padding-left: 0.15rem;
                border-top-left-radius: 0.04rem;
              }

              &:last-child {
                padding-right: 0.15rem;
                border-top-right-radius: 0.04rem;
              }
            }
          }
        }

        tbody {
          tr {
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.02);

            &:nth-child(even) {
              background: rgba(255, 255, 255, 0.04);
            }

            &:hover {
              background: rgba(21, 225, 253, 0.1);
              transform: translateX(0.02rem);
            }

            td {
              padding: 0.12rem 0.1rem;
              font-size: 0.12rem;
              color: #ffffff;
              border-bottom: 1px solid rgba(255, 255, 255, 0.08);
              vertical-align: middle;

              &:first-child {
                padding-left: 0.15rem;
              }

              &:last-child {
                padding-right: 0.15rem;
              }

              &.energy-loss {
                color: #EE6666;
              }

              &.energy-save {
                color: #91CC75;
              }

              &.water-up {
                color: #4facfe;
              }

              &.water-down {
                color: #EE6666;
              }

              &.saving-drop {
                color: #EE6666;
              }

              &.saving-rise {
                color: #91CC75;
              }

              .title-cell {
                max-width: 2rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;

                &:hover {
                  color: #15e1fd;
                }
              }

              .level-badge {
                display: inline-block;
                padding: 0.03rem 0.1rem;
                border-radius: 0.03rem;
                font-size: 0.11rem;
                font-weight: 500;

                &.critical {
                  background: rgba(238, 102, 102, 0.2);
                  color: #EE6666;
                  border: 1px solid rgba(238, 102, 102, 0.4);
                  box-shadow: 0 0.04rem 0.08rem rgba(238, 102, 102, 0.2);
                }

                &.major {
                  background: rgba(250, 200, 88, 0.2);
                  color: #FAC858;
                  border: 1px solid rgba(250, 200, 88, 0.4);
                  box-shadow: 0 0.04rem 0.08rem rgba(250, 200, 88, 0.2);
                }

                &.minor {
                  background: rgba(145, 204, 117, 0.2);
                  color: #91CC75;
                  border: 1px solid rgba(145, 204, 117, 0.4);
                  box-shadow: 0 0.04rem 0.08rem rgba(145, 204, 117, 0.2);
                }
              }

              .status-badge {
                display: inline-block;
                padding: 0.03rem 0.1rem;
                border-radius: 0.03rem;
                font-size: 0.11rem;
                font-weight: 500;

                &.pending {
                  background: rgba(238, 102, 102, 0.2);
                  color: #EE6666;
                  border: 1px solid rgba(238, 102, 102, 0.4);
                }

                &.processing {
                  background: rgba(250, 200, 88, 0.2);
                  color: #FAC858;
                  border: 1px solid rgba(250, 200, 88, 0.4);
                }

                &.resolved {
                  background: rgba(145, 204, 117, 0.2);
                  color: #91CC75;
                  border: 1px solid rgba(145, 204, 117, 0.4);
                }
              }

              .action-buttons {
                display: flex;
                gap: 0.06rem;

                .action-btn {
                  font-size: 0.11rem;
                  padding: 0.04rem 0.1rem;
                }

                .action-dropdown {
                  ::v-deep .el-dropdown-menu.custom-dropdown-menu {
                    background: rgba(30, 30, 50, 0.95);
                    border: 1px solid rgba(21, 225, 253, 0.3);

                    .el-dropdown-menu__item {
                      color: #ffffff;

                      &:hover {
                        background: rgba(21, 225, 253, 0.1);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

::v-deep .custom-dialog {
  .el-dialog {
    background: rgba(30, 30, 50, 0.95);
    border: 1px solid rgba(21, 225, 253, 0.3);
  }

  .el-dialog__header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .el-dialog__title {
    color: #ffffff;
  }

  .el-dialog__body {
    color: #ffffff;
  }

  .custom-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #ffffff;
  }
}

.warning-detail-content {
  .detail-section {
    margin-bottom: 0.3rem;

    .section-title {
      font-size: 0.14rem;
      color: #ffffff;
      font-weight: bold;
      padding-left: 0.1rem;
      border-left: 0.03rem solid #15e1fd;
      margin-bottom: 0.15rem;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.15rem;

      .info-item {
        display: flex;
        align-items: center;
        padding: 0.1rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 0.04rem;

        &.full-width {
          grid-column: span 2;
        }

        .item-label {
          font-size: 0.12rem;
          color: #ffffff;
          opacity: 0.7;
          margin-right: 0.1rem;
          min-width: 0.8rem;
        }

        .item-value {
          font-size: 0.13rem;
          color: #ffffff;
          flex: 1;

          &.level-badge {
            display: inline-block;
            padding: 0.03rem 0.1rem;
            border-radius: 0.03rem;
            font-size: 0.11rem;
            font-weight: 500;

            &.critical {
              background: rgba(238, 102, 102, 0.2);
              color: #EE6666;
            }

            &.major {
              background: rgba(250, 200, 88, 0.2);
              color: #FAC858;
            }

            &.minor {
              background: rgba(145, 204, 117, 0.2);
              color: #91CC75;
            }
          }
        }
      }
    }

    .impact-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.15rem;

      .impact-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.2rem;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 0.06rem;

        .card-label {
          font-size: 0.12rem;
          color: #ffffff;
          opacity: 0.7;
          margin-bottom: 0.1rem;
        }

        .card-value {
          font-size: 0.2rem;
          font-weight: bold;
          margin-bottom: 0.05rem;

          &.energy-impact {
            color: #EE6666;
          }

          &.water-impact {
            color: #4facfe;
          }

          &.saving-impact {
            color: #EE6666;
          }

          &.cost-impact {
            color: #FAC858;
          }
        }

        .card-desc {
          font-size: 0.11rem;
          color: #ffffff;
          opacity: 0.6;
        }
      }
    }
  }

  .energy-comparison-chart {
    height: 3rem;
  }
}

@media (max-width: 1485px) {
  .indicator-cards {
    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
  }

  .analysis-content {
    grid-template-columns: repeat(2, 1fr);
  }

  .impact-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .indicator-cards {
    grid-template-columns: 1fr;
  }

  .analysis-content {
    grid-template-columns: 1fr;
  }

  .impact-cards {
    grid-template-columns: 1fr;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>
