记录工做中React antdesign Tree组件实现时序图的思路，及碰到的问题

简介

"时序图"-->先简单解释一下，忽然接到任务要求作一个时序图（后面会附上参考图片），因为需求不是很完善，设计也还没给出图纸，暂时就先作一个知足基本功能的demo。

需求整理：

1. 默认显示主任务，主任务下有N个子任务，须要查看子任务的运行状态时再加载子任务。
2. 只有全部的子任务都结束了，主任务才显示完成状态，主任务的运行时间是变化的（开始时间能够肯定）。
3. 如何显示子任务并行、串行的运行状态？
4. 以不一样的颜色区分子任务所占主任务的比例，以及子任务自己的状态。
5. 每一个主任务的运行时间是不一样的（有多是一天、也有多是一周），因此table head的时间的刻度是变化的。（不太理解的话，能够观看下面的参考图）。
6. 思考如何搜索子任务（由于默认只显示主任务，须要点击时才加载子任务，这样作是为了考虑性能、加载速度），搜索功能应该能够按照名字、id、时间段，来进行搜索。

暂时的需求整理结束，下面来看看实现上遇到的一些问题，及解决方法。 注：

1. 本文使用的是React + ts，UI组件库使用的是Ant Design,本文中将Ant Design简称antd。
2. 本文中的'任务结束时间'表示任务正在运行的当前时间或者任务真正的完成时间。

先看参考图，了解一下大概是要作一个怎样的效果。

对示例图进行分析：

1. 从上面这张图片能够看出，左侧是一个树形结构，比较开心，由于antd里有相似的组件，咱们能够从Tree组件上着手。
2. table head 是延迟时间，对应咱们需求里的任务运行时间。（对应咱们需求整理的第5点的时间刻度）。
3. 右侧是一个用进度条的形式显示对应的延时时间。细心的话会发现进度条的颜色是有区分的。（里面的文字数据就很少作介绍了，这个比较简单）

时序图的table head运行时刻计算，刻度为4

判断一个主任务的时刻步长：

step = (主任务结束时间 - 主任务开始时间)/3
// 这里为何是除以3呢？好比从12：00 - 15：00（12：00为刻度1，12 + step，12 + 2step, 15:00）
复制代码

使用Tree作咱们时序图

注： 实现的代码有点长，所有贴出来的话阅读会比较困难，因此我会贴出一些重要的部分，以及遇到问题的部分。

按照antd给出的示例去引入Tree组件，而后给参数添加类型。

public renderTree = () => {
  return (
    // (JSX attribute) loadData?: ((node: AntTreeNode) => PromiseLike<any>) | undefined
    <Tree className="tree-box" loadData={this.onLoadData}>
      {this.renderTreeNodes(this.state.treeData)}
    </Tree>
  );
}
复制代码

使用TreeNodes加载数据的话，ts里会遇到一个这样的报错提示:

AntTreeNode上不存在dataRef，这时我选择去Tree.d.ts里面的AntTreeNodeProps接口里本身定义一个

dataRef: Partial<{children?: React.ReactNode}>;
复制代码

在咱们的组件里还须要这样去定义：

interface IRef extends AntTreeNodeProps{
  dataRef: Partial<{children?: React.ReactNode}>;
}
// 由于咱们的TreedNode是一个组件类型，咱们须要在组件上注入dataRef这样在使用TreeNode时就不会有错误提示了
const TreeNode = Tree.TreeNode as React.ComponentClass<IRef>;
复制代码

这里算是antd对ts写做支持的一个遗漏。好了ts的问题就到这里。

使用TreeNode时咱们发现他的Title属性支持ReactNode，那么咱们的进度条能够利用这个属性去显示。进度条的位置能够利用子任务的开始时间去判断。

咱们的tree是为了实现任务的层级关系，那么咱们如何控制左侧任务名字所占空间像上图同样呢？

antd Tree组件的子组件都是块级元素，而且为了表示层级，antd里treeNode都有一个固定的padding：0,0,0,18px，咱们设置左侧任务名字的最大长度为400px.那么咱们能够计算一下treeNode的长度：

400 - (index - 1) * 18 // 第一层的tree Node 的index为1，第一层的tree Node 的index为2，第一层的tree Node 的index为3以此类推。
复制代码

子任务并行、串行的开始位置计算及定义

解释： 子任务无论是串行仍是并行，咱们这里先不作考虑，由于子任务开始时会记录它开始的时间段，咱们只须要用它结束的时间段，和开始的时间段就能够知道任务的运行时长，以及子任务所占主任务的比例，经过比例咱们能够设定它不一样的颜色及状态。

1. 子任务进度条的长度：

(子任务结束时间 - 子任务开始时间) / (主任务结束时间 - 主任务开始时间)  * (屏幕宽度 - 400)
// 400任务名所占的最大宽度
复制代码

2. 子任务进度条的颜色经过子任务所占主任务长度的多少来判断子任务的颜色变化。

// color 设置子任务的颜色。
public color = {
  done: '#52c41a',
  failed: '#f5222d',
  running: '#1890ff'
};
public running_color = (max: number, min: number, item_width: number, color: string) => {
  if (min < item_width && item_width <= max) {
    this.color.running = color;
  }
}
// 经过运行状态取判断子任务的颜色
if (item.status === 'running') {
    this.running_color(total_width, 0, item_width, '#b0afcc');
    this.running_color((total_width * 2), total_width, item_width, '#7e7bc9');
    this.running_color((total_width * 3), (total_width * 2), item_width, '#3a34c9');
    this.running_color((total_width * 4), (total_width * 3), item_width, '#1427e1');
}
else this.progress_color = this.color[item.status];
复制代码

展现一下只实现基础功能的时序图

原文连接：tech.gtxlab.com/react-tree.…

---

做者信息：宁文飞，人和将来大数据前端工程师