element ui加入甘特图

1. 效果图是这样,下面开始代码操作

2. cmd 中 或bash中 插入 npm i dhtmlx-gantt。npm先安装这个组件

npm i dhtmlx-gantt

3. 现在创建甘特图组件,@src\components\Gantt

一级目录 SRC

二级目录 components

三级目录 需要创建目录Gantt

下面是文件目录截图,需要创建index.vue文件

4.index.vue 内容 内联代码片。

index.vue内容，可自行修改

<template>
    <div class="gantt_control">
      <div ref="gantt" style='width:100%; height:90%'  ></div>
    </div>
</template>

<script>
import {gantt} from 'dhtmlx-gantt'
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {data: [], user: [],userGroups:[],type:1}
      }
    },
  },
  mounted: function () {
    
    gantt.locale={
    date: {
        month_full: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        day_short: ["日", "一", "二", "三", "四", "五", "六"]
    },
    labels: {
        dhx_cal_today_button: "今天",
        day_tab: "日",
        week_tab: "周",
        month_tab: "月",
        new_event: "新建日程",
        icon_save: "保存",
        icon_cancel: "关闭",
        icon_details: "详细",
        icon_edit: "编辑",
        icon_delete: "删除",
        confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
        confirm_deleting: "是否删除日程?",
        section_description: "描述",
        section_time: "时间范围",
        section_type: "类型",
        /* grid columns */
        column_text: "任务名",
        column_start_date: "开始时间",
        column_end_date: "结束时间",
        column_duration: "周期",
        column_add: "",
        /* link confirmation */
        link: "关联",
        confirm_link_deleting: "将被删除",
        link_start: " (开始)",
        link_end: " (结束)",
        type_task: "任务",
        type_project: "项目",
        type_milestone: "里程碑",
        minutes: "分钟",
        hours: "小时",
        days: "天",
        weeks: "周",
        months: "月",
        years: "年"
    }
  }
   

   gantt.config.xml_date = "%Y-%m-%d %H:%i";
  gantt.plugins({
      quick_info: true,
      grouping:true,
    });


  gantt.templates.task_class = function (start, end, task) {
		switch (task.task_status) {
			case 2:
        if(task.is_timeout==1 ){
          return "two timeout"
        }else{
          return "two ";
        }
				break;
			case 3:
        if(task.is_timeout==1){
          return "three timeout"
        }else{
          return "three ";
        }
				break;
      case 4:
        if(task.is_timeout==1){
          return "four timeout"
        }else{
          return "four ";
        }
				break;
      case 5:
        if(task.is_timeout==1){
          return "five timeout"
        }else{
          return "five ";
        }
				break;
      default:
        return "one"
        break;
		}
	};


  gantt.templates.grid_row_class = function (start_date, end_date, item) {
		if (item.is_task == 2) return "bug";
	};

  gantt.config.grouping = true;

	function byId(list, id) {
		for (var i = 0; i < list.length; i++) {
			if (list[i].key == id)
				return list[i].label || "";
		}
		return "";
	}

  gantt.attachEvent('onTaskDblClick', (id) => {
      let task = gantt.getTask(id);
      this.$emit('task-dblclicked', task);
});

  gantt.serverList("stage",this.$props.tasks.stage);
  gantt.serverList("user",this.$props.tasks.user);
  gantt.serverList("userGroups", this.$props.tasks.userGroups);
  gantt.serverList("data", this.$props.tasks.data);


// 列
	gantt.config.columns = [
		{ name: "text", label: "任务名称", tree: true},
		{ name: "user", width: 200, label: "用户", align: "center", template: function (item) {
			return byId(gantt.serverList('user'), item.user)
		}}

	];


  gantt.init(this.$refs.gantt);
  gantt.sort("start_date");
  gantt.parse(this.$props.tasks)

  
},
watch: {
    tasks: {
      handler(newvalue,oldvalue){
        this.$props.tasks.data = newvalue.data
        if(this.$props.tasks.type==2){
          this.groups()
        }else{
          this.getUser()
        }
      },
      deep:true,
      immediate:false
    }
  },
  methods: {
      groups(){
          gantt.clearAll()
            gantt.refreshData()
          gantt.serverList("user",this.$props.tasks.user);
          gantt.serverList("userGroups", this.$props.tasks.userGroups);
          gantt.serverList("data", this.$props.tasks.data);
          this.showGroups('userGroups')
          gantt.parse(this.$props.tasks)
      },
      getUser(){
        gantt.clearAll()
        gantt.refreshData()
        console.log(this.$props.tasks.stage)
          console.log(this.$props.tasks)
        gantt.serverList("stage",this.$props.tasks.stage);
        this.showGroups("stage")
        gantt.parse(this.$props.tasks);
      },
      showGroups(listname) {
        if (listname) {
          var relation = listname == 'userGroups' ? 'user' : listname;
          gantt.groupBy({
            groups: gantt.serverList(listname),
            relation_property: relation,
            group_id: "key",
            group_text: "label"
          });
          gantt.sort("start_date");
        } else {
          gantt.groupBy(false);
        }
      },
        
  },
}
</script>
 
<style lang="scss">
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
  .gantt_cal_light{
    display: none;
    visibility:hidden
  }
 
  .gantt_add{
    display: none;
  }

    .userGroup{
      padding-left: 10px;
    }
    
    .gantt_cal_quick_info{
      display: none;
    }
    .gantt_grid_head_add {
      display: none;
    }
   .nested_task .gantt_add{
    display: none !important;
}
.gantt_message_area {
  display: none;
}

.gantt_delete_btn_set{
  display: none;
}

.summary-row,
		.summary-row.odd {
			background-color: #EEEEEE;
			font-weight: bold;
		}

		.gantt_grid div,
		.gantt_data_area div {
			font-size: 12px;
		}

		.summary-bar {
			opacity: 0.4;
		}
    .gantt_control{
      text-align: center;
      height: 30px;
      .groups{
        height: 100%;
        cursor: pointer;
        margin-left: 10px;
        color: #fff;
        border-radius: 2px;
        background-color: #3db9d3;
        border: 1px solid #2898b0;
      }
    }

 
    .one{
			background-color: #3db9d3;
    }
    .timeout{
      border:3px solid red;
    }


    .two {
			background-color: #fff;//进行中
		}
    
    .two .gantt_task_progress{
        	background: #FFFF00;
    }
    .three {
			background-color: #fff;//暂停
		}
    .three .gantt_task_progress{
        	background: #FFC000;
    }


    .four{
			background-color: #fff;
		}
    .four .gantt_task_progress{
        	background: #00B0F0;
    }
    .five {
	    background-color: #fff;//完成
		}

    .five .gantt_task_progress {
			background: #00B050;
		}


    .gantt_task_content{
      color:#000
    }



    


    .bug .gantt_cell, .odd.red .gantt_cell,
		.bug .gantt_task_cell, .odd.red .gantt_task_cell {
			background-color: #FDE0E0;
		}


</style>

5.注释信息注释。

 //gantt.locale  主要设置时间轴的相关信息 
 //gantt.config 主要是是配置信息，如需要的时间格式,等
 //gantt.plugins({
      quick_info: true,
      grouping:true,
  }); 主要是启用某些包的插件，如这里的group是分组
  //gantt.templates.task_class  主要给 任务添加class类 比如要增加颜色 和 进度颜色
  //grid_row_class 给侧边栏添加class
 //gantt.attachEvent 添加自定义事件
 //gantt.config.columns 列值得定义
 //  gantt.init(this.$refs.gantt) 初始化
 //gantt.sort 排序
 // gantt.parse(this.$props.tasks) 应该是填充入参数

//config
参考index.vue

6. 引入index.vue组件 下面展示一些 引入组件。

//taskDblClick 双击事件触发
//logTaskUpdate 任务更新触发
//logLinkUpdate 连接线更新触发
//selectTask 任务选择触发

// js
import Gantt from '@/components/Gantt';

//html
 <gantt class="ganttle-container"  ref="ganttchart"  :tasks="tasks"  @task-dblclicked="taskDblClick"   @task-updated="logTaskUpdate" @link-updated="logLinkUpdate"  @task-selected="selectTask" ></gantt>

7. 更多的API参考https://docs.dhtmlx.com/gantt/api__gantt_refreshdata.html