Sfoglia il codice sorgente

修复甘特图任务起始结束时间不准问题

fujunwen 4 anni fa
parent
commit
8af2092bd6

+ 21 - 15
src/utils/ganttChart/GanttChart_day.js

@@ -31,8 +31,6 @@ export function GanttChartDay(options) {
     this.offsetDis = options['viewWidth'] || 800
     // 拖动定时器
     this.dragTimer = null
-    // 每天的间隔宽度
-    this.dayStep = 40
     // 分组标题高度
     this.groupTitleHeight = 18
     // 任务矩形高度
@@ -45,8 +43,11 @@ export function GanttChartDay(options) {
     this.graphTopDis = 60
     // 任务矩形最小宽度
     this.minTaskRectWidth = 5
-    // 每像素代表的小时数
-    this.timePerPix = this.cWidth / this.daysCount / 24 / 3600
+    // 每秒数代表的像素
+    this.timePerPix = this.cWidth / (this.daysCount * 24 * 3600)
+    // 每天的间隔宽度
+    this.dayStep = this.timePerPix*3600*24
+    // this.dayStep = 40
     // 当前视图开始时间,向前推N天
     this.startAt = moment().subtract(this.daysCount / 3, 'days')
     this.endAt = moment(this.startAt).add(this.daysCount, 'days')
@@ -157,7 +158,7 @@ GanttChartDay.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()
 }
@@ -182,14 +183,14 @@ GanttChartDay.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 >= 2964) {
         //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')
     }
@@ -230,7 +231,7 @@ GanttChartDay.prototype.initDragHandler = function() {
         }
     })
     _canvas.addEventListener('mouseleave', (ev) => {
-        console.log('leave...恢复')
+        // console.log('leave...恢复')
         this.draging = false
         this.endEvent = ev
     })
@@ -255,7 +256,7 @@ GanttChartDay.prototype.initCanvas = function() {
  */
 
 GanttChartDay.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
@@ -314,7 +315,7 @@ GanttChartDay.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: {
@@ -365,13 +366,13 @@ GanttChartDay.prototype.handleClick = function(task, flag, ev) {
         // document.getElementById('detailTaskStatus').textContent = task._pdata.status
         // document.getElementById('detailTaskStartDate').textContent = task._pdata.startDate
         // document.getElementById('detailTaskEndDate').textContent = task._pdata.endDate
-        console.log('show:', task)
+        // console.log('show:', task)
     } else if (flag === 'leave') {
         // detailDiv.style.display = 'none'
-        console.log('hide:', task)
+        // console.log('hide:', task)
     } else {
         this.callback(task)
-        console.log('click:', task)
+        // console.log('click:', task)
     }
 }
 
@@ -434,7 +435,7 @@ GanttChartDay.prototype.postDrawTasksCallBack = function() {
         for (let i = 0; i < this.daysCount; i++) {
             let lineEl = this.timeGroupEl.addShape('rect', {
                 attrs: {
-                    x: this.dayStep * i - 10,
+                    x: this.dayStep * i,
                     y: 20,
                     width: 1,
                     height: this.cHeight,
@@ -574,7 +575,12 @@ GanttChartDay.prototype.drawTasks = function() {
  *
  */
 GanttChartDay.prototype.calRectPos = function(taskItem) {
-    let duraStartAt = new Date(taskItem.startDate) - new Date(this.startAt.format('YYYY-MM-DD'))
+    // if(taskItem.id == 2833812){
+    // if(taskItem.id == 2829099){
+    //     taskItem.startDate = '2020-07-24 00:00:00'
+    //     taskItem.endDate = '2020-07-30 00:00:00'
+    // }
+    let duraStartAt = new Date(taskItem.startDate) - new Date(this.startAt.format('YYYY-MM-DD 00:00:00'))
     let secondsStartAt = duraStartAt / 1000
 
     let duraEndAt = new Date(taskItem.endDate) - new Date(taskItem.startDate)

+ 33 - 16
src/utils/ganttChart/GanttChart_month.js

@@ -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

File diff suppressed because it is too large
+ 23 - 2
src/views/analysis/GanttChart.vue