Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改问题

Browse Source
This commit is contained in:
zhujiyan
2024-10-22 14:00:39 +08:00
parent 1e1993d125
commit 28c0e2d23c
6 changed files with 204 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/views/govern/device/control/index.vue
View File

@@ -90,7 +90,6 @@
</el-tab-pane>
<TableHeader
:showSearch="false"
:key="mqttMessage"
v-if="
(dataSet.indexOf('_trenddata') == -1 &&
dataSet.indexOf('_realtimedata') == -1 &&
@@ -111,12 +110,9 @@
placeholder="请输入关键词"
></el-input>
</el-form-item>
<el-form-item v-if="mqttMessage.dataTime" label="数据时间">
{{ mqttMessage.dataTime }}
</el-form-item>
<el-form-item label="值类型">
<el-select
style="width: 160px !important"
style="min-width: 120px !important"
v-model="formInline.dataLevel"
:disabled="dataLevel == 'Primary' && deviceType == '0'"
>
@@ -124,6 +120,9 @@
<el-option value="Secondary" label="二次值"></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="mqttMessage.dataTime" label="数据时间">
{{ mqttMessage.dataTime }}
</el-form-item>
</template>
<template #operation>
<el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
@@ -276,7 +275,8 @@
实时录波
</el-button>
</div> -->
<div class="view_top_btn" v-if="!realTimeFlag">
<div class="view_top_btn" v-if="!realTimeFlag && mqttMessage.dataTime">
<p v-if="mqttMessage.dataTime" style="margin: 0 auto">数据时间： {{ mqttMessage.dataTime }}</p>
<el-button :icon="Back" @click="handleReturn">返回</el-button>
</div>
<!-- 实时数据主界面组件 -->
@@ -285,7 +285,7 @@
<recordWoves v-if="!realTimeFlag && sonTab == 0"></recordWoves>
<!-- 实时数据-实时趋势组件 -->
<realTrend
v-show="!realTimeFlag && sonTab == 1"
v-if="!realTimeFlag && sonTab == 1"
ref="realTrendRef"
@changeTrendType="changeTrendType"
></realTrend>
@@ -387,11 +387,11 @@ const realTimeFlag = ref(true)
//实时数据子菜单
const sonTab = ref()
//实时录波
const handleRecordWaves = () => {
realTimeFlag.value = false
sonTab.value = 0
window.clearInterval(timer.value)
}
// const handleRecordWaves = () => {
// realTimeFlag.value = false
// sonTab.value = 0
// window.clearInterval(timer.value)
// }
//谐波频谱
const realTrendRef = ref()
const changeTrendType = (val: any) => {
@@ -400,24 +400,49 @@ const changeTrendType = (val: any) => {
}
//谐波频谱
const activeTrendName: any = ref(0)
const trendTimer: any = ref()
const handleTrend = async () => {
realTimeFlag.value = false
sonTab.value = 1
clearInterval(timer.value)
clearInterval(realDataTimer.value)
clearInterval(trendTimer.value)
await getHarmRealData(lineId.value, activeTrendName.value).then((res: any) => {
if (res.code == 'A0000') {
ElMessage.success('装置应答成功')
mqttRef.value.on('message', (topic: any, message: any) => {
// console.log('mqtt接收到消息', message,topic)
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)))) || {}
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
if (obj.data1) {
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
}
})
} else {
ElMessage.success('装置应答失败')
}
})
//每隔30s调用一下接口，通知后台推送mqtt消息
trendTimer.value = 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) {
realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
}
})
})
}, 30000)
await getOverLimitData(lineId.value).then((res: any) => {
console.log(res, '获取国标限制')
if (res.code == 'A0000') {
@@ -432,11 +457,8 @@ const harmonicSpectrumRef = ref()
//实时趋势
const handleHarmonicSpectrum = () => {
realTimeFlag.value = false
// harmonicSpectrumRef.value &&
// harmonicSpectrumRef.value.getHarmonicSpectrumParams({ devId: deviceId.value, lineId: lineId.value })
window.clearInterval(timer.value)
clearInterval(realDataTimer.value)
realTimeFlag.value = false
sonTab.value = 2
harmonicSpectrumRef.value && harmonicSpectrumRef.value.resetData()
getRealDataMqttMsg()
@@ -570,6 +592,7 @@ const connectMqtt = () => {
const getRealDataMqttMsg = async () => {
clearInterval(timer.value)
clearInterval(realDataTimer.value)
clearInterval(trendTimer.value)
//新的实时数据
//1.调用接口 mqtt推送数据
await getBasicRealData(lineId.value).then((res: any) => {
@@ -593,8 +616,8 @@ const getRealDataMqttMsg = async () => {
mqttRef.value.on('message', (topic: any, message: any) => {
mqttMessage.value = {}
// console.log('mqtt接收到消息', message,topic)
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
@@ -710,11 +733,16 @@ const getRealDataMqttMsg = async () => {
mqttMessage.value = obj
//更新实时数据值
realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
//更新谐波频谱数据
//更新实时趋势数据
!realTimeFlag.value &&
sonTab.value == 2 &&
harmonicSpectrumRef.value &&
harmonicSpectrumRef.value.setHarmonicSpectrumData(mqttMessage.value)
//更新谐波频谱数据
!realTimeFlag.value &&
sonTab.value == 1 &&
realTrendRef.value &&
realTrendRef.value.setRealTrendData(obj)
})
mqttRef.value.on('error', (error: any) => {
@@ -965,7 +993,8 @@ onUnmounted(() => {
height: 40px;
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: space-between;
padding-left: 20%;
}
.custom-tabs-label {