Web 端的 UI 和逻辑主要由一个核心组件 src/components/MqttDemo.vue
承载。这个组件内部被划分为几个功能明确的区域。
MqttDemo.vue
组件详解
以下是该组件内部各个 UI 面板的功能分析,严格基于其模板代码:
1. 连接配置 (Connection Panel)
- UI:
- 显示当前与 MQTT Broker 的连接状态(“已连接”/“未连接”)以及服务器地址和端口。
- 提供 “连接” 和 “断开” 按钮来手动控制连接。
- 逻辑: 该部分负责建立和维护与 MQTT Broker 的 WebSocket 连接,是所有后续功能的基础。
2. 灯光控制 (Light Control Panel)
- UI:
- 全局控制: “全开”、“全关”、“刷新” 三个按钮,用于批量操作和同步状态。
- 设备列表: 通过
v-for
循环遍历一个名为lights
的数组,动态生成每一个灯光的控制卡片。 - 单个设备: 每个卡片都包含一个图标 (
light.icon
)、设备名称 (light.name
) 和一个状态切换开关,直观地显示并控制灯光的“开启”或“关闭”。
- 逻辑: 点击开关会发布一条控制单个灯光的 MQTT 消息。点击“刷新”按钮则会发布一条查询指令(如
{"command": "list"}
),嵌入式端收到后会上报所有灯光的状态,Web 端监听并更新lights
数组,从而刷新界面。
3. 警报控制 (Alarm Control Panel)
- UI:
- 一个“刷新”按钮用于同步状态。
- 一个醒目的铃铛图标 (🔔)。
- 一个状态切换开关,用于控制警报系统的“开启”或“关闭”。
- 逻辑: 与灯光控制类似,开关会发布控制指令,刷新按钮会发布查询指令。
4. 文件管理 (File Management Panel)
这是一个相对高级的功能,提供了与嵌入式设备进行文件交互的能力。
- UI:
- 文件上传区: 一个支持点击选择或拖拽文件的区域。可以显示当前选中文件的名称和大小。
- 操作按钮: “上传文件”和“取消”按钮。
- 服务器文件列表: 显示从嵌入式设备获取的文件列表 (
fileList
)。
- 逻辑:
- “刷新”按钮会通过 MQTT 请求嵌入式设备上报文件列表。
- 当用户选择文件并点击上传后,很可能会通过一个特定的 MQTT 主题,以某种协议(可能是分块传输)将文件数据发送到嵌入式设备。
5. 消息日志 (Message Log)
- UI: 一个用于显示文本信息的区域和一个“清空”按钮。
- 逻辑: 该区域会订阅所有或部分关键的 MQTT 主题,并将收到的消息内容实时显示出来,是开发和调试过程中的重要工具。