|
@@ -1,4 +1,6 @@
|
|
|
import moment from 'moment'
|
|
|
+
|
|
|
+window._moment = moment
|
|
|
/**
|
|
|
* 甘特图
|
|
|
* @param {} options
|
|
@@ -34,16 +36,17 @@ export function GanttChartMonth(options) {
|
|
|
// 每行任务的纵向间距
|
|
|
this.rowSpanDis = 22
|
|
|
// 总天数
|
|
|
- this.daysCount = options['daysCount'] || 365 * 1.5
|
|
|
- // 每天的间隔宽度
|
|
|
- this.dayStep = parseInt(this.cWidth / this.daysCount)
|
|
|
+ this.daysCount = options['daysCount'] || 365 * 1.5
|
|
|
// 任务图距离顶部高度
|
|
|
this.graphTopDis = 60
|
|
|
// 任务矩形最小宽度
|
|
|
this.minTaskRectWidth = 5
|
|
|
-
|
|
|
- // 每像素代表的小时数
|
|
|
- this.timePerPix = this.cWidth / this.daysCount / 24 / 3600
|
|
|
+
|
|
|
+ // console.log('daysCount:', this.daysCount)
|
|
|
+ // 每秒数代表的像素
|
|
|
+ this.timePerPix = this.cWidth / (this.daysCount * 24 * 3600)
|
|
|
+ // 每天的间隔宽度
|
|
|
+ this.dayStep = this.timePerPix * 3600 * 24
|
|
|
// 当前视图开始时间,向前推N天
|
|
|
this.startAt = moment().startOf('year')
|
|
|
this.endAt = moment()
|
|
@@ -160,7 +163,7 @@ GanttChartMonth.prototype.pageTo = function(dir = 'next') {
|
|
|
}
|
|
|
this.endAt = moment(this.startAt).add(this.daysCount, 'days')
|
|
|
this.pageToCallback({ dir: dir, startAt: this.startAt.format('YYYY-MM-DD'), endAt: this.endAt.format('YYYY-MM-DD') })
|
|
|
- console.log('已翻页', this.startAt.format('YYYY-MM-DD'), this.endAt.format('YYYY-MM-DD'), this.offsetDis)
|
|
|
+ // console.log('已翻页', this.startAt.format('YYYY-MM-DD'), this.endAt.format('YYYY-MM-DD'), this.offsetDis)
|
|
|
// offsetDis = viewWidth;
|
|
|
// this.forceRefreshGraph();
|
|
|
}
|
|
@@ -185,14 +188,14 @@ GanttChartMonth.prototype.doDrag = function(sEvent, eEvent) {
|
|
|
// console.log('draging...',tempDis, this.offsetDis, dis)
|
|
|
if (this.offsetDis <= -20) {
|
|
|
// 向前滑动,向前翻页
|
|
|
- console.log('此处应该向前翻页', this.startAt.format('YYYY-MM-DD'), this.endAt.format('YYYY-MM-DD'), this.offsetDis)
|
|
|
+ // console.log('此处应该向前翻页', this.startAt.format('YYYY-MM-DD'), this.endAt.format('YYYY-MM-DD'), this.offsetDis)
|
|
|
this.offsetDis = this.viewWidth
|
|
|
this.pageTo('prev')
|
|
|
}
|
|
|
if (this.offsetDis - 20 >= this.viewWidth * 2.2) {
|
|
|
//cWidth - viewWidth) {
|
|
|
// 向后滑动,向后翻页
|
|
|
- console.log('此处应该向后翻页', this.startAt.format('YYYY-MM-DD'), this.endAt.format('YYYY-MM-DD'), this.offsetDis)
|
|
|
+ // console.log('此处应该向后翻页', this.startAt.format('YYYY-MM-DD'), this.endAt.format('YYYY-MM-DD'), this.offsetDis)
|
|
|
this.offsetDis = this.viewWidth
|
|
|
this.pageTo('next')
|
|
|
}
|
|
@@ -216,7 +219,7 @@ GanttChartMonth.prototype.initDragHandler = function() {
|
|
|
})
|
|
|
|
|
|
_canvas.addEventListener('mouseleave', (ev) => {
|
|
|
- console.log('leave...恢复')
|
|
|
+ // console.log('leave...恢复')
|
|
|
this.draging = false
|
|
|
this.endEvent = ev
|
|
|
})
|
|
@@ -258,12 +261,11 @@ GanttChartMonth.prototype.initCanvas = function() {
|
|
|
*/
|
|
|
|
|
|
GanttChartMonth.prototype.drawTimeZone = function() {
|
|
|
- console.log('时间段', this.startAt.format('YYYY-MM-DD'), this.endAt.format('YYYY-MM-DD'))
|
|
|
+ // console.log('时间段', this.startAt.format('YYYY-MM-DD'), this.endAt.format('YYYY-MM-DD'))
|
|
|
let start = moment(this.startAt)
|
|
|
let timeGroup = this.gCanvas.addGroup()
|
|
|
this.timeGroupEl = timeGroup
|
|
|
timeGroup._tname = 'TimeGroup'
|
|
|
- let startSecond = moment(this.startAt)
|
|
|
|
|
|
// 顶部底部边框
|
|
|
timeGroup.addShape('rect', {
|
|
@@ -306,7 +308,7 @@ GanttChartMonth.prototype.drawTimeZone = function() {
|
|
|
let isToday = nowAtStr == tempAt.format('YYYY-MM-DD')
|
|
|
if (isToday) {
|
|
|
//是今日,需要画线
|
|
|
- console.log('绘制 当日刻度线')
|
|
|
+ // console.log('绘制 当日刻度线')
|
|
|
this.todayTimeLineOffsetPos = this.dayStep * i
|
|
|
timeGroup.addShape('rect', {
|
|
|
attrs: {
|
|
@@ -333,6 +335,7 @@ GanttChartMonth.prototype.drawTimeZone = function() {
|
|
|
}
|
|
|
|
|
|
// console.error('time:',tempAt.format('YYYY-MM'),', dayscount:', daysCount)
|
|
|
+ // debugger
|
|
|
timeGroup.addShape('text', {
|
|
|
attrs: {
|
|
|
x: this.dayStep * daysCount + 180 - 70,
|
|
@@ -432,15 +435,16 @@ GanttChartMonth.prototype.postDrawTasksCallBack = function() {
|
|
|
let year = this.startAt.format('YYYY')
|
|
|
for (let i = 1; i < 19; i++) {
|
|
|
let tempAt = moment(this.startAt)
|
|
|
- tempAt.add(i - 1, 'months')
|
|
|
- // console.log('tempAt:', tempAt.format('YYYY-MM-DD'))
|
|
|
+ tempAt.add(i - 1, 'months')
|
|
|
// 当月天数
|
|
|
let daysCount = tempAt.dayOfYear()
|
|
|
if (tempAt.format('YYYY') != year) {
|
|
|
daysCount = parseInt(daysCount) + 365
|
|
|
}
|
|
|
+ daysCount = daysCount - 1
|
|
|
// 当月天数
|
|
|
// let daysCount = moment(`${year}-${i}`).dayOfYear()
|
|
|
+ // console.log('timeline X:', this.dayStep * daysCount, daysCount, tempAt.format('YYYY-MM-DD'))
|
|
|
let lineEl = this.timeGroupEl.addShape('rect', {
|
|
|
attrs: {
|
|
|
x: this.dayStep * daysCount,
|
|
@@ -583,11 +587,24 @@ GanttChartMonth.prototype.drawTasks = function() {
|
|
|
*
|
|
|
*/
|
|
|
GanttChartMonth.prototype.calRectPos = function(taskItem) {
|
|
|
- let duraStartAt = new Date(taskItem.startDate) - new Date(this.startAt.format('YYYY-MM-DD'))
|
|
|
+ // if(taskItem.id == 2833812){
|
|
|
+ // taskItem.startDate = '2020-09-01 00:00:00'
|
|
|
+ // taskItem.endDate = '2020-09-30 00:00:00'
|
|
|
+ // }
|
|
|
+ // console.log('start=====', _moment(taskItem.startDate).format('YYYY-MM-DD HH:mm:ss'), '---', _moment(taskItem.endDate).format('YYYY-MM-DD HH:mm:ss') )
|
|
|
+ // debugger
|
|
|
+ let s1 = new Date(taskItem.startDate)
|
|
|
+ let s2 = new Date(this.startAt.format('YYYY-MM-DD 00:00:00'))
|
|
|
+ let duraStartAt = new Date(taskItem.startDate) - new Date(this.startAt.format('YYYY-MM-DD 00:00:00'))
|
|
|
+ // duraStartAt=duraStartAt-3600*24*1000
|
|
|
+ // console.log('s1:', s1, ',s2:',s2, ',s1-s2:',s1-s2,',days:', (duraStartAt/(24*3600*1000)), ',offset:', duraStartAt / 1000 * this.timePerPix)
|
|
|
+ // duraStartAt = duraStartAt - (24*3600*3)
|
|
|
let secondsStartAt = duraStartAt / 1000
|
|
|
|
|
|
let duraEndAt = new Date(taskItem.endDate) - new Date(taskItem.startDate)
|
|
|
let secondsEndAt = duraEndAt / 1000
|
|
|
+ // let secondsEndAt = (duraEndAt - 3600*24*1000) / 1000
|
|
|
+ // console.log('secondsEndAt', secondsEndAt)
|
|
|
let width = secondsEndAt * this.timePerPix
|
|
|
if (width < this.minTaskRectWidth) {
|
|
|
width = this.minTaskRectWidth
|