Merge branch 'main' of http://192.168.1.22:3000/zcy/canneng-admin
This commit is contained in:
@@ -34,6 +34,7 @@ const resizeHandler = () => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
const initChart = () => {
|
const initChart = () => {
|
||||||
|
console.log(props.options,"888888888");
|
||||||
if (!props.isInterVal && !props.pieInterVal) {
|
if (!props.isInterVal && !props.pieInterVal) {
|
||||||
chart?.dispose()
|
chart?.dispose()
|
||||||
}
|
}
|
||||||
@@ -65,7 +66,7 @@ const initChart = () => {
|
|||||||
},
|
},
|
||||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
confine:true,
|
confine: true,
|
||||||
...(props.options?.tooltip || null)
|
...(props.options?.tooltip || null)
|
||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
@@ -73,10 +74,9 @@ const initChart = () => {
|
|||||||
top: 20,
|
top: 20,
|
||||||
feature: {
|
feature: {
|
||||||
saveAsImage: {
|
saveAsImage: {
|
||||||
title: '保存图片',
|
title: '保存图片'
|
||||||
},
|
},
|
||||||
...(props.options?.toolbox?.featureProps || null),
|
...(props.options?.toolbox?.featureProps || null)
|
||||||
|
|
||||||
},
|
},
|
||||||
// },
|
// },
|
||||||
...(props.options?.toolbox || null)
|
...(props.options?.toolbox || null)
|
||||||
@@ -123,9 +123,10 @@ const initChart = () => {
|
|||||||
series: props.options?.series,
|
series: props.options?.series,
|
||||||
...props.options?.options
|
...props.options?.options
|
||||||
}
|
}
|
||||||
|
// console.log(options.series,"获取x轴");
|
||||||
handlerBar(options)
|
handlerBar(options)
|
||||||
// 处理柱状图
|
// 处理柱状图
|
||||||
chart.setOption(options,true)
|
chart.setOption(options, true)
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
chart.resize()
|
chart.resize()
|
||||||
@@ -214,9 +215,10 @@ const handlerXAxis = () => {
|
|||||||
// textStyle: {
|
// textStyle: {
|
||||||
fontFamily: 'dinproRegular',
|
fontFamily: 'dinproRegular',
|
||||||
color: '#000',
|
color: '#000',
|
||||||
fontSize: '12'
|
fontSize: '12',
|
||||||
// }
|
// }
|
||||||
}
|
},
|
||||||
|
// boundaryGap: false,
|
||||||
}
|
}
|
||||||
// props.options?.xAxis 是数组还是对象
|
// props.options?.xAxis 是数组还是对象
|
||||||
if (Array.isArray(props.options?.xAxis)) {
|
if (Array.isArray(props.options?.xAxis)) {
|
||||||
@@ -234,9 +236,6 @@ const handlerXAxis = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let throttle: ReturnType<typeof setTimeout>
|
let throttle: ReturnType<typeof setTimeout>
|
||||||
// 动态计算table高度
|
// 动态计算table高度
|
||||||
const resizeObserver = new ResizeObserver(entries => {
|
const resizeObserver = new ResizeObserver(entries => {
|
||||||
|
|||||||
@@ -230,3 +230,8 @@
|
|||||||
.el-collapse-item__content{
|
.el-collapse-item__content{
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//解决打开dialog body容器宽度变为 calc(100% - 8px)问题
|
||||||
|
.el-popup-parent--hidden{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@@ -3,9 +3,15 @@
|
|||||||
<TableHeader datePicker>
|
<TableHeader datePicker>
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="数据来源">
|
<el-form-item label="数据来源">
|
||||||
<el-cascader placeholder="请选择数据来源" @change="sourceChange" v-model="tableStore.table.params.cascader"
|
<el-cascader
|
||||||
:options="deviceTreeOptions" :show-all-levels="false" :props="{ checkStrictly: true }"
|
placeholder="请选择数据来源"
|
||||||
clearable></el-cascader>
|
@change="sourceChange"
|
||||||
|
v-model="tableStore.table.params.cascader"
|
||||||
|
:options="deviceTreeOptions"
|
||||||
|
:show-all-levels="false"
|
||||||
|
:props="{ checkStrictly: true }"
|
||||||
|
clearable
|
||||||
|
></el-cascader>
|
||||||
<!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
|
<!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备名称" /> -->
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="级别">
|
<!-- <el-form-item label="级别">
|
||||||
@@ -25,28 +31,54 @@
|
|||||||
<div v-if="view2" style="display: flex">
|
<div v-if="view2" style="display: flex">
|
||||||
<span style="font-size: 14px; line-height: 30px">值类型选择:</span>
|
<span style="font-size: 14px; line-height: 30px">值类型选择:</span>
|
||||||
<el-select @change="changeView" style="width: 240px" v-model="value" placeholder="请选择值类型">
|
<el-select @change="changeView" style="width: 240px" v-model="value" placeholder="请选择值类型">
|
||||||
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
<el-option
|
||||||
:value="item.value"></el-option>
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-button v-if="view2" @click="backbxlb" type="primary" class="el-icon-refresh-right"
|
<el-button
|
||||||
icon="el-icon-Back" style="float: right">
|
v-if="view2"
|
||||||
|
@click="backbxlb"
|
||||||
|
type="primary"
|
||||||
|
class="el-icon-refresh-right"
|
||||||
|
icon="el-icon-Back"
|
||||||
|
style="float: right"
|
||||||
|
>
|
||||||
返回
|
返回
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
|
<el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
|
||||||
<el-tab-pane label="瞬时波形" name="ssbx" class="boxbx pt10 pb10"
|
<el-tab-pane
|
||||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'">
|
label="瞬时波形"
|
||||||
<shushiboxi v-if="bxactiveName == 'ssbx' && showBoxi" :value="value" :boxoList="boxoList" :wp="wp">
|
name="ssbx"
|
||||||
</shushiboxi>
|
class="boxbx pt10 pb10"
|
||||||
|
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||||
|
>
|
||||||
|
<shushiboxi
|
||||||
|
v-if="bxactiveName == 'ssbx' && showBoxi"
|
||||||
|
:value="value"
|
||||||
|
:boxoList="boxoList"
|
||||||
|
:wp="wp"
|
||||||
|
></shushiboxi>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="RMS波形" class="boxbx pt10 pb10" name="rmsbx"
|
<el-tab-pane
|
||||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'">
|
label="RMS波形"
|
||||||
<rmsboxi v-if="bxactiveName == 'rmsbx' && showBoxi" :value="value" :boxoList="boxoList" :wp="wp">
|
class="boxbx pt10 pb10"
|
||||||
</rmsboxi>
|
name="rmsbx"
|
||||||
|
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||||
|
>
|
||||||
|
<rmsboxi
|
||||||
|
v-if="bxactiveName == 'rmsbx' && showBoxi"
|
||||||
|
:value="value"
|
||||||
|
:boxoList="boxoList"
|
||||||
|
:wp="wp"
|
||||||
|
></rmsboxi>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
<!-- <xiebofenxi ref="child" :bxshuju="bxshuju" @backfh="back"></xiebofenxi> -->
|
<!-- <xiebofenxi ref="child" :bxshuju="bxshuju" @backfh="back"></xiebofenxi> -->
|
||||||
@@ -109,7 +141,7 @@ const tableStore = new TableStore({
|
|||||||
{ title: '相别', field: 'evtParamPhase', align: 'center' },
|
{ title: '相别', field: 'evtParamPhase', align: 'center' },
|
||||||
{ title: '持续时间(s)', field: 'evtParamTm', align: 'center' },
|
{ title: '持续时间(s)', field: 'evtParamTm', align: 'center' },
|
||||||
{ title: '暂降深度(%)', field: 'evtParamVVaDepth', align: 'center' },
|
{ title: '暂降深度(%)', field: 'evtParamVVaDepth', align: 'center' },
|
||||||
{ title: '发生时刻', field: 'startTime', align: 'center' },
|
{ title: '发生时刻', field: 'startTime', align: 'center', width: '240' },
|
||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
@@ -130,8 +162,8 @@ const tableStore = new TableStore({
|
|||||||
row.loading1 = true
|
row.loading1 = true
|
||||||
boxoList.value = row
|
boxoList.value = row
|
||||||
boxoList.value.systemType = 'WX'
|
boxoList.value.systemType = 'WX'
|
||||||
boxoList.value.featureAmplitude = row.evtParamVVaDepth != '-' ? (row.evtParamVVaDepth - 0) : null
|
boxoList.value.featureAmplitude = row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
|
||||||
boxoList.value.persistTime = row.evtParamTm != '-' ? (row.evtParamTm - 0) : null
|
boxoList.value.persistTime = row.evtParamTm != '-' ? row.evtParamTm - 0 : null
|
||||||
await analyseWave(row.id)
|
await analyseWave(row.id)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
row.loading1 = false
|
row.loading1 = false
|
||||||
@@ -188,9 +220,10 @@ const tableStore = new TableStore({
|
|||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
tableStore.table.data.forEach((item: any) => {
|
tableStore.table.data.forEach((item: any) => {
|
||||||
item.loading = false
|
item.loading = false
|
||||||
item.evtParamTm = item.evtParamTm.split('s')[0] != '-' ? (item.evtParamTm.split('s')[0] - 0).toFixed(2) : '-'
|
item.evtParamTm =
|
||||||
item.evtParamVVaDepth = item.evtParamVVaDepth.split('%')[0] != "-" ? (item.evtParamVVaDepth.split('%')[0] - 0).toFixed(2) : '-'
|
item.evtParamTm.split('s')[0] != '-' ? (item.evtParamTm.split('s')[0] - 0).toFixed(2) : '-'
|
||||||
|
item.evtParamVVaDepth =
|
||||||
|
item.evtParamVVaDepth.split('%')[0] != '-' ? (item.evtParamVVaDepth.split('%')[0] - 0).toFixed(2) : '-'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -235,7 +268,6 @@ const sourceChange = (e: any) => {
|
|||||||
tableStore.table.params.deviceTypeId = e[0] || ''
|
tableStore.table.params.deviceTypeId = e[0] || ''
|
||||||
tableStore.table.params.engineeringid = e[1] || ''
|
tableStore.table.params.engineeringid = e[1] || ''
|
||||||
tableStore.table.params.projectId = e[2] || ''
|
tableStore.table.params.projectId = e[2] || ''
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -299,6 +331,6 @@ setTimeout(() => {
|
|||||||
tableStore.table.height = mainHeight(200).height as any
|
tableStore.table.height = mainHeight(200).height as any
|
||||||
}, 0)
|
}, 0)
|
||||||
|
|
||||||
const addMenu = () => { }
|
const addMenu = () => {}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss"></style>
|
||||||
|
|||||||
@@ -126,7 +126,7 @@
|
|||||||
<el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
|
<el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
type="primary"
|
type="primary"
|
||||||
:loading="tableLoading"
|
:disabled="tableLoading"
|
||||||
v-if="realTimeFlag"
|
v-if="realTimeFlag"
|
||||||
:icon="DataLine"
|
:icon="DataLine"
|
||||||
@click="handleTrend"
|
@click="handleTrend"
|
||||||
@@ -138,7 +138,7 @@
|
|||||||
v-if="realTimeFlag"
|
v-if="realTimeFlag"
|
||||||
:icon="TrendCharts"
|
:icon="TrendCharts"
|
||||||
@click="handleHarmonicSpectrum"
|
@click="handleHarmonicSpectrum"
|
||||||
:loading="tableLoading"
|
:disabled="tableLoading"
|
||||||
>
|
>
|
||||||
实时趋势
|
实时趋势
|
||||||
</el-button>
|
</el-button>
|
||||||
@@ -190,7 +190,7 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<!-- 循环渲染的card 最新数据/历史数据显示 -->
|
<!-- 循环渲染的card 最新数据/历史数据显示 -->
|
||||||
<div class="content">
|
<div class="content" v-if="tableData.length != 0 && !tableLoading">
|
||||||
<el-card class="box-card" v-for="(item, index) in tableData" :key="index">
|
<el-card class="box-card" v-for="(item, index) in tableData" :key="index">
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
@@ -354,7 +354,7 @@ import {
|
|||||||
getOverLimitData
|
getOverLimitData
|
||||||
} from '@/api/cs-device-boot/EquipmentDelivery'
|
} from '@/api/cs-device-boot/EquipmentDelivery'
|
||||||
import { deviceHisData, deviceRtData } from '@/api/cs-device-boot/csGroup'
|
import { deviceHisData, deviceRtData } from '@/api/cs-device-boot/csGroup'
|
||||||
import { ref, reactive, onMounted, onUnmounted, inject, nextTick } from 'vue'
|
import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
import Trend from './tabs/trend.vue' //趋势数据
|
import Trend from './tabs/trend.vue' //趋势数据
|
||||||
@@ -444,10 +444,10 @@ const handleTrend = async () => {
|
|||||||
trendDataTime.value = obj.dataTime
|
trendDataTime.value = obj.dataTime
|
||||||
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
|
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
|
||||||
tableLoading.value = false
|
tableLoading.value = false
|
||||||
console.log(
|
// console.log(
|
||||||
'谐波频谱---mqtt接收到消息',
|
// '谐波频谱---mqtt接收到消息',
|
||||||
JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
// JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
|
||||||
)
|
// )
|
||||||
}
|
}
|
||||||
// else {
|
// else {
|
||||||
// trendDataTime.value = obj.dataTime
|
// trendDataTime.value = obj.dataTime
|
||||||
@@ -644,6 +644,7 @@ const connectMqtt = () => {
|
|||||||
mqttRef.value = mqtt.connect(url, options)
|
mqttRef.value = mqtt.connect(url, options)
|
||||||
}
|
}
|
||||||
const getRealDataMqttMsg = async () => {
|
const getRealDataMqttMsg = async () => {
|
||||||
|
tableLoading.value=true
|
||||||
if (realDataTimer.value) {
|
if (realDataTimer.value) {
|
||||||
window.clearInterval(realDataTimer.value)
|
window.clearInterval(realDataTimer.value)
|
||||||
}
|
}
|
||||||
@@ -783,6 +784,7 @@ const getRealDataMqttMsg = async () => {
|
|||||||
mqttMessage.value = obj
|
mqttMessage.value = obj
|
||||||
//更新实时数据主页面值
|
//更新实时数据主页面值
|
||||||
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
|
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
|
||||||
|
tableLoading.value = false
|
||||||
//更新实时趋势折线图数据
|
//更新实时趋势折线图数据
|
||||||
if (sonTab.value == 2) {
|
if (sonTab.value == 2) {
|
||||||
!realTimeFlag.value &&
|
!realTimeFlag.value &&
|
||||||
@@ -792,7 +794,6 @@ const getRealDataMqttMsg = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tableLoading.value = false
|
|
||||||
|
|
||||||
//更新谐波频谱数据
|
//更新谐波频谱数据
|
||||||
// !realTimeFlag.value &&
|
// !realTimeFlag.value &&
|
||||||
@@ -822,6 +823,7 @@ const getRealDataMqttMsg = async () => {
|
|||||||
const realDataTimer: any = ref()
|
const realDataTimer: any = ref()
|
||||||
const mqttMessage = ref<any>({})
|
const mqttMessage = ref<any>({})
|
||||||
const handleClick = async (tab?: any) => {
|
const handleClick = async (tab?: any) => {
|
||||||
|
tableLoading.value=true
|
||||||
if (realDataTimer.value) {
|
if (realDataTimer.value) {
|
||||||
clearInterval(realDataTimer.value)
|
clearInterval(realDataTimer.value)
|
||||||
}
|
}
|
||||||
@@ -831,7 +833,6 @@ const handleClick = async (tab?: any) => {
|
|||||||
sonTab.value = null
|
sonTab.value = null
|
||||||
activeTrendName.value = 0
|
activeTrendName.value = 0
|
||||||
mqttMessage.value = {}
|
mqttMessage.value = {}
|
||||||
tableLoading.value = true
|
|
||||||
//点击tab时更新dataSet最新值
|
//点击tab时更新dataSet最新值
|
||||||
if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
|
if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
|
||||||
dataSet.value = tab.props.name
|
dataSet.value = tab.props.name
|
||||||
@@ -984,13 +985,11 @@ const echoName = (value: any, arr: any[]) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {})
|
onMounted(() => {})
|
||||||
onUnmounted(() => {
|
onBeforeUnmount(() => {
|
||||||
if (realDataTimer.value) {
|
clearInterval(realDataTimer.value)
|
||||||
window.clearInterval(realDataTimer.value)
|
clearInterval(trendTimer.value)
|
||||||
}
|
realDataTimer.value = 0
|
||||||
if (trendTimer.value) {
|
trendTimer.value = 0
|
||||||
window.clearInterval(trendTimer.value)
|
|
||||||
}
|
|
||||||
if (mqttRef.value) {
|
if (mqttRef.value) {
|
||||||
mqttRef.value.end()
|
mqttRef.value.end()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,6 +4,15 @@
|
|||||||
<!-- 上传文件列表 -->
|
<!-- 上传文件列表 -->
|
||||||
<div class="offline_data">
|
<div class="offline_data">
|
||||||
<div class="offline_data_btn">
|
<div class="offline_data_btn">
|
||||||
|
<el-button
|
||||||
|
:loading="loading"
|
||||||
|
style="margin-left: 10px"
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
@click="submitUpload"
|
||||||
|
>
|
||||||
|
上传离线数据
|
||||||
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="handleUpload"
|
@click="handleUpload"
|
||||||
@@ -24,16 +33,6 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
<div class="offline_data_list">
|
<div class="offline_data_list">
|
||||||
<el-button
|
|
||||||
:loading="loading"
|
|
||||||
style="margin-left: 10px"
|
|
||||||
size="small"
|
|
||||||
type="primary"
|
|
||||||
@click="submitUpload"
|
|
||||||
>
|
|
||||||
上传离线数据
|
|
||||||
</el-button>
|
|
||||||
<div>
|
|
||||||
<div :style="tableHeight">
|
<div :style="tableHeight">
|
||||||
<vxe-table border auto-resize height="auto" :data="offLineFileList" v-bind="defaultAttribute">
|
<vxe-table border auto-resize height="auto" :data="offLineFileList" v-bind="defaultAttribute">
|
||||||
<vxe-column field="name" align="center" title="文件名"></vxe-column>
|
<vxe-column field="name" align="center" title="文件名"></vxe-column>
|
||||||
@@ -60,13 +59,12 @@
|
|||||||
</vxe-column>
|
</vxe-column>
|
||||||
</vxe-table>
|
</vxe-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button @click="close">取消</el-button>
|
<!-- <el-button @click="close">取消</el-button> -->
|
||||||
<!-- <el-button type="primary" @click="close">提交</el-button> -->
|
<el-button type="primary" @click="close">确定</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|||||||
@@ -4,18 +4,33 @@
|
|||||||
<div class="harmonic_select" v-if="!loading">
|
<div class="harmonic_select" v-if="!loading">
|
||||||
<el-form :model="searchForm" id="history_select">
|
<el-form :model="searchForm" id="history_select">
|
||||||
<el-form-item label="稳态指标">
|
<el-form-item label="稳态指标">
|
||||||
<el-select multiple collapse-tags collapse-tags-tooltip v-model="searchForm.index"
|
<el-select
|
||||||
placeholder="请选择统计指标" :multiple-limit="3" value-key="id">
|
multiple
|
||||||
<el-option v-for="(item, index) in indexOptions" :label="item.name" :key="index"
|
collapse-tags
|
||||||
:value="item"></el-option>
|
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-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-button type="primary" :loading="loading" @click="init">查询</el-button> -->
|
<!-- <el-button type="primary" :loading="loading" @click="init">查询</el-button> -->
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
<div class="harmonic_body">
|
<div class="harmonic_body">
|
||||||
<div class="harmonic_body_charts" :style="{ height: height }" v-for="(item, index) in searchForm.index"
|
<div
|
||||||
:key="index">
|
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>
|
<MyEchart :ref="setChildRef(index)" :options="item.echartsData" :isInterVal="true"></MyEchart>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -143,6 +158,7 @@ let height: any = mainHeight(275).height
|
|||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const allDataList: any = ref([])
|
const allDataList: any = ref([])
|
||||||
|
const xAixsTimeList: any = ref([])
|
||||||
const resetData = () => {
|
const resetData = () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
indexOptions.value = [
|
indexOptions.value = [
|
||||||
@@ -252,11 +268,11 @@ const resetData = () => {
|
|||||||
searchForm.value.index = []
|
searchForm.value.index = []
|
||||||
searchForm.value.index[0] = indexOptions.value[0]
|
searchForm.value.index[0] = indexOptions.value[0]
|
||||||
allDataList.value = []
|
allDataList.value = []
|
||||||
|
xAixsTimeList.value = []
|
||||||
}
|
}
|
||||||
resetData()
|
resetData()
|
||||||
const mqttMessage: any = ref()
|
const mqttMessage: any = ref()
|
||||||
const setHarmonicSpectrumData = (val: any) => {
|
const setHarmonicSpectrumData = (val: any) => {
|
||||||
console.log(val,"来了来了来了");
|
|
||||||
mqttMessage.value = val
|
mqttMessage.value = val
|
||||||
init()
|
init()
|
||||||
}
|
}
|
||||||
@@ -271,36 +287,30 @@ const init = () => {
|
|||||||
item?.children.map((vv: any, vvs: any) => {
|
item?.children.map((vv: any, vvs: any) => {
|
||||||
if (mqttMessage.value[vv.name]) {
|
if (mqttMessage.value[vv.name]) {
|
||||||
item.data.push({
|
item.data.push({
|
||||||
time: mqttMessage.value.dataTime,
|
// time: mqttMessage.value.dataTime,
|
||||||
value: mqttMessage.value[vv.name],
|
value: mqttMessage.value[vv.name],
|
||||||
key: vv.name
|
key: vv.name
|
||||||
})
|
})
|
||||||
allDataList.value.push(mqttMessage.value[vv.name])
|
allDataList.value.push(mqttMessage.value[vv.name])
|
||||||
vv.data.push(mqttMessage.value[vv.name])
|
vv.data.push(mqttMessage.value[vv.name])
|
||||||
vv.yMethodList.push([mqttMessage.value.dataTime, mqttMessage.value[vv.name] + '', vv.phase])
|
vv.yMethodList.push([mqttMessage.value.dataTime.split(" ")[1], mqttMessage.value[vv.name] + '', vv.phase])
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
//循环渲染图表
|
//循环渲染图表
|
||||||
let timeList: any = []
|
|
||||||
|
|
||||||
|
xAixsTimeList.value.push(mqttMessage.value.dataTime.split(" ")[1])
|
||||||
searchForm.value.index.map((item: any, index: 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)
|
const refName = setChildRef(index)
|
||||||
childRefs[refName] = ref(null) // 初始化ref
|
childRefs[refName] = ref(null) // 初始化ref
|
||||||
|
|
||||||
item.echartsData = {
|
item.echartsData = {
|
||||||
title:
|
title: {
|
||||||
{
|
|
||||||
text: item.name
|
text: item.name
|
||||||
}
|
},
|
||||||
,
|
|
||||||
// grid: {
|
// grid: {
|
||||||
// top: '16%',
|
// top: '16%',
|
||||||
// bottom: '15%', //也可设置left和right设置距离来控制图表的大小
|
// bottom: '15%', //也可设置left和right设置距离来控制图表的大小
|
||||||
@@ -326,21 +336,22 @@ const init = () => {
|
|||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
name: '时间',
|
name: '时间',
|
||||||
type: 'time',
|
type: 'category',
|
||||||
axisLabel: {
|
// axisLabel: {
|
||||||
formatter: {
|
// formatter: {
|
||||||
day: '{MM}-{dd}',
|
// day: '{MM}-{dd}',
|
||||||
month: '{MM}',
|
// month: '{MM}',
|
||||||
year: '{yyyy}'
|
// year: '{yyyy}'
|
||||||
}
|
// }
|
||||||
}
|
// },
|
||||||
// data: timeList
|
boundaryGap: false,
|
||||||
|
data: xAixsTimeList.value
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
// type: 'value',
|
// type: 'value',
|
||||||
name: item.unit,
|
name: item.unit,
|
||||||
splitNumber: 5,
|
splitNumber: 5,
|
||||||
minInterval: 1,
|
minInterval: 1
|
||||||
},
|
},
|
||||||
series: []
|
series: []
|
||||||
}
|
}
|
||||||
@@ -349,8 +360,6 @@ const init = () => {
|
|||||||
? (height = mainHeight(275, 3).height)
|
? (height = mainHeight(275, 3).height)
|
||||||
: (height = mainHeight(275, searchForm.value.index.length).height)
|
: (height = mainHeight(275, searchForm.value.index.length).height)
|
||||||
item.children.map((zz: any, zzIndex: any) => {
|
item.children.map((zz: any, zzIndex: any) => {
|
||||||
|
|
||||||
|
|
||||||
item.echartsData.series.push({
|
item.echartsData.series.push({
|
||||||
name: zz.phase,
|
name: zz.phase,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
@@ -363,9 +372,8 @@ const init = () => {
|
|||||||
smooth: true, // 这里设置平滑曲线
|
smooth: true, // 这里设置平滑曲线
|
||||||
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
symbol: 'none' // 设置为 'none' 去掉折点小圆
|
||||||
})
|
})
|
||||||
|
|
||||||
})
|
})
|
||||||
let arrList = item.children?.map(item => item.yMethodList.map(val => val[1])).flat()
|
let arrList = item.children?.map((item: any) => item.yMethodList.map((val: any) => val[1])).flat()
|
||||||
let [min, max] = yMethod(arrList.length == 0 ? [0] : arrList)
|
let [min, max] = yMethod(arrList.length == 0 ? [0] : arrList)
|
||||||
item.echartsData.yAxis.max = max
|
item.echartsData.yAxis.max = max
|
||||||
item.echartsData.yAxis.min = min
|
item.echartsData.yAxis.min = min
|
||||||
@@ -374,7 +382,7 @@ const init = () => {
|
|||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => { })
|
onMounted(() => {})
|
||||||
defineExpose({ resetData, setHarmonicSpectrumData })
|
defineExpose({ resetData, setHarmonicSpectrumData })
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -601,6 +601,7 @@ onMounted(() => {
|
|||||||
changeType.value = localStorage.getItem('changeType') ? localStorage.getItem('changeType') : ''
|
changeType.value = localStorage.getItem('changeType') ? localStorage.getItem('changeType') : ''
|
||||||
})
|
})
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
|
console.log(6666);
|
||||||
if (mqttRef.value) {
|
if (mqttRef.value) {
|
||||||
mqttRef.value.end()
|
mqttRef.value.end()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -753,9 +753,11 @@ const formatCountOptions = (list: any) => {
|
|||||||
countData.value.map((item: any, key: any) => {
|
countData.value.map((item: any, key: any) => {
|
||||||
if (item.name.includes('谐波电流有效值')) {
|
if (item.name.includes('谐波电流有效值')) {
|
||||||
item.name = '谐波电流次数'
|
item.name = '谐波电流次数'
|
||||||
} else if (item.name.includes('谐波电压含有率')) {
|
}
|
||||||
|
if (item.name.includes('谐波电压含有率')) {
|
||||||
item.name = '谐波电压次数'
|
item.name = '谐波电压次数'
|
||||||
} else if (item.name.includes('间谐波电压含有率')) {
|
}
|
||||||
|
if (item.name.includes('间谐波电压含有率')) {
|
||||||
item.name = '间谐波电压次数'
|
item.name = '间谐波电压次数'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user