Vue 和 dhtmlx-gantt 实现图表构建动态多级甘特图效果 ，横坐标为动态刻度不是日期

注意事项：1、横坐标根据日期转换成时间刻度在（ gantt.config.scales）；2、获取时间刻度的最大值（findMaxRepairTime）；3、甘特图多级列表需注意二级三级每个父子id需要唯一（convertData）

1. 安装依赖

   npm install dhtmlx-gantt --save

2. 在当前页引入和配置 dhtmlx-gantt

   import gantt from "dhtmlx-gantt"; // 引入模块
   // import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
   import "dhtmlx-gantt/codebase/skins/dhtmlxgantt_terrace.css"; //皮肤
   import "dhtmlx-gantt/codebase/locale/locale_cn"; // 本地化
   // import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js"; //任务条悬浮提示
   

    

3. 创建甘特图容器

   
   
       
       initMount() {
         let convertedData = this.convertData(this.aircraftData);
         this.tasks.data = convertedData;
         let maxNum = this.findMaxRepairTime(this.aircraftData);
         gantt.config.start_date = new Date(2025, 0, 16, 0, 0, 0);
         gantt.config.end_date = new Date(
           2025,
           0,
           16,
           Math.floor(maxNum / 60),
           maxNum % 60,
           0
         );
   
         gantt.config.autosize = true;
         gantt.config.readonly = true;
         gantt.config.show_grid = true;
         gantt.config.columns = [
           { name: "text", label: "名称", tree: true, width: "260" },
         ];
         gantt.config.show_task_cells = true;
   
         // 设置时间刻度
         gantt.config.scales = [
           {
             unit: "minute",
             step: 10,
             format: function (date) {
               // 提取小时和分钟
               var hours = date.getHours();
               var minutes = date.getMinutes();
   
               // 将小时转换为分钟，并加上额外的分钟数
               var totalMinutes = hours * 60 + minutes + 10;
   
               return totalMinutes;
             },
           },
         ];
   
         // 设置任务条上展示的内容，参数task会返回当前任务的数据
         gantt.templates.task_text = function (start, end, task) {
             return '
   ' + task.text + "-" + task.time + "分钟" + '
   ';
           };
         // gantt.config.xml_date = '%Y-%m-%d %H:%i:%s';
   
         this.initData();
         // 初始化甘特图
         gantt.init(this.$refs.gantt);
         gantt.clearAll();
         //销毁
         // gantt.destructor()
         gantt.parse(this.tasks);
       },
      //初始化甘特图
       initData: function () {
         this.tasks.data.map(function (current, ind, arry) {
           var newObj = {};
           if (current.type) {
             if (current.type == 1) {
               newObj = Object.assign({}, current, { color: "#67c23a" });
             }
             //   } else if (current.type == 2) {
             //     newObj = Object.assign({}, current, { color: "#fec0dc" });
             //   } else if (current.type == 3) {
             //     newObj = Object.assign({}, current, { color: "#62ddd4" });
             //   } else if (current.type == 4) {
             //     newObj = Object.assign({}, current, { color: "#d1a6ff" });
             //   }
           } else {
             newObj = Object.assign({}, current, { color: "#f9d484" });
           }
   
           return newObj;
         });
       },
   
   

4. 处理后端返回的数据

   
       //处理数组
       convertData(aircraftData) {
         let result = [];
         let nextUniqueId = 0; // 用于生成唯一的ID
         aircraftData.forEach((aircraft) => {
           let aircraftInfo = {
             id: aircraft.taskId,
             text: aircraft.planeNum,
             start_date: new Date(2025, 0, 16, 0, 0),
             end_date: new Date(
               2025,
               0,
               16,
               Math.floor(aircraft.repairTime / 60),
               aircraft.repairTime % 60,
               0
             ),
             duration: aircraft.repairTime,
             open: true,
             time: aircraft.repairTime,
           };
           result.push(aircraftInfo);
   
           aircraft.lruList.forEach((sparePart) => {
             let sparePartId = `sparepart-${nextUniqueId++}`; // 生成唯一的ID
             let sparePartInfo = {
               text: sparePart.lruName,
               start_date: new Date(2025, 0, 16, 0, 0),
               end_date: new Date(
                 2025,
                 0,
                 16,
                 Math.floor(sparePart.repairTime / 60),
                 sparePart.repairTime % 60,
                 0
               ),
               id: sparePartId, // sparePart.lruId,  //随机数这个id与下面的sparePart.lruWorkList的parent一致
               duration: sparePart.repairTime,
               parent: sparePart.taskId,
               type: 1,
               open: true,
               time: sparePart.repairTime,
             };
             result.push(sparePartInfo);
   
             sparePart.lruWorkList.forEach((procedure) => {
               let procedureId = `procedure-${nextUniqueId++}`; // 生成唯一的ID
               let procedureInfo = {
                 text: procedure.taskName,
                 start_date: new Date(2025, 0, 16, 0, 0),
                 end_date: new Date(
                   2025,
                   0,
                   16,
                   Math.floor(procedure.workTime / 60),
                   procedure.workTime % 60,
                   0
                 ),
                 id: procedureId, //procedure.lruWorkId, //这个 id要唯一
                 duration: procedure.workTime,
                 parent: sparePartId, // procedure.lruIdThree, //aircraft.lruList这个id和parent一致
                 type: procedure.isCompleted,
                 time: procedure.workTime,
               };
               result.push(procedureInfo);
             });
           });
         });
   
         return result;
       },
       //取最大的修理时间
       findMaxRepairTime(data) {
         let maxRepairTime = 0;
         data.forEach((aircraft) => {
           if (aircraft.repairTime > maxRepairTime) {
             maxRepairTime = aircraft.repairTime;
           }
         });
         return maxRepairTime;
       },
   

5. 子组件监听调用

   watch: {
       newData: {
         handler(newVal) {
           if (newVal !== undefined && newVal !== null)