谐波频谱添加奇次、偶次区分

历史趋势添加线区分指标
This commit is contained in:
GGJ
2024-11-20 10:05:29 +08:00
parent 64fb9141fd
commit 876c29bdaf
3 changed files with 115 additions and 16 deletions

View File

@@ -1,6 +1,9 @@
<!-- 实时数据 - 谐波频谱页面 -->
<template>
<div class="realtrend" v-loading="loading">
<el-select v-model="selectValue" v-if="!loading" style="width: 100px" class="select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-tabs type="border-card" v-if="tabsList.length != 0" v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in tabsList" :label="item.groupName" :name="index" :key="index">
<div>
@@ -35,13 +38,11 @@
<span>{{ String(key).replace('data', ' ') }}</span>
</p>
<p>
<span
v-if="
<span v-if="
String(key).includes('data') &&
String(key) != 'dataLevel' &&
String(key) != 'dataTime'
"
>
">
{{ value }}
</span>
</p>
@@ -69,6 +70,23 @@ import MyEchart from '@/components/echarts/MyEchart.vue'
const activeName = ref(0)
const emit = defineEmits(['changeTrendType'])
const tableList: any = []
const selectValue = ref('1')
const options = [
{
value: '1',
label: '奇次',
},
{
value: '2',
label: '偶次',
},
{
value: '3',
label: '全部',
},
]
interface RowVO {
[key: string]: any
}
@@ -171,7 +189,7 @@ const init = () => {
xAxis: {
name: '次数',
data: trendData.map((item: any) => {
return item.count + '次'
return (activeName.value == 2 ? item.count - 0.5 : item.count) + '次'
})
},
yAxis: {
@@ -227,9 +245,39 @@ const setRealTrendData = (val: any) => {
mqttMessage.value = val
for (let key in val) {
if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
const numberPart = parseInt(key.replace('data', ''));
if (selectValue.value != '3') {
if (selectValue.value == '2') {
if (activeName.value == 2) {
if (numberPart % 2 !== 0) {
tableData.value[key] = val[key]
}
} else {
if (numberPart % 2 === 0) {
tableData.value[key] = val[key]
}
}
} else {
if (activeName.value == 2) {
if (numberPart % 2 === 0) {
tableData.value[key] = val[key]
}
} else {
if (numberPart % 2 !== 0) {
tableData.value[key] = val[key]
}
}
}
} else {
tableData.value[key] = val[key]
}
}
}
if (!tabsList.value[activeName.value].groupName.includes('间谐波')) {
delete tableData.value.data1
} else {
@@ -259,6 +307,12 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
.realtrend {
width: 100%;
height: 100%;
position: relative;
.select {
position: absolute;
top: -40px;
}
.realtrend_top {
width: 100%;
@@ -306,12 +360,14 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
// }
.realtrend_table {
width: 100%;
height: auto;
max-height: 150px;
display: flex;
border: 2px solid #eee;
cursor: pointer;
.thead_left {
width: 150px;
height: 100%;
@@ -322,6 +378,7 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
line-height: 50px;
font-weight: 800;
padding-bottom: 5px;
p {
width: 100%;
height: 100%;
@@ -331,25 +388,30 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
margin: 0 !important;
}
}
.thead_right {
flex: 1;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
display: flex;
padding-bottom: 5px;
.right_cell {
width: 100%;
display: flex;
flex-direction: column;
p {
flex: none;
width: 60px;
min-width: 60px;
height: 100%;
text-align: center;
border: 1px solid #eee;
line-height: 50px;
margin: 0 !important;
}
p:nth-child(1) {
font-weight: 800;
}
@@ -378,6 +440,7 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
.tab_info {
width: 100%;
// height: calc(100vh - 450px);
// overflow: auto;
// padding-bottom: 20px;
@@ -387,4 +450,8 @@ defineExpose({ open, setRealTrendData, setOverLimitData })
height: calc(100vh - 560px);
}
}
:deep(.el-select) {
min-width: 100px;
}
</style>

View File

@@ -134,6 +134,7 @@ const getTrendRequest = (val: any) => {
//初始化趋势图
const headerRef = ref()
const datePickerRef = ref()
const lineStyle = [{ type: 'solid', }, { type: 'dashed', }, { type: 'dotted', }]
const init = async () => {
loading.value = true
// 选择指标的时候切换legend内容和data数据
@@ -340,7 +341,9 @@ const init = async () => {
})
})
// console.log("🚀 ~ result.forEach ~ result:", result)
// '电压负序分量', '电压正序分量', '电压零序分量'
let ABCName = [...new Set(chartsList.map((item: any) => { return item.anotherName == '电压负序分量' ? '电压不平衡' : item.anotherName == '电压正序分量' ? '电压不平衡' : item.anotherName == '电压零序分量' ? '电压不平衡' : item.anotherName }))];
console.log("🚀 ~ .then ~ ABCName:", ABCName)
result.forEach((item: any, index: any) => {
let yMethodList: any = []
@@ -365,6 +368,9 @@ const init = async () => {
// console.log("🚀 ~ ABCList.forEach ~ ABCList:", ABCList)
ABCList.forEach((kk: any) => {
let colorName = kk[0].phase?.charAt(0).toUpperCase()
let lineS = ABCName.findIndex(item => item === (kk[0].anotherName == '电压负序分量' ? '电压不平衡' : kk[0].anotherName == '电压正序分量' ? '电压不平衡' : kk[0].anotherName == '电压零序分量' ? '电压不平衡' : kk[0].anotherName));
let seriesList: any = []
kk.forEach((cc: any) => {
if (cc.statisticalData !== null) {
@@ -381,8 +387,10 @@ const init = async () => {
: kk[0].anotherName,
type: 'line',
smooth: true,
color: colorName == 'A' ? '#FFCC00' : colorName == 'B' ? '#009900' : colorName == 'C' ? '#CC0000' : '',
symbol: 'none',
data: seriesList,
lineStyle: lineStyle[lineS],
yAxisIndex: index
})
})

View File

@@ -354,6 +354,9 @@ const refreshTree = () => {
const range = (start: any, end: any, step: any) => {
return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
}
const colors = ['#FFCC00', '#009900', '#CC0000']
const lineStyle = [{ type: 'solid', }, { type: 'dashed', }, { type: 'dotted', }]
const titleList: any = ref('')
const init = (flag: boolean) => {
titleList.value = ''
@@ -531,13 +534,14 @@ const init = (flag: boolean) => {
const xname = params[0].value[0]
let str = `${xname}<br>`
params.forEach((el: any, index: any) => {
str += `${el.marker}${el.seriesName.split('(')[0]}${el.value[1] ? el.value[1] + ' ' + el.value[2] : '-'
str += `${el.marker}${el.seriesName.split('(')[0]}${el.value[1] ? el.value[1] + ' ' + (el.value[2] || '') : '-'
}<br>`
})
return str
}
},
color: ['#FFCC00', '#009900', '#CC0000', ...color],
// color: ['#FFCC00', '#009900', '#CC0000', ...color],
xAxis: {
type: 'time',
axisLabel: {
@@ -577,7 +581,13 @@ const init = (flag: boolean) => {
...(index > 0 ? right : null)
})
})
console.log("🚀 ~ result.forEach ~ result:", result)
let ABCName = [...new Set(chartsList.map((item: any) => { return item.anotherName == '电压负序分量' ? '电压不平衡' : item.anotherName == '电压正序分量' ? '电压不平衡' : item.anotherName == '电压零序分量' ? '电压不平衡' : item.anotherName }))];
result.forEach((item: any, index: any) => {
let yMethodList: any = []
@@ -587,9 +597,10 @@ const init = (flag: boolean) => {
if (item.phase == null) {
key = item.anotherName
} else {
key = item.phase
}
if (!acc[key]) {
acc[key] = []
}
@@ -597,13 +608,23 @@ const init = (flag: boolean) => {
return acc
}, {})
)
ABCList.forEach((kk: any) => {
let colorName = kk[0].phase?.charAt(0).toUpperCase()
let lineS = ABCName.findIndex(item => item === (kk[0].anotherName == '电压负序分量' ? '电压不平衡' : kk[0].anotherName == '电压正序分量' ? '电压不平衡' : kk[0].anotherName == '电压零序分量' ? '电压不平衡' : kk[0].anotherName));
let seriesList: any = []
kk.forEach((cc: any) => {
if (cc.statisticalData !== null) {
yMethodList.push(cc.statisticalData?.toFixed(2) - 0)
}
seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
})
echartsData.value.options.series.push({
@@ -611,12 +632,15 @@ const init = (flag: boolean) => {
? kk[0].phase + '相' + kk[0].anotherName
: kk[0].anotherName,
type: 'line',
color: colorName == 'A' ? '#FFCC00' : colorName == 'B' ? '#009900' : colorName == 'C' ? '#CC0000' : '',
smooth: true,
symbol: 'none',
lineStyle: lineStyle[lineS],
data: seriesList,
yAxisIndex: index
})
})
let [min, max] = yMethod(yMethodList)
echartsData.value.yAxis[index].min = min
echartsData.value.yAxis[index].max = max