|
|
# 员工详情页面
|
|
|
|
|
|
> 最后更新：2026-04-25
|
|
|
> 状态：已设计
|
|
|
|
|
|
---
|
|
|
|
|
|
### 1. 基本信息
|
|
|
|
|
|
| 项 | 值 |
|
|
|
|----|-----|
|
|
|
| 路由 | /worker/:id |
|
|
|
| 权限 | admin |
|
|
|
| 入口 | 员工管理列表点击工人姓名 / 仪表盘工人排行点击工人姓名 |
|
|
|
| 面包屑 | 首页 / 员工管理 / {工人姓名} |
|
|
|
|
|
|
### 2. 界面布局
|
|
|
|
|
|
┌──────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 首页 / 员工管理 / 张三 │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [基本信息区] │
|
|
|
│ < 返回 工人详情：张三 │
|
|
|
│ 工号：W001 姓名：张三 │
|
|
|
│ 状态：启用 绑定机床数：2 │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [绑定机床区] │
|
|
|
│ 机床名称 | device_code | 车间 | 品牌 | 在线状态 | 当前程序 │
|
|
|
│ 西-1.8 | fanake_1.8 | A栋 | FANUC| 在线 | 1566.NC │
|
|
|
│ 西-2.0 | fanake_2.0 | A栋 | FANUC| 离线 | - │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [今日产量区] │
|
|
|
│ 机床名称 | 程序名 | 产量 | 运行时间 | 切削时间 │
|
|
|
│ 西-1.8 | 1566.NC | 580 | 4h20m | 3h50m │
|
|
|
│ 西-2.0 | - | - | - | - │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [近7天产量趋势（折线图）] │
|
|
|
│ [============图表区域============] │
|
|
|
└──────────────────────────────────────────────────────────┘
|
|
|
|
|
|
### 3. 数据区块
|
|
|
|
|
|
| 区块 | 展示字段 | 控件类型 | 刷新策略 |
|
|
|
|------|---------|---------|---------|
|
|
|
| 基本信息 | 工号、姓名、状态、绑定机床数 | 文本展示 | 页面加载时请求一次 |
|
|
|
| 绑定机床 | 机床名称、device_code、车间、品牌、在线状态、当前程序 | el-table | 页面加载时请求一次 |
|
|
|
| 今日产量 | 机床名称、程序名、产量、运行时间、切削时间 | el-table | 页面加载时请求一次 |
|
|
|
| 近7天趋势 | 日期、产量 | 折线图 | 页面加载时请求一次 |
|
|
|
|
|
|
### 4. 操作按钮
|
|
|
|
|
|
| 名称 | 位置 | 显示条件 | 点击行为 |
|
|
|
|------|------|---------|---------|
|
|
|
| 返回 | 页头左侧 | 始终 | router.back() |
|
|
|
| 机床名称 | 行内链接 | 始终 | 跳转机床详情页(/machine/:id) |
|
|
|
|
|
|
### 5. 交互流程
|
|
|
|
|
|
- 加载：请求工人详情API+绑定机床API+今日产量API+7天趋势API->渲染
|
|
|
- 点击机床名称：router.push到机床详情页
|
|
|
- 返回：router.back()
|
|
|
|
|
|
### 6. 空状态
|
|
|
|
|
|
- 绑定机床无数据：el-empty 该工人暂无绑定机床
|
|
|
- 今日产量无数据：el-empty 今日尚无产量数据
|
|
|
|
|
|
### 8. 接口引用与数据结构
|
|
|
|
|
|
> Mock/正式API的URL、HTTP方法均定义在 `03-API接口设计.md` §3.6 端点清单，本节仅引用编号并定义返回数据结构。
|
|
|
|
|
|
#### 接口引用
|
|
|
|
|
|
| 接口名称 | 端点编号 | 界面用途 |
|
|
|
|---------|---------|---------|
|
|
|
| 工人详情 | §3.6 #2 | 基本信息卡片 |
|
|
|
| 绑定机床列表 | §3.6 #7 | 绑定机床表格 |
|
|
|
| 今日产量明细 | §3.6 #8 | 今日产量表格 |
|
|
|
| 产量趋势 | §3.6 #9 | 7天产量趋势折线图 |
|
|
|
|
|
|
#### 数据结构
|
|
|
|
|
|
**工人详情（§3.6 #2）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "id": 1, "code": "W001", "name": "张三", "isEnabled": 1, "machineCount": 2 }}
|
|
|
```
|
|
|
|
|
|
**绑定机床列表（§3.6 #7）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "machineId": 1, "machineName": "西-1.8", "deviceCode": "fanake_1.8", "workshopName": "A栋", "brandName": "FANUC", "isOnline": 1, "programName": "1566.NC" },
|
|
|
{ "machineId": 2, "machineName": "西-2.0", "deviceCode": "fanake_2.0", "workshopName": "A栋", "brandName": "FANUC", "isOnline": 0, "programName": null }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**今日产量明细（§3.6 #8）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "machineName": "西-1.8", "programName": "1566.NC", "quantity": 580, "runTime": "4h20m", "cuttingTime": "3h50m" },
|
|
|
{ "machineName": "西-2.0", "programName": "-", "quantity": null, "runTime": "-", "cuttingTime": "-" }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**产量趋势（§3.6 #9）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "date": "2026-04-19", "quantity": 980 }, { "date": "2026-04-20", "quantity": 920 },
|
|
|
{ "date": "2026-04-21", "quantity": 1100 }, { "date": "2026-04-22", "quantity": 1050 },
|
|
|
{ "date": "2026-04-23", "quantity": 990 }, { "date": "2026-04-24", "quantity": 1080 },
|
|
|
{ "date": "2026-04-25", "quantity": 580 }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
### 7. 数据需求
|
|
|
|
|
|
> 以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。
|
|
|
|
|
|
| 数据需求 | 草案对应 | 说明 |
|
|
|
|---------|---------|------|
|
|
|
| 工人基本信息 | cnc_worker | 主表 |
|
|
|
| 绑定机床列表 | cnc_worker_machine + cnc_machine | 按worker_id查关联机床 |
|
|
|
| 今日产量（按机床+程序） | cnc_daily_production + cnc_machine | 按worker绑定的machine_id查询 |
|
|
|
| 近7天趋势 | cnc_worker_daily_summary | 按worker_id+近7天查询 |
|