React - 甘特图时间轴

// 组件调用
<TimeComponents
	// 维度数
	ganttSliderValue={ganttSliderValue}
	// 维度length
	ganttAlgorithm={ganttAlgorithm}
	// 开始时间
	startTime={ganttStartTime && ganttStartTime.format('YYYY-MM-DD HH:mm')}
	// 结束时间
	endTime={ganttEndTime && ganttEndTime.format('YYYY-MM-DD HH:mm')}
	// 是否显示日期
	dataTimeShow
	// 当前时间position定位
	currentTimePosition={currentTimePosition}
/>

// 时间轴封装
// index.jsx
import React, { Component } from 'react'
import classnames from 'classnames/bind'
import styles from './index.less'
import moment from 'moment'

const cx = classnames.bind(styles)
class TimeComponents extends Component {
  constructor (props) {
    super(props)
    this.state = {
      startTime: props.startTime,
      endTime: props.endTime,
      timeArr: []
    }
  }

  componentDidMount = () => {
    let { startTime, endTime } = this.props
    this.getTimeline(startTime, endTime)
  }

  componentWillReceiveProps = (nextProps) => {
    if (nextProps.startTime !== this.props.startTime || nextProps.endTime !== this.props.endTime) {
      // this.setState({
      //   startTime: nextProps.startTime,
      //   endTime: nextProps.endTime
      // })
      this.getTimeline(nextProps.startTime, nextProps.endTime)
    }
  }

  // 获取时间轴数据
  getTimeline = (startTime, endTime) => {
    // 结束时间与开始时间相差几天
    const diffDays = moment.duration(moment(endTime) - moment(startTime), 'ms').days() + 1
    if (diffDays < 0) {
      return
    }
    const startHours = moment(startTime).get('hours')
    const endHours = moment(endTime).get('hours')
    let TimeLineArr = []
    let diffStartHourArr = []
    let diffEndHourArr = []
    if (diffDays === 1) {
      // 结束时间与开始时间相差几个小时
      const hours = moment.duration(moment(startTime) - moment(endTime), 'ms').hours()
      // 开始时间到 0 点的下标
      let num
      for (let j = 0; j <= hours + 1; j++) {
        if (j + startHours < 24) {
          diffStartHourArr.push(j + startHours)
          num = j
        } else {
          diffStartHourArr.push(j - num - 1)
        }
      }
      let ganttDate = moment(startTime).format('YYYY-MM-DD')
      TimeLineArr.push({
        timeValues: diffStartHourArr,
        timeData: ganttDate
      })
    } else {
      for (let j = 0; j < 24 - startHours + 1; j++) {
        diffStartHourArr.push(j + startHours)
      }
      for (let k = 1; k < endHours + 1; k++) {
        diffEndHourArr.push(k)
      }
      for (let i = 0; i < diffDays; i++) {
        let ganttDate
        if (i === 0) {
          ganttDate = moment(startTime).format('YYYY-MM-DD')
          TimeLineArr.push({
            timeValues: diffStartHourArr,
            timeData: ganttDate
          })
        } else if (i === diffDays - 1) {
          ganttDate = moment(endTime).format('YYYY-MM-DD')
          TimeLineArr.push({
            timeValues: diffEndHourArr,
            timeData: ganttDate
          })
        } else {
          ganttDate = moment(startTime).add(i, 'd').format('YYYY-MM-DD')
          TimeLineArr.push({
            timeValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
            timeData: ganttDate
          })
        }
      }
    }
    this.setState({
      timeArr: TimeLineArr
    })
  }

  render () {
    const { timeArr } = this.state
    const { ganttAlgorithm, ganttSliderValue, dataTimeShow, currentTimePosition = 0 } = this.props
    let minutesArr = []
    const calcWidth = 60 * (30 / ganttSliderValue)
    switch (ganttAlgorithm) {
      case 1:
        minutesArr = [10, 20, 30, 40, 50]
        break
      case 2:
        minutesArr = [20, 40]
        break
      case 3:
        minutesArr = [30]
        break
      case 4:
        minutesArr = []
        break
    }
    return (
      <div className={cx('gantt-time-content')}>
        <span className='current-time-spot' style={{left: `${currentTimePosition}px`, bottom: ganttSliderValue === 60 && '-20px'}}>{moment().format('HH:mm')}</span>
        {
          timeArr.length > 0 && timeArr.map((item, index) => {
            return <div key={index} className={cx('time-dom')}>
              {
                dataTimeShow && <div className={cx('time-date')} style={{width: `calc(100% - ${calcWidth}px)`}} >{item.timeValues.length > 0 && item.timeData}</div>
              }
              {
                item.timeValues.length > 0 && item.timeValues.map((timeValueItme, timeValueIndex) => {
                  return <div key={timeValueIndex} className={cx('time-dom')}>
                    <h3 className={cx('time-dom-hours')}>
                      <span>
                        {
                          timeValueItme !== 24
                            ? timeValueItme < 10 ? `0${timeValueItme}` : timeValueItme
                            : '00'
                        }
                      </span>{ganttAlgorithm !== 4 && ':00'}
                    </h3>
                    <div className={cx('minutes-content')}>
                      {
                        minutesArr.map((minutesItem, minutesIndex) => {
                          return <div key={minutesIndex} className={cx({'minutes-list': true, 'paddingRight': minutesIndex === 4})}>
                            <div className={cx('minutes-list-icon')}>|</div>
                            <div>{minutesItem}</div>
                          </div>
                        })
                      }
                    </div>
                  </div>
                })
              }
            </div>
          })
        }
      </div>
    )
  }
}

export default TimeComponents

// 时间轴样式
// less
.gantt-time-content {
  position: relative;
  padding-top: 10px;
  white-space: nowrap;
  height: 100%;
  .current-time-spot {
    position: absolute;
    z-index: 9;
    bottom: 0;
    display: block;
    width: 40px;
    font-size: 12px;
    text-align: center;
    color: #22a7fd;
    transform: translateX(-20px);
  }
  .time-dom {
    display: inline-block;
    text-align: center;
    .time-date {
      margin-bottom: 8px;
      font-size: 14px;
    }
    .time-dom-hours {
      display: inline-block;
      margin: 0;
      width: 40px;
      margin-left: -10px;
      padding-left: 10px;
      text-align: center;
      font-size: 14px;
      font-weight: normal;
      vertical-align: top;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0;
    }
    .minutes-content {
      display: inline-block;
      margin-top: 20px;
      .minutes-list {
        width: 30px;
        height: 35px;
        display: inline-block;
        font-size: 10px;
        text-align: center;
        color: #9B9B9B;
        .minutes-list-icon {
          height: 6px;
          overflow: hidden;
        }
      }
    }
  }
}