index.js
3.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import React, { Component } from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import './Gantt.css';
class Gantt extends Component {
componentDidMount() {
gantt.plugins({
tooltip: true, // 鼠标划过任务是否显示明细
// auto_scheduling: true,//根据任务之间的关系自动安排任务
// multiselect: true, //为任务激活多任务选择
});
gantt.config.xml_date = '%Y-%m-%d %H:%i'; /* 时间格式 年月日 时分 */
gantt.config.reorder_grid_columns = true; /* 左侧列可拖动 */
gantt.config.grid_elastic_columns = true;
// gantt.config.readonly = true;// 只读模式的甘特图
const { tasks } = this.props;
gantt.init(this.ganttContainer);
this.initGanttDataProcessor();
gantt.parse(tasks);
}
shouldComponentUpdate(nextProps) {
// const { tasks } = nextProps;
// return tasks !== undefined;
return this.props.zoom !== nextProps.zoom;
}
componentDidUpdate() {
gantt.clearAll();
const { tasks } = this.props;
gantt.init(this.ganttContainer);
this.initGanttDataProcessor();
gantt.parse(tasks);
}
componentWillUnmount() {
if (this.dataProcessor) {
this.dataProcessor.destructor();
this.dataProcessor = null;
}
}
setZoom = (value) => {
const scale = value.scale !== undefined ? value.scale : 'Minutes';
const step = value.step !== undefined ? value.step : 10;
switch (scale) {
case 'Minutes':
gantt.config.duration_unit = 'minute';
gantt.config.scale_unit = 'day';
gantt.config.date_scale = '%Y-%m-%d';
gantt.setWorkTime({ hours: ['00:30-03:30'] });
gantt.config.scale_height = 60;
gantt.config.min_column_width = 40;
gantt.config.subscales = [
{ unit: 'minute', step, date: '%H:%i' },
];
break;
case 'Hours':
gantt.config.scale_unit = 'day';
gantt.config.date_scale = '%d %M';
gantt.config.scale_height = 60;
gantt.config.min_column_width = 30;
gantt.config.subscales = [
{ unit: 'hour', step, date: '%H' },
];
break;
case 'Days':
gantt.config.min_column_width = 70;
gantt.config.scale_unit = 'week';
gantt.config.date_scale = '#%W';
gantt.config.subscales = [
{ unit: 'day', step, date: '%d %M' },
];
gantt.config.scale_height = 60;
break;
case 'Months':
gantt.config.min_column_width = 70;
gantt.config.scale_unit = 'month';
gantt.config.date_scale = '%F';
gantt.config.scale_height = 60;
gantt.config.subscales = [
{ unit: 'week', step, date: '#%W' },
];
break;
default:
break;
}
}
initGanttDataProcessor =() => {
// eslint-disable-next-line prefer-destructuring
const onDataUpdated = this.props.onDataUpdated;
if (this.dataProcessor) {
this.dataProcessor.destructor();
this.dataProcessor = null;
}
this.dataProcessor = gantt.createDataProcessor((type, action, item, id) => {
return new Promise((resolve) => {
if (onDataUpdated) {
onDataUpdated(type, action, item, id);
}
// if onDataUpdated changes returns a permanent id of the created item, you can return it from here so dhtmlxGantt could apply it
// resolve({id: databaseId});
return resolve();
});
});
}
render() {
const { zoom } = this.props;
this.setZoom(zoom);
return (
<div
ref={(input) => { this.ganttContainer = input; }}
style={{ width: '100%', height: '100%' }}
/>
);
}
}
export default Gantt;