【2.0 教程】第 7 章：仪表盘，一眼看全局

NocoBase V2 系列教程已在官网-教程专栏发布点击链接前往查看。https://docs.nocobase.com/cn/tutorials/v2/已发布教程速览NocoBase 2.0 入门教程 —— IT 工单系统第一章认识 NocoBase — 5 分钟跑起来第二章数据建模 — 给工单系统搭骨架第三章搭建页面 — 让数据看得见第四章表单与详情 — 让数据填得进第五章用户与权限 — 谁能看什么第六章工作流 — 让系统自己动起来第七章仪表盘 — 一眼看全局本文为NocoBase V2 系列教程第 7 章仪表盘 — 一眼看全局在这个系列里我们会从零开始用 NocoBase 搭建一个极简的工单系统HelpDesk。整个系统只需要 2 张数据表不写一行代码即可实现工单提交、分类管理、变更追踪、权限控制和数据仪表盘。上一章我们用工作流让系统自动通知、自动记录时间。系统越来越智能了但还缺一样东西——全局视角。工单有多少处理了多少哪类问题最多每天新增几条这些问题靠翻列表是回答不了的。这一章我们用图表区块饼图、折线图、柱状图和 Markdown 区块搭建一个数据看板把数据变成一眼就能看懂的画面。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 热线8888Markdown 区块放在仪表盘顶部既是欢迎信息也能当公告栏用。内容随时可以修改非常灵活。7.7 JS 区块个性化欢迎横幅Markdown 格式比较固定如果想要更丰富的效果怎么办NocoBase 提供了JS 区块JavaScript Block可以用代码自由定制展示内容。我们用它做一个商务风格的欢迎横幅——根据当前登录用户和时间显示个性化的问候语。在页面中添加一个JS 区块创建区块 → 其他区块 → JS 区块。JS 区块中可以通过ctx.getVar(ctx.user.username)获取当前登录用户的用户名下面是一个商务简约风格的欢迎横幅constunameawaitctx.getVar(ctx.user.username)constnameuname||用户;consthournewDate().getHours();consthihour12?上午好:hour18?下午好:晚上好;constdnewDate();constdate${d.getFullYear()}-${String(d.getMonth()1).padStart(2,0)}-${String(d.getDate()).padStart(2,0)};constweek[日,一,二,三,四,五,六][d.getDay()];ctx.render(div stylepadding: 24px 32px; background: #f7f8fa; border-radius: 8px; div styledisplay: flex; justify-content: space-between; align-items: flex-end; div div stylefont-size: 22px; font-weight: 600; color: #1d2129;${hi}${name}/div div stylefont-size: 14px; color: #86909c; margin-top: 4px;欢迎回到 IT 工单系统/div /div div stylefont-size: 14px; color: #86909c;${date}星期${week}/div /div /div);效果是一个浅灰底的卡片左侧问候语右侧日期。简洁、实用、不喧宾夺主。小提示ctx.getVar(ctx.user.xxx)是 JS 区块中获取当前用户信息的方式常用字段有nickname昵称、username用户名、email邮箱等。JS 区块还可以调用 API 查询数据后续你可以用它做更多自定义内容。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 区块用法区块布局 — 页面布局与区块配置