调用链时间轴的实现

关于调用链时间轴的实现（vue项目 antD树形数据展示），之前的公司是局域网，数据格式无法复现，实现代码只能有个大概。
当时的原型图：

代码：

methods:{
getTableData(){
	... //请求省略
	this.totalData = res.result
	this.tableData[0] = res.result.tracesDetail

	if(this.tableData !== null || this.tableData !== [] || this.tableData !== undefined){
		this.handleTableData(this.tabledata[0]["childDetailEntity"],"1")
		this.getExpandedRowKeys(this.tableData,this.expandedRowKeys)
	},

handleTableData(tableData,key){
	tableData.forEach((item,index)=>{
		let indexs = index + 1
		item["key"] = key + indexs
		let keys = item["key"]
		if(item["childDetailEntity"] == null){
			this.handleTableData(item["childDetailEntity"],keys)
		}
	})
},
getExpandedRowKeys(tableData,arr){
	tableData.forEach((item)=>{
		if(item["key"]){
			arr.push(item["key"])
			let a = {key:item["key"],times:item["timeAsix"]}
			this.expandedRow.push(a)
			this.useexpandedRow.push(e)
		}
		if(item["children"]){
			this.getExpandedRowKeys(item["children"],arr)
		}else{
			this.expandedRow.push({key:"0"})
		}
	})
},
changeBg(){
	document.getElementByClassName("time"+this.expandedRowKeys[0])[0].style.width="350px"
	document.getElementByClassName("time"+this,expandedRowKeys[0])[0].style.background="#BEDFFF"

	try{
		this.expandedRowKeys.forEach((item,index)=>{
			if(item.length == 2){
				this.spliceexpanded.push(index)
				throw new Error("end")
			}
		})
	}.catch(e){}

	var count = 0
	this.expandedRow.forEach((item,index)=>{
		if(item.key == 0){
			let indexs = index - count
			this.spliceexpanded.push(index - count)
			count++
		}
	})
	this.spliceexpanded.pop()
	
	if(this.spliceexpanded.length > 0){
		this.spliceexpanded.forEach((item,index=)=>{
			this.changetimeCss(this.spliceexpanded[index],this.spliceexpanded[index+1],this.width[index])
		})
	}
},
changetimeCss(indexs,endIndex,left){
	let arr = []
	let r = this.expandedRowKeys.slice(indexs,endIndex)
	arr = arr.concat(r)

	arr.forEach((item,index)=>{
		let time = this.useexpandedRow[index + indexs].times
		if(index+1 !== arr.length){
			document.getElementByClassName("time"+item)[0].style.width=3.5*time + "px"
			document.getElementByClassName("time"+item)[0].style.background="#BEDFFF"
			document.getElementByClassName("time"+item)[0].style.marginLeft=left+"px"
		}else{
			let lefts=this.useexpandedRow[index+indexs-1].times
			left=3.5*lefts+left
			document.getElementByClassName("time"+item)[0].style.marginLeft=left+"px"
			document.getElementByClassName("time"+item)[0].style.display="flex"
			document.getElementByClassName("time"+item)[0].classList.add("spanclass")
			document.getElementByClassName("time"+item)[0].style.width="3px"
			this.widths.push(parseFloat(document.getElementByClassName("time"+time)[0].style.marginLeft))
		}
	})
}
}

时间隔了太久，具体代码看不到，也记不清了，下次一定要随时记录！！！！！！！！