共计 12556 个字符，预计需要花费 32 分钟才能阅读完成。
亲测有效！！！！！！！！！！！！！！话不多直接上代码！！！！！！！！！！
成品展示
使用说明
1. 引入依赖 ( 注意版本号）
npm install dhtmlx-gantt@6.3.7
2. 引入组件
3. 引入 dhtmlx-gantt
import gantt from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'4. 甘特图数据配置
注意：数据格式类似于树形组件，子级需要父级的 id
- 父级时间是根据子级 start_date 以及 duration 自动计算
- progress：完成度的最大值为 1
- open：是否展开文件
- parent：父级 id
- start_date：开始时间（日月年）
- text：左边数据展示文件名称（可以自定义添加展示字段，在后面列配置项可以配置）
tasks: {
data: [
// {
// id: 11,
// text: 'Project #1',
// // type: gantt.config.types.project,
// progress: 0.5,// 完成度
// open: true,// 默认打开
// number: '20240227',// 显示字段
// },
// {
// toolTipsTxt: '任务 #101-001',
// id: 12,// 任务 id
// text: '任务 #1',// 任务名称
// start_date: '03-04-2022',// 开始时间 日月年
// duration: '5',// 任务时常
// parent: '11',// 父级 id
// progress: 1,// 完成度
// open: true,// 默认打开
// },
// {
// id: 13,
// text: '任务 #2',
// start_date: '03-04-2022',
// // type: gantt.config.types.project,
// parent: '11',
// progress: 0.255,
// open: true,
// },
// {
// id: 14,
// text: '任务 #3',
// start_date: '01-04-2022',
// duration: '6',
// parent: '11',
// progress: 0.8,
// open: true,
// },
// {
// id: 15,
// text: '任务 #4',
// // type: gantt.config.types.project,
// parent: '11',
// progress: 0.2,
// open: true,
// },
// {
// id: 16,
// text: 'Final milestone',
// start_date: '15-04-2022',
// // type: gantt.config.types.milestone,
// parent: '11',
// progress: 0,
// open: true,
// },
// {
// id: 17,
// text: '任务 #2.1',
// start_date: '03-04-2022',
// duration: '2',
// parent: '13',
// progress: 1,
// open: true,
// },
// {
// id: 18,
// text: '任务 #2.2',
// start_date: '06-04-2022',
// duration: '3',
// parent: '13',
// progress: 0.8,
// open: true,
// },
// {
// id: 19,
// text: '任务 #2.3',
// start_date: '10-04-2022',
// duration: '4',
// parent: '13',
// progress: 0.2,
// open: true,
// },
// {
// id: 20,
// text: '任务 #2.4',
// start_date: '10-04-2022',
// duration: '4',
// parent: '13',
// progress: 0,
// open: true,
// },
// {
// id: 21,
// text: '任务 #4.1',
// start_date: '03-04-2022',
// duration: '4',
// parent: '15',
// progress: 0.5,
// open: true,
// },
// {
// id: 22,
// text: '任务 #4.2',
// start_date: '03-04-2022',
// duration: '4',
// parent: '15',
// progress: 0.1,
// open: true,
// },
// {
// id: 23,
// text: 'Mediate milestone',
// start_date: '14-04-2022',
// // type: gantt.config.types.milestone,
// parent: '15',
// progress: 0,
// open: true,
// },
],5.tasks 中 link 连线配置
tasks: {
// #字段解释
// 格式 id: 数据 id
// source: 开始链接的项目 id ---- 为 tasks.data 中数据的 id
// target: 要链接项目的 id ---- 为 tasks.data 中数据的 id
// type: 0-- 进行 - 开始 ` 尾部链接头部 `
// 1-- 开始 - 开始 ` 头部链接头部 `
// 2-- 进行 - 进行 ` 尾部链接尾部 `
// 3-- 开始 - 进行 ` 头部链接尾部 `
// 任务之间连接
links: [{ id: '10', source: '11', target: '12', type: '1'},
{id: '11', source: '11', target: '13', type: '1'},
{id: '12', source: '11', target: '14', type: '1'},
{id: '13', source: '11', target: '15', type: '1'},
{id: '14', source: '23', target: '16', type: '0'},
{id: '15', source: '13', target: '17', type: '1'},
{id: '16', source: '17', target: '18', type: '0'},
{id: '17', source: '18', target: '19', type: '0'},
{id: '18', source: '19', target: '20', type: '0'},
{id: '19', source: '15', target: '21', type: '2'},
{id: '20', source: '15', target: '22', type: '2'},
{id: '21', source: '15', target: '23', type: '0'},
],
},6. 初始化配置
注意：其中值得一提的就是更新数据，需要清空旧数
弹窗汉化
gantt.locale.labels = {
dhx_cal_today_button: "今天",
day_tab: "日",
week_tab: "周",
month_tab: "月",
new_event: "新建日程",
icon_save: "保存",
icon_cancel: "关闭",
icon_details: "详细",
icon_edit: "编辑",
icon_delete: "删除",
confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
confirm_deleting: "是否删除计划?",
section_description: "描述:",
section_time: "时间范围:",
section_type: "类型:",
section_text: "计划名称:",
section_test: "测试:",
section_projectClass: "项目类型:",
taskProjectType_0: "项目任务",
taskProjectType_1: "普通任务",
section_head: "负责人:",
section_priority: '优先级:',
taskProgress: '任务状态',
taskProgress_0: "未开始",
taskProgress_1: "进行中",
taskProgress_2: "已完成",
taskProgress_3: "已延期",
taskProgress_4: "搁置中",
section_template: 'Details',
/* grid columns */
column_text: "计划名称",
column_start_date: "开始时间",
column_duration: "持续时间",
column_add: "",
column_priority: "难度",
/* link confirmation */
link: "关联",
confirm_link_deleting: "将被删除",
message_ok: '确定',
message_cancel: '取消',
link_start: "(开始)",
link_end: "(结束)",
type_task: "任务",
type_project: "项目",
type_milestone: "里程碑",
minutes: "分钟",
hours: "小时",
days: "天",
weeks: "周",
months: "月",
years: "年"
}
gantt.clearAll(); // 清空旧数据// 初始化
init() {
// 格式化日期
gantt.locale.date = {month_full: ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"],
month_short: ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月", "7 月", "8 月", "9 月", "10 月", "11 月", "12 月"],
day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
day_short: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
}
console.log(gantt);
// 自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
gantt.config.autosize = true
// 只读模式
gantt.config.readonly = false
// 是否显示左侧树表格
gantt.config.show_grid = true
// // 表格列设置
gantt.config.columns = [{ name: 'text', label: '阶段名字', tree: true, width: '150', align: 'center',},
// {name: 'number', label: '工单号', tree: false, width: '120', align: 'center',},
{
name: 'duration',
label: '工时',
align: 'center',
template: function (obj) {return obj.duration + '天'},
},
/*{name:"start_date", label:"开始时间", align: "center"},
{name:"end_date", label:"结束时间", align: "center"},*/
]
// 自动延长时间刻度
gantt.config.fit_tasks = true
// 允许拖放
gantt.config.drag_project = true
// 定义时间格式
gantt.config.scales = [{ unit: 'month', step: 1, date: '%Y,%F'},
{unit: 'day', step: 1, date: '%D ,%j'},
]
// // 当 task 的长度改变时，自动调整图表坐标轴区间用于适配 task 的长度
gantt.config.fit_tasks = true
// 添加弹窗属性
gantt.config.lightbox.sections = [
{
name: 'description',
height: 70,
map_to: 'text',
type: 'textarea',
focus: true,
},
{name: 'type', type: 'typeselect', map_to: 'type'},
{name: 'time', type: 'duration', map_to: 'auto'},
];
console.log(this.tasks.data, '检查任务数据'); // 检查任务数据
// 初始化
gantt.init(this.$refs.gantt)
/* ******* 重点 ******* */
gantt.clearAll(); // 清空旧数据
/* ****************** */
// 数据解析
gantt.parse(this.tasks)
},7. 更新数据
loadData(arg) {if (!this.url.list) {this.$message.error("请设置 url.list 属性!")
return
}
// 加载数据 若传入参数 1 则加载第一页的内容
let params = {planId: this.planId,}
this.loading = true;
this.tasks.data = []
getAction(this.url.list, params).then((res) => {if (res.success) {console.log(res, '甘特图数据');
res.result.forEach(obj => {obj.open = false})
this.tasks.data = res.result
this.init()}
if (res.code === 510) {this.$message.warning(res.message)
}
this.loading = false;
})
},更多配置
更多配置
完整代码
原文地址: vue 中利用 dhtmlx-gantt 实现甘特图
正文完
