123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438 |
- import moment from 'moment';
- export function GanttChart(options) {
-
- this.tasks = options.tasks || [];
-
- this.gCanvas = null;
-
- this.viewWidth = options['viewWidth'] || 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 = 38;
-
- this.taskRowHeight = 16;
-
- this.rowSpanDis = 22;
-
- this.daysCount = options['daysCount'] || 60;
-
- this.graphTopDis = 20
-
-
- this.timePerPix = this.cWidth/this.daysCount/24/3600
-
- this.startAt = moment().subtract(this.daysCount / 3, 'days');
- this.endAt = moment(this.startAt).add(this.daysCount, 'days');
- this.graphDiv = document.getElementById(options['chartContainer']);
-
- this.graphGroup = null;
-
- this.lastDragEv = null;
-
- this.callback = options.callback || null;
- }
- GanttChart.prototype.changeTasks = function(_tasks){
- this.tasks = _tasks
- }
- GanttChart.prototype.toggle = function(index) {
- if (this.tasks[index].open) {
- this.tasks[index].open = false;
- } else {
- this.tasks[index].open = true;
- }
- this.processData();
- this.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) {
-
- lastTopTask = this.tasks[i - 1];
- currentTopTask.renderOptions.startY = lastTopTask.renderOptions.endY + 20;
- } else {
-
- currentTopTask.renderOptions.startY = this.graphTopDis;
- }
- if (currentTopTask.open) {
- currentTopTask.renderOptions.endY =
- currentTopTask.renderOptions.startY + this.rowSpanDis + 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 = 2*this.viewWidth
- }
- this.endAt = moment(this.startAt).add(this.daysCount, 'days');
- console.log('已翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'), this.offsetDis);
-
- this.forceRefreshGraph();
- }
- let lastClickAt = null;
- 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
-
- this.offsetDis = this.offsetDis - dis / 2;
-
- if (this.offsetDis <= -20) {
-
- 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 ){
-
- console.log('此处应该向后翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'),this.offsetDis);
- this.offsetDis = this.viewWidth;
- this.pageTo('next');
- }
- this.graphDiv.scrollLeft = this.offsetDis;
- }
- GanttChart.prototype.initDragHandler = function() {
- this.graphDiv.scrollLeft = this.offsetDis;
- let _canvas = document.querySelector('#ganttContainer>canvas');
- _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;
- }
- });
- _canvas.addEventListener('mouseleave', (ev) => {
- console.log('leave...恢复')
- this.draging = false;
- this.endEvent = ev;
- });
- }
- GanttChart.prototype.initCanvas = function() {
- this.gCanvas = new G.Canvas({
- container: 'ganttContainer',
- width: this.cWidth,
- 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: '#8D9399',
- },
- });
- 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: '#8D9399',
- },
- });
- 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: '#8D9399',
- },
- });
- let startSecond = moment(this.startAt);
-
- for (let i = 0; i < this.daysCount; i++) {
- let timeText = startSecond.add(1, 'days').format('DD');
- timeGroup.addShape('text', {
- attrs: {
- x: 40 * i,
- y: 40,
- fontSize: 10,
- text: timeText,
- lineDash: [10, 10],
- fill: '#8D9399',
- },
- });
- }
- }
- GanttChart.prototype.handleClick = function(task, flag, ev) {
-
- if(flag == 'enter'){
-
-
-
-
-
-
-
- console.log('show:', task);
- } else if (flag === 'leave'){
-
- console.log('hide:', task);
- } else {
- this.callback(task);
- console.log('click:', 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);
-
- let rectEl = taskPGroup.addShape('rect', {
- attrs: {
- x: pos.x,
- y: topTask.renderOptions.startY + (index* (this.taskRowHeight + this.rowSpanDis)),
- 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);
- });
- rectEl.on('click', (ev) => {
- this.handleClick(ev.target, 'click', ev);
- });
- }
- });
- });
- taskGroup.show();
- } else {
- if (topTask.gGroup) {
-
- topTask.gGroup = null;
- }
- }
- });
- }
- 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(taskItem.startDate);
- let secondsEndAt = duraEndAt/1000
- return {
- x: secondsStartAt * this.timePerPix,
- y: 0,
- width: secondsEndAt * this.timePerPix,
- height: 0,
- };
- }
- GanttChart.prototype.main = function() {
- this.initDrawingReady();
- }
|