单风机:页面调整,恢复风频图
能量管理:添加标签页
This commit is contained in:
高云鹏
parent
9b41321295
commit
1b280f9cd4
@ -138,16 +138,19 @@
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!-- 温度 -->
|
||||
<div class="chartPart" @click="openTemperature">
|
||||
<div class="chartPart-item">
|
||||
<div class="chartPart">
|
||||
<div class="chartPart-item" @click="openTemperature">
|
||||
<div class="chartParm" ref="temperatureChartRef1"></div>
|
||||
</div>
|
||||
<div class="chartPart-item">
|
||||
<div class="chartPart-item" @click="openTemperature">
|
||||
<div class="chartParm" ref="temperatureChartRef2"></div>
|
||||
</div>
|
||||
<div class="chartPart-item">
|
||||
<div class="chartPart-item" @click="openTemperature">
|
||||
<div class="chartParm" ref="temperatureChartRef3"></div>
|
||||
</div>
|
||||
<div class="chartPart-item item_bar">
|
||||
<div class="frequencyChart" ref="frequencyChartRef"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -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: {
|
||||
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,
|
||||
// lineStyle: {
|
||||
// color: '#dadada',
|
||||
// position: 'middle',
|
||||
// formatter: '{b}: {c}',
|
||||
// },
|
||||
// },
|
||||
// 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
|
||||
// }
|
||||
},
|
||||
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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,9 +2,11 @@
|
||||
<div class="energyManage">
|
||||
<el-row :gutter="20">
|
||||
<el-col :md="24" :lg="{ span: 14, push: 5 }">
|
||||
<el-tabs v-model="activeName" @tab-change="handleClick">
|
||||
<el-tab-pane label="风机列表" name="list">
|
||||
<div class="centerContainer">
|
||||
<div class="airBlowerList">
|
||||
<div class="title">风机列表</div>
|
||||
<!-- <div class="title">风机列表</div> -->
|
||||
<el-table class="table" :data="tableData">
|
||||
<el-table-column
|
||||
v-for="item in tableColumn"
|
||||
@ -16,41 +18,79 @@
|
||||
>
|
||||
<template #default="scope">
|
||||
<div v-if="item.prop === 'processedoperationmode'">
|
||||
<el-tag v-if="scope.row.locked === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731">已锁定</el-tag>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 20" color="rgba(0,100,170,0.20)" style="color: #0064aa"
|
||||
<el-tag v-if="scope.row.locked === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731"
|
||||
>已锁定</el-tag
|
||||
>
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 20"
|
||||
color="rgba(0,100,170,0.20)"
|
||||
style="color: #0064aa"
|
||||
>并网</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 10" color="rgba(0,160,150,0.20)" style="color: #00a096"
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 10"
|
||||
color="rgba(0,160,150,0.20)"
|
||||
style="color: #00a096"
|
||||
>维护</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 8" color="rgba(255,126,0,0.20)" style="color: #ff7e00"
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 8"
|
||||
color="rgba(255,126,0,0.20)"
|
||||
style="color: #ff7e00"
|
||||
>限功率运行</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 0" color="rgba(153,153,153,0.20)" style="color: #666666"
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 0"
|
||||
color="rgba(153,153,153,0.20)"
|
||||
style="color: #666666"
|
||||
>离线</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 16" color="rgba(6,180,41,0.20)" style="color: #06b429"
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 16"
|
||||
color="rgba(6,180,41,0.20)"
|
||||
style="color: #06b429"
|
||||
>启动</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 6" color="rgba(254,55,49,0.20)" style="color: #fe3731"
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 6"
|
||||
color="rgba(254,55,49,0.20)"
|
||||
style="color: #fe3731"
|
||||
>正常停机</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731"
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 1"
|
||||
color="rgba(254,55,49,0.20)"
|
||||
style="color: #fe3731"
|
||||
>外部因素导致停机</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 2" color="rgba(254,55,49,0.20)" style="color: #fe3731"
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 2"
|
||||
color="rgba(254,55,49,0.20)"
|
||||
style="color: #fe3731"
|
||||
>停机</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 11" color="rgba(255,182,0,0.20)" style="color: #ffb600"
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 11"
|
||||
color="rgba(255,182,0,0.20)"
|
||||
style="color: #ffb600"
|
||||
>待机</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 1110" color="rgba(153,153,153,0.20)" style="color: #666666"
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 1110"
|
||||
color="rgba(153,153,153,0.20)"
|
||||
style="color: #666666"
|
||||
>解缆状态</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 1111" color="rgba(254,55,49,0.20)" style="color: #fe3731"
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 1111"
|
||||
color="rgba(254,55,49,0.20)"
|
||||
style="color: #fe3731"
|
||||
>电网故障停机</el-tag
|
||||
>
|
||||
<el-tag v-if="scope.row.processedoperationmode === 33" color="rgba(153, 153, 153, 0.2)" style="color: #999999"
|
||||
<el-tag
|
||||
v-if="scope.row.processedoperationmode === 33"
|
||||
color="rgba(153, 153, 153, 0.2)"
|
||||
style="color: #999999"
|
||||
>通讯中断</el-tag
|
||||
>
|
||||
</div>
|
||||
@ -58,6 +98,10 @@
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="风机曲线" name="chart">
|
||||
<div class="centerContainer">
|
||||
<div class="chartPart">
|
||||
<div class="title">
|
||||
<span> 自动更新 </span>
|
||||
@ -74,6 +118,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
<el-col :md="12" :lg="{ span: 5, pull: 14 }">
|
||||
<div class="leftContainer">
|
||||
@ -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()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user