谐波频谱添加奇次、偶次区分
历史趋势添加线区分指标
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
})
|
||||
})
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user