用能报表重构

ems-ui-cloud/src/api/device/energyConsumption.js

@@ -0,0 +1,314 @@
+import request from '@/utils/request'
+
+// ==================== 区域用电统计 ====================
+
+/**
+ * 查询区域用电统计列表
+ * @param {Object} query 查询参数
+ * @returns {Promise} 区域用电统计列表
+ */
+export function getAreaElecConsumptionList(query) {
+  return request({
+    url: '/ems/consumption/area/elec/list',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 查询区域用电统计汇总
+ * @param {Object} query 查询参数
+ * @returns {Promise} 区域用电统计汇总
+ */
+export function getAreaElecConsumptionSummary(query) {
+  return request({
+    url: '/ems/consumption/area/elec/summary',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 导出区域用电统计数据
+ * @param {Object} query 查询参数
+ * @returns {Promise} 导出结果
+ */
+export function exportAreaElecConsumption(query) {
+  return request({
+    url: '/ems/consumption/area/elec/export',
+    method: 'post',
+    data: query,
+    responseType: 'blob'
+  })
+}
+
+// ==================== 区域用水统计 ====================
+
+/**
+ * 查询区域用水统计列表
+ * @param {Object} query 查询参数
+ * @returns {Promise} 区域用水统计列表
+ */
+export function getAreaWaterConsumptionList(query) {
+  return request({
+    url: '/ems/consumption/area/water/list',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 查询区域用水统计汇总
+ * @param {Object} query 查询参数
+ * @returns {Promise} 区域用水统计汇总
+ */
+export function getAreaWaterConsumptionSummary(query) {
+  return request({
+    url: '/ems/consumption/area/water/summary',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 导出区域用水统计数据
+ * @param {Object} query 查询参数
+ * @returns {Promise} 导出结果
+ */
+export function exportAreaWaterConsumption(query) {
+  return request({
+    url: '/ems/consumption/area/water/export',
+    method: 'post',
+    data: query,
+    responseType: 'blob'
+  })
+}
+
+// ==================== 设施用电统计 ====================
+
+/**
+ * 查询设施用电统计列表
+ * @param {Object} query 查询参数
+ * @returns {Promise} 设施用电统计列表
+ */
+export function getFacsElecConsumptionList(query) {
+  return request({
+    url: '/ems/consumption/facs/elec/list',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 查询设施用电统计汇总
+ * @param {Object} query 查询参数
+ * @returns {Promise} 设施用电统计汇总
+ */
+export function getFacsElecConsumptionSummary(query) {
+  return request({
+    url: '/ems/consumption/facs/elec/summary',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 导出设施用电统计数据
+ * @param {Object} query 查询参数
+ * @returns {Promise} 导出结果
+ */
+export function exportFacsElecConsumption(query) {
+  return request({
+    url: '/ems/consumption/facs/elec/export',
+    method: 'post',
+    data: query,
+    responseType: 'blob'
+  })
+}
+
+// ==================== 设施用水统计 ====================
+
+/**
+ * 查询设施用水统计列表
+ * @param {Object} query 查询参数
+ * @returns {Promise} 设施用水统计列表
+ */
+export function getFacsWaterConsumptionList(query) {
+  return request({
+    url: '/ems/consumption/facs/water/list',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 查询设施用水统计汇总
+ * @param {Object} query 查询参数
+ * @returns {Promise} 设施用水统计汇总
+ */
+export function getFacsWaterConsumptionSummary(query) {
+  return request({
+    url: '/ems/consumption/facs/water/summary',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 导出设施用水统计数据
+ * @param {Object} query 查询参数
+ * @returns {Promise} 导出结果
+ */
+export function exportFacsWaterConsumption(query) {
+  return request({
+    url: '/ems/consumption/facs/water/export',
+    method: 'post',
+    data: query,
+    responseType: 'blob'
+  })
+}
+
+// ==================== 辅助功能接口 ====================
+
+/**
+ * 格式化查询参数
+ * @param {Object} params 原始查询参数
+ * @returns {Object} 格式化后的查询参数
+ */
+export function formatQueryParams(params) {
+  const query = { ...params }
+
+  // 确保必要的参数存在
+  if (!query.objType) {
+    query.objType = 1
+  }
+
+  if (!query.timeDimension) {
+    query.timeDimension = 'month'
+  }
+
+  if (!query.orderFlag) {
+    query.orderFlag = 'desc'
+  }
+
+  if (!query.energyType) {
+    query.energyType = 'elec'
+  }
+
+  // 处理时间参数
+  if (query.startRecTime && typeof query.startRecTime === 'object') {
+    query.startRecTime = formatDateTime(query.startRecTime)
+  }
+
+  if (query.endRecTime && typeof query.endRecTime === 'object') {
+    query.endRecTime = formatDateTime(query.endRecTime)
+  }
+
+  return query
+}
+
+/**
+ * 格式化日期时间
+ * @param {Date|String} date 日期对象或字符串
+ * @returns {String} 格式化后的日期时间字符串
+ */
+function formatDateTime(date) {
+  if (!date) return ''
+
+  if (typeof date === 'string') {
+    return date
+  }
+
+  if (date instanceof Date) {
+    const year = date.getFullYear()
+    const month = String(date.getMonth() + 1).padStart(2, '0')
+    const day = String(date.getDate()).padStart(2, '0')
+    const hours = String(date.getHours()).padStart(2, '0')
+    const minutes = String(date.getMinutes()).padStart(2, '0')
+    const seconds = String(date.getSeconds()).padStart(2, '0')
+
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+  }
+
+  return ''
+}
+
+/**
+ * 获取时间维度选项
+ * @returns {Array} 时间维度选项数组
+ */
+export function getTimeDimensionOptions() {
+  return [
+    { label: '日', value: 'day' },
+    { label: '月', value: 'month' },
+    { label: '年', value: 'year' }
+  ]
+}
+
+/**
+ * 获取对象类型选项
+ * @returns {Array} 对象类型选项数组
+ */
+export function getObjTypeOptions() {
+  return [
+    { label: '区域', value: 1 },
+    { label: '设施', value: 2 }
+  ]
+}
+
+/**
+ * 获取能源类型选项
+ * @returns {Array} 能源类型选项数组
+ */
+export function getEnergyTypeOptions() {
+  return [
+    { label: '用电', value: 'elec' },
+    { label: '用水', value: 'water' }
+  ]
+}
+
+/**
+ * 获取设施分类选项
+ * @returns {Array} 设施分类选项数组
+ */
+export function getFacsCategoryOptions() {
+  return [
+    { label: '用能系统', value: 'Z' },
+    { label: '能源生产系统', value: 'E' },
+    { label: '中转系统', value: 'T' },
+    { label: '传输系统', value: 'W' },
+    { label: '存储系统', value: 'C' }
+  ]
+}
+
+/**
+ * 构建导出文件名
+ * @param {String} objType 对象类型 area|facs
+ * @param {String} energyType 能源类型 elec|water
+ * @param {String} timeDimension 时间维度
+ * @returns {String} 文件名
+ */
+export function buildExportFileName(objType, energyType, timeDimension) {
+  const objTypeMap = {
+    area: '区域',
+    facs: '设施'
+  }
+
+  const energyTypeMap = {
+    elec: '用电',
+    water: '用水'
+  }
+
+  const dimensionMap = {
+    day: '日',
+    month: '月',
+    year: '年'
+  }
+
+  const objTypeName = objTypeMap[objType] || ''
+  const energyTypeName = energyTypeMap[energyType] || ''
+  const dimensionName = dimensionMap[timeDimension] || ''
+  const timestamp = new Date().toISOString().slice(0, 10)
+
+  return `${objTypeName}${energyTypeName}统计_${dimensionName}_${timestamp}.xlsx`
+}

ems-ui-cloud/src/views/analysis/report/statement-consume.vue

@@ -39,6 +39,14 @@
       <!-- 右侧内容区域 -->
       <el-col :span="20" :xs="24">
         <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
+          <!-- 能源类型选择 -->
+          <el-form-item label="能源类型">
+            <el-radio-group v-model="queryParams.energyType" @change="handleEnergyTypeChange">
+              <el-radio-button label="elec">用电</el-radio-button>
+              <el-radio-button label="water">用水</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+
           <!-- 时间范围选择 -->
           <el-form-item label="开始时间" prop="startRecTime">
             <el-date-picker
@@ -79,43 +87,118 @@
           </el-form-item>
         </el-form>
 
-        <!-- 统计汇总卡片 -->
-        <el-row :gutter="20" style="margin-bottom: 20px">
-          <el-col :span="8">
-            <el-card class="summary-card">
-              <div slot="header">
-                <span>总用电量</span>
-              </div>
-              <div class="summary-value">
-                {{ summary.elecQuantity || 0 }} <span class="unit">kWh</span>
-              </div>
-            </el-card>
-          </el-col>
-          <el-col :span="8">
-            <el-card class="summary-card">
-              <div slot="header">
-                <span>总电费</span>
-              </div>
-              <div class="summary-value">
-                {{ summary.elecCost || 0 }} <span class="unit">元</span>
-              </div>
-            </el-card>
-          </el-col>
-          <el-col :span="8">
-            <el-card class="summary-card">
-              <div slot="header">
-                <span>平均单价</span>
-              </div>
-              <div class="summary-value">
-                {{ calculateAveragePrice() }} <span class="unit">元/kWh</span>
-              </div>
-            </el-card>
-          </el-col>
-        </el-row>
-
-        <!-- 数据表格 -->
-        <el-table v-loading="loading" :data="consumptionList">
-          <el-table-column label="对象名称" align="center" prop="objName" />
+        <!-- 统计汇总卡片 - 用电 -->
+        <div v-if="queryParams.energyType === 'elec'">
+          <el-row :gutter="20" style="margin-bottom: 20px">
+            <!-- 第一行：总用电量和总电费 -->
+            <el-col :span="12">
+              <el-card class="summary-card">
+                <div slot="header">
+                  <i class="el-icon-lightning summary-icon elec-icon"></i>
+                  <span>总用电量</span>
+                </div>
+                <div class="summary-value">
+                  {{ formatNumber(summary.totalElecQuantity) }} <span class="unit">kWh</span>
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card class="summary-card">
+                <div slot="header">
+                  <i class="el-icon-money summary-icon cost-icon"></i>
+                  <span>总电费</span>
+                </div>
+                <div class="summary-value">
+                  {{ formatNumber(summary.totalElecCost, 2) }} <span class="unit">元</span>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+
+          <!-- 第二行：峰谷电统计 -->
+          <el-row :gutter="15" style="margin-bottom: 20px">
+            <el-col :span="6">
+              <el-card class="peak-valley-card">
+                <div slot="header" class="clearfix">
+                  <span>尖峰电</span>
+                  <span class="peak-type-tag peak-tag">尖峰</span>
+                </div>
+                <div class="peak-valley-content">
+                  <div class="quantity">{{ formatNumber(summary.sharpPeakQuantity) }} kWh</div>
+                  <div class="percentage">占比 {{ calculatePercentage(summary.sharpPeakQuantity, summary.totalElecQuantity) }}%</div>
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :span="6">
+              <el-card class="peak-valley-card">
+                <div slot="header" class="clearfix">
+                  <span>高峰电</span>
+                  <span class="peak-type-tag high-peak-tag">高峰</span>
+                </div>
+                <div class="peak-valley-content">
+                  <div class="quantity">{{ formatNumber(summary.peakQuantity) }} kWh</div>
+                  <div class="percentage">占比 {{ calculatePercentage(summary.peakQuantity, summary.totalElecQuantity) }}%</div>
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :span="6">
+              <el-card class="peak-valley-card">
+                <div slot="header" class="clearfix">
+                  <span>平峰电</span>
+                  <span class="peak-type-tag normal-tag">平峰</span>
+                </div>
+                <div class="peak-valley-content">
+                  <div class="quantity">{{ formatNumber(summary.normalQuantity) }} kWh</div>
+                  <div class="percentage">占比 {{ calculatePercentage(summary.normalQuantity, summary.totalElecQuantity) }}%</div>
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :span="6">
+              <el-card class="peak-valley-card">
+                <div slot="header" class="clearfix">
+                  <span>低谷电</span>
+                  <span class="peak-type-tag valley-tag">低谷</span>
+                </div>
+                <div class="peak-valley-content">
+                  <div class="quantity">{{ formatNumber(summary.valleyQuantity) }} kWh</div>
+                  <div class="percentage">占比 {{ calculatePercentage(summary.valleyQuantity, summary.totalElecQuantity) }}%</div>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+
+        <!-- 统计汇总卡片 - 用水 -->
+        <div v-if="queryParams.energyType === 'water'">
+          <el-row :gutter="20" style="margin-bottom: 20px">
+            <el-col :span="12">
+              <el-card class="summary-card">
+                <div slot="header">
+                  <i class="el-icon-set-up summary-icon water-icon"></i>
+                  <span>总用水量</span>
+                </div>
+                <div class="summary-value">
+                  {{ formatNumber(summary.totalWaterQuantity) }} <span class="unit">m³</span>
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card class="summary-card">
+                <div slot="header">
+                  <i class="el-icon-money summary-icon cost-icon"></i>
+                  <span>总水费</span>
+                </div>
+                <div class="summary-value">
+                  {{ formatNumber(summary.totalWaterCost, 2) }} <span class="unit">元</span>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+
+        <!-- 数据表格 - 用电 -->
+        <el-table v-if="queryParams.energyType === 'elec'" v-loading="loading" :data="consumptionList">
+          <el-table-column label="对象名称" align="left" prop="objName" width="250" />
 
           <el-table-column label="统计时间" align="center" width="180">
             <template slot-scope="scope">
@@ -131,21 +214,70 @@
             </template>
           </el-table-column>
 
-          <el-table-column label="用电量(kWh)" align="center" prop="elecQuantity">
+          <el-table-column label="总用电量(kWh)" align="center" prop="totalElecQuantity">
+            <template slot-scope="scope">
+              <span>{{ formatNumber(scope.row.totalElecQuantity) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="尖峰电(kWh)" align="center" prop="sharpPeakQuantity">
+            <template slot-scope="scope">
+              <span>{{ formatNumber(scope.row.sharpPeakQuantity) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="高峰电(kWh)" align="center" prop="peakQuantity">
+            <template slot-scope="scope">
+              <span>{{ formatNumber(scope.row.peakQuantity) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="平峰电(kWh)" align="center" prop="normalQuantity">
+            <template slot-scope="scope">
+              <span>{{ formatNumber(scope.row.normalQuantity) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="低谷电(kWh)" align="center" prop="valleyQuantity">
+            <template slot-scope="scope">
+              <span>{{ formatNumber(scope.row.valleyQuantity) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="用电费用(元)" align="center" prop="totalElecCost">
             <template slot-scope="scope">
-              <span>{{ formatNumber(scope.row.elecQuantity) }}</span>
+              <span>{{ formatNumber(scope.row.totalElecCost, 2) }}</span>
             </template>
           </el-table-column>
+        </el-table>
+
+        <!-- 数据表格 - 用水 -->
+        <el-table v-if="queryParams.energyType === 'water'" v-loading="loading" :data="consumptionList">
+          <el-table-column label="对象名称" align="center" prop="objName" />
 
-          <el-table-column label="用电费用(元)" align="center" prop="elecCost">
+          <el-table-column label="统计时间" align="center" width="180">
             <template slot-scope="scope">
-              <span>{{ formatNumber(scope.row.elecCost, 2) }}</span>
+              <span v-if="queryParams.timeDimension === 'day'">
+                {{ formatDateForDisplay(scope.row.statisticDate) }}
+              </span>
+              <span v-else-if="queryParams.timeDimension === 'month'">
+                {{ scope.row.statisticMonth }}
+              </span>
+              <span v-else-if="queryParams.timeDimension === 'year'">
+                {{ scope.row.statisticYear }}
+              </span>
             </template>
           </el-table-column>
 
-          <el-table-column label="单价(元/kWh)" align="center">
+          <el-table-column label="用水量(m³)" align="center" prop="totalWaterQuantity">
             <template slot-scope="scope">
-              <span>{{ calculateUnitPrice(scope.row) }}</span>
+              <span>{{ formatNumber(scope.row.totalWaterQuantity) }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="用水费用(元)" align="center" prop="totalWaterCost">
+            <template slot-scope="scope">
+              <span>{{ formatNumber(scope.row.totalWaterCost, 2) }}</span>
             </template>
           </el-table-column>
         </el-table>
@@ -167,12 +299,18 @@
 import { getFacsCategoryTree } from '@/api/basecfg/emsfacs'
 import { areaTreeSelect } from '@/api/basecfg/area'
 import {
-  getAreaConsumptionList,
-  getFacsConsumptionList,
-  getAreaConsumptionSummary,
-  getFacsConsumptionSummary,
-  exportAreaConsumption,
-  exportFacsConsumption,
+  getAreaElecConsumptionList,
+  getAreaWaterConsumptionList,
+  getFacsElecConsumptionList,
+  getFacsWaterConsumptionList,
+  getAreaElecConsumptionSummary,
+  getAreaWaterConsumptionSummary,
+  getFacsElecConsumptionSummary,
+  getFacsWaterConsumptionSummary,
+  exportAreaElecConsumption,
+  exportAreaWaterConsumption,
+  exportFacsElecConsumption,
+  exportFacsWaterConsumption,
   formatQueryParams
 } from '@/api/device/energyConsumption'
 
@@ -205,6 +343,7 @@ export default {
         objCode: null,
         objType: 1,
         facsCategory: 'Z',
+        energyType: 'elec', // 新增：能源类型
         timeDimension: 'month',
         startRecTime: this.getDefaultStartTime(),
         endRecTime: this.getDefaultEndTime(),
@@ -256,6 +395,13 @@ export default {
       await this.getConsumptionSummary()
     },
 
+    // 能源类型切换处理
+    async handleEnergyTypeChange() {
+      this.clearData()
+      await this.getConsumptionList()
+      await this.getConsumptionSummary()
+    },
+
     // Tab切换处理
     async handleTabClick(tab) {
       this.clearData()
@@ -284,7 +430,7 @@ export default {
     // 加载区域树数据
     async loadAreaTreeData() {
       try {
-        const response = await areaTreeSelect(0, 3)
+        const response = await areaTreeSelect(0, 5)
         this.treeOptions = [{
           id: '-1',
           label: '全部区域',
@@ -331,10 +477,19 @@ export default {
         const query = formatQueryParams(this.queryParams)
         let response
 
+        // 根据能源类型和对象类型调用不同接口
         if (this.activeName === 'areaConsume') {
-          response = await getAreaConsumptionList(query)
+          if (this.queryParams.energyType === 'elec') {
+            response = await getAreaElecConsumptionList(query)
+          } else {
+            response = await getAreaWaterConsumptionList(query)
+          }
         } else {
-          response = await getFacsConsumptionList(query)
+          if (this.queryParams.energyType === 'elec') {
+            response = await getFacsElecConsumptionList(query)
+          } else {
+            response = await getFacsWaterConsumptionList(query)
+          }
         }
 
         this.consumptionList = response.rows || []
@@ -351,18 +506,22 @@ export default {
     // 获取用能汇总数据
     async getConsumptionSummary() {
       try {
-        // 为汇总接口构建查询参数
-        const summaryQuery = { ...this.queryParams }
-
-        // 在设施用能模式下，如果选择了具体设施，汇总接口也需要传递objCode
-        // 这样可以显示该设施在时间维度上的汇总值，而不是整个区域的汇总值
-        const query = formatQueryParams(summaryQuery)
+        const query = formatQueryParams(this.queryParams)
         let response
 
+        // 根据能源类型和对象类型调用不同接口
         if (this.activeName === 'areaConsume') {
-          response = await getAreaConsumptionSummary(query)
+          if (this.queryParams.energyType === 'elec') {
+            response = await getAreaElecConsumptionSummary(query)
+          } else {
+            response = await getAreaWaterConsumptionSummary(query)
+          }
         } else {
-          response = await getFacsConsumptionSummary(query)
+          if (this.queryParams.energyType === 'elec') {
+            response = await getFacsElecConsumptionSummary(query)
+          } else {
+            response = await getFacsWaterConsumptionSummary(query)
+          }
         }
 
         this.summary = response.data || {}
@@ -372,26 +531,19 @@ export default {
       }
     },
 
-    // 修复：节点点击处理 - 根据设施树结构处理点击逻辑
+    // 节点点击处理
     handleNodeClick(data, node) {
-      // 在设施用能模式下
       if (this.activeName === 'facsConsume') {
-        // 判断是否为顶级区域节点（如：常泰高速服务区(北区)）
         const isTopLevelAreaNode = !node.parent || node.level === 1
 
         if (isTopLevelAreaNode) {
-          // 点击顶级区域节点：设置区域代码，清空设施代码
-          // 这样会返回该区域下所有设施的汇总数据
           this.queryParams.areaCode = data.id
           this.queryParams.objCode = null
         } else {
-          // 点击具体设施节点：设置区域代码和设施代码
-          // 区域代码取顶级节点的id
           this.queryParams.areaCode = this.getTopLevelAreaId(node)
           this.queryParams.objCode = data.id
         }
       } else {
-        // 区域用能模式保持原有逻辑
         this.queryParams.areaCode = this.getTopLevelId(node)
         this.queryParams.objCode = data.id === '-1' ? null : data.id
       }
@@ -401,9 +553,8 @@ export default {
       this.getConsumptionSummary()
     },
 
-    // 获取顶级区域节点ID（专门用于设施树）
+    // 获取顶级区域节点ID
     getTopLevelAreaId(node) {
-      // 向上遍历找到顶级区域节点（level=1的节点）
       let currentNode = node
       while (currentNode.parent && currentNode.level > 1) {
         currentNode = currentNode.parent
@@ -411,7 +562,7 @@ export default {
       return currentNode.data.id
     },
 
-    // 获取顶级节点ID（原有方法，用于区域用能）
+    // 获取顶级节点ID
     getTopLevelId(node) {
       let currentNode = node
       while (currentNode.parent && currentNode.parent.data.id !== 0 && currentNode.parent.data.id !== '-1') {
@@ -434,17 +585,14 @@ export default {
 
       switch (this.queryParams.timeDimension) {
         case 'day':
-          // 当天
           this.queryParams.startRecTime = this.formatDateTime(this.getTodayStart())
           this.queryParams.endRecTime = this.formatDateTime(now)
           break
         case 'month':
-          // 本月
           this.queryParams.startRecTime = this.formatDateTime(this.getMonthStart())
           this.queryParams.endRecTime = this.formatDateTime(now)
           break
         case 'year':
-          // 本年
           this.queryParams.startRecTime = this.formatDateTime(this.getYearStart())
           this.queryParams.endRecTime = this.formatDateTime(now)
           break
@@ -493,17 +641,26 @@ export default {
         let response
         let filename = ''
 
+        // 根据能源类型和对象类型调用不同导出接口
         if (this.activeName === 'areaConsume') {
-          response = await exportAreaConsumption(query)
-          filename = `区域用能报表_${this.getCurrentTimeStr()}.xlsx`
+          if (this.queryParams.energyType === 'elec') {
+            response = await exportAreaElecConsumption(query)
+            filename = `区域用电报表_${this.getCurrentTimeStr()}.xlsx`
+          } else {
+            response = await exportAreaWaterConsumption(query)
+            filename = `区域用水报表_${this.getCurrentTimeStr()}.xlsx`
+          }
         } else {
-          response = await exportFacsConsumption(query)
-          filename = `设施用能报表_${this.getCurrentTimeStr()}.xlsx`
+          if (this.queryParams.energyType === 'elec') {
+            response = await exportFacsElecConsumption(query)
+            filename = `设施用电报表_${this.getCurrentTimeStr()}.xlsx`
+          } else {
+            response = await exportFacsWaterConsumption(query)
+            filename = `设施用水报表_${this.getCurrentTimeStr()}.xlsx`
+          }
         }
 
-        // 处理文件下载
         this.downloadExcelFile(response, filename)
-
         this.$modal.closeLoading()
         this.$modal.msgSuccess('导出成功')
       } catch (error) {
@@ -517,35 +674,27 @@ export default {
       try {
         let blob
 
-        // 如果返回的是Blob对象，直接使用
         if (data instanceof Blob) {
           blob = data
-        }
-        // 如果返回的是ArrayBuffer，转换为Blob
-        else if (data instanceof ArrayBuffer) {
+        } else if (data instanceof ArrayBuffer) {
           blob = new Blob([data], {
             type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
           })
-        }
-        // 如果是其他格式，尝试转换
-        else {
+        } else {
           blob = new Blob([data], {
             type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
           })
         }
 
-        // 创建下载链接
         const url = window.URL.createObjectURL(blob)
         const link = document.createElement('a')
         link.style.display = 'none'
         link.href = url
         link.download = filename
 
-        // 添加到页面并点击下载
         document.body.appendChild(link)
         link.click()
 
-        // 清理
         document.body.removeChild(link)
         window.URL.revokeObjectURL(url)
       } catch (error) {
@@ -554,7 +703,7 @@ export default {
       }
     },
 
-    // 获取当前时间字符串（用于文件名）
+    // 获取当前时间字符串
     getCurrentTimeStr() {
       const now = new Date()
       const year = now.getFullYear()
@@ -583,41 +732,27 @@ export default {
       this.queryParams.pageNum = 1
     },
 
-    // 计算平均单价
-    calculateAveragePrice() {
-      if (!this.summary.elecQuantity || !this.summary.elecCost) {
-        return '0.00'
+    // 计算百分比
+    calculatePercentage(value, total) {
+      if (!value || !total || total === 0) {
+        return '0.0'
       }
-
-      const price = this.summary.elecCost / this.summary.elecQuantity
-      return this.formatNumber(price, 3)
+      const percentage = (value / total) * 100
+      return percentage.toFixed(1)
     },
 
-    // 计算单价
-    calculateUnitPrice(row) {
-      if (!row.elecQuantity || !row.elecCost) {
-        return '0.00'
-      }
-
-      const price = row.elecCost / row.elecQuantity
-      return this.formatNumber(price, 3)
-    },
-
-    // 修复：专门用于显示的日期格式化方法
+    // 日期格式化
     formatDateForDisplay(dateStr) {
       if (!dateStr) return ''
 
-      // 如果是完整的日期时间字符串，提取日期部分
       if (dateStr.includes(' ')) {
         return dateStr.split(' ')[0]
       }
 
-      // 如果已经是日期格式，直接返回
       if (dateStr.match(/^\d{4}-\d{2}-\d{2}$/)) {
         return dateStr
       }
 
-      // 尝试解析并格式化
       try {
         const date = new Date(dateStr)
         if (isNaN(date.getTime())) return dateStr
@@ -676,11 +811,6 @@ export default {
       return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
     },
 
-    formatDate(date, format) {
-      if (!date) return ''
-      return this.parseTime(date, format)
-    },
-
     formatNumber(num, decimals = 2) {
       if (num === null || num === undefined || isNaN(num)) {
         return '0.' + '0'.repeat(decimals)
@@ -699,18 +829,100 @@ export default {
 
 .summary-card {
   text-align: center;
+  min-height: 120px;
+}
+
+.summary-card .el-card__header {
+  padding: 15px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.summary-icon {
+  font-size: 18px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+.elec-icon {
+  color: #409EFF;
+}
+
+.water-icon {
+  color: #67C23A;
+}
+
+.cost-icon {
+  color: #E6A23C;
 }
 
 .summary-value {
-  font-size: 24px;
+  font-size: 28px;
   font-weight: bold;
   color: #409EFF;
+  padding: 20px 0;
 }
 
 .unit {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: normal;
   color: #909399;
+  margin-left: 5px;
+}
+
+.peak-valley-card {
+  text-align: center;
+  min-height: 120px;
+}
+
+.peak-valley-card .el-card__header {
+  padding: 12px 15px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.clearfix:after {
+  display: table;
+  content: "";
+  clear: both;
+}
+
+.peak-type-tag {
+  float: right;
+  padding: 3px 8px;
+  font-size: 12px;
+  border-radius: 4px;
+  color: white;
+}
+
+.peak-tag {
+  background-color: #F56C6C;
+}
+
+.high-peak-tag {
+  background-color: #E6A23C;
+}
+
+.normal-tag {
+  background-color: #909399;
+}
+
+.valley-tag {
+  background-color: #67C23A;
+}
+
+.peak-valley-content {
+  padding: 15px 0;
+}
+
+.quantity {
+  font-size: 20px;
+  font-weight: bold;
+  color: #303133;
+  margin-bottom: 8px;
+}
+
+.percentage {
+  font-size: 14px;
+  color: #909399;
 }
 
 .el-tree .el-tree-node.is-leaf > .el-tree-node__content {