实时数据问题修改

src/views/govern/device/control/index.vue

@@ -167,19 +167,21 @@
                         返回
                     </el-button>
                 </div>
-                <div
-                    style="height: calc(100vh - 300px)"
+                <!-- style="height: calc(100vh - 300px)" -->
+                <!-- <div 
+                  style="height: 100%;"
                     v-if="
                         dataSet.indexOf('_trenddata') == -1 &&
                         dataSet.indexOf('_realtimedata') == -1 &&
                         dataSet.indexOf('_event') == -1 &&
                         tableData.length == 0
                     "
-                    v-loading="tableLoading"
-                ></div>
+                ></div> -->
+                <!-- v-loading="tableLoading" -->
                 <div
                     style="overflow: auto"
                     :style="{ height: tableHeight }"
+                    v-loading="tableLoading"
                     v-if="
                         dataSet.indexOf('_trenddata') == -1 &&
                         dataSet.indexOf('_realtimedata') == -1 &&
@@ -188,7 +190,7 @@
                     "
                 >
                     <!-- 循环渲染的card 最新数据/历史数据显示 -->
-                    <div class="content" v-loading="tableLoading">
+                    <div class="content">
                         <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
                             <template #header>
                                 <div class="clearfix">
@@ -285,11 +287,7 @@
                 ></el-pagination>
 
                 <!-- 趋势数据 -->
-                <div
-                    style="height: calc(100vh - 340px)"
-                    v-if="dataSet.indexOf('_trenddata') != -1"
-                    v-loading="tableLoading"
-                >
+                <div style="height: calc(100vh - 340px)" v-if="dataSet.indexOf('_trenddata') != -1">
                     <Trend ref="trendRef"></Trend>
                 </div>
                 <!-- 实时数据 -->
@@ -455,16 +453,15 @@ const handleTrend = async () => {
                     })
                 }, 30000)
                 mqttRef.value.on('message', (topic: any, message: any) => {
+                    let obj = JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message)))) || {}
+                    if ((obj.hasOwnProperty('data1') || obj.hasOwnProperty('data2')) && obj.dataTime) {
+                        trendDataTime.value = obj.dataTime
+                        realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
+                        tableLoading.value = false
                         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.hasOwnProperty('data1') || obj.hasOwnProperty('data2')) && obj.dataTime) {
-                        console.log('进来聊聊吗')
-                        trendDataTime.value = obj.dataTime
-                        realTrendRef.value && realTrendRef.value.setRealTrendData(obj)
-                        tableLoading.value = false
                     }
                     // else {
                     //     trendDataTime.value = obj.dataTime
@@ -795,8 +792,8 @@ const getRealDataMqttMsg = async () => {
                         obj[i] = obj[i].toFixed(2)
                     }
                 }
+                if (obj.hasOwnProperty('pA') && obj.hasOwnProperty('pB')) {
                     mqttMessage.value = obj
-                if (mqttMessage.value.hasOwnProperty('pA') && mqttMessage.value.hasOwnProperty('pB')) {
                     //更新实时数据主页面值
                     realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
                     //更新实时趋势折线图数据
@@ -839,11 +836,14 @@ const realDataTimer: any = ref()
 const mqttMessage = ref<any>({})
 const handleClick = async (tab?: any) => {
     if (realDataTimer.value) {
-        window.clearInterval(realDataTimer.value)
+        clearInterval(realDataTimer.value)
     }
     if (trendTimer.value) {
-        window.clearInterval(trendTimer.value)
+        clearInterval(trendTimer.value)
     }
+    sonTab.value = null
+    activeTrendName.value = 0
+    mqttMessage.value = {}
     tableLoading.value = true
     //点击tab时更新dataSet最新值
     if (tab && tab.props && tab.props.name && dataSet.value != tab.props.name) {
@@ -896,6 +896,7 @@ const handleClick = async (tab?: any) => {
     }
     //查询实时数据
     if (dataSet.value.includes('_realtimedata')) {
+        tableLoading.value = true
         //查询实时数据显示实时录波、实时趋势、谐波频谱
         realTimeFlag.value = true
         connectMqtt()
@@ -950,9 +951,9 @@ const handleClick = async (tab?: any) => {
         if (trendTimer.value) {
             window.clearInterval(trendTimer.value)
         }
-        // if (mqttRef.value) {
-        //     mqttRef.value.end()
-        // }
+        if (mqttRef.value) {
+            mqttRef.value.end()
+        }
     }
 }
 //模版下载

src/views/govern/device/control/tabs/components/realtrend.vue

@@ -124,9 +124,9 @@ const open = async (val: any) => {
     params.value = { groupId: tabsList.value[activeName.value]?.id, ...val }
     init()
 
-    setTimeout(() => {
-        loading.value = false
-    }, 1500)
+    // setTimeout(() => {
+    //     loading.value = false
+    // }, 1500)
     return
 }
 //根据指标tab查询实时趋势
@@ -199,6 +199,9 @@ const init = () => {
     })
     if (barCharts.value) {
         barCharts.value[activeName.value]?.initChart()
+        loading.value=false
+    }else{
+        loading.value=true
     }
     return
 }