vue怎么制作甘特图——dhtmlx-gantt

引入

//7.0不支持中文
npm i dhtmlx-gantt@6.0.0  -s

封装组件gantt

<template>
    <div ref="gantt"></div>
</template>
 
<script>
import { gantt } from 'dhtmlx-gantt';
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return { data: [], links: [] }
      }
    }
  },

  mounted: function () {
    //日期格式化
    gantt.config.xml_date = "%Y-%m";

    gantt.config.scale_unit = "year";	//按月显示
    gantt.config.date_scale = "1";		//设置时间刻度的格式（X轴） 多个尺度

    gantt.config.scale_height = 50; //设置时间刻度的高度和网格的标题

    gantt.config.subscales = [
      { unit: "month", step: 1, date: "%M" }
    ];			//指定第二个时间刻度

    //左侧是否自适应
    gantt.config.autofit = true;
    //左侧宽
    gantt.config.grid_width = 200;
    //取消连线
    gantt.config.drag_links = false;
    //只读
    gantt.config.readonly = false;
    //右侧显示列名
    gantt.config.date_scale = "%Y-%m-%d";
    //自动调整图表坐标轴区间用于适配task的长度
    gantt.config.fit_tasks = true;
    //弹窗宽
    gantt.config.wide_form = false;
    //汉化
    gantt.locale = {
      date: {
        month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        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: "类型",
        section_text: "任务名称:",
        section_color: "颜色:",

        /* grid columns */

        column_text: "项目节点名称",
        column_start_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.columns = [
      { name: "text", label: "任务名称", tree: true, width: '*' },
      // { name: "start_date", label: "开始时间", align: "center" },
      // { name: "end_date", label: "结束时间", align: "center" },
      // {
      //   name: "progress", label: "进度", align: "center",
      //   template: function (obj) {
      //     return (Math.floor(obj.progress * 100)).toString() + '%'
      //   }
      // },
      // { name: "add", label: "" },
    ];
    //弹出层
    gantt.config.lightbox.sections = [
      { name: "text", height: 70, map_to: "text", type: "textarea", focus: true, width: 200 },
      { name: "time", height: 30, map_to: "auto", type: "time", time_format: ["%Y", "%m", "%d"] },
      {
        name: "color", height: 30, map_to: "color", type: "select", options: [
          { key: "#3db9d3", label: "蓝色" },
          { key: "#33cc33", label: "绿色" },
          { key: "#FF8247", label: "橙色" },
          { key: "#ff6633", label: "红色" }
        ]
      },
      { name: "description", height: 70, map_to: "description", type: "textarea" }
    ];
    //弹窗标题 日期范围
    gantt.templates.task_time = function (start, end, task) {
      return moment(start).format('YYYY-MM-DD') + " - " + moment(end).format('YYYY-MM-DD');
    };
    //弹窗标题 计划名称
    gantt.templates.task_text = function (start, end, task) {
      return task.text;
    };
    gantt.init(this.$refs.gantt);
    gantt.parse(this.$props.tasks);
    let this_ = this
    //添加后触发
    gantt.attachEvent("onAfterTaskAdd", function (id, item) {
      console.log("添加后触发");
      this_.changeTask();
    });
    //移动进度后触发
    gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
      console.log("移动进度后触发");
      this_.changeTask();
    });
    //移动任务后触发
    gantt.attachEvent("onAfterTaskMove", function (id, parent, tindex) {
      console.log("移动任务后触发");
      this_.changeTask();
    });
    //删除任务后触发
    gantt.attachEvent("onAfterTaskDelete", function (id, item) {
      console.log("删除任务后触发");
      this_.changeTask();
    });
    //修改任务后触发
    gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
      console.log("修改任务后触发");
      this_.changeTask();
    })
    //保存验证
    gantt.attachEvent("onLightboxSave", function (id, item) {
      if (!item.text) {
        gantt.message({ type: "error", text: "请填写任务名称!" });
        return false;
      }
      return true;
    });
  }
}
</script>
 
<style>
@import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
</style>

使用这个甘特图插件gantt

<template>
    <div class="container">
        <gantt class="left-container" :tasks="tasks"></gantt>
    </div>
</template>
 
<script>
import Gantt from '@/components/Gantt.vue';
// 中文引入
// import "dhtmlx-gantt/codebase/locale/locale_cn.js";
export default {
  name: 'app',
  components: { Gantt },
  data () {
    return {
      tasks: {
        data: [
          {
            id: 1, text: "合同签订", start_date: "2021-01-01", duration: 45, order: 10,
            progress: 0.4, open: true
          },
          {
            id: 11, text: "第一次付款", start_date: "2021-03-01", duration: 45, order: 10,
            progress: 0.6, parent: 1
          },
          {
            id: 12, text: "第二次付款", start_date: "2021-12-01", duration: 45, order: 20,
            progress: 0.6, parent: 1
          },
          {
            id: 13, text: "第三次付款", start_date: "2022-01-01", duration: 45, order: 20,
            progress: 0.6, parent: 1
          },
          {
            id: 2, text: "项目实施", start_date: "2021-01-01", duration: 45, order: 20,
            progress: 0.4, open: true
          },
          {
            id: 21, text: "准备阶段", start_date: "2021-03-01", duration: 78, order: 10,
            progress: 0.6, parent: 2
          },
          {
            id: 22, text: "设计阶段", start_date: "2021-04-01", duration: 100, order: 20,
            progress: 0.6, parent: 2
          },
          {
            id: 24, text: "系统开发", start_date: "2021-06-01", duration: 80, order: 40,
            progress: 1, parent: 2
          },
          {
            id: 25, text: "系统测试", start_date: "2021-10-01", duration: 40, order: 50,
            progress: 0.4, parent: 2
          },
          {
            id: 26, text: "上线准备", start_date: "2021-12-01", duration: 45, order: 60,
            progress: 0.4, parent: 2
          }
        ],
        // 脱线
        links: [
          // { id: 1, source: 1, target: 2, type: '0' }
        ]
      },
    }
  }
}
</script>

<style>
.container {
  height: 450px;
  width: 100%;
}
.left-container {
  overflow: hidden;
  position: relative;
  height: 450px;
}
</style>

效果图