You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
haoliang-net/docs/02-功能清单/管理后台/03-设备管理/03-02-设备详情页面.md

6.9 KiB

设备详情页面

最后更新2026-04-25 状态:已设计


1. 基本信息

路由 /machine/:id
权限 admin
入口 设备管理点击机床名称 / 仪表盘点击机床名称
面包屑 首页 / 设备管理 / {机床名称}

2. 界面布局

┌──────────────────────────────────────────────────────────┐ │ [面包屑] 首页 / 设备管理 / 西-1.8 │ ├──────────────────────────────────────────────────────────┤ │ [基本信息区] │ │ < 返回 机床详情:西-1.8 │ │ 机床名称:西-1.8 device_codefanake_1.8 │ │ 车间A栋 品牌FANUC │ │ 采集地址FANUC-A栋 IP10.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数据

GET /api/admin/machine/1 机床详情:

{ "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
}}

GET /api/admin/machine/1/status 实时状态:

{ "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"
}}

GET /api/admin/machine/1/production/today 今日产量:

{ "code": 0, "data": { "items": [
  { "programName": "1566.NC", "quantity": 580, "runTime": "4h20m", "cuttingTime": "3h50m" },
  { "programName": "O123.NC", "quantity": 120, "runTime": "2h10m", "cuttingTime": "1h45m" }
]}}

GET /api/admin/machine/1/production/trend 7天趋势

{ "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 }
]}}

GET /api/admin/machine/1/collect-records 最近采集记录:

{ "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条 |