第 7 章：仪表盘 — 一眼看全局
上一章我们用工作流让系统自动通知、自动记录时间。系统越来越智能了，但还缺一样东西——全局视角。
工单有多少？处理了多少？哪类问题最多？每天新增几条？这些问题靠翻列表是回答不了的。这一章，我们用图表区块（饼图、折线图、柱状图）和 Markdown 区块搭建一个数据看板，把数据变成一眼就能看懂的画面。
7.1 添加仪表盘页面
首先，我们在顶部导航栏添加一个新菜单项。
进入配置模式，在顶部菜单栏点击 「添加菜单项」（+ 图标），选择 「新版页面（v2）」，命名为「数据看板」。
这个页面专门用来放图表，就是我们的仪表盘主场。
7.2 饼图：工单状态分布
第一个图表，我们用饼图来展示"待处理、处理中、已完成"各有多少。
在数据看板页面，点击 创建区块（Add block） → 图表。
添加后，点击区块右上角的 配置 按钮，右侧会打开图表配置面板。
配置数据查询
点击 执行查询，可以在下方预览返回的数据。
配置图表选项
- 图表类型：选择 饼图
- 字段映射：Category 选「状态」，Value 选计数值
- 标签：打开开关
左侧页面中应该已经出现了一个漂亮的饼图。每个扇区代表一种状态，默认展示出来具体数量和占比。
点击 保存，第一个图表就完成了。
7.3 折线图：每日新建工单趋势
饼图看的是"现在的分布"，折线图看的是"变化的趋势"。
在页面中再添加一个图表区块，配置如下：
数据查询
- 数据表：选择「工单」
- 度量：ID，计数
- 维度：选择「创建时间」字段，格式设置为 YYYY-MM-DD（按天分组）
小提示：日期维度的格式很重要。选
YYYY-MM-DD是按天统计，选YYYY-MM就变成按月统计了。根据你的数据量选择合适的粒度。
图表选项
- 图表类型：选择 折线图
- 字段映射：xField 选「创建时间」，yField 选计数值
保存后，你就能看到工单量随时间的变化曲线了。如果某天突然飙高，说明那天出了什么问题，值得关注。
7.4 条形图：各分类工单数量
第三个图表，我们看看哪个分类的工单最多。这里用横向条形图而不是纵向柱状图——当分类较多时，纵向柱状图的 X 轴标签容易重叠被隐藏，横向展示更清晰。
添加第三个图表区块：
数据查询
- 数据表：选择「工单」
- 度量：ID 计数
- 维度：选择「分类」关联字段（选择分类的名称字段）
图表选项
- 图表类型：选择 条形图（Bar）
- 字段映射：xField 选计数值（ID 计数），yField 选「分类名称」
保存后，哪类问题最多一目了然。如果"网络故障"的条形远远长过其他分类，也许该考虑升级一下网络设备了。
7.5 表格区块：未完成工单
图表给出的是汇总视角，但管理员通常还需要看到具体明细。我们加一个 未完成工单 的表格，直接展示所有还没处理完的工单。
在页面中添加一个 表格区块，数据表选择「工单」。
配置筛选条件
点击表格区块右上角的配置项，找到 设置数据范围，添加一条筛选条件：
- 状态 不等于 已完成
这样表格只展示还没完成的工单，一条完成了就自动从列表中消失。
配置字段
选择要展示的列：标题、状态、优先级、处理人、创建时间。
小提示：可以再加上 默认排序（按创建时间倒序），让最新的工单排在最前面。
7.6 Markdown 区块：系统公告
图表之外，我们还可以在仪表盘上放一些文字信息。
添加一个 Markdown 区块，写入系统公告或使用说明：
Markdown 区块放在仪表盘顶部，既是欢迎信息，也能当公告栏用。内容随时可以修改，非常灵活。
7.7 JS 区块：个性化欢迎横幅
Markdown 格式比较固定，如果想要更丰富的效果怎么办？NocoBase 提供了 JS 区块（JavaScript Block），可以用代码自由定制展示内容。
我们用它做一个商务风格的欢迎横幅——根据当前登录用户和时间，显示个性化的问候语。
在页面中添加一个 JS 区块（创建区块 → 其他区块 → JS 区块）。
JS 区块中可以通过 {{ ctx.user.nickname }} 获取当前登录用户的昵称，下面是一个商务简约风格的欢迎横幅：
效果是一个浅灰底的卡片，左侧问候语，右侧日期。简洁、实用、不喧宾夺主。
小提示：
{{ ctx.user.xxx }}是 JS 区块中获取当前用户信息的方式，常用字段有nickname（昵称）、username（用户名）、
7.8 操作面板：快捷入口 + 弹窗复用
仪表盘不仅是看数据的地方，也应该是操作的起点。我们加一个 操作面板（Action Panel），让用户直接从首页提交工单、跳转到工单列表。
在页面中添加一个 操作面板 区块（创建区块 → 其他区块 → 操作面板），然后在操作面板中添加两个操作：
- 链接：跳转到工单列表 — 添加一个「链接」操作，配置 URL 指向工单列表页面（比如
/admin/camcwbox2uc）
- 按钮：添加工单 — 添加一个「弹窗」操作按钮，标题改为「添加工单」
但"添加工单"按钮点开后弹窗是空的，我们需要配置弹窗内容。手动再搭一遍新增表单太麻烦了——这里引出一个非常实用的功能：弹窗复用。
保存弹窗模板
注意：这里的弹窗模板和之前第 4 章的"区块模板"不是一回事。区块模板保存的是单个表单区块的字段和布局，而弹窗模板保存的是整个弹窗的内容——包括里面所有区块、字段、操作按钮。
- 进入 工单列表页面，找到「添加工单」按钮
- 点击按钮的配置项，找到 「保存为模板」，保存当前弹窗
- 给模板起个名字（如"新增工单弹窗"）
在首页复用弹窗
- 回到数据看板页面，点击操作面板中「添加工单」按钮的配置项
- 找到 「弹窗设置」，选择刚才保存的「新增工单弹窗」模板
- 保存后，点击按钮就能直接打开和工单列表一模一样的新增表单弹窗了
标题点击打开详情弹窗
同样的方式，我们也可以让未完成工单表格的标题可点击，直接打开工单详情：
- 先去 工单列表页面，找到「查看」按钮的配置项，同样 「保存为模板」（如"工单详情弹窗"）
- 回到数据看板页面，在未完成工单表格中，点击「标题」字段的配置项
- 打开 「启用点击打开」 开关——这时会出现「弹窗设置」选项
- 在弹窗设置中选择刚才保存的「工单详情弹窗」模板
现在，用户在仪表盘上点击工单标题就能直接查看详情，不用跳转到工单列表页。整个仪表盘变得更紧凑、更高效。
弹窗复用的好处：同一个弹窗模板可以在多个页面使用，修改模板后所有引用处同步更新。这和第 4 章的"引用"模式是类似的思路——一处维护，处处生效。
7.9 调整布局
现在页面上有 6 个区块了（JS 欢迎横幅 + 操作面板 + 3 个图表 + 工单表格），我们来调整一下布局，让它更美观。
在配置模式下，你可以通过拖拽来调整每个区块的位置和大小：
建议的布局参考：
- 第一行：JS 欢迎横幅（左）+ 操作面板（右）
- 第二行：饼图（左）+ 工单表格（右）
- 第三行：折线图（左）+ 条形图（右）
注意，你可能发现区块高度没有对齐，这个时候可以在区块设置 > 区块高度 里手动调整，比如我将第二行的两个区块都调整到了 500px 。
拖拽边缘可以调整区块宽度，让两个图表各占一半。多试几次就能找到最舒服的排列方式。
小结
这一章我们用 6 个区块搭建了一个丰富实用的数据看板：
- JS 欢迎横幅：根据当前用户和时间显示个性化问候
- 操作面板：快捷跳转工单列表、一键添加工单（弹窗复用）
- 饼图：一眼看到工单状态的分布比例
- 折线图：追踪工单量随时间的变化趋势
- 条形图：横向对比各分类的工单数量，分类多也不怕标签重叠
- 未完成工单表格：所有待处理工单一览，点击标题直接查看详情（弹窗复用）
同时我们学会了 弹窗复用 这个重要技巧——把一个页面的弹窗保存为模板，在其他页面直接引用，避免重复配置。
数据可视化是 NocoBase 的内置插件，不需要额外安装。配置方式和搭建页面一样简单——选数据、选图表类型、映射字段，三步搞定。
后续预告
到这里，我们的工单系统功能已经很完整了：数据建模、页面搭建、表单录入、权限控制、自动化工作流、数据仪表盘，全都有了。后续我们计划推出 AI Agent 版本的搭建教程——用 AI Agent 在本地自动完成系统搭建，敬请期待。
相关资源
- 数据可视化 — 图表配置详解
- Markdown 区块 — Markdown 区块用法
- 区块布局 — 页面布局与区块配置