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.

8.5 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. 数据需求

以下为本页面需要的数据，数据库设计定稿时需覆盖。参考 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 卡片配置列表：

{ "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 筛选配置列表：

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

8.5 KiB Raw Blame History Unescape Escape