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

官网地址： dhtmlx-gantt - npm

安装：npm i dhtmlx-gantt 

开发过程中需要判断节假日并置灰显示，使用了插件npm i chinese-days实现

this.task = { data:[],type: "tasks"}
//获取甘特图数据   
public getData(data){
    if(data.length){
        data.forEach((val:any,index:any)=>{
          this.tasks.data.push({
            id: val.OBJ_ID,
            name: val.TDSB,
            start_date: new Date(this.timestampToTime(val.STARTTIME)),
            end_date: new Date(this.timestampToTime(val.ENDTIME)),
            duration: 20,
            open: true, //默认打开，
            toolTipsTxt:  val.TDSB,
            fxdj: val.FXDJ,
            index:index,
            editable:true,
            // progress: 0.6,
            //status: "parent",
          })
        })
      }
    }    
// 判断节假日并设置特殊样式，这里是给节假日设置了特殊的css类名，具体样式具需求自行添加     
    public daysStyle(date: any){
        if (chineseDays.isHoliday(date)) return "weekend";
      };

    // 根据传入数据判断甘特图渲染的颜色
    public setDataColor = () => {
        this.tasks.data.forEach((item: any) => {
          // if (item.fxdj) {
            //存在type字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色
            if (item.fxdj == 1) {
              item.color = "rgba(255, 0, 0,.75)";
              item.fxdjmc = "一级（+）";
            } else if (item.fxdj == 2) {
              item.fxdjmc = "一级";
              item.color = "rgb(255, 136, 20,.75)";
            } else if (item.fxdj == 3) {
              item.fxdjmc = "二级";
              item.color = "rgba(86, 146, 240,.75)";
            } else if (item.fxdj == 0) {
              item.fxdjmc = "无";
              item.color = "rgba(0, 176, 80,.75)";
            }
          // }
        });
      };
    // 初始化渲染甘特图
    public initData(){
        //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
        // gantt.config.autosize = "xy";
        // gantt.config.open_tree_initially = true;
        //   gantt.config.scale_unit = "day";
        gantt.config.min_column_width = 60;
        gantt.config.scale_height = 30 * 3;
        gantt.config.row_height = 30;
        gantt.config.drag_links = false;
        gantt.config.drag_move = false;
        gantt.config.drag_resize = false;
        gantt.config.drag_progress = false;
        gantt.config.correct_work_time = false;
        gantt.config.editable = true; // 允许编辑（内联编辑）
        //   是否有新增弹窗
        gantt.config.details_on_create = false;
        //   点击进度
        gantt.config.details_on_dblclick = false;
        gantt.config.order_branch = false;
        gantt.config.scroll_size = 15;
        // 不同字段对应的编辑配置
        var textEditor = {type: "text", map_to: "name"};
        var dateEditorS = {type: "date", map_to: "start_date"};
        var dateEditorE = {type: "date", map_to: "start_date"};
        var durationEditor = {type: "select", map_to: "fxdjmc",options: [
          {label:"无",value:'0'},
          {label:"一级风险(+)",value:'1'},
          {label:"一级风险",value:'2'},
          {label:"二级风险",value:'3'},
      ]};
        //   左侧展示内容
        gantt.config.columns = [
          { name: "check", label: "", width: 40,
            template: function(task) {
                // 创建一个复选框，并为其添加一个唯一的ID，以便后续操作
                var checkboxId = "checkbox_" + task.id;
                return "<input type='checkbox' id='" + checkboxId + "' class='gantt_checkbox' />";
            },
            align: "center" },
          { name: "index", label: "序号", align: "center", width: 40 },
          { name: "name", label: "停电设备", align: "left", width: 230, },
          { name: "start_date", label: "开始时间", align: "center", width: 180 },
          { name: "end_date", label: "结束时间", align: "center", width: 180  },
          { name: "fxdjmc", label: "风险等级", align: "center"  },
          { name: "add",label: "", onrender: (item: any) => {return " ";},},
        ];
        // 指向展示详情 -- 鼠标悬浮是否显示
        gantt.plugins({
          tooltip: true,
        });
        // 鼠标悬浮内容
        gantt.templates.tooltip_text = function (start, end, task) {
          return (
            "<b>设备名称:</b> " +
            task.name +
            "<br/><b>开始时间:</b> " +
            gantt.templates.tooltip_date_format(start) +
            "<br/><b>结束时间:</b> " +
            gantt.templates.tooltip_date_format(end)
          );
        };
        gantt.config.auto_types = true;
        gantt.config.xml_date = "%Y-%m-%d";
        gantt.config.step = 1;
        gantt.config.start_on_monday = true;
        gantt.config.autoscroll = false;
        gantt.config.scroll_on_click = true;
        gantt.config.calendar_property = "start_date";
        gantt.config.calendar_property = "end_date";
        // 左侧表格宽度
        gantt.config.autofit = true;
        gantt.config.grid_width = 500;
        //   右侧表头
        gantt.config.scales = [
          { unit: "month", step: 1, format: "%F, %Y" },
          { unit: "week", step: 1, template: this.weekScaleTemplate },
          { unit: "day", step: 1, format: "%d", css: this.daysStyle },
        ];
  
        //   表单判断假期
        gantt.templates.timeline_cell_class = (task, date): any => {
          if (chineseDays.isHoliday(date)) {
            return "holiday";
          }
        };
        //   设置任务条进度内容 -- 功能不需要
        // gantt.templates.progress_text = (start, end, task: any) => {
        //   return (
        //     "<div style='text-align:left;color:#fff;padding-left:20px'>" +
        //     Math.round(task.progress * 100) +
        //     "% </div>"
        //   );
        // };
  
        //任务条显示内容
        gantt.templates.task_text = function (start, end, task) {
          // return task.name + '(' + task.duration + '天)';
          return "";
        };
        gantt.i18n.setLocale("cn");
        //   设置进度颜色
        this.setDataColor();
         // 清除缓存
         gantt.clearAll();
        //   初始化
        gantt.init("gantt_here");
        //   数据解析
        gantt.parse(this.tasks);
        // 监听新增事件
        let _this = this;
        gantt.attachEvent("onTaskCreated", function (task) {
          //console.log(task, "task");
          _this.flag = true;
          return false;
        });
        // 为每个复选框添加事件监听器
        gantt.eachTask(function(task:any) {
          var checkboxId = "checkbox_" + task.id;
          var checkbox = document.getElementById(checkboxId);
          if (checkbox) {
              // 添加change事件监听器
              checkbox.addEventListener('change', function() {
                  // 这里可以执行一些操作，比如更新任务状态或发送Ajax请求
                  console.log('Task ' + task.id + ' is ' + (_this.checked ? 'checked' : 'unchecked'));
              });
          }
        });
    }