前端构建简易流水线

流水线提供的自定义流程编排工具，把产研过程中的不同阶段和任务串联或并联在一起，通过构建、测试、部署、人工管控等多源的组件化能力，采用敏捷迭代方式实现持续集成和交付、反馈的过程，打通产品、研发、运营之间信息不对称的鸿沟，调动各部门之间的协作进行无缝衔接，提升整体产能效率，为整个软件生命周期服务。

整体结构图

前端层面构建流水线

确定流水线结构

每一个构建都为一个stage，下面的job为stage的子节点,就如同妖是妖他妈生的，人是人他妈生的，所以每个子节点都会有个父节点。

 templateCode: [{
      "stage_name": '构建', //每个阶段的名称
       "topflag": true, //控制阶段编辑开关
        "steps": [{
                "auto_run": true, //节点触发 ，false手动，true是自动，默认是true
                "jobs": [{
                 "job_name": 'java 构建', //每个子任务的名称
                 "step_type_content": 'java-构建', // 给用户看的步骤类别
                  "job_content": {
                                compiler_id: 1, //编译id
                                //子节点内容
                   },
               }]
         }]
}]

我们 div 层面的结构是

<div class="father">   //节点可串行与并行
        <span>{stage_name} </span> //每个stage 的名称
        <div class="son"> 
        {job_name}
        //stage 下面的每一个job 形成我们的扫描节点 可控制手动自动触发
        </div>
</div>

节点之间的连线

//  html
<div class="pipeline_flow_splitline"></div>、
//  css
.pipeline_flow_splitline:after {
	content: "";
	height: 100%;
	border-left: 1px solid #d9d9d9;
	position: absolute;
}

这样我们就完成了节点之间的并行与串行

现在需要为我们的节点绑定他应要执行的任务

然后将任务绑定在我们的job_content上然后我们就可以运行我们的流水线了