yinq
/
HKZD-EMS-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 同比分析页面优化

Browse Source
master
yinq 3 months ago
parent c0c3e453cf
commit 124ac3f9a6
1 changed files with 194 additions and 578 deletions
Show Stats Download Patch File Download Diff File

772
src/views/ems/report/yoyAnalysisReport/index.vue
Unescape Escape View File

@ -1,92 +1,66 @@
<template> <template>
<div class="energy-dashboard"> <div class="app-container">
<!-- 条件筛选区 --> <!-- 条件筛选区 -->
<el-card class="filter-section" style="margin-bottom: 20px;"> <el-row :gutter="24">
<div slot="header"> <el-col :span="24" :xs="24">
<span>电能耗同比环比分析</span> <el-form :model="filterForm" ref="queryForm" :inline="true" size="small" label-width="80px">
</div> <el-form-item label="能源类型" prop="energyType">
<el-form :model="filterForm" :inline="true" size="small"> <el-select v-model="filterForm.energyType" style="width: 100px" placeholder="请选择能源类型">
<el-form-item label="区域"> <el-option
<el-select v-model="filterForm.area" placeholder="请选择区域" style="width: 120px;"> v-for="item in energyTypeList"
<el-option label="全部区域" value=""></el-option> :key="item.energyTypeId"
<el-option label="一车间" value="area1"></el-option> :label="item.energyName"
<el-option label="二车间" value="area2"></el-option> :value="item.energyTypeId"
<el-option label="三车间" value="area3"></el-option> ></el-option>
<el-option label="四车间" value="area4"></el-option> </el-select>
</el-select> </el-form-item>
</el-form-item> <el-form-item label="日期类型" prop="dateType">
<el-form-item label="部门"> <el-select v-model="filterForm.dateType" placeholder="请选择日期类型" style="width: 80px;">
<el-select v-model="filterForm.department" placeholder="请选择部门" style="width: 120px;"> <el-option
<el-option label="全部部门" value=""></el-option> v-for="item in dateTypeList"
<el-option label="生产部" value="prod"></el-option> :key="item.dateTypeCode"
<el-option label="设备部" value="equip"></el-option> :label="item.dateTypeName"
<el-option label="能源部" value="energy"></el-option> :value="item.dateTypeCode"
</el-select> ></el-option>
</el-form-item> </el-select>
<el-form-item label="回路"> </el-form-item>
<el-select v-model="filterForm.circuit" placeholder="请选择回路" style="width: 120px;"> <el-form-item label="统计单元" prop="workUnitCode">
<el-option label="全部回路" value=""></el-option> <treeselect v-model="filterForm.workUnitCode" :options="workUnitOptions"
<el-option label="主回路" value="main"></el-option> :normalizer="workUnitOptionsNormalizer"
<el-option label="照明回路" value="light"></el-option> placeholder="请选择统计单元" style="width: 200px;"
<el-option label="动力回路" value="power"></el-option> />
</el-select> </el-form-item>
</el-form-item> <el-form-item label="时间范围">
<el-form-item label="管网"> <el-date-picker
<el-select v-model="filterForm.pipeline" placeholder="请选择管网" style="width: 120px;"> v-model="timeRange"
<el-option label="全部管网" value=""></el-option> type="datetimerange"
<el-option label="高压管网" value="high"></el-option> range-separator="至"
<el-option label="中压管网" value="medium"></el-option> start-placeholder="开始时间"
<el-option label="低压管网" value="low"></el-option> end-placeholder="结束时间"
</el-select> format="yyyy-MM-dd HH:mm:ss"
</el-form-item> value-format="yyyy-MM-dd HH:mm:ss"
<el-form-item label="能源类型"> style="width: 340px;"
<el-select v-model="filterForm.energyType" placeholder="请选择能源类型" style="width: 120px;"> >
<el-option label="电力" value="electricity"></el-option> </el-date-picker>
<el-option label="水" value="water"></el-option> </el-form-item>
<el-option label="蒸汽" value="steam"></el-option> <!-- <el-form-item label="对比类型">-->
<el-option label="压缩空气" value="air"></el-option> <!-- <el-select v-model="filterForm.compareType" placeholder="请选择对比类型" style="width: 120px;">-->
<el-option label="氮气" value="nitrogen"></el-option> <!-- <el-option label="同比" value="yoy"></el-option>-->
</el-select> <!-- <el-option label="环比" value="mom"></el-option>-->
</el-form-item> <!-- <el-option label="自定义对比" value="custom"></el-option>-->
<el-form-item label="时间维度"> <!-- </el-select>-->
<el-select v-model="filterForm.timeDimension" placeholder="请选择时间维度" style="width: 120px;"> <!-- </el-form-item>-->
<el-option label="时" value="hour"></el-option> <el-form-item>
<el-option label="日" value="day"></el-option> <el-button type="primary" @click="handleSearch">查询</el-button>
<el-option label="月" value="month"></el-option> <el-button @click="handleReset">重置</el-button>
<el-option label="年" value="year"></el-option> </el-form-item>
</el-select> </el-form>
</el-form-item> </el-col>
<el-form-item label="时间范围"> </el-row>
<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-row :gutter="20" class="visualization-section">
<!-- 趋势对比图 --> <!-- 趋势对比图 -->
<el-col :span="12"> <el-col :span="16">
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span>趋势对比图</span> <span>趋势对比图</span>
@ -94,11 +68,11 @@
保存图片 保存图片
</el-button> </el-button>
</div> </div>
<div ref="trendChart" style="height: 300px; width: 100%"></div> <div ref="trendChart" style="height: 400px; width: 100%"></div>
</el-card> </el-card>
</el-col> </el-col>
<!-- 能耗总量对比 --> <!-- 能耗总量对比 -->
<el-col :span="12"> <el-col :span="8">
<el-card> <el-card>
<div slot="header"> <div slot="header">
<span>能耗总量对比</span> <span>能耗总量对比</span>
@ -106,332 +80,148 @@
保存图片 保存图片
</el-button> </el-button>
</div> </div>
<div ref="totalChart" style="height: 300px; width: 100%"></div> <div ref="totalChart" style="height: 400px; width: 100%"></div>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20" class="visualization-section" style="margin-top: 20px;"> <!-- <el-row :gutter="20" class="visualization-section" style="margin-top: 20px;">-->
<!-- 能耗占比对比 --> <!-- &lt;!&ndash; 能耗占比对比 &ndash;&gt;-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<el-card> <!-- <el-card>-->
<div slot="header"> <!-- <div slot="header">-->
<span>能耗占比对比</span> <!-- <span>能耗占比对比</span>-->
<el-button style="float: right; padding: 3px 0" type="text" @click="saveChart('proportionChart')"> <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="saveChart('proportionChart')">-->
保存图片 <!-- 保存图片-->
</el-button> <!-- </el-button>-->
</div> <!-- </div>-->
<div ref="proportionChart" style="height: 300px; width: 100%"></div> <!-- <div ref="proportionChart" style="height: 300px; width: 100%"></div>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
<!-- 变化率趋势 --> <!-- &lt;!&ndash; 变化率趋势 &ndash;&gt;-->
<el-col :span="12"> <!-- <el-col :span="12">-->
<el-card> <!-- <el-card>-->
<div slot="header"> <!-- <div slot="header">-->
<span>变化率趋势</span> <!-- <span>变化率趋势</span>-->
<el-button style="float: right; padding: 3px 0" type="text" @click="saveChart('rateChart')"> <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="saveChart('rateChart')">-->
保存图片 <!-- 保存图片-->
</el-button> <!-- </el-button>-->
</div> <!-- </div>-->
<div ref="rateChart" style="height: 300px; width: 100%"></div> <!-- <div ref="rateChart" style="height: 300px; width: 100%"></div>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
</el-row> <!-- </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> </div>
</template> </template>
<script> <script>
import * as echarts from 'echarts' 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 { export default {
name: "YoyAnalysisReport", name: 'YoyAnalysisReport',
components: { Treeselect },
data() { data() {
return { return {
// 筛选表单 // 筛选表单
filterForm: { filterForm: {
area: '', energyType: 2,
department: '', dateType: 10,
circuit: '', workUnitCode: null
pipeline: '',
energyType: 'electricity',
timeDimension: 'day',
timeRange: [],
compareType: 'yoy'
}, },
// 关键指标 timeRange: [],
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: {}, charts: {},
// 总览模块模拟数据 dateTypeList: [
overviewPieData: [ { dateTypeCode: 10, dateTypeName: '日' },
{ value: 800, name: '电' }, { dateTypeCode: 7, dateTypeName: '月' },
{ value: 500, name: '水' }, { dateTypeCode: 4, dateTypeName: '年' }
{ value: 300, name: '蒸汽' },
{ value: 200, name: '压缩空气' },
{ value: 100, name: '氮气' }
], ],
overviewBarData: [120, 800, 3200], // 能源类型选项
overviewBarLabels: ['本日', '本周', '本月'], energyTypeList: [],
overviewGaugeData: [ workUnitOptions: [],
{ value: 320, name: '电力峰值(kW)' }, dataList: {
{ value: 120, name: '蒸汽流量峰值(t/h)' } // 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],
compareStackBarLabels: ['本日','本周','本月'], // rate: [9.1, 5.6, 6.3, 4.7, 5.9, 4.5, 5.0],
compareStackBarData: { // thisSum: 1320,
water: [12, 80, 320], // contrastSum: 1620
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]
} }
}; }
},
created() {
this.getWorkUnitTreesMethod()
getBaseEnergyTypeList({}).then(response => {
this.energyTypeList = response.data
})
}, },
mounted() { mounted() {
this.initFilterForm(); this.initFilterForm()
this.initAnalysisCharts(); this.initAnalysisCharts()
this.initOverviewCharts();
this.initCompareCharts();
this.loadTableData();
}, },
methods: { methods: {
// 初始化筛选表单 // 初始化筛选表单
initFilterForm() { initFilterForm() {
const now = new Date(); const nowDate = parseTime(new Date(), '{y}-{m}-{d}')
const startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000); this.timeRange = [
this.filterForm.timeRange = [ nowDate + ' 00:00:00',
startDate.toISOString().slice(0, 19).replace('T', ' '), nowDate + ' 23:59:59'
now.toISOString().slice(0, 19).replace('T', ' ') ]
];
}, },
// 查询数据 // 查询数据
handleSearch() { handleSearch() {
this.loadTableData(); this.updateCharts()
this.updateCharts();
}, },
// 重置筛选条件 // 重置筛选条件
handleReset() { handleReset() {
this.filterForm = { this.resetForm('queryForm')
area: '', this.handleSearch()
department: '',
circuit: '',
pipeline: '',
energyType: 'electricity',
timeDimension: 'day',
timeRange: this.filterForm.timeRange,
compareType: 'yoy'
};
}, },
// 导出数据 /** 转换统计单元信息数据结构 */
handleExport() { workUnitOptionsNormalizer(node) {
this.$message.success('导出功能开发中...'); 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) { saveChart(chartName) {
if (this.charts[chartName]) { if (this.charts[chartName]) {
const url = this.charts[chartName].getDataURL(); const url = this.charts[chartName].getDataURL()
const link = document.createElement('a'); const link = document.createElement('a')
link.download = `${chartName}_${new Date().getTime()}.png`; link.download = `${chartName}_${new Date().getTime()}.png`
link.href = url; link.href = url
link.click(); 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() { initAnalysisCharts() {
this.$nextTick(() => { this.$nextTick(() => {
this.initTrendChart(); this.initTrendChart()
this.initTotalChart(); this.initTotalChart()
this.initProportionChart(); })
this.initRateChart();
});
}, },
// 趋势对比图 // 趋势对比图
initTrendChart() { initTrendChart() {
const chart = echarts.init(this.$refs.trendChart); const chart = echarts.init(this.$refs.trendChart)
this.charts.trendChart = chart; this.charts.trendChart = chart
const option = { const option = {
tooltip: { tooltip: {
@ -451,7 +241,7 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'] data: this.dataList.time
}, },
yAxis: [ yAxis: [
{ {
@ -472,27 +262,27 @@ export default {
{ {
name: '本期能耗', name: '本期能耗',
type: 'bar', type: 'bar',
data: [120, 132, 101, 134, 90, 230, 210] data: this.dataList.thisData
}, },
{ {
name: '对比期能耗', name: '对比期能耗',
type: 'bar', type: 'bar',
data: [110, 125, 95, 128, 85, 220, 200] data: this.dataList.contrastData
}, },
{ {
name: '变化率', name: '变化率',
type: 'line', type: 'line',
yAxisIndex: 1, 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() { initTotalChart() {
const chart = echarts.init(this.$refs.totalChart); const chart = echarts.init(this.$refs.totalChart)
this.charts.totalChart = chart; this.charts.totalChart = chart
const option = { const option = {
tooltip: { tooltip: {
@ -508,8 +298,8 @@ export default {
type: 'pie', type: 'pie',
radius: '50%', radius: '50%',
data: [ data: [
{ value: 1048, name: '本期能耗' }, { value: this.dataList.thisSum, name: '本期能耗' },
{ value: 735, name: '对比期能耗' } { value: this.dataList.contrastSum, name: '对比期能耗' }
], ],
emphasis: { emphasis: {
itemStyle: { itemStyle: {
@ -520,13 +310,13 @@ export default {
} }
} }
] ]
}; }
chart.setOption(option); chart.setOption(option)
}, },
// 能耗占比对比 // 能耗占比对比
initProportionChart() { initProportionChart() {
const chart = echarts.init(this.$refs.proportionChart); const chart = echarts.init(this.$refs.proportionChart)
this.charts.proportionChart = chart; this.charts.proportionChart = chart
const option = { const option = {
tooltip: { tooltip: {
@ -566,170 +356,27 @@ export default {
data: [20, 40, 25, 15] 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() { updateCharts() {
// 这里可以根据筛选条件更新图表数据 this.loading = true
this.$message.success('图表数据已更新'); this.filterForm.beginCollectTime = null
}, this.filterForm.endCollectTime = null
getLabel(type) { if (this.timeRange != null && this.timeRange !== '') {
const map = { this.filterForm.beginCollectTime = this.timeRange[0]
water: "水", this.filterForm.endCollectTime = this.timeRange[1]
electricity: "电", }
steam: "蒸汽", yoyAnalysisReport(this.filterForm).then(response => {
air: "压缩空气", this.dataList = response.data
nitrogen: "氮气" console.log(this.dataList)
}; this.initTrendChart()
return map[type] || type; this.initTotalChart()
}, this.loading = false
// 1. 总览模块 this.$message.success('图表数据已更新')
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 }
]
});
} }
} }
} }
@ -738,54 +385,23 @@ export default {
.energy-dashboard { .energy-dashboard {
padding: 20px; padding: 20px;
} }
.filter-section { .filter-section {
background: #f5f7fa; background: #f5f7fa;
} }
.visualization-section .el-card { .visualization-section .el-card {
min-height: 350px; min-height: 350px;
} }
.analysis-section .el-card { .analysis-section .el-card {
min-height: 200px; min-height: 200px;
} }
.table-section .el-card { .table-section .el-card {
min-height: 400px; 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 { .dashboard-overview .el-card {
min-height: 300px; min-height: 300px;
} }

Write Preview
Loading…
Cancel
Save