甘特图gannt vue2；单行对应单条数据和多条数据的展示

标题效果图

单数据渲染

多条数据

<template>
  <div class="hello">
    <h1>甘特Test</h1>
    <!-- 渲染位置 -->
    <div ref="gannt" id="ganntTest" class="gantt-container"></div>
  </div>
</template>

引入

import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

数据

tasks: {
        // 单数据渲染格式
        // data: [
        //   {
        //     id: 1,
        //     name: "Project #2",
        //     start_date: "2024-1-2",
        //     duration: 3,
        //     order: 10,
        //     progress: 0.4,
        //     open: true,
        //     label:
        //       '<span style="color:#0077c0;">Project #2</span><br/><span style="color:#0077c0;">好好说说</span>',
        //   },
        //   {
        //     id: 2,
        //     name: "Task #1",
        //     start_date: "2023-12-18",
        //     duration: 8,
        //     order: 10,
        //     progress: 0.5,
        //     // parent: 0,
        //   },
        //   {
        //     id: 3,
        //     name: "Task #1",
        //     start_date: "2023-12-20",
        //     duration: 8,
        //     order: 10,
        //     progress: 0.5,
        //     // parent: ,
        //   },
        //   {
        //     id: 4,
        //     name: "Task #2",
        //     start_date: "2023-12-26",
        //     duration: 4, //总天数
        //     order: 30,
        //     // progress: 0.6,//进度占比
        //     // parent: 1,
        //   },
        // ],
        //  多条数据渲染格式
        data: [
          {
            id: 1,
            name: "名称",
            age: 18,
            render: "split",
            text: "",
          },
          // 第一行对应的第一条数据
          {
            id: 100,
            parent: 1,
            start_date: "2024-1-20 07:20:00",
            label: '<span style="color:#0077c0;">事情一222</span>',
            end_date: "2024-1-22 07:20:00",
            text: "事情一111",
            color: "#F56C6C",
          },
            // 第一行对应的第二条数据
          {
            id: 101,
            parent: 1,
            label: '<span style="color:#0077c0;">事情一2test</span>',
            start_date: "2024-1-20 23:20:00",
            end_date: "2024-1-21 20:00:00",
            text: "事情一",
            color: "#67C23A",
          },
          {
            id: 102,
            parent: 1,
            start_date: "2024-1-20 07:20:00",
            end_date: "2024-08-22 20:00:00",
            text: "事情二",
            color: "#E6A23C",
          },
          {
            id: 103,
            parent: 1,
            start_date: "2024-1-20 07:20:00",
            end_date: "2024-1-30 20:00:00",
            text: "事情三",
            color: "#909399",
          },
          //第二组
          {
            id: 2,
            name: "设备2",
            age: 16,
            render: "split",
            open: true,
            text: "",
          },
          {
            id: 104,
            parent: 2,
            start_date: "2024-1-04 00:00:00",
            end_date: "2024-1-04 00:00:00",
            text: "事情一",
            color: "#E6A23C",
          },
          {
            id: 105,
            parent: 2,
            start_date: "2024-1-20 22:10:00",
            end_date: "2024-1-22 10:00:00",
            text: "事情四",
            color: "#909399",
          },
          {
            id: 106,
            parent: 2,
            start_date: "2024-1-1 17:20:00",
            end_date: "2024-1-3 20:00:00",
            text: "事情五",
            color: "#67C23A",
          },
          {
            id: 107,
            parent: 2,
            start_date: "2024-1-3 00:20:00",
            end_date: "2024-1-5 20:00:00",
            text: "事情六",
            color: "#F56C6C",
          },
          //第三组
          {
            id: 3,
            name: "设备2",
            age: 16,
            render: "split",
            open: true,
            text: "事情1",
            color: "#E6A23C",
          },
          {
            id: 104,
            parent: 2,
            start_date: "2024-1-19 00:20:00",
            end_date: "2024-1-20 20:00:00",
            text: "事情一",
            color: "#E6A23C",
          },
          {
            id: 305,
            parent: 3,
            start_date: "2024-1-20 22:10:00",
            end_date: "2024-1-21 10:00:00",
            text: "事情四",
            color: "#909399",
          },
          {
            id: 306,
            parent: 3,
            start_date: "2024-1-21 17:20:00",
            end_date: "2024-1-22 20:00:00",
            text: "事情五",
            color: "#67C23A",
          },
          {
            id: 307,
            parent: 3,
            start_date: "2024-1-3 00:20:00",
            end_date: "2024-01-6 20:00:00",
            text: "事情六",
            color: "#F56C6C",
          },
        ],
        //连接线
        // links: [
        //   { id: 1, source: 1, target: 2, type: "1" },
        //   { id: 2, source: 2, target: 3, type: "0" },
        // ],
      },

使用

    init2() {
      var textEditor = { type: "text", map_to: "text" };
      // var startDateEditor = { type: "date", map_to: "start_date" };
      gantt.config.columns = [
        {
          name: "text",
          /*height:'40',*/
          label: "项目名称",
          editor: textEditor,
          resize: true,
          tree: true,
          width: "230",
        },
        // {
        //   name: "start_date",
        //   label: "项目开始时间",
        //   align: "center",
        //   editor: startDateEditor,
        //   resize: true,
        //   tree: false,
        //   width: "100",
        // },
      ];
      gantt.clearAll();
      gantt.config.xml_date = "%Y-%m-%d %H:%i";
      gantt.config.scale_height = 50; //设置甘特图的表头高度
      gantt.config.show_errors = false;

      //鼠标移入展示信息
      gantt.plugins({
        tooltip: true,
      });

      //时间展示 2021-10-11 07:22
      gantt.templates.tooltip_date_format =
        gantt.date.date_to_str("%Y-%m-%d %H:%i");
      //鼠标移入展示信息
      gantt.config.scale_unit = "day";
      // gantt.config.scale_unit = "month";
      gantt.config.readonly = true; //甘蔗图只读属性
      gantt.config.round_dnd_dates = false; //将任务开始时间和结束时间自动“四舍五入'
      gantt.config.root_id = "root";
      //添加taba栏
      gantt.config.columns = [
        { name: "name", label: "名称", align: "center", width: 120 },
      ];
      gantt.config.show_tasks_outside_timescale = true;
      // gantt.parse({ data: this.dataList });
      // gantt.attachEvent("onTaskClick", function (e, data) {
      //   _this.ganttClick(e, data);
      // });
      //悬浮
      gantt.templates.tooltip_text = gantt.templates.tooltip_text = function (
        start,
        end,
        task
      ) {
        if (
          task.text &&
          task.start_date &&
          task.end_date &&
          task.dispatchingNum
        ) {
          return (
          //悬浮展示的内容
            "<p style='font-size: 14px'>" +
            '<span style="font-weight: 700;">名称: </span>' +
            '<span style="font-weight: 500;">' +
            task.dispatchingNum +
            "</span>" +
            "<br/>" +
            '<span style="font-weight: 700;">名称2: </span>' +
            '<span style="font-weight: 500;">' +
            task.mouldManageCode +
            "</span>" +
        
          );
        } else {
          return task.label;
        }
      };
      gantt.config.start_date = new Date(
        new Date(new Date().toLocaleDateString()).getTime()
      );
      gantt.config.end_date = new Date().setDate(new Date().getDate() + 30);
      // gantt.config.date_scale = "星期" + "%D";
      gantt.templates.date_scale = "%Y-%m-%d";
      //禁用拖拽项 拖拽类型
      // gantt.attachEvent("onBeforeTaskDrag", function (id, mode, e) {
      gantt.attachEvent("onBeforeTaskDrag", function (mode) {
        var modes = gantt.config.drag_mode;
        switch (mode) {
          case modes.move:
            break;
          case modes.resize:
            break;
          case modes.progress:
            break;
        }
      });
      gantt.init("ganntTest");
      gantt.parse(this.tasks);
    },

样式

<style scoped>
.gantt-container {
  background: #eddddd;
  height: 250px;
  width: 100%;
}
.ganntClass {
  background-color: red;
  padding: 10px;
  border-radius: 4px;
}
</style>