|
|
# 大屏配置页面
|
|
|
|
|
|
> 最后更新：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. 接口引用与数据结构
|
|
|
|
|
|
> Mock/正式API的URL、HTTP方法均定义在 `03-API接口设计.md` §3.11 端点清单，本节仅引用编号并定义返回数据结构。
|
|
|
|
|
|
#### 接口引用
|
|
|
|
|
|
| 接口名称 | 端点编号 | 界面用途 |
|
|
|
|---------|---------|---------|
|
|
|
| 卡片配置列表 | §3.11 #1 | Tab1卡片配置表格 |
|
|
|
| 新增卡片 | §3.11 #2 | Tab1新增弹窗保存 |
|
|
|
| 编辑卡片 | §3.11 #3 | Tab1编辑弹窗保存 |
|
|
|
| 删除卡片 | §3.11 #4 | Tab1删除操作 |
|
|
|
| 启停卡片 | §3.11 #5 | Tab1启停切换 |
|
|
|
| 筛选配置列表 | §3.11 #6 | Tab2筛选配置表格 |
|
|
|
| 新增筛选项 | §3.11 #7 | Tab2新增弹窗保存 |
|
|
|
| 编辑筛选项 | §3.11 #8 | Tab2编辑弹窗保存 |
|
|
|
| 删除筛选项 | §3.11 #9 | Tab2删除操作 |
|
|
|
|
|
|
#### 数据结构
|
|
|
|
|
|
**卡片配置列表（§3.11 #1）：**
|
|
|
|
|
|
Response：
|
|
|
```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 }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**筛选配置列表（§3.11 #6）：**
|
|
|
|
|
|
Response：
|
|
|
```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 }
|
|
|
]}}
|
|
|
```
|
|
|
|
|
|
**新增卡片（§3.11 #2）/ 编辑卡片（§3.11 #3）/ 删除卡片（§3.11 #4）/ 启停卡片（§3.11 #5）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "message": "success", "data": null }
|
|
|
```
|
|
|
|
|
|
**新增筛选项（§3.11 #7）/ 编辑筛选项（§3.11 #8）/ 删除筛选项（§3.11 #9）：**
|
|
|
|
|
|
Response：
|
|
|
```json
|
|
|
{ "code": 0, "message": "success", "data": null }
|
|
|
```
|