谐波频谱数据展示
This commit is contained in:
@@ -12,9 +12,20 @@
|
||||
<!-- <el-button v-if="deviceType == '1'" type="primary" @click="handleDownLoadTemplate">
|
||||
模版下载
|
||||
</el-button> -->
|
||||
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Connection" @click="handleImport">离线补召</el-button>
|
||||
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice">在线补召</el-button>
|
||||
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Tickets" @click="handleAnalysisList">补招日志</el-button>
|
||||
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Connection" @click="handleImport">
|
||||
离线补召
|
||||
</el-button>
|
||||
<el-button v-if="deviceType == '1'" type="primary" icon="el-icon-Monitor" @click="handleaddDevice">
|
||||
在线补召
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="deviceType == '1'"
|
||||
type="primary"
|
||||
icon="el-icon-Tickets"
|
||||
@click="handleAnalysisList"
|
||||
>
|
||||
补招日志
|
||||
</el-button>
|
||||
</template>
|
||||
<el-descriptions-item label="名称">
|
||||
{{ deviceData.name ? deviceData.name : '/' }}
|
||||
@@ -373,8 +384,6 @@ const handleRecordWaves = () => {
|
||||
}
|
||||
//实时趋势
|
||||
const realTrendRef = ref()
|
||||
//谐波频谱
|
||||
const harmonicSpectrumRef = ref()
|
||||
const changeTrendType = (val: any) => {
|
||||
activeTrendName.value = val * 1
|
||||
handleTrend()
|
||||
@@ -409,12 +418,17 @@ const handleTrend = async () => {
|
||||
realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value, activeTrendName: activeTrendName.value })
|
||||
}
|
||||
//谐波频谱
|
||||
const harmonicSpectrumRef = ref()
|
||||
//谐波频谱
|
||||
const handleHarmonicSpectrum = () => {
|
||||
realTimeFlag.value = false
|
||||
sonTab.value = 2
|
||||
harmonicSpectrumRef.value &&
|
||||
harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
|
||||
// harmonicSpectrumRef.value &&
|
||||
// harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
|
||||
window.clearInterval(timer.value)
|
||||
clearInterval(realDataTimer.value)
|
||||
realTimeFlag.value = false
|
||||
sonTab.value = 2
|
||||
getRealDataMqttMsg()
|
||||
}
|
||||
//返回
|
||||
const handleReturn = () => {
|
||||
@@ -542,78 +556,7 @@ const connectMqtt = () => {
|
||||
}
|
||||
mqttRef.value = mqtt.connect(url, options)
|
||||
}
|
||||
//tab点击事件
|
||||
|
||||
const realDataTimer: any = ref()
|
||||
const handleClick = async (tab?: any) => {
|
||||
if (realDataTimer.value) {
|
||||
window.clearInterval(realDataTimer.value)
|
||||
}
|
||||
tableLoading.value = true
|
||||
//点击tab时更新dataSet最新值
|
||||
if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
|
||||
dataSet.value = tab.props.name
|
||||
}
|
||||
|
||||
//初始化点击tab隐藏实时录波、实时趋势、谐波频谱按钮
|
||||
realTimeFlag.value = false
|
||||
//初始化点击tab隐藏子页面
|
||||
sonTab.value = null
|
||||
if (tab) {
|
||||
tableData.value = []
|
||||
formInline.pageNum = 1
|
||||
}
|
||||
if (timer.value) {
|
||||
window.clearInterval(timer.value)
|
||||
}
|
||||
|
||||
//查询历史指标
|
||||
if (dataSet.value.includes('_history')) {
|
||||
formInline.startTime = datePickerRef.value && datePickerRef.value.timeValue[0]
|
||||
formInline.endTime = datePickerRef.value && datePickerRef.value.timeValue[1]
|
||||
formInline.id = dataSet.value.replace('_history', '')
|
||||
await deviceHisData(formInline)
|
||||
.then((res: any) => {
|
||||
tableData.value = res.data.records
|
||||
formInline.total = res.data.total
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
.catch(e => {
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
}
|
||||
//查询趋势数据
|
||||
if (dataSet.value.includes('_trenddata')) {
|
||||
let obj = {
|
||||
devId: deviceId.value, //e.id
|
||||
lineId: lineId.value, //e.pid
|
||||
type: 1,
|
||||
list: [
|
||||
{
|
||||
lineId: lineId.value,
|
||||
devId: dataSet.value.replace('_trenddata', '')
|
||||
}
|
||||
]
|
||||
// startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
|
||||
// endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
|
||||
}
|
||||
setTimeout(() => {
|
||||
trendRef.value && trendRef.value.getTrendRequest(obj)
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
}
|
||||
//查询实时数据
|
||||
if (dataSet.value.includes('_realtimedata')) {
|
||||
//查询实时数据显示实时录波、实时趋势、谐波频谱
|
||||
realTimeFlag.value = true
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
|
||||
const getRealDataMqttMsg = async () => {
|
||||
//新的实时数据
|
||||
//1.调用接口 mqtt推送数据
|
||||
await getBasicRealData(lineId.value).then((res: any) => {
|
||||
@@ -624,11 +567,8 @@ const handleClick = async (tab?: any) => {
|
||||
}
|
||||
})
|
||||
//2.建立mqtt通讯
|
||||
|
||||
const mqttMessage = ref<any>({})
|
||||
|
||||
//每隔30s调用一下接口,通知后台推送mqtt消息
|
||||
realDataTimer.value = setInterval(() => {
|
||||
realDataTimer.value = await setInterval(() => {
|
||||
getBasicRealData(lineId.value).then((res: any) => {
|
||||
console.log(res, '获取基础实时数据')
|
||||
})
|
||||
@@ -755,12 +695,18 @@ const handleClick = async (tab?: any) => {
|
||||
}
|
||||
//保留两位小数
|
||||
for (var i in obj) {
|
||||
if (typeof obj[i] == 'number' && obj[i] != 0) {
|
||||
obj[i].toFixed(2)
|
||||
if (typeof obj[i] == 'number' && obj[i] != 0 && Math.abs(obj[i]) % 1 != 0) {
|
||||
obj[i] = obj[i].toFixed(2)
|
||||
}
|
||||
}
|
||||
mqttMessage.value = obj
|
||||
realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
|
||||
//更新实时数据值
|
||||
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
|
||||
//更新谐波频谱数据
|
||||
!realTimeFlag.value &&
|
||||
sonTab.value == 2 &&
|
||||
harmonicSpectrumRef.value &&
|
||||
harmonicSpectrumRef.value.setHarmonicSpectrumData(mqttMessage.value)
|
||||
})
|
||||
|
||||
mqttRef.value.on('error', (error: any) => {
|
||||
@@ -772,6 +718,81 @@ const handleClick = async (tab?: any) => {
|
||||
console.log('mqtt客户端已断开连接.....')
|
||||
})
|
||||
}
|
||||
//tab点击事件
|
||||
|
||||
const realDataTimer: any = ref()
|
||||
const mqttMessage = ref<any>({})
|
||||
const handleClick = async (tab?: any) => {
|
||||
if (realDataTimer.value) {
|
||||
window.clearInterval(realDataTimer.value)
|
||||
}
|
||||
tableLoading.value = true
|
||||
//点击tab时更新dataSet最新值
|
||||
if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
|
||||
dataSet.value = tab.props.name
|
||||
}
|
||||
|
||||
//初始化点击tab隐藏实时录波、实时趋势、谐波频谱按钮
|
||||
realTimeFlag.value = false
|
||||
//初始化点击tab隐藏子页面
|
||||
sonTab.value = null
|
||||
if (tab) {
|
||||
tableData.value = []
|
||||
formInline.pageNum = 1
|
||||
}
|
||||
if (timer.value) {
|
||||
window.clearInterval(timer.value)
|
||||
}
|
||||
|
||||
//查询历史指标
|
||||
if (dataSet.value.includes('_history')) {
|
||||
formInline.startTime = datePickerRef.value && datePickerRef.value.timeValue[0]
|
||||
formInline.endTime = datePickerRef.value && datePickerRef.value.timeValue[1]
|
||||
formInline.id = dataSet.value.replace('_history', '')
|
||||
await deviceHisData(formInline)
|
||||
.then((res: any) => {
|
||||
tableData.value = res.data.records
|
||||
formInline.total = res.data.total
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
.catch(e => {
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
})
|
||||
}
|
||||
//查询趋势数据
|
||||
if (dataSet.value.includes('_trenddata')) {
|
||||
let obj = {
|
||||
devId: deviceId.value, //e.id
|
||||
lineId: lineId.value, //e.pid
|
||||
type: 1,
|
||||
list: [
|
||||
{
|
||||
lineId: lineId.value,
|
||||
devId: dataSet.value.replace('_trenddata', '')
|
||||
}
|
||||
]
|
||||
// startTime: datePickerRef.value && datePickerRef.value.timeValue[0],
|
||||
// endTime: datePickerRef.value && datePickerRef.value.timeValue[1]
|
||||
}
|
||||
setTimeout(() => {
|
||||
trendRef.value && trendRef.value.getTrendRequest(obj)
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
}
|
||||
//查询实时数据
|
||||
if (dataSet.value.includes('_realtimedata')) {
|
||||
//查询实时数据显示实时录波、实时趋势、谐波频谱
|
||||
realTimeFlag.value = true
|
||||
setTimeout(() => {
|
||||
tableLoading.value = false
|
||||
}, 1500)
|
||||
|
||||
getRealDataMqttMsg()
|
||||
}
|
||||
//查询暂态事件
|
||||
if (dataSet.value.includes('_event')) {
|
||||
let obj = {
|
||||
|
||||
@@ -1,21 +1,11 @@
|
||||
<template>
|
||||
<div class="default-main device">
|
||||
<currentDevice ref="currentDeviceRef" />
|
||||
<!-- <el-tabs v-model="activeName" type="border-card">
|
||||
<el-tab-pane label="当前设备补召" name="0">
|
||||
<currentDevice v-if="activeName == '0'" ref="currentDeviceRef"/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="历史设备补召" name="1">
|
||||
<history v-if="activeName == '1'" />
|
||||
</el-tab-pane>
|
||||
</el-tabs> -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, watch, nextTick } from 'vue'
|
||||
// import current from './supplementaryRecruitment/current.vue'
|
||||
import currentDevice from './supplementaryRecruitment/currentDevice.vue'
|
||||
import history from './supplementaryRecruitment/history.vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
const route = useRoute()
|
||||
const activeName = ref('0')
|
||||
@@ -27,7 +17,6 @@ watch(
|
||||
nextTick(() => {
|
||||
currentDeviceRef.value && currentDeviceRef.value.getMakeUpDataList(route.query)
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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,15 +160,189 @@ 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 })
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<!-- 实时录波 -->
|
||||
<template>
|
||||
<div class="record">
|
||||
实时录波
|
||||
</div>
|
||||
<div class="record">实时录波</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
let ABCList = Object.values(
|
||||
item.reduce((acc, item) => {
|
||||
let key = item.phase
|
||||
if (!acc[key]) {
|
||||
acc[key] = [];
|
||||
acc[key] = []
|
||||
}
|
||||
acc[key].push(item);
|
||||
return acc;
|
||||
}, {}));
|
||||
ABCList.forEach((kk: any,) => {
|
||||
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])
|
||||
})
|
||||
|
||||
|
||||
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]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user