家属端

本科毕业设计 · 2027 届 · 计算机工程学院

首页/家属端与事件闭环
打开家属端应用 ↗ 返回课题页
家属端应用已上线：https://47.107.100.41/app/（Vue 3 实时端，登录后可看设备状态、事件流与报警推送）。本页介绍的是它的设计与事件闭环。

一条事件的全过程

① 设备产生STM32 判定通过 → ESP32 组帧
② 上报MQTT QoS 1 发布 JSON
③ 后端处理校验 → event_id 去重 → 入库
④ 推送WebSocket 广播 → 家属端提示
⑤ 确认家属查看 / 标记已处理

这五步里，②③④ 三个关键环节都有明确的失败行为，这是设计的一部分而不是意外：

环节失败情形系统行为后果
② 上报Wi-Fi / Broker 不可达设备本地缓存待发队列事件延后但不丢
③ 后端收到重复 event_id幂等去重，不重复入库家属端不会重复收到
③ 后端字段校验失败拒绝入库并记录告警坏数据不污染历史
④ 推送WebSocket 断开客户端自动重连，重连后拉取差值短暂延迟后补齐

接口划分

REST API

  • GET /api/events 历史事件列表（分页、时间范围筛选）
  • GET /api/events/:id 单条事件详情
  • POST /api/events/:id/ack 标记已处理
  • GET /api/devices 设备与传感器在线状态
  • 用于：首次加载、刷新、历史回溯

WebSocket

  • 连接后立即推送当前设备状态快照
  • 新事件产生时广播 {type:"event", data:{...}}
  • 设备上下线时广播 {type:"state", data:{...}}
  • 断线后指数退避重连，重连成功补一次全量同步
  • 用于：实时提醒，不承担历史查询
前端不持有 MQTT Broker 凭据。Broker 只在设备与后端之间，浏览器一律走 REST 与 WebSocket。把 MQTT 密码打进前端 bundle 是一个常见但不可接受的做法。

界面构成

家属端共三块主界面，都在 Vue 3 + Vite 上实现，适配手机宽度。

实时报警页

当前是否有未处理事件；最近一条事件的类型、时间、级别；一键拨打与标记已处理。

界面截图

历史记录页

按时间倒序列出全部事件，区分跌倒 / 久滞 / 呼救 / 环境预警；支持按时间范围筛选。

界面截图

设备与传感器页

设备在线状态、最后心跳时间、雷达 / PIR / MQ 系列读数，以及断网补传的可视化提示。

界面截图

家属端界面（待补充） 实时报警 / 历史记录 / 设备状态 三屏
前端开发完成后截图填入 此处不放示意图或设计稿冒充成品

四种状态，命名与含义

状态含义是否推送家属
suspected雷达上报候选，尚未通过 5 秒确认否
local_alarm确认通过，本地声光已响，30 秒取消窗进行中否（窗口内）
confirmed30 秒内未取消，事件成立是
cancelled窗口内被按键或语音取消否（记误报）
家属端看到的只有 confirmed。这个边界是刻意的：把「疑似」推给子女，等于用高频误报换取虚假的安全感，很快就会让人麻木到忽略真正的报警。