|
|
# 仪表盘页面
|
|
|
|
|
|
> 最后更新：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：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "onlineCount": 142, "totalMachines": 160, "todayProduction": 2847, "activeAlerts": 3 }}
|
|
|
```
|
|
|
|
|
|
**采集服务状态（§3.2 #2）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "status": "running", "uptimeSeconds": 316800, "lastCollectTime": "2026-04-25T17:36:38", "successCount": 1280, "failCount": 5 }}
|
|
|
```
|
|
|
|
|
|
**机床产量排行（§3.2 #3）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "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：
|
|
|
```json
|
|
|
{ "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：
|
|
|
```json
|
|
|
{ "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 | 排行表 |
|