haoliang-net/docs/02-功能清单/管理后台/02-仪表盘/02-01-仪表盘页面.md

仪表盘页面

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

---

1. 基本信息

项	值
路由	/dashboard
权限	admin（全局Token）
入口	侧边栏仪表盘，登录后默认页
面包屑	首页 / 仪表盘

2. 界面布局

┌──────────────────────────────────────────────────────────┐ │ [面包屑] 首页 / 仪表盘 2026-04-24│ ├──────────────────────────────────────────────────────────┤ │ [统计卡片区] │ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │ │ 在线机床 │ │ 今日产量 │ │ 活跃告警 │ │ │ │ 142/160 │ │ 2,847 │ │ 3 │ │ │ └────────────┘ └────────────┘ └────────────┘ │ │ 采集服务：[状态] 运行3天12小时 上次采集3秒前 │ │ [停止/启动采集] [刷新配置] │ ├──────────────────────────────────────────────────────────┤ │ [机床产量排行区] [查看全部] │ │ 排名 | 机床名称 | 当前程序 | 产量 | 状态 │ │ 1 | 西-1.8 | 1566.NC | 580 | 在线 │ ├──────────────────────────────────────────────────────────┤ │ [工人产量排行区] [查看全部] │ │ 排名 | 工人姓名 | 负责机床数 | 总产量 │ │ 1 | 张三 | 3 | 1,240 │ └──────────────────────────────────────────────────────────┘

3. 数据区块

区块	数据来源API	刷新策略
统计卡片(在线/产量/告警)	统计卡片API	页面挂载时加载，定时N秒刷新
采集服务状态	服务状态API	页面挂载时加载，定时N秒刷新
机床产量排行	机床排行API	页面挂载时加载，定时N秒刷新
工人产量排行	工人排行API	页面挂载时加载，定时N秒刷新

定时刷新间隔后台可配，默认10秒

4. 操作按钮

名称	位置	显示条件	点击行为
停止采集	服务状态栏	running	确认->调API停止
启动采集	服务状态栏	stopped/error	确认->调API启动
刷新配置	服务状态栏	running	确认->调API刷新
查看全部	机床排行表头	始终	跳转产量报表
查看全部	工人排行表头	始终	跳转产量报表
机床名称	行内链接	始终	跳转机床详情
工人姓名	行内链接	始终	跳转员工详情

5. 状态机

采集服务状态：

• running: #67C23A绿 -> 可停止/刷新
• stopped: #909399灰 -> 可启动
• error: #F56C6C红 -> 可启动

机床在线状态：

• 1(在线): el-tag success
• 0(离线): el-tag info

6. 交互流程

• 加载：页面挂载->4个API并行(统计卡片/机床排行/工人排行/服务状态)->渲染
• 自动刷新：setInterval每N秒重新请求
• 点击机床名称：router.push到机床详情
• 停止采集：确认框->调WebAPI代理->采集服务API->更新状态
• 异常：采集服务不可达->warning提示+状态显示stopped

7. 空状态

• 机床排行无数据：el-empty 今日尚无产量数据
• 工人排行无数据：el-empty 今日尚无工人产量数据

8. 接口引用与数据结构

Mock/正式API的URL、HTTP方法均定义在 03-API接口设计.md §3.2 端点清单，本节仅引用编号并定义返回数据结构。

接口引用

接口名称	端点编号	界面用途
统计卡片	§3.2 #1	顶部4个统计卡片数据
采集服务状态	§3.2 #2	采集服务状态栏
机床产量排行	§3.2 #3	机床排行TOP10表格
工人产量排行	§3.2 #4	工人排行TOP10表格
产量趋势	§3.2 #5	产量趋势折线图
车间平均单机产量	§3.2 #6	车间产量柱状图
机床状态分布	§3.2 #7	机床状态饼图
最新告警	§3.2 #8	最新5条告警列表
启动采集服务	§3.2 #9	采集服务启动按钮
停止采集服务	§3.2 #10	采集服务停止按钮
刷新采集配置	§3.2 #11	采集服务刷新按钮

数据结构

统计卡片（§3.2 #1）：

Response：

{ "code": 0, "data": { "onlineCount": 142, "totalMachines": 160, "todayProduction": 2847, "activeAlerts": 3 }}

采集服务状态（§3.2 #2）：

Response：

{ "code": 0, "data": { "status": "running", "uptimeSeconds": 316800, "lastCollectTime": "2026-04-25T17:36:38", "successCount": 1280, "failCount": 5 }}

机床产量排行（§3.2 #3）：

Response：

{ "code": 0, "data": { "items": [
  { "rank": 1, "machineId": 1, "machineName": "西-1.8", "program": "1566.NC", "quantity": 580, "status": 1 },
  { "rank": 2, "machineId": 2, "machineName": "西-1.10", "program": "O123.NC", "quantity": 420, "status": 1 },
  { "rank": 3, "machineId": 3, "machineName": "东-2.0", "program": "A456.NC", "quantity": 380, "status": 1 },
  { "rank": 4, "machineId": 4, "machineName": "东-2.5", "program": "B789.NC", "quantity": 310, "status": 0 },
  { "rank": 5, "machineId": 5, "machineName": "南-3.1", "program": "C012.NC", "quantity": 290, "status": 1 },
  { "rank": 6, "machineId": 6, "machineName": "南-3.2", "program": "D345.NC", "quantity": 240, "status": 1 },
  { "rank": 7, "machineId": 7, "machineName": "北-4.0", "program": "E678.NC", "quantity": 210, "status": 1 },
  { "rank": 8, "machineId": 8, "machineName": "北-4.1", "program": "F901.NC", "quantity": 180, "status": 0 },
  { "rank": 9, "machineId": 9, "machineName": "西-1.5", "program": "G234.NC", "quantity": 150, "status": 1 },
  { "rank": 10, "machineId": 10, "machineName": "东-2.8", "program": "H567.NC", "quantity": 87, "status": 1 }
]}}

工人产量排行（§3.2 #4）：

Response：

{ "code": 0, "data": { "items": [
  { "rank": 1, "workerId": 1, "workerName": "张三", "machineCount": 3, "totalQuantity": 1240 },
  { "rank": 2, "workerId": 2, "workerName": "李四", "machineCount": 2, "totalQuantity": 980 },
  { "rank": 3, "workerId": 3, "workerName": "王五", "machineCount": 4, "totalQuantity": 870 },
  { "rank": 4, "workerId": 4, "workerName": "赵六", "machineCount": 2, "totalQuantity": 650 },
  { "rank": 5, "workerId": 5, "workerName": "孙七", "machineCount": 3, "totalQuantity": 520 }
]}}

启动/停止/刷新采集服务（§3.2 #9/#10/#11）：

Response：

{ "code": 0, "message": "success", "data": null }

8. 数据需求

以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 01-数据库设计.md 草案。

数据需求	草案对应	说明
在线机床数/总机床数	cnc_machine.is_enabled + is_online	统计卡片
今日总产量	cnc_daily_production.total_quantity 合计	统计卡片
活跃告警数	cnc_alert.is_resolved=0 计数	统计卡片
采集服务状态+运行时长+上次采集	log_collector_heartbeat	服务状态栏
机床产量排行TOP10	cnc_daily_production + cnc_machine	排行表
工人产量排行TOP10	cnc_worker_daily_summary + cnc_worker	排行表