一、 根据任务流节点的顺序，在画布中展示其节点流程图

• 技术准备： gg-editor；G6

  
  
  1599125859899.png

1599127111775.png

• 数据格式：

{
    "nodes": [{
        "type": "node",
        "size": "264*34",
        "shape": "datax-node",
        "jobId": 2506,
        "jobName": "dx_uaes_vin_source_data",
        "label": "dx_stg_vin_source_data",
        "jobType": "job",
        "nodeType": "DATAX",
        "jobCommand": "datax.home=/data/hdsp/infra/datax/\ntype=datax\ndatax.scripts: /data/hdsp/infra/DATAX_JSON_FILE_HOME/0_datax_dx_uaes_vin_source_data.json",
        "jobPath": null,
        "jobParamsList": [],
        "jobParams": {},
        "x": 287.3516044921875,
        "y": 94.0904482421875,
        "id": "17f49eec",
        "color": "#faad14",
        "index": 1
    }],
    "edges": [{
        "source": "17f49eec",
        "sourceAnchor": 2,
        "target": "c3b98e71",
        "targetAnchor": 0,
        "id": "63b72383",
        "index": 0
    }, {
        "source": "c3b98e71",
        "sourceAnchor": 2,
        "target": "4ec1ec2a",
        "targetAnchor": 0,
        "id": "3742d6ef",
        "index": 3
    }],
}

  const flowProps = {
    noEndEdge: false, // 不允许悬空边,
    data: flowData,
    graph: {
      fitView: true, // 开启画布自适应
      fitViewPadding: [50, 200, 0, 250], // 图适应画布时，指定四周的留白。[上下右左]
    },
  };

  return (
    <GGEditor>
        <Flow {...flowProps} />
      </GGEditor>
  );

二、在任务列表格中添加一列，展示当前节点在任务流中的执行进度

1599125805220.png

解决思路

• 未执行完成的任务节点，不知道其计划时间，不知道其总进度的占比。
• 由于没有确切的执行进度数据，所以一个进度条无法实现。
• 每个节点都是一个进度条，多个进度条进行拼接，形成一个虚拟的总进度条。

• 每个节点的进度条宽度获取平均值，进度都为100，用执行状态和进度条的颜色，体现其在整体任务流中的进度。

  
  
  1599125859899.png

// 渲染进度条
const renderProgress = ({ record, dataSet }) => {
// 获取每个进度条的平均宽度
  const width = floor(divide(record.index + 1, dataSet.totalCount), 2) * 100;
  // 任务节点的状态和进度条的映射关系
  const status = {
    default: 'gray',
    success: 'success',
    processing: 'active',
    warning: 'exception',
    error: 'exception',
  };
  return (
    <div style={{ display: 'flex' }}>
      {dataSet.map((item, index) => {
        const { jobId, status: statue } = item.toData();
        // tag为快码的标签字段
        const { tag } = dataSet.getField('status').getLookupData(statue);
        return (
          <div style={{ width: `${width}%` }}>
            <Progress
              key={jobId}
              size="small"
              percent={100}
              // 只有当前节点对应的进度条，才会使用其真实的状态和颜色，反之设置默认值。
              status={index === record.index ? status[tag] : ''}
              strokeColor={index === record.index ? status[tag] : '#F5F5F5'}
              showInfo={false}
            />
          </div>
        );
      })}
    </div>
  );
};