434 lines
14 KiB
Vue
434 lines
14 KiB
Vue
<!-- 实时趋势 -->
|
|
<template>
|
|
<div class="harmonic" :style="heightTop" v-loading="loading">
|
|
<div class="harmonic_select">
|
|
<el-form :model="searchForm" id="history_select">
|
|
<el-form-item label="稳态指标">
|
|
<el-select
|
|
multiple
|
|
collapse-tags
|
|
collapse-tags-tooltip
|
|
v-model="searchForm.index"
|
|
placeholder="请选择统计指标"
|
|
:multiple-limit="3"
|
|
value-key="id"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in indexOptions"
|
|
:label="item.name"
|
|
:key="index"
|
|
:value="item"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- <el-button type="primary" :loading="loading" @click="init">查询</el-button> -->
|
|
</el-form>
|
|
</div>
|
|
<div class="harmonic_body">
|
|
<div
|
|
class="harmonic_body_charts"
|
|
:style="{ height: height }"
|
|
v-for="(item, index) in searchForm.index"
|
|
:key="index"
|
|
>
|
|
<MyEchart :ref="setChildRef(index)" :options="item.echartsData" :isInterVal="true"></MyEchart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, watch } from 'vue'
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
|
import { getDeviceHarmonicSpectrumData } from '@/api/cs-device-boot/EquipmentDelivery.ts'
|
|
import { mainHeight } from '@/utils/layout'
|
|
import { yMethod } from '@/utils/echartMethod'
|
|
const searchForm: any = ref({})
|
|
searchForm.value = {
|
|
index: []
|
|
}
|
|
//统计指标
|
|
const indexOptions: any = ref([])
|
|
|
|
// indexOptions.value = [
|
|
// {
|
|
// id: 0,
|
|
// name: '电压总有效值(kV)',
|
|
// children: [
|
|
// { name: 'vRmsA', phase: 'A相', data: [], yMethodList: [] },
|
|
// { name: 'vRmsB', phase: 'B相', data: [], yMethodList: [] },
|
|
// { name: 'vRmsC', phase: 'C相', data: [], yMethodList: [] }
|
|
// ],
|
|
// unit: 'kV',
|
|
// data: [],
|
|
// yMethodList: []
|
|
// },
|
|
// {
|
|
// id: 1,
|
|
// name: '电流总有效值(A)',
|
|
// children: [
|
|
// { name: 'iRmsA', phase: 'A相', data: [], yMethodList: [] },
|
|
// { name: 'iRmsB', phase: 'B相', data: [], yMethodList: [] },
|
|
// { name: 'iRmsC', phase: 'C相', data: [], yMethodList: [] }
|
|
// ],
|
|
// unit: 'A',
|
|
// data: [],
|
|
// yMethodList: []
|
|
// },
|
|
// {
|
|
// id: 2,
|
|
// name: '有功功率(kW)',
|
|
// children: [
|
|
// { name: 'pA', phase: 'A相', data: [], yMethodList: [] },
|
|
// { name: 'pB', phase: 'B相', data: [], yMethodList: [] },
|
|
// { name: 'pC', phase: 'C相', data: [], yMethodList: [] },
|
|
// { name: 'pTot', phase: '总', data: [], yMethodList: [] }
|
|
// ],
|
|
// unit: 'kW',
|
|
// data: [],
|
|
// yMethodList: []
|
|
// },
|
|
// {
|
|
// id: 3,
|
|
// name: '无功功率(kW)',
|
|
// children: [
|
|
// { name: 'qA', phase: 'A相', data: [], yMethodList: [] },
|
|
// { name: 'qB', phase: 'B相', data: [], yMethodList: [] },
|
|
// { name: 'qC', phase: 'C相', data: [], yMethodList: [] },
|
|
// { name: 'qTot', phase: '总', data: [], yMethodList: [] }
|
|
// ],
|
|
// unit: 'kW',
|
|
// data: [],
|
|
// yMethodList: []
|
|
// },
|
|
|
|
// {
|
|
// id: 4,
|
|
// name: '基波电压总有效值(kV)',
|
|
// children: [
|
|
// { name: 'v1A', phase: 'A相', data: [], yMethodList: [] },
|
|
// { name: 'v1B', phase: 'B相', data: [], yMethodList: [] },
|
|
// { name: 'v1C', phase: 'C相', data: [], yMethodList: [] }
|
|
// ],
|
|
// unit: 'kV',
|
|
// data: [],
|
|
// yMethodList: []
|
|
// },
|
|
// {
|
|
// id: 5,
|
|
// name: '基波电流总有效值(A)',
|
|
// children: [
|
|
// { name: 'i1A', phase: 'A相', data: [], yMethodList: [] },
|
|
// { name: 'i1B', phase: 'B相', data: [], yMethodList: [] },
|
|
// { name: 'i1C', phase: 'C相', data: [], yMethodList: [] }
|
|
// ],
|
|
// unit: 'A',
|
|
// data: [],
|
|
// yMethodList: []
|
|
// },
|
|
// {
|
|
// id: 6,
|
|
// name: '频率(Hz)',
|
|
// children: [
|
|
// { name: 'freq', phase: '频率', data: [], yMethodList: [] },
|
|
// { name: 'freqDev', phase: '频率偏差', data: [], yMethodList: [] }
|
|
// ],
|
|
// unit: 'Hz',
|
|
// data: [],
|
|
// yMethodList: []
|
|
// },
|
|
// {
|
|
// id: 7,
|
|
// name: '电压不平衡度(%)',
|
|
// children: [{ name: 'vUnbalance', phase: '电压不平衡度', data: [], yMethodList: [] }],
|
|
// unit: '%',
|
|
// data: [],
|
|
// yMethodList: []
|
|
// },
|
|
// {
|
|
// id: 8,
|
|
// name: '电流不平衡度(%)',
|
|
// children: [{ name: 'iUnbalance', phase: '电流不平衡度', data: [], yMethodList: [] }],
|
|
// unit: '%',
|
|
// data: [],
|
|
// yMethodList: []
|
|
// }
|
|
// ]
|
|
// searchForm.value.index[0] = indexOptions.value[0]
|
|
const heightTop = mainHeight(275)
|
|
let height: any = mainHeight(275).height
|
|
|
|
const loading = ref(false)
|
|
const allDataList: any = ref([])
|
|
const resetData = () => {
|
|
loading.value = true
|
|
indexOptions.value = [
|
|
{
|
|
id: 0,
|
|
name: '电压总有效值(kV)',
|
|
children: [
|
|
{ name: 'vRmsA', phase: 'A相', data: [], yMethodList: [] },
|
|
{ name: 'vRmsB', phase: 'B相', data: [], yMethodList: [] },
|
|
{ name: 'vRmsC', phase: 'C相', data: [], yMethodList: [] }
|
|
],
|
|
unit: 'kV',
|
|
data: [],
|
|
yMethodList: []
|
|
},
|
|
{
|
|
id: 1,
|
|
name: '电流总有效值(A)',
|
|
children: [
|
|
{ name: 'iRmsA', phase: 'A相', data: [], yMethodList: [] },
|
|
{ name: 'iRmsB', phase: 'B相', data: [], yMethodList: [] },
|
|
{ name: 'iRmsC', phase: 'C相', data: [], yMethodList: [] }
|
|
],
|
|
unit: 'A',
|
|
data: [],
|
|
yMethodList: []
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '有功功率(kW)',
|
|
children: [
|
|
{ name: 'pA', phase: 'A相', data: [], yMethodList: [] },
|
|
{ name: 'pB', phase: 'B相', data: [], yMethodList: [] },
|
|
{ name: 'pC', phase: 'C相', data: [], yMethodList: [] },
|
|
{ name: 'pTot', phase: '总', data: [], yMethodList: [] }
|
|
],
|
|
unit: 'kW',
|
|
data: [],
|
|
yMethodList: []
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '无功功率(kW)',
|
|
children: [
|
|
{ name: 'qA', phase: 'A相', data: [], yMethodList: [] },
|
|
{ name: 'qB', phase: 'B相', data: [], yMethodList: [] },
|
|
{ name: 'qC', phase: 'C相', data: [], yMethodList: [] },
|
|
{ name: 'qTot', phase: '总', data: [], yMethodList: [] }
|
|
],
|
|
unit: 'kW',
|
|
data: [],
|
|
yMethodList: []
|
|
},
|
|
|
|
{
|
|
id: 4,
|
|
name: '基波电压总有效值(kV)',
|
|
children: [
|
|
{ name: 'v1A', phase: 'A相', data: [], yMethodList: [] },
|
|
{ name: 'v1B', phase: 'B相', data: [], yMethodList: [] },
|
|
{ name: 'v1C', phase: 'C相', data: [], yMethodList: [] }
|
|
],
|
|
unit: 'kV',
|
|
data: [],
|
|
yMethodList: []
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '基波电流总有效值(A)',
|
|
children: [
|
|
{ name: 'i1A', phase: 'A相', data: [], yMethodList: [] },
|
|
{ name: 'i1B', phase: 'B相', data: [], yMethodList: [] },
|
|
{ name: 'i1C', phase: 'C相', data: [], yMethodList: [] }
|
|
],
|
|
unit: 'A',
|
|
data: [],
|
|
yMethodList: []
|
|
},
|
|
{
|
|
id: 6,
|
|
name: '频率(Hz)',
|
|
children: [
|
|
{ name: 'freq', phase: '频率', data: [], yMethodList: [] },
|
|
{ name: 'freqDev', phase: '频率偏差', data: [], yMethodList: [] }
|
|
],
|
|
unit: 'Hz',
|
|
data: [],
|
|
yMethodList: []
|
|
},
|
|
{
|
|
id: 7,
|
|
name: '电压不平衡度(%)',
|
|
children: [{ name: 'vUnbalance', phase: '电压不平衡度', data: [], yMethodList: [] }],
|
|
unit: '%',
|
|
data: [],
|
|
yMethodList: []
|
|
},
|
|
{
|
|
id: 8,
|
|
name: '电流不平衡度(%)',
|
|
children: [{ name: 'iUnbalance', phase: '电流不平衡度', data: [], yMethodList: [] }],
|
|
unit: '%',
|
|
data: [],
|
|
yMethodList: []
|
|
}
|
|
]
|
|
searchForm.value.index = []
|
|
searchForm.value.index[0] = indexOptions.value[0]
|
|
allDataList.value = []
|
|
}
|
|
resetData()
|
|
const mqttMessage: any = ref()
|
|
const setHarmonicSpectrumData = (val: any) => {
|
|
mqttMessage.value = val
|
|
init()
|
|
}
|
|
// 为每个子组件实例设置ref
|
|
const setChildRef = (index: any) => {
|
|
return `child-${index}`
|
|
}
|
|
const childRefs: any = {}
|
|
const init = () => {
|
|
loading.value = true
|
|
searchForm.value.index.map((item: any, index: any) => {
|
|
item?.children.map((vv: any, vvs: any) => {
|
|
if (mqttMessage.value[vv.name]) {
|
|
item.data.push({
|
|
time: mqttMessage.value.dataTime,
|
|
value: mqttMessage.value[vv.name],
|
|
key: vv.name
|
|
})
|
|
allDataList.value.push(mqttMessage.value[vv.name])
|
|
vv.data.push(mqttMessage.value[vv.name])
|
|
vv.yMethodList.push([mqttMessage.value.dataTime, mqttMessage.value[vv.name] + '', vv.phase])
|
|
}
|
|
})
|
|
})
|
|
//循环渲染图表
|
|
let timeList: any = []
|
|
searchForm.value.index.map((item: any, index: any) => {
|
|
timeList = Array.from(
|
|
new Set(
|
|
item.data.map((vv: any) => {
|
|
return vv.time
|
|
})
|
|
)
|
|
)
|
|
//循环渲染图表
|
|
const refName = setChildRef(index)
|
|
childRefs[refName] = ref(null) // 初始化ref
|
|
item.echartsData = {
|
|
title: [
|
|
{
|
|
left: '10%',
|
|
top: 0,
|
|
text: item.name
|
|
}
|
|
],
|
|
// grid: {
|
|
// top: '16%',
|
|
// bottom: '15%', //也可设置left和right设置距离来控制图表的大小
|
|
// left: '3%',
|
|
// right: '4%'
|
|
// },
|
|
tooltip: {
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
color: '#fff',
|
|
fontSize: 16
|
|
}
|
|
},
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontStyle: 'normal',
|
|
opacity: 0.35,
|
|
fontSize: 14
|
|
},
|
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
borderWidth: 0
|
|
},
|
|
xAxis: {
|
|
name: '时间',
|
|
type: 'time',
|
|
axisLabel: {
|
|
formatter: {
|
|
day: '{MM}-{dd}',
|
|
month: '{MM}',
|
|
year: '{yyyy}'
|
|
}
|
|
}
|
|
// data: timeList
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: item.unit
|
|
},
|
|
series: []
|
|
}
|
|
//根据指标判断渲染几条线
|
|
searchForm.value.index.length == 3
|
|
? (height = mainHeight(275, 3).height)
|
|
: (height = mainHeight(275, searchForm.value.index.length).height)
|
|
item.children.map((zz: any, zzIndex: any) => {
|
|
let [min, max] = yMethod(allDataList.value)
|
|
console.log(max, min)
|
|
item.echartsData.series.push({
|
|
name: zz.phase,
|
|
type: 'line',
|
|
increment: true,
|
|
itemStyle: {
|
|
barBorderRadius: [3, 3, 0, 0],
|
|
color: ['#DAA520', '#2E8B57', '#A52a2a', '#000'][zzIndex]
|
|
},
|
|
data: zz.yMethodList,
|
|
smooth: true, // 这里设置平滑曲线
|
|
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
|
})
|
|
item.echartsData.yAxis.max = max
|
|
item.echartsData.yAxis.min = min
|
|
})
|
|
})
|
|
|
|
loading.value = false
|
|
}
|
|
|
|
onMounted(() => {})
|
|
defineExpose({ resetData, setHarmonicSpectrumData })
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.harmonic {
|
|
width: 100%;
|
|
// height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
.harmonic_select {
|
|
width: 50%;
|
|
height: 30px;
|
|
display: flex;
|
|
position: absolute;
|
|
top: -32px;
|
|
left: 0;
|
|
justify-content: flex-start;
|
|
|
|
.el-button {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.harmonic_body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
|
|
.harmonic_body_charts {
|
|
border: 1px solid #eee;
|
|
position: relative;
|
|
padding-top: 10px;
|
|
box-sizing: border-box;
|
|
|
|
.charts_title {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10%;
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|