From 071268b04e5b84cc973a968bc3d4d8d8504f63c1 Mon Sep 17 00:00:00 2001
From: yinq <yinq>
Date: Mon, 11 Aug 2025 15:13:52 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=90=8C=E6=AF=94=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ems/board/factoryBoard.vue          | 792 ++++++++++++++++++
 .../ems/report/yoyAnalysisReport/index.vue    | 792 ++++++++++++++++++
 2 files changed, 1584 insertions(+)
 create mode 100644 src/views/ems/board/factoryBoard.vue
 create mode 100644 src/views/ems/report/yoyAnalysisReport/index.vue

diff --git a/src/views/ems/board/factoryBoard.vue b/src/views/ems/board/factoryBoard.vue
new file mode 100644
index 0000000..bf66ab6
--- /dev/null
+++ b/src/views/ems/board/factoryBoard.vue
@@ -0,0 +1,792 @@
+<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>
diff --git a/src/views/ems/report/yoyAnalysisReport/index.vue b/src/views/ems/report/yoyAnalysisReport/index.vue
new file mode 100644
index 0000000..e0acdc9
--- /dev/null
+++ b/src/views/ems/report/yoyAnalysisReport/index.vue
@@ -0,0 +1,792 @@
+<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: "YoyAnalysisReport",
+  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>