实时趋势问题修改

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

@@ -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">
+                    <div class="view_top_btn" v-if="!realTimeFlag && mqttMessage.dataTime && sonTab == 2">
-                        <p v-if="mqttMessage.dataTime" style="margin: 0 auto">数据时间： {{ mqttMessage.dataTime }}</p>
                         <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()
+            // connectMqtt()
-            mqttRef.value.on('connect', (e: any) => {
+            // mqttRef.value.on('connect', (e: any) => {
-                // ElMessage.success('连接mqtt服务器成功!')
+            //     // ElMessage.success('连接mqtt服务器成功!')
-                console.log('mqtt客户端已连接....')
+            //     console.log('mqtt客户端已连接....')
-                // mqttRef.value.subscribe('/Web/Progress')
+            //     // mqttRef.value.subscribe('/Web/Progress')
-                mqttRef.value.subscribe('/Web/RealData/+')
+            //     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通讯
+            mqttMessage.value = {}
-            //每隔30s调用一下接口，通知后台推送mqtt消息
+
-            realDataTimer.value = setInterval(() => {
+            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接收到消息',
-                console.log(
+                //     JSON.parse(JSON.stringify(JSON.parse(new TextDecoder().decode(message))))
-                    '实时数据&实时趋势---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 &&
+                // !realTimeFlag.value &&
-                    sonTab.value == 1 &&
+                //     sonTab.value == 1 &&
-                    realTrendRef.value &&
+                //     realTrendRef.value &&
-                    realTrendRef.value.setRealTrendData(obj)
+                //     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)
+            window.clearInterval(trendTimer.value)
-        }
-        if (mqttRef.value) {
-            mqttRef.value.end()
         }
+        // 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;
+    justify-content: flex-end;
-    padding-left: 20%;
+    // 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>

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

@@ -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()
 }

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

@@ -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)

src/views/govern/device/control/tabs/realtime.vue

@@ -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 {