<TimeComponents
ganttSliderValue={ganttSliderValue}
ganttAlgorithm={ganttAlgorithm}
startTime={ganttStartTime && ganttStartTime.format('YYYY-MM-DD HH:mm')}
endTime={ganttEndTime && ganttEndTime.format('YYYY-MM-DD HH:mm')}
dataTimeShow
currentTimePosition={currentTimePosition}
/>
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.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()
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
.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;
}
}
}
}
}