<template>
  <div class="energy-dashboard">
    <!-- 条件筛选区 -->
    <el-card class="filter-section" style="margin-bottom: 20px;">
      <div slot="header">
        <span>电能耗同比环比分析</span>
      </div>
      <el-form :model="filterForm" :inline="true" size="small">
        <el-form-item label="区域">
          <el-select v-model="filterForm.area" placeholder="请选择区域" style="width: 120px;">
            <el-option label="全部区域" value=""></el-option>
            <el-option label="一车间" value="area1"></el-option>
            <el-option label="二车间" value="area2"></el-option>
            <el-option label="三车间" value="area3"></el-option>
            <el-option label="四车间" value="area4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="filterForm.department" placeholder="请选择部门" style="width: 120px;">
            <el-option label="全部部门" value=""></el-option>
            <el-option label="生产部" value="prod"></el-option>
            <el-option label="设备部" value="equip"></el-option>
            <el-option label="能源部" value="energy"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回路">
          <el-select v-model="filterForm.circuit" placeholder="请选择回路" style="width: 120px;">
            <el-option label="全部回路" value=""></el-option>
            <el-option label="主回路" value="main"></el-option>
            <el-option label="照明回路" value="light"></el-option>
            <el-option label="动力回路" value="power"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管网">
          <el-select v-model="filterForm.pipeline" placeholder="请选择管网" style="width: 120px;">
            <el-option label="全部管网" value=""></el-option>
            <el-option label="高压管网" value="high"></el-option>
            <el-option label="中压管网" value="medium"></el-option>
            <el-option label="低压管网" value="low"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="能源类型">
          <el-select v-model="filterForm.energyType" placeholder="请选择能源类型" style="width: 120px;">
            <el-option label="电力" value="electricity"></el-option>
            <el-option label="水" value="water"></el-option>
            <el-option label="蒸汽" value="steam"></el-option>
            <el-option label="压缩空气" value="air"></el-option>
            <el-option label="氮气" value="nitrogen"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间维度">
          <el-select v-model="filterForm.timeDimension" placeholder="请选择时间维度" style="width: 120px;">
            <el-option label="时" value="hour"></el-option>
            <el-option label="日" value="day"></el-option>
            <el-option label="月" value="month"></el-option>
            <el-option label="年" value="year"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="filterForm.timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 300px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="对比类型">
          <el-select v-model="filterForm.compareType" placeholder="请选择对比类型" style="width: 120px;">
            <el-option label="同比" value="yoy"></el-option>
            <el-option label="环比" value="mom"></el-option>
            <el-option label="自定义对比" value="custom"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据可视化展示区 -->
    <el-row :gutter="20" class="visualization-section">
      <!-- 趋势对比图 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>趋势对比图</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="saveChart('trendChart')">
              保存图片
            </el-button>
          </div>
          <div ref="trendChart" style="height: 300px; width: 100%"></div>
        </el-card>
      </el-col>
      <!-- 能耗总量对比 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>能耗总量对比</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="saveChart('totalChart')">
              保存图片
            </el-button>
          </div>
          <div ref="totalChart" style="height: 300px; width: 100%"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="visualization-section" style="margin-top: 20px;">
      <!-- 能耗占比对比 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>能耗占比对比</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="saveChart('proportionChart')">
              保存图片
            </el-button>
          </div>
          <div ref="proportionChart" style="height: 300px; width: 100%"></div>
        </el-card>
      </el-col>
      <!-- 变化率趋势 -->
      <el-col :span="12">
        <el-card>
          <div slot="header">
            <span>变化率趋势</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="saveChart('rateChart')">
              保存图片
            </el-button>
          </div>
          <div ref="rateChart" style="height: 300px; width: 100%"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据分析区 -->
    <el-row :gutter="20" class="analysis-section" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>关键指标分析</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" v-for="(metric, index) in keyMetrics" :key="index">
              <div class="metric-card">
                <div class="metric-title">{{ metric.title }}</div>
                <div class="metric-value" :class="metric.trend">
                  {{ metric.value }}
                  <i :class="metric.trend === 'up' ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
                </div>
                <div class="metric-desc">{{ metric.description }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据表格区 -->
    <el-row :gutter="20" class="table-section" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <div slot="header">
            <span>详细数据列表</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="exportTable">
              导出Excel
            </el-button>
          </div>
          <el-table :data="tableData" border size="small" style="width: 100%">
            <el-table-column prop="time" label="时间点" width="180"></el-table-column>
            <el-table-column prop="currentValue" label="本期值" width="120"></el-table-column>
            <el-table-column prop="compareValue" label="对比期值" width="120"></el-table-column>
            <el-table-column prop="changeAmount" label="变化量" width="120">
              <template slot-scope="scope">
                <span :class="scope.row.changeAmount >= 0 ? 'text-danger' : 'text-success'">
                  {{ scope.row.changeAmount >= 0 ? '+' : '' }}{{ scope.row.changeAmount }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="changeRate" label="变化率" width="120">
              <template slot-scope="scope">
                <span :class="scope.row.changeRate >= 0 ? 'text-danger' : 'text-success'">
                  {{ scope.row.changeRate >= 0 ? '+' : '' }}{{ scope.row.changeRate }}%
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === 'normal' ? 'success' : 'danger'" size="mini">
                  {{ scope.row.status === 'normal' ? '正常' : '异常' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            style="margin-top: 20px; text-align: right;">
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>

    <!-- 原有的总览模块 -->
    <el-row :gutter="20" class="dashboard-overview" style="margin-top: 24px;">
      <el-col :span="8">
        <el-card>
          <div slot="header">五种能源整体占比</div>
          <div ref="overviewPie" style="height:260px;width:100%"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header">累计消耗柱状对比</div>
          <div ref="overviewBar" style="height:260px;width:100%"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header">峰值需量仪表</div>
          <div ref="overviewGauge" style="height:260px;width:100%"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 原有的能源对比与效率分析 -->
    <el-row :gutter="20" class="dashboard-compare" style="margin-top: 24px;">
      <el-col :span="8">
        <el-card>
          <div slot="header">五种能源消耗堆叠柱状图</div>
          <div ref="compareStackBar" style="height:220px;width:100%"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header">单位产出消耗强度（雷达图）</div>
          <div ref="compareRadar" style="height:220px;width:100%"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header">气体类比（压缩空气 vs 氮气）</div>
          <div ref="compareGas" style="height:220px;width:100%"></div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  name: "FactoryEnergyDashboard",
  data() {
    return {
      // 筛选表单
      filterForm: {
        area: '',
        department: '',
        circuit: '',
        pipeline: '',
        energyType: 'electricity',
        timeDimension: 'day',
        timeRange: [],
        compareType: 'yoy'
      },
      // 关键指标
      keyMetrics: [
        { title: '同比增长率', value: '+12.5%', trend: 'up', description: '相比去年同期增长' },
        { title: '环比增长率', value: '-3.2%', trend: 'down', description: '相比上期下降' },
        { title: '平均能耗', value: '856.7 kWh', trend: 'up', description: '本期平均能耗' },
        { title: '峰值能耗', value: '1245.3 kWh', trend: 'up', description: '本期峰值能耗' }
      ],
      // 分页
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      },
      // 表格数据
      tableData: [],
      // 图表实例
      charts: {},
      // 总览模块模拟数据
      overviewPieData: [
        { value: 800, name: '电' },
        { value: 500, name: '水' },
        { value: 300, name: '蒸汽' },
        { value: 200, name: '压缩空气' },
        { value: 100, name: '氮气' }
      ],
      overviewBarData: [120, 800, 3200],
      overviewBarLabels: ['本日', '本周', '本月'],
      overviewGaugeData: [
        { value: 320, name: '电力峰值(kW)' },
        { value: 120, name: '蒸汽流量峰值(t/h)' }
      ],
      // 对比与效率分析模拟数据
      compareStackBarLabels: ['本日','本周','本月'],
      compareStackBarData: {
        water: [12, 80, 320],
        electricity: [22, 182, 391],
        steam: [15, 132, 201],
        air: [9, 77, 101],
        nitrogen: [6, 72, 91]
      },
      compareRadarIndicators: [
        { name: '水', max: 100 },
        { name: '电', max: 100 },
        { name: '蒸汽', max: 100 },
        { name: '压缩空气', max: 100 },
        { name: '氮气', max: 100 }
      ],
      compareRadarData: [60, 80, 70, 50, 40],
      compareGasLabels: ['压力稳定性','泄漏率','单位产出成本'],
      compareGasData: {
        air: [90, 8, 0.5],
        nitrogen: [85, 5, 0.7]
      }
    };
  },
  mounted() {
    this.initFilterForm();
    this.initAnalysisCharts();
    this.initOverviewCharts();
    this.initCompareCharts();
    this.loadTableData();
  },
  methods: {
    // 初始化筛选表单
    initFilterForm() {
      const now = new Date();
      const startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
      this.filterForm.timeRange = [
        startDate.toISOString().slice(0, 19).replace('T', ' '),
        now.toISOString().slice(0, 19).replace('T', ' ')
      ];
    },
    // 查询数据
    handleSearch() {
      this.loadTableData();
      this.updateCharts();
    },
    // 重置筛选条件
    handleReset() {
      this.filterForm = {
        area: '',
        department: '',
        circuit: '',
        pipeline: '',
        energyType: 'electricity',
        timeDimension: 'day',
        timeRange: this.filterForm.timeRange,
        compareType: 'yoy'
      };
    },
    // 导出数据
    handleExport() {
      this.$message.success('导出功能开发中...');
    },
    // 保存图表
    saveChart(chartName) {
      if (this.charts[chartName]) {
        const url = this.charts[chartName].getDataURL();
        const link = document.createElement('a');
        link.download = `${chartName}_${new Date().getTime()}.png`;
        link.href = url;
        link.click();
      }
    },
    // 导出表格
    exportTable() {
      this.$message.success('表格导出功能开发中...');
    },
    // 分页处理
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.loadTableData();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.loadTableData();
    },
    // 加载表格数据
    loadTableData() {
      // 模拟数据
      const mockData = [];
      for (let i = 0; i < 50; i++) {
        const currentValue = Math.random() * 1000 + 500;
        const compareValue = Math.random() * 1000 + 500;
        const changeAmount = currentValue - compareValue;
        const changeRate = ((changeAmount / compareValue) * 100).toFixed(2);
        
        mockData.push({
          time: `2024-06-${String(i + 1).padStart(2, '0')} ${String(Math.floor(Math.random() * 24)).padStart(2, '0')}:00:00`,
          currentValue: currentValue.toFixed(2),
          compareValue: compareValue.toFixed(2),
          changeAmount: changeAmount.toFixed(2),
          changeRate: changeRate,
          status: Math.random() > 0.8 ? 'abnormal' : 'normal',
          remark: Math.random() > 0.8 ? '能耗异常波动' : ''
        });
      }
      
      this.tableData = mockData.slice(
        (this.pagination.currentPage - 1) * this.pagination.pageSize,
        this.pagination.currentPage * this.pagination.pageSize
      );
      this.pagination.total = mockData.length;
    },
    // 初始化分析图表
    initAnalysisCharts() {
      this.$nextTick(() => {
        this.initTrendChart();
        this.initTotalChart();
        this.initProportionChart();
        this.initRateChart();
      });
    },
    // 趋势对比图
    initTrendChart() {
      const chart = echarts.init(this.$refs.trendChart);
      this.charts.trendChart = chart;
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['本期能耗', '对比期能耗', '变化率']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
        },
        yAxis: [
          {
            type: 'value',
            name: '能耗(kWh)',
            position: 'left'
          },
          {
            type: 'value',
            name: '变化率(%)',
            position: 'right',
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '本期能耗',
            type: 'bar',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '对比期能耗',
            type: 'bar',
            data: [110, 125, 95, 128, 85, 220, 200]
          },
          {
            name: '变化率',
            type: 'line',
            yAxisIndex: 1,
            data: [9.1, 5.6, 6.3, 4.7, 5.9, 4.5, 5.0]
          }
        ]
      };
      chart.setOption(option);
    },
    // 能耗总量对比
    initTotalChart() {
      const chart = echarts.init(this.$refs.totalChart);
      this.charts.totalChart = chart;
      
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '能耗对比',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '本期能耗' },
              { value: 735, name: '对比期能耗' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      chart.setOption(option);
    },
    // 能耗占比对比
    initProportionChart() {
      const chart = echarts.init(this.$refs.proportionChart);
      this.charts.proportionChart = chart;
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['本期占比', '对比期占比']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['照明', '动力', '空调', '其他']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}%'
          }
        },
        series: [
          {
            name: '本期占比',
            type: 'bar',
            data: [25, 35, 30, 10]
          },
          {
            name: '对比期占比',
            type: 'bar',
            data: [20, 40, 25, 15]
          }
        ]
      };
      chart.setOption(option);
    },
    // 变化率趋势
    initRateChart() {
      const chart = echarts.init(this.$refs.rateChart);
      this.charts.rateChart = chart;
      
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['同比增长率', '环比增长率']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}%'
          }
        },
        series: [
          {
            name: '同比增长率',
            type: 'line',
            stack: 'Total',
            data: [12, 13, 10, 13, 9, 23, 21]
          },
          {
            name: '环比增长率',
            type: 'line',
            stack: 'Total',
            data: [2, 3, 1, 3, -1, 13, 11]
          }
        ]
      };
      chart.setOption(option);
    },
    // 更新图表
    updateCharts() {
      // 这里可以根据筛选条件更新图表数据
      this.$message.success('图表数据已更新');
    },
    getLabel(type) {
      const map = {
        water: "水",
        electricity: "电",
        steam: "蒸汽",
        air: "压缩空气",
        nitrogen: "氮气"
      };
      return map[type] || type;
    },
    // 1. 总览模块
    initOverviewCharts() {
      // 圆环图
      const pie = echarts.init(this.$refs.overviewPie);
      pie.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: 10, left: 'center' },
        color: ['#5470C6', '#91CC75', '#FAC858', '#EE6666', '#73C0DE'],
        series: [{
          name: '能源占比',
          type: 'pie',
          radius: ['60%', '80%'],
          label: { show: true, formatter: '{b}: {d}%' },
          data: this.overviewPieData
        }]
      });
      // 柱状对比
      const bar = echarts.init(this.$refs.overviewBar);
      bar.setOption({
        xAxis: { type: 'category', data: this.overviewBarLabels },
        yAxis: { type: 'value' },
        series: [{
          data: this.overviewBarData,
          type: 'bar',
          label: { show: true, position: 'top' },
          itemStyle: {
            color: function(params) {
              const colors = ['#5470C6', '#91CC75', '#FAC858'];
              return colors[params.dataIndex];
            }
          }
        }]
      });
      // 仪表盘
      const gauge = echarts.init(this.$refs.overviewGauge);
      gauge.setOption({
        series: [
          {
            type: 'gauge',
            min: 0,
            max: 500,
            detail: { formatter: '{value}' },
            data: [this.overviewGaugeData[0]],
            title: { offsetCenter: [0, '-30%'] },
            axisLine: { lineStyle: { width: 10 } },
            pointer: { width: 5 }
          },
          {
            type: 'gauge',
            min: 0,
            max: 200,
            center: ['75%', '60%'],
            radius: '40%',
            detail: { formatter: '{value}' },
            data: [this.overviewGaugeData[1]],
            title: { offsetCenter: [0, '-30%'] },
            axisLine: { lineStyle: { width: 6 } },
            pointer: { width: 3 }
          }
        ]
      });
    },
    // 3. 能源对比与效率分析
    initCompareCharts() {
      // 堆叠柱状图
      const stackBar = echarts.init(this.$refs.compareStackBar);
      stackBar.setOption({
        tooltip: { trigger: 'axis' },
        legend: { data: ['水', '电', '蒸汽', '压缩空气', '氮气'] },
        xAxis: { type: 'category', data: this.compareStackBarLabels },
        yAxis: { type: 'value' },
        series: [
          { name: '水', type: 'bar', stack: 'total', data: this.compareStackBarData.water },
          { name: '电', type: 'bar', stack: 'total', data: this.compareStackBarData.electricity },
          { name: '蒸汽', type: 'bar', stack: 'total', data: this.compareStackBarData.steam },
          { name: '压缩空气', type: 'bar', stack: 'total', data: this.compareStackBarData.air },
          { name: '氮气', type: 'bar', stack: 'total', data: this.compareStackBarData.nitrogen }
        ]
      });
      // 雷达图
      const radar = echarts.init(this.$refs.compareRadar);
      radar.setOption({
        radar: { indicator: this.compareRadarIndicators },
        series: [{
          type: 'radar',
          data: [{ value: this.compareRadarData, name: '单位产出能耗' }]
        }]
      });
      // 气体类比图
      const gas = echarts.init(this.$refs.compareGas);
      gas.setOption({
        tooltip: { trigger: 'axis' },
        legend: { data: ['压缩空气', '氮气'] },
        xAxis: { type: 'category', data: this.compareGasLabels },
        yAxis: { type: 'value' },
        series: [
          { name: '压缩空气', type: 'bar', data: this.compareGasData.air },
          { name: '氮气', type: 'bar', data: this.compareGasData.nitrogen }
        ]
      });
    }
  }
}
</script>
<style scoped>
.energy-dashboard {
  padding: 20px;
}
.filter-section {
  background: #f5f7fa;
}
.visualization-section .el-card {
  min-height: 350px;
}
.analysis-section .el-card {
  min-height: 200px;
}
.table-section .el-card {
  min-height: 400px;
}
.metric-card {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  margin-bottom: 10px;
}
.metric-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
.metric-value {
  font-size: 24px;
  font-weight: bold;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.metric-value.up {
  color: #67C23A;
}
.metric-value.down {
  color: #F56C6C;
}
.metric-desc {
  font-size: 12px;
  color: #999;
}
.text-danger {
  color: #F56C6C;
}
.text-success {
  color: #67C23A;
}
.dashboard-overview .el-card {
  min-height: 300px;
}
</style>
