2026-03-17 14:00:55 +08:00
|
|
|
|
<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="lineId"
|
|
|
|
|
|
: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: 60,
|
|
|
|
|
|
lineId: '00B78D00A87A1',
|
|
|
|
|
|
lineKey: 0,
|
|
|
|
|
|
lineList: [],
|
|
|
|
|
|
engineeringName: '',
|
|
|
|
|
|
equipmentName: '',
|
|
|
|
|
|
runStatus: 1,
|
2026-04-01 10:00:04 +08:00
|
|
|
|
connection: false,
|
2026-03-17 14:00:55 +08:00
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
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)')
|
2026-03-30 08:43:13 +08:00
|
|
|
|
this.loading = false
|
2026-03-17 14:00:55 +08:00
|
|
|
|
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)
|
2026-03-30 08:43:13 +08:00
|
|
|
|
this.client && this.client.end()
|
2026-03-17 14:00:55 +08:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
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
|
2026-03-30 08:43:13 +08:00
|
|
|
|
this.client && this.client.end()
|
2026-03-17 14:00:55 +08:00
|
|
|
|
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 = 60 // 重置倒计时
|
|
|
|
|
|
this.numTimer = null // 清空定时器标识
|
|
|
|
|
|
}
|
|
|
|
|
|
}, 1000)
|
|
|
|
|
|
},
|
|
|
|
|
|
async setMqtt(e) {
|
2026-03-30 08:43:13 +08:00
|
|
|
|
uni.showLoading({
|
|
|
|
|
|
title: '连接中,请稍等...',
|
|
|
|
|
|
mask: true,
|
|
|
|
|
|
})
|
2026-03-17 14:00:55 +08:00
|
|
|
|
this.clear()
|
2026-04-01 10:00:04 +08:00
|
|
|
|
this.connection = false
|
2026-03-17 14:00:55 +08:00
|
|
|
|
await getBaseRealData(this.lineId)
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
if (res.code == 'A0000') {
|
2026-04-01 10:00:04 +08:00
|
|
|
|
this.connection = true
|
2026-03-17 14:00:55 +08:00
|
|
|
|
this.$util.toast(e == 0 ? '连接成功！' : '刷新成功！')
|
|
|
|
|
|
if (this.timer) {
|
|
|
|
|
|
clearInterval(this.timer)
|
|
|
|
|
|
this.timer = null
|
|
|
|
|
|
}
|
2026-03-30 08:43:13 +08:00
|
|
|
|
|
2026-03-17 14:00:55 +08:00
|
|
|
|
this.timer = setInterval(() => {
|
2026-04-01 10:00:04 +08:00
|
|
|
|
getBaseRealData(this.lineId)
|
|
|
|
|
|
.then((res) => {
|
|
|
|
|
|
this.connection = true
|
|
|
|
|
|
console.log(res, '获取基础实时数据')
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(() => {
|
|
|
|
|
|
this.connection = false
|
|
|
|
|
|
this.clear()
|
|
|
|
|
|
})
|
2026-03-17 14:00:55 +08:00
|
|
|
|
}, 30000)
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
2026-04-01 10:00:04 +08:00
|
|
|
|
.catch(() => {
|
|
|
|
|
|
this.countdown = 60 // 重置倒计时
|
|
|
|
|
|
this.disabled = false
|
|
|
|
|
|
this.connection = false
|
|
|
|
|
|
this.clear()
|
|
|
|
|
|
})
|
2026-03-17 14:00:55 +08:00
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
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)
|
2026-04-01 10:00:04 +08:00
|
|
|
|
if (!this.connection) return
|
|
|
|
|
|
|
2026-03-17 14:00:55 +08:00
|
|
|
|
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)
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
// 监测点变化
|
2026-03-30 08:43:13 +08:00
|
|
|
|
async lineChange(e) {
|
|
|
|
|
|
await this.clear()
|
2026-04-01 10:00:04 +08:00
|
|
|
|
this.disabled = false
|
|
|
|
|
|
this.countdown = 60
|
|
|
|
|
|
|
2026-03-17 14:00:55 +08:00
|
|
|
|
this.lineKey = e.detail.value
|
|
|
|
|
|
this.lineId = this.lineList[e.detail.value].lineId
|
2026-03-30 08:43:13 +08:00
|
|
|
|
await (this.client && this.client.end())
|
|
|
|
|
|
await this.setMqtt(0)
|
|
|
|
|
|
await this.initMqtt()
|
2026-03-17 14:00:55 +08:00
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
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;
|
2026-03-30 08:43:13 +08:00
|
|
|
|
margin: 0 10rpx;
|
2026-03-17 14:00:55 +08:00
|
|
|
|
flex: 1;
|
|
|
|
|
|
.echart1 {
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
height: 500rpx;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.chart {
|
|
|
|
|
|
width: 170rpx;
|
|
|
|
|
|
height: 200rpx;
|
2026-03-30 08:43:13 +08:00
|
|
|
|
margin-bottom: 5rpx;
|
2026-03-17 14:00:55 +08:00
|
|
|
|
}
|
|
|
|
|
|
.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>
|
