# 大屏看板页面

> 最后更新：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/**）免认证，但仅限读取，不暴露管理接口。**