|
|
# 设备详情页面
|
|
|
|
|
|
> 最后更新：2026-04-25
|
|
|
> 状态：已设计
|
|
|
|
|
|
---
|
|
|
|
|
|
### 1. 基本信息
|
|
|
|
|
|
| 项 | 值 |
|
|
|
|----|-----|
|
|
|
| 路由 | /machine/:id |
|
|
|
| 权限 | admin |
|
|
|
| 入口 | 设备管理点击机床名称 / 仪表盘点击机床名称 |
|
|
|
| 面包屑 | 首页 / 设备管理 / {机床名称} |
|
|
|
|
|
|
### 2. 界面布局
|
|
|
|
|
|
┌──────────────────────────────────────────────────────────┐
|
|
|
│ [面包屑] 首页 / 设备管理 / 西-1.8 │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [基本信息区] │
|
|
|
│ < 返回 机床详情：西-1.8 │
|
|
|
│ 机床名称：西-1.8 device_code：fanake_1.8 │
|
|
|
│ 车间：A栋 品牌：FANUC │
|
|
|
│ 采集地址：FANUC-A栋 IP：10.1.1.8 │
|
|
|
│ 绑定工人：张三 在线状态：在线 │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [实时状态区]（自动刷新） │
|
|
|
│ 当前程序：1566.NC 零件数：580 │
|
|
|
│ 运行状态：运行中 操作模式：自动 │
|
|
|
│ 主轴转速：300 rpm 进给速度：0 │
|
|
|
│ 主轴负载：0% 加工状态：G01 │
|
|
|
│ 最后采集：3秒前 │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [今日产量区] │
|
|
|
│ 程序名 | 产量 | 运行时间 | 切削时间 │
|
|
|
│ 1566.NC | 580 | 4h20m | 3h50m │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [近7天产量趋势（折线图）] │
|
|
|
│ [============图表区域============] │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [最近采集记录] [查看更多] │
|
|
|
│ 时间 | 程序名 | 零件数 | 运行状态 │
|
|
|
│ 17:36:35 | 1566 | 580 | 运行中 │
|
|
|
│ 17:36:05 | 1566 | 579 | 运行中 │
|
|
|
└──────────────────────────────────────────────────────────┘
|
|
|
|
|
|
### 3. 数据区块
|
|
|
|
|
|
| 区块 | 展示字段 | 控件类型 | 刷新策略 |
|
|
|
|------|---------|---------|---------|
|
|
|
| 基本信息 | 机床名称、device_code、车间、品牌、采集地址、IP、绑定工人、在线状态 | 文本展示 | 页面加载时请求一次 |
|
|
|
| 实时状态 | 当前程序、零件数、运行状态、操作模式、主轴转速、进给速度、主轴负载、加工状态、最后采集时间 | 文本展示 | setInterval每10秒刷新 |
|
|
|
| 今日产量 | 程序名、产量、运行时间、切削时间 | el-table | 页面加载时请求一次 |
|
|
|
| 近7天趋势 | 日期、产量 | 折线图 | 页面加载时请求一次 |
|
|
|
| 最近采集记录 | 时间、程序名、零件数、运行状态 | el-table | 页面加载时请求一次 |
|
|
|
|
|
|
### 4. 操作按钮
|
|
|
|
|
|
| 名称 | 位置 | 显示条件 | 点击行为 |
|
|
|
|------|------|---------|---------|
|
|
|
| 返回 | 页头左侧 | 始终 | router.back() |
|
|
|
| 查看更多 | 采集记录表头 | 始终 | 跳转产量报表(预填该机床) |
|
|
|
|
|
|
### 5. 交互流程
|
|
|
|
|
|
- 加载：请求机床详情API+今日产量API+采集记录API+7天趋势API->渲染
|
|
|
- 自动刷新：setInterval每10秒刷新实时状态部分
|
|
|
- 返回：router.back()
|
|
|
|
|
|
### 6. 空状态
|
|
|
|
|
|
- 今日产量无数据：el-empty 今日尚无产量数据
|
|
|
- 采集记录无数据：el-empty 暂无采集记录
|
|
|
|
|
|
### 7. 接口引用与数据结构
|
|
|
|
|
|
> Mock/正式API的URL、HTTP方法均定义在 `03-API接口设计.md` §3.3 端点清单，本节仅引用编号并定义返回数据结构。
|
|
|
|
|
|
#### 接口引用
|
|
|
|
|
|
| 接口名称 | 端点编号 | 界面用途 |
|
|
|
|---------|---------|---------|
|
|
|
| 机床详情 | §3.3 #2 | 基本信息卡片 |
|
|
|
| 实时采集状态 | §3.3 #7 | 实时状态卡片（10秒刷新） |
|
|
|
| 今日产量明细 | §3.3 #8 | 今日产量表格 |
|
|
|
| 产量趋势 | §3.3 #9 | 7天产量趋势折线图 |
|
|
|
| 近期采集记录 | §3.3 #10 | 采集记录表格 |
|
|
|
|
|
|
#### 数据结构
|
|
|
|
|
|
**机床详情（§3.3 #2）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": {
|
|
|
"id": 1, "name": "西-1.8", "deviceCode": "fanake_1.8", "workshopName": "A栋", "brandName": "FANUC",
|
|
|
"collectAddressName": "FANUC-A栋", "ipAddress": "10.1.1.8", "workerName": "张三", "isOnline": 1, "isEnabled": 1
|
|
|
}}
|
|
|
```
|
|
|
|
|
|
**实时采集状态（§3.3 #7）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": {
|
|
|
"programName": "1566.NC", "partCount": 580, "runStatus": "运行中", "operateMode": "自动",
|
|
|
"spindleSpeedSet": 3000, "feedSpeedSet": 500, "spindleSpeedActual": 2980, "feedSpeedActual": 480,
|
|
|
"spindleLoad": 65, "machiningStatus": "G01", "lastCollectTime": "2026-04-25T17:36:38"
|
|
|
}}
|
|
|
```
|
|
|
|
|
|
**今日产量明细（§3.3 #8）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "programName": "1566.NC", "quantity": 580, "runTime": "4h20m", "cuttingTime": "3h50m" },
|
|
|
{ "programName": "O123.NC", "quantity": 120, "runTime": "2h10m", "cuttingTime": "1h45m" }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**产量趋势（§3.3 #9）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "date": "2026-04-19", "quantity": 820 }, { "date": "2026-04-20", "quantity": 760 },
|
|
|
{ "date": "2026-04-21", "quantity": 910 }, { "date": "2026-04-22", "quantity": 850 },
|
|
|
{ "date": "2026-04-23", "quantity": 780 }, { "date": "2026-04-24", "quantity": 900 },
|
|
|
{ "date": "2026-04-25", "quantity": 700 }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**近期采集记录（§3.3 #10）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "collectTime": "2026-04-25T17:36:35", "programName": "1566.NC", "partCount": 580, "runStatus": "运行中" },
|
|
|
{ "collectTime": "2026-04-25T17:36:05", "programName": "1566.NC", "partCount": 579, "runStatus": "运行中" },
|
|
|
{ "collectTime": "2026-04-25T17:35:35", "programName": "1566.NC", "partCount": 578, "runStatus": "运行中" }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
### 7. 数据需求
|
|
|
|
|
|
> 以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。
|
|
|
|
|
|
| 数据需求 | 草案对应 | 说明 |
|
|
|
|---------|---------|------|
|
|
|
| 机床基本信息 | cnc_machine | 主表，含车间/品牌/地址/工人关联 |
|
|
|
| 实时状态（10秒刷新） | cnc_machine 冗余字段 | last_program_name/last_part_count/last_run_status等 |
|
|
|
| 今日产量（按程序） | cnc_daily_production | 按machine_id+当天查询 |
|
|
|
| 近7天趋势 | cnc_daily_production | 按machine_id+近7天聚合 |
|
|
|
| 最近采集记录 | cnc_collect_record | 按machine_id+时间倒序，取最近N条 |
|