自动化立体仓库项目任务调度系统中任务流程可视化实现

在运维自动化平台中，任务系统无疑是最核心的组成部分之一。它承担着所有打包编译、项目上线、日常维护等运维任务的执行。通过任务系统，我们能够灵活地构建满足不同需求的自定义任务流。早期的任务流后端采用了类似列表的存储结构，根据任务流内子任务的排序依次执行，尽管通过配置相同的顺序可以实现子任务的并行执行，但由于前端使用了简单的steps.js插件，无法直观地展示并行执行的过程。就像下图这样，尽管iOS更新和安卓更新配置了相同的执行排序，可以并行执行，但在图示上并没有直观的显示方式，容易让人产生误解

尽管如此，这种简单的串行展示方式仍然使用了较长时间。然而，随着接入流程越来越多，会遇到一个大流程内可能有十几甚至几十个子任务的情况，这种简单的平铺展示方式逐渐显得不够友好，同时，随着使用的深入，会有一些更加复杂的流程定义，比如串行并行交替，多串行并行的循环执行等，那原本的展示方式就完全无法满足需求了，再加上流程的定义越来越复杂，会有一些更高级的流程定义需求，例如根据不同的变量/参数执行不同的任务流节点等，原本的任务流构建方式和执行逻辑显然不再适用，因此，我们重构了任务流

重构后的任务流基本遵循了BPMN规范，采用拖拖拽拽的方式来编排任务流，从而生成可视化的任务流程图，后端也完全根据流程图的节点、网关和连线依次执行，执行状态和结果实时展示在流程图上，不同的执行结果和状态采用不同的颜色