dhtmlx-gantt甘特图的使用

1.安装

npm i dhtmlx-gantt

2.组件导入

import gantt from "dhtmlx-gantt"; // 引入模块
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";    //引入甘特图样式

3.dom数据

<div ref="gantt" class="gantt-container" />

4.data数据

　 // tasks 包含以下基础字段 id: 任务唯一标识

  // text: 任务名称

  // start_date: 任务开始时间

  // duration: 任务时长

  // progress: 任务进度

tasks: {
        data: [
          { "id": "1635835705701744641", "text": "345分项工程分项工程分项工程", "start_date": "2022-12-01", "beginTime": "2022-12-01", "endTime": "2023-03-14", "limitTime": 103, "duration": 103, "progress": 1 },
          { "id": "1635835705701744642", "text": "111", "start_date": "2023-03-14", "beginTime": "2023-03-14", "endTime": "2023-03-17", "limitTime": 3, "duration": 3, "progress": 1 },
          { "id": "1635835705701744643", "text": "分项工程", "start_date": "2023-03-13", "beginTime": "2023-03-13", "endTime": "2023-03-23", "limitTime": 10, "duration": 10, "progress": 1 },
          { "id": "1635835705701744644", "text": "分项工程1", "start_date": "2023-03-30", "beginTime": "2023-03-30", "endTime": "2023-04-20", "limitTime": 21, "duration": 21, "progress": 1 },
          { "id": "1635835705701744645", "text": "分项工程2", "start_date": "2023-03-21", "beginTime": "2023-03-21", "endTime": "2023-03-29", "limitTime": 8, "duration": 8, "progress": 1 },
          { "id": "1635835705701744646", "text": "分项工程3", "start_date": "2023-03-23", "beginTime": "2023-03-23", "endTime": "2023-03-31", "limitTime": 8, "duration": 8, "progress": 1 },
          { "id": "1635835705701744647", "text": "6", "start_date": "2023-03-29", "beginTime": "2023-03-29", "endTime": "2023-03-30", "limitTime": 1, "duration": 1, "progress": 1 },
          { "id": "1635835705701744648", "text": "1", "start_date": "2023-03-16", "beginTime": "2023-03-16", "endTime": "2023-03-17", "limitTime": 1, "duration": 1, "progress": 1 },
          { "id": "1635835705701744649", "text": "999", "start_date": "2023-08-31", "beginTime": "2023-08-31", "endTime": "2024-02-29", "limitTime": 182, "duration": 182, "progress": 1 }
        ],
      },
scalesOptions: [{ label: '周', value: 'week' }, { label: '月', value: 'month' }],
// 展示单位
scales: 'week',

 

5.js代码

 mounted () {

　　　　// 清空缓存

　　　　gantt.clearAll()

this.initGantt()
 },

initGantt () {
      gantt.config.order_branch = false; //左边表格 列可以拖动排序
      gantt.config.show_progress = true; //取消右边表格进度条显示与拖动
      gantt.config.min_grid_column_width = 120; //设置左侧表格宽度
      gantt.config.show_links = false; // 禁用连线 
      gantt.config.drag_progress = false; //禁用工作进度拖拽
      gantt.config.duration_unit = 'day'; // 设置任务分段参数以及单位
      gantt.config.duration_step = 1;

　　　　　　　gantt.config.drag_resize = false; // 可以通过拖放来调整任务大小

     　　　　gantt.config.drag_move = false; // 可以通过拖放来移动任务

      gantt.i18n.setLocale("cn");//设置语音为中文

      //自定义左侧 头部列的内容(方式1)
      gantt.config.columns = [
        {
          name: 'text',
          label: '分项工程',
          tree: true,
          width: '*',
          align: 'left',
          template: function (obj) { return `<span class="gantt-name-box" title="${obj.text}">${obj.text}</span>` }
        },
        {
          name: 'beginTime',
          label: '开始日期',
          width: '100',
          align: 'center',
          template: function (obj) {
            return obj.beginTime;
          }
        },
        {
          name: 'endTime',
          label: '结束日期',
          width: '100',
          align: 'center',
          template: function (obj) {
            return obj.endTime;
          }
        },
        {
          name: 'limitTime',
          label: '工期',
          width: '100',
          align: 'center',
          template: function (obj) {
            return `${obj.limitTime}天`;
          }
        }
      ];


      gantt.config.xml_date = '%Y-%m-%d'; // 日期格式化的匹配格式
      gantt.config.scale_height = 90; // 日期栏的高度

      const scalesInfo = {
        week: [
          { unit: 'year', step: 1, format: '%Y' },
          { unit: 'week', step: 1, format: this.weekScaleTemplate },
        ],
        month: [
          { unit: 'year', step: 1, format: '%Y' },
          { unit: 'month', step: 1, format: '%M' },
        ],
      }
      gantt.config.scales = scalesInfo[this.scales];

      // 添加今日的Marker
      gantt.plugins({
        marker: true
      });
      gantt.addMarker({
        start_date: new Date(),
        text: '今日'
      });
      // 添加今日的Marker end
      //其他事件 (禁用原来自带的弹窗)
      gantt.attachEvent(
        'onBeforeLightbox',
        function (id) {
          console.log(1);
          return false; // 返回 false
        },
        {}
      );
      //禁用任务双击进入编辑事件
      gantt.attachEvent(
        'onTaskDblClick',
        function (id, e) {
          console.log('id', id, e);
          dialogVisible.value = true;
          return false;
        },
        {}
      );
      // 给年月展示框加类名
      // gantt.templates.scale_cell_class = () => 'month-box';
      gantt.init(this.$refs.gantt); //这里可以通过ref挂载 或者 id选择器挂载
      gantt.parse(this.tasks);
    },
    weekScaleTemplate (date) {
      // 可以时使用dayjs 处理返回
      const dateToStr = gantt.date.date_to_str('%d');
      const mToStr = gantt.date.date_to_str('%M');
      const endDate = gantt.date.add(gantt.date.add(date, 1, 'week'), -1, 'day');
      // 处理一下星期
      return `${mToStr(endDate)}${dateToStr(endDate)}日`;
    },

6.css代码

<style lang="scss" scoped>
.gantt-container {
  height: calc(100vh - 200px);
}

// 字数多时隐藏改为...
::v-deep .gantt-name-box {
  box-sizing: border-box;
  display: block;
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

 7.api文档地址 

https://docs.dhtmlx.com/gantt/api__refs__gantt.html