wanda-bm-guide/src/utils/ganttChart/GanttChart.js

import moment from 'moment';
// import './g.js';
/**
 * 数据定义区域
 *
 */
/**
 * 甘特图
 * @param {} options 
 */
export function GanttChart(options) {
  // 任务列表
  this.tasks = [];
  // AntVG Canvas
  this.gCanvas = null;
  // 视口宽度 800，可视区域
  this.viewWidth = options['viewWidth'] || 800;
  // 物理画布宽度 800
  this.cWidth = options['cWidth'] || 2400;
  this.cHeight = options['cHeight'] || 600;
  // 画布偏移位置
  this.startPos = 0;
  // 是否拖动中
  this.draging = false;
  // 开始拖动事件
  this.startEvent = null;
  // 结束拖动事件
  this.endEvent = null;
  // 拖动过程事件
  this.dragingEvent = null;
  // 拖动偏移量
  this.offsetDis = options['viewWidth'] || 800;
  // 拖动定时器
  this.dragTimer = null;
  // 每天的间隔宽度
  this.dayStep = 40;
  // 分组标题高度
  this.groupTitleHeight = 30;
  // 任务矩形高度
  this.taskRowHeight = 16;
  // 总天数
  this.daysCount = options['daysCount'] || 60;
  
  // 每像素代表的小时数
  this.timePerPix = this.cWidth/this.daysCount/24/3600
  // 当前视图开始时间,向前推N天
  this.startAt = moment().subtract(this.daysCount / 3, 'days');
  this.endAt = moment(this.startAt).add(this.daysCount, 'days');
  this.graphDiv = document.getElementById('graphDiv');
  // 图形容器组
  this.graphGroup = null;
  // 上一次拖动的事件
  this.lastDragEv = null;
}


/**
 * 设置数据
 * @param {*} _tasks 
 */
GanttChart.prototype.changeTasks = function(_tasks){
  this.tasks = _tasks
}

/**
 * 打开关闭分组
 */

GanttChart.prototype.toggle = function(no) {
  if (tasks[no].open) {
    tasks[no].open = false;
  } else {
    tasks[no].open = true;
  }
  processData();
  drawTasks();
}

/**
 * 预处理数据
 */
GanttChart.prototype.processData = function() {
  for (let i = 0; i < this.tasks.length; i++) {
    let currentTopTask = this.tasks[i];
    let lastTopTask = null;
    currentTopTask.renderOptions = {};
    if (i != 0) {
      // 非0个，要补上前面的数据
      lastTopTask = tasks[i - 1];
      currentTopTask.renderOptions.startY = lastTopTask.renderOptions.endY + 20;
    } else {
      // 第一个
      currentTopTask.renderOptions.startY = 120;
    }
    if (currentTopTask.open) {
      currentTopTask.renderOptions.endY =
        currentTopTask.renderOptions.startY + this.groupTitleHeight + currentTopTask.dataList.length * this.taskRowHeight;
    } else {
      currentTopTask.renderOptions.endY = currentTopTask.renderOptions.startY + this.groupTitleHeight;
    }
  }
}

/**
 * 强制清空图像，重绘
 */
GanttChart.prototype.forceRefreshGraph = function() {
  this.tasks.forEach((topTask) => {
    topTask.gGroup = null;
  });
  this.gCanvas.destroy();
  this.initDrawingReady();
}

/**
 * 准备绘制，用于初始化和强制刷新
 */
GanttChart.prototype.initDrawingReady = function() {
  this.initCanvas();
  this.initDragHandler();
  this.drawTimeZone();
  this.processData();
  this.drawTasks();
  this.graphGroup = null
}

/**
 * 翻页
 */
GanttChart.prototype.pageTo = function(dir = 'next') {
  if (dir == 'next') {
    // 向后翻页`
    this.startAt = this.startAt.add(this.daysCount, 'days');
    this.offsetDis = 0
  } else {
    // 向前翻页
    this.startAt = this.startAt.subtract(this.daysCount, 'days');
    this.offsetDis = 1800 //2*viewWidth
  }
  this.endAt = moment(this.startAt).add(this.daysCount, 'days');
  console.log('已翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'));
  // offsetDis = viewWidth;
  this.forceRefreshGraph();
}
// 上次点击时间，用于滚动时误触停止
let lastClickAt = null;
/**
 * 执行拖动
 * 改变graphDiv 滚动距离
 * 到达边界距离后，刷新页面
 */
GanttChart.prototype.doDrag = function(sEvent, eEvent) {
  if (sEvent == null) {
    sEvent = this.startEvent;
  }

  let sPos = sEvent.clientX;
  let cPos = eEvent.clientX;
  // 滚动距离
  let dis = cPos - sPos;
  let tempDis = this.offsetDis
  // console.log('offsetDis before:', this.offsetDis, dis)
  this.offsetDis = this.offsetDis - dis / 2;
  // 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 = this.viewWidth;
    this.pageTo('prev');
  }
  if (this.offsetDis - 20 >= 1800 ){ //cWidth - viewWidth) {
    // 向后滑动，向后翻页
    console.log('此处应该向后翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'));
    this.offsetDis = this.viewWidth;
    this.pageTo('next');
  }        
  this.graphDiv.scrollLeft = this.offsetDis;
}

/**
 * 初始化抓取拖动事件
 */

GanttChart.prototype.initDragHandler = function() {
  this.graphDiv.scrollLeft = this.offsetDis;
  let _canvas = document.getElementsByTagName('canvas')[0];
  _canvas.addEventListener('mousedown', (ev) => {
    this.draging = true;
    this.startEvent = ev;
    this.dragingEvent = null;
    this.endEvent = null;
    this.lastClickAt = new Date();
    this.lastClickAt = ev;
    this.lastDragEv = ev;
  });

  _canvas.addEventListener('mouseup', (ev) => {
    this.draging = false;
    this.endEvent = ev;
  });

  _canvas.addEventListener('mousemove', (ev) => {
    if (this.draging) {
      if (new Date() - this.lastClickAt < 20) {
        return false;
      }
      this.dragingEvent = ev;
      this.doDrag(this.lastDragEv, ev);
      this.lastDragEv = ev;
    }
  });
}
/**
 * 初始化画布
 *
 */

GanttChart.prototype.initCanvas = function() {
  this.gCanvas = new G.Canvas({
    container: 'ganttContainer',
    width: 2400,
    height: 800,
  });
}

/**
 * 绘制时间区域
 */

GanttChart.prototype.drawTimeZone = function() {
  console.log('时间段', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'));
  let start = moment(this.startAt);
  let timeGroup = this.gCanvas.addGroup();
  timeGroup._tname = 'TimeGroup';
  // 绘制第一级
  timeGroup.addShape('text', {
    attrs: {
      x: 20,
      y: 20,
      fontSize: 12,
      text: start.format('YYYY-MM'),
      lineDash: [10, 10],
      fill: 'red',
    },
  });
  timeGroup.addShape('text', {
    attrs: {
      x: 20 + this.viewWidth,
      y: 20,
      fontSize: 12,
      text: start.add(this.daysCount / 3, 'days').format('YYYY-MM'),
      lineDash: [10, 10],
      fill: 'red',
    },
  });
  timeGroup.addShape('text', {
    attrs: {
      x: 20 + this.viewWidth * 2,
      y: 20,
      fontSize: 12,
      text: start.add(this.daysCount / 3, 'days').format('YYYY-MM'),
      lineDash: [10, 10],
      fill: 'red',
    },
  });
  let startSecond = moment(this.startAt);
  // 绘制第二级
  for (let i = 0; i < this.daysCount; i++) {
    let timeText = startSecond.add(1, 'days').format('MM-DD');
    timeGroup.addShape('text', {
      attrs: {
        x: 40 * i,
        y: 40,
        fontSize: 10,
        text: timeText,
        lineDash: [10, 10],
        fill: 'red',
      },
    });
  }
}

/**
 * 处理点击
 */
GanttChart.prototype.handleClick = function(task, flag, ev) {
  let detailDiv = document.getElementById('detailDiv')
  if(flag == 'enter'){
    detailDiv.style.display = 'block'
    detailDiv.style.left = ev.clientX+'px';
    detailDiv.style.top = ev.clientY+'px';
    document.getElementById('detailTaskName').textContent = task._pdata.description
    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);
  }else{
    detailDiv.style.display = 'none'
    console.log('hide:', task);
  }
}


/**
 * 根据任务状态区分颜色
 * 
 */
GanttChart.prototype.statusColor =function(task) {
  switch (task.status) {
    case '按时完成':
      return 'aqua';
      break;
    case '计划批准':
      return '#ff9800';
      break;
    case '已完成':
      return '#19b720';
      break;
    default:
      break;
  }
}

/**
 * 判断任务是否在视图内
 * 
 */ 
GanttChart.prototype.isInView = function(task) {
  let isLessThanEndAt = (task.endDate <= this.startAt.format('YYYY-MM-DD'))
  let isGreaterThanStartAt = task.startDate >= this.endAt.format('YYYY-MM-DD')
  return !(isLessThanEndAt || isGreaterThanStartAt)
}

/**
 * 分组绘制任务块
 *
 */

GanttChart.prototype.drawTasks = function() {
  if (this.graphGroup) {
    this.graphGroup.clear();
  } else {
    this.graphGroup = this.gCanvas.addGroup();
    this.graphGroup._tname = 'graphGroup';
  }
  this.tasks.forEach((topTask, topIndex) => {
    if (topTask.open) {
      let taskGroup = null;
      taskGroup = this.graphGroup.addGroup();
      taskGroup._tname = 'TaskGroup_' + topTask.id;
      topTask.gGroup = taskGroup;            
      topTask.dataList.forEach((taskP, index) => {                            
        // 在视图中才显示
        let taskPGroup = taskGroup.addGroup();
        taskGroup.addGroup(taskPGroup);
        taskP.tasks.forEach((_taskItem, _index) => {
          let _isInView = this.isInView(_taskItem)
          if(_isInView){
            let pos = this.calRectPos(_taskItem);
            // console.log('render rect:', _taskItem, pos, topTask.renderOptions.startY + index * taskRowHeight);
            let rectEl = taskPGroup.addShape('rect', {
              attrs: {
                x: pos.x,
                y: topTask.renderOptions.startY + (index* this.taskRowHeight),
                width: pos.width,
                height: this.taskRowHeight,
                fill: this.statusColor(_taskItem),
                stroke: 'black',
                radius: [2, 4],
              },
            });
            rectEl._pdata = _taskItem;
            rectEl.on('mouseover', (ev) => {
              this.handleClick(ev.target, 'enter', ev);
            });
            rectEl.on('mouseleave', (ev) => {
              this.handleClick(ev.target, 'leave', ev);
            });
          }
        });
      });

      taskGroup.show();
    } else {
      if (topTask.gGroup) {
        // topTask.gGroup.hide()
        topTask.gGroup = null;
      }
    }
  });
}

/**
 * 根据 Task 计算矩形位置
 *
 */
GanttChart.prototype.calRectPos = function(taskItem) {
  let duraStartAt = new Date(taskItem.startDate) - new Date(this.startAt.format('YYYY-MM-DD'));
  let secondsStartAt = duraStartAt/1000

  let duraEndAt = new Date(taskItem.endDate) - new Date(this.startAt.format('YYYY-MM-DD'));        
  let secondsEndAt = duraEndAt/1000
  return {
    x: secondsStartAt * this.timePerPix,
    y: 0,
    width: secondsEndAt * this.timePerPix,
    height: 0,
  };
}

/**
 * 主函数
 *
 */

GanttChart.prototype.main = function() {  
  this.initDrawingReady();
}