单风机：添加温度图表实时更新
This commit is contained in:
高云鹏
parent
932c609472
commit
b145a940dc
@ -153,7 +153,7 @@
|
||||
</div>
|
||||
<div class="Parameters-item">
|
||||
<img src="~assets/WindBlower/direction.png" />
|
||||
<p class="Parameters-font">98</p>
|
||||
<p class="Parameters-font">{{ realTimeDataForSingle.iwinddirection }}</p>
|
||||
<p>风向</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -248,10 +248,8 @@
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="24">
|
||||
<el-tabs v-model="trendChartType" class="demo-tabs trend-tabs" @tab-click="tabhandleClick" ref="userTab">
|
||||
<el-tab-pane label="日" name="day">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="月" name="month">
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="日" name="day"> </el-tab-pane>
|
||||
<el-tab-pane label="月" name="month"> </el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="trend-chart" ref="trendChartRef"></div>
|
||||
</el-col>
|
||||
@ -315,7 +313,7 @@ import { useRoute } from 'vue-router'
|
||||
import Overview from './overview.vue'
|
||||
import { TableInstance } from 'element-plus'
|
||||
import { dayjs } from 'element-plus'
|
||||
import { getRealTimeState } from '/@/views/backend/equipment/airBlower/utils'
|
||||
import { getRealTimeState, getCutDecimalsValue } from '/@/views/backend/equipment/airBlower/utils'
|
||||
const route = useRoute()
|
||||
|
||||
const d = new Date()
|
||||
@ -349,6 +347,7 @@ const realTimeDataForSingle = ref<any>({
|
||||
igenspeed: '',
|
||||
ipitchangle: '',
|
||||
iwindspeed: '',
|
||||
iwinddirection: '',
|
||||
})
|
||||
|
||||
const state: {
|
||||
@ -568,7 +567,7 @@ const TrendDataForMonth = [
|
||||
]
|
||||
const trendChartRef = ref<VNodeRef>()
|
||||
|
||||
const inittrendChart = (type: 'day' | 'month' = 'day') => {
|
||||
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)
|
||||
@ -677,7 +676,7 @@ const inittrendChart = (type: 'day' | 'month' = 'day') => {
|
||||
trendChart.setOption(option)
|
||||
state.charts.trendChart = trendChart
|
||||
}
|
||||
const chartsData = [
|
||||
const temperatureChartsData: { name: string; value: string | number }[] = [
|
||||
{
|
||||
name: '环境温度(°C)',
|
||||
value: 56,
|
||||
@ -699,7 +698,7 @@ const initTemperatureChart = () => {
|
||||
const temperatureChart2 = state.charts.temperatureChart2 ?? echarts.init(temperatureChartRef2.value as unknown as HTMLElement)
|
||||
const temperatureChart3 = state.charts.temperatureChart3 ?? echarts.init(temperatureChartRef3.value as unknown as HTMLElement)
|
||||
const options = []
|
||||
for (let i = 0; i < chartsData.length; i++) {
|
||||
for (let i = 0; i < temperatureChartsData.length; i++) {
|
||||
const option = {
|
||||
grid: {
|
||||
top: 30,
|
||||
@ -718,13 +717,13 @@ const initTemperatureChart = () => {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: chartsData[i].name,
|
||||
data: [chartsData[i].value],
|
||||
name: temperatureChartsData[i].name,
|
||||
data: [temperatureChartsData[i].value],
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
align: 'center',
|
||||
formatter: ['{a|{c}}', '{b|{a}}'].join('\n'),
|
||||
formatter: `{a|{c}}\n{b|{a}}`,
|
||||
rich: {
|
||||
a: {
|
||||
color: '#333333',
|
||||
@ -735,7 +734,8 @@ const initTemperatureChart = () => {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
position: ['350%', '50%'],
|
||||
position: 'insideBottom',
|
||||
offset: [62, 0],
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#048bd2',
|
||||
@ -1043,6 +1043,10 @@ const createRealTimeData = async () => {
|
||||
const realData: any = await getRealTimeData()
|
||||
realTimeData.value.iturbineoperationmode = getRealTimeState(realData)
|
||||
|
||||
temperatureChartsData[0].value = getCutDecimalsValue(realData.itempoutdoor_1sec)
|
||||
temperatureChartsData[1].value = getCutDecimalsValue(realData.itempnacelle_1sec)
|
||||
temperatureChartsData[2].value = getCutDecimalsValue(realData.itempoutdoor_1sec)
|
||||
|
||||
const overviewDatakeys: any = Object.keys(overviewData)
|
||||
const sigleDataKeys: any = Object.keys(realTimeDataForSingle.value)
|
||||
|
||||
@ -1058,7 +1062,7 @@ const createRealTimeData = async () => {
|
||||
]
|
||||
modelList.forEach((item: any) => {
|
||||
const realVal = realData[item.attributeCode.toLowerCase()]
|
||||
const val = realVal === 0 ? 0 : realVal ? (realVal % 1 === 0 ? realVal : Math.floor(realVal * 1000) / 1000) : '-'
|
||||
const val = getCutDecimalsValue(realVal)
|
||||
if (sigleDataKeys.includes(item.attributeCode.toLowerCase())) {
|
||||
realTimeDataForSingle.value[item.attributeCode.toLowerCase()] = val === '-' ? val : val
|
||||
}
|
||||
@ -1211,6 +1215,7 @@ const autoUpdate = () => {
|
||||
if (!autoUpdateTimer) {
|
||||
autoUpdateTimer = setInterval(() => {
|
||||
createRealTimeData()
|
||||
initTemperatureChart()
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
@ -1254,12 +1259,12 @@ const getChartData = () => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
inittrendChart()
|
||||
inittrendChart(trendChartType.value)
|
||||
getChartData().then(() => {
|
||||
initpowerChart()
|
||||
initTemperatureChart()
|
||||
})
|
||||
createScroll()
|
||||
initTemperatureChart()
|
||||
initFrequencyChart()
|
||||
useEventListener(window, 'resize', echartsResize)
|
||||
autoUpdate()
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
:data="tableData"
|
||||
:header-row-style="tableHaderStyle"
|
||||
@selectionChange="selectTable"
|
||||
height="100%"
|
||||
max-height="100%"
|
||||
>
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<template v-for="item in tableColumn" :key="item.prop">
|
||||
|
||||
@ -15,3 +15,8 @@ export const getRealTimeState = (data: any) => {
|
||||
return 1112
|
||||
}
|
||||
}
|
||||
|
||||
export const getCutDecimalsValue = (data: number, num = 3) => {
|
||||
const n = Math.pow(10, num)
|
||||
return data === 0 ? 0 : data ? (data % 1 === 0 ? data : Math.floor(data * n) / n) : '-'
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user