新增设备列表目标进入动态刷新

src/pages/home/home.vue

@@ -98,7 +98,7 @@
             </movable-view>
         </movable-area> -->
 
-        <view class="bot_version"> v3.0.18</view>
+        <view class="bot_version"> v3.0.19</view>
         <view
             class="shareInfo"
             @click="goDeviceShare('sure')"

src/pagesA/devices/devices.vue

@@ -32,8 +32,10 @@
                 <view v-if="item.online == 1">
                     <view class="online" v-if="item.existFlag == 1">
                         <view class="cardInfo">当前有人</view>
-                        <view class="wcTimes" v-if="item.wcTimes"
-                            >今日卫生间使用频率{{ item.wcTimes }}次</view
+                        <view class="wcTimes" v-if="item.presenceChangeTime"
+                            >进入时间{{
+                                forMateTime(item.presenceChangeTime)
+                            }}</view
                         >
                     </view>
                     <view class="cardTwo" v-else>
@@ -74,6 +76,8 @@
 </template>
 
 <script>
+import MqttService from "../../utils/globalMqtt.js";
+
 export default {
     data() {
         return {
@@ -83,6 +87,8 @@ export default {
             devs: [],
             isInitAlarm: false,
             showModle: false,
+            devClientidList: [],
+            unsubscribeFns: [],
         };
     },
     methods: {
@@ -111,7 +117,6 @@ export default {
             const [hours, minutes] = timePart.split(":");
             return `${parseInt(month)}月${parseInt(day)}日${hours}:${minutes}`;
         },
-
         queryList() {
             uni.showLoading({
                 title: "查询中...",
@@ -145,10 +150,78 @@ export default {
                             }
                         }
                         this.devs = devs;
+                        this.devClientidList = devs.map(
+                            (item) => item.clientId
+                        );
+                        this.subscribePresenceChange(this.devClientidList);
                     }
                     uni.hideLoading();
                 });
         },
+        subscribePresenceChange(clientIdList) {
+            // 遍历订阅
+            if (clientIdList.length == 0) return;
+
+            clientIdList.forEach((clientId) => {
+                const topic = `/dev/${clientId}/presence_change`;
+                const unsubscribe = MqttService.subscribe(
+                    "DATA",
+                    topic,
+                    (message, msgTopic) => {
+                        const dataMatch = msgTopic.match(
+                            /^\/dev\/(.+)\/presence_change$/
+                        );
+                        if (dataMatch) {
+                            // console.log("presence_change", message, msgTopic);
+                            const messageObj = JSON.parse(message);
+                            const id = dataMatch[1];
+                            const format = (date) => {
+                                const Y = date.getFullYear();
+                                const M = String(date.getMonth() + 1).padStart(
+                                    2,
+                                    "0"
+                                );
+                                const D = String(date.getDate()).padStart(
+                                    2,
+                                    "0"
+                                );
+                                const h = String(date.getHours()).padStart(
+                                    2,
+                                    "0"
+                                );
+                                const m = String(date.getMinutes()).padStart(
+                                    2,
+                                    "0"
+                                );
+                                const s = String(date.getSeconds()).padStart(
+                                    2,
+                                    "0"
+                                );
+                                return `${Y}-${M}-${D} ${h}:${m}:${s}`;
+                            };
+
+                            this.devs.forEach((item) => {
+                                if (item.clientId == id) {
+                                    item.existFlag = messageObj.presence;
+                                    item.presenceChangeTime = format(
+                                        new Date(messageObj.timestamp * 1000)
+                                    );
+                                    console.log(
+                                        "presence_change",
+                                        item,
+                                        item.clientId,
+                                        item.existFlag,
+                                        item.presenceChangeTime
+                                    );
+                                }
+                            });
+                        }
+                    }
+                );
+                this.unsubscribeFns.push(unsubscribe); // 保存取消订阅的方法
+            });
+        },
+
         formatDevName(name) {
             return typeof name === "string" && name.length > 6
                 ? name.slice(0, 6) + "..."
@@ -174,6 +247,10 @@ export default {
     },
     onHide() {
         this.showModle = false;
+        if (this.unsubscribeFns) {
+            this.unsubscribeFns.forEach((fn) => fn && fn());
+            this.unsubscribeFns = [];
+        }
     },
     onUnload() {},