4.1 KiB
4.1 KiB
任务008：H5用户端
目标
实现H5用户端，底部导航（首页/设备/我的），扫码进入设备详情，充电控制。
技术栈
- React + TypeScript（复用前端项目）
- 移动端适配（viewport + rem/vw）
- Arco Design Mobile（或自定义移动端组件）
路由结构
/pms # H5首页（Dashboard）
/pms/devices # 设备列表
/pms/devices/:id # 设备详情（柜子视图）
/pms/me # 我的
/pms/login # 登录
扫码入口： /pms/{abstract_id} 直接跳到设备详情
页面设计
底部导航
┌─────────────────┐
│ │
│ 页面内容 │
│ │
─────────────────┤
│ 首页 | 设备 | 我的 │
└─────────────────┘
首页（Dashboard）
数据卡片：
┌─────┐ ┌───── ┌─────┐ ┌─────
│在线 │ │充电中│ │空闲 │ │故障 │
│ 125 │ │ 45 │ │ 82 │ │ 3 │
│柜子 │ │柜子 │ │通道 │ │通道 │
└───── └───── └───── └─────┘
今日统计：
- 充电次数：423次
- 充电时长：628小时
- 总能耗：3,750 kWh
告警通知：
- ⚠ 项目A-柜子3 通道12 过温
- ⚠ 项目B-柜子7 离线
项目列表：
- 项目A | 3柜 | 充电28 空闲10 故障2
- 项目B | 2柜 | 充电17 空闲15 故障0
设备页
项目列表 → 设备列表 → 设备详情
设备详情（柜子视图）：
┌──────────────────────────────────────────────┐
│ 柜子ID: 10-00000000 状态: 在线 │
├──────────────────────────────────────────────┤
│ 仓板1 (ID:1) │
│ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐ ┌─────┐│
│ │通道1 │ │通道2 │ │通道3 │ │通道4 │ │通道5 │ │通道6 ││
│ │状态 │ │状态 │ │状态 │ │状态 │ │状态 │ │状态 ││
│ │电压 │ │电压 │ │电压 │ │电压 │ │电压 │ │电压 ││
│ │电流 │ │电流 │ │电流 │ │电流 │ │电流 │ │电流 ││
│ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘ └─────┘│
──────────────────────────────────────────────┤
│ 仓板2 (ID:2) ... │
└──────────────────────────────────────────────┘
通道详情页：
- 实时状态（SOC、SOH）
- 电气参数（电压、电流、功率、能耗）
- BMS数据（单体电压、温度、告警）
- 充电曲线
- 操作按钮（停止充电、开门）— 需确认弹窗
我的页
- 个人信息（姓名、手机号）
- 修改密码
- 退出登录
API接口
GET /api/h5/dashboard # 首页数据
GET /api/h5/projects # 项目列表
GET /api/h5/cabinets # 设备列表（按项目）
GET /api/h5/cabinets/:id # 设备详情
GET /api/h5/compartments/:id # 通道详情
POST /api/h5/charge/start # 开始充电
POST /api/h5/charge/stop # 停止充电
POST /api/h5/door/open # 开门
质量约束
- 完成代码后执行
tsc --noEmit，零报错零警告 - 分层拆分，单函数≤80行，命名语义化，完整注释
- 所有外部IO/网络请求异常捕获
- 分支逻辑全覆盖，不遗漏兜底分支
- 常量抽离，不使用废弃API
- React函数组件+Hooks
- 移动端适配，触摸友好