From 5cf826f40610af3b5c960f077d3349ad01e2ba3f Mon Sep 17 00:00:00 2001 From: zhujiyan <17812234322@163.com> Date: Wed, 23 Oct 2024 14:37:11 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E8=B6=8B=E5=8A=BF=E9=97=AE?= =?UTF-8?q?=E9=A2=98=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/govern/device/control/index.vue | 203 ++++++++++++------ .../tabs/components/harmonicSpectrum.vue | 3 +- .../control/tabs/components/realtrend.vue | 5 +- .../govern/device/control/tabs/realtime.vue | 6 +- 4 files changed, 148 insertions(+), 69 deletions(-) diff --git a/src/views/govern/device/control/index.vue b/src/views/govern/device/control/index.vue index e222d9a..ff0fd9d 100644 --- a/src/views/govern/device/control/index.vue +++ b/src/views/govern/device/control/index.vue @@ -120,9 +120,6 @@ - - {{ mqttMessage.dataTime }} - +
+

+ 数据时间：{{ trendDataTime }} + 数据时间：{{ mqttMessage.dataTime }} +

+ + + 返回 + +
-

数据时间： {{ mqttMessage.dataTime }}

+
返回
@@ -397,9 +410,12 @@ const changeTrendType = (val: any) => { activeTrendName.value = val * 1 handleTrend() } -//谐波频谱 +//判断是否显示数据时间 +const dataTimeFlag = ref(false) const activeTrendName: any = ref(0) const trendTimer: any = ref() +const trendDataTime: any = ref() +//谐波频谱方法 const handleTrend = async () => { realTimeFlag.value = false sonTab.value = 1 @@ -407,7 +423,7 @@ const handleTrend = async () => { window.clearInterval(realDataTimer.value) } if (trendTimer.value) { - clearInterval(trendTimer.value) + window.clearInterval(trendTimer.value) } await getHarmRealData(lineId.value, activeTrendName.value) .then((res: any) => { @@ -420,7 +436,10 @@ const handleTrend = async () => { ) let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) || {} if (obj.data1) { + trendDataTime.value = obj.dataTime realTrendRef.value && realTrendRef.value.setRealTrendData(obj) + } else { + trendDataTime.value = '' } }) } else { @@ -432,17 +451,17 @@ const handleTrend = async () => { }) //每隔30s调用一下接口，通知后台推送mqtt消息 - trendTimer.value = setInterval(() => { + trendTimer.value = window.setInterval(() => { getHarmRealData(lineId.value, activeTrendName.value).then((res: any) => { console.log(res, '获取谐波频谱数据') - connectMqtt() - mqttRef.value.on('connect', (e: any) => { - // ElMessage.success('连接mqtt服务器成功!') - console.log('mqtt客户端已连接....') - // mqttRef.value.subscribe('/Web/Progress') - mqttRef.value.subscribe('/Web/RealData/+') - //假数据 - }) + // connectMqtt() + // mqttRef.value.on('connect', (e: any) => { + // // ElMessage.success('连接mqtt服务器成功!') + // console.log('mqtt客户端已连接....') + // // mqttRef.value.subscribe('/Web/Progress') + // mqttRef.value.subscribe('/Web/RealData/+') + // //假数据 + // }) mqttRef.value.on('message', (topic: any, message: any) => { console.log( @@ -451,42 +470,80 @@ const handleTrend = async () => { ) let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) || {} if (obj.data1) { + trendDataTime.value = obj.dataTime realTrendRef.value && realTrendRef.value.setRealTrendData(obj) + } else { + trendDataTime.value = '' } }) }) }, 30000) await getOverLimitData(lineId.value).then((res: any) => { - console.log(res, '获取国标限制') if (res.code == 'A0000') { realTrendRef.value && realTrendRef.value.setOverLimitData(res.data) } }) + dataTimeFlag.value = true realTrendRef.value && realTrendRef.value.open({ devId: deviceId.value, lineId: lineId.value, activeTrendName: activeTrendName.value }) } //实时趋势 const harmonicSpectrumRef = ref() //实时趋势 -const handleHarmonicSpectrum = () => { +const handleHarmonicSpectrum = async () => { + // if (realDataTimer.value) { + // window.clearInterval(realDataTimer.value) + // } + // if (trendTimer.value) { + // window.clearInterval(trendTimer.value) + // } + if (!mqttMessage.value) { + return + } realTimeFlag.value = false sonTab.value = 2 harmonicSpectrumRef.value && harmonicSpectrumRef.value.resetData() // getRealDataMqttMsg() + await getBasicRealData(lineId.value).then((res: any) => { + if (res.code == 'A0000') { + // ElMessage.success('装置应答成功') + // mqttMessage.value = {} + + realDataTimer.value = window.setInterval(() => { + getBasicRealData(lineId.value).then((res: any) => { + console.log(res, '获取基础实时数据') + }) + }, 30000) + } + }) + dataTimeFlag.value = false } //返回 -const handleReturn = () => { +const handleReturn = async () => { if (realDataTimer.value) { clearInterval(realDataTimer.value) } if (trendTimer.value) { clearInterval(trendTimer.value) } - realTimeFlag.value = true sonTab.value = null activeTrendName.value = 0 - handleClick() + mqttMessage.value = {} + tableLoading.value = true + await getBasicRealData(lineId.value).then((res: any) => { + if (res.code == 'A0000') { + // ElMessage.success('装置应答成功') + // mqttMessage.value = {} + realDataTimer.value = window.setInterval(() => { + getBasicRealData(lineId.value).then((res: any) => { + console.log(res, '获取基础实时数据') + }) + }, 30000) + } + }) + dataTimeFlag.value = false + // handleClick() } const getDeviceDataTrend = (e: any) => { detail.value = { @@ -609,39 +666,29 @@ const connectMqtt = () => { } const getRealDataMqttMsg = async () => { if (realDataTimer.value) { - clearInterval(realDataTimer.value) + window.clearInterval(realDataTimer.value) } if (trendTimer.value) { - clearInterval(trendTimer.value) + window.clearInterval(trendTimer.value) } //新的实时数据 //1.调用接口 mqtt推送数据 + tableLoading.value = true await getBasicRealData(lineId.value).then((res: any) => { if (res.code == 'A0000') { ElMessage.success('装置应答成功') - //2.建立mqtt通讯 - //每隔30s调用一下接口，通知后台推送mqtt消息 - realDataTimer.value = setInterval(() => { + mqttMessage.value = {} + + realDataTimer.value = window.setInterval(() => { getBasicRealData(lineId.value).then((res: any) => { console.log(res, '获取基础实时数据') }) }, 30000) - connectMqtt() - mqttRef.value.on('connect', (e: any) => { - // ElMessage.success('连接mqtt服务器成功!') - - // mqttRef.value.subscribe('/Web/Progress') - mqttRef.value.subscribe('/Web/RealData/+') - //假数据 - }) - mqttRef.value.on('message', (topic: any, message: any) => { - mqttMessage.value = {} - - console.log( - '实时数据&实时趋势---mqtt接收到消息', - JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) - ) + // console.log( + // '实时数据&实时趋势---mqtt接收到消息', + // JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) + // ) let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) //处理mqtt数据 1转2除 2转1乘 //如果消息返回值是二次值，下拉框是二次值只需要单位换算 除以1000 @@ -755,20 +802,30 @@ const getRealDataMqttMsg = async () => { } } mqttMessage.value = obj + trendDataTime.value = '' //更新实时数据值 realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value) + tableLoading.value = false //更新实时趋势数据 - !realTimeFlag.value && - sonTab.value == 2 && - harmonicSpectrumRef.value && - harmonicSpectrumRef.value.setHarmonicSpectrumData(mqttMessage.value) //更新谐波频谱数据 - !realTimeFlag.value && - sonTab.value == 1 && - realTrendRef.value && - realTrendRef.value.setRealTrendData(obj) + // !realTimeFlag.value && + // sonTab.value == 1 && + // realTrendRef.value && + // realTrendRef.value.setRealTrendData(obj) + + if (sonTab.value == 2) { + dataTimeFlag.value = false + !realTimeFlag.value && + sonTab.value == 2 && + harmonicSpectrumRef.value && + harmonicSpectrumRef.value.setHarmonicSpectrumData(mqttMessage.value) + } else { + dataTimeFlag.value = true + } }) + //2.建立mqtt通讯 + //每隔30s调用一下接口，通知后台推送mqtt消息 mqttRef.value.on('error', (error: any) => { console.log('mqtt连接失败...', error) @@ -788,11 +845,12 @@ const getRealDataMqttMsg = async () => { const realDataTimer: any = ref() const mqttMessage = ref({}) const handleClick = async (tab?: any) => { + dataTimeFlag.value = false if (realDataTimer.value) { - clearInterval(realDataTimer.value) + window.clearInterval(realDataTimer.value) } if (trendTimer.value) { - clearInterval(trendTimer.value) + window.clearInterval(trendTimer.value) } tableLoading.value = true //点击tab时更新dataSet最新值 @@ -804,10 +862,6 @@ const handleClick = async (tab?: any) => { realTimeFlag.value = false //初始化点击tab隐藏子页面 sonTab.value = null - if (tab) { - tableData.value = [] - formInline.pageNum = 1 - } //查询历史指标 if (dataSet.value.includes('_history')) { @@ -855,6 +909,11 @@ const handleClick = async (tab?: any) => { setTimeout(() => { tableLoading.value = false }, 1500) + connectMqtt() + mqttRef.value.on('connect', (e: any) => { + // ElMessage.success('连接mqtt服务器成功!') + mqttRef.value.subscribe('/Web/RealData/+') + }) getRealDataMqttMsg() } @@ -897,14 +956,14 @@ const handleClick = async (tab?: any) => { } if (!dataSet.value.includes('_realtimedata')) { if (realDataTimer.value) { - clearInterval(realDataTimer.value) + window.clearInterval(realDataTimer.value) } if (trendTimer.value) { - clearInterval(trendTimer.value) - } - if (mqttRef.value) { - mqttRef.value.end() + window.clearInterval(trendTimer.value) } + // if (mqttRef.value) { + // mqttRef.value.end() + // } } } //模版下载 @@ -948,10 +1007,13 @@ const echoName = (value: any, arr: any[]) => { onMounted(() => {}) onUnmounted(() => { if (realDataTimer.value) { - clearInterval(realDataTimer.value) + window.clearInterval(realDataTimer.value) } if (trendTimer.value) { - clearInterval(trendTimer.value) + window.clearInterval(trendTimer.value) + } + if (mqttRef.value) { + mqttRef.value.end() } }) @@ -1026,8 +1088,8 @@ onUnmounted(() => { height: 40px; display: flex; align-items: center; - justify-content: space-between; - padding-left: 20%; + justify-content: flex-end; + // padding-left: 20%; } .custom-tabs-label { @@ -1046,4 +1108,17 @@ onUnmounted(() => { display: flex; flex-wrap: wrap; } + +.data_time { + width: 100%; + height: 40px; + text-align: center; + display: flex; + align-items: center; + p { + font-weight: 800; + font-size: 16px; + margin: 0 auto; + } +} diff --git a/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue b/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue index cbe2f80..4b4a286 100644 --- a/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue +++ b/src/views/govern/device/control/tabs/components/harmonicSpectrum.vue @@ -1,7 +1,7 @@