diff --git a/ui/dasadmin/src/views/backend/WindBlower/index.vue b/ui/dasadmin/src/views/backend/WindBlower/index.vue index a8046772..d3c16776 100644 --- a/ui/dasadmin/src/views/backend/WindBlower/index.vue +++ b/ui/dasadmin/src/views/backend/WindBlower/index.vue @@ -138,16 +138,19 @@ -
-
+
+
-
+
-
+
+
+
+
@@ -350,7 +353,7 @@ const realTimeDataForSingleUnit = reactive({ }) const state: { - charts: { powerChart: any; temperatureChart1: any; temperatureChart2: any; temperatureChart3: any } + charts: { powerChart: any; temperatureChart1: any; temperatureChart2: any; temperatureChart3: any; frequencyChart: any } remark: string workingTimeFormat: string pauseWork: boolean @@ -360,7 +363,7 @@ const state: { temperatureChart1: null, temperatureChart2: null, temperatureChart3: null, - // frequencyChart: null, + frequencyChart: null, // trendChart: null, }, remark: 'dashboard.Loading', @@ -749,13 +752,13 @@ const initTemperatureChart = () => { color: '#048bd2', borderRadius: [0, 0, 4, 4], }, - barWidth: 40, + barWidth: 20, }, { show: true, type: 'bar', barGap: '-100%', - barWidth: 40, // 统计条宽度 + barWidth: 20, // 统计条宽度 itemStyle: { normal: { color: '#048bd2', @@ -816,95 +819,95 @@ var frequencyData: { value: [], } -// const frequencyChartRef = ref() -// const initFrequencyChart = () => { -// const frequencyChart = state.charts.frequencyChart ?? echarts.init(frequencyChartRef.value as unknown as HTMLElement) -// // const seriesdata: any = frequencyData.map((item) => item.value) +const frequencyChartRef = ref() +const initFrequencyChart = () => { + const frequencyChart = state.charts.frequencyChart ?? echarts.init(frequencyChartRef.value as unknown as HTMLElement) + // const seriesdata: any = frequencyData.map((item) => item.value) -// const option = { -// title: [ -// { -// text: '风频图', -// textStyle: { -// color: '#4E5969', -// fontSize: 14, -// fontFamily: 'PingFangSC-Semibold', -// }, -// padding: 15, -// }, -// ], -// polar: { -// radius: [0, '70%'], -// }, -// radiusAxis: { -// axisLine: { -// show: true, -// lineStyle: { -// color: '#dadada', -// }, -// }, -// axisLabel: { -// show: true, -// color: 'rgba(0,0,0,0.45)', -// fontSize: 10, -// }, -// axisTick: { -// show: true, -// lineStyle: { -// color: '#dadada', -// }, -// }, -// max: 100, -// }, -// angleAxis: { -// min: 0, -// interval: 22.5, -// startAngle: 90, -// type: 'category', -// axisLine: { -// show: true, -// lineStyle: { -// color: '#dadada', -// }, -// }, -// axisLabel: { -// 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, -// lineStyle: { -// color: '#dadada', -// }, -// }, -// data: frequencyData.name, -// //startAngle: 75 -// }, -// tooltip: {}, -// series: { -// type: 'bar', -// data: frequencyData.value, -// coordinateSystem: 'polar', -// itemStyle: { -// color: '#0277B3', -// }, -// // label: { -// // show: true, -// // position: 'middle', -// // formatter: '{b}: {c}', -// // }, -// }, -// animation: false, -// } -// frequencyChart.setOption(option) -// state.charts.frequencyChart = frequencyChart -// } + const option = { + title: [ + { + text: '风频图', + textStyle: { + color: '#4E5969', + fontSize: 14, + fontFamily: 'PingFangSC-Semibold', + }, + padding: 15, + }, + ], + polar: { + radius: [0, '70%'], + }, + radiusAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#dadada', + }, + }, + axisLabel: { + show: true, + color: 'rgba(0,0,0,0.45)', + fontSize: 10, + }, + axisTick: { + show: true, + lineStyle: { + color: '#dadada', + }, + }, + max: 100, + }, + angleAxis: { + min: 0, + interval: 22.5, + startAngle: 90, + type: 'category', + axisLine: { + show: true, + lineStyle: { + color: '#dadada', + }, + }, + axisLabel: { + 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, + lineStyle: { + color: '#dadada', + }, + }, + data: frequencyData.name, + //startAngle: 75 + }, + tooltip: {}, + series: { + type: 'bar', + data: frequencyData.value, + coordinateSystem: 'polar', + itemStyle: { + color: '#0277B3', + }, + // label: { + // show: true, + // position: 'middle', + // formatter: '{b}: {c}', + // }, + }, + animation: false, + } + frequencyChart.setOption(option) + state.charts.frequencyChart = frequencyChart +} const echartsResize = () => { nextTick(() => { @@ -1211,27 +1214,27 @@ const getThisDayChartData = () => { // }) // } -// 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 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')) { @@ -1247,11 +1250,11 @@ const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', ' // initTrendChart(trendChartType.value) // }) // } - // if (type.includes('frequency')) { - // getThisDayChartDataForMinute().then((res) => { - // initFrequencyChart() - // }) - // } + if (type.includes('frequency')) { + getThisDayChartDataForMinute().then((res) => { + initFrequencyChart() + }) + } } const sendCommand = (type: 'setTurbineFastStart' | 'setTurbineStop' | 'setTurbineResetStatusCode') => { @@ -1841,7 +1844,7 @@ $labelHeight: 24px; } .chartPart-item { margin: 5px; - width: 33%; + width: 25%; height: 100%; background: #f0f6ff; border-radius: 8px; @@ -1857,7 +1860,7 @@ $labelHeight: 24px; } } .item_bar { - width: 31%; + width: 40%; } } } diff --git a/ui/dasadmin/src/views/backend/energyManage/index.vue b/ui/dasadmin/src/views/backend/energyManage/index.vue index 19e45582..d62e96b5 100644 --- a/ui/dasadmin/src/views/backend/energyManage/index.vue +++ b/ui/dasadmin/src/views/backend/energyManage/index.vue @@ -2,78 +2,124 @@
-
-
-
风机列表
- - - - - -
-
-
- 自动更新 - -
-
-
-
-
-
-
{{ item.label }}
-
{{ item.value }}
+ + +
+
+ + + + + +
-
-
+ + +
+
+
+ 自动更新 + +
+
+
+
+
+
+
{{ item.label }}
+
{{ item.value }}
+
+
+
+
+ +
@@ -792,6 +838,20 @@ const infoList = ref([ }, ]) +const activeName = ref('list') +const handleClick = (tabName: any) => { + if (tabName === 'chart') { + console.log(tabName); + + stopAutoUpdate() + nextTick(() => { + createChart() + }) + }else if( tabName === 'list'){ + autoUpdateAirBlower() + } +} + const containerHeight = ref('900px') const getContainerHeight = () => { const container = document.querySelector('.leftContainer') @@ -807,17 +867,18 @@ const resizeFn = () => { resizeChart() getContainerHeight() } +const stopAutoUpdate = () => { + timer && clearInterval(timer) + timer = null +} onMounted(() => { getContainerHeight() autoUpdateAirBlower() - nextTick(() => { - createChart() - }) window.addEventListener('resize', resizeFn) }) onUnmounted(() => { window.removeEventListener('resize', resizeFn) - timer && clearInterval(timer) + stopAutoUpdate() }) @@ -1027,29 +1088,27 @@ onUnmounted(() => { @include record; } .centerContainer { - margin-bottom: 20px; height: v-bind('containerHeight'); color: #4e5969; .airBlowerList { padding: 20px; width: 100%; - height: calc(50% - 10px); + height: calc(100% - 10px - 40px); background-color: #fff; border-radius: 6px; - .title { - height: 38px; - font-size: 18px; - font-weight: 600; - } + // .title { + // height: 38px; + // font-size: 18px; + // font-weight: 600; + // } .table { - height: calc(100% - 38px); + height: 100%; } } .chartPart { - margin: 20px 0; padding: 20px; width: 100%; - height: calc(50% - 10px); + height: calc(100% - 10px - 40px); background-color: #fff; border-radius: 6px; .title {