<template>
|
<div class="gantt-timeline"
|
:style="{'margin-left':-cellWidth/2+'px'}">
|
<div class="gantt-timeline-block"
|
v-for="(day,index) in getDays" :style="{width:getTimeScales(day).length*cellWidth+'px'}"
|
:key="index">
|
<div class="gantt-timeline-day "
|
:style="heightStyle">
|
{{day.format("YYYY-MM-DD")}}
|
{{getDayMy(day.format("YYYY-MM-DD"))}}
|
</div>
|
<div class="gantt-timeline-scale "
|
:style="heightStyle">
|
<div :style="cellWidthStyle"
|
v-for="(hour,index) in getTimeScales(day)"
|
:key="index">
|
{{hour}}
|
<!-- <span v-if="hour !='01' ">{{hour}}</span> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import dayjs from "dayjs";
|
import { getBeginTimeOfTimeLine } from "../../utils/timeLineUtils.js";
|
|
const START_DAY = Symbol();
|
const MIDDLE_DAY = Symbol();
|
const END_DAY = Symbol();
|
|
function isSameDay(one, two) {
|
return one.isSame(two, "day");
|
}
|
|
export default {
|
name: "Timeline",
|
|
props: {
|
start: {
|
type: dayjs
|
},
|
end: {
|
type: dayjs
|
},
|
cellWidth: {
|
type: Number
|
},
|
titleHeight: {
|
type: Number
|
},
|
scale: {
|
type: Number
|
}
|
},
|
|
computed: {
|
/**
|
* 天列表
|
* @returns {[dayjs]} 该data中所有需要渲染的数据
|
*/
|
getDays() {
|
let temp = [];
|
let { start, end } = this;
|
|
for (; !isSameDay(start, end); start = start.add(1, "day")) {
|
temp.push(start);
|
}
|
temp.push(start);
|
|
return temp;
|
},
|
cellWidthStyle() {
|
return {
|
width: `${this.cellWidth}px`
|
};
|
},
|
heightStyle() {
|
return {
|
height: this.titleHeight + "px",
|
"line-height": this.titleHeight + "px",
|
};
|
}
|
},
|
|
methods: {
|
// 算出星期
|
getDayMy(day){
|
let weekArray = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
|
return weekArray[new Date(day).getDay()]
|
},
|
/**
|
* 获取时间刻度数组
|
*
|
* @param {dayjs} date
|
* @returns {[string]} 该data中所有需要渲染的数据
|
*/
|
getTimeScales(date) {
|
let { start, end } = this;
|
if (isSameDay(date, start)) {
|
return this.generateTimeScale(START_DAY);
|
} else if (isSameDay(date, end)) {
|
return this.generateTimeScale(END_DAY);
|
} else {
|
return this.generateTimeScale(MIDDLE_DAY);
|
}
|
},
|
/**
|
* 生成时间刻度数组
|
*
|
* @param {Symbol} type
|
* @returns {[string]} 该data中所有需要渲染的数据
|
*/
|
generateTimeScale(type) {
|
let totalblock = [];
|
let { start, end, scale } = this;
|
let a, b;
|
switch (type) {
|
case START_DAY: //和start同一天
|
a = getBeginTimeOfTimeLine(start, scale);
|
//start和end同一天特殊处理
|
if (isSameDay(start, end)) {
|
b = end;
|
} else {
|
b = start.endOf("day");
|
}
|
break;
|
case END_DAY: //和end 同一天
|
a = end.startOf("day");
|
b = end;
|
break;
|
case MIDDLE_DAY: //start和end中间的天
|
a = start.startOf("day");
|
b = start.endOf("day");
|
break;
|
default:
|
throw new TypeError("错误的计算类型");
|
}
|
while (!a.isAfter(b)) {
|
if (scale >= 60) {
|
totalblock.push(a.format("HH"));
|
} else {
|
totalblock.push(a.format("HH:mm"));
|
}
|
a = a.add(scale, "minute");
|
}
|
|
return totalblock;
|
}
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.gantt-timeline-day{
|
border-right: 1px solid #ebeef5;
|
border-bottom: 1px solid #ebeef5;
|
background: rgb(245, 245, 245);
|
color: #909399;
|
font-size: 14px;
|
}
|
</style>
|
