一、 根據(jù)任務(wù)流節(jié)點(diǎn)的順序，在畫(huà)布中展示其節(jié)點(diǎn)流程圖

• 技術(shù)準(zhǔn)備： gg-editor；G6

  
  
  1599125859899.png

1599127111775.png

• 數(shù)據(jù)格式：

{
    "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, // 開(kāi)啟畫(huà)布自適應(yīng)
      fitViewPadding: [50, 200, 0, 250], // 圖適應(yīng)畫(huà)布時(shí)，指定四周的留白。[上下右左]
    },
  };

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

二、在任務(wù)列表格中添加一列，展示當(dāng)前節(jié)點(diǎn)在任務(wù)流中的執(zhí)行進(jìn)度

1599125805220.png

解決思路

• 未執(zhí)行完成的任務(wù)節(jié)點(diǎn)，不知道其計(jì)劃時(shí)間，不知道其總進(jìn)度的占比。
• 由于沒(méi)有確切的執(zhí)行進(jìn)度數(shù)據(jù)，所以一個(gè)進(jìn)度條無(wú)法實(shí)現(xiàn)。
• 每個(gè)節(jié)點(diǎn)都是一個(gè)進(jìn)度條，多個(gè)進(jìn)度條進(jìn)行拼接，形成一個(gè)虛擬的總進(jìn)度條。

• 每個(gè)節(jié)點(diǎn)的進(jìn)度條寬度獲取平均值，進(jìn)度都為100，用執(zhí)行狀態(tài)和進(jìn)度條的顏色，體現(xiàn)其在整體任務(wù)流中的進(jìn)度。

  
  
  1599125859899.png

// 渲染進(jìn)度條
const renderProgress = ({ record, dataSet }) => {
// 獲取每個(gè)進(jìn)度條的平均寬度
  const width = floor(divide(record.index + 1, dataSet.totalCount), 2) * 100;
  // 任務(wù)節(jié)點(diǎn)的狀態(tài)和進(jìn)度條的映射關(guān)系
  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為快碼的標(biāo)簽字段
        const { tag } = dataSet.getField('status').getLookupData(statue);
        return (
          <div style={{ width: `${width}%` }}>
            <Progress
              key={jobId}
              size="small"
              percent={100}
              // 只有當(dāng)前節(jié)點(diǎn)對(duì)應(yīng)的進(jìn)度條，才會(huì)使用其真實(shí)的狀態(tài)和顏色，反之設(shè)置默認(rèn)值。
              status={index === record.index ? status[tag] : ''}
              strokeColor={index === record.index ? status[tag] : '#F5F5F5'}
              showInfo={false}
            />
          </div>
        );
      })}
    </div>
  );
};