5、Gantt 界面相关部分

1、返回任务的可见高度

 1 var height = gantt.getTaskHeight(); // -> 30 

2、计算任务的DOM元素在时间轴区域的位置和大小

 1 // adding baseline display
 2 gantt.addTaskLayer(function draw_planned(task) {
 3     if (task.planned_start && task.planned_end) {
 4         var sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end);         var el = document.createElement('div');
 5         el.className = 'baseline';
 6         el.style.left = sizes.left + 'px';
 7         el.style.top = sizes.top + 'px';
 8         el.style.width = sizes.width + 'px';
 9         el.style.height= sizes.height + 'px';
10         return el;
11     }
12     return false;
13 });
3、获取任务的 DOM 元素在时间线区域的顶部位置
 1 gantt.getTaskTop(2); 
4、获取指定日期在图表区域的相对水平位置
 1 gantt.posFromDate(new Date()); 2 // 该方法返回当前在甘特图中呈现的日期的位置。如果图表中未呈现日期 - 该方法将返回“null”。 
5、滚动图表区域使指定的日期可见
 1 gantt.showDate(new Date()); //shows the current date 
6、启用/禁用甘特图中的多任务选择
1 gantt.config.multiselect = false; //disables multi-task selection
2 gantt.init('gantt_here');
3 
4 gantt.plugins({
5     multiselect: true
6 });
7、指定多任务选择是否在一个或任何级别内可用
 1 gantt.config.multiselect_one_level = true; 
 2 gantt.init('gantt_here');
 3  
 4 //INCORRECT
 5 gantt.config.multiselect = false;   //multiselection is disabledgantt.config.multiselect_one_level = true; 
 6 gantt.init('gantt_here');
 7 
 8 gantt.plugins({
 9     multiselect: true
10 });
8、使指定的任务在屏幕上可见
1 var taskId = gantt.addTask({
2     id:10,
3     text:"Task #5",
4     start_date:"02-09-2013",
5     duration:28
6 }, "project_2");
7  
8 gantt.showTask(10);

9、甘特图自动扩展时间刻度以适应所有显示的任务
  1 gantt.config.fit_tasks = true;  

10、激活甘特图的只读模式
  1 gantt.config.readonly = true; 

11、配置表的列
1 // default columns definition
2 gantt.config.columns=[
3     {name:"text",       label:"Task name",  tree:true, width:'*' },
4     {name:"start_date", label:"Start time", align: "center" },
5     {name:"duration",   label:"Duration",   align: "center" },
6     {name:"add",        label:"" }
7 ];
8 gantt.init("gantt_here");
  1 const ganttData = reactive<{
  2   // gantt 列配置 --只读
  3   readonlyColumns: any[];
  4   // gantt 列配置 --可改添
  5   updateColumns: any[];
  6 }>({
  7   readonlyColumns: [
  8     {
  9       name: 'wbs',
 10       label: '序号',
 11       width: 50,
 12       template: function (task) {
 13         const ganttObj = ganttRef.value;
 14         const wbs_code = ganttObj.getWBSCode(task); // -> returns "1.2"
 15         return wbs_code;
 16       },
 17     },
 18     {
 19       name: 'taskStatusName',
 20       label: '工单状态',
 21       align: 'center',
 22       width: 80,
 23       resize: true,
 24       template: function (task) {
 25         if (task.ganttType === 'project') {
 26           return '';
 27         } else {
 28           return task.taskStatusName;
 29         }
 30       },
 31     },
 32     { name: 'inChargeName', label: '负责人', width: 100, resize: true },
 33     {
 34       name: 'taskSpecification',
 35       label: '工单描述',
 36       align: 'left',
 37       width: 250,
 38       tree: true,
 39       resize: true,
 40       template: function (task) {
 41         if (task.ganttType == 'task') {
 42           if (task.keyTask) {
 43             return (
 44               '<i class="iconfont icon-keyTask"' +
 45               ' style="color: #bf1c2d;font-size: 17px; margin-right: 6px; line-height: 36px; "' +
 46               '></i>' +
 47               task.taskSpecification
 48             );
 49           } else {
 50             return (
 51               '<i class="iconfont icon-unKeyTask"' +
 52               ' style="color: #bf1c2d;font-size: 17px; margin-right: 6px; line-height: 36px;"' +
 53               '></i>' +
 54               task.taskSpecification
 55             );
 56           }
 57         } else {
 58           return task.taskSpecification;
 59         }
 60       },
 61     },
 62     {
 63       name: 'equipmentCode',
 64       label: '关联设备编码',
 65       width: 140,
 66       align: 'center',
 67       resize: true,
 68       template: function (task) {
 69         const equipmentCodes = (task.equipmentList || [])
 70           .map((v) => v.equipmentCode)
 71           .join('，');
 72         return equipmentCodes;
 73       },
 74     },
 75     { name: 'start_date', align: 'center', width: 120, resize: true },
 76     {
 77       name: 'duration',
 78       align: 'center',
 79       resize: true,
 80       template: function (task) {
 81         return task.duration + ' 天';
 82       },
 83     },
 84     {
 85       name: 'taskCompleteTime',
 86       label: '实际结束时间',
 87       align: 'center',
 88       width: 140,
 89       resize: true,
 90     },
 91   ],
 92   updateColumns: [
 93     {
 94       name: 'wbs',
 95       label: '序号',
 96       width: 50,
 97       template: function (task) {
 98         const ganttObj = ganttRef.value;
 99         const wbs_code = ganttObj.getWBSCode(task); // -> returns "1.2"
100         return wbs_code;
101       },
102     },
103     {
104       name: 'taskStatusName',
105       label: '工单状态',
106       align: 'center',
107       width: 80,
108       resize: true,
109       template: function (task) {
110         if (task.ganttType === 'project') {
111           return '';
112         } else {
113           return task.taskStatusName;
114         }
115       },
116     },
117     { name: 'inChargeName', label: '负责人', width: 100, resize: true },
118     {
119       name: 'taskSpecification',
120       label: '工单描述',
121       align: 'left',
122       width: 250,
123       tree: true,
124       resize: true,
125       template: function (task) {
126         if (task.ganttType == 'task') {
127           if (task.keyTask) {
128             return (
129               '<i class="iconfont icon-keyTask"' +
130               ' style="color: #bf1c2d;font-size: 17px; margin-right: 6px; line-height: 36px; "' +
131               '></i>' +
132               task.taskSpecification
133             );
134           } else {
135             return (
136               '<i class="iconfont icon-unKeyTask"' +
137               ' style="color: #bf1c2d;font-size: 17px; margin-right: 6px; line-height: 36px;"' +
138               '></i>' +
139               task.taskSpecification
140             );
141           }
142         } else {
143           return task.taskSpecification;
144         }
145       },
146     },
147     {
148       name: 'equipmentCode',
149       label: '关联设备编码',
150       width: 140,
151       align: 'center',
152       resize: true,
153       template: function (task) {
154         const equipmentCodes = (task.equipmentList || [])
155           .map((v) => v.equipmentCode)
156           .join('，');
157         return equipmentCodes;
158       },
159     },
160     { name: 'start_date', align: 'center', width: 120, resize: true },
161     {
162       name: 'duration',
163       align: 'center',
164       resize: true,
165       template: function (task) {
166         return task.duration + ' 天';
167       },
168     },
169     {
170       name: 'taskCompleteTime',
171       label: '实际结束时间',
172       align: 'center',
173       width: 140,
174       resize: true,
175     },
176     { name: 'add', width: 44 },
177   ],
178 });
179 
180 // ---------------------分割线---------------------
181 // 激活甘特图的只读模式 ganttData：自定义的属性值
182 if (flag) {
183   gantt.config.columns = ganttData.updateColumns;
184   gantt.config.readonly = false;
185 } else {
186   gantt.config.columns = ganttData.readonlyColumns;
187   gantt.config.readonly = true;
188 }

 

posted @ 2021-11-16 17:08  你在说啥  阅读(434)  评论(2)    收藏  举报