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. 移动端适配，触摸友好
|