# 大屏配置页面

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

---

### 1. 基本信息

| 项 | 值 |
|----|-----|
| 路由 | /screen-config |
| 权限 | admin |
| 入口 | 侧边栏大屏配置 |
| 面包屑 | 首页 / 大屏配置 |

### 2. 界面布局

┌──────────────────────────────────────────────────────────┐
│ [面包屑] 首页 / 大屏配置                                   │
├──────────────────────────────────────────────────────────┤
│ [卡片配置区]                        [+ 新增卡片]          │
│ 卡片名称    | 类型       | 指标      | 排序 | 状态 | 操作  │
│ 在线机床数  | stat_number| online   | 1    | 启用 | [编辑][禁用][删除] │
│ 各车间产量  | bar_chart  | part_count| 3   | 启用 | [编辑][禁用][删除] │
│ 产量趋势    | line_chart | part_count| 7   | 启用 | [编辑][禁用][删除] │
│ 机床状态总览| status_grid| -        | 5    | 启用 | [编辑][禁用][删除] │
│ 工人产量排行| rank_list  | part_count| 4   | 停用 | [编辑][启用][删除] │
├──────────────────────────────────────────────────────────┤
│ [筛选配置区]                        [+ 新增筛选]          │
│ 筛选标识    | 筛选类型   | 筛选值    | 默认 | 排序 | 操作  │
│ screen_main | workshop   | A栋      | 是   | 1    | [编辑][删除] │
│ screen_main | workshop   | B栋      | 否   | 2    | [编辑][删除] │
│ screen_main | brand      | FANUC    | 否   | 3    | [编辑][删除] │
└──────────────────────────────────────────────────────────┘

### 3. 查询条件

无（配置项数量少）。

### 4. 列表字段

**卡片配置表：**

| 字段名 | 列宽 | 排序 | 超长处理 | 对齐 |
|--------|------|------|---------|------|
| 卡片名称 | 150px | - | tooltip | left |
| 卡片类型 | 120px | - | - | center |
| 指标 | 120px | - | tooltip | left |
| 排序 | 80px | y | - | center |
| 状态 | 80px | - | - | center |
| 操作 | 200px | - | - | center |

**筛选配置表：**

| 字段名 | 列宽 | 排序 | 超长处理 | 对齐 |
|--------|------|------|---------|------|
| 筛选标识 | 120px | - | tooltip | left |
| 筛选类型 | 120px | - | - | center |
| 筛选值 | 150px | - | tooltip | left |
| 默认 | 60px | - | - | center |
| 排序 | 80px | y | - | center |
| 操作 | 120px | - | - | center |

### 5. 操作按钮

| 名称 | 权限编码 | 位置 | 显示条件 | 点击行为 |
|------|---------|------|---------|---------|
| 新增卡片 | screen-config:create | 卡片区页头 | 始终 | 打开新增卡片弹窗 |
| 编辑 | screen-config:update | 行操作 | 始终 | 打开编辑弹窗 |
| 启用/禁用 | screen-config:toggle | 行操作 | 始终 | 确认->切换状态 |
| 删除 | screen-config:delete | 行操作 | 始终 | 确认->删除 |
| 新增筛选 | screen-filter:create | 筛选区页头 | 始终 | 打开新增筛选弹窗 |

### 6. 弹窗规格

**新增/编辑卡片弹窗：**
- 宽度600px，遮罩有，ESC关闭是(脏数据检测)

表单字段：

| 字段 | 控件 | 必填 | 默认值 | 校验 | 联动 |
|------|------|------|--------|------|------|
| 卡片名称 | el-input maxlength=100 | 是 | - | 必填 | - |
| 卡片标识 | el-input maxlength=50 | 是 | - | 必填+唯一性(新增时) | - |
| 卡片类型 | el-select(stat_number/bar_chart/line_chart/pie_chart/status_grid/rank_list) | 是 | - | 必填 | 类型变化时图表配置区域联动 |
| 指标 | el-select(online_count/part_count等) | 是 | - | 必填 | - |
| 维度 | el-select(workshop/worker/machine等) | 否 | - | - | 选择rank_list或bar_chart时必填 |
| 排序号 | el-input-number min=1 max=99 | 是 | 末尾 | 必填+正整数 | - |
| 图表配置 | JSON编辑器(el-input textarea) | 否 | - | JSON格式校验 | 选择图表类型时显示 |

卡片类型说明：
- stat_number：统计数字卡片（如在线机床数）
- bar_chart：柱状图（如各车间产量）
- line_chart：折线图（如产量趋势）
- pie_chart：饼图
- status_grid：状态网格（如机床状态总览）
- rank_list：排行榜（如工人产量排行）

**新增/编辑筛选弹窗：**
- 宽度500px

| 字段 | 控件 | 必填 | 默认值 | 校验 | 联动 |
|------|------|------|--------|------|------|
| 筛选标识 | el-input maxlength=50 | 是 | - | 必填 | - |
| 筛选类型 | el-select(workshop/brand等) | 是 | - | 必填 | - |
| 筛选值 | el-input maxlength=100 | 是 | - | 必填 | - |
| 默认选中 | el-switch | 否 | 否 | - | - |
| 排序号 | el-input-number min=1 max=99 | 是 | 末尾 | 必填+正整数 | - |

### 7. 状态机

卡片is_enabled：
- 1(启用): el-tag success -> 可编辑/禁用/删除
- 0(停用): el-tag danger -> 可编辑/启用/删除

### 8. 交互流程

- 加载：请求卡片配置列表+筛选配置列表->渲染两个区域
- 新增卡片：弹窗->选卡片类型(联动图表配置)->填写->保存->关闭->刷新
- 编辑卡片：弹窗(回填)->修改->保存->关闭->刷新
- 启停卡片：确认->调API->刷新
- 删除卡片：确认"确定删除卡片【{名称}】？此操作不可恢复。 "->调API->刷新
- 新增筛选：弹窗->填写->保存->关闭->刷新
- 修改排序：修改排序号->自动保存或手动保存

### 9. 空状态

卡片列表无数据：el-empty 暂无卡片配置，点击新增卡片添加
筛选列表无数据：el-empty 暂无筛选配置

### 10. 数据需求

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

| 数据需求 | 草案对应 | 说明 |
|---------|---------|------|
| 卡片配置列表 | cnc_screen_config | 主表，含card_key/card_type/title/metric/dimension/sort_order/is_enabled/chart_config |
| 筛选配置列表 | cnc_screen_filter | 主表，含screen_key/filter_type/filter_value/is_default/sort_order |

### 11. Mock数据

**GET /api/admin/screen-config 卡片配置列表：**

```json
{ "code": 0, "data": { "items": [
  { "id": 1, "cardKey": "total_online", "cardType": "stat_number", "title": "在线机床数", "metric": "online_count", "dimension": null, "sortOrder": 1, "isEnabled": 1, "chartConfig": null },
  { "id": 2, "cardKey": "total_production_today", "cardType": "stat_number", "title": "今日总产量", "metric": "part_count", "dimension": null, "sortOrder": 2, "isEnabled": 1, "chartConfig": null },
  { "id": 3, "cardKey": "workshop_production", "cardType": "bar_chart", "title": "各车间产量", "metric": "part_count", "dimension": "workshop", "sortOrder": 3, "isEnabled": 1, "chartConfig": "{\"xAxis\":\"workshop\",\"yAxis\":\"part_count\"}" },
  { "id": 4, "cardKey": "worker_rank", "cardType": "rank_list", "title": "工人产量排行", "metric": "part_count", "dimension": "worker", "sortOrder": 4, "isEnabled": 0, "chartConfig": null },
  { "id": 5, "cardKey": "machine_status", "cardType": "status_grid", "title": "机床状态总览", "metric": null, "dimension": null, "sortOrder": 5, "isEnabled": 1, "chartConfig": null },
  { "id": 6, "cardKey": "collector_status", "cardType": "stat_number", "title": "采集服务状态", "metric": null, "dimension": null, "sortOrder": 6, "isEnabled": 1, "chartConfig": null },
  { "id": 7, "cardKey": "production_trend", "cardType": "line_chart", "title": "产量趋势(7天)", "metric": "part_count", "dimension": null, "sortOrder": 7, "isEnabled": 1, "chartConfig": "{\"xAxis\":\"date\",\"yAxis\":\"part_count\"}" },
  { "id": 8, "cardKey": "machine_rank", "cardType": "rank_list", "title": "机床产量排行", "metric": "part_count", "dimension": "machine", "sortOrder": 8, "isEnabled": 1, "chartConfig": null }
]}}
```

**GET /api/admin/screen-filter 筛选配置列表：**

```json
{ "code": 0, "data": { "items": [
  { "id": 1, "screenKey": "screen_main", "filterType": "workshop", "filterValue": "A栋", "isDefault": 1, "sortOrder": 1 },
  { "id": 2, "screenKey": "screen_main", "filterType": "workshop", "filterValue": "B栋", "isDefault": 0, "sortOrder": 2 },
  { "id": 3, "screenKey": "screen_main", "filterType": "brand", "filterValue": "FANUC", "isDefault": 0, "sortOrder": 3 }
]}}