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.1 KiB

Raw Blame History Unescape Escape

大屏配置页面

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

{ "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：

{ "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：

{ "code": 0, "message": "success", "data": null }

新增筛选项（§3.11 #7）/ 编辑筛选项（§3.11 #8）/ 删除筛选项（§3.11 #9）：

Response：

{ "code": 0, "message": "success", "data": null }

9.1 KiB Raw Blame History Unescape Escape

大屏配置页面

1. 基本信息

2. 界面布局

3. 查询条件

4. 列表字段

5. 操作按钮

6. 弹窗规格

7. 状态机

8. 交互流程

9. 空状态

10. 接口引用与数据结构

接口引用

数据结构

9.1 KiB

Raw Blame History Unescape Escape