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 = `
${axisValue}日
`; + 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); } }, });