From 124ac3f9a686a5aada4a0c570b11106cd5eff31b Mon Sep 17 00:00:00 2001
From: yinq <yinq>
Date: Fri, 12 Sep 2025 11:08:52 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E5=90=8C=E6=AF=94=E5=88=86=E6=9E=90?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ems/report/yoyAnalysisReport/index.vue    | 772 +++++-------------
 1 file changed, 194 insertions(+), 578 deletions(-)

diff --git a/src/views/ems/report/yoyAnalysisReport/index.vue b/src/views/ems/report/yoyAnalysisReport/index.vue
index e0acdc9..6f1239d 100644
--- a/src/views/ems/report/yoyAnalysisReport/index.vue
+++ b/src/views/ems/report/yoyAnalysisReport/index.vue
@@ -1,92 +1,66 @@
 <template>
-  <div class="energy-dashboard">
+  <div class="app-container">
     <!-- 条件筛选区 -->
-    <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="24">
+      <el-col :span="24" :xs="24">
+        <el-form :model="filterForm" ref="queryForm" :inline="true" size="small" label-width="80px">
+          <el-form-item label="能源类型" prop="energyType">
+            <el-select v-model="filterForm.energyType" style="width: 100px" placeholder="请选择能源类型">
+              <el-option
+                v-for="item in energyTypeList"
+                :key="item.energyTypeId"
+                :label="item.energyName"
+                :value="item.energyTypeId"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="日期类型" prop="dateType">
+            <el-select v-model="filterForm.dateType" placeholder="请选择日期类型" style="width: 80px;">
+              <el-option
+                v-for="item in dateTypeList"
+                :key="item.dateTypeCode"
+                :label="item.dateTypeName"
+                :value="item.dateTypeCode"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="统计单元" prop="workUnitCode">
+            <treeselect v-model="filterForm.workUnitCode" :options="workUnitOptions"
+                        :normalizer="workUnitOptionsNormalizer"
+                        placeholder="请选择统计单元" style="width: 200px;"
+            />
+          </el-form-item>
+          <el-form-item label="时间范围">
+            <el-date-picker
+              v-model="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: 340px;"
+            >
+            </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-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
     <!-- 数据可视化展示区 -->
     <el-row :gutter="20" class="visualization-section">
       <!-- 趋势对比图 -->
-      <el-col :span="12">
+      <el-col :span="16">
         <el-card>
           <div slot="header">
             <span>趋势对比图</span>
@@ -94,11 +68,11 @@
               保存图片
             </el-button>
           </div>
-          <div ref="trendChart" style="height: 300px; width: 100%"></div>
+          <div ref="trendChart" style="height: 400px; width: 100%"></div>
         </el-card>
       </el-col>
       <!-- 能耗总量对比 -->
-      <el-col :span="12">
+      <el-col :span="8">
         <el-card>
           <div slot="header">
             <span>能耗总量对比</span>
@@ -106,332 +80,148 @@
               保存图片
             </el-button>
           </div>
-          <div ref="totalChart" style="height: 300px; width: 100%"></div>
+          <div ref="totalChart" style="height: 400px; 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>
+<!--    <el-row :gutter="20" class="visualization-section" style="margin-top: 20px;">-->
+<!--      &lt;!&ndash; 能耗占比对比 &ndash;&gt;-->
+<!--      <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>-->
+<!--      &lt;!&ndash; 变化率趋势 &ndash;&gt;-->
+<!--      <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>-->
 
   </div>
 </template>
 <script>
 import * as echarts from 'echarts'
+import { getBaseEnergyTypeList } from '@/api/ems/base/baseEnergyType'
+import { parseTime } from '@/utils/ruoyi'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+import { getWorkUnitTrees } from '@/api/ems/base/baseWorkUnit'
+import { yoyAnalysisReport } from '@/api/ems/report/reportPort'
+
 export default {
-  name: "YoyAnalysisReport",
+  name: 'YoyAnalysisReport',
+  components: { Treeselect },
   data() {
     return {
       // 筛选表单
       filterForm: {
-        area: '',
-        department: '',
-        circuit: '',
-        pipeline: '',
-        energyType: 'electricity',
-        timeDimension: 'day',
-        timeRange: [],
-        compareType: 'yoy'
+        energyType: 2,
+        dateType: 10,
+        workUnitCode: null
       },
-      // 关键指标
-      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: [],
+      timeRange: [],
       // 图表实例
       charts: {},
-      // 总览模块模拟数据
-      overviewPieData: [
-        { value: 800, name: '电' },
-        { value: 500, name: '水' },
-        { value: 300, name: '蒸汽' },
-        { value: 200, name: '压缩空气' },
-        { value: 100, name: '氮气' }
+      dateTypeList: [
+        { dateTypeCode: 10, dateTypeName: '日' },
+        { dateTypeCode: 7, dateTypeName: '月' },
+        { dateTypeCode: 4, dateTypeName: '年' }
       ],
-      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]
+      // 能源类型选项
+      energyTypeList: [],
+      workUnitOptions: [],
+      dataList: {
+        // time: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
+        // thisData: [120, 132, 101, 134, 90, 230, 210],
+        // contrastData: [110, 125, 95, 128, 85, 220, 200],
+        // rate: [9.1, 5.6, 6.3, 4.7, 5.9, 4.5, 5.0],
+        // thisSum: 1320,
+        // contrastSum: 1620
       }
-    };
+    }
+  },
+  created() {
+    this.getWorkUnitTreesMethod()
+    getBaseEnergyTypeList({}).then(response => {
+      this.energyTypeList = response.data
+    })
   },
   mounted() {
-    this.initFilterForm();
-    this.initAnalysisCharts();
-    this.initOverviewCharts();
-    this.initCompareCharts();
-    this.loadTableData();
+    this.initFilterForm()
+    this.initAnalysisCharts()
   },
   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', ' ')
-      ];
+      const nowDate = parseTime(new Date(), '{y}-{m}-{d}')
+      this.timeRange = [
+        nowDate + ' 00:00:00',
+        nowDate + ' 23:59:59'
+      ]
     },
     // 查询数据
     handleSearch() {
-      this.loadTableData();
-      this.updateCharts();
+      this.updateCharts()
     },
     // 重置筛选条件
     handleReset() {
-      this.filterForm = {
-        area: '',
-        department: '',
-        circuit: '',
-        pipeline: '',
-        energyType: 'electricity',
-        timeDimension: 'day',
-        timeRange: this.filterForm.timeRange,
-        compareType: 'yoy'
-      };
+      this.resetForm('queryForm')
+      this.handleSearch()
     },
-    // 导出数据
-    handleExport() {
-      this.$message.success('导出功能开发中...');
+    /** 转换统计单元信息数据结构 */
+    workUnitOptionsNormalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id2: node.workUnitCode,
+        label2: node.workUnitName,
+        children2: node.children
+      }
+    },
+    /** 查询统计单元下拉树结构 */
+    getWorkUnitTreesMethod() {
+      getWorkUnitTrees().then(response => {
+        this.workUnitOptions = []
+        this.workUnitOptions = JSON.parse(JSON.stringify(response.data).replaceAll('id', 'id2').replaceAll('code', 'id'))
+      })
     },
     // 保存图表
     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();
+        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();
-      });
+        this.initTrendChart()
+        this.initTotalChart()
+      })
     },
     // 趋势对比图
     initTrendChart() {
-      const chart = echarts.init(this.$refs.trendChart);
-      this.charts.trendChart = chart;
+      const chart = echarts.init(this.$refs.trendChart)
+      this.charts.trendChart = chart
 
       const option = {
         tooltip: {
@@ -451,7 +241,7 @@ export default {
         },
         xAxis: {
           type: 'category',
-          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
+          data: this.dataList.time
         },
         yAxis: [
           {
@@ -472,27 +262,27 @@ export default {
           {
             name: '本期能耗',
             type: 'bar',
-            data: [120, 132, 101, 134, 90, 230, 210]
+            data: this.dataList.thisData
           },
           {
             name: '对比期能耗',
             type: 'bar',
-            data: [110, 125, 95, 128, 85, 220, 200]
+            data: this.dataList.contrastData
           },
           {
             name: '变化率',
             type: 'line',
             yAxisIndex: 1,
-            data: [9.1, 5.6, 6.3, 4.7, 5.9, 4.5, 5.0]
+            data: this.dataList.rate
           }
         ]
-      };
-      chart.setOption(option);
+      }
+      chart.setOption(option)
     },
     // 能耗总量对比
     initTotalChart() {
-      const chart = echarts.init(this.$refs.totalChart);
-      this.charts.totalChart = chart;
+      const chart = echarts.init(this.$refs.totalChart)
+      this.charts.totalChart = chart
 
       const option = {
         tooltip: {
@@ -508,8 +298,8 @@ export default {
             type: 'pie',
             radius: '50%',
             data: [
-              { value: 1048, name: '本期能耗' },
-              { value: 735, name: '对比期能耗' }
+              { value: this.dataList.thisSum, name: '本期能耗' },
+              { value: this.dataList.contrastSum, name: '对比期能耗' }
             ],
             emphasis: {
               itemStyle: {
@@ -520,13 +310,13 @@ export default {
             }
           }
         ]
-      };
-      chart.setOption(option);
+      }
+      chart.setOption(option)
     },
     // 能耗占比对比
     initProportionChart() {
-      const chart = echarts.init(this.$refs.proportionChart);
-      this.charts.proportionChart = chart;
+      const chart = echarts.init(this.$refs.proportionChart)
+      this.charts.proportionChart = chart
 
       const option = {
         tooltip: {
@@ -566,170 +356,27 @@ export default {
             data: [20, 40, 25, 15]
           }
         ]
-      };
-      chart.setOption(option);
+      }
+      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 }
-        ]
-      });
+      this.loading = true
+      this.filterForm.beginCollectTime = null
+      this.filterForm.endCollectTime = null
+      if (this.timeRange != null && this.timeRange !== '') {
+        this.filterForm.beginCollectTime = this.timeRange[0]
+        this.filterForm.endCollectTime = this.timeRange[1]
+      }
+      yoyAnalysisReport(this.filterForm).then(response => {
+        this.dataList = response.data
+        console.log(this.dataList)
+        this.initTrendChart()
+        this.initTotalChart()
+        this.loading = false
+        this.$message.success('图表数据已更新')
+      })
     }
   }
 }
@@ -738,54 +385,23 @@ export default {
 .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;
 }