記錄工做中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.…

---

做者信息：寧文飛，人和將來大數據前端工程師