119 lines
4.1 KiB
Markdown
119 lines
4.1 KiB
Markdown
|
# 任务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 # 开门
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 质量约束
|
|||
|
|
|
|||
|
|
1. 完成代码后执行 `tsc --noEmit`，零报错零警告
|
|||
|
|
2. 分层拆分，单函数≤80行，命名语义化，完整注释
|
|||
|
|
3. 所有外部IO/网络请求异常捕获
|
|||
|
|
4. 分支逻辑全覆盖，不遗漏兜底分支
|
|||
|
|
5. 常量抽离，不使用废弃API
|
|||
|
|
6. React函数组件+Hooks
|
|||
|
|
7. 移动端适配，触摸友好
|