家庭环境监测系统

Appearance

参考层 · 展示端细节，汇总页面结构、apiBase 配置和实时控制体验说明

前端说明 ​

前端使用 uni-app，主要用于展示设备状态、历史曲线、天气卡片和控制页面。

一句话结论 ​

前端集中呈现监测、控制、告警和天气信息，是系统的主要交互入口。

小程序完整主界面
小程序主界面总览：城市空气、传感器实时数据与设备控制入口集中在一屏。

运行方式 ​

H5 ​

  1. 用 HBuilderX 打开 frontend/
  2. 运行到浏览器
  3. 页面通过 apiBase 访问后端

微信小程序 ​

  1. 在 HBuilderX 中运行到微信小程序模拟器，或发行到微信开发版
  2. 产物目录通常为 frontend/unpackage/dist/dev/mp-weixin
  3. 使用微信开发者工具导入该目录

后端地址配置 ​

当前源码默认值是：

  1. pages/index/index.vue -> http://10.1.1.1:5001
  2. pages/weather-config/index.vue -> http://10.1.1.1:5001

真机调试时：

  1. 必须使用电脑所在局域网 IP
  2. 不要使用 127.0.0.1

页面功能展示 ​

传感器数据卡片（正常状态）
传感器数据卡片：显示温度、湿度、空气质量等级与台灯开关状态。
城市空气质量卡片
城市空气质量卡片：接入和风天气 API，展示当地实况天气与空气质量。

空气质量卡片三态 ​

预热中 ​

当 gasCalibrated=false 时：

  1. 芯片显示"预热中"
  2. 提示文案为"传感器预热中，数值仅供参考"

正常空气等级 ​

当传感器完成校准后：

  1. 按 gasPpm 显示空气优 / 良 / 中 / 差
  2. 主状态与软件阈值保持一致

硬件比较器状态 ​

页面会单独显示：

  1. "硬件比较器：已触发"
  2. "硬件比较器：未触发"

它对应 MQ135 的 DO 状态，不直接等于主告警。

空气质量正常状态（10 ppm）
正常状态：空气质量优 1，10 ppm，硬件比较器未触发。
空气质量告警状态（239 ppm）
告警状态：空气质量 4 级，239 ppm，台灯已联动开启，可用于说明阈值联动效果。

控制页面 ​

前端支持直接控制告警阈值和风扇模式，修改后立即通过后端下发 MQTT 命令到设备。

告警设置页面
告警设置：可分别调整温度、湿度和气体阈值，告警开关可独立控制。
空气净化设置页面
空气净化设置：支持 AUTO 模式（按空气质量自动调速）和手动 1/2/3 档，当前 AUTO / 875 RPM。

历史趋势 ​

历史数据趋势图
历史趋势图：展示温度、湿度与 PPM 的时序变化，数据来自 PostgreSQL 历史库，由 history_service 提供。

天气配置 ​

前端内置和风天气配置入口，可在不修改代码的情况下更换 API Key 和接口域名。

和风天气配置界面
天气卡片配置：选择位置格式（经纬度、城市 ID 或城市名），填入坐标后即可拉取天气数据。
接口配置页面
接口配置：填写 API Key 和天气/地理接口域名，支持测试连通性后保存。

联调建议 ​

  1. 先启动后端
  2. 用 /api/health 确认在线
  3. 再启动前端
  4. 观察 /api/latest 是否持续更新