12、Gantt 动态改变时间 Scale 

 1 <Select
 2   v-model:value="scaleConfigValue"
 3   style="width: 100px; margin-right: 10px"
 4   @select="setScaleConfigFuc"
 5 >
 6   <Option value="day">按天</Option>
 7   <Option value="week">按周</Option>
 8   <Option value="month">按月</Option>
 9   <Option value="year">按年</Option>
10 </Select>
11 
12 const ganttData = reactive<{
13   scaleConfigValue: string;
14 }>({
15   scaleConfigValue: 'day',
16 });
17 
18 /**
19  * gantt scale 模式切换
20  */
21 function setScaleConfigFuc(type) {
22   setScaleConfig(type);
23 }
 1 // 动态设置Scale
 2 function setScaleConfig(level) {
 3   console.log(level);
 4   const weekScaleTemplate = function (date) {
 5     const dateToStr = gantt.date.date_to_str('%M-%d日');
 6     const weekNum = gantt.date.date_to_str('(%W周)');
 7     const endDate = gantt.date.add(gantt.date.add(date, 1, 'week'), -1, 'day');
 8     return dateToStr(date) + '~' + dateToStr(endDate) + '' + weekNum(date);
 9   };
10   switch (level) {
11     case 'day':
12       gantt.config.scale_height = 28 * 4;
13       gantt.config.subscales = [
14         {
15           unit: 'year',
16           step: 1,
17           date: '%Y年',
18         },
19         {
20           unit: 'month',
21           step: 1,
22           date: '%F',
23         },
24         {
25           unit: 'week',
26           step: 1,
27           template: weekScaleTemplate,
28         },
29       ];
30       gantt.config.scale_unit = 'day';
31       gantt.config.date_scale = '周%D,%d日';
32       gantt.render();
33       break;
34     case 'week':
35       gantt.config.subscales = [
36         {
37           unit: 'year',
38           step: 1,
39           date: '%Y年',
40         },
41         {
42           unit: 'week',
43           step: 1,
44           template: weekScaleTemplate,
45         },
46       ];
47       gantt.config.scale_height = 28 * 3;
48       gantt.config.scale_unit = 'month';
49       gantt.config.date_scale = '%F';
50       gantt.render();
51       break;
52     case 'month':
53       gantt.config.subscales = [
54         {
55           unit: 'year',
56           step: 1,
57           date: '%Y年',
58         },
59       ];
60       gantt.config.scale_unit = 'month';
61       gantt.config.date_scale = '%F';
62       gantt.config.scale_height = 28 * 2;
63       gantt.render();
64       break;
65     case 'year':
66       gantt.config.subscales = [];
67       gantt.config.scale_unit = 'year';
68       gantt.config.date_scale = '%Y年';
69       gantt.config.scale_height = 28 * 2;
70       gantt.render();
71       break;
72   }
73 }

 

 

 

 

posted @ 2021-11-16 17:44  你在说啥  阅读(809)  评论(0)    收藏  举报