1. 使用背景

在「自定义页面查看流程效率」文档中实现了将一个流程内的审批数据展示在表格组件当中，那么如何实现当前应用所有流程的效率监控呢。此文档介绍如何实现单应用全流程效率监控。

2. 视频教程

3. 操作步骤

3.1 步骤一：创建流程页面

创建 2 个流程页面，分别配置页面所需组件和流程审批节点信息，并录入一些测试数据。

图3.1-1 流程表单1

图3.1-2 流程表单2

3.2 步骤二：创建底表

作用：存储应用内所需查看的流程表单名称和流程表单formUuid，后续会将表单内的数据在自定义页面获取，放在下拉单选中用作选择查看流程页面审批数据。

数据底表

3.3 步骤三：创建自定义页面

所需组件：

「下拉单选」：配置选项，显示值配置流程表单名称，选项值配置流程表单 formUuid。

「表格组件」：主要配置操作列中的操作进度选项，控制进度指示器的进度百分比，其余配置可以参考文档 自定义页面查看流程效率。

「进度指示器组件」：百分比属性绑定变量数据源，并关闭自动渲染，根据变量数据源控制渲染和百分比。

自定义页面所需组件

3.3.1 定义远程数据源

为了实时获取流程的监控情况，会先调用 搜索实例 ID 的接口，筛选完成对应的流程后通过 获取审批记录的接口 将数据审批节点的动作和审批时间等数据获取出来，在自定义页面进行展示。

远程数据源配置

数据源关闭自动加载，后续为了实现分页和总计的效果，在调用数据源后使用了数据处理，返回实例 ID，总条数和当前页码。

下述代码可直接复制在获取实例 ID 接口的 didfetch 数据处理内

3.3.1-1 getDatas 远程数据源配置

下述代码可直接复制 didfetch 数据处理内，注意：需要替换组件的唯一标识。

3.3.1-2 自定义选项配置

3.3.2 定义变量数据源

由于对返回的数据做了较为复杂的格式处理，所以定义变量数据源 time 和 datas，表格组件绑定 datas 变量数据源。

表格组件绑定变量数据源

​

percent 和 condition 分别控制进度指示器组件的百分比和是否渲染属性。

变量数据源

绑定变量数据源

3.3.3 下拉单选绑定动作触发调用

下拉组件绑定动作

更改数据字段名称

​

通过 API 方法获取到下拉组件的 value 值，定义请求参数，将 value 值也就是表单的 formUuid 当请求参数定义，最终在 getInstanceIds 远程数据源中传入参数得到该页面的审批信息。

下述代码可直接复制JS面板内，注意：需要替换下拉组件的唯一标识。

效果演示

3.3.4 设置操作列的查看进度

设置表格的操作列