hfln_miniprogram/src/components/component/alarModel.vue

<template>
    <!-- 告警弹窗 -->
    <view style="z-index: 999">
        <view class="mask" v-if="alarmModel"></view>
        <view class="alarm-modal" v-if="alarmModel">
            <view class="alarm">
                <!-- <image src="../../images/alram.png" mode="" /> -->
                <image src="../../static/alarm.png"></image>
            </view>
            <view class="alarm-header">
                <image src="../../static/alarm_event.png" mode="" />
            </view>
            <view class="nowTime">
                {{ nowTime }}
            </view>
            <view class="alarm-info">
                <text style="color: #ff6d6d">{{ devName }}</text>
                检测到可能发生跌倒事件，请立即处理！
            </view>
            <view class="backImg">
                <image src="../../static/actionRed.png" mode="" />
            </view>
            <view class="alarm-bottom">
                <template v-if="voipFlag">
                    <view
                        class="alarm-voice"
                        v-if="authorizeFlag"
                        @click="gotoCallPage"
                    >
                        语音确认
                    </view>
                    <view class="alarm-voice" v-else @click="authorizeIot">
                        语音确认
                    </view>
                </template>
                <view class="alarm-handle" @click="handleAlarm()">
                    已知晓
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import MqttService from "../../utils/globalMqtt.js";
import config from "../../data/config.js";
import {
    getSnTicket,
    authorize,
    getDeviceVoIPList,
    getContactList,
    getUser,
} from "../../api/index.js";
import {
    CameraStatus,
    AuthorizeStatus,
    CallPagePlugin,
    isWmpf,
} from "../../const.js";
import { AsyncValue } from "../../utils";
import { onShow } from "@dcloudio/uni-app";
const wmpfVoip = requirePlugin("wmpf-voip").default;
const envVersion = wx.getAccountInfoSync().miniProgram.envVersion;
const apiTypes = ["校园模式", "硬件模式", "呼叫安卓", "校园+硬件模式"];
const apiTypesWMPF = [1, 0, 3];
const apiTypesWechat = [2];

const getEnvVersionForVoip = (function () {
    const _map = {
        develop: "developer",
        trial: "trial",
        release: "formal",
    };
    return () => {
        return _map[envVersion];
    };
})();
export default {
    comments: {
        name: "alarModel",
    },
    props: {
        clientIdProp: {
            default: null,
        },
    },
    data() {
        return {
            alarmModel: false,
            eventListId: "",
            nowTime: "",
            devName: "",
            authorizeFlag: true,
            clientId: "",
            mqttClientTwo: "",
            // voip相关
            isWmpf: isWmpf,
            name: "用户",
            voipDevices: [],
            sn: "",
            isShowPopUp: false,
            contactList: [],
            isWmpf,
            envVersion,
            apiTypesValid: (isWmpf ? apiTypesWMPF : apiTypesWechat).map(
                (id) => apiTypes[id]
            ),
            apiTypeIndex: 0,
            currentIndex: 0,
            voipFlag: "",
            mqttClientFlag: false,
            inactivityTimer: "",
        };
    },
    computed: {},
    methods: {
        authorizeIot() {
            this.hanledList("Voice");
            this.sn = this.clientId;
            this.alarmModel = false;
            // const { name, sn, voipDevices } = this;
            const name = this.name;
            const sn = this.clientId;
            const voipDevices = this.voipDevices;
            if (!name || name.length === 0 || !sn || sn.length === 0) {
                wx.showToast({
                    title: "请输入授权人名称和设备clientId",
                    icon: "none",
                });
                return;
            }
            const { modelId } = config;
            console.log(sn, modelId, 77777);
            const { snTicket } = getSnTicket({
                sn,
                modelId,
            });
            console.log(snTicket, sn, 7777555);
            var that = this;
            wx.requestDeviceVoIP({
                sn,
                snTicket,
                modelId,
                deviceName: sn,
                async success(res) {
                    console.log(`requestDeviceVoIP`, res);
                    await authorize({
                        sn,
                        name,
                    });
                    wx.showToast({
                        title: "授权成功",
                        icon: "none",
                    });
                    const key = `voipDevices[${voipDevices.length}]`;
                    // that.setData({
                    //     [key]: {
                    //         sn,
                    //         modelId,
                    //         status: 1,
                    //     },
                    // });
                    that.voipDevices[voipDevices.length] = {
                        sn,
                        modelId,
                        status: 1,
                    };

                    that.sn = sn;
                    that.modelId = modelId;
                    that.status = 1;
                    that.gotoCallPage();
                },
                fail(err) {
                    console.error(`requestDeviceVoIP failOne`, err);
                    wx.showToast({
                        title: "授权失败, 请前往设置页开启",
                        icon: "none",
                    });
                },
            });
        },
        handleAlarm() {
            this.hanledList("noVoice");
            this.alarmModel = false;
        },
        // voip相关方法
        async getVoipDevices() {
            const { list } = await getDeviceVoIPList();
            console.log("getDeviceVoIPList:", list);
            if (list && list.length > 0) {
                const authorizeFlag = list.some(
                    (item) => item.sn === this.clientId
                );
                console.log("authorizeFlag:", list, authorizeFlag);
                this.authorizeFlag = authorizeFlag;
            }
            if (!list || list.length === 0) {
                this.authorizeFlag = false;
            }
            if (typeof list === "object") {
                this.voipDevices = list;
            }
        },
        async authorizeIot() {
            this.sn = this.clientId;
            // this.alarmModel = false;
            const name = this.name;
            const sn = this.sn;
            const voipDevices = this.voipDevices;
            console.log(name, sn, voipDevices, 9999999999999);
            // const { name, sn, voipDevices } = this;
            if (!name || name.length === 0 || !sn || sn.length === 0) {
                wx.showToast({
                    title: "请输入授权人名称和设备dev_id",
                    icon: "none",
                });
                return;
            }
            const { modelId } = config;
            console.log(sn, modelId, 77777);
            const { snTicket } = await getSnTicket({
                sn,
                modelId,
            });
            console.log(snTicket, sn, 997777);
            var that = this;
            wx.requestDeviceVoIP({
                sn,
                snTicket,
                modelId,
                deviceName: sn,
                async success(res) {
                    console.log(`requestDeviceVoIP`, res);
                    await authorize({
                        sn,
                        name,
                    });
                    wx.showToast({
                        title: "授权成功",
                        icon: "none",
                    });
                    const key = `voipDevices[${voipDevices.length}]`;
                    // that.key = {
                    //     sn,
                    //     modelId,
                    //     status: 1,
                    // };
                    that.voipDevices[voipDevices.length] = {
                        sn,
                        modelId,
                        status: 1,
                    };
                    that.gotoCallPage();
                },
                fail(err) {
                    console.error(`requestDeviceVoIP failTwo`, err);
                    wx.showToast({
                        title: "授权失败, 请前往设置页开启",
                        icon: "none",
                    });
                },
            });
        },
        async gotoCallPage() {
            this.hanledList("Voice");
            wx.showToast({
                title: "通话加载中...",
                icon: "loading",
                duration: 2000, //持续的时间
            });
            // this.alarmModel = false;
            this._caller = new AsyncValue();
            let options = {
                sn: this.sn,
            };
            await this.getSelf(options);
            await this.getContactList();
            let voiceCan = {
                sn: this.sn,
                idx: 1,
                type: "voice",
            };
            await this.call(voiceCan);
        },
        async getSelf(options = {}) {
            if (!this._caller.isPending()) {
                return;
            }
            if (isWmpf) {
                const { sn } = options;
                if (sn) {
                    config.sn = sn;
                    this.sn = sn;
                }
                this._caller.set({
                    id: config.sn,
                    name: config.sn,
                });
            } else {
                try {
                    const resp = await getUser();
                    console.log(`getUser`, resp);
                    this._caller.set({
                        id: resp.openid,
                        name: resp.name,
                    });
                } catch (error) {
                    console.error(`getself error`, error);
                }
            }
        },
        async getContactList() {
            wx.showLoading();
            try {
                let contactList = [];
                const raw_contactList = await getContactList({
                    sn: isWmpf ? config.sn : null,
                });
                console.log(`raw_contactList`, raw_contactList);
                if (!isWmpf) {
                    // 微信呼叫设备
                    const { list } = await getDeviceVoIPList();
                    contactList = raw_contactList.map(({ sn, pushToken }) => {
                        let canCall = true;
                        if (typeof list === "object") {
                            const canCallList = list
                                .filter(
                                    (item) =>
                                        item.status === AuthorizeStatus.ACCEPT
                                )
                                .map((item) => item.sn);
                            canCall = canCallList.includes(sn);
                        }
                        return {
                            id: sn,
                            name: sn,
                            canCall,
                            ticket: pushToken,
                        };
                    });
                } else {
                    // 设备呼叫微信
                    const raw_contactList = await getContactList({
                        sn: config.sn,
                    });
                    console.log(`raw_contactList: 业务方存储`, raw_contactList);
                    if (raw_contactList.length > 0) {
                        const canCallList = (
                            await wmpfVoip.getIotBindContactList({
                                sn: config.sn,
                                model_id: config.modelId,
                                openid_list: raw_contactList.map(
                                    (item) => item.openid
                                ),
                            })
                        ).contact_list
                            .filter(
                                (item) => item.status === AuthorizeStatus.ACCEPT
                            )
                            .map((item) => item.openid);
                        console.log(`canCallList: 微信授权存储`, canCallList);
                        contactList = raw_contactList.map((item) => {
                            const canCall = canCallList.includes(item.openid);
                            return {
                                id: item.openid,
                                name: item.name,
                                canCall,
                                ticket: "",
                            };
                        });
                    }
                }
                console.log(`getContactList: `, contactList);

                this.contactList = contactList;
            } catch (error) {
                console.error(`getContactList error: `, error);
            }
            wx.hideLoading();
        },
        async call(e) {
            console.log(`call`, "走到了call方法");
            const { sn, idx, type: roomtype } = e;
            // console.log(e, this.contactList, 888870);
            const target = this.contactList.find((item) => item.id === sn);
            console.log("走到了这里了。。。。1", target);
            // const target = this.contactList[idx];
            const apiTypeName = this.apiTypesValid[this.apiTypeIndex];
            const businessType = apiTypes.indexOf(apiTypeName);
            try {
                if (!target.canCall) {
                    wx.showToast({
                        title: "用户未授权或设备不在线",
                        icon: "none",
                    });
                    throw Error("target can not call");
                }
                console.log("走到了这里了。。。。2");
                const _caller = await this._caller.get();
                console.log(`caller: `, _caller);
                console.log(`listener: `, target);
                const { roomId } = await wmpfVoip.callDevice({
                    roomType: "voice",
                    sn: sn,
                    modelId: "iFJ2BNIQcd9WlUIaT7_l4Q",
                    nickName: "xx",
                    isCloud: true,
                    payload: "radar-power.cn",
                });
                wx.redirectTo({
                    url: CallPagePlugin,
                });
            } catch (error) {
                console.log(`>>>>>>>>>>>>>>>>>>>>>>>>>>>`);
                console.error(`call error`, error);
            }
        },
        // mqtt相关方法
        // connectMQTTwo() {
        //     if (this.mqttClientFlag) {
        //         console.log("主题已订阅");
        //         return;
        //     }
        //     const THRESHOLD = 2;
        //     const params = {
        //         keepalive: 6000,
        //         clean: true,
        //         connectTimeout: 30 * 1000,
        //         clientId:
        //             "xcx_mqtt_cmd1" +
        //             uni.getStorageSync("userId") +
        //             Math.random().toString(16).substring(2, 8),
        //         username: "lnradar",
        //         password: "lnradar",
        //         // 微信小程序特定配置
        //         wsOptions: {
        //             WebSocket: function (url) {
        //                 return wx.connectSocket({
        //                     url: url,
        //                     header: {
        //                         "content-type": "application/json",
        //                     },
        //                     protocols: ["mqtt"],
        //                 });
        //             },
        //         },
        //         reconnectPeriod: 0,
        //         rejectUnauthorized: false, // 仅开发环境使用，生产环境应设为true或移除
        //     };
        //     let client = "";
        //     let selectedService = uni.getStorageSync("sercviceChoice");
        //     if (!selectedService || selectedService == "aloneServe") {
        //         if (__wxConfig.envVersion == "develop") {
        //             client = mqtt.connect(
        //                 "wxs://cmd.radar-power.cn/mqtt/",
        //                 params
        //             );
        //         }
        //         if (__wxConfig.envVersion == "trial") {
        //             client = mqtt.connect(
        //                 "wxs://cmd.radar-power.cn/mqtt/",
        //                 params
        //             );
        //         }
        //     }
        //     // 存储client引用以便后续操作
        //     this.mqttClientTwo = client;
        //     client.on("connect", () => {
        //         console.log("MQTT连接成功");
        //         this.mqttClientFlag = true;
        //         let userId = uni.getStorageSync("userId");
        //         client.subscribe(`/mps/wx_${userId}/notice`, (err) => {
        //             if (err) {
        //                 console.error("订阅失败", err);
        //             } else {
        //                 console.log(
        //                     `成功订阅设备主题: /mps/wx_${userId}/notice`
        //                 );
        //             }
        //         });
        //     });
        //     client.on("disconnect", () => {
        //         console.log("MQTT不在连接");
        //     });
        //     client.on("error", (err) => {
        //         this.mqttClientFlag = false;
        //         setTimeout(() => {
        //             this.connectMQTTwo();
        //         }, 1000);
        //     });

        //     client.on("reconnect", () => {});

        //     client.on("close", () => {});

        //     client.on("message", (topic, message) => {
        //         console.log(JSON.parse(message.toString()), "8870");
        //         // 处理点位消息
        //         let userId = uni.getStorageSync("userId");

        //         console.log("topic777777", userId);

        //         const noticeMatch = /^\/mps\/wx_(.+)\/notice$/;
        //         const match = topic.match(noticeMatch);
        //         if (!match) return;
        //         this.alarmModel = true;
        //         const data = JSON.parse(message.toString());
        //         this.clientId = data.clientId;
        //         this.devName = data.devName;
        //         this.sn = data.clientId;
        //         this.eventListId = data.eventListId;
        //         this.getVoipAuthor(this.clientId, userId);
        //         console.log(data, topic, "接收到消息222:");
        //         console.log(
        //             "接收到消息:",
        //             this.clientId,
        //             this.devName,
        //             this.sn,
        //             this.eventListId,
        //             data
        //         );
        //         const now = new Date();
        //         const year = now.getFullYear();
        //         const month = (now.getMonth() + 1).toString().padStart(2, "0");
        //         const day = now.getDate().toString().padStart(2, "0");
        //         const hours = now.getHours().toString().padStart(2, "0");
        //         const minutes = now.getMinutes().toString().padStart(2, "0");
        //         const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}`;
        //         this.nowTime = formattedTime;
        //         console.log("isWmpf:", isWmpf);
        //         if (!isWmpf) {
        //             console.log("isWmpf:", isWmpf);
        //             this.getVoipDevices();
        //         }
        //         console.log("接收到消息:", topic, data);
        //     });
        // },

        hanledList(type) {
            this.$http
                .get(`wap/event/handleEvent`, {
                    eventListId: this.eventListId,
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        if (type === "noVoice") {
                            uni.showToast({
                                title: "已处理",
                                icon: "success",
                                duration: 1500,
                            });
                        }
                    } else {
                        uni.showToast({
                            title: "处理失败",
                            icon: "none",
                            duration: 1500,
                        });
                    }
                });
        },
        closemqtt() {
            this.mqttClientFlag = false;
            if (this.mqttClientTwo) {
                this.mqttClientTwo.end();
                this.mqttClientTwo = null;
                console.log("MQTT连接已断开");
            }
        },
        getVoipAuthor(clientId, userId) {
            console.log(clientId, userId);
            this.$http
                .post(
                    "wap/share/queryUserVoipPermission",
                    {
                        userId: userId,
                        clientId: clientId,
                    },
                    {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                    }
                )
                .then((res) => {
                    if (res.data.data) {
                        console.log(res.data.data, 9999);
                        if (res.data.data.voipFlag === 0) {
                            this.voipFlag = true;
                        } else {
                            this.voipFlag = false;
                        }
                    }
                });
        },
        sendChange() {
            this.$emit("sendChange", this.targetPoints);
        },
        hanOtherMessage(topic, message) {
            console.log("接收到组件的消息:", JSON.parse(message.toString()));
            console.log(JSON.parse(message.toString()), "8870");
            // 处理点位消息
            let userId = uni.getStorageSync("userId");
            const noticeMatch = /^\/mps\/wx_(.+)\/notice$/;
            const match = topic.match(noticeMatch);
            if (!match) return;
            this.alarmModel = true;
            const data = JSON.parse(message.toString());
            this.clientId = data.clientId;
            this.devName = data.devName;
            this.sn = data.clientId;
            this.eventListId = data.eventListId;
            this.getVoipAuthor(this.clientId, userId);
            console.log(data, topic, "接收到消息222:");
            console.log(
                "接收到消息:",
                this.clientId,
                this.devName,
                this.sn,
                this.eventListId,
                data
            );
            const now = new Date();
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, "0");
            const day = now.getDate().toString().padStart(2, "0");
            const hours = now.getHours().toString().padStart(2, "0");
            const minutes = now.getMinutes().toString().padStart(2, "0");
            const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}`;
            this.nowTime = formattedTime;
            console.log("isWmpf:", isWmpf);
            if (!isWmpf) {
                console.log("isWmpf:", isWmpf);
                this.getVoipDevices();
            }
            console.log("接收到消息:", topic, data);
        },
    },
    mounted() {
        // if (this.$mqttClient) {
        //     console.log("开始接受mqtt消息111");
        //     this.$mqttClient.on("message", (topic, message) => {
        //         console.log(
        //             "接收到消息CMD11111:",
        //             JSON.parse(message.toString())
        //         );
        //         console.log(JSON.parse(message.toString()), "8870");
        //         // 处理点位消息
        //         let userId = uni.getStorageSync("userId");
        //         const noticeMatch = /^\/mps\/wx_(.+)\/notice$/;
        //         const match = topic.match(noticeMatch);
        //         if (!match) return;
        //         this.alarmModel = true;
        //         const data = JSON.parse(message.toString());
        //         this.clientId = data.clientId;
        //         this.devName = data.devName;
        //         this.sn = data.clientId;
        //         this.eventListId = data.eventListId;
        //         this.getVoipAuthor(this.clientId, userId);
        //         console.log(data, topic, "接收到消息222:");
        //         console.log(
        //             "接收到消息:",
        //             this.clientId,
        //             this.devName,
        //             this.sn,
        //             this.eventListId,
        //             data
        //         );
        //         const now = new Date();
        //         const year = now.getFullYear();
        //         const month = (now.getMonth() + 1).toString().padStart(2, "0");
        //         const day = now.getDate().toString().padStart(2, "0");
        //         const hours = now.getHours().toString().padStart(2, "0");
        //         const minutes = now.getMinutes().toString().padStart(2, "0");
        //         const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}`;
        //         this.nowTime = formattedTime;
        //         console.log("isWmpf:", isWmpf);
        //         if (!isWmpf) {
        //             console.log("isWmpf:", isWmpf);
        //             this.getVoipDevices();
        //         }
        //         console.log("接收到消息:", topic, data);
        //     });
        // } else {
        //     uni.$once("mqtt-ready", () => {
        //         console.log("开始接受mqtt消息222");
        //         this.$mqttClient.on("message", (topic, message) => {
        //             console.log(
        //                 "接收到消息CMD222:",
        //                 JSON.parse(message.toString())
        //             );
        //             console.log(JSON.parse(message.toString()), "8870");
        //             // 处理点位消息
        //             let userId = uni.getStorageSync("userId");
        //             const noticeMatch = /^\/mps\/wx_(.+)\/notice$/;
        //             const match = topic.match(noticeMatch);
        //             if (!match) return;
        //             this.alarmModel = true;
        //             const data = JSON.parse(message.toString());
        //             this.clientId = data.clientId;
        //             this.devName = data.devName;
        //             this.sn = data.clientId;
        //             this.eventListId = data.eventListId;
        //             this.getVoipAuthor(this.clientId, userId);
        //             console.log(data, topic, "接收到消息222:");
        //             console.log(
        //                 "接收到消息:",
        //                 this.clientId,
        //                 this.devName,
        //                 this.sn,
        //                 this.eventListId,
        //                 data
        //             );
        //             const now = new Date();
        //             const year = now.getFullYear();
        //             const month = (now.getMonth() + 1)
        //                 .toString()
        //                 .padStart(2, "0");
        //             const day = now.getDate().toString().padStart(2, "0");
        //             const hours = now.getHours().toString().padStart(2, "0");
        //             const minutes = now
        //                 .getMinutes()
        //                 .toString()
        //                 .padStart(2, "0");
        //             const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}`;
        //             this.nowTime = formattedTime;
        //             console.log("isWmpf:", isWmpf);
        //             if (!isWmpf) {
        //                 console.log("isWmpf:", isWmpf);
        //                 this.getVoipDevices();
        //             }
        //             console.log("接收到消息:", topic, data);
        //         });
        //     });
        // }
        // 确保已经连接好再订阅

        const userId = uni.getStorageSync("userId");
        const topic = `/mps/wx_${userId}/notice`;

        if (MqttService.cmdConnected) {
            // 已连接 → 直接订阅
            this.unsubscribeOther = MqttService.subscribe(
                "CMD",
                topic,
                (message) => {
                    const data = JSON.parse(message);
                    let userId = uni.getStorageSync("userId");
                    const noticeMatch = /^\/mps\/wx_(.+)\/notice$/;
                    const match = topic.match(noticeMatch);
                    if (!match) return;
                    // 更新页面数据
                    this.alarmModel = true;
                    this.clientId = data.clientId;
                    this.devName = data.devName;
                    this.sn = data.clientId;
                    this.eventListId = data.eventListId;
                    // VOIP 相关逻辑
                    this.getVoipAuthor(this.clientId, userId);
                    // 格式化时间
                    const now = new Date();
                    this.nowTime = `${now.getFullYear()}-${String(
                        now.getMonth() + 1
                    ).padStart(2, "0")}-${String(now.getDate()).padStart(
                        2,
                        "0"
                    )} ${String(now.getHours()).padStart(2, "0")}:${String(
                        now.getMinutes()
                    ).padStart(2, "0")}`;
                    if (!isWmpf) {
                        this.getVoipDevices();
                    }
                    console.log("处理后的 CMD 数据:", data);
                },
                (err) => {
                    if (!err) console.log(`✅ 页面B 已订阅 ${topic}`);
                }
            );
        } else {
            // 还没连上 → 等待 mqtt-ready
            uni.$once("mqtt-ready", () => {
                this.unsubscribeOther = MqttService.subscribe(
                    "CMD",
                    topic,
                    (message) => {
                        const data = JSON.parse(message);
                        let userId = uni.getStorageSync("userId");
                        const noticeMatch = /^\/mps\/wx_(.+)\/notice$/;
                        const match = topic.match(noticeMatch);
                        if (!match) return;
                        // 更新页面数据
                        this.alarmModel = true;
                        this.clientId = data.clientId;
                        this.devName = data.devName;
                        this.sn = data.clientId;
                        this.eventListId = data.eventListId;
                        // VOIP 相关逻辑
                        this.getVoipAuthor(this.clientId, userId);
                        // 格式化时间
                        const now = new Date();
                        this.nowTime = `${now.getFullYear()}-${String(
                            now.getMonth() + 1
                        ).padStart(2, "0")}-${String(now.getDate()).padStart(
                            2,
                            "0"
                        )} ${String(now.getHours()).padStart(2, "0")}:${String(
                            now.getMinutes()
                        ).padStart(2, "0")}`;
                        if (!isWmpf) {
                            this.getVoipDevices();
                        }
                        console.log("处理后的 CMD 数据:", data);
                    },
                    (err) => {
                        if (!err) console.log(`✅ 页面B 已订阅 ${topic}`);
                    }
                );
            });
        }

        // if (MqttService.cmdConnected) {
        //     this.unsubscribeFn = MqttService.subscribe(
        //         "CMD",
        //         topic,
        //         (topic, message) => {
        //             const data = JSON.parse(message);
        //             let userId = uni.getStorageSync("userId");
        //             const noticeMatch = /^\/mps\/wx_(.+)\/notice$/;
        //             const match = topic.match(noticeMatch);
        //             if (!match) return;
        //             // 更新页面数据
        //             this.alarmModel = true;
        //             this.clientId = data.clientId;
        //             this.devName = data.devName;
        //             this.sn = data.clientId;
        //             this.eventListId = data.eventListId;
        //             // VOIP 相关逻辑
        //             this.getVoipAuthor(this.clientId, userId);
        //             // 格式化时间
        //             const now = new Date();
        //             this.nowTime = `${now.getFullYear()}-${String(
        //                 now.getMonth() + 1
        //             ).padStart(2, "0")}-${String(now.getDate()).padStart(
        //                 2,
        //                 "0"
        //             )} ${String(now.getHours()).padStart(2, "0")}:${String(
        //                 now.getMinutes()
        //             ).padStart(2, "0")}`;
        //             if (!isWmpf) {
        //                 this.getVoipDevices();
        //             }
        //             console.log("处理后的 CMD 数据:", data);
        //         }
        //     );
        // } else {
        //     uni.$once("mqtt-ready", () => {
        //         this.unsubscribeFn = MqttService.subscribe(
        //             "CMD",
        //             topic,
        //             (topic, message) => {
        //                 const data = JSON.parse(message);
        //                 let userId = uni.getStorageSync("userId");
        //                 const noticeMatch = /^\/mps\/wx_(.+)\/notice$/;
        //                 const match = topic.match(noticeMatch);
        //                 if (!match) return;
        //                 // 更新页面数据
        //                 this.alarmModel = true;
        //                 this.clientId = data.clientId;
        //                 this.devName = data.devName;
        //                 this.sn = data.clientId;
        //                 this.eventListId = data.eventListId;
        //                 // VOIP 相关逻辑
        //                 this.getVoipAuthor(this.clientId, userId);
        //                 // 格式化时间
        //                 const now = new Date();
        //                 this.nowTime = `${now.getFullYear()}-${String(
        //                     now.getMonth() + 1
        //                 ).padStart(2, "0")}-${String(now.getDate()).padStart(
        //                     2,
        //                     "0"
        //                 )} ${String(now.getHours()).padStart(2, "0")}:${String(
        //                     now.getMinutes()
        //                 ).padStart(2, "0")}`;
        //                 if (!isWmpf) {
        //                     this.getVoipDevices();
        //                 }
        //                 console.log("处理后的 CMD 数据:", data);
        //             }
        //         );
        //     });
        // }
    },

    beforeDestroy() {
        if (this.unsubscribeCmd) {
            this.unsubscribeCmd();
            this.unsubscribeCmd = null;
            console.log("CMD 订阅已取消");
        }
    },
};
</script>

<style lang="less" scoped>
/* 弹窗部分样式 */
.mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.alarm-modal {
    width: 675rpx;
    height: 1100rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #ffdfdf 0%, #ffffff 30.3%);
    border-radius: 37rpx 37rpx;
    z-index: 103;
    padding: 50rpx 55rpx;
    box-sizing: border-box;

    .alarm-header image {
        width: 315rpx;
        height: 40rpx;
    }

    .alarm image {
        position: fixed;
        top: 0;
        right: 0;
        width: 180rpx;
        height: 175rpx;
    }

    .nowTime {
        width: 270rpx;
        margin-top: 20rpx;
        text-align: center;
        align-items: center;
        line-height: 100%;
        background: #fed5d5;
        color: #111111;
        font-size: 28rpx;
        border-radius: 10rpx;
        padding: 5rpx 5rpx;
    }

    .alarm-info {
        margin-top: 40rpx;
        color: #111111;
        font-size: 28rpx;
        letter-spacing: 4%;
    }

    .backImg {
        margin: 37rpx auto;
        width: 400rpx;
        height: 600rpx;
        background-color: #fff;
        border: 12rpx solid #333333;
        background-image: url(https://hflnxx.oss-cn-shanghai.aliyuncs.com/IMAGE/20250919/toilet_bg.png);
        background-repeat: no-repeat;
        background-position: center;

        image {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60rpx;
            height: 60rpx;
        }
    }

    .alarm-bottom {
        display: flex;
        justify-content: flex-end;
        align-items: center;

        .alarm-voice {
            width: 185rpx;
            height: 85rpx;
            background: #f3e2dd;
            border-radius: 28rpx;
            color: #111111;
            font-size: 32rpx;
            text-align: center;
            line-height: 85rpx;
        }

        .alarm-handle {
            margin-left: 20rpx;
            width: 185rpx;
            height: 85rpx;
            background: linear-gradient(114.23deg, #a27867 0%, #74483d 100%);
            border-radius: 28rpx;
            box-shadow: 0rpx 4.69rpx 18.75rpx rgba(72, 41, 29, 0.15),
                0rpx 9.38rpx 9.38rpx rgba(154, 132, 89, 0.2),
                0rpx -4.69rpx 28.13rpx 4.69rpx #a16647 inset;
            color: #ffffff;
            font-size: 32rpx;
            text-align: center;
            line-height: 85rpx;
        }
    }
}
</style>