|
@@ -31,7 +31,6 @@
|
|
</div>
|
|
</div>
|
|
<div class="first-content">
|
|
<div class="first-content">
|
|
<div>
|
|
<div>
|
|
- <SubTitle title="能耗统计"/>
|
|
|
|
<!-- 图表容器 -->
|
|
<!-- 图表容器 -->
|
|
<BaseChart width="100%" height="380px" :option="powerUseOptions"/>
|
|
<BaseChart width="100%" height="380px" :option="powerUseOptions"/>
|
|
</div>
|
|
</div>
|
|
@@ -115,7 +114,7 @@ import BaseChart from '@/components/BaseChart'
|
|
import SubTitle from '@/components/SubTitle'
|
|
import SubTitle from '@/components/SubTitle'
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
-import {dateFormat, getDayAgoDate} from '@/utils'
|
|
|
|
|
|
+import {array2Map, dateFormat, getDayAgoDate} from '@/utils'
|
|
import dayjs from 'dayjs'
|
|
import dayjs from 'dayjs'
|
|
import {listByFacs} from "@/api/device/elecMeterH";
|
|
import {listByFacs} from "@/api/device/elecMeterH";
|
|
import {DateTool} from "@/utils/DateTool";
|
|
import {DateTool} from "@/utils/DateTool";
|
|
@@ -176,7 +175,12 @@ export default {
|
|
}
|
|
}
|
|
]
|
|
]
|
|
},
|
|
},
|
|
- pieDateRange: [dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00), dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59)],
|
|
|
|
|
|
+ pieDateRange: [
|
|
|
|
+ dayjs().format(DateTool.DateFormat.YYYY_MM_DD_00_00_00),
|
|
|
|
+ dayjs().format(DateTool.DateFormat.YYYY_MM_DD_23_59_59),
|
|
|
|
+ DateTool.lastXDay(1, DateTool.DateFormat.YYYY_MM_DD_00_00_00),
|
|
|
|
+ DateTool.lastXDay(1, DateTool.DateFormat.YYYY_MM_DD_23_59_59)
|
|
|
|
+ ],
|
|
// 表单参数
|
|
// 表单参数
|
|
areaOptions: [],
|
|
areaOptions: [],
|
|
dateRange: [`${lastWeek} 00:00:00`, `${nowDay} 23:59:59`],
|
|
dateRange: [`${lastWeek} 00:00:00`, `${nowDay} 23:59:59`],
|
|
@@ -201,6 +205,7 @@ export default {
|
|
powerUseOptions() {
|
|
powerUseOptions() {
|
|
const xAxisData = this.sumBySubCategoryChartOption.map(item => item.name);
|
|
const xAxisData = this.sumBySubCategoryChartOption.map(item => item.name);
|
|
const yData2 = this.sumBySubCategoryChartOption.map(item => item.value);
|
|
const yData2 = this.sumBySubCategoryChartOption.map(item => item.value);
|
|
|
|
+ const ratios = this.sumBySubCategoryChartOption.map(item => item.ratio);
|
|
return {
|
|
return {
|
|
toolbox: {
|
|
toolbox: {
|
|
itemGap: 10,
|
|
itemGap: 10,
|
|
@@ -217,21 +222,45 @@ export default {
|
|
formatter: (params) => {
|
|
formatter: (params) => {
|
|
var relVal = params[0].name
|
|
var relVal = params[0].name
|
|
for (var i = 0, l = params.length; i < l; i++) {
|
|
for (var i = 0, l = params.length; i < l; i++) {
|
|
- const unit = 'kW·h'
|
|
|
|
|
|
+ const unit = i === 0 ? 'kW·h' : "%"
|
|
relVal = `${relVal}<br/>${params[i].marker}${params[i].seriesName} ${params[i].value}${unit}`
|
|
relVal = `${relVal}<br/>${params[i].marker}${params[i].seriesName} ${params[i].value}${unit}`
|
|
}
|
|
}
|
|
return relVal
|
|
return relVal
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- legend: {},
|
|
|
|
|
|
+ legend: {
|
|
|
|
+ data: ["设施能耗", "同比"],
|
|
|
|
+ },
|
|
xAxis: {
|
|
xAxis: {
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
type: 'category',
|
|
type: 'category',
|
|
data: xAxisData
|
|
data: xAxisData
|
|
},
|
|
},
|
|
- yAxis: {
|
|
|
|
- name: 'kW·h',
|
|
|
|
- type: 'value',
|
|
|
|
|
|
+ yAxis: [{
|
|
|
|
+ type: "value",
|
|
|
|
+ name: "kW·h",
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: false,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#334E5E'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
},
|
|
},
|
|
|
|
+ {
|
|
|
|
+ type: "value",
|
|
|
|
+ name: "%",
|
|
|
|
+ position: "right",
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: false
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ show: true,
|
|
|
|
+ formatter: "{value} %", //右侧Y轴文字显示
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
name: '能耗',
|
|
name: '能耗',
|
|
@@ -243,7 +272,26 @@ export default {
|
|
valueAnimation: true, // 开启动画显示数值
|
|
valueAnimation: true, // 开启动画显示数值
|
|
formatter: '{c}' // 格式化显示内容,{c} 表示数据值
|
|
formatter: '{c}' // 格式化显示内容,{c} 表示数据值
|
|
}
|
|
}
|
|
- },]
|
|
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: "同比",
|
|
|
|
+ type: "line",
|
|
|
|
+ yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
|
|
|
|
+ smooth: true, //平滑曲线显示
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: (params) => {
|
|
|
|
+ return params.value > 0 ? '#F44336' : '#4CAF50'; // 绿色表示增长,红色表示下降
|
|
|
|
+ },
|
|
|
|
+ borderColor: "#000",
|
|
|
|
+ borderWidth: 3
|
|
|
|
+ },
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: (params) => {
|
|
|
|
+ return params.value > 0 ? '#F44336' : '#4CAF50';
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ data: ratios
|
|
|
|
+ }]
|
|
};
|
|
};
|
|
},
|
|
},
|
|
powerLineOptions() {
|
|
powerLineOptions() {
|
|
@@ -524,24 +572,32 @@ export default {
|
|
this.selectedTimeRange = rangeType;
|
|
this.selectedTimeRange = rangeType;
|
|
let start = dayjs();
|
|
let start = dayjs();
|
|
let end = dayjs();
|
|
let end = dayjs();
|
|
-
|
|
|
|
|
|
+ let compareStart = dayjs();
|
|
|
|
+ let compareEnd = dayjs();
|
|
if (rangeType === 'day') {
|
|
if (rangeType === 'day') {
|
|
// 日:当前日期的 00:00:00 到 23:59:59
|
|
// 日:当前日期的 00:00:00 到 23:59:59
|
|
start = start.startOf('day');
|
|
start = start.startOf('day');
|
|
end = end.endOf('day');
|
|
end = end.endOf('day');
|
|
|
|
+ compareStart = DateTool.lastXDay(1, DateTool.DateFormat.YYYY_MM_DD_00_00_00)
|
|
|
|
+ compareEnd = DateTool.lastXDay(1, DateTool.DateFormat.YYYY_MM_DD_23_59_59)
|
|
} else if (rangeType === 'month') {
|
|
} else if (rangeType === 'month') {
|
|
// 月:当前月份的第一天 00:00:00 到 最后一天 23:59:59
|
|
// 月:当前月份的第一天 00:00:00 到 最后一天 23:59:59
|
|
start = start.date(1).hour(0).minute(0).second(0);
|
|
start = start.date(1).hour(0).minute(0).second(0);
|
|
- end = end.endOf('month').hour(23).minute(59).second(59);
|
|
|
|
|
|
+ end = end.hour(23).minute(59).second(59);
|
|
|
|
+ compareStart = DateTool.lastMonthStartDay(DateTool.DateFormat.YYYY_MM_DD_00_00_00)
|
|
|
|
+ compareEnd = DateTool.lastXMonth(1, DateTool.DateFormat.YYYY_MM_DD_23_59_59)
|
|
} else if (rangeType === 'year') {
|
|
} else if (rangeType === 'year') {
|
|
// 年:当前年份的第一天 00:00:00 到 最后一天 23:59:59
|
|
// 年:当前年份的第一天 00:00:00 到 最后一天 23:59:59
|
|
start = start.startOf('year');
|
|
start = start.startOf('year');
|
|
- end = end.endOf('year').hour(23).minute(59).second(59);
|
|
|
|
|
|
+ end = end.hour(23).minute(59).second(59);
|
|
|
|
+ compareStart = DateTool.lastYearStartDay(DateTool.DateFormat.YYYY_MM_DD_00_00_00)
|
|
|
|
+ compareEnd = DateTool.lastXMonth(12, DateTool.DateFormat.YYYY_MM_DD_23_59_59)
|
|
}
|
|
}
|
|
- this.pieDateRange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss')];
|
|
|
|
|
|
+ this.pieDateRange = [start.format('YYYY-MM-DD HH:mm:ss'), end.format('YYYY-MM-DD HH:mm:ss'), compareStart, compareEnd];
|
|
this.getSumBySubCategoryH(); // 重新获取数据
|
|
this.getSumBySubCategoryH(); // 重新获取数据
|
|
},
|
|
},
|
|
- getSumBySubCategoryH() {
|
|
|
|
|
|
+ async getSumBySubCategoryH() {
|
|
|
|
+ const [, , compareStart, compareEnd] = this.pieDateRange
|
|
const params = {
|
|
const params = {
|
|
startRecTime: dayjs(this.pieDateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
|
|
startRecTime: dayjs(this.pieDateRange[0]).format('YYYY-MM-DD HH:mm:ss'),
|
|
endRecTime: dayjs(this.pieDateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
|
|
endRecTime: dayjs(this.pieDateRange[1]).format('YYYY-MM-DD HH:mm:ss'),
|
|
@@ -549,19 +605,35 @@ export default {
|
|
meterCls: 45,
|
|
meterCls: 45,
|
|
facsCategory: this.queryParams.facsCategory,
|
|
facsCategory: this.queryParams.facsCategory,
|
|
};
|
|
};
|
|
- listByFacs(params).then(response => {
|
|
|
|
- this.processDataForChart(response.data); // 处理数据并生成图表配置
|
|
|
|
- })
|
|
|
|
|
|
+ const {data} = await listByFacs(params)
|
|
|
|
|
|
|
|
+ const {data: compare} = await listByFacs({
|
|
|
|
+ ...params,
|
|
|
|
+ startRecTime: compareStart,
|
|
|
|
+ endRecTime: compareEnd,
|
|
|
|
+ })
|
|
|
|
+ const objMap = array2Map(compare, "objName")
|
|
|
|
+ this.processDataForChart(data, objMap);
|
|
},
|
|
},
|
|
- processDataForChart(data) {
|
|
|
|
|
|
+ processDataForChart(data, compare) {
|
|
this.totalElecQuantity = data.reduce((sum, item) => sum + (item.quantity || 0), 0);
|
|
this.totalElecQuantity = data.reduce((sum, item) => sum + (item.quantity || 0), 0);
|
|
// 处理数据,生成图表配置
|
|
// 处理数据,生成图表配置
|
|
- this.sumBySubCategoryChartOption = data.map(item => ({
|
|
|
|
- name: item.objName,
|
|
|
|
- value: item.quantity || 0,
|
|
|
|
- percent: ((item.quantity || 0) / this.totalElecQuantity * 100).toFixed(2),
|
|
|
|
- }))
|
|
|
|
|
|
+ this.sumBySubCategoryChartOption = data.map(item => {
|
|
|
|
+ let ratio = 0;
|
|
|
|
+ let compareDataItem = 0;
|
|
|
|
+ let thisDataItem = item.quantity || 0;
|
|
|
|
+ const compareData = compare[item.objName]
|
|
|
|
+ if (compareData && compareData.quantity) {
|
|
|
|
+ compareDataItem = compareData.quantity
|
|
|
|
+ }
|
|
|
|
+ ratio = ((thisDataItem - compareDataItem) / compareDataItem * 100).toFixed(1)
|
|
|
|
+ return {
|
|
|
|
+ name: item.objName,
|
|
|
|
+ value: thisDataItem,
|
|
|
|
+ ratio: ratio,
|
|
|
|
+ percent: ((item.quantity || 0) / this.totalElecQuantity * 100).toFixed(2),
|
|
|
|
+ }
|
|
|
|
+ })
|
|
},
|
|
},
|
|
}
|
|
}
|
|
}
|
|
}
|