diff --git a/src/views/dashboard/common/model.ts b/src/views/dashboard/common/model.ts
index e216759..43d6c75 100644
--- a/src/views/dashboard/common/model.ts
+++ b/src/views/dashboard/common/model.ts
@@ -27,7 +27,7 @@ export const monthEnergyUsageTrend = (data = [], unit?: string): IObject => {
const [first] = params;
const { axisValue } = first;
- let str = `
`;
+ let str = `
${new dateService().getYear()}年${+new dateService().getMonth()}月${axisValue}日
`;
for (const item of params) {
const { data } = item;
str += `
${
@@ -307,7 +307,7 @@ export const usageRanking = (data = [], unit?: string): IObject => {
const { data } = item;
str += `${
item.marker
- } ${data ?? '--'} ${unit}
`;
+ } ${data ?? '--'} ${''} `;
}
return str + '
';
}
@@ -320,7 +320,7 @@ export const usageRanking = (data = [], unit?: string): IObject => {
left: 70,
},
xAxis: {
- name: '(万)',
+ name: '',
type: 'value',
boundaryGap: [0, 0.01],
axisLine: { lineStyle: { color: '#fff' }, show: true },
@@ -344,7 +344,7 @@ export const usageRanking = (data = [], unit?: string): IObject => {
barWidth: 16,
itemStyle: {
normal: {
- color: '#25DDFF',
+ color: '#27A8B1',
barBorderRadius: [10, 10, 10, 10],
},
},
@@ -385,7 +385,7 @@ export const elecPayload = (data = []): IObject => {
const [first] = params;
const { axisValue } = first;
- let str = `
${moment().format('YYYY-MM-DD')} ${axisValue}时
`;
+ let str = `
${moment().format('YYYY年MM月DD')} ${axisValue}时
`;
for (const item of params) {
const { seriesName, data } = item;
str += `
${
@@ -579,3 +579,134 @@ export const yearUsageRank = (data = []): IObject => {
],
};
};
+
+//能耗统计 扇形
+export const energyUsageStatistic = (data = []) => {
+ return {
+ legend: {
+ // data: data.map((v) => ({ name: v.name })),
+ type: 'scroll',
+ bottom: 15,
+ textStyle: {
+ color: '#fff',
+ },
+ },
+ tooltip: {
+ formatter: (params) => {
+ if (params.name !== '') {
+ return (
+ params.marker +
+ params.name +
+ ' : ' +
+ (params.value ?? '--') +
+ ' tce \n' +
+ '(' +
+ params.percent +
+ '%)'
+ );
+ }
+ },
+ },
+ series: [
+ {
+ name: '能耗统计(月)',
+ center: ['50%', '40%'],
+ type: 'pie',
+ radius: '70%',
+ itemStyle: {
+ borderRadius: 8,
+ },
+ data: data.map((v) => ({ name: v.name, value: v.value })),
+ // emphasis: { scale: false },
+ label: {
+ show: true,
+ position: 'inside', // 文字位置:'inside'(内部)、'outside'(外部)
+ color: '#fff', // 文字颜色
+ fontSize: 12, // 文字大小: '{b}' + ' ' + '{c}',
+ formatter: (params) => {
+ if (params.name !== '') {
+ return (
+ params.name +
+ ' : ' +
+ (params.value ?? '--') +
+ ' tce \n' +
+ '(' +
+ params.percent +
+ '%)'
+ );
+ }
+ },
+ },
+ },
+ ],
+ };
+};
+
+//光伏用能(月)
+export const photovoltaicEnergyUse = (data = [], unit?: string) => {
+ const length = new dateService().getDateCountByMonth()[+new dateService().getMonth()];
+ const xAxisData = Array.from({ length }, (x, i) => i + 1);
+ const seriesData = [];
+ if (utilService.isValidArray(data)) {
+ for (const day of xAxisData) {
+ let val;
+ for (const item of data) {
+ if (day === +moment(item.date).format('D')) {
+ val = item.value;
+ }
+ }
+ seriesData.push(val);
+ }
+ }
+
+ return {
+ tooltip: {
+ trigger: 'axis',
+ formatter: (params: Array) => {
+ if (utilService.isValidArray(params)) {
+ const [first] = params;
+ const { axisValue } = first;
+
+ let str = `${new dateService().getYear()}年${+new dateService().getMonth()}月${axisValue}日
`;
+ for (const item of params) {
+ const { data } = item;
+ str += `
${
+ item.marker
+ } ${data ?? '--'} ${unit}
`;
+ }
+ return str + '
';
+ }
+ return '';
+ },
+ },
+ grid: {
+ bottom: 45,
+ top: 30,
+ left: 60,
+ },
+ xAxis: {
+ name: '(日)',
+ type: 'category',
+ data: xAxisData,
+ axisLine: { lineStyle: { color: '#fff' } },
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: { lineStyle: { color: '#fff' }, show: true },
+ splitLine: { lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.3)' } },
+ },
+ series: [
+ {
+ color: '#27A8B1',
+ data: seriesData,
+ type: 'line',
+ smooth: true,
+ lineStyle: { width: 3 },
+ emphasis: {
+ focus: 'series',
+ },
+ showSymbol: true,
+ },
+ ],
+ };
+};
diff --git a/src/views/dashboard/comp/pop.vue b/src/views/dashboard/comp/pop.vue
index 6fc660d..f633897 100644
--- a/src/views/dashboard/comp/pop.vue
+++ b/src/views/dashboard/comp/pop.vue
@@ -101,7 +101,7 @@ export default defineComponent({
&:first-child {
b {
- font-size: 20px !important;
+ // font-size: 20px !important;
}
}
}
diff --git a/src/views/dashboard/main.vue b/src/views/dashboard/main.vue
index d899fab..b32e82e 100644
--- a/src/views/dashboard/main.vue
+++ b/src/views/dashboard/main.vue
@@ -52,7 +52,7 @@ import timeCountHooks from '@/hooks/time-count';
import { useFetch } from '@/hooks/fetch';
import utilService from '@/service/utilService';
import Chart from '@/components/chart.vue';
-import { costStatistic, elecPayload, monthEnergyUsageTrend, usageRanking, energyUsageDistribution, yearUsageRank } from './common/model';
+import { costStatistic, elecPayload, monthEnergyUsageTrend, usageRanking, energyUsageDistribution, yearUsageRank, energyUsageStatistic, photovoltaicEnergyUse } from './common/model';
import { IObject } from '@/types/interface';
import moment from 'moment';
import toolHooks from '@/hooks/tool';
@@ -129,10 +129,16 @@ export default defineComponent({
],
},
{
- title: '年度用能排行',
comp: 'chart',
- option: yearUsageRank(),
+ title: '月度用能排行',
+ option: usageRanking(),
+ unit: 'kWh',
},
+ // {
+ // title: '年度用能排行',
+ // comp: 'chart',
+ // option: yearUsageRank(),
+ // },
{
comp: 'chart',
title: '当日电力负荷',
@@ -144,22 +150,20 @@ export default defineComponent({
{
comp: 'chart',
title: '能耗统计(月)',
- option: costStatistic(),
- unit: '',
+ option: energyUsageStatistic(),
+ unit: 'tce',
},
{
comp: 'chart',
- title: '用能排行(月)',
- option: usageRanking(),
+ title: '光伏用能(月)',
+ option: photovoltaicEnergyUse(),
unit: 'kWh',
- select: true,
},
{
- title: '当月用能趋势',
+ title: '当年用能趋势',
comp: 'chart',
option: monthEnergyUsageTrend(),
unit: 'kWh',
- select: true,
},
],
bottom: {
@@ -174,37 +178,6 @@ export default defineComponent({
const u = state.dataForm.codeMap[c];
state.left[2].unit = u;
state.right[1].unit = u;
-
- //当月用能趋势
- useFetch('/board/monthEnergy/analyse', {
- data: {
- month: moment().format('YYYY-MM'),
- type,
- },
- cb: (res: any) => {
- if (utilService.isValidObject(res) && utilService.isValidArray(res.currentMonthData)) {
- const d = res.currentMonthData;
- const c = state.dataForm.code;
- const u = state.dataForm.codeMap[c];
- state.right[2].option = monthEnergyUsageTrend(d, u);
- }
- },
- });
-
- //用能排行(月)
- useFetch('/board/monthEnergy/ranking', {
- data: {
- day: moment().format('YYYY-MM'),
- type,
- },
- cb: (res: any) => {
- if (utilService.isValidArray(res)) {
- const c = state.dataForm.code;
- const u = state.dataForm.codeMap[c];
- state.right[1].option = usageRanking(res, u);
- }
- },
- });
};
const fn = () => {
@@ -218,7 +191,9 @@ export default defineComponent({
}
},
});
- //月用能统计
+
+ //左侧
+ //日用能统计
useFetch('/board/eachEnergy', {
cb: (res: any) => {
if (utilService.isValidObject(res)) {
@@ -228,38 +203,73 @@ export default defineComponent({
}
},
});
- //年用能统计
- useFetch('/board/eachEnergyYear', {
+ //月度用能排行
+ useFetch('/board/monthEnergy/ranking', {
+ data: {
+ month: moment().format('YYYY-MM'),
+ type: '电',
+ },
cb: (res: any) => {
- if (utilService.isValidObject(res)) {
- for (const item of state.left[1].data) {
- item.value = res[item.key] ?? '--';
- }
+ if (utilService.isValidArray(res)) {
+ const c = state.dataForm.code;
+ const u = state.dataForm.codeMap[c];
+ state.left[1].option = usageRanking(res, u);
+ }
+ },
+ });
+
+ //当日电力负荷
+ useFetch('/board/qcDayLoad/analyse', {
+ data: {
+ day: moment().format('YYYY-MM-DD'),
+ },
+ cb: (res: any) => {
+ if (utilService.isValidObject(res) && utilService.isValidArray(res.currentMonthData)) {
+ const d = res.currentMonthData;
+ state.left[2].option = elecPayload(d);
}
},
});
- //能耗费用统计
+ //右侧
+ //能耗统计(月)
useFetch('/board/energyCost', {
data: {
day: moment().format('YYYY-MM-DD'),
},
cb: (res: any) => {
if (utilService.isValidArray(res)) {
- state.right[0].option = costStatistic(res);
+ state.right[0].option = energyUsageStatistic(res);
}
},
});
- //当日电力负荷
- useFetch('/board/qcDayLoad/analyse', {
+ //光伏用能(月)
+ useFetch('/board/photovoltaic', {
data: {
day: moment().format('YYYY-MM-DD'),
},
+ cb: (res: any) => {
+ if (utilService.isValidArray(res)) {
+ const c = state.dataForm.code;
+ const u = state.dataForm.codeMap[c];
+ state.right[1].option = photovoltaicEnergyUse(res, u);
+ }
+ },
+ });
+
+ //当年用能趋势
+ useFetch('/board/eachEnergyYear', {
+ data: {
+ day: moment().format('YYYY-MM-DD'),
+ type: '电',
+ },
cb: (res: any) => {
if (utilService.isValidObject(res) && utilService.isValidArray(res.currentMonthData)) {
const d = res.currentMonthData;
- state.left[2].option = elecPayload(d);
+ const c = state.dataForm.code;
+ const u = state.dataForm.codeMap[c];
+ state.right[2].option = monthEnergyUsageTrend(d, u);
}
},
});