【VUE甘特图实现】

1、VUE页面甘特图实现效果

2、甘特图实现过程

2.1、引入Dhtmlx Gantt组件

npm install dhtmlx-gantt

2.2、VUE页面引入组件资源

// 引入 dhtmlx-gantt 的样式和 JS 文件
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';  // 样式文件
import gantt from 'dhtmlx-gantt';  // dhtmlx-gantt 库

3、甘特图实现效果

3.1、初始化甘特图

    //初始化甘特图
    init() {
   
      //初始化甘特图
      gantt.init("gantt-chart");
      gantt.config.grid_width = 600; // 左侧列表宽度
      gantt.config.min_grid_column_width = 120; // 设置调整网格大小时左侧每一格的最小宽度---优先于grid_width
      gantt.config.scale_height = 80; // 设置时间刻度的高度和左侧表格头部高度
      gantt.config.row_height = 35; //设置行高
      //gantt.config.scale_width = 200; // 设置时间轴主单位的宽度为 100px
      //gantt.config.column_width = 150; // 每列宽度（日期的列宽）

      gantt.config.readonly = true; // 只读模式
      gantt.config.fit_tasks = true; // 是否自动延长时间范围以适应所有显示的任务--效果：拖动任务时间范围延长，可显示区域会自动变化延长
      gantt.config.autofit = true; // 宽度是否自适应
      gantt.config.show_quick_info = true; // 是否显示quickInfo(甘特图详情小框)

      gantt.config.work_time = true; // 是否允许在工作时间而不是日历时间中计算任务的持续时间
      // 给时间Cell添加类名
      gantt.templates.timeline_cell_class = function (task, date) {
   
        if (!gantt.isWorkTime({
    task: task, date: date })) return "weekend";
      };
      // 给对应的时间线表格头部添加类名
      gantt.templates.scale_cell_class = function (date) {
   
        if (!gantt.isWorkTime(date)) return "weekend";
      };

      // 设置甘特图的初始日期及结束日期，也可设置动态日期
      gantt.config.start_date = new Date(2020, 1, 1);  // 月份从0开始，0代表1月
      //gantt.config.end_date = new Date(2050, 1, 1); // 设置结束日期为2020年12月31日
      //设置日期格式
      gantt.config.date_format = "%Y-%m-%d"; // 设置日期格式
      //时间轴展示
      gantt.config.scale_unit = "month";  // 主时间轴单位为月份
      gantt.config.date_scale = "%Y年 %m月";  // 显示月和年（例如：01 2024）

      // 配置子时间轴，首先显示月份，再显示具体日期
      gantt.config.subscales = [
        {
    unit: "day", step: 1, date: "%d" }  // 子时间轴显示日期（例如：01, 02, 03）
      ];
      // 配置时间轴，主单位为月，副单位为日
      gantt.config.scale_unit = "month";  // 主时间单位为“月”
      gantt.config.subscales = [
        {
    unit: "day", step: 1, template: "%d日" }         // 第二行：显示日期
      ];

      //配置列标题
      gantt.config.columns = [
        {
   
          name: "text", label: "生产计划单号", width: 80, template: function (task) {
   
            return `<div style="text-align: center; font-size: 14px; color: black;">${
     task.text}</div>`;
          }
        },  // 修改任务名称的列标题
        {
   
          name: "start_date", label: "开始时间", width: 50, template: function (task) {
   
            return `<div style="text-align: center; font-size: 14px; color: black;">${
     gantt.date.date_to_str("%Y-%m-%d")(task.start_date)}</div>`;
          }
        },  // 修改开始时间的列标题
        {
   
          name: "end_date", label: "结束时间", width: 50, template: function (task) {
   
            return `<div style="text-align: center; font-size: 14px; color: black;">${
     gantt.date.date_to_str("%Y-%m-%d")(task.end_date)}</div>`;
          }
        },  // 修改开始时间的列标题
        {
   
          name: "duration", label: "任务天数", width: 50, template: function (task) {
   
            return `<div style="text-align: center; font-size: 14px; color: black;">${
     task.duration}</div>`;
          }
        }   // 修改持续时间的列标题

      ];

      gantt.plugins({
   
        tooltip: true, // 鼠标放上提示框
      });

      gantt.templates.tooltip_text = function (start, end, task) {
   
        // 自定义tooltip的内容
        return `
            <div style="display: flex; flex-wrap: wrap; align-items: center; width: 200px;">
                <div style="width: 100%; line-height: 18px; font-weight: bold;">工单编号：${
     task.text}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品编码：${
     task.productCode}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品名称：${
     task.productName}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">产品数量：${
     task.productQty}</div>
                <div style="width: 100%; line-height: 18px; font-weight: bold;">完工数量：${
     task.finishQty}</div>
                <div style="width: 100%; line-height: 18px;">持续时间：${
     task.duration} 天</div>
                <div style="width: 100%; line-height: 18px;">开始时间：${
     gantt.date.date_to_str('%Y-%m-%d')(task.start_date)}</div>
                <div style="width: 100%; line-height: 18px;">结束时间：${
     gantt.date.date_to_str('%Y-%m-%d')(task.end_date)}</div>
            </div>
        `;
      };

      gantt.init("gantt-chart");
    },

3.2、甘特图数据源：接口获取/或者给测试数据

    //甘特图数据源
    getProductData() {
   
      this.http.post('/api/Production_ProductPlan/接口方法名', {
   
      }).then((response) => {
   
        console.log("甘特图数据源:", response);

        if (response.status == true) {
   
          const data = response.data;
          console.log("数据源:", response.data);
          // 格式化数据以匹配甘特图的要求
          const formattedData = data.result.map(item => ({
   
            id: item.productPlan_Id,
            text: item.productPlanCode,
            start_date: new Date(item.planStartDate),
            end_date: new Date(item.planEndDate),
            duration: 0