消息日志

pages/news/subpages/deviceCenter/index.vue

@@ -20,8 +20,8 @@
           class="message-item"
       >
         <!-- 时间标签：如果是第一条或者与上一条时间不同才显示 -->
-        <view class="time-label">
-          {{ item.createTime }}
+        <view class="time-label" v-if="index === 0 || !isSameMinute(item.createTime, messageList[index - 1].createTime)">
+          {{ formatTime(item.createTime) }}
         </view>
 
         <view class="champion-card">
@@ -42,8 +42,8 @@
 </template>
 
 <script>
-import Uuid from "@/tuniao-ui/libs/function/uuid";
 import {listMessage} from "@/api/warn/message";
+import * as mqttUtil from "@/utils/mqtt";
 
 export default {
   data() {
@@ -70,6 +70,22 @@ export default {
     // this.getSortDate();
     this.getList()
   },
+  onShow() {
+    console.info("消息日志监听")
+    mqttUtil.setOnMessageCallback(this.ackAlarm);
+  },
+  onHide() {
+    console.info("消息日志取消监听")
+    mqttUtil.removeOnMessageCallback();
+  },
+  onUnload() {
+    console.info("消息日志取消监听")
+    mqttUtil.removeOnMessageCallback();
+  },
+  beforeDestroy() {
+    console.info("消息日志取消监听")
+    mqttUtil.removeOnMessageCallback();
+  },
   methods: {
 
     // 判断两个时间是否是同一天同一分钟
@@ -193,6 +209,25 @@ export default {
     gotoDevice(item) {
 
       this.$tab.navigateTo(item.linkUrl)
+    },
+    ackAlarm(topic, payload) {
+
+      const regex = /^device\/\d+\/alarm$/;
+      if (!regex.test(topic)) return;
+      let msgData = {};
+      // 优化：捕获JSON解析异常
+      try {
+        msgData = JSON.parse(payload);
+        var msg = msgData.msgType
+        this.messageList.push(msg)
+      } catch (e) {
+        console.error("MQTT消息解析失败：", e, payload);
+      } finally {
+        this.$nextTick(() => {
+        this.scrollId
+            = "item"+this.messageList[this.messageList.length-1].id;
+        })
+      }
     }
   }
 }