注意事项：1、横坐标根据日期转换成时间刻度在（ gantt.config.scales）；2、获取时间刻度的最大值（findMaxRepairTime）；3、甘特图多级列表需注意二级三级每个父子id需要唯一（convertData）
-
安装依赖
npm install dhtmlx-gantt --save -
在当前页引入和配置 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"; //任务条悬浮提示 -
创建甘特图容器
<div ref="gantt" class="left-container" />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 '<div class="gantt-task-content">' + task.text + "-" + task.time + "分钟" + '</div>';};// 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;});}, -
处理后端返回的数据
//处理数组convertData(aircraftData) {let result = [];let nextUniqueId = 0; // 用于生成唯一的IDaircraftData.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++}`; // 生成唯一的IDlet 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++}`; // 生成唯一的IDlet 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;}, -
子组件监听调用
watch: {newData: {handler(newVal) {if (newVal !== undefined && newVal !== null)
