谐波频谱数据展示

This commit is contained in:
zhujiyan
2024-10-16 16:57:04 +08:00
parent 1f41ad6c2d
commit 10b8710832
6 changed files with 522 additions and 287 deletions

View File

@@ -10,12 +10,14 @@
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
:multiple-limit="3"
value-key="id"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
v-for="(item, index) in indexOptions"
:label="item.name"
:value="item.id"
:key="index"
:value="item"
></el-option>
</el-select>
</el-form-item>
@@ -26,16 +28,16 @@
<div
class="harmonic_body_charts"
:style="{ height: height }"
v-for="(item, index) in chartsList"
v-for="(item, index) in searchForm.index"
:key="index"
>
<p class="charts_title">
<!-- <p class="charts_title">
{{
indexOptions.find((item: any) => {
return item.id == searchForm.index[index]
})?.name
}}
</p>
</p> -->
<MyEchart :ref="setChildRef(index)" :options="item.echartsData"></MyEchart>
</div>
</div>
@@ -43,8 +45,6 @@
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { getDeviceHarmonicSpectrumData, getRealTimeTableList } from '@/api/cs-device-boot/EquipmentDelivery.ts'
import { mainHeight } from '@/utils/layout'
@@ -55,55 +55,103 @@ searchForm.value = {
}
//统计指标
const indexOptions: any = ref([])
// const legendDictList: any = ref([])
// queryByCode('portable-harmonic').then(res => {
// queryCsDictTree(res.data.id).then(item => {
// indexOptions.value = item.data
// searchForm.value.index[0] = indexOptions.value[0].id
// })
// queryStatistical(res.data.id).then(vv => {
// legendDictList.value = vv.data
// })
// })
indexOptions.value = [
{
id: 0,
name: '电压总有效值(kV)'
name: '电压总有效值(kV)',
children: [
{ name: 'vRmsA', phase: 'A相', data: [] },
{ name: 'vRmsB', phase: 'B相', data: [] },
{ name: 'vRmsC', phase: 'C相', data: [] }
],
unit:'kV',
data: []
},
{
id: 1,
name: '电流总有效值(A)'
name: '电流总有效值(A)',
children: [
{ name: 'iRmsA', phase: 'A相', data: [] },
{ name: 'iRmsB', phase: 'B相', data: [] },
{ name: 'iRmsC', phase: 'C相', data: [] }
],
unit:"A",
data: []
},
{
id: 2,
name: '有功功率(kW)'
name: '有功功率(kW)',
children: [
{ name: 'pA', phase: 'A相', data: [] },
{ name: 'pB', phase: 'B相', data: [] },
{ name: 'pC', phase: 'C相', data: [] },
{ name: 'pTot', phase: '总', data: [] }
],
unit:"kW",
data: []
},
{
id: 3,
name: '无功功率(kW)'
name: '无功功率(kW)',
children: [
{ name: 'qA', phase: 'A相', data: [] },
{ name: 'qB', phase: 'B相', data: [] },
{ name: 'qC', phase: 'C相', data: [] },
{ name: 'qTot', phase: '总', data: [] }
],
unit:"kW",
data: []
},
{
id: 4,
name: '基波电压总有效值(kV)'
name: '基波电压总有效值(kV)',
children: [
{ name: 'v1A', phase: 'A相', data: [] },
{ name: 'v1B', phase: 'B相', data: [] },
{ name: 'v1C', phase: 'C相', data: [] }
],
unit:"kV",
data: []
},
{
id: 5,
name: '基波电流总有效值(A)'
name: '基波电流总有效值(A)',
children: [
{ name: 'i1A', phase: 'A相', data: [] },
{ name: 'i1B', phase: 'B相', data: [] },
{ name: 'i1C', phase: 'C相', data: [] }
],
unit:"A",
data: []
},
{
id: 6,
name: '频率(Hz)'
name: '频率(Hz)',
children: [
{ name: 'freq',phase: '频率', data: [] },
{ name: 'freqDev',phase: '频率偏差', data: [] }
],
unit:"Hz",
data: []
},
{
id: 7,
name: '电压不平衡度(%)'
name: '电压不平衡度(%)',
children: [{ name: 'vUnbalance',phase: '电压不平衡度', data: [] }],
unit:"%",
data: []
},
{
id: 8,
name: '电流不平衡度(%)'
name: '电流不平衡度(%)',
children: [{ name: 'iUnbalance',phase: '电流不平衡度', data: [] }],
unit:"%",
data: []
}
]
searchForm.value.index[0] = indexOptions.value[0].id
searchForm.value.index[0] = indexOptions.value[0]
const heightTop = mainHeight(275)
let height: any = mainHeight(275).height
//谐波频谱参数
@@ -112,20 +160,194 @@ const getHarmonicSpectrumParams = (val: any) => {
params.value = val
init()
}
const mqttMessage: any = ref()
const setHarmonicSpectrumData = (val: any) => {
mqttMessage.value = val
init()
}
const chartsList: any = ref([])
const loading = ref(false)
// 为每个子组件实例设置ref
const setChildRef = (index: any) => {
return `child-${index}`
}
const childRefs = {}
const childRefs: any = {}
const harmonicData: any = ref([])
const init = () => {
loading.value = true
mqttMessage.value
searchForm.value.index.map((item: any, index: any) => {
item?.children.map((vv: any, vvs: any) => {
if (mqttMessage.value[vv.name]) {
console.log(
mqttMessage.value[vv.name],
'这是一个哥哥哥哥哥哥哥哥还是哈哈',
mqttMessage.value.dataTime,
vvs,
index,
vv.name
)
item.linesList = []
item?.data.push({
time: mqttMessage.value.dataTime,
value: mqttMessage.value[vv.name],
key: vv.name
})
vv.data.push(mqttMessage.value[vv.name])
}
})
})
loading.value = false
//循环渲染图表
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 = {
options: {
title: [
{
left: '10%',
top: 0,
text: item.name
}
],
// grid: {
// top: '16%',
// bottom: '15%', //也可设置left和right设置距离来控制图表的大小
// left: '3%',
// right: '4%'
// },
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
show: false
}
}
},
legend: {
data: [],
top: '2%',
right: '2%'
},
xAxis: {
name: '时间',
data: timeList,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: '#000'
}
},
axisTick: {
show: true //隐藏X轴刻度
},
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#000' //X轴文字颜色
}
},
boundaryGap: false
},
yAxis: {
type: 'value',
name: item.unit,
splitLine: {
show: false
},
axisTick: {
show: true
},
axisLine: {
show: true,
lineStyle: {
color: '#000'
}
},
splitNumber: 5,
minInterval: 1
},
series: []
}
}
//根据指标判断渲染几条线
searchForm.value.index.length == 3
? (height = mainHeight(275, 3).height)
: (height = mainHeight(275, searchForm.value.index.length).height)
item.children.map((zz: any) => {
item.echartsData.options.legend.data.push(zz.phase)
item.echartsData.options.series.push({
name: zz.phase,
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#00CC99'
// }e
},
data: zz.data,
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
})
})
console.log(searchForm.value.index, '最新的结果')
return
//横轴数据
item.echartsData.options.xAxis.data =
item.thdDataVOS.length != 0 &&
item.thdDataVOS[0].list &&
item.thdDataVOS[0].list.map((ss: any) => {
return ss.frequency + '次'
})
let aar: any = []
//y轴数据
item.thdDataVOS.map((vv: any) => {
item.echartsData.options.series.push({
name: vv.phase + '相',
type: 'line',
barMaxWidth: 24, //使用的 y 轴的 index在单个图表实例中存在多个 y轴的时候有用
itemStyle: {
// normal: {
barBorderRadius: [3, 3, 0, 0]
// color: '#00CC99'
// }e
},
data: vv.list.map((vvs: any) => {
aar.push(vvs.statisticalData)
return vvs.statisticalData
}),
smooth: true, // 这里设置平滑曲线
symbol: 'none' // 设置为 'none' 去掉折点小圆
})
//legend数据
item.echartsData.options.legend.data.push(vv.phase + '相')
})
let [min, max] = yMethod(aar)
item.echartsData.options.yAxis.max = max
item.echartsData.options.yAxis.min = min
})
return
params.value.list = []
searchForm.value.index.map((item: any) => {
params.value.list.push({ statisticalId: item })
})
//查询谐波频谱
// 查询谐波频谱
getDeviceHarmonicSpectrumData(params.value).then(res => {
res.data.length > 3 ? (height = mainHeight(275, 3).height) : (height = mainHeight(275, res.data.length).height)
chartsList.value = res.data
@@ -182,7 +404,7 @@ const init = () => {
right: '2%'
},
xAxis: {
name: '次数',
name: '时间',
data: [],
axisLine: {
show: true, //隐藏X轴轴线
@@ -264,7 +486,6 @@ const init = () => {
})
loading.value = false
})
return
}
watch(
() => searchForm.value.index,
@@ -279,7 +500,7 @@ watch(
}
)
onMounted(() => {})
defineExpose({ getHarmonicSpectrumParams })
defineExpose({ getHarmonicSpectrumParams, setHarmonicSpectrumData })
</script>
<style lang="scss" scoped>
.harmonic {

View File

@@ -1,8 +1,6 @@
<!-- 实时录波 -->
<template>
<div class="record">
实时录波
</div>
<div class="record">实时录波</div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
@@ -11,9 +9,9 @@ onMounted(() => {
})
</script>
<style lang="scss" scoped>
.record{
width:100%;
height:100%;
.record {
width: 100%;
height: 100%;
border: 2px solid red;
}
</style>

View File

@@ -643,7 +643,7 @@ onMounted(() => {
}
.view_bot {
min-height: 300px;
margin: 10px 0 20px 0;
margin: 10px 0 0 0;
overflow: auto !important;
flex: 1 !important;
padding-bottom: 200px !important;

View File

@@ -9,20 +9,43 @@
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="统计指标" label-width="80px">
<el-select multiple :multiple-limit="3" collapse-tags collapse-tags-tooltip
v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)">
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
<el-select
multiple
:multiple-limit="3"
collapse-tags
collapse-tags-tooltip
v-model="searchForm.index"
placeholder="请选择统计指标"
@change="onIndexChange($event)"
>
<el-option
v-for="item in indexOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<div v-for="(item, index) in countData" :key="index">
<el-form-item :label="item.name + '谐波次数'" v-if="item.countOptions.length != 0"
label-width="180px">
<el-select v-model="item.count" multiple collapse-tags collapse-tags-tooltip
@change="onCountChange($event, index)" placeholder="请选择谐波次数">
<el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
:value="vv"></el-option>
<el-form-item
:label="item.name + '谐波次数'"
v-if="item.countOptions.length != 0"
label-width="180px"
>
<el-select
v-model="item.count"
multiple
collapse-tags
collapse-tags-tooltip
@change="onCountChange($event, index)"
placeholder="请选择谐波次数"
>
<el-option
v-for="vv in item.countOptions"
:key="vv"
:label="vv"
:value="vv"
></el-option>
</el-select>
</el-form-item>
</div>
@@ -32,7 +55,6 @@
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
</template>
</TableHeader>
</div>
<div class="history_chart" :style="pageHeight" v-loading="loading">
<MyEchart ref="historyChart" :options="echartsData" />
@@ -192,14 +214,14 @@ const init = async () => {
let unitList: any = []
let groupedData = chartsList.reduce((acc, item) => {
let key = item.anotherName;
let key = item.anotherName
if (!acc[key]) {
acc[key] = [];
acc[key] = []
}
acc[key].push(item);
return acc;
acc[key].push(item)
return acc
}, {})
let result = Object.values(groupedData);
let result = Object.values(groupedData)
if (chartsList.length > 0) {
unitList = result.map((item: any) => {
return item[0].unit
@@ -208,7 +230,6 @@ const init = async () => {
echartsData.value = {
legend: {
itemWidth: 20,
itemHeight: 10,
itemGap: 15,
@@ -236,18 +257,15 @@ const init = async () => {
backgroundColor: 'rgba(0,0,0,0.35)',
borderWidth: 0,
formatter(params) {
const xname = params[0].value[0];
let str = `${xname}<br>`;
const xname = params[0].value[0]
let str = `${xname}<br>`
params.forEach((el, index) => {
str += `${el.marker}${el.seriesName.split('(')[0]}${el.value[1]}${el.value[2]}<br>`;
});
return str;
},
str += `${el.marker}${el.seriesName.split('(')[0]}${el.value[1]}${
el.value[2]
}<br>`
})
return str
}
},
color: ['#FFCC00', '#009900', '#CC0000', ...color],
xAxis: {
@@ -260,14 +278,10 @@ const init = async () => {
}
}
},
yAxis: [{
}],
yAxis: [{}],
options: {
series: [
]
series: []
}
}
if (chartsList.length > 0) {
@@ -275,7 +289,7 @@ const init = async () => {
unitList.forEach((item: any, index: any) => {
let right = {
position: 'right',
offset: (index - 1) * 80,
offset: (index - 1) * 80
}
echartsData.value.yAxis.push({
name: item,
@@ -283,8 +297,7 @@ const init = async () => {
splitNumber: 5,
minInterval: 1,
splitLine: {
show: false,
show: false
},
...(index > 0 ? right : null)
})
@@ -293,26 +306,26 @@ const init = async () => {
result.forEach((item: any, index: any) => {
let yMethodList: any = []
let ABCList = Object.values(item.reduce((acc, item) => {
let key = item.phase;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(item);
return acc;
}, {}));
ABCList.forEach((kk: any,) => {
let ABCList = Object.values(
item.reduce((acc, item) => {
let key = item.phase
if (!acc[key]) {
acc[key] = []
}
acc[key].push(item)
return acc
}, {})
)
ABCList.forEach((kk: any) => {
let seriesList: any = []
kk.forEach((cc: any) => {
if (cc.statisticalData) {
yMethodList.push(cc.statisticalData?.toFixed(2) - 0)
}
seriesList.push([cc.time, cc.statisticalData?.toFixed(2),cc.unit])
seriesList.push([cc.time, cc.statisticalData?.toFixed(2), cc.unit])
})
echartsData.value.options.series.push({
name: kk[0].phase + '相' + item[0].anotherName,
type: 'line',
@@ -320,17 +333,11 @@ const init = async () => {
symbol: 'none',
data: seriesList,
yAxisIndex: index
})
})
let [min, max] = yMethod(yMethodList)
echartsData.value.yAxis[index].min = min
echartsData.value.yAxis[index].max = max
})
}
loading.value = false
@@ -350,7 +357,6 @@ const selectChange = (flag: boolean) => {
} else {
pageHeight.value = mainHeight(290)
}
}
//导出
const historyChart = ref()
@@ -521,7 +527,7 @@ const onCountChange = (val: any, index: any) => {
countData.value[index].count = [countData.value[index].countOptions[0]]
}
}
const onIndexChange = (val: any,) => {
const onIndexChange = (val: any) => {
if (val.length == 0) {
searchForm.value.index = [indexOptions.value[0].id]
}
@@ -551,7 +557,7 @@ watch(
}
)
// watch(
// () => trendRequestData.value,
// () => trendRequestData.value,
// (val: any, oldval: any) => {
// if (val) {
// init()