修改bug

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

@@ -126,7 +126,7 @@
                         <el-button type="primary" icon="el-icon-Search" @click="handleClick">查询</el-button>
                         <el-button
                             type="primary"
-                            :loading="tableLoading"
+                            :disabled="tableLoading"
                             v-if="realTimeFlag"
                             :icon="DataLine"
                             @click="handleTrend"
@@ -138,7 +138,7 @@
                             v-if="realTimeFlag"
                             :icon="TrendCharts"
                             @click="handleHarmonicSpectrum"
-                            :loading="tableLoading"
+                            :disabled="tableLoading"
                         >
                             实时趋势
                         </el-button>
@@ -190,7 +190,7 @@
                     "
                 >
                     <!-- 循环渲染的card 最新数据/历史数据显示 -->
-                    <div class="content">
+                    <div class="content" v-if="tableData.length != 0 && !tableLoading">
                         <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
                             <template #header>
                                 <div class="clearfix">
@@ -354,7 +354,7 @@ import {
     getOverLimitData
 } from '@/api/cs-device-boot/EquipmentDelivery'
 import { deviceHisData, deviceRtData } from '@/api/cs-device-boot/csGroup'
-import { ref, reactive, onMounted, onUnmounted, inject, nextTick } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, inject, nextTick, onBeforeUnmount } from 'vue'
 import { ElMessage } from 'element-plus'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import Trend from './tabs/trend.vue' //趋势数据
@@ -444,10 +444,10 @@ const handleTrend = async () => {
                         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))))
-                        )
+                        // console.log(
+                        //     '谐波频谱---mqtt接收到消息',
+                        //     JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
+                        // )
                     }
                     // else {
                     //     trendDataTime.value = obj.dataTime
@@ -644,6 +644,7 @@ const connectMqtt = () => {
     mqttRef.value = mqtt.connect(url, options)
 }
 const getRealDataMqttMsg = async () => {
+    tableLoading.value=true
     if (realDataTimer.value) {
         window.clearInterval(realDataTimer.value)
     }
@@ -783,6 +784,7 @@ const getRealDataMqttMsg = async () => {
                     mqttMessage.value = obj
                     //更新实时数据主页面值
                     realTimeFlag.value && realTimeRef.value && realTimeRef.value.setRealData(mqttMessage.value)
+                    tableLoading.value = false
                     //更新实时趋势折线图数据
                     if (sonTab.value == 2) {
                         !realTimeFlag.value &&
@@ -792,7 +794,6 @@ const getRealDataMqttMsg = async () => {
                     }
                 }
 
-                tableLoading.value = false
 
                 //更新谐波频谱数据
                 // !realTimeFlag.value &&
@@ -822,6 +823,7 @@ const getRealDataMqttMsg = async () => {
 const realDataTimer: any = ref()
 const mqttMessage = ref<any>({})
 const handleClick = async (tab?: any) => {
+    tableLoading.value=true
     if (realDataTimer.value) {
         clearInterval(realDataTimer.value)
     }
@@ -831,7 +833,6 @@ const handleClick = async (tab?: any) => {
     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) {
         dataSet.value = tab.props.name
@@ -984,13 +985,11 @@ const echoName = (value: any, arr: any[]) => {
 }
 
 onMounted(() => {})
-onUnmounted(() => {
-    if (realDataTimer.value) {
-        window.clearInterval(realDataTimer.value)
-    }
-    if (trendTimer.value) {
-        window.clearInterval(trendTimer.value)
-    }
+onBeforeUnmount(() => {
+   clearInterval(realDataTimer.value)
+   clearInterval(trendTimer.value)
+    realDataTimer.value = 0
+    trendTimer.value = 0
     if (mqttRef.value) {
         mqttRef.value.end()
     }