vue中使用甘特图dhtmlx-gantt

2019-03-20

甘特图插件使用记录

教程文档 https://docs.dhtmlx.com/gantt/desktop__install_with_bower.html
配置
dhtmlx-gantt很多功能需要单独引用js 所以npm下载完需要在index.html中引用这样不会因为模块化产生js报错
也可以直接import引入其余文件都在node_modules中的dxhtml文件中修改源码最好拿到静态文件中
1、安装插件
1
npm install dhtmlx-gantt --save
由于dhtmlxGantt是一个静态对象，它的默认实例一直存在于页面上，所以在一个项目中有多个gantt的话功能会相互影响并且造成页面崩溃
由于甘特图不支持new一个重新实例化需要查找他的api对应的功能
要创建dhtmlxGantt的新实例，请使用Gantt.getGanttInstance（）方法
1
this.gantt = Gantt.getGanttInstance();

index.html

<script src="js/gantt/dhtmlxgantt.js"></script>
//撤销反撤销功能js
<script src="js/gantt/dhtmlxgantt_undo.js"></script>
<script src="http://export.dhtmlx.com/gantt/api.js"></script>
//中文语言
<script src="js/gantt/locale_cn.js"></script>

基础配置 vue的话就在页面加载完初始化就行

//数据中处理时间 2015-08-07  时间戳需要onTemplatesReady处理
// gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.attachEvent("onTemplatesReady", function(){
    gantt.templates.xml_date = function(dateString){
        return new Date(dateString * 1000);
    }
});
//设置时间坐标轴单位 “minute”, “hour”, “day”, “week”, “quarter”, “month”, “year”
gantt.config.scale_unit = "day";
//设置时间刻度的格式（X轴）默认值： “％d％M”  "%H:%i";
gantt.config.date_scale = "%F, %Y";
//顶部年月 //%Y年%n月%j日 周%D     scales已经废弃使用subscales处理时间
gantt.config.subscales = [
    { unit: "day", step: 1, date: "%j" }
];
//设置甘特图的表头高度
gantt.config.scale_height = 50;
//进度条高度
gantt.config.task_height = 16;
//进度条容器高
gantt.config.row_height = 35;
//水平或垂直滚动条尺寸
gantt.config.scroll_size = 20;

功能配置

//拖拽排序
gantt.config.order_branch = true;
 //添加开始时间的竖线(在实例化后会失效)
 var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
 var start = new Date();
 gantt.addMarker({
     start_date: start,
     css: "status_line",
     text: "Start project",
     title: "Today: " + date_to_str(start)
 });
 //缩放级别 https://docs.dhtmlx.com/gantt/samples/03_scales/05_dynamic_scales.html
 var zoomConfig = {
     levels: [
         {
             name:"day",
             scale_height: 27,
             min_column_width:80,
             subscales:[
                 {unit: "day", step: 1, format: "%d %M"}
             ]
         },
         {
             name:"week",
             scale_height: 50,
             min_column_width:50,
             subscales:[
                 {unit: "week", step: 1, format: function (date) {
                         var dateToStr = gantt.date.date_to_str("%d %M");
                         var endDate = gantt.date.add(date, -6, "day");
                         var weekNum = gantt.date.date_to_str("%W")(date);
                         return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate);
                     }},
                 {unit: "day", step: 1, format: "%j %D"}
             ]
         },
         {
             name:"month",
             scale_height: 50,
             min_column_width:120,
             subscales:[
                 {unit: "month", format: "%F, %Y"},
                 {unit: "week", format: "Week #%W"}
             ]
         },
         {
             name:"quarter",
             height: 50,
             min_column_width:90,
             subscales:[
                 {unit: "month", step: 1, format: "%M"},
                 {
                     unit: "quarter", step: 1, format: function (date) {
                         var dateToStr = gantt.date.date_to_str("%M");
                         var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
                         return dateToStr(date) + " - " + dateToStr(endDate);
                     }
                 }
             ]
         },
         {
             name:"year",
             scale_height: 50,
             min_column_width: 30,
             subscales:[
                 {unit: "year", step: 1, format: "%Y"}
             ]
         }
     ]
 };

 gantt.ext.zoom.init(zoomConfig);
 gantt.ext.zoom.setLevel("year");

初始化甘特图

//突出周末顶部时间改变css样式颜色 scale_cell_class已弃用
gantt.templates.timeline_cell_class = function(date){
    if(date.getDay() == 0 ||date.getDay() == 6){
        return 'weekend' ;
    }
};
//突出周末网格改变css样式颜色
gantt.templates.timeline_cell_class  = function(item,date){
    // debugger;
    if(date.getDay()== 0 || date.getDay()== 6){
        return 'weekend' ;
    }
};
  //弹框的头部
  gantt.templates.lightbox_header = function(start_date,end_date,task){
      return (gantt.templates.task_text(task.start_date, task.end_date, task) || "").substr(0, 70) +  "&nbsp;" +
          gantt.templates.task_time(task.start_date, task.end_date, task);
  };
  //弹框的头部的日期格式处理
  gantt.templates.task_date= function(date){
      return gantt.date.date_to_str("%Y-%m-%d")(date);
  };
  // 初始化列 (自定义的时候需要更改源码匹配自己新增name字段 否则undefined)
   gantt.config.columns = [{
        name : "text",  //自定义字段
        label : "任务名称",  //用于界面展示的名称
        tree : true,//当前列节点是否带图标
        align: "center",
        width : '100', //为*是自适应宽度
    },
    {
        name : "start_date",  //自定义字段
        label : "计划开始",  //用于界面展示的名称
        align: "center",
        width : '100', //为*是自适应宽度
    },
    {
        name : "duration",  //自定义字段
        label : "计划工期",  //用于界面展示的名称
        align: "center",
        width : '50', //为*是自适应宽度
    },
    {
        //新增按钮+号列
        name: "add",
        width: 44
    }];
    //如果type是里程碑的话文字右边显示 文字对应官方api
    gantt.templates.rightside_text = function(start, end, task){
        if(task.type == gantt.config.types.milestone){
            return task.text;
        }
        return "";
    };
    //配置gantt的官方自定义监听函数api
    this.$_initGanttEvents();

     //关键路径（代码版本不同 功能会失效）
     gantt.config.work_time = true;
     gantt.templates.timeline_cell_class = function (task, date) {
         if (!gantt.isWorkTime(date))
             return "week_end";
         return "";
     };
     //初始化甘特图容器  动态加载数据的时候要重新 gantt.init和 gantt.parse一次
     this.gantt.init(this.$refs.gantt)
     //加载数据
     this.gantt.parse(this.tasks);

功能实现

//撤销
revoke(){
    gantt.undo();
},
//反撤销
antiRevocation(){
    gantt.redo();
},
//删除
remove(){
    gantt.deleteTask(this.selectedTask);
},
//放大 需要配置zoom
enlarge(){
    gantt.ext.zoom.zoomOut();
},
//缩小
narrow(){
    gantt.ext.zoom.zoomIn();
},
//关键路径 会增加 class  gantt_critical_task
toggleCritical(){
    if (gantt.config.highlight_critical_path){
        gantt.config.highlight_critical_path = !true;
    } else{
        gantt.config.highlight_critical_path = true;
    }
    gantt.render();
},
/配置gantt 甘特图的监听api
  $_initGanttEvents: function () {
      //监听选择当前行的数据
      gantt.attachEvent('onTaskSelected', (id) => {
          let task = gantt.getTask(id)
          this.selectedTask = task.id
      });
      //为任务save保存之后事件，点击+按钮即可添加数据 添加数据厚触发
      gantt.attachEvent('onAfterTaskAdd', (id, task) => {
          console.log('新增数据',task);
          //init会出错 再次新增页面会报错空白
          gantt.render();// 新增数据后重新呈现整个甘特图否则不显示滚动条
      })
      //删除数据厚触发
      gantt.attachEvent('onAfterTaskDelete', (id) => {
          //删除的id
          console.log('删除的id',id);
      });
      //监听链接线
      gantt.attachEvent("onLinkCreated", function (link) {
          if(self.ganttType !='actual'){
              var curLink = link;
              var linkAll = gantt.getLinks();
              var flag='';
              if(linkAll.length>0){
                  for (let i = 0; i < linkAll.length; i++) {
                      if((curLink.source == linkAll[i].source && curLink.target == linkAll[i].target) || (curLink.source == linkAll[i].target && curLink.target == linkAll[i].source) ){
                          flag = false;
                          self.$message({
                              message: '每个任务只允许有一条连接线',
                              type: 'warning'
                          });
                          break;
                      }else{
                          flag = true;
                      }
                  }
              }else{
                  flag = true
              }
              return flag;
          }else{
              self.$message({
                  message: '实际任务禁止该操作',
                  type: 'warning'
              });
              return false;
          }

      });
  }

destroyed(){
//如果给次更新覆盖不了数据的话就手动全部清除一次
   this.gantt.clearAll();
}