BPMNJS节点实现扩展flowable标签--

注:此文主要是自用,能帮到大家更好

第一:创建flowable.json文件。如下配置

{
  "name": "Flowable",
  "uri": "http://flowable.org/bpmn",
  "prefix": "flowable",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
 {
      "name": "TypeString",
      "superClass": [
        "Element"
      ],
      "properties": [
        {
          "name": "body",
          "isBody": true,//改属性表示是否为文字,要属性的话删了即可
          "type": "String"
        }
      ]
    },
  {
      "name": "Field",
      "superClass": [
        "Element"
      ],
      "meta": {
        "allowedIn": [
         "*"
        ]
      },
      "properties": [
        
        {
          "name": "values",
          "type": "TypeString",//此属性要获取到你对应的name标签 
          "isMany": true
        }
      ]
    },
],
 "emumerations": []
}

二、导入创建的flowable.json 文件。创建bpmn对象

   import flowableModdleDescriptor from "./flowable";

 this.bpmnModeler = new Modeler({
        container: "#canvas",
        additionalModules: [
          propertiesPanelModule,
          propertiesProviderModule,
          this.customTranslate,
        ],
        moddleExtensions: {
          flowable: flowableModdleDescriptor,
        },
      });

三、创建标签

  const modeling = this.bpmnModeler.get("modeling");
    const elementRegistry = this.bpmnModeler.get("elementRegistry");
      const moddle = this.bpmnModeler.get("moddle");

      let body = moddle.create("flowable:TypeString", { body: "1213" });
      let Field = moddle.create("flowable:Field", {
        values: [body],
        name: "type",
      });
      const extensionElements = moddle.create("bpmn:ExtensionElements", {
        values: [Field],
      });
      modeling.updateProperties(
        elementRegistry._elements[elementId].element,
        { extensionElements }
      );

<think>嗯,用户问的是如何在Flowable 6.5中实现正在执行的流程的可视化。首先,我需要回忆一下Flowable的基本功能。Flowable是一个工作流引擎,支持BPMN 2.0标准,所以可视化流程应该是它的内置功能之一。不过具体到6.5版本,可能需要考虑不同的实现方式。 首先,用户可能希望实时查看当前运行的流程实例的状态,比如哪些节点正在执行,已经完成了哪些步骤。这时候需要用到Flowable的REST API或者直接使用其提供的Java API来获取运行时数据。然后,将这些数据与流程定义中的BPMN图结合起来,生成可视化的流程图。 接下来,可能需要考虑使用Flowable自带的UI工具,比如Flowable Modeler和Flowable Task应用。不过这些工具是否支持实时监控正在运行的流程呢?可能需要配置或者扩展这些工具。例如,Flowable Admin应用可能提供了监控功能,可以展示当前流程实例的状态。 另外,如果用户想要自定义的可视化界面,可能需要通过Flowable的API获取流程实例的活动信息,比如当前活动的任务、执行流的位置等,然后将这些信息叠加到流程图的相应节点上。例如,使用BPMN.js这样的库来渲染流程图,并根据从Flowable获取的数据高亮显示当前正在执行的节点。 还需要考虑流程实例的历史数据,可能需要结合运行时数据与历史数据来准确反映流程的状态。例如,查询ACT_RU_EXECUTION表获取当前执行的信息,同时可能需要ACT_HI_ACTINST来查看已经完成的活动。 另外,用户可能需要权限管理,确保只有有权限的用户才能查看特定流程的可视化。这可能需要集成Spring Security或者其他安全框架。 可能的步骤包括:1. 使用Flowable的API获取正在执行的流程实例和活动节点信息。2. 获取对应的BPMN流程定义文件。3. 使用前端库(如BPMN.js)渲染流程图,并根据活动节点信息进行高亮显示。4. 可能需要搭建一个Web应用来展示这些可视化结果,或者扩展现有的Flowable UI工具。 还需要注意Flowable版本之间的差异,6.5版本可能有特定的API或配置方式。例如,ProcessRuntime和TaskRuntime在Spring Boot集成中的使用方式,或者直接使用HistoryService和RuntimeService来获取数据。 此外,是否需要实时更新?可能需要WebSocket或者定时轮询来更新前端视图,确保用户看到的是最新的流程状态。但用户可能没有提到实时性的要求,所以可能只需要在请求时获取当前状态即可。 总结来说,实现可视化的关键点在于获取流程实例的运行时数据,将其与BPMN模型结合,并通过前端展示。需要确认用户是否有现成的UI工具可用,或者需要自行开发。如果是自行开发,前端技术选型也很重要,BPMN.js是一个不错的选择,因为它支持BPMN 2.0的渲染和交互。</think>在 Flowable 6.5 中,实现正在执行的流程的可视化主要依赖其内置的 **BPMN 可视化引擎**和 **REST API**,结合流程实例的运行时数据与流程定义(BPMN 2.0 XML)的图形化渲染。以下是具体实现方法: --- ### 1. **使用 Flowable 自带工具** - 提供实时监控功能,可直接查看流程实例的当前状态、活动节点、变量等信息。 - 访问路径:`http://<host>:<port>/flowable-admin`,通过界面查看 `Process Instances` 列表。 - **Flowable Task 应用**: - 支持查看用户任务、流程实例的当前节点状态。 --- ### 2. **通过 API 获取数据并自定义可视化** **步骤 1:获取流程实例的运行时信息** ```java // 使用 Java API 查询运行时信息 RuntimeService runtimeService = processEngine.getRuntimeService(); List<Execution> executions = runtimeService.createExecutionQuery() .processInstanceId(processInstanceId) .list(); // 获取当前活动节点 List<String> activeActivityIds = runtimeService.getActiveActivityIds(executionId); ``` **步骤 2:获取流程定义的 BPMN 图** ```java RepositoryService repositoryService = processEngine.getRepositoryService(); BpmnModel bpmnModel = repositoryService.getBpmnModel(processDefinitionId); // 转换为 SVG/PNG 或直接使用 BPMN.js 渲染 ``` **步骤 3:结合数据渲染可视化** - **前端库**(如 `bpmn-js`): - 使用 BPMN.js 加载 BPMN 模型,并通过 Flowable 的 REST API 获取当前活动节点- 高亮正在执行的节点(通过添加 CSS 类或修改 SVG 元素)。 - **示例代码片段**: ```javascript fetch(`/flowable-rest/process-api/runtime/process-instances/${processInstanceId}/activity-instances`) .then(response => response.json()) .then(data => { const activeNodes = data.childActivityInstances.map(act => act.activityId); bpmnViewer.get('canvas').addMarker(activeNodes, 'highlight'); }); ``` --- ### 3. **通过 REST API 直接集成** Flowable 提供 RESTful 接口获取流程实例和活动信息: - **获取流程实例当前节点**: ``` GET /flowable-rest/process-api/runtime/process-instances/{processInstanceId}/activity-instances ``` - **获取流程定义的 BPMN XML**: ``` GET /flowable-rest/process-api/repository/process-definitions/{processDefinitionId}/resourcedata ``` - **渲染流程图并高亮活动节点**: 使用返回的 BPMN XML 在前端(如 BPMN.js)中渲染,并根据活动节点 ID 动态标记。 --- ### 4. **历史数据补充** ```java HistoryService historyService = processEngine.getHistoryService(); List<HistoricActivityInstance> historicActivities = historyService .createHistoricActivityInstanceQuery() .processInstanceId(processInstanceId) .finished() // 已完成的节点 .list(); ``` - 结合历史记录与运行时数据,生成完整的流程图状态(如灰色表示已完成,绿色表示进行中)。 --- ### 5. **自定义 UI 示例** ```html <!-- 使用 BPMN.js 渲染流程图 --> <div id="bpmn-container"></div> <script> const viewer = new BpmnJS({ container: '#bpmn-container' }); fetch('/get-bpmn-xml?processInstanceId=123') .then(res => res.text()) .then(xml => viewer.importXML(xml)) .then(() => { fetch('/get-active-nodes?processInstanceId=123') .then(res => res.json()) .then(nodes => { nodes.forEach(nodeId => viewer.get('canvas').addMarker(nodeId, 'highlight')); }); }); </script> ``` --- ### 6. **注意事项** - **权限控制**:确保通过 Spring Security 或 Flowable 的 IdentityService 限制访问权限。 - **性能优化**:频繁查询运行时数据可能影响引擎性能,建议合理设计轮询间隔或使用事件监听。 - **版本兼容性**:Flowable 6.5 的 API 与后续版本可能有差异,需参考[官方文档](https://www.flowable.com/open-source/docs/)。 通过上述方法,可以灵活实现从简单监控到复杂自定义的可视化需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值