vue前端实现 dhtmlxgantt 甘特图（个人需求，不完全）

官网地点： dhtmlx-gantt - npm   chinese-days - npm
安装：npm i dhtmlx-gantt    npm i chinese-days
开发过程中需要判断节假日并置灰显示，利用了插件chinese-days(用于查询中国节假日、调休日、工作日、24节气、以及夏历阳历互转)实现

1. this.task = { data:[],type: "tasks"}
2. //获取甘特图数据   
3. public getData(data){
4.     if(data.length){
5.         data.forEach((val:any,index:any)=>{
6.           this.tasks.data.push({
7.             id: val.OBJ_ID,
8.             name: val.TDSB,
9.             start_date: new Date(this.timestampToTime(val.STARTTIME)),
10.             end_date: new Date(this.timestampToTime(val.ENDTIME)),
11.             duration: 20,
12.             open: true, //默认打开，
13.             toolTipsTxt:  val.TDSB,
14.             fxdj: val.FXDJ,
15.             index:index,
16.             editable:true,
17.             // progress: 0.6,
18.             //status: "parent",
19.           })
20.         })
21.       }
22.     }   
23. // 判断节假日并设置特殊样式，这里是给节假日设置了特殊的css类名，具体样式具需求自行添加  
24. //  chineseDays.isHoliday -- 使用插件 判断这一日期是否为周末节假日
25.    
26.     public daysStyle(date: any){
27.         if (chineseDays.isHoliday(date)) return "weekend";
28.       };
30.     // 根据传入数据判断甘特图渲染的颜色
31.     public setDataColor = () => {
32.         this.tasks.data.forEach((item: any) => {
33.           // if (item.fxdj) {
34.             //存在type字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色
35.             if (item.fxdj == 1) {
36.               item.color = "rgba(255, 0, 0,.75)";
37.               item.fxdjmc = "一级（+）";
38.             } else if (item.fxdj == 2) {
39.               item.fxdjmc = "一级";
40.               item.color = "rgb(255, 136, 20,.75)";
41.             } else if (item.fxdj == 3) {
42.               item.fxdjmc = "二级";
43.               item.color = "rgba(86, 146, 240,.75)";
44.             } else if (item.fxdj == 0) {
45.               item.fxdjmc = "无";
46.               item.color = "rgba(0, 176, 80,.75)";
47.             }
48.           // }
49.         });
50.       };
51.     // 初始化渲染甘特图
52.     public initData(){
53.         //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
54.         // gantt.config.autosize = "xy";
55.         // gantt.config.open_tree_initially = true;
56.         //   gantt.config.scale_unit = "day";
57.         gantt.config.min_column_width = 60;
58.         gantt.config.scale_height = 30 * 3;
59.         gantt.config.row_height = 30;
60.         gantt.config.drag_links = false;
61.         gantt.config.drag_move = false;
62.         gantt.config.drag_resize = false;
63.         gantt.config.drag_progress = false;
64.         gantt.config.correct_work_time = false;
65.         gantt.config.editable = true; // 允许编辑（内联编辑）
66.         //   是否有新增弹窗
67.         gantt.config.details_on_create = false;
68.         //   点击进度
69.         gantt.config.details_on_dblclick = false;
70.         gantt.config.order_branch = false;
71.         gantt.config.scroll_size = 15;
72.         // 不同字段对应的编辑配置
73.         var textEditor = {type: "text", map_to: "name"};
74.         var dateEditorS = {type: "date", map_to: "start_date"};
75.         var dateEditorE = {type: "date", map_to: "start_date"};
76.         var durationEditor = {type: "select", map_to: "fxdjmc",options: [
77.           {label:"无",value:'0'},
78.           {label:"一级风险(+)",value:'1'},
79.           {label:"一级风险",value:'2'},
80.           {label:"二级风险",value:'3'},
81.       ]};
82.         //   左侧目录菜单展示内容
83.         gantt.config.columns = [
84.           { name: "check", label: "", width: 40,
85.             template: function(task) {
86.                 // 创建一个复选框，并为其添加一个唯一的ID，以便后续操作
87.                 var checkboxId = "checkbox_" + task.id;
88.                 return "<input type='checkbox' id='" + checkboxId + "' class='gantt_checkbox' />";
89.             },
90.             align: "center" },
91.           { name: "index", label: "序号", align: "center", width: 40 },
92.           { name: "name", label: "停电设备", align: "left", width: 230, },
93.           { name: "start_date", label: "开始时间", align: "center", width: 180 },
94.           { name: "end_date", label: "结束时间", align: "center", width: 180  },
95.           { name: "fxdjmc", label: "风险等级", align: "center"  },
96.           { name: "add",label: "", onrender: (item: any) => {return " ";},},
97.         ];
98.         // 指向展示详情 -- 鼠标悬浮是否显示
99.         gantt.plugins({
100.           tooltip: true,
101.         });
102.         // 鼠标悬浮内容
103.         gantt.templates.tooltip_text = function (start, end, task) {
104.           return (
105.             "<b>设备名称:</b> " +
106.             task.name +
107.             "<br/><b>开始时间:</b> " +
108.             gantt.templates.tooltip_date_format(start) +
109.             "<br/><b>结束时间:</b> " +
110.             gantt.templates.tooltip_date_format(end)
111.           );
112.         };
113.         gantt.config.auto_types = true;
114.         gantt.config.xml_date = "%Y-%m-%d";
115.         gantt.config.step = 1;
116.         gantt.config.start_on_monday = true;
117.         gantt.config.autoscroll = false;
118.         gantt.config.scroll_on_click = true;
119.         gantt.config.calendar_property = "start_date";
120.         gantt.config.calendar_property = "end_date";
121.         // 左侧表格宽度
122.         gantt.config.autofit = true;
123.         gantt.config.grid_width = 500;
124.         //   右侧表头
125.         gantt.config.scales = [
126.           { unit: "month", step: 1, format: "%F, %Y" },
127.           { unit: "week", step: 1, template: this.weekScaleTemplate },
128.           { unit: "day", step: 1, format: "%d", css: this.daysStyle },
129.         ];
130.   
131.         //   表单判断假期
132.         gantt.templates.timeline_cell_class = (task, date): any => {
133.           if (chineseDays.isHoliday(date)) {
134.             return "holiday";
135.           }
136.         };
137.         //   设置任务条进度内容 -- 功能不需要
138.         // gantt.templates.progress_text = (start, end, task: any) => {
139.         //   return (
140.         //     "<div style='text-align:left;color:#fff;padding-left:20px'>" +
141.         //     Math.round(task.progress * 100) +
142.         //     "% </div>"
143.         //   );
144.         // };
145.   
146.         //任务条显示内容
147.         gantt.templates.task_text = function (start, end, task) {
148.           // return task.name + '(' + task.duration + '天)';
149.           return "";
150.         };
151.         gantt.i18n.setLocale("cn");
152.         //   设置进度颜色
153.         this.setDataColor();
154.          // 清除缓存
155.          gantt.clearAll();
156.         //   初始化  gantt_here 为dom的Id
157.         gantt.init("gantt_here");
158.         //   数据解析
159.         gantt.parse(this.tasks);
160.         // 监听新增事件
161.         let _this = this;
162.         gantt.attachEvent("onTaskCreated", function (task) {
163.           //console.log(task, "task");
164.           _this.flag = true;
165.           return false;
166.         });
167.         // 为每个复选框添加事件监听器
168.         gantt.eachTask(function(task:any) {
169.           var checkboxId = "checkbox_" + task.id;
170.           var checkbox = document.getElementById(checkboxId);
171.           if (checkbox) {
172.               // 添加change事件监听器
173.               checkbox.addEventListener('change', function() {
174.                   // 这里可以执行一些操作，比如更新任务状态或发送Ajax请求
175.                   console.log('Task ' + task.id + ' is ' + (_this.checked ? 'checked' : 'unchecked'));
176.               });
177.           }
178.         });
179.     }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。