Browse Source

甘特图调整

fujunwen 4 years ago
parent
commit
6d4fb84bb2

+ 4 - 4
src/router/index.js

@@ -5,10 +5,10 @@ import { query } from '@/utils/query'
 
 Vue.use(VueRouter)
 const routes = [
-    // {
-    //     path: '/',
-    //     redirect: '/home/overview',        // 只有区域,及区域以上用户才能进入总部首页这一套
-    // },
+    {
+        path: '/',
+        redirect: '/home/overview',        // 只有区域,及区域以上用户才能进入总部首页这一套
+    },
     {
         path: '/404',
         component: () => import('../components/404'),

+ 4 - 4
src/utils/ganttChart/GanttChart_day.js

@@ -382,13 +382,13 @@ GanttChartDay.prototype.handleClick = function(task, flag, ev) {
  */
 GanttChartDay.prototype.statusColor =function(task) {
   switch (task.statusType) {
-    case 1:
+    case 0:
       return ['#e7e9ea', '#c3c7cb'];
-    case 2:
+    case 1:
       return ['#dee9fe', '#5b8ff9'];
-    case 3:
+    case 2:
       return ['#fbce99', '#f58300'];
-    case 4:
+    case 3:
       return ['#fbb8b5', '#f54e45'];
     default:
       return ['#fbb8b5', '#f54e45'];

+ 36 - 21
src/utils/ganttChart/GanttChart_month.js

@@ -27,8 +27,6 @@ export function GanttChartMonth(options) {
   this.offsetDis = (options['viewWidth']/2) || 800;
   // 拖动定时器
   this.dragTimer = null;
-  // 每天的间隔宽度
-  this.dayStep = parseInt(this.cWidth/365);
   // 分组标题高度
   this.groupTitleHeight = 18;
   // 任务矩形高度
@@ -36,7 +34,9 @@ export function GanttChartMonth(options) {
   // 每行任务的纵向间距
   this.rowSpanDis = 22;
   // 总天数
-  this.daysCount = options['daysCount'] || 365;
+  this.daysCount = options['daysCount'] || 365*1.5;
+  // 每天的间隔宽度
+  this.dayStep = parseInt(this.cWidth/this.daysCount);
   // 任务图距离顶部高度
   this.graphTopDis = 60
   // 任务矩形最小宽度
@@ -46,7 +46,7 @@ export function GanttChartMonth(options) {
   this.timePerPix = this.cWidth/this.daysCount/24/3600
   // 当前视图开始时间,向前推N天
   this.startAt = moment().startOf('year')
-  this.endAt = moment().endOf('year')
+  this.endAt = moment().endOf('year').add(6, 'months')
   this.graphDiv = document.getElementById(options['chartParentContainer']);
   this.chartContainer = options['chartContainer']
   // 图形容器组
@@ -149,18 +149,18 @@ GanttChartMonth.prototype.pageTo = function(dir = 'next') {
   this.endEvent = null;
   if (dir == 'next') {
     // 向后翻页`
-    this.startAt = this.startAt.add(this.daysCount, 'days');
+    this.startAt = this.startAt.add(366, 'days');
     this.offsetDis = 0
   } else {
     // 向前翻页
-    this.startAt = this.startAt.subtract(this.daysCount, 'days');
-    this.offsetDis = 2*this.viewWidth
+    this.startAt = this.startAt.subtract(365, 'days');
+    this.offsetDis = 2380 //2*this.viewWidth
   }
   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);
   // offsetDis = viewWidth;
-  this.forceRefreshGraph();
+  // this.forceRefreshGraph();
 }
 // 上次点击时间,用于滚动时误触停止
 let lastClickAt = null;
@@ -278,14 +278,21 @@ GanttChartMonth.prototype.drawTimeZone = function() {
   let nowAtStr = moment().format('YYYY-MM-DD')
   let year = this.startAt.format('YYYY')
   this.timeZoneLineEls = []
-  for (let i = 1; i < 13; i++) {
-    let tempAt = moment(`${year}-${i}`)
+  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'))
+    // 当月天数
+    let daysCount = tempAt.dayOfYear()
+    if(tempAt.format('YYYY') != year){
+      daysCount = parseInt(daysCount) + 365
+    }    
     let timeText = tempAt.format('MM');
-    if(timeText == '01'){
+    if(timeText == '01'){      
       // 第一天,顶部需要绘制年月
       timeGroup.addShape('text', {
         attrs: {
-          x: this.dayStep * i,
+          x: this.dayStep * daysCount + 100,
           y: 20,
           fontSize: 12,
           text: tempAt.format('YYYY'),
@@ -324,11 +331,11 @@ GanttChartMonth.prototype.drawTimeZone = function() {
       // this.todayTimeLineEl.setZIndex(3)
     }
 
-    // 当月天数
-    let daysCount = moment(`${year}-${i}`).dayOfYear()
+
+    // console.error('time:',tempAt.format('YYYY-MM'),', dayscount:', daysCount)
     timeGroup.addShape('text', {
       attrs: {
-        x: this.dayStep * daysCount + 180,
+        x: this.dayStep * daysCount + 180 - 70,
         y: 40,
         fontSize: 10,
         text: timeText,
@@ -369,13 +376,13 @@ GanttChartMonth.prototype.handleClick = function(task, flag, ev) {
  */
 GanttChartMonth.prototype.statusColor =function(task) {
   switch (task.statusType) {
-    case 1:
+    case 0:
       return ['#e7e9ea', '#c3c7cb'];
-    case 2:
+    case 1:
       return ['#dee9fe', '#5b8ff9'];
-    case 3:
+    case 2:
       return ['#fbce99', '#f58300'];
-    case 4:
+    case 3:
       return ['#fbb8b5', '#f54e45'];
     default:
       return ['#fbb8b5', '#f54e45'];
@@ -425,9 +432,17 @@ GanttChartMonth.prototype.postDrawTasksCallBack = function(){
 
   if(true){
     let year = this.startAt.format('YYYY')
-    for (let i = 1; i < 13; i++) {
+    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'))
+      // 当月天数
+      let daysCount = tempAt.dayOfYear()
+      if(tempAt.format('YYYY') != year){
+        daysCount = parseInt(daysCount) + 365
+      }          
       // 当月天数
-    let daysCount = moment(`${year}-${i}`).dayOfYear()
+      // let daysCount = moment(`${year}-${i}`).dayOfYear()
       let lineEl = this.timeGroupEl.addShape('rect', {
         attrs: {
           x: this.dayStep * daysCount,

+ 5 - 5
src/views/analysis/GanttChart.vue

@@ -384,7 +384,7 @@ export default {
               viewWidth: width,
               cWidth: 3 * width,
               tasks: taskData,
-              daysCount: this.timeType === 'month'? 365 : parseInt((3 * width) / 40),
+              daysCount: this.timeType === 'month'? (365*1.5) : parseInt((3 * width) / 40),
               callback: this.showDialog,
               pageToCallback: (data)=>{
                 const { startAt, endAt } = data;
@@ -465,16 +465,16 @@ export default {
           } = data;
           let color;
           switch (statusType) {
-            case 1:
+            case 0:
               color = ['#c3c7cb', '#e7e9ea'];
               break
-            case 2:
+            case 1:
               color = ['#5b8ff9', '#5b8ff933'];
               break
-            case 3:
+            case 2:
               color = ['#f58300', '#fbce99'];
               break
-            case 4:
+            case 3:
               color = ['#f54e45', '#fbb8b5'];
               break
             default: