55.5. heatmap 组件
在 Business Central 中,您可以在页面中添加热图组件。heatmap 组件用于通过进程图显示 heat 信息。进程图节点上的颜色与您分配给每个节点的值相关,并基于分配的值,颜色因进程图而异。如果分配的值是最大值,则 heat 数值会定期显示,如果分配了最小值,则不会在进程图表中显示 heat。
您可以将 heatmap 组件导出到 Dashbuilder Runtime,并从 KIE 服务器数据集中检索 heat 信息。您还可以使用 heatmap 组件创建、编辑和构建仪表板。
55.5.1. 为进程创建 heatmap 组件
您可以为 Business Central 中的特定进程创建热图组件。
先决条件
- KIE 服务器部署并连接到 Business Central。
-
您已在
standalone.xml文件中将dashbuilder.components.enable系统属性设置为true。 - 您已创建了一个在 Business Central 中至少有一个业务进程资产的项目。
- 在 Business Central 中部署了具有进程定义的项目。
- 创建示例进程实例。
流程
使用以下步骤创建新的 KIE Server 数据集:
在 Business Central 中,前往 Admin → Data Sets。
Data Set Explorer 页面将打开。
单击 New Data Set,再选择 Execution Server 供应商类型。
Data Set Creation Wizard 页面将打开。
- 输入 dataset 的名称。
- 选择服务器配置。如果部署了项目,则可以使用服务器配置。
- 从列表中选择 CUSTOM 查询目标。
在 Query 字段中,输入以下自定义 SQL 查询。
select pil.externalId, pil.processId, nid, nodetype, nodename, count(nid) as total_hits, avg(execution_time) as averageExecutionTime, min(execution_time) as minExecutionTime, max(execution_time) as maxExecutionTime from( select max(log_date) as lastLog, processinstanceid as piid, nodeinstanceid as niid, nodeid as nid, nodetype, nodename, DATEDIFF(SECOND, min(log_date), max(log_date)) as execution_time from NodeInstanceLog group by processinstanceid, nodeinstanceid, nid order by lastLog ) inner join ProcessInstanceLog pil on pil.processInstanceId = piid group by pil.externalId, nid, nodename- 完成 Data Set Creation 向导,再点 Test。
- 点击 Save。
- 在 Business Central 中,进入 Menu → Design → Pages。
- 在 Pages 面板中,单击 New。
- 在 New Page 对话框中,在 Name 字段中输入一个值,然后选择所需的样式。
点击 OK。
新页面在 Page Editor 中打开,您可以看到 Heatmaps 组件在 Components 面板下可用。
- 在 组件 面板中,展开 Heatmaps 组件,并将 Process Heatmap 组件类型拖到 Page Editor 中。
- 在 Displayer 编辑器 向导中,点 Data 选项卡并选择新创建的 KIE Server 数据集。
- 在 Data 选项卡中,从 Columns 字段中选择 NID 和 AVERAGEEXECUTIONTIME。
点 Component Editor 选项卡,在 Component Properties 字段中输入强制字段的值,包括 Server Template、Container ID 和 Process Definition ID。
注意要访问 Server Template 的值,请转至 Deploy → Execution Servers → Server Configuration。对于 Container ID 的值,请转至 Manage → Process Instances,您可以点要使用的进程实例,在 Deployment 中对应于容器 ID,定义 ID 是进程 定义 ID。
- 点 Display 选项卡,并根据您的要求编辑 Chart、Carigins、Filter、Refresh 和 Columns 的值。
单击 +OK。
图 55.2. 进程热图组件示例

您可以查看进程图表的 heat 信息。
55.5.2. 为多个进程创建 heatmap 组件
您可以为 Business Central 中的多个进程创建 heatmap 组件。
先决条件
- KIE 服务器部署并连接到 Business Central。
-
您已在
standalone.xml文件中将dashbuilder.components.enable系统属性设置为true。 - 您已在 Business Central 中创建了多个项目,它至少包含一个业务进程资产。
- 在 Business Central 中部署了具有进程定义的项目。
- 创建示例进程实例。
流程
使用以下步骤创建新的 KIE Server 数据集:
在 Business Central 中,前往 Admin → Data Sets。
Data Set Explorer 页面将打开。
单击 New Data Set,再选择 Execution Server 供应商类型。
Data Set Creation Wizard 页面将打开。
- 输入 dataset 的名称。
- 选择服务器配置。如果部署了项目,则可以使用服务器配置。
- 从列表中选择 CUSTOM 查询目标。
在 Query 字段中,输入以下自定义 SQL 查询。
select pil.externalId, pil.processId, nid, nodetype, nodename, count(nid) as total_hits, avg(execution_time) as averageExecutionTime, min(execution_time) as minExecutionTime, max(execution_time) as maxExecutionTime from( select max(log_date) as lastLog, processinstanceid as piid, nodeinstanceid as niid, nodeid as nid, nodetype, nodename, DATEDIFF(SECOND, min(log_date), max(log_date)) as execution_time from NodeInstanceLog group by processinstanceid, nodeinstanceid, nid order by lastLog ) inner join ProcessInstanceLog pil on pil.processInstanceId = piid group by pil.externalId, nid, nodename- 完成 Data Set Creation 向导,再点 Test。
- 点击 Save。
- 在 Business Central 中,进入 Menu → Design → Pages。
- 在 Pages 面板中,单击 New。
- 在 New Page 对话框中,在 Name 字段中输入一个值,然后选择所需的样式。
点击 OK。
新页面在 Page Editor 中打开,您可以看到 Heatmaps 组件在 Components 面板下可用。
- 在 组件 面板中,展开 Heatmaps 组件,并将所有进程 Heatmaps 组件类型拖到 canvas。
- 在 Displayer 编辑器 向导中,点 Data 选项卡并选择新创建的 KIE Server 数据集。
- 在 Data 选项卡中,从 Columns 字段中选择 EXTERNAL ID、PROCESSID、NID 和 AVERAGEEXECUTIONTIME。
- 在 Process Selector 框中,根据您的要求选择 Container and Process 值。
点 Component Editor 选项卡,然后在 Server Template (必需)字段中输入值。
注意要访问 Server Template 的值,请转至 Deploy → Execution Servers → Server Configuration。
- 点 Display 选项卡,并根据您的要求编辑 Chart、Carigins、Filter、Refresh 和 Columns 的值。
单击 +OK。
图 55.3. 多个进程热图组件示例

您可以查看进程图表的 heat 信息。
55.5.3. 执行热图组件
您可以在 Business Central 之外本地执行内部 heatmap 组件,用于测试目的。相同的 API 用于创建外部组件,您可以使用它来构建自己的组件。有关外部组件的更多信息,请参阅 第 55.6 节 “外部组件”
要运行特定的 heatmap 组件,请完成以下步骤:
先决条件
- 您已在系统中安装了 npm。有关安装 npm 的更多信息,请参阅 下载并安装 Node.js 和 npm。
- 您已在系统中安装了 Yarn。有关安装 Yarn 的更多信息,请参阅 Yarn 安装。
- 您已克隆了 Appformer 存储库,以便在 Business Central 之外运行组件。
流程
-
进入
appformer/dashbuilder/dashbuilder-shared/dashbuilder-js目录。 在
dashbuilder-js目录中打开终端,并输入以下命令:yarn run init && yarn run build:fast
您可以查看
dashbuilder-js/packages目录中存在以下组件:- processes-heatmaps-component
- process-heatmap-component
- logo-component
- heatmap-component
进入
dashbuilder-js/packages目录,打开所需的 heatmap 组件,并在终端中输入以下命令:yarn run start
要访问组件,请在网页浏览器中输入 http://localhost:9001/。
所选组件显示在网页浏览器中。