实时数据更改

This commit is contained in:
zhujiyan
2024-10-24 16:18:52 +08:00
parent f74634de71
commit afbc86cf3a
3 changed files with 58 additions and 67 deletions

View File

@@ -48,7 +48,7 @@ const tableStore = new TableStore({
title: '接口类型',
field: 'type',
formatter: row => {
return row.cellValue == 1 ? '普通口' : '公用接口'
return row.cellValue == 1 ? '普通口' : '公用接口'
}
},
{ title: 'URL接口路径', field: 'path' },

View File

@@ -123,7 +123,13 @@
</template>
<template #operation>
<el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
<el-button type="primary" v-if="realTimeFlag" :icon="DataLine" @click="handleTrend">
<el-button
type="primary"
:loading="tableLoading"
v-if="realTimeFlag"
:icon="DataLine"
@click="handleTrend"
>
谐波频谱
</el-button>
<el-button
@@ -131,6 +137,7 @@
v-if="realTimeFlag"
:icon="TrendCharts"
@click="handleHarmonicSpectrum"
:loading="tableLoading"
>
实时趋势
</el-button>
@@ -142,14 +149,20 @@
height: realTimeFlag ? '30px' : '40px',
alignItems: realTimeFlag ? 'flex-end' : 'center'
}"
v-if="mqttMessage && mqttMessage.dataTime && sonTab != 2 && dataTimeFlag"
v-if="dataSet.includes('_realtimedata') && mqttMessage && mqttMessage.dataTime && sonTab != 2"
>
<p>
<span v-if="trendDataTime && !realTimeFlag">数据时间:{{ trendDataTime }}</span>
<span v-if="realTimeFlag">数据时间:{{ mqttMessage.dataTime }}</span>
</p>
<el-button v-if="!realTimeFlag" style="float: right !important" :icon="Back" @click="handleReturn">
<el-button
v-if="!realTimeFlag && dataSet.includes('_realtimedata')"
style="float: right !important"
:icon="Back"
@click="handleReturn"
:loading="tableLoading"
>
返回
</el-button>
</div>
@@ -289,8 +302,11 @@
实时录波
</el-button>
</div> -->
<div class="view_top_btn" v-if="!realTimeFlag && mqttMessage.dataTime && sonTab == 2">
<el-button :icon="Back" @click="handleReturn">返回</el-button>
<div
class="view_top_btn"
v-if="dataSet.includes('_realtimedata') && !realTimeFlag && mqttMessage.dataTime && sonTab == 2"
>
<el-button :icon="Back" @click="handleReturn" :loading="tableLoading">返回</el-button>
</div>
<!-- 实时数据主界面组件 -->
<realTime v-if="realTimeFlag" ref="realTimeRef"></realTime>
@@ -411,7 +427,6 @@ const changeTrendType = (val: any) => {
handleTrend()
}
//判断是否显示数据时间
const dataTimeFlag = ref(false)
const activeTrendName: any = ref(0)
const trendTimer: any = ref()
const trendDataTime: any = ref()
@@ -429,18 +444,26 @@ const handleTrend = async () => {
.then((res: any) => {
if (res.code == 'A0000') {
ElMessage.success('装置应答成功')
//每隔30s调用一下接口通知后台推送mqtt消息
trendTimer.value = window.setInterval(() => {
getHarmRealData(lineId.value, activeTrendName.value).then((res: any) => {
console.log(res, '获取谐波频谱数据')
})
}, 30000)
mqttRef.value.on('message', (topic: any, message: any) => {
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)))) || {}
if (obj.data1) {
if ((obj.hasOwnProperty('data1') || obj.hasOwnProperty('data2')) && obj.dataTime) {
console.log('进来聊聊吗')
trendDataTime.value = obj.dataTime
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
} else {
trendDataTime.value = ''
}
// else {
// trendDataTime.value = obj.dataTime
// }
})
} else {
ElMessage.success('装置应答失败')
@@ -450,40 +473,11 @@ const handleTrend = async () => {
realTrendRef.value && realTrendRef.value.setRealTrendData(false)
})
//每隔30s调用一下接口通知后台推送mqtt消息
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/+')
// //假数据
// })
mqttRef.value.on('message', (topic: any, message: any) => {
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)))) || {}
if (obj.data1) {
trendDataTime.value = obj.dataTime
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
} else {
trendDataTime.value = ''
}
})
})
}, 30000)
await getOverLimitData(lineId.value).then((res: any) => {
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 })
}
@@ -497,9 +491,6 @@ const handleHarmonicSpectrum = async () => {
// if (trendTimer.value) {
// window.clearInterval(trendTimer.value)
// }
if (!mqttMessage.value) {
return
}
realTimeFlag.value = false
sonTab.value = 2
harmonicSpectrumRef.value && harmonicSpectrumRef.value.resetData()
@@ -516,7 +507,6 @@ const handleHarmonicSpectrum = async () => {
}, 30000)
}
})
dataTimeFlag.value = false
}
//返回
const handleReturn = async () => {
@@ -542,7 +532,6 @@ const handleReturn = async () => {
}, 30000)
}
})
dataTimeFlag.value = false
// handleClick()
}
const getDeviceDataTrend = (e: any) => {
@@ -679,8 +668,8 @@ const getRealDataMqttMsg = async () => {
ElMessage.success('装置应答成功')
mqttMessage.value = {}
realDataTimer.value = window.setInterval(() => {
getBasicRealData(lineId.value).then((res: any) => {
realDataTimer.value = window.setInterval(async () => {
await getBasicRealData(lineId.value).then((res: any) => {
console.log(res, '获取基础实时数据')
})
}, 30000)
@@ -802,27 +791,25 @@ const getRealDataMqttMsg = async () => {
}
}
mqttMessage.value = obj
trendDataTime.value = ''
//更新实时数据值
if (mqttMessage.value.hasOwnProperty('pA') && mqttMessage.value.hasOwnProperty('pB')) {
//更新实时数据主页面
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
//更新实时趋势折线图数据
if (sonTab.value == 2) {
!realTimeFlag.value &&
sonTab.value == 2 &&
harmonicSpectrumRef.value &&
harmonicSpectrumRef.value.setHarmonicSpectrumData(mqttMessage.value)
}
}
tableLoading.value = false
//更新实时趋势数据
//更新谐波频谱数据
// !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消息
@@ -845,7 +832,6 @@ const getRealDataMqttMsg = async () => {
const realDataTimer: any = ref()
const mqttMessage = ref<any>({})
const handleClick = async (tab?: any) => {
dataTimeFlag.value = false
if (realDataTimer.value) {
window.clearInterval(realDataTimer.value)
}

View File

@@ -204,6 +204,8 @@ const init = () => {
}
const handleClick = (tab: any, event: any) => {
tableData.value=[]
echartsData.value={}
loading.value = true
params.value.groupId = tabsList.value[tab.index].id
emit('changeTrendType', tab.index)
@@ -214,8 +216,8 @@ const handleClick = (tab: any, event: any) => {
const mqttMessage: any = ref()
const tableData: any = ref({})
const setRealTrendData = (val: any) => {
mqttMessage.value={}
if(!val){
mqttMessage.value = {}
if (!val) {
return
}
loading.value = true
@@ -225,17 +227,20 @@ const setRealTrendData = (val: any) => {
for (let key in val) {
if (String(key).includes('data') && String(key) != 'dataLevel' && String(key) != 'dataTime') {
tableData.value[key] = val[key]
if (tabsList.value[activeName.value].groupName.includes('间') == false) {
}
}
console.log(tabsList.value[activeName.value].groupName, '-------')
if (tabsList.value[activeName.value].groupName.includes('间谐波') == false) {
delete tableData.value.data1
}
}
} else {
console.log('不删除')
}
if (Object.keys(tableData.value).length != 0) {
init()
loading.value = false
} else {
emit('changeTrendType', activeName.value)
}
loading.value = false
}
//获取国标限值
const limitData: any = ref()