|
|
@@ -2,10 +2,24 @@
|
|
|
<div class="app-container">
|
|
|
<el-tabs v-model="activeName" @tab-click="tabClick">
|
|
|
<el-tab-pane label="总览" name="summery">
|
|
|
+ <div class="First">
|
|
|
+ <div class="time-range-buttons">
|
|
|
+ <el-button
|
|
|
+ :class="{ 'is-active': selectedTimeRange === 'day' }"
|
|
|
+ @click="changeTimeRange('day')">日</el-button>
|
|
|
+ <el-button
|
|
|
+ :class="{ 'is-active': selectedTimeRange === 'month' }"
|
|
|
+ @click="changeTimeRange('month')">月</el-button>
|
|
|
+ <el-button
|
|
|
+ :class="{ 'is-active': selectedTimeRange === 'year' }"
|
|
|
+ @click="changeTimeRange('year')">年</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 图表容器 -->
|
|
|
+ <div ref="sumBySubCategoryChart" style="height: 400px;" class="chart-container"/>
|
|
|
+ </div>
|
|
|
|
|
|
</el-tab-pane>
|
|
|
-
|
|
|
- <el-tab-pane v-for="item in facsCategoryOptions" :key="item.code" :label="item.name" :name="item.code">
|
|
|
+ <el-tab-pane v-for="item in facsCategoryOptions" :key="item.code" :label="item.name" :name="item.code" >
|
|
|
<el-col :span="4" :xs="24">
|
|
|
<div class="head-container">
|
|
|
<el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small"
|
|
|
@@ -30,27 +44,45 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="container-block">
|
|
|
- <BaseChart width="100%" height="300px" :option="barChartOptions"/>
|
|
|
- </div>
|
|
|
- <div class="container-block">
|
|
|
- <div class="ctl-container">
|
|
|
+ <div class="ctl-container" style="display: flex; justify-content: flex-end;">
|
|
|
<el-select v-model="objCode" placeholder="选择设施" clearable @visible-change="handleObjSelectClick" @change="getList">
|
|
|
<el-option v-for="item in objOptions"
|
|
|
:label="item.facsName"
|
|
|
:value="item.facsCode"
|
|
|
- :key="item.facsCode"
|
|
|
- />
|
|
|
+ :key="item.facsCode"/>
|
|
|
|
|
|
</el-select>
|
|
|
<el-date-picker v-model="dateRange" type="datetimerange" @change="getList" :picker-options="pickerOptions"
|
|
|
value-format="yyyy-MM-dd hh:mm:ss" range-separator="至" start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
- align="right"
|
|
|
- >
|
|
|
+ align="right">
|
|
|
</el-date-picker>
|
|
|
</div>
|
|
|
-
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table v-loading="loading" :data="sumByFacsList" style="width: 100%; margin-top: 10px" >
|
|
|
+ <el-table-column label="设施编码" align="center" prop="objCode">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.objCode }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="设施名称" align="center" prop="objName">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.objName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="用电量(kW·h)" align="center" prop="elecQuantity">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span>{{ scope.row.elecQuantity }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!--柱状图-->
|
|
|
+ <div class="container-block" style="margin-top: 20px;">
|
|
|
+ <BaseChart width="100%" height="300px" :option="barChartOptions"/>
|
|
|
+ </div>
|
|
|
+ <!--表格-->
|
|
|
<el-table v-loading="loading" :data="hList">
|
|
|
<el-table-column label="设施" align="center" prop="objName">
|
|
|
<template slot-scope="scope">
|
|
|
@@ -86,7 +118,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { listHSum } from '@/api/mgr/elecUseH'
|
|
|
+import * as echarts from 'echarts/core';
|
|
|
+import {listHSum, sumByFacsH, sumBySubCategoryH} from '@/api/mgr/elecUseH'
|
|
|
import { getFacsCategorygetByCode } from '@/api/basecfg/emsfacs'
|
|
|
import { areaWithFacsCategoryAsTree } from '@/api/basecfg/area'
|
|
|
import { listAllFacs } from '@/api/basecfg/emsfacs'
|
|
|
@@ -121,12 +154,15 @@ export default {
|
|
|
total: 0,
|
|
|
// 用能计量-小时表格数据
|
|
|
hList: [],
|
|
|
+ //查能耗
|
|
|
+ sumByFacsList:[],
|
|
|
// 弹出层标题
|
|
|
title: '',
|
|
|
// 是否显示弹出层
|
|
|
open: false,
|
|
|
facsCategory: undefined,
|
|
|
facsSubCategory: undefined,
|
|
|
+
|
|
|
// 区域名称
|
|
|
areaName: undefined,
|
|
|
selectedLabel: '全部',
|
|
|
@@ -136,6 +172,12 @@ export default {
|
|
|
},
|
|
|
areaOptions: [],
|
|
|
facsCategoryOptions: [],
|
|
|
+ sumBySubCategoryChartOption: {},
|
|
|
+ // 存储图表配置的变量
|
|
|
+ selectedTimeRange: 'day',
|
|
|
+ chartInstance: null,
|
|
|
+ // 用于存储 ECharts 实例
|
|
|
+ totalElecQuantity: 0,
|
|
|
objOptions: [],
|
|
|
objCode: undefined,
|
|
|
dateRange: [dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00), dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59)],
|
|
|
@@ -202,6 +244,8 @@ export default {
|
|
|
this.getFacsCategory(this.facsCategory)
|
|
|
this.getAreaTree(this.facsCategory, this.facsSubCategory)
|
|
|
this.getList()
|
|
|
+ this.getsumByFacsH()
|
|
|
+ this.getSumBySubCategoryH();
|
|
|
},
|
|
|
computed: {
|
|
|
barChartOptions() {
|
|
|
@@ -244,12 +288,138 @@ export default {
|
|
|
getList() {
|
|
|
this.loading = true
|
|
|
this.queryParams.objCode = this.objCode
|
|
|
- listHSum(this.queryParams).then(response => {
|
|
|
- this.hList = response.rows
|
|
|
- this.total = response.total
|
|
|
- this.loading = false
|
|
|
+ listHSum(this.queryParams).then(response => {
|
|
|
+ this.hList = response.rows
|
|
|
+ this.total = response.total
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ this.getsumByFacsH()
|
|
|
+ },
|
|
|
+ /**根据设施查询能耗统计 */
|
|
|
+ getsumByFacsH(){
|
|
|
+ const params = {
|
|
|
+ startRecTime: dayjs(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ endRecTime: dayjs(this.dateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ areaCode: this.queryParams.areaCode,
|
|
|
+ facsSubCategory: this.activeName,
|
|
|
+ objCode:this.queryParams.objCode
|
|
|
+ };
|
|
|
+ sumByFacsH(params).then(response => {
|
|
|
+ this.sumByFacsList = response.data
|
|
|
+ console.log("能耗",this.sumByFacsList)
|
|
|
+
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
+ /**时间范围切换按钮点击事件处理器*/
|
|
|
+ changeTimeRange(rangeType) {
|
|
|
+ this.selectedTimeRange = rangeType;
|
|
|
+ let start = dayjs();
|
|
|
+ let end = dayjs();
|
|
|
+
|
|
|
+ if (rangeType === 'day') {
|
|
|
+ // 日：当前日期的 00:00:00 到 23:59:59
|
|
|
+ start = start.startOf('day');
|
|
|
+ end = end.endOf('day');
|
|
|
+ } else if (rangeType === 'month') {
|
|
|
+ // 月：当前月份的第一天 00:00:00 到 最后一天 23:59:59
|
|
|
+ start = start.date(1).hour(0).minute(0).second(0);
|
|
|
+ end = end.endOf('month').hour(23).minute(59).second(59);
|
|
|
+ } else if (rangeType === 'year') {
|
|
|
+ // 年：当前年份的第一天 00:00:00 到 最后一天 23:59:59
|
|
|
+ start = start.startOf('year');
|
|
|
+ end = end.endOf('year').hour(23).minute(59).second(59);
|
|
|
+ }
|
|
|
+ this.dateRange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
|
|
|
+ this.getSumBySubCategoryH(); // 重新获取数据
|
|
|
+ },
|
|
|
+
|
|
|
+ /**总览饼图*/
|
|
|
+ getSumBySubCategoryH(){
|
|
|
+ const params = {
|
|
|
+ startRecTime: dayjs(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ endRecTime: dayjs(this.dateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ areaCode: this.queryParams.areaCode,
|
|
|
+ };
|
|
|
+ sumBySubCategoryH(params).then(response => {
|
|
|
+ this.processDataForChart(response.data); // 处理数据并生成图表配置
|
|
|
+ console.log("pie图",response.data)
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ processDataForChart(data) {
|
|
|
+ this.totalElecQuantity = data.reduce((sum, item) => sum + (item.elecQuantity || 0), 0);
|
|
|
+ // 处理数据，生成图表配置
|
|
|
+ const seriesData = data.map(item => ({
|
|
|
+ name: item.objName,
|
|
|
+ value: item.elecQuantity,
|
|
|
+ percent: ((item.elecQuantity || 0) / this.totalElecQuantity * 100).toFixed(2),
|
|
|
+ subentry: item.subentry.map(subItem => ({
|
|
|
+ name: subItem.objName,
|
|
|
+ value: subItem.elecQuantity
|
|
|
+ }))
|
|
|
+ }));
|
|
|
+
|
|
|
+ // 设置图表配置
|
|
|
+ this.sumBySubCategoryChartOption = {
|
|
|
+ title: {
|
|
|
+ text: '总览能耗',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: function (params) {
|
|
|
+ const { name, value, percent } = params;
|
|
|
+ const subentries = params.data.subentry;
|
|
|
+ let tooltipContent = `<div><h4>${name}</h4><p>${value} (${percent}%)</p><ul>`;
|
|
|
+ subentries.forEach(subItem => {
|
|
|
+ tooltipContent += `<li>${subItem.name}: ${subItem.value} kW·h</li>`;
|
|
|
+ });
|
|
|
+ tooltipContent += `</ul></div>`;
|
|
|
+ return tooltipContent;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'left',
|
|
|
+ data: data.map(item => item.objName)
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '能耗',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '55%'],
|
|
|
+ data: seriesData,
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)',}
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'outside',
|
|
|
+ formatter: '{b}\n{d}%',
|
|
|
+ },
|
|
|
+
|
|
|
+ labelLine: {
|
|
|
+ show: true,
|
|
|
+ length: 30, // 标签线长度
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ type: 'dashed', // 设置虚线样式
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ // 渲染图表
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const chart = echarts.init(this.$refs.sumBySubCategoryChart);
|
|
|
+ chart.setOption(this.sumBySubCategoryChartOption);
|
|
|
+ });
|
|
|
+ },
|
|
|
async getFacsCategory(code) {
|
|
|
getFacsCategorygetByCode(code).then(response => {
|
|
|
this.facsCategoryOptions = response.data.subtypeList
|
|
|
@@ -293,6 +463,7 @@ export default {
|
|
|
},
|
|
|
handleObjSelectClick() {
|
|
|
this.getFacsObj(this.queryParams.areaCode, this.facsCategory, this.activeName)
|
|
|
+ this.getsumByFacsH();
|
|
|
},
|
|
|
// 筛选节点
|
|
|
filterNode(value, data) {
|
|
|
@@ -317,3 +488,22 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style lang="css" scoped>
|
|
|
+
|
|
|
+.chart-container {
|
|
|
+ position: fixed;
|
|
|
+ top: 30px;
|
|
|
+ left: 20px;
|
|
|
+ width: 50%;
|
|
|
+ height: 350px;
|
|
|
+ z-index: 1000; /* 确保图表在其他内容之上 */
|
|
|
+}
|
|
|
+
|
|
|
+.is-active {
|
|
|
+ background-color: #409eff;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
|
|
+}
|
