This commit is contained in:
GGJ
2024-10-24 19:39:24 +08:00
2 changed files with 64 additions and 71 deletions

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>
@@ -407,11 +423,11 @@ const sonTab = ref()
//谐波频谱
const realTrendRef = ref()
const changeTrendType = (val: any) => {
trendDataTime.value = ''
activeTrendName.value = val * 1
handleTrend()
}
//判断是否显示数据时间
const dataTimeFlag = ref(false)
const activeTrendName: any = ref(0)
const trendTimer: any = ref()
const trendDataTime: any = ref()
@@ -425,22 +441,33 @@ const handleTrend = async () => {
if (trendTimer.value) {
window.clearInterval(trendTimer.value)
}
tableLoading.value = true
await getHarmRealData(lineId.value, activeTrendName.value)
.then((res: any) => {
if (res.code == 'A0000') {
trendDataTime.value = ''
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 = ''
tableLoading.value = false
}
// else {
// trendDataTime.value = obj.dataTime
// }
})
} else {
ElMessage.success('装置应答失败')
@@ -448,42 +475,14 @@ const handleTrend = async () => {
})
.catch(e => {
realTrendRef.value && realTrendRef.value.setRealTrendData(false)
tableLoading.value = 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 +496,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 +512,6 @@ const handleHarmonicSpectrum = async () => {
}, 30000)
}
})
dataTimeFlag.value = false
}
//返回
const handleReturn = async () => {
@@ -533,7 +528,7 @@ const handleReturn = async () => {
tableLoading.value = true
await getBasicRealData(lineId.value).then((res: any) => {
if (res.code == 'A0000') {
// ElMessage.success('装置应答成功')
ElMessage.success('装置应答成功')
// mqttMessage.value = {}
realDataTimer.value = window.setInterval(() => {
getBasicRealData(lineId.value).then((res: any) => {
@@ -542,7 +537,6 @@ const handleReturn = async () => {
}, 30000)
}
})
dataTimeFlag.value = false
// handleClick()
}
const getDeviceDataTrend = (e: any) => {
@@ -673,14 +667,13 @@ const getRealDataMqttMsg = async () => {
}
//新的实时数据
//1.调用接口 mqtt推送数据
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) => {
realDataTimer.value = window.setInterval(async () => {
await getBasicRealData(lineId.value).then((res: any) => {
console.log(res, '获取基础实时数据')
})
}, 30000)
@@ -802,27 +795,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消息
@@ -837,6 +828,7 @@ const getRealDataMqttMsg = async () => {
})
} else {
ElMessage.success('装置应答失败')
tableLoading.value = false
}
})
}
@@ -845,7 +837,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)
}
@@ -906,9 +897,6 @@ const handleClick = async (tab?: any) => {
if (dataSet.value.includes('_realtimedata')) {
//查询实时数据显示实时录波、实时趋势、谐波频谱
realTimeFlag.value = true
setTimeout(() => {
tableLoading.value = false
}, 1500)
connectMqtt()
mqttRef.value.on('connect', (e: any) => {
// ElMessage.success('连接mqtt服务器成功!')

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()