|
@@ -1,9 +1,5 @@
|
|
import moment from 'moment';
|
|
import moment from 'moment';
|
|
/**
|
|
/**
|
|
- * 数据定义区域
|
|
|
|
- *
|
|
|
|
- */
|
|
|
|
-/**
|
|
|
|
* 甘特图
|
|
* 甘特图
|
|
* @param {} options
|
|
* @param {} options
|
|
*/
|
|
*/
|
|
@@ -28,7 +24,7 @@ export function GanttChart(options) {
|
|
// 拖动过程事件
|
|
// 拖动过程事件
|
|
this.dragingEvent = null;
|
|
this.dragingEvent = null;
|
|
// 拖动偏移量
|
|
// 拖动偏移量
|
|
- this.offsetDis = options['viewWidth'] || 800;
|
|
|
|
|
|
+ this.offsetDis = (options['viewWidth']/2) || 800;
|
|
// 拖动定时器
|
|
// 拖动定时器
|
|
this.dragTimer = null;
|
|
this.dragTimer = null;
|
|
// 每天的间隔宽度
|
|
// 每天的间隔宽度
|
|
@@ -42,20 +38,21 @@ export function GanttChart(options) {
|
|
// 总天数
|
|
// 总天数
|
|
this.daysCount = options['daysCount'] || 60;
|
|
this.daysCount = options['daysCount'] || 60;
|
|
// 任务图距离顶部高度
|
|
// 任务图距离顶部高度
|
|
- this.graphTopDis = 20
|
|
|
|
|
|
+ this.graphTopDis = 40
|
|
|
|
|
|
// 每像素代表的小时数
|
|
// 每像素代表的小时数
|
|
this.timePerPix = this.cWidth/this.daysCount/24/3600
|
|
this.timePerPix = this.cWidth/this.daysCount/24/3600
|
|
// 当前视图开始时间,向前推N天
|
|
// 当前视图开始时间,向前推N天
|
|
this.startAt = moment().subtract(this.daysCount / 3, 'days');
|
|
this.startAt = moment().subtract(this.daysCount / 3, 'days');
|
|
this.endAt = moment(this.startAt).add(this.daysCount, 'days');
|
|
this.endAt = moment(this.startAt).add(this.daysCount, 'days');
|
|
- this.graphDiv = document.getElementById(options['chartContainer']);
|
|
|
|
|
|
+ this.graphDiv = document.getElementById(options['chartParentContainer']);
|
|
|
|
+ this.chartContainer = options['chartContainer']
|
|
// 图形容器组
|
|
// 图形容器组
|
|
this.graphGroup = null;
|
|
this.graphGroup = null;
|
|
// 上一次拖动的事件
|
|
// 上一次拖动的事件
|
|
this.lastDragEv = null;
|
|
this.lastDragEv = null;
|
|
- // 回调事件
|
|
|
|
- this.callback = options.callback || null;
|
|
|
|
|
|
+ // 当日刻度线
|
|
|
|
+ this.todayTimeLineEl = null;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -113,6 +110,7 @@ GanttChart.prototype.forceRefreshGraph = function() {
|
|
this.tasks.forEach((topTask) => {
|
|
this.tasks.forEach((topTask) => {
|
|
topTask.gGroup = null;
|
|
topTask.gGroup = null;
|
|
});
|
|
});
|
|
|
|
+ this.todayTimeLineEl = null
|
|
this.gCanvas.destroy();
|
|
this.gCanvas.destroy();
|
|
this.initDrawingReady();
|
|
this.initDrawingReady();
|
|
}
|
|
}
|
|
@@ -122,17 +120,21 @@ GanttChart.prototype.forceRefreshGraph = function() {
|
|
*/
|
|
*/
|
|
GanttChart.prototype.initDrawingReady = function() {
|
|
GanttChart.prototype.initDrawingReady = function() {
|
|
this.initCanvas();
|
|
this.initCanvas();
|
|
- this.initDragHandler();
|
|
|
|
- this.drawTimeZone();
|
|
|
|
- this.processData();
|
|
|
|
- this.drawTasks();
|
|
|
|
- this.graphGroup = null
|
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.initDragHandler();
|
|
|
|
+ this.drawTimeZone();
|
|
|
|
+ this.processData();
|
|
|
|
+ this.drawTasks();
|
|
|
|
+ this.graphGroup = null
|
|
|
|
+ }, 200);
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
/**
|
|
* 翻页
|
|
* 翻页
|
|
*/
|
|
*/
|
|
GanttChart.prototype.pageTo = function(dir = 'next') {
|
|
GanttChart.prototype.pageTo = function(dir = 'next') {
|
|
|
|
+ this.draging = false;
|
|
|
|
+ this.endEvent = null;
|
|
if (dir == 'next') {
|
|
if (dir == 'next') {
|
|
// 向后翻页`
|
|
// 向后翻页`
|
|
this.startAt = this.startAt.add(this.daysCount, 'days');
|
|
this.startAt = this.startAt.add(this.daysCount, 'days');
|
|
@@ -154,7 +156,7 @@ let lastClickAt = null;
|
|
* 改变graphDiv 滚动距离
|
|
* 改变graphDiv 滚动距离
|
|
* 到达边界距离后,刷新页面
|
|
* 到达边界距离后,刷新页面
|
|
*/
|
|
*/
|
|
-GanttChart.prototype.doDrag = function(sEvent, eEvent) {
|
|
|
|
|
|
+GanttChart.prototype.doDrag = function(sEvent, eEvent) {
|
|
if (sEvent == null) {
|
|
if (sEvent == null) {
|
|
sEvent = this.startEvent;
|
|
sEvent = this.startEvent;
|
|
}
|
|
}
|
|
@@ -173,7 +175,7 @@ GanttChart.prototype.doDrag = function(sEvent, eEvent) {
|
|
this.offsetDis = this.viewWidth;
|
|
this.offsetDis = this.viewWidth;
|
|
this.pageTo('prev');
|
|
this.pageTo('prev');
|
|
}
|
|
}
|
|
- if (this.offsetDis - 20 >= 2964 ){ //cWidth - viewWidth) {
|
|
|
|
|
|
+ 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.offsetDis = this.viewWidth;
|
|
@@ -185,10 +187,9 @@ GanttChart.prototype.doDrag = function(sEvent, eEvent) {
|
|
/**
|
|
/**
|
|
* 初始化抓取拖动事件
|
|
* 初始化抓取拖动事件
|
|
*/
|
|
*/
|
|
-
|
|
|
|
GanttChart.prototype.initDragHandler = function() {
|
|
GanttChart.prototype.initDragHandler = function() {
|
|
this.graphDiv.scrollLeft = this.offsetDis;
|
|
this.graphDiv.scrollLeft = this.offsetDis;
|
|
- let _canvas = document.getElementsByTagName('canvas')[1];
|
|
|
|
|
|
+ let _canvas = this._canvas
|
|
_canvas.addEventListener('mousedown', (ev) => {
|
|
_canvas.addEventListener('mousedown', (ev) => {
|
|
this.draging = true;
|
|
this.draging = true;
|
|
this.startEvent = ev;
|
|
this.startEvent = ev;
|
|
@@ -199,6 +200,13 @@ GanttChart.prototype.initDragHandler = function() {
|
|
this.lastDragEv = ev;
|
|
this.lastDragEv = ev;
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+
|
|
|
|
+ _canvas.addEventListener('mouseleave', (ev) => {
|
|
|
|
+ console.log('leave...恢复')
|
|
|
|
+ this.draging = false;
|
|
|
|
+ this.endEvent = ev;
|
|
|
|
+ });
|
|
|
|
+
|
|
_canvas.addEventListener('mouseup', (ev) => {
|
|
_canvas.addEventListener('mouseup', (ev) => {
|
|
this.draging = false;
|
|
this.draging = false;
|
|
this.endEvent = ev;
|
|
this.endEvent = ev;
|
|
@@ -215,11 +223,6 @@ GanttChart.prototype.initDragHandler = function() {
|
|
this.lastDragEv = ev;
|
|
this.lastDragEv = ev;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
- _canvas.addEventListener('mouseleave', (ev) => {
|
|
|
|
- console.log('leave...恢复')
|
|
|
|
- this.draging = false;
|
|
|
|
- this.endEvent = ev;
|
|
|
|
- });
|
|
|
|
}
|
|
}
|
|
/**
|
|
/**
|
|
* 初始化画布
|
|
* 初始化画布
|
|
@@ -227,11 +230,13 @@ GanttChart.prototype.initDragHandler = function() {
|
|
*/
|
|
*/
|
|
|
|
|
|
GanttChart.prototype.initCanvas = function() {
|
|
GanttChart.prototype.initCanvas = function() {
|
|
|
|
+ console.error('初始化画布...')
|
|
this.gCanvas = new G.Canvas({
|
|
this.gCanvas = new G.Canvas({
|
|
- container: 'ganttContainer',
|
|
|
|
|
|
+ container: this.chartContainer,
|
|
width: this.cWidth,
|
|
width: this.cWidth,
|
|
- height: 800,
|
|
|
|
|
|
+ height: this.cHeight,
|
|
});
|
|
});
|
|
|
|
+ this._canvas = document.getElementsByTagName('canvas')[0];
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -242,45 +247,59 @@ GanttChart.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 start = moment(this.startAt);
|
|
let timeGroup = this.gCanvas.addGroup();
|
|
let timeGroup = this.gCanvas.addGroup();
|
|
|
|
+ this.timeGroupEl = timeGroup
|
|
timeGroup._tname = 'TimeGroup';
|
|
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', {
|
|
|
|
|
|
+ let startSecond = moment(this.startAt);
|
|
|
|
+
|
|
|
|
+ // 顶部底部边框
|
|
|
|
+ timeGroup.addShape('rect',{
|
|
attrs: {
|
|
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',
|
|
|
|
|
|
+ x: 0,
|
|
|
|
+ y: 0,
|
|
|
|
+ width: this.cWidth,
|
|
|
|
+ height: 40,
|
|
|
|
+ fill: '#dbcccc',
|
|
|
|
+ radius: [2, 4],
|
|
},
|
|
},
|
|
- });
|
|
|
|
- let startSecond = moment(this.startAt);
|
|
|
|
|
|
+ })
|
|
// 绘制第二级
|
|
// 绘制第二级
|
|
|
|
+ let nowAtStr = moment().format('YYYY-MM-DD')
|
|
for (let i = 0; i < this.daysCount; i++) {
|
|
for (let i = 0; i < this.daysCount; i++) {
|
|
- let timeText = startSecond.add(1, 'days').format('DD');
|
|
|
|
|
|
+ let tempAt = startSecond.add(1, 'days')
|
|
|
|
+ let timeText = tempAt.format('DD');
|
|
|
|
+ if(timeText == '01'){
|
|
|
|
+ // 第一天,顶部需要绘制年月
|
|
|
|
+ timeGroup.addShape('text', {
|
|
|
|
+ attrs: {
|
|
|
|
+ x: this.dayStep * i,
|
|
|
|
+ y: 20,
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ text: tempAt.format('YYYY-MM'),
|
|
|
|
+ lineDash: [10, 10],
|
|
|
|
+ fill: '#8D9399',
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ let isToday = nowAtStr == tempAt.format('YYYY-MM-DD')
|
|
|
|
+ if(isToday){
|
|
|
|
+ //是今日,需要画线
|
|
|
|
+ console.log('绘制 当日刻度线')
|
|
|
|
+ this.todayTimeLineOffsetPos = this.dayStep * i
|
|
|
|
+ timeGroup.addShape('rect',{
|
|
|
|
+ attrs: {
|
|
|
|
+ x: this.dayStep * i-10,
|
|
|
|
+ y: 25,
|
|
|
|
+ width: 30,
|
|
|
|
+ height: 16,
|
|
|
|
+ fill: '#0091FF',
|
|
|
|
+ radius: [2, 4],
|
|
|
|
+ },
|
|
|
|
+ })
|
|
|
|
+ }
|
|
timeGroup.addShape('text', {
|
|
timeGroup.addShape('text', {
|
|
attrs: {
|
|
attrs: {
|
|
- x: 40 * i,
|
|
|
|
|
|
+ x: this.dayStep * i,
|
|
y: 40,
|
|
y: 40,
|
|
fontSize: 10,
|
|
fontSize: 10,
|
|
text: timeText,
|
|
text: timeText,
|
|
@@ -288,6 +307,17 @@ GanttChart.prototype.drawTimeZone = function() {
|
|
fill: '#8D9399',
|
|
fill: '#8D9399',
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
+
|
|
|
|
+ timeGroup.addShape('rect', {
|
|
|
|
+ attrs: {
|
|
|
|
+ x: this.dayStep * i-10,
|
|
|
|
+ y: 20,
|
|
|
|
+ width: 1,
|
|
|
|
+ height: this.cHeight,
|
|
|
|
+ fill: '#deebeb',
|
|
|
|
+ radius: [2, 4],
|
|
|
|
+ },
|
|
|
|
+ });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@@ -364,10 +394,55 @@ GanttChart.prototype.drawTasks = function() {
|
|
taskGroup = this.graphGroup.addGroup();
|
|
taskGroup = this.graphGroup.addGroup();
|
|
taskGroup._tname = 'TaskGroup_' + topTask.id;
|
|
taskGroup._tname = 'TaskGroup_' + topTask.id;
|
|
topTask.gGroup = taskGroup;
|
|
topTask.gGroup = taskGroup;
|
|
- // 第二层循环,用于 区分具体多少任务,例如,维保-商管1/商管2...
|
|
|
|
- topTask.dataList.forEach((taskP, index) => {
|
|
|
|
- let taskPGroup = taskGroup.addGroup();
|
|
|
|
|
|
+
|
|
|
|
+ // 组名背景矩形
|
|
|
|
+ // let TopGroupRectEl = taskGroup.addShape('rect', {
|
|
|
|
+ // attrs: {
|
|
|
|
+ // x: 0,
|
|
|
|
+ // y: topTask.renderOptions.startY,
|
|
|
|
+ // width: this.cWidth,
|
|
|
|
+ // height: this.taskRowHeight,
|
|
|
|
+ // fill: '#a6ed53',
|
|
|
|
+ // radius: [2, 4],
|
|
|
|
+ // },
|
|
|
|
+ // });
|
|
|
|
+ // 第二层循环,用于 区分具体多少任务,例如,维保-商管1/商管2...
|
|
|
|
+ topTask.dataList.forEach((taskP, index) => {
|
|
|
|
+ let taskPGroup = taskGroup.addGroup()
|
|
taskGroup.addGroup(taskPGroup);
|
|
taskGroup.addGroup(taskPGroup);
|
|
|
|
+ // 任务背景矩形,主要用于Hover效果变更颜色
|
|
|
|
+ if(true){
|
|
|
|
+ let tempTaskContainerEl = taskPGroup.addShape('rect', {
|
|
|
|
+ attrs: {
|
|
|
|
+ x: 0,
|
|
|
|
+ y: topTask.renderOptions.startY + ((index+1)* (this.taskRowHeight + this.rowSpanDis))-5,
|
|
|
|
+ width: this.cWidth,
|
|
|
|
+ height: this.taskRowHeight+10,
|
|
|
|
+ fill: '#fff',
|
|
|
|
+ // stroke: 'black',
|
|
|
|
+ radius: [2, 4],
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
+ tempTaskContainerEl.setZIndex(1)
|
|
|
|
+ tempTaskContainerEl._pdata = taskP
|
|
|
|
+ tempTaskContainerEl.on('mouseenter',(ev)=>{
|
|
|
|
+ tempTaskContainerEl.attr({fill: '#F5F6F7'})
|
|
|
|
+ tempTaskContainerEl._pdata.tasks.forEach(_tempTask=>{
|
|
|
|
+ if(_tempTask._rectEl){
|
|
|
|
+ _tempTask._rectEl.setZIndex(5)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ tempTaskContainerEl.on('mouseleave',(ev)=>{
|
|
|
|
+ tempTaskContainerEl.attr({fill: '#fff'})
|
|
|
|
+ tempTaskContainerEl._pdata.tasks.forEach(_tempTask=>{
|
|
|
|
+ if(_tempTask._rectEl){
|
|
|
|
+ _tempTask._rectEl.setZIndex(5)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ taskP._containerEl = tempTaskContainerEl
|
|
|
|
+ }
|
|
// 第三层循环,用户区分每个子任务的执行时间段,例如:维保-商管1-2020.05-2020.06 / 2020.08- 2020.09
|
|
// 第三层循环,用户区分每个子任务的执行时间段,例如:维保-商管1-2020.05-2020.06 / 2020.08- 2020.09
|
|
taskP.tasks.forEach((_taskItem, _index) => {
|
|
taskP.tasks.forEach((_taskItem, _index) => {
|
|
let _isInView = this.isInView(_taskItem)
|
|
let _isInView = this.isInView(_taskItem)
|
|
@@ -386,7 +461,9 @@ GanttChart.prototype.drawTasks = function() {
|
|
radius: [2, 4],
|
|
radius: [2, 4],
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
+ rectEl.setZIndex(5)
|
|
rectEl._pdata = _taskItem;
|
|
rectEl._pdata = _taskItem;
|
|
|
|
+ _taskItem._rectEl = rectEl
|
|
rectEl.on('mouseover', (ev) => {
|
|
rectEl.on('mouseover', (ev) => {
|
|
this.handleClick(ev.target, 'enter', ev);
|
|
this.handleClick(ev.target, 'enter', ev);
|
|
});
|
|
});
|
|
@@ -408,6 +485,22 @@ GanttChart.prototype.drawTasks = function() {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
+
|
|
|
|
+ // 画当前线条 TODO,放前面不行
|
|
|
|
+ let todayAt = new Date()
|
|
|
|
+ if(this.startAt < todayAt && this.endAt > todayAt){
|
|
|
|
+ this.todayTimeLineEl = this.gCanvas.addShape('rect',{
|
|
|
|
+ attrs: {
|
|
|
|
+ x: this.todayTimeLineOffsetPos,
|
|
|
|
+ y: 40,
|
|
|
|
+ width: 3,
|
|
|
|
+ height: this.cHeight,
|
|
|
|
+ fill: '#0091FF',
|
|
|
|
+ radius: [2, 4],
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.todayTimeLineEl.setZIndex(50)
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
/**
|