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.

9.7 KiB

Raw Blame History Unescape Escape

大屏看板页面

最后更新：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数据

GET /api/screen/summary 统计摘要：

{ "code": 0, "data": { "onlineCount": 142, "totalMachines": 160, "todayProduction": 8520, "activeAlerts": 3, "avgQuantityPerMachine": 60 }}

GET /api/screen/collector-status 采集服务状态：

{ "code": 0, "data": { "status": "running", "uptime": "3天16小时", "successCount": 12800, "failCount": 5, "lastCollectTime": "2026-04-25T17:36:38" }}

GET /api/screen/workshop-production 各车间产量：

{ "code": 0, "data": { "items": [
  { "name": "A栋", "quantity": 3200 },
  { "name": "B栋", "quantity": 2800 },
  { "name": "C栋", "quantity": 2520 }
]}}

GET /api/screen/production-trend 7天产量趋势：

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

GET /api/screen/machine-rank 机床产量排行：

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

GET /api/screen/worker-rank 工人产量排行：

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

GET /api/screen/machine-status 机床状态网格：

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

GET /api/screen/filters 筛选选项（从cnc_screen_filter读取）：

{ "code": 0, "data": { "items": [
  { "filterType": "workshop", "filterValue": "A栋", "isDefault": 1 },
  { "filterType": "workshop", "filterValue": "B栋", "isDefault": 0 },
  { "filterType": "brand", "filterValue": "FANUC", "isDefault": 0 }
]}}

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

9.7 KiB Raw Blame History Unescape Escape