Merge branch 'main' of http://192.168.1.22:3000/zcy/canneng-admin

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

@@ -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">
+                    <div
-                        <el-button :icon="Back" @click="handleReturn">返回</el-button>
+                        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 {
+                        tableLoading.value = false
-                        trendDataTime.value = ''
                     }
+                    // 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(() => {
+            realDataTimer.value = window.setInterval(async () => {
-                getBasicRealData(lineId.value).then((res: any) => {
+                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)
+                    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服务器成功!')

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

@@ -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={}
+    mqttMessage.value = {}
-    if(!val){
+    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) {
-                delete tableData.value.data1
-            }
         }
     }
+    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()