diff --git a/ui/dasadmin/src/views/backend/WindBlower/index.vue b/ui/dasadmin/src/views/backend/WindBlower/index.vue index 3fdb4d54..e5ee6696 100644 --- a/ui/dasadmin/src/views/backend/WindBlower/index.vue +++ b/ui/dasadmin/src/views/backend/WindBlower/index.vue @@ -102,13 +102,15 @@
+ 已锁定 {{ realTimeDataState }}
- 启动 - 停机 + 启动 + 停机 复位 - 锁定 + 锁定 + 解锁
@@ -204,7 +206,7 @@
- {{ realTimeDataForSingle?.monthGeneration ?? '-' }} + {{ realTimeDataForSingle.windfarmmonthprodenergy }}
万kWh
月发电量
@@ -218,7 +220,7 @@
- {{ realTimeDataForSingle?.yearGeneration ?? '-' }} + {{ realTimeDataForSingle.windfarmyearprodenergy }}
万kWh
年发电量
@@ -314,6 +316,7 @@ import Overview from './overview.vue' import { TableInstance } from 'element-plus' import { dayjs } from 'element-plus' import { getRealTimeState, getCutDecimalsValue } from '/@/views/backend/equipment/airBlower/utils' +import { get } from 'sortablejs' const route = useRoute() const d = new Date() @@ -323,17 +326,17 @@ let myTable = ref() const radioactiveName = ref('1') const overviewData = reactive({ - iul1_690v: '', - iul2_690v: '', - iul3_690v: '', - igenpower: '', - ireactivepower: '', - icosphi: '', - itemprotorbeara_1sec: '', - itemprotorbearb_1sec: '', - icabletwisttotal: '', - itempgenbearde_1sec: '', - itempgenbearnde_1sec: '', + iul1_690v: '-', + iul2_690v: '-', + iul3_690v: '-', + igenpower: '-', + ireactivepower: '-', + icosphi: '-', + itemprotorbeara_1sec: '-', + itemprotorbearb_1sec: '-', + icabletwisttotal: '-', + itempgenbearde_1sec: '-', + itempgenbearnde_1sec: '-', }) const handleClick = () => { // debugger @@ -341,13 +344,15 @@ const handleClick = () => { } const realTimeDataForSingle = ref({ - ikwhthisday: '', - ikwhoverall: '', - igenpower: '', - igenspeed: '', + ikwhthisday: '-', + ikwhoverall: '-', + igenpower: '-', + igenspeed: '-', ipitchangle: '', - iwindspeed: '', - iwinddirection: '', + iwindspeed: '-', + iwinddirection: '-', + windfarmmonthprodenergy: '-', + windfarmyearprodenergy: '-', }) const state: { @@ -531,23 +536,26 @@ const initpowerChart = () => { state.charts.powerChart = powerChart } -const TrendDataForDay = [ - { - currentPeriod: 86.3, - samePeriod: 63.5, - generationTime: '2024-10-01', +const TrendDataForDay: { + currentPeriod: { + time: string[] + value: number[] + } + samePeriod: { + time: string[] + value: number[] + } +} = { + currentPeriod: { + time: [], + value: [], }, - { - currentPeriod: 86.3, - samePeriod: 53.5, - generationTime: '2024-10-02', + samePeriod: { + time: [], + value: [], }, - { - currentPeriod: 86.3, - samePeriod: 43.5, - generationTime: '2024-10-03', - }, -] +} + const TrendDataForMonth = [ { currentPeriod: 26.3, @@ -567,11 +575,18 @@ const TrendDataForMonth = [ ] const trendChartRef = ref() -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 trendChartType = ref<'day' | 'month'>('day') +const tabhandleClick = () => { + state.charts.trendChart.clear() + nextTick(() => { + initTrendChart(trendChartType.value) + }) +} + +const initTrendChart = (type: 'day' | 'month') => { + 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 trendChart = state.charts?.trendChart ?? echarts.init(trendChartRef.value as unknown as HTMLElement) const option = { @@ -783,62 +798,35 @@ const initTemperatureChart = () => { state.charts.temperatureChart3 = temperatureChart3 } -var frequencydata = [ - { - name: '1', - value: 10, - }, - { - name: '2', - value: 2, - }, - { - name: '3', - value: 33, - }, - { - name: '4', - value: 41, - }, - { - name: '5', - value: 50, - }, - { - name: '6', - value: 16, - }, - { - name: '7', - value: 27, - }, - { - name: '8', - value: 18, - }, - { - name: '9', - value: 39, - }, - { - name: '10', - value: 10, - }, - { - name: '11', - value: 15, - }, - { - name: '12', - value: 12, - }, -] +var frequencyData: { + name: string[] + value: number[] +} = { + name: [ + '0~22.5', + '22.5~45', + '45~67.5', + '67.5~90', + '90~112.5', + '112.5~135', + '135~157.5', + '157.5~180', + '180~202.5', + '202.5~225', + '225~247.5', + '247.5~270', + '270~292.5', + '292.5~315', + '315~337.5', + '337.5~360', + ], + value: [], +} const frequencyChartRef = ref() const initFrequencyChart = () => { const frequencyChart = state.charts.frequencyChart ?? echarts.init(frequencyChartRef.value as unknown as HTMLElement) - const yAxisdata: any = frequencydata.map((item) => item.name) - const seriesdata: any = frequencydata.map((item) => item.value) + // const seriesdata: any = frequencyData.map((item) => item.value) const option = { title: [ @@ -873,9 +861,12 @@ const initFrequencyChart = () => { color: '#dadada', }, }, - //max: 4 + max: 100, }, angleAxis: { + min: 0, + interval: 22.5, + startAngle: 90, type: 'category', axisLine: { show: true, @@ -887,6 +878,11 @@ const initFrequencyChart = () => { show: true, color: 'rgba(0,0,0,0.45)', fontSize: 10, + boundaryGap: false, + formatter: function (value: string) { + const reg = /.*(?=\~)/ + return value.match(reg)![0] + }, }, axisTick: { show: false, @@ -894,22 +890,22 @@ const initFrequencyChart = () => { color: '#dadada', }, }, - data: yAxisdata, + data: frequencyData.name, //startAngle: 75 }, tooltip: {}, series: { type: 'bar', - data: seriesdata, + data: frequencyData.value, coordinateSystem: 'polar', itemStyle: { color: '#0277B3', }, - /*label: { - show: true, - position: 'middle', - formatter: '{b}: {c}' - }*/ + // label: { + // show: true, + // position: 'middle', + // formatter: '{b}: {c}', + // }, }, animation: false, } @@ -991,6 +987,7 @@ const createScroll = () => { const realTimeData = ref({ iturbineoperationmode: 1111, + locked: 0, }) const realTimeDataState = computed(() => { @@ -1139,7 +1136,6 @@ const createRealTimeData = async () => { console.log(err) } } -createRealTimeData() const subSystemName = ref('') @@ -1193,16 +1189,6 @@ const openSubSystem = (type: number) => { visible.value = true } -const trendChartType = ref<'day' | 'month'>('day') -const tabhandleClick = () => { - state.charts.trendChart.clear() - nextTick(() => { - console.log(trendChartType.value) - - inittrendChart(trendChartType.value) - }) -} - const overviewSlotData = reactive<{ visible: boolean; type: '138' | '140'; type138: any[]; type140: any[] }>({ visible: false, type: '138', @@ -1210,31 +1196,49 @@ const overviewSlotData = reactive<{ visible: boolean; type: '138' | '140'; type1 type140: [], }) -let autoUpdateTimer: any = null +let autoUpdateForSecondTimer: any = null +let autoUpdateTimerForMinuteTimer: any = null +let autoUpdateTimerForHourTimer: any = null const autoUpdate = () => { - if (!autoUpdateTimer) { - autoUpdateTimer = setInterval(() => { + createRealTimeData() + initTemperatureChart() + if (!autoUpdateForSecondTimer) { + autoUpdateForSecondTimer = setInterval(() => { createRealTimeData() initTemperatureChart() }, 2000) } + if (!autoUpdateTimerForMinuteTimer) { + autoUpdateTimerForMinuteTimer = setInterval(() => { + getAllChartData(['power', 'frequency']) + }, 60000) + } + if (!autoUpdateTimerForHourTimer) { + autoUpdateTimerForHourTimer = setInterval(() => { + getAllChartData(['trend']) + }, 60000 * 30) + } } -const getChartData = () => { +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, - attributes: ['iGenPower', 'iTheoreticalPower', 'iWindSpeed'], + attributes: params.attr, }, ], - interval: '5m', + interval: params.interval, } getRealValueRangeReq(data).then((res) => { - console.log(res) if (res.success) { const data = res.data[route.query.irn as string] const rangeKeys = Object.keys(data) @@ -1243,44 +1247,132 @@ const getChartData = () => { rangeKeys.forEach((key) => { times[key] = [] val[key] = [] - data[key].times.forEach((item: number, index: number) => { + data[key].times.forEach((item: number) => { times[key].push(dayjs(item).format('HH:mm')) }) data[key].values.forEach((item: number) => { val[key].push(item) }) }) - powerChartData.time = times - powerChartData.values = val - resolve(true) + resolve({ times, val }) } }) }) } -onMounted(() => { - inittrendChart(trendChartType.value) - getChartData().then(() => { - initpowerChart() - initTemperatureChart() +const getThisDayChartData = () => { + return new Promise((resolve) => { + getChartData<'iGenPower' | 'iTheoreticalPower' | 'iWindSpeed'>({ + startTime: new Date(new Date().toLocaleDateString()).getTime(), + endTime: Date.now(), + attr: ['iGenPower', 'iTheoreticalPower', 'iWindSpeed'], + interval: '5m', + }).then(({ times, val }) => { + powerChartData.time = { iGenPower: times.iGenPower, iTheoreticalPower: times.iTheoreticalPower, iWindSpeed: times.iWindSpeed } + powerChartData.values = { iGenPower: val.iGenPower, iTheoreticalPower: val.iTheoreticalPower, iWindSpeed: val.iWindSpeed } + 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) + + getChartData<'iKWhThisDay'>({ + startTime: start, + endTime: end.getTime(), + attr: ['iKWhThisDay'], + interval: '1h', + }).then(({ times, val }) => { + TrendDataForDay.samePeriod.time = times.iKWhThisDay + TrendDataForDay.samePeriod.value = val.iKWhThisDay + resolve(true) + }) + }) +} + +const getThisDayChartForHourData = () => { + return new Promise((resolve) => { + getChartData<'iKWhThisDay'>({ + startTime: new Date(new Date().toLocaleDateString()).getTime(), + endTime: Date.now(), + attr: ['iKWhThisDay'], + interval: '1h', + }).then(({ times, val }) => { + TrendDataForDay.currentPeriod.time = times.iKWhThisDay + TrendDataForDay.currentPeriod.value = val.iKWhThisDay + resolve(true) + }) + }) +} + +const getThisDayChartDataForMinute = () => { + return new Promise((resolve) => { + getChartData<'iWindDirection'>({ + startTime: new Date(new Date().toLocaleDateString()).getTime(), + endTime: Date.now(), + attr: ['iWindDirection'], + interval: '1m', + }).then(({ val }) => { + const len = val.iWindDirection.length + const result: number[] = new Array(16).fill(0) + val.iWindDirection.forEach((item: number) => { + item = item < 0 ? 360 + item : item > 360 ? 360 : item + const divisor = Math.ceil(item / 22.5) - 1 + result[divisor] += 1 + }) + const percent = result.map((item) => Math.floor((item / len) * 100000) / 1000) + frequencyData.value = percent + resolve(true) + }) + }) +} + +const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', 'trend', 'frequency']) => { + if (type.includes('power')) { + getThisDayChartData().then(() => { + initpowerChart() + initTemperatureChart() + }) + } + if (type.includes('trend')) { + const trendDataForLastYear = getLastYearChartData() + const trendDataForThisDay = getThisDayChartForHourData() + Promise.all([trendDataForLastYear, trendDataForThisDay]).then(() => { + initTrendChart(trendChartType.value) + }) + } + if (type.includes('frequency')) { + getThisDayChartDataForMinute().then((res) => { + initFrequencyChart() + }) + } +} + +onMounted(() => { + getAllChartData() createScroll() - initFrequencyChart() useEventListener(window, 'resize', echartsResize) autoUpdate() }) -// onBeforeMount(() => { -// const chartKeys = Object.keys(state.charts) as Array -// chartKeys.forEach((key) => { -// state.charts[key].dispose() -// }) -// }) onUnmounted(() => { - autoUpdateTimer && clearInterval(autoUpdateTimer) + autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer) + autoUpdateTimerForHourTimer && clearInterval(autoUpdateTimerForHourTimer) + autoUpdateTimerForMinuteTimer && clearInterval(autoUpdateTimerForMinuteTimer) const chartKeys = Object.keys(state.charts) as Array chartKeys.forEach((key) => { - state.charts[key].dispose() + state.charts[key] && state.charts[key].dispose() }) }) @@ -1399,7 +1491,6 @@ onUnmounted(() => { .control-type { width: 100%; display: flex; - justify-content: right; .control-tag { background: #0064aa; border-radius: 0 8px 0 0; @@ -1408,6 +1499,11 @@ onUnmounted(() => { color: #ffffff; font-size: 20px; border: none; + margin-left: auto; + } + .control-tag-left { + margin-left: 0; + border-radius: 8px 0 0 0; } } .btnLeft { diff --git a/ui/dasadmin/src/views/backend/equipment/airBlower/index.vue b/ui/dasadmin/src/views/backend/equipment/airBlower/index.vue index 08dd0829..ce4d3bbe 100644 --- a/ui/dasadmin/src/views/backend/equipment/airBlower/index.vue +++ b/ui/dasadmin/src/views/backend/equipment/airBlower/index.vue @@ -68,6 +68,9 @@