时间点及网络状态 组件打点

效果如下：可根据自己的需求去调整，主要说一下实现思路和方法。

以下实现基于react语法去写的，vue或js逻辑类似，参考即可

主要思路：部分代码如下

1、良好、一般、糟糕 时间线的实现思路：

良好（现在看到的）lfDot，rgDot左右各一个点，鼠标滑过展示具体时间点信息

<div className="goodLine" style={{ left: actStartNode.left, width: actStartNode.width }}>
   <Tooltip title={formatMoment(actStartTime)}>
        <div className="lfDot"></div>
   </Tooltip>
   <Tooltip title={formatMoment(actEndTime)}>
         <div className="rgDot"></div>
   </Tooltip>
</div>

默认网络状态都是良好，如果有网络状态是一般或者糟糕的情况，继续创建一般的div或良好的div，动态设置left和width即可

<div className="badLine" style={{ left: '20%', width: '10%' }}></div> 

2、下面固定的刻度线

刻度线起装饰效果。scaleNum是 时间线总宽度/10px (timeLine.clientWidth / 10)

{/* 固定的刻度线 */}
<div className="scaleWrap">
    {new Array(scaleNum).fill({}).map((scaleItem: any, scaleIndex: number) => (
       <div className="scale" key={`scale_${scaleIndex}`}></div>
     ))}
</div>

3、封装提前进入、计划开始、计划结束、拖堂结束组件及打点到时间轴上

主要是计算当前元素的left，计算出位置，根据服务端返回的时间点来动态计算

total：即结束减开始的总数/100按照百分比来动态计算，resize也兼容

4、三角形具体打点

具体三角形的坐标点计算规则类似，获取left的值，动态设置css即可

交流

1、QQ群：可添加qq群共同进阶学习： 进军全栈工程师疑难解  群号:   856402057

2、公众号：公众号「进军全栈攻城狮」 ，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！通过公众号可加我vx拉群