仪表盘教程：第7章一眼看全局，快速上手

2026-06-12阅读 0热度 0

开源

数据可视化的核心，是将原始数字转化为直观的图形，让管理决策有据可依。对工单系统而言，这一步真正把数据变成了驱动改进的管理工具。

上一章我们利用工作流实现了自动通知和计时功能，系统智能化程度显著提升。但工单管理还缺少一个关键要素——全局视角。

工单总量是多少？已经处理了多少？哪类问题最常出现？每天新增工单数量如何？仅靠翻查列表根本无法回答这些问题。本章将利用图表区块（饼图、折线图、条形图）与 Markdown 区块，搭建一个可直接投入使用的数据看板。

https://www.bilibili.com/video/BV1ggXWBEEEq/?aid=116293772512...

7.1 添加仪表盘页面

操作步骤非常直接。首先，为导航栏增加一个新菜单项。

进入配置模式后，在顶部菜单栏点击 「添加菜单项」（+ 图标），选择 「新版页面（v2）」，并将其命名为「数据看板」。

这个新建的页面，就是仪表盘的核心区域。

7.2 饼图：工单状态分布

首先来看第一个图表：饼图。它用于展示待处理、处理中和已完成工单各自所占的比例。

在数据看板页面，点击 创建区块（Add block） → 图表。接着，点击区块右上角的配置按钮，右侧将弹出图表配置面板。

配置数据查询

数据表：选择「工单」
度量（Measures）：选择一个不重复的字段（例如 ID），聚合方式设为 计数（Count）
维度（Dimensions）：选择「状态」字段

点击 执行查询，即可在下方预览返回的数据结果。

配置图表选项

图表类型：选择饼图
字段映射：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 区块，写入系统公告或使用指南：

## IT 工单系统

欢迎使用！遇到问题请提交工单，技术团队会尽快处理。

**紧急问题**请直接拨打 IT 热线：8888

将此 Markdown 区块置于仪表盘顶部，既能作为欢迎信息，也可充当公告栏。内容可随时编辑，灵活性很高。

7.7 JS 区块：个性化欢迎横幅

Markdown 格式相对固定，若希望实现更丰富的展示效果，NocoBase 提供的 JS 区块（Ja vaScript Block） 允许通过代码自由定制内容。

我们用它制作一个商务风格的欢迎横幅——根据当前登录用户和时间，动态展示个性化问候语。

在页面中添加一个 JS 区块（创建区块 → 其他区块 → JS 区块）。

在 JS 区块中，可通过 ctx.getVar("ctx.user.username") 获取当前登录用户的用户名。下面是一个简约商务风格的欢迎横幅示例：

const uname = await ctx.getVar("ctx.user.username")
const name = uname || '用户';
const hour = new Date().getHours();
const hi = hour < 12 ? '上午好' : hour < 18 ? '下午好' : '晚上好';

const d = new Date();
const date = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
const week = ['日','一','二','三','四','五','六'][d.getDay()];

ctx.render(`

  
    
      ${hi}，${name}
      欢迎回到 IT 工单系统
    
    ${date}　星期${week}
  
`);