|
|
# 大屏看板页面
|
|
|
|
|
|
> 最后更新：2026-04-26
|
|
|
> 状态：已设计
|
|
|
|
|
|
---
|
|
|
|
|
|
### 1. 基本信息
|
|
|
|
|
|
| 项 | 值 |
|
|
|
|----|-----|
|
|
|
| 路由 | /screen |
|
|
|
| 权限 | 无（免认证） |
|
|
|
| 入口 | 浏览器直接访问 /screen，管理后台大屏配置页"预览"按钮 |
|
|
|
| 面包屑 | 无（全屏独立Layout） |
|
|
|
|
|
|
### 2. 界面布局
|
|
|
|
|
|
```
|
|
|
┌──────────────────────────────────────────────────────────┐
|
|
|
│ [顶部栏] height=50px 深色背景#1a1a2e │
|
|
|
│ 左：CNC机床数据采集系统 │
|
|
|
│ 右：[车间▼A栋] [品牌▼全部] 2026-04-25 17:36:38 │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [第一行：统计数字卡片] height=100px │
|
|
|
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
|
|
|
│ │在线机床│ │今日总产│ │采集服务│ │活跃告警│ │平均产量│ │
|
|
|
│ │ 142 │ │ 8,520│ │ 运行中 │ │ 3 │ │ 60 │ │
|
|
|
│ │ /160 │ │ │ │3天16时 │ │ │ │/台 │ │
|
|
|
│ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [第二行：图表区] height=300px │
|
|
|
│ ┌────────────────────┐ ┌────────────────────┐ │
|
|
|
│ │ 各车间产量(柱状图) │ │ 产量趋势7天(折线图) │ │
|
|
|
│ │ ████ │ │ ╱╲ ╱╲ │ │
|
|
|
│ │ ████ ██ │ │ ╱ ╲╱╱ ╲ │ │
|
|
|
│ │ A栋 B栋 C栋 │ │ 4/19 ... 4/25 │ │
|
|
|
│ └────────────────────┘ └────────────────────┘ │
|
|
|
├──────────────────────────────────────────────────────────┤
|
|
|
│ [第三行：排行+状态] height=auto(填满剩余) │
|
|
|
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
|
|
│ │ 机床产量排行 │ │ 工人产量排行 │ │ 机床状态总览 │ │
|
|
|
│ │ 1.西-1.8 580│ │ 1.张三 1240│ │ ■■■■□□■■■□ │ │
|
|
|
│ │ 2.西-1.10 420│ │ 2.李四 980│ │ ■■□□■■■■□■ │ │
|
|
|
│ │ 3.东-2.0 380│ │ 3.王五 870│ │ ■=在线 □=离线 │ │
|
|
|
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
|
|
└──────────────────────────────────────────────────────────┘
|
|
|
```
|
|
|
|
|
|
**布局说明：**
|
|
|
- 全屏展示，1920x1080优化，Chrome全屏模式(F11)
|
|
|
- 深色主题：背景#0f0f1a，卡片背景#1a1a2e，文字白色/浅灰
|
|
|
- 无侧边栏、无面包屑、无滚动条（一屏展示所有内容）
|
|
|
- 卡片排列由管理后台"大屏配置"页面控制（排序/启停/类型）
|
|
|
- 以上布局为默认配置，卡片增减/顺序由cnc_screen_config决定
|
|
|
|
|
|
### 3. 数据区块
|
|
|
|
|
|
| 区块 | card_type | 数据来源API | 刷新策略 |
|
|
|
|------|-----------|-----------|---------|
|
|
|
| 在线机床数 | stat_number | /api/screen/summary | 每10秒(可配) |
|
|
|
| 今日总产量 | stat_number | /api/screen/summary | 每10秒 |
|
|
|
| 采集服务状态 | stat_number | /api/screen/collector-status | 每10秒 |
|
|
|
| 活跃告警 | stat_number | /api/screen/summary | 每10秒 |
|
|
|
| 平均产量 | stat_number | /api/screen/summary | 每10秒 |
|
|
|
| 各车间产量 | bar_chart | /api/screen/workshop-production | 每60秒 |
|
|
|
| 产量趋势7天 | line_chart | /api/screen/production-trend | 每300秒 |
|
|
|
| 机床产量排行 | rank_list | /api/screen/machine-rank | 每60秒 |
|
|
|
| 工人产量排行 | rank_list | /api/screen/worker-rank | 每60秒 |
|
|
|
| 机床状态总览 | status_grid | /api/screen/machine-status | 每10秒 |
|
|
|
|
|
|
### 4. 操作按钮
|
|
|
|
|
|
| 名称 | 位置 | 显示条件 | 点击行为 |
|
|
|
|------|------|---------|---------|
|
|
|
| 车间筛选 | 顶部栏右侧 | 始终 | 下拉切换，刷新所有卡片数据 |
|
|
|
| 品牌筛选 | 顶部栏右侧 | 始终 | 下拉切换，刷新所有卡片数据 |
|
|
|
| 全屏切换 | 顶部栏右侧 | 始终 | F11全屏/退出全屏 |
|
|
|
|
|
|
说明：筛选器为只读展示，可选项由管理后台大屏配置(cnc_screen_filter)定义。默认选中项由is_default字段决定。
|
|
|
|
|
|
### 5. 状态机
|
|
|
|
|
|
采集服务状态：
|
|
|
- running(运行中): 绿色脉冲圆点 + "运行中" + uptime
|
|
|
- stopped(已停止): 红色圆点 + "已停止" + 最后心跳时间
|
|
|
|
|
|
机床状态(status_grid)：
|
|
|
- 在线(is_online=1): 绿色方块■
|
|
|
- 离线(is_online=0): 灰色方块□
|
|
|
|
|
|
### 6. 交互流程
|
|
|
|
|
|
- 加载：请求筛选配置->设置默认筛选->并行请求所有卡片数据->渲染
|
|
|
- 自动刷新：定时器按卡片配置的刷新策略轮询（全局默认10秒，可通过cnc_sys_config.bigscreen_refresh_interval配置）
|
|
|
- 筛选切换：选车间/品牌->所有API请求附加筛选参数->刷新所有卡片
|
|
|
- 全屏：首次进入自动提示"按F11进入全屏模式"（el-message info，5秒后消失）
|
|
|
- 无交互操作：鼠标悬停卡片有轻微发光效果，无点击跳转
|
|
|
|
|
|
### 7. 空状态
|
|
|
|
|
|
- 统计数字无数据：显示"--"
|
|
|
- 图表无数据：居中灰色文字"暂无数据"
|
|
|
- 排行榜无数据：灰色文字"暂无数据"
|
|
|
- 状态网格无机床：灰色文字"暂无机床"
|
|
|
|
|
|
### 8. 接口引用与数据结构
|
|
|
|
|
|
> Mock/正式API的URL、HTTP方法均定义在 `03-API接口设计.md` §3.12 端点清单，本节仅引用编号并定义返回数据结构。大屏API（/api/screen/**）免认证，但仅限读取。
|
|
|
|
|
|
#### 接口引用
|
|
|
|
|
|
| 接口名称 | 端点编号 | 界面用途 |
|
|
|
|---------|---------|---------|
|
|
|
| 大屏汇总统计 | §3.12 #1 | 顶部统计卡片 |
|
|
|
| 采集服务状态 | §3.12 #2 | 采集服务状态卡片 |
|
|
|
| 各车间产量 | §3.12 #3 | 车间产量柱状图 |
|
|
|
| 产量趋势 | §3.12 #4 | 7天产量趋势折线图 |
|
|
|
| 机床产量排行 | §3.12 #5 | 机床排行TOP5 |
|
|
|
| 工人产量排行 | §3.12 #6 | 工人排行TOP5 |
|
|
|
| 机床状态总览 | §3.12 #7 | 机床状态网格 |
|
|
|
| 大屏筛选条件 | §3.12 #8 | 筛选下拉选项 |
|
|
|
| 刷新间隔配置 | §3.12 #9 | 自动刷新间隔 |
|
|
|
|
|
|
#### 数据结构
|
|
|
|
|
|
**大屏汇总统计（§3.12 #1）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "onlineCount": 142, "totalMachines": 160, "todayProduction": 8520, "activeAlerts": 3, "avgQuantityPerMachine": 60 }}
|
|
|
```
|
|
|
|
|
|
**采集服务状态（§3.12 #2）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "status": "running", "uptime": "3天16小时", "successCount": 12800, "failCount": 5, "lastCollectTime": "2026-04-25T17:36:38" }}
|
|
|
```
|
|
|
|
|
|
**各车间产量（§3.12 #3）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "name": "A栋", "quantity": 3200 },
|
|
|
{ "name": "B栋", "quantity": 2800 },
|
|
|
{ "name": "C栋", "quantity": 2520 }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**产量趋势（§3.12 #4）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "date": "04-19", "quantity": 8200 }, { "date": "04-20", "quantity": 7600 },
|
|
|
{ "date": "04-21", "quantity": 9100 }, { "date": "04-22", "quantity": 8500 },
|
|
|
{ "date": "04-23", "quantity": 7800 }, { "date": "04-24", "quantity": 9000 },
|
|
|
{ "date": "04-25", "quantity": 8520 }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**机床产量排行（§3.12 #5）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "rank": 1, "machineName": "西-1.8", "quantity": 580 },
|
|
|
{ "rank": 2, "machineName": "西-1.10", "quantity": 420 },
|
|
|
{ "rank": 3, "machineName": "东-2.0", "quantity": 380 },
|
|
|
{ "rank": 4, "machineName": "东-2.5", "quantity": 310 },
|
|
|
{ "rank": 5, "machineName": "南-3.1", "quantity": 290 }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**工人产量排行（§3.12 #6）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "rank": 1, "workerName": "张三", "quantity": 1240 },
|
|
|
{ "rank": 2, "workerName": "李四", "quantity": 980 },
|
|
|
{ "rank": 3, "workerName": "王五", "quantity": 870 },
|
|
|
{ "rank": 4, "workerName": "赵六", "quantity": 650 },
|
|
|
{ "rank": 5, "workerName": "孙七", "quantity": 520 }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**机床状态总览（§3.12 #7）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "machineId": 1, "machineName": "西-1.8", "isOnline": 1 },
|
|
|
{ "machineId": 2, "machineName": "西-1.10", "isOnline": 1 },
|
|
|
{ "machineId": 3, "machineName": "东-2.0", "isOnline": 0 },
|
|
|
{ "machineId": 4, "machineName": "东-2.5", "isOnline": 0 },
|
|
|
{ "machineId": 5, "machineName": "南-3.1", "isOnline": 1 }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**大屏筛选条件（§3.12 #8）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "items": [
|
|
|
{ "filterType": "workshop", "filterValue": "A栋", "isDefault": 1 },
|
|
|
{ "filterType": "workshop", "filterValue": "B栋", "isDefault": 0 },
|
|
|
{ "filterType": "brand", "filterValue": "FANUC", "isDefault": 0 }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**刷新间隔配置（§3.12 #9）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "data": { "interval": 10, "unit": "seconds" }}
|
|
|
```
|
|
|
|
|
|
### 9. 数据需求
|
|
|
|
|
|
> 以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 `01-数据库设计.md` 草案。
|
|
|
|
|
|
| 数据需求 | 草案对应 | 说明 |
|
|
|
|---------|---------|------|
|
|
|
| 统计摘要 | cnc_machine + cnc_daily_production | 聚合查询 |
|
|
|
| 采集服务状态 | log_collector_heartbeat | 查最新一条心跳 |
|
|
|
| 各车间产量 | cnc_daily_production + cnc_machine + cnc_workshop | 按车间聚合 |
|
|
|
| 产量趋势 | cnc_daily_production | 近7天按日聚合 |
|
|
|
| 机床排行 | cnc_daily_production + cnc_machine | 按机床聚合TOP N |
|
|
|
| 工人排行 | cnc_worker_daily_summary | 按工人聚合TOP N |
|
|
|
| 机床状态 | cnc_machine.is_online | 全量查询 |
|
|
|
| 筛选配置 | cnc_screen_filter | 筛选可选项+默认值 |
|
|
|
| 卡片配置 | cnc_screen_config | 哪些卡片启用+排序+图表配置 |
|
|
|
|
|
|
**注意：大屏API（/api/screen/**）免认证，但仅限读取，不暴露管理接口。**
|