甘特图 dhtmlxGantt插件

一：参考代码：

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

前端之甘特图-dhtmlx-gantt - 掘金

Dhtmlx甘特图简单实现 - 掘金

二：安装：

npm install dhtmlx-gantt --save

三：初始化

成果：

<template>
  <div id="gantt_here" style="width: 100%; height: 100%" />
</template>

<script>
import { gantt } from "dhtmlx-gantt"; // 核心模块
import "dhtmlx-gantt/codebase/dhtmlxgantt.css"; // 样式模块

export default {
  mounted() {
    gantt.init("gantt_here");
    gantt.parse({
      data: [
        {
            id: 1, // 任务条的唯一id
            text: "Project #2", //  任务名称
            start_date: "10-04-2024", // 任务开始时间
            duration: 18, // 任务时长
            progress: 0.4, // 任务进度
            open: true,
        },
        {
          id: 2,
          text: "Task #1",
          start_date: "02-04-2018",
          duration: 8,
          progress: 0.6,
          parent: 1,
        },
        {
          id: 3,
          text: "Task #2",
          start_date: "11-04-2018",
          duration: 8,
          progress: 0.6,
          parent: 1,
        },
      ],
      links: [
        {
          id: 1, //连线的唯一标识
          source: 1, // 源节点
          target: 2, // 目标节点
          type: "1", // 连线类型（0|1|2）标识是否有箭头
        },
        { id: 2, source: 2, target: 3, type: "0" },
       ],
    });
  },

  data() {
    return {
      tasks: [
        {
          id: 1,
          text: "Project #2",
          start_date: "2023-04-01",
          duration: 18,
          progress: 0.4,
          open: true,
        },
        {
          id: 2,
          text: "Task #1",
          start_date: "2023-04-02",
          duration: 8,
          progress: 0.6,
          parent: 1,
        },
        {
          id: 3,
          text: "Task #2",
          start_date: "2023-04-11",
          duration: 8,
          progress: 0.6,
          parent: 1,
        },
      ],
      links: [
        { id: 1, source: 1, target: 2, type: "1" },
        { id: 2, source: 2, target: 3, type: "0" },
      ],
    };
  },
};
</script>

​​​​完整效果图：

主界面：

空状态：

弹框：

​​​​完整代码：

<template>
  <div style="width: 100%; height: 100%">
    <div id="gantt_here" style="width: 100%; height: 100%" ref="ganttRef" />
  </div>
</template>

<script>
import { gantt } from "dhtmlx-gantt"; // 核心模块
import "dhtmlx-gantt/codebase/dhtmlxgantt.css"; // 样式模块
// import Dayjs from "dayjs";

export default {
  mounted() {
    this.initGantt();
  },

  data() {
    return {
      ganttRef: "",
      form: {},
      tasks: {
        data: [
          {
            id: 1,
            text: "Project #2",
            start_date: "2024-04-21",
            duration: 3,
            progress: 0.1,
            users: "1",
            open: true,
          },
          {
            id: 2,
            text: "Task #1",
            start_date: "2024-04-20",
            duration: 8,
            progress: 0.3,
          },
          {
            id: 3,
            text: "Task #2",
            start_date: "2024-04-25",
            duration: 8,
            progress: 0.4,
          },
        ],
        links: [
          {
            id: 1,
            source: 1,
            target: 2,
            type: "1",
          },
          { id: 2, source: 2, target: 3, type: "0" },
        ],
      },
      options: [
        { key: 1, label: "zs" },
        { key: 2, label: "ls" },
        { key: 3, label: "ww" },
      ],
      opts: [
        { key: 1, label: " 0% " },
        { key: 2, label: " 20% " },
        { key: 3, label: " 50% " },
        { key: 4, label: " 70% " },
        { key: 5, label: " 90% " },
        { key: 6, label: " 100% " },
      ],
    };
  },
  methods: {
    initGantt() {
      // 左侧数据
      gantt.config.columns = [
        {
          name: "text",
          label: "任务名称",
          resize: true,
          // width: 100,
          align: "center",
        },
        {
          name: "users",
          label: "负责人",
          resize: true,
          // width: 80,
          align: "center",
          template: function (item) {
            if (item.users == 1) {
              return "zs";
            }
            if (item.users == 2) return "ls";
            if (item.users == 3) return "ww";
            return "";
          },
        },
        {
          name: "start_date",
          label: "开始时间",
          resize: true,
          align: "center",
          // width: 80,
        },
        {
          name: "duration",
          label: "持续天数",
          resize: true,
          align: "center",
          // width: 80,
        },
        // {
        //   name: "progress",
        //   label: "进度",
        //   resize: true,
        //   align: "center",
        //   // width: 80,
        //   template: function (obj) {
        //     return `${obj.progress.toFixed(2) * 100}%`;
        //   },
        // },

        { name: "add", label: "" },
      ];
      // 自动调整网格的列以适应网格的宽度
      gantt.config.autofit = true;
      gantt.config.grid_width = 370; // 表格总体宽度  与 width: 80 二选一即可

      // 汉化（部分） -- 1
      // gantt.i18n.setLocale("cn");
      // 汉化 -- 2
      gantt.config.xml_date = "%Y-%m-%d"; // 日期格式化的匹配格式
      gantt.i18n.setLocale({
        date: {
          // 月 全称
          month_full: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          // 月 简称
          month_short: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          // 星期 全称
          day_full: [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
          ],
          // 星期 简称
          day_short: ["日", "一", "二", "三", "四", "五", "六"],
        },
        labels: {
          new_task: "新任务",
          icon_save: "保存",
          icon_cancel: "取消",
          icon_details: "Details",
          icon_edit: "编辑",
          icon_delete: "删除",
          gantt_save_btn: "新任务",
          gantt_cancel_btn: "新任务",
          gantt_delete_btn: "新任务",
          confirm_closing: "",
          confirm_deleting: "任务将被永久删除，您确定吗?",
          section_description: "描述",
          section_time: "时间",
          section_type: "类型",

          /* grid columns */
          // column_wbs: "WBS",
          // 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: "年",

          /* 信息框 */
          message_ok: "确定",
          message_cancel: "取消",

          /* 限制 */
          section_constraint: "限制",
          constraint_type: "限制类型",
          constraint_date: "限制日期",
          asap: "越早越好",
          alap: "越晚越好",
          snet: "开始时间不早于",
          snlt: "开始时间不迟于",
          fnet: "完成时间不早于",
          fnlt: "完成时间不迟于",
          mso: "必须重新开始",
          mfo: "必须完成",

          /* 资源控制 */
          resources_filter_placeholder: "筛选类型",
          resources_filter_label: "隐藏空 empty",
        },
      });

      // 没有数据的空状态
      gantt.config.show_empty_state = true;
      // 空状态的汉化
      gantt.ext.emptyStateElement.renderContent = function (container) {
        const placeholderTextElement = `<div class='gantt_empty_state_text'>
    <div class='gantt_empty_state_text_link' data-empty-state-create-task>
       点击这里</div>
    <div class='gantt_empty_state_text_description'>
       创建第一个项目</div>
    </div>`;
        const placeholderImageElement =
          "<div class='gantt_empty_state_image'></div>";

        const placeholderContainer = `<div class='gantt_empty_state'>
       ${placeholderImageElement}${placeholderTextElement}</div>`;
        container.innerHTML = placeholderContainer;
      };

      // 右侧日期设置
      gantt.config.scales = [
        { unit: "month", step: 1, format: "%Y年%F" },
        {
          unit: "day",
          step: 1,
          format: "%j号 周%D",
          css: function (date) {
            if (!gantt.isWorkTime(date)) {
              return "week-end";
            }
          },
        },
      ];
      gantt.config.scale_height = 60;

      // 右侧 开启文本工具
      gantt.plugins({
        tooltip: true,
      });
      // 自定义文本
      gantt.templates.tooltip_text = function (start, end, task) {
        return (
          "<b>开始时间:</b> " +
          gantt.templates.tooltip_date_format(start) +
          "<br/><b>结束时间:</b> " +
          gantt.templates.tooltip_date_format(end) +
          "<br/><b>持续时间:</b> " +
          task.duration +
          "天" +
          "<br><b>进度:</b> " +
          (task.progress.toFixed(2) * 100 + "%")
        );
      };
      // // 自定义右侧任务栏的格式
      // gantt.templates.task_text = function (start, end, task) {
      //   return "<b>任务名称:</b> " + task.text + ",<b> 负责人:</b> " + task.users;
      // };

      // 添加今日的 Marker Line
      gantt.plugins({
        marker: true,
      });
      gantt.addMarker({
        start_date: new Date(),
        text: "今日",
      });

      // 弹出层
      // 自定义弹框内容
      gantt.config.lightbox.sections = [
        {
          name: "details",
          height: 50,
          map_to: "text",
          type: "textarea",
        },
        {
          name: "time",
          map_to: "auto",
          type: "duration",
          time_format: ["%Y", "%m", "%d"],
        },
        {
          name: "users",
          map_to: "users",
          type: "select",
          options: this.options,
        },

        {
          name: "template",
          type: "template",
          map_to: "my_template",
        },
      ];
      // 自定义弹框命名
      gantt.locale.labels.section_details = "任务名称";
      gantt.locale.labels.section_users = "负责人";
      gantt.locale.labels.section_template = "进度";

      gantt.attachEvent("onBeforeLightbox", function (id) {
        var task = gantt.getTask(id);
        task.my_template =
          "<span id='title2'><strong>进度: </strong></span>" + task.progress.toFixed(2) * 100 + "%";
        return true;
      });

      gantt.config.show_links = false; // 禁用连线
      // gantt.config.readonly = false; //只读
      // gantt.config.drag_progress = false; // 禁用拖拽进度

      gantt.init("gantt_here");
      gantt.parse(this.tasks);
    },
  },
};
</script>