From b1b986a516b27d3d26802f5d6d91dfe033e8e8bf Mon Sep 17 00:00:00 2001 From: fengrong Date: Fri, 1 Nov 2024 17:16:10 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=8A=9F=E7=8E=87=E8=B6=8B?= =?UTF-8?q?=E5=8A=BF=E5=8F=91=E7=94=B5=E9=87=8F=E8=B6=8B=E5=8A=BF=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3=E8=B0=83=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/dasadmin/src/api/backend/dashboard.ts | 8 + ui/dasadmin/src/views/backend/dashboard.vue | 322 ++++++++++++++---- .../src/views/backend/home/windMatrix.vue | 2 + 3 files changed, 265 insertions(+), 67 deletions(-) diff --git a/ui/dasadmin/src/api/backend/dashboard.ts b/ui/dasadmin/src/api/backend/dashboard.ts index 3b1d6d57..4345097c 100644 --- a/ui/dasadmin/src/api/backend/dashboard.ts +++ b/ui/dasadmin/src/api/backend/dashboard.ts @@ -1,5 +1,6 @@ import createAxios from '/@/utils/axios' import {addDataType, getDataReturnType, getDataType, getTreeDataReturnType} from "/@/views/backend/auth/org/type"; +import {RequestReturnType} from "/@/views/backend/auth/model/type"; export const url = '/admin/Dashboard/' @@ -32,3 +33,10 @@ export function getWindTurbineMatrixData(params: object = {}) { data: params, }) } +export const getHistoryData = (data: { startTime: number, endTime: number, devices: { deviceId: string, attributes?: string[] }[],interval?:string }) => { + return createAxios>({ + url: '/api/home/getHistoryData', + method: 'post', + data: data, + }) +} diff --git a/ui/dasadmin/src/views/backend/dashboard.vue b/ui/dasadmin/src/views/backend/dashboard.vue index 01538753..17143c77 100644 --- a/ui/dasadmin/src/views/backend/dashboard.vue +++ b/ui/dasadmin/src/views/backend/dashboard.vue @@ -320,7 +320,11 @@ import * as echarts from 'echarts' import { useTemplateRefsList,useEventListener } from '@vueuse/core' import {useI18n} from "vue-i18n"; import WindContent from '/@/views/backend/home/windMatrix.vue' -import {getWindFarmRealData,getWindTurbineMatrixData,getRealValueRangeReq} from "/@/api/backend/dashboard.ts"; +import { + getWindFarmRealData, + getWindTurbineMatrixData, + getHistoryData +} from "/@/api/backend/dashboard.ts"; import {dayjs, ElMessage, TableInstance} from "element-plus"; import { getRealTimeState } from '/@/views/backend/equipment/airBlower/utils.ts' import {useRoute} from "vue-router"; @@ -507,11 +511,11 @@ const state: { pauseWork: false, }) const powerChartRef = ref() -/*const powerChartData: { time: any; values: any } = { +const powerChartData: { time: any; values: any } = { time: {}, values: {}, -}*/ -const powerChartData = { +} +/*const powerChartData = { time: { iGenPower:['00:00','00:05','00:10','00:15'], iTheoreticalPower:['00:00','00:05','00:10','00:15'], @@ -522,7 +526,7 @@ const powerChartData = { iTheoreticalPower:[0,0,0,0], iWindSpeed:[3,8,9,1] }, -} +}*/ const initpowerChart = () => { const powerChart = state.charts.powerChart ?? echarts.init(powerChartRef.value as unknown as HTMLElement) const option = { @@ -565,7 +569,7 @@ const initpowerChart = () => { color: '#999999', }, }, - data: powerChartData.time.iTheoreticalPower, + data: powerChartData.time.WindFarmAvgWindSpeed, }, yAxis: [ { @@ -630,24 +634,24 @@ const initpowerChart = () => { }, ], legend: { - data: ['功率', '风速'], + data: ['全场总有功功率', '全场平均风速'], textStyle: { color: '#73767a', }, }, series: [ { - name: '功率', + name: '全场总有功功率', type: 'bar', barWidth: 20, itemStyle: { color: '#00A7EB', barBorderRadius: 2 }, - data: powerChartData.values?.iGenPower ?? [], + data: powerChartData.values?.WindFarmActivePower ?? [], }, { - name: '风速', + name: '全场平均风速', type: 'line', yAxisIndex: 1, itemStyle: { @@ -664,7 +668,7 @@ const initpowerChart = () => { } ]) }, - data: powerChartData.values?.iWindSpeed ?? [], + data: powerChartData.values?.WindFarmAvgWindSpeed ?? [], }, ], } @@ -675,7 +679,7 @@ const initpowerChart = () => { const trendChartRef = ref() -const TrendDataForDay = [ +/*const TrendDataForDay = [ { currentPeriod: 86.3, samePeriod: 63.5, @@ -691,8 +695,47 @@ const TrendDataForDay = [ samePeriod: 43.5, generationTime: '2024-10-03', }, -] -const TrendDataForMonth = [ +]*/ +const TrendDataForDay: { + currentPeriod: { + time: string[] + value: number[] + } + samePeriod: { + time: string[] + value: number[] + } +} = { + currentPeriod: { + time: [], + value: [], + }, + samePeriod: { + time: [], + value: [], + }, +} + +const TrendDataForMonth :{ + currentPeriod: { + time: string[] + value: number[] + } + samePeriod: { + time: string[] + value: number[] + } +} = { + currentPeriod: { + time: [], + value: [], + }, + samePeriod: { + time: [], + value: [], + }, +} +/*const TrendDataForMonth = [ { currentPeriod: 26.3, samePeriod: 53.5, @@ -708,13 +751,15 @@ const TrendDataForMonth = [ samePeriod: 53.5, generationTime: '2024-10-03', }, -] +]*/ const inittrendChart = (type: 'day' | 'month') => { - const currentPeriod: any = - type === 'day' ? TrendDataForDay.map((item) => item.currentPeriod) : TrendDataForMonth.map((item) => item.currentPeriod) - const samePeriod: any = type === 'day' ? TrendDataForDay.map((item) => item.samePeriod) : TrendDataForMonth.map((item) => item.samePeriod) - const xAxisdata: any = type === 'day' ? TrendDataForDay.map((item) => item.generationTime) : TrendDataForMonth.map((item) => item.generationTime) + /* const currentPeriod: number[] = type === 'day' ? TrendDataForDay.currentPeriod.value : TrendDataForMonth.map((item) => item.currentPeriod) + const samePeriod: number[] = type === 'day' ? TrendDataForDay.samePeriod.value : TrendDataForMonth.map((item) => item.samePeriod) + const xAxisdata: string[] = type === 'day' ? TrendDataForDay.currentPeriod.time : TrendDataForMonth.map((item) => item.generationTime)*/ + const currentPeriod: number[] = type === 'day' ? TrendDataForDay.currentPeriod.value : TrendDataForMonth.currentPeriod.value + const samePeriod: number[] = type === 'day' ? TrendDataForDay.samePeriod.value : TrendDataForMonth.samePeriod.value + const xAxisdata: string[] = type === 'day' ? TrendDataForDay.currentPeriod.time : TrendDataForMonth.currentPeriod.time const trendChart = state.charts?.trendChart ?? echarts.init(trendChartRef.value as unknown as HTMLElement) const option = { @@ -895,54 +940,184 @@ const createScroll = () => { }, 30) } -const getChartData = () => { - powerChartData.time = { - iGenPower:['00:00','00:05','00:10','00:15'], - iTheoreticalPowe:['00:00','00:05','00:10','00:15'], - iWindSpeed:['00:00','00:05','00:10','00:15'] - } - powerChartData.values = { - iGenPower:[0,5,2,7], - iTheoreticalPowe:[0,0,0,0], - iWindSpeed:[3,8,9,1] - } - /*return new Promise((resolve) => { +const getChartData = (params: { + startTime: number + endTime: number + attr: T[] + interval: string +}): Promise<{ times: { [K in T]: string[] }; val: { [K in T]: number[] } }> => { + return new Promise((resolve) => { const data = { - startTime: new Date(new Date().toLocaleDateString()).getTime(), - endTime: Date.now(), + startTime: params.startTime, + endTime: params.endTime, devices: [ { - //deviceId: route.query.irn as string, - deviceId: '1846101273013739522', - attributes: ['iGenPower', 'iTheoreticalPower', 'iWindSpeed'], + deviceId: '', + attributes: params.attr, }, ], - interval: '5m', + interval: params.interval, } - getRealValueRangeReq(data).then((res) => { - console.log(res) + console.log(JSON.stringify(data)) + getHistoryData(data).then((res) => { if (res.success) { - //const data = res.data[route.query.irn as string] - const data = res.data['1846101273013739522'] - const rangeKeys = Object.keys(data) - const times: any = {} - const val: any = {} - rangeKeys.forEach((key) => { - times[key] = [] - val[key] = [] - data[key].times.forEach((item: number, index: number) => { - times[key].push(dayjs(item).format('HH:mm')) + if (typeof res.data === 'object' && res.data !== null && Object.keys(res.data).length === 0) { + const times: any = {} + const val: any = {} + resolve({ times, val }) + } else { + const data = res.data['1848624295633317890'] + const rangeKeys = Object.keys(data) + const times: any = {} + const val: any = {} + rangeKeys.forEach((key) => { + times[key] = [] + val[key] = [] + data[key].times.forEach((item: number) => { + if(params.interval=='5m'){ + times[key].push(dayjs(item).format('HH:mm')) + }else if(params.interval=='1d'){ + times[key].push(dayjs(item).format('DD')) + }else if(params.interval=='1n'){ + times[key].push(dayjs(item).format('MM')) + } + }) + data[key].values.forEach((item: number) => { + val[key].push(item) + }) }) - data[key].values.forEach((item: number) => { - val[key].push(item) - }) - }) - powerChartData.time = times - powerChartData.values = val - resolve(true) + resolve({ times, val }) + } + } }) - })*/ + }) +} +const getThisDayChartData = () => { + return new Promise((resolve) => { + getChartData<'WindFarmActivePower' | 'WindFarmAvgWindSpeed '>({ + startTime: new Date(new Date().toLocaleDateString()).getTime(), + endTime: Date.now(), + attr: ['WindFarmActivePower', 'WindFarmAvgWindSpeed '], + interval: '5m', + }).then(({ times, val }) => { + powerChartData.time = { WindFarmActivePower: times.WindFarmActivePower, WindFarmAvgWindSpeed : times.WindFarmAvgWindSpeed } + powerChartData.values = { WindFarmActivePower: val.WindFarmActivePower, WindFarmAvgWindSpeed : val.WindFarmAvgWindSpeed } + resolve(true) + }) + }) +} +const getLastYearTodayTimestamp = () => { + const now = new Date() + const lastYear = now.getFullYear() - 1 + const lastYearToday = new Date(lastYear, now.getMonth(), now.getDate()) + return lastYearToday.getTime() +} +const getLastYearChartData = () => { + return new Promise((resolve) => { + const start = getLastYearTodayTimestamp() + const end = new Date() + end.setFullYear(end.getFullYear() - 1) + end.setMonth(end.getMonth() + 1, 0); // 设置为下个月的第一天，然后减去一天 + + getChartData<'WindFarmDayProdEnergy'>({ + startTime: start, + endTime: end.getTime(), + attr: ['WindFarmDayProdEnergy'], + interval: '1d', + }).then(({ times, val }) => { + TrendDataForDay.samePeriod.time = times.WindFarmDayProdEnergy + TrendDataForDay.samePeriod.value = val.WindFarmDayProdEnergy + resolve(true) + }) + }) +} + +const getThisDayChartForHourData = () => { + return new Promise((resolve) => { + getChartData<'WindFarmDayProdEnergy'>({ + startTime: new Date(new Date().toLocaleDateString()).getTime(), + endTime: Date.now(), + attr: ['WindFarmDayProdEnergy'], + interval: '1d', + }).then(({ times, val }) => { + TrendDataForDay.currentPeriod.time = times.WindFarmDayProdEnergy + TrendDataForDay.currentPeriod.value = val.WindFarmDayProdEnergy + resolve(true) + }) + }) +} +//发电连月 +const getLastMonthTodayTimestamp = () => { + const now = new Date(); // 当前日期 + const thisYear = now.getFullYear(); // 获取当前年份 + const lastYear = thisYear - 1; // 计算去年年份 + const firstDayOfLastYear = new Date(lastYear, 0, 1); // 设置为去年的一月一日 + return firstDayOfLastYear.getTime() + +} +const getThisMonthTodayTimestamp = () => { + const now = new Date(); // 当前日期 + const thisYear = now.getFullYear(); // 获取当前年份 + const firstDayOfYear = new Date(thisYear, 0, 1); // 设置为今年的一月一日 + return firstDayOfYear.getTime() +} +const getLastYear = () => { + const now = new Date(); // 当前日期 + const thisYear = now.getFullYear(); // 获取当前年份 + const lastYear = thisYear - 1; // 计算去年年份 + const lastDayOfLastYear = new Date(lastYear, 11, 0); // 设置为去年12月的最后一天 + return lastDayOfLastYear.getTime() +} +const getLastMonthChartData = () => { + return new Promise((resolve) => { + const start = getLastMonthTodayTimestamp() + const end = getLastYear() + getChartData<'WIndFarmMonthProdEnergy'>({ + startTime: start, + endTime: end, + attr: ['WIndFarmMonthProdEnergy'], + interval: '1n', + }).then(({ times, val }) => { + TrendDataForMonth.samePeriod.time = times.WIndFarmMonthProdEnergy + TrendDataForMonth.samePeriod.value = val.WIndFarmMonthProdEnergy + resolve(true) + }) + }) +} + +const getThisMonthChartForHourData = () => { + return new Promise((resolve) => { + const start=getThisMonthTodayTimestamp() + getChartData<'WIndFarmMonthProdEnergy'>({ + startTime: start, + endTime: Date.now(), + attr: ['WIndFarmMonthProdEnergy'], + interval: '1n', + }).then(({ times, val }) => { + TrendDataForMonth.currentPeriod.time = times.WIndFarmMonthProdEnergy + TrendDataForMonth.currentPeriod.value = val.WIndFarmMonthProdEnergy + resolve(true) + }) + }) +} + + +const getAllChartData = (type: ('power' | 'trend')[] = ['power', 'trend']) => { + if (type.includes('power')) { + getThisDayChartData().then(() => { + initpowerChart() + }) + } + if (type.includes('trend')) { + const trendDataForLastYear = getLastYearChartData() + const trendDataForThisDay = getThisDayChartForHourData() + const trendDataForLastMonth = getLastMonthChartData() + const trendDataForThisMonth = getThisMonthChartForHourData() + Promise.all([trendDataForLastYear, trendDataForThisDay,trendDataForLastMonth,trendDataForThisMonth]).then(() => { + inittrendChart(trendChartType.value) + }) + } } const trendChartType = ref<'day' | 'month'>('day') @@ -953,12 +1128,9 @@ const tabhandleClick = () => { }) } onMounted(() => { - - /* getChartData().then(() => { - initpowerChart() - })*/ - inittrendChart(trendChartType.value) - initpowerChart() + getAllChartData() + //inittrendChart(trendChartType.value) + //initpowerChart() createScroll() overviewList() StatusListData() @@ -971,18 +1143,34 @@ onMounted(() => { } })*/ const activeName = ref('first') -let autoUpdateTimer: any = null +//let autoUpdateTimer: any = null +let autoUpdateForSecondTimer: any = null +let autoUpdateTimerForMinuteTimer: any = null +let autoUpdateTimerForHourTimer: any = null const autoUpdate = () => { - if (!autoUpdateTimer) { - autoUpdateTimer = setInterval(() => { + if (!autoUpdateForSecondTimer) { + autoUpdateForSecondTimer = setInterval(() => { StatusListData() + overviewList() }, 2000) } + if (!autoUpdateTimerForMinuteTimer) { + autoUpdateTimerForMinuteTimer = setInterval(() => { + getAllChartData(['power']) + //initpowerChart() + }, 60000) + } + if (!autoUpdateTimerForHourTimer) { + autoUpdateTimerForHourTimer = setInterval(() => { + getAllChartData(['trend']) + //inittrendChart(trendChartType.value) + }, 60000 * 30) + } } onUnmounted(() => { clearInterval(timer) - autoUpdateTimer && clearInterval(autoUpdateTimer) + autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer) const chartKeys = Object.keys(state.charts) as Array chartKeys.forEach((key) => { state.charts[key].dispose() diff --git a/ui/dasadmin/src/views/backend/home/windMatrix.vue b/ui/dasadmin/src/views/backend/home/windMatrix.vue index 50950dc1..5798a643 100644 --- a/ui/dasadmin/src/views/backend/home/windMatrix.vue +++ b/ui/dasadmin/src/views/backend/home/windMatrix.vue @@ -242,6 +242,8 @@ const animationDuration=reactive({ } .fanlist-text{ margin-top:30px; + display: flex; + flex-direction: column; .content-number{ color: #333333; font-size: 20px;