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-23 14:37:11 +08:00
parent a041b8479f
commit 5cf826f406
4 changed files with 148 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -120,9 +120,6 @@
<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>
@@ -139,6 +136,23 @@
</el-button>
</template>
</TableHeader>
<div
class="data_time"
:style="{
height: realTimeFlag ? '30px' : '40px',
alignItems: realTimeFlag ? 'flex-end' : 'center'
}"
v-if="mqttMessage && mqttMessage.dataTime && sonTab != 2 && dataTimeFlag"
>
<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>
</div>
<div
style="height: calc(100vh - 300px)"
v-if="
@@ -275,8 +289,7 @@
实时录波
</el-button>
</div> -->
<div class="view_top_btn" v-if="!realTimeFlag && mqttMessage.dataTime">
<p v-if="mqttMessage.dataTime" style="margin: 0 auto">数据时间： {{ mqttMessage.dataTime }}</p>
<div class="view_top_btn" v-if="!realTimeFlag && mqttMessage.dataTime && sonTab == 2">
<el-button :icon="Back" @click="handleReturn">返回</el-button>
</div>
<!-- 实时数据主界面组件 -->
@@ -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<any>({})
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()
}
})
</script>
@@ -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;
}
}
</style>

3
src/views/govern/device/control/tabs/components/harmonicSpectrum.vue
View File

@@ -1,7 +1,7 @@
<!-- 实时趋势 -->
<template>
<div class="harmonic" :style="heightTop" v-loading="loading">
<div class="harmonic_select">
<div class="harmonic_select" v-if="!loading">
<el-form :model="searchForm" id="history_select">
<el-form-item label="稳态指标">
<el-select multiple collapse-tags collapse-tags-tooltip v-model="searchForm.index"
@@ -257,6 +257,7 @@ const resetData = () => {
resetData()
const mqttMessage: any = ref()
const setHarmonicSpectrumData = (val: any) => {
console.log(val,"来了来了来了");
mqttMessage.value = val
init()
}

5
src/views/govern/device/control/tabs/components/realtrend.vue
View File

@@ -214,11 +214,12 @@ const handleClick = (tab: any, event: any) => {
const mqttMessage: any = ref()
const tableData: any = ref({})
const setRealTrendData = (val: any) => {
mqttMessage.value={}
if(!val){
return
}
loading.value = true
console.log(val, '谐波频谱')
console.log(val, '----------------谐波频谱------------------')
tableData.value = {}
mqttMessage.value = val
for (let key in val) {
@@ -229,7 +230,7 @@ const setRealTrendData = (val: any) => {
}
}
}
if (tableData.value) {
if (Object.keys(tableData.value).length != 0) {
init()
} else {
emit('changeTrendType', activeName.value)

6
src/views/govern/device/control/tabs/realtime.vue
View File

@@ -639,7 +639,7 @@ onMounted(() => {
width: 40%;
border: 1px solid #eee;
margin: 0 10px;
padding: 10px;
// padding: 10px;
position: relative;
.mid_charts {
width: 100%;
@@ -659,7 +659,9 @@ onMounted(() => {
font-weight: 800;
font-weight: 16px;
line-height: 20px;
margin: 10px;
margin: 10px 0 0 10px;
padding-left: 5px;
box-sizing: border-box;
}
}
.view_bot {