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

简介

“时序图”–>先简单解释一下,突然接到任务要求做一个时序图(后面会附上参考图片),由于需求不是很完善,设计也还没给出图纸,暂时就先做一个满足基本功能的demo。

需求整理:

  1. 默认显示主任务,主任务下有N个子任务,需要查看子任务的运行状态时再加载子任务。
  2. 只有所有的子任务都结束了,主任务才显示完成状态,主任务的运行时间是变化的(开始时间可以确定),子任务可以是并行、串行启动。
  3. 以不同的颜色区分子任务所占主任务的比例。
  4. 每个主任务的运行时间是不同的,所以表示运行时间的刻度是变化的。(不太理解的话,可以观看下面的参考图)。

暂时的需求整理结束,下面来看看实现上遇到的一些问题,及解决方法。
注:本文使用的是React + ts,UI组件库使用的是andtesign.

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

分析:

  1. 从上面这张图片可以看出,左侧是一个树形结构,比较开心,因为antd里有类似的组件,我们可以从Tree组件上着手。
  2. table head 是延迟时间。(对应我们需求整理的第四点的时间刻度)。
  3. 右侧是一个用进度条的形式显示对应的延时时间。细心的话会发现进度条的颜色是有区分的。

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

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

1
step = (主任务结束时间 - 主任务开始时间)/3

使用Tree做我们时序图

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

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

1
2
3
4
5
6
7
8
9

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接口里自己定义一个

1
dataRef: Partial<{children?: React.ReactNode}>;

在我们的组件里还需要这样去定义:

1
2
3
4
5
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,那么我们的进度条可以利用这个属性去显示。进度条的位置可以利用子任务的开始时间去判断。

子任务进度条的长度:

1
(子任务结束时间 - 子任务开始时间) / (主任务结束时间 - 主任务开始时间)  * (屏幕宽度 - Tree title文字部分的宽度)

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

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

参考文献

https://github.com/react-component/upload/blob/master/examples/customRequest.js


https://ant.design/components/upload-cn/


https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putObject-property


作者信息:宁文飞,人和未来大数据前端工程师