1009 lines
42 KiB
Vue
1009 lines
42 KiB
Vue
<template>
|
||
<Cn-page :loading="loading" noPadding>
|
||
<view slot="body">
|
||
<view class="realTime">
|
||
<!-- 头部卡片 -->
|
||
<view class="info-card-wrap">
|
||
<view class="info-card">
|
||
<view class="info-item">
|
||
监测点名称：<view
|
||
><picker
|
||
@change="lineChange"
|
||
@cancel="selectProject = false"
|
||
:value="lineKey"
|
||
:range="lineList"
|
||
range-key="name"
|
||
>
|
||
<view class="nav-menu" @click="selectProject = true">
|
||
{{ lineList[lineKey].name }}
|
||
|
||
<uni-icons type="bottom" size="18" color="#fff"></uni-icons>
|
||
</view> </picker
|
||
></view>
|
||
</view>
|
||
<view class="info-item">
|
||
所属工程：<view>{{ engineeringName }}</view>
|
||
</view>
|
||
<view class="info-item">
|
||
所属项目：<view>{{ equipmentName }}</view>
|
||
</view>
|
||
|
||
<view class="info-item status">
|
||
通讯状态：<view
|
||
class="status-normal"
|
||
:style="{ color: runStatus == 1 ? '#ff3b30' : '#00ff88' }"
|
||
>{{ runStatus == 1 ? '离线' : '在线' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view class="time-bar">
|
||
<view class="time">
|
||
<u-icon name="clock" size="36"></u-icon>
|
||
<text>{{ realTime }}</text>
|
||
</view>
|
||
<button class="mini-btn" type="primary" :disabled="disabled" size="mini" @click="handleRefresh">
|
||
{{ disabled ? `刷新(${countdown}s)` : '刷新' }}
|
||
</button>
|
||
</view>
|
||
<!-- 仪表盘 -->
|
||
<view>
|
||
<view class="chartBox">
|
||
<view>
|
||
<view class="chart">
|
||
<l-echart
|
||
ref="echartV1"
|
||
@finished="initChart('echartV1', 'echartsDataV1')"
|
||
></l-echart>
|
||
</view>
|
||
<view class="chart">
|
||
<l-echart
|
||
ref="echartV2"
|
||
@finished="initChart('echartV2', 'echartsDataV2')"
|
||
></l-echart>
|
||
</view>
|
||
<view class="chart">
|
||
<l-echart
|
||
ref="echartV3"
|
||
@finished="initChart('echartV3', 'echartsDataV3')"
|
||
></l-echart>
|
||
</view>
|
||
<view class="text"> 电压有效值 </view>
|
||
</view>
|
||
<view class="middle" style="width: 100%">
|
||
<l-echart
|
||
class="echart1"
|
||
ref="echart0"
|
||
@finished="initChart('echart0', 'echartsData0')"
|
||
></l-echart>
|
||
<l-echart
|
||
class="echart1"
|
||
ref="echart1"
|
||
@finished="initChart('echart1', 'echartsData1')"
|
||
></l-echart>
|
||
<view class="text text_center"> 基波电压/电流<br />幅值(相位) </view>
|
||
</view>
|
||
<view>
|
||
<view class="chart">
|
||
<l-echart
|
||
ref="echartA1"
|
||
@finished="initChart('echartA1', 'echartsDataA1')"
|
||
></l-echart>
|
||
</view>
|
||
<view class="chart">
|
||
<l-echart
|
||
ref="echartA2"
|
||
@finished="initChart('echartA2', 'echartsDataA2')"
|
||
></l-echart>
|
||
</view>
|
||
<view class="chart">
|
||
<l-echart
|
||
ref="echartA3"
|
||
@finished="initChart('echartA3', 'echartsDataA3')"
|
||
></l-echart>
|
||
</view>
|
||
<view class="text"> 电压有效值 </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部数据表格 -->
|
||
<view class="data-table">
|
||
<view class="table-header">
|
||
<text></text>
|
||
<text>A相</text>
|
||
<text>B相</text>
|
||
<text>C相</text>
|
||
</view>
|
||
<view class="table-row" v-for="value in realTimeData">
|
||
<text>{{ value.name }}</text>
|
||
<text>{{ value.A }}</text>
|
||
<text>{{ value.B }}</text>
|
||
<text>{{ value.C }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</Cn-page>
|
||
</template>
|
||
<script>
|
||
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
|
||
import { MQTT_IP, MQTT_OPTIONS } from '@/common/js/mqtt.js'
|
||
import mqtt from 'mqtt/dist/mqtt.js'
|
||
import { getBaseRealData } from '@/common/api/harmonic.js'
|
||
export default {
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
loading: true,
|
||
// 使用上面定义的图表配置项
|
||
option: {},
|
||
echartsData0: {},
|
||
echartsData1: {},
|
||
echartsDataV1: {},
|
||
echartsDataV2: {},
|
||
echartsDataV3: {},
|
||
echartsDataA1: {},
|
||
echartsDataA2: {},
|
||
echartsDataA3: {},
|
||
// 图表实例，用于后续操作
|
||
echart0: null,
|
||
echart1: null,
|
||
echartV1: null,
|
||
echartV2: null,
|
||
echartV3: null,
|
||
echartA1: null,
|
||
echartA2: null,
|
||
echartA3: null,
|
||
ptName: 'star',
|
||
client: null,
|
||
timer: null,
|
||
numTimer: null,
|
||
userInfo: {},
|
||
realTime: '',
|
||
realTimeData: [
|
||
{ name: '电压有效值(kV)', A: '/', B: '/', C: '/' },
|
||
{ name: '电流有效值(A)', A: '/', B: '/', C: '/' },
|
||
{ name: '基波电压幅值(kV)', A: '/', B: '/', C: '/' },
|
||
{ name: '基波电压相位(°)', A: '/', B: '/', C: '/' },
|
||
{ name: '基波电流幅值(A)', A: '/', B: '/', C: '/' },
|
||
{ name: '基波电流相位(°)', A: '/', B: '/', C: '/' },
|
||
{ name: '电压偏差(%)', A: '/', B: '/', C: '/' },
|
||
{ name: '电压总谐波畸变率(%)', A: '/', B: '/', C: '/' },
|
||
],
|
||
disabled: false,
|
||
countdown: 30,
|
||
lineId: '00B78D00A87A1',
|
||
lineKey: 0,
|
||
lineList: [],
|
||
engineeringName: '',
|
||
equipmentName: '',
|
||
runStatus: 1,
|
||
connection: false,
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
console.log('🚀 ~ options:', options)
|
||
this.lineKey = 0
|
||
this.lineList = JSON.parse(options.lineList)
|
||
this.lineId = this.lineList[0].lineId
|
||
this.engineeringName = options.engineeringName
|
||
this.equipmentName = options.equipmentName
|
||
this.runStatus = options.runStatus
|
||
this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
|
||
this.echartsData0 = this.initEcharts0()
|
||
this.echartsData1 = this.initEcharts1()
|
||
this.echartsDataV1 = this.initEcharts('#DAA520', 0, 'A相(kV)')
|
||
this.echartsDataV2 = this.initEcharts('#2E8B57', 0, 'B相(kV)')
|
||
this.echartsDataV3 = this.initEcharts('#A52a2a', 0, 'C相(kV)')
|
||
this.echartsDataA1 = this.initEcharts('#DAA520', 1, 'A相(A)')
|
||
this.echartsDataA2 = this.initEcharts('#2E8B57', 1, 'B相(A)')
|
||
this.echartsDataA3 = this.initEcharts('#A52a2a', 1, 'C相(A)')
|
||
this.loading = false
|
||
this.$nextTick(() => {
|
||
this.setMqtt(0)
|
||
this.initMqtt()
|
||
})
|
||
},
|
||
onUnload() {
|
||
const charts = [
|
||
this.echart0,
|
||
this.echart1,
|
||
this.echartV1,
|
||
this.echartV2,
|
||
this.echartV3,
|
||
this.echartA1,
|
||
this.echartA2,
|
||
this.echartA3,
|
||
]
|
||
charts.forEach((chart) => {
|
||
if (chart && chart.dispose) {
|
||
chart.dispose()
|
||
chart = null
|
||
}
|
||
})
|
||
clearInterval(this.timer)
|
||
this.client && this.client.end()
|
||
},
|
||
|
||
methods: {
|
||
initEcharts0() {
|
||
return {
|
||
tooltip: { show: false },
|
||
toolbox: {
|
||
show: false,
|
||
},
|
||
series: [
|
||
// 外圈电压 内圈电流
|
||
{
|
||
zlevel: 2,
|
||
name: '基波电流相位',
|
||
type: 'gauge',
|
||
// 表盘最小值
|
||
min: 180,
|
||
// 表盘最大值
|
||
max: -180,
|
||
// 表盘分割数
|
||
splitNumber: 6,
|
||
// 圆心位置
|
||
center: ['50%', '50%'],
|
||
// 半径
|
||
radius: '60%',
|
||
startAngle: 180,
|
||
endAngle: -179.99,
|
||
|
||
// 指针方向
|
||
clockWise: true,
|
||
title: false,
|
||
// 表盘外框
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: [
|
||
[0.25, '#9D322D'],
|
||
[0.5, '#9D322D'],
|
||
[0.75, '#9D322D'],
|
||
[1, '#9D322D'],
|
||
],
|
||
width: 2,
|
||
},
|
||
},
|
||
// 表盘细分数
|
||
axisTick: {
|
||
show: true,
|
||
splitNumber: 5,
|
||
distance: 0,
|
||
length: 4,
|
||
lineStyle: {
|
||
color: '#9D322D',
|
||
width: 1,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
// 分割线
|
||
splitLine: {
|
||
show: true,
|
||
length: 10,
|
||
distance: 0,
|
||
lineStyle: {
|
||
color: '#9D322D',
|
||
width: 2,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
// 分割线标识
|
||
axisLabel: {
|
||
show: true,
|
||
distance: 2,
|
||
fontSize: 10,
|
||
formatter: function (v) {
|
||
switch (v + '') {
|
||
case '-180':
|
||
return ''
|
||
default:
|
||
return v
|
||
}
|
||
},
|
||
},
|
||
|
||
// 指针设置
|
||
pointer: {
|
||
icon: 'path://m368.01136,209.80637l173.00807,-193.72679c19.14653,-21.43943 50.16392,-21.43943 69.31045,0l172.93149,193.72679c1.22537,1.37213 1.22537,3.51607 0,4.8882l-47.63657,53.34133c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-113.65381,-127.26452c-1.91465,-2.14395 -5.20785,-0.60031 -5.20785,2.40122l0,731.94254c0,1.88667 -1.37855,3.43031 -3.06345,3.43031l-67.39579,0c-1.6849,0 -3.06345,-1.54364 -3.06345,-3.43031l0,-731.94254c0,-3.08728 -3.2932,-4.54517 -5.20785,-2.40122l-113.65381,127.26452c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-47.63657,-53.34133c-1.22537,-1.37213 -1.22537,-3.51607 0,-4.88819l0,-0.00001M539,861.23064h73v800h-73z',
|
||
length: '90%',
|
||
width: 15,
|
||
opacity: 1,
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
//数值位置
|
||
|
||
data: [
|
||
{
|
||
value: 0,
|
||
name: 'A相',
|
||
itemStyle: {
|
||
color: '#DAA520',
|
||
},
|
||
},
|
||
{
|
||
value: 0,
|
||
name: 'B相',
|
||
itemStyle: {
|
||
color: '#2E8B57',
|
||
},
|
||
},
|
||
{
|
||
value: 0,
|
||
name: 'C相',
|
||
itemStyle: {
|
||
color: '#A52a2a',
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
}
|
||
},
|
||
initEcharts1() {
|
||
let _this = this
|
||
let color = '#DAA520'
|
||
return {
|
||
tooltip: { show: false },
|
||
toolbox: {
|
||
show: false,
|
||
},
|
||
series: [
|
||
{
|
||
zlevel: 1,
|
||
name: '基波电压相位',
|
||
type: 'gauge',
|
||
// 表盘最小值
|
||
min: 180,
|
||
// 表盘最大值
|
||
max: -180,
|
||
// 表盘分割数
|
||
splitNumber: 6,
|
||
// 圆心位置
|
||
center: ['50%', '50%'],
|
||
// 半径
|
||
radius: '100%',
|
||
startAngle: 180,
|
||
endAngle: -179.99,
|
||
|
||
// 指针方向
|
||
clockWise: true,
|
||
title: false,
|
||
// 表盘外框
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: [
|
||
[0.25, '#9D322D'],
|
||
[0.5, '#9D322D'],
|
||
[0.75, '#9D322D'],
|
||
[1, '#9D322D'],
|
||
],
|
||
width: 1.5,
|
||
},
|
||
},
|
||
// 表盘细分数
|
||
axisTick: {
|
||
show: true,
|
||
splitNumber: 5,
|
||
distance: 0,
|
||
length: 6,
|
||
lineStyle: {
|
||
color: '#9D322D',
|
||
width: 1,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
// 分割线
|
||
splitLine: {
|
||
show: true,
|
||
length: 10,
|
||
distance: 0,
|
||
lineStyle: {
|
||
color: '#9D322D',
|
||
width: 2,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
// 分割线标识
|
||
axisLabel: {
|
||
show: true,
|
||
distance: 2,
|
||
fontSize: 10,
|
||
formatter: function (v) {
|
||
switch (v + '') {
|
||
case '-180':
|
||
return ''
|
||
default:
|
||
return v
|
||
}
|
||
},
|
||
},
|
||
|
||
// 指针设置
|
||
pointer: {
|
||
icon: 'path://m368.01136,209.80637l173.00807,-193.72679c19.14653,-21.43943 50.16392,-21.43943 69.31045,0l172.93149,193.72679c1.22537,1.37213 1.22537,3.51607 0,4.8882l-47.63657,53.34133c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-113.65381,-127.26452c-1.91465,-2.14395 -5.20785,-0.60031 -5.20785,2.40122l0,731.94254c0,1.88667 -1.37855,3.43031 -3.06345,3.43031l-67.39579,0c-1.6849,0 -3.06345,-1.54364 -3.06345,-3.43031l0,-731.94254c0,-3.08728 -3.2932,-4.54517 -5.20785,-2.40122l-113.65381,127.26452c-1.22538,1.37213 -3.14003,1.37213 -4.36541,0l-47.63657,-53.34133c-1.22537,-1.37213 -1.22537,-3.51607 0,-4.88819l0,-0.00001M539,861.23064h73v800h-73z',
|
||
length: '90%',
|
||
width: 15,
|
||
opacity: 1,
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 0,
|
||
name: 'A相', //'A相',
|
||
itemStyle: {
|
||
color: '#DAA520',
|
||
},
|
||
},
|
||
{
|
||
value: 0,
|
||
name: 'B相', //'B相',
|
||
itemStyle: {
|
||
color: '#2E8B57',
|
||
},
|
||
},
|
||
{
|
||
value: 0,
|
||
name: 'C相', //'C相',
|
||
itemStyle: {
|
||
color: '#A52a2a',
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
}
|
||
},
|
||
initEcharts(color, key, name) {
|
||
return {
|
||
tooltip: { show: false },
|
||
toolbox: {
|
||
show: false,
|
||
},
|
||
series: [
|
||
{
|
||
type: 'gauge',
|
||
startAngle: key == 0 ? 180 : 90,
|
||
endAngle: key == 0 ? 90 : 0,
|
||
min: 0,
|
||
max: key == 0 ? 12 : 200,
|
||
radius: '150%',
|
||
center: key == 0 ? ['90%', '75%'] : ['10%', '75%'],
|
||
splitNumber: 2, //刻度数量
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 3,
|
||
color: [
|
||
[0.3, color],
|
||
[0.7, color],
|
||
[1, color],
|
||
],
|
||
},
|
||
},
|
||
color: color,
|
||
// 表盘细分数
|
||
axisTick: {
|
||
show: true,
|
||
distance: -2,
|
||
length: 8,
|
||
lineStyle: {
|
||
color: color,
|
||
width: 1,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: color,
|
||
fontSize: 10,
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
distance: -2,
|
||
length: 12,
|
||
|
||
lineStyle: {
|
||
color: color,
|
||
width: 2,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
|
||
//标题位置
|
||
title: {
|
||
fontWeight: 'bolder',
|
||
fontSize: 10,
|
||
offsetCenter: key == 0 ? ['-80%', '-100%'] : ['85%', '-100%'],
|
||
},
|
||
//数值位置
|
||
detail: {
|
||
fontSize: 10,
|
||
valueAnimation: true,
|
||
formatter: '{value}',
|
||
offsetCenter: key == 0 ? ['-40%', '25%'] : ['40%', '25%'],
|
||
color: color,
|
||
},
|
||
|
||
// 指针设置
|
||
pointer: {
|
||
length: '80%',
|
||
width: 2,
|
||
},
|
||
data: [
|
||
{
|
||
value: 0,
|
||
name: name,
|
||
itemStyle: {
|
||
color: color,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
}
|
||
},
|
||
|
||
// 初始化图表
|
||
async initChart(key, value) {
|
||
// console.log('🚀 ~ key,value:', key, value)
|
||
if (!this.$refs[key]) return
|
||
|
||
try {
|
||
this[key] = await this.$refs[key].init(echarts)
|
||
this[key].setOption(this[value])
|
||
} catch (error) {
|
||
console.error('图表初始化失败:', error)
|
||
}
|
||
},
|
||
|
||
// 更新图表数据
|
||
updateChart(newOption) {
|
||
if (this.chartInstance) {
|
||
this.chartInstance.setOption(newOption)
|
||
} else if (this.$refs.chartRef) {
|
||
this.$refs.chartRef.setOption(newOption)
|
||
}
|
||
},
|
||
// 调整图表大小
|
||
resizeChart() {
|
||
if (this.$refs.chartRef) {
|
||
this.$refs.chartRef.resize()
|
||
}
|
||
},
|
||
// 页面卸载时销毁图表实例
|
||
beforeUnmount() {
|
||
if (this.$refs.chartRef) {
|
||
this.$refs.chartRef.dispose()
|
||
}
|
||
},
|
||
// 刷新
|
||
handleRefresh() {
|
||
this.disabled = true
|
||
this.client && this.client.end()
|
||
this.setMqtt(1)
|
||
this.initMqtt()
|
||
if (this.numTimer) {
|
||
clearInterval(this.numTimer)
|
||
}
|
||
|
||
// 设置定时器，每秒执行一次
|
||
this.numTimer = setInterval(() => {
|
||
this.countdown--
|
||
|
||
// 倒计时结束
|
||
if (this.countdown <= 0) {
|
||
clearInterval(this.numTimer) // 清除定时器
|
||
this.disabled = false // 启用按钮
|
||
this.countdown = 30 // 重置倒计时
|
||
this.numTimer = null // 清空定时器标识
|
||
}
|
||
}, 1000)
|
||
},
|
||
async setMqtt(e) {
|
||
uni.showLoading({
|
||
title: '连接中,请稍等...',
|
||
mask: true,
|
||
})
|
||
this.clear()
|
||
this.connection = false
|
||
await getBaseRealData(this.lineId)
|
||
.then((res) => {
|
||
if (res.code == 'A0000') {
|
||
this.connection = true
|
||
this.$util.toast(e == 0 ? '连接成功！' : '刷新成功！')
|
||
if (this.timer) {
|
||
clearInterval(this.timer)
|
||
this.timer = null
|
||
}
|
||
|
||
this.timer = setInterval(() => {
|
||
getBaseRealData(this.lineId)
|
||
.then((res) => {
|
||
this.connection = true
|
||
console.log(res, '获取基础实时数据')
|
||
})
|
||
.catch(() => {
|
||
this.connection = false
|
||
this.clear()
|
||
})
|
||
}, 30000)
|
||
}
|
||
})
|
||
.catch(() => {
|
||
this.countdown = 30 // 重置倒计时
|
||
this.disabled = false
|
||
this.connection = false
|
||
this.clear()
|
||
})
|
||
},
|
||
|
||
initMqtt() {
|
||
MQTT_OPTIONS.clientId = uni.getStorageSync('devCode')
|
||
// #ifdef APP-PLUS
|
||
this.client = mqtt.connect('wx://' + MQTT_IP, MQTT_OPTIONS)
|
||
// #endif
|
||
// #ifdef H5
|
||
|
||
this.client = mqtt.connect('ws://' + MQTT_IP, MQTT_OPTIONS)
|
||
// #endif
|
||
this.client
|
||
.on('connect', () => {
|
||
console.log('连接成功')
|
||
this.client.subscribe(`/Web/RealData/+`, (err) => {
|
||
if (!err) {
|
||
console.log(`订阅成功:/Web/RealData/+`)
|
||
}
|
||
})
|
||
|
||
// this.client.subscribe(`/zl/devData/${this.devId}/${id}`, (err) => {
|
||
// if (!err) {
|
||
// console.log(`订阅成功:/zl/devData/${this.devId}/${id}`)
|
||
|
||
// // 默认推送
|
||
// this.client.publish(`/zl/askDevData/${this.devId}/${id}`)
|
||
// this.client.publish(`/zl/askTemperData/${this.devId}`)
|
||
// if (this.timer) {
|
||
// clearInterval(this.timer)
|
||
// this.timer = null
|
||
// }
|
||
// this.timer = setInterval(() => {
|
||
// console.log('askDevData')
|
||
// this.client.publish(`/zl/askDevData/${this.devId}/${id}`)
|
||
// this.client.publish(`/zl/askTemperData/${this.devId}`)
|
||
// }, 1000 * 60)
|
||
// }
|
||
// })
|
||
})
|
||
.on('reconnect', function (error) {
|
||
console.log(error)
|
||
// console.log('正在重连...', that.topic)
|
||
})
|
||
.on('error', function (error) {
|
||
console.log('连接失败...', error)
|
||
})
|
||
.on('end', function () {
|
||
console.log('连接断开')
|
||
})
|
||
.on('message', (topic, message) => {
|
||
// console.log('接收推送信息：', JSON.parse(message.toString()), topic)
|
||
// console.log('🚀 ~ .on ~ topic:', topic)
|
||
if (!this.connection) return
|
||
|
||
if (topic === `/Web/RealData/${this.userInfo.userIndex}`) {
|
||
let list = JSON.parse(message.toString())
|
||
if (list.lineId == this.lineId) {
|
||
// console.log(list)
|
||
this.realTime = list.dataTime
|
||
let pt = list.pt || 0
|
||
let ct = list.ct || 0
|
||
|
||
let data = {
|
||
vRmsA: ((list.vRmsA * pt) / 1000).toFixed(2),
|
||
vRmsB: ((list.vRmsB * pt) / 1000).toFixed(2),
|
||
vRmsC: ((list.vRmsC * pt) / 1000).toFixed(2),
|
||
iRmsA: (list.iRmsA * ct).toFixed(2),
|
||
iRmsB: (list.iRmsB * ct).toFixed(2),
|
||
iRmsC: (list.iRmsC * ct).toFixed(2),
|
||
v1A: ((list.v1A * pt) / 1000).toFixed(2),
|
||
v1B: ((list.v1B * pt) / 1000).toFixed(2),
|
||
v1C: ((list.v1C * pt) / 1000).toFixed(2),
|
||
v1AngA: list.v1AngA.toFixed(2),
|
||
v1AngB: list.v1AngB.toFixed(2),
|
||
v1AngC: list.v1AngC.toFixed(2),
|
||
|
||
i1A: (list.i1A * ct).toFixed(2),
|
||
i1B: (list.i1B * ct).toFixed(2),
|
||
i1C: (list.i1C * ct).toFixed(2),
|
||
i1AngA: list.i1AngA.toFixed(2),
|
||
i1AngB: list.i1AngB.toFixed(2),
|
||
i1AngC: list.i1AngC.toFixed(2),
|
||
vDevA: list.vDevA.toFixed(2),
|
||
vDevB: list.vDevB.toFixed(2),
|
||
vDevC: list.vDevC.toFixed(2),
|
||
vThdA: list.vThdA.toFixed(2),
|
||
vThdB: list.vThdB.toFixed(2),
|
||
vThdC: list.vThdC.toFixed(2),
|
||
}
|
||
this.realTimeData = [
|
||
{ name: '电压有效值(kV)', A: data.vRmsA, B: data.vRmsB, C: data.vRmsC },
|
||
{ name: '电流有效值(A)', A: data.iRmsA, B: data.iRmsB, C: data.iRmsC },
|
||
{ name: '基波电压幅值(kV)', A: data.v1A, B: data.v1B, C: data.v1C },
|
||
{ name: '基波电压相位(°)', A: data.v1AngA, B: data.v1AngB, C: data.v1AngC },
|
||
{ name: '基波电流幅值(A)', A: data.i1A, B: data.i1B, C: data.i1C },
|
||
{ name: '基波电流相位(°)', A: data.i1AngA, B: data.i1AngB, C: data.i1AngC },
|
||
{ name: '电压偏差(%)', A: data.vDevA, B: data.vDevB, C: data.vDevC },
|
||
{ name: '电压总谐波畸变率(%)', A: data.vThdA, B: data.vThdB, C: data.vThdC },
|
||
]
|
||
// 电压
|
||
let vMax =
|
||
Math.ceil(
|
||
(Math.max(
|
||
...[
|
||
Math.floor(data.vRmsA * 100) / 100 || 1,
|
||
Math.floor(data.vRmsB * 100) / 100 || 1,
|
||
Math.floor(data.vRmsC * 100) / 100 || 1,
|
||
],
|
||
) *
|
||
1.2) /
|
||
10,
|
||
) * 10
|
||
this.echartsDataV1.series[0].max = vMax
|
||
this.echartsDataV2.series[0].max = vMax
|
||
this.echartsDataV3.series[0].max = vMax
|
||
this.echartsDataV1.series[0].data[0].value = data.vRmsA
|
||
this.echartsDataV2.series[0].data[0].value = data.vRmsB
|
||
this.echartsDataV3.series[0].data[0].value = data.vRmsC
|
||
|
||
// 电流
|
||
let aMax =
|
||
Math.ceil(
|
||
(Math.max(
|
||
...[
|
||
Math.floor(data.iRmsA * 100) / 100 || 1,
|
||
Math.floor(data.iRmsB * 100) / 100 || 1,
|
||
Math.floor(data.iRmsC * 100) / 100 || 1,
|
||
],
|
||
) *
|
||
1.2) /
|
||
10,
|
||
) * 10
|
||
this.echartsDataA1.series[0].max = aMax
|
||
this.echartsDataA2.series[0].max = aMax
|
||
this.echartsDataA3.series[0].max = aMax
|
||
this.echartsDataA1.series[0].data[0].value = data.iRmsA
|
||
this.echartsDataA2.series[0].data[0].value = data.iRmsB
|
||
this.echartsDataA3.series[0].data[0].value = data.iRmsC
|
||
|
||
this.echartsData0.series[0].data[0].value = data.i1AngA
|
||
this.echartsData0.series[0].data[1].value = data.i1AngB
|
||
this.echartsData0.series[0].data[2].value = data.i1AngC
|
||
|
||
this.echartsData1.series[0].data[0].value = data.v1AngA
|
||
this.echartsData1.series[0].data[1].value = data.v1AngB
|
||
this.echartsData1.series[0].data[2].value = data.v1AngC
|
||
|
||
const charts = [
|
||
{ instance: this.echart0, data: this.echartsData0 },
|
||
{ instance: this.echart1, data: this.echartsData1 },
|
||
{ instance: this.echartV1, data: this.echartsDataV1 },
|
||
{ instance: this.echartV2, data: this.echartsDataV2 },
|
||
{ instance: this.echartV3, data: this.echartsDataV3 },
|
||
{ instance: this.echartA1, data: this.echartsDataA1 },
|
||
{ instance: this.echartA2, data: this.echartsDataA2 },
|
||
{ instance: this.echartA3, data: this.echartsDataA3 },
|
||
]
|
||
|
||
charts.forEach(({ instance, data }) => {
|
||
if (instance && instance.setOption) {
|
||
instance.setOption(data, true)
|
||
}
|
||
})
|
||
|
||
// this.echart0.setOption(this.echartsData0, true)
|
||
// this.echart1.setOption(this.echartsData1, true)
|
||
// this.echartV1.setOption(this.echartsDataV1, true)
|
||
// this.echartV2.setOption(this.echartsDataV2, true)
|
||
// this.echartV3.setOption(this.echartsDataV3, true)
|
||
// this.echartA1.setOption(this.echartsDataA1, true)
|
||
// this.echartA2.setOption(this.echartsDataA2, true)
|
||
// this.echartA3.setOption(this.echartsDataA3, true)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 清空数据
|
||
clear() {
|
||
this.realTime = ''
|
||
this.realTimeData = [
|
||
{ name: '电压有效值(kV)', A: '/', B: '/', C: '/' },
|
||
{ name: '电流有效值(A)', A: '/', B: '/', C: '/' },
|
||
{ name: '基波电压幅值(kV)', A: '/', B: '/', C: '/' },
|
||
{ name: '基波电压相位(°)', A: '/', B: '/', C: '/' },
|
||
{ name: '基波电流幅值(A)', A: '/', B: '/', C: '/' },
|
||
{ name: '基波电流相位(°)', A: '/', B: '/', C: '/' },
|
||
{ name: '电压偏差(%)', A: '/', B: '/', C: '/' },
|
||
{ name: '电压总谐波畸变率(%)', A: '/', B: '/', C: '/' },
|
||
]
|
||
this.echartsDataV1.series[0].data[0].value = 0
|
||
this.echartsDataV2.series[0].data[0].value = 0
|
||
this.echartsDataV3.series[0].data[0].value = 0
|
||
this.echartsDataA1.series[0].data[0].value = 0
|
||
this.echartsDataA2.series[0].data[0].value = 0
|
||
this.echartsDataA3.series[0].data[0].value = 0
|
||
this.echartsData0.series[0].data[0].value = 0
|
||
this.echartsData0.series[0].data[1].value = 0
|
||
this.echartsData0.series[0].data[2].value = 0
|
||
this.echartsData1.series[0].data[0].value = 0
|
||
this.echartsData1.series[0].data[1].value = 0
|
||
this.echartsData1.series[0].data[2].value = 0
|
||
const charts = [
|
||
{ instance: this.echart0, data: this.echartsData0 },
|
||
{ instance: this.echart1, data: this.echartsData1 },
|
||
{ instance: this.echartV1, data: this.echartsDataV1 },
|
||
{ instance: this.echartV2, data: this.echartsDataV2 },
|
||
{ instance: this.echartV3, data: this.echartsDataV3 },
|
||
{ instance: this.echartA1, data: this.echartsDataA1 },
|
||
{ instance: this.echartA2, data: this.echartsDataA2 },
|
||
{ instance: this.echartA3, data: this.echartsDataA3 },
|
||
]
|
||
|
||
charts.forEach(({ instance, data }) => {
|
||
if (instance && instance.setOption) {
|
||
instance.setOption(data, true)
|
||
}
|
||
})
|
||
},
|
||
// 监测点变化
|
||
async lineChange(e) {
|
||
await this.clear()
|
||
this.disabled = false
|
||
this.countdown = 30
|
||
|
||
this.lineKey = e.detail.value
|
||
this.lineId = this.lineList[e.detail.value].lineId
|
||
await (this.client && this.client.end())
|
||
await this.setMqtt(0)
|
||
await this.initMqtt()
|
||
},
|
||
},
|
||
|
||
computed: {},
|
||
|
||
watch: {},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.realTime {
|
||
.info-card-wrap {
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
}
|
||
// padding: 20rpx;
|
||
.info-card {
|
||
background-image: url('/static/background.png');
|
||
background-position: center center; /* 水平+垂直居中 */
|
||
background-repeat: no-repeat; /* 不平铺 */
|
||
background-size: 100% 100%; /* 覆盖整个容器（可选，根据需求调整） */
|
||
color: #fff;
|
||
padding: 20rpx 40rpx;
|
||
border-radius: 20rpx;
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
margin-bottom: 10rpx;
|
||
view {
|
||
// font-size: 28rpx;
|
||
.nav-menu {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
&:last-child {
|
||
margin-bottom: 0rpx;
|
||
}
|
||
}
|
||
.status {
|
||
.status-normal {
|
||
// font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.data-table {
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
.table-header,
|
||
.table-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 30rpx;
|
||
border-bottom: 1rpx solid #eee;
|
||
text {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
// color: #333;
|
||
&:first-child {
|
||
text-align: left;
|
||
flex: 2;
|
||
}
|
||
}
|
||
}
|
||
.table-header {
|
||
// background-color: #fafafa;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.time-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
margin: 20rpx 0 0;
|
||
border-radius: 10rpx;
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
text {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.chartBox {
|
||
background-color: #fff;
|
||
padding: 0 0rpx 20rpx;
|
||
display: flex;
|
||
.middle {
|
||
display: flex;
|
||
position: relative;
|
||
height: 600rpx;
|
||
margin: 0 10rpx;
|
||
flex: 1;
|
||
.echart1 {
|
||
position: absolute;
|
||
height: 500rpx;
|
||
top: 0;
|
||
}
|
||
}
|
||
.chart {
|
||
width: 170rpx;
|
||
height: 200rpx;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
.text {
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
}
|
||
.text_center {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(50%);
|
||
}
|
||
}
|
||
.mini-btn {
|
||
font-size: 24rpx;
|
||
border-radius: 45rpx;
|
||
height: 45rpx;
|
||
line-height: 45rpx;
|
||
}
|
||
</style>
|