亲测有效！！！！！！！！！！！！！！话不多直接上代码！！！！！！！！！！
官方地址
成品展示
编辑
使用说明
1.引入依赖(注意版本号）
npm install dhtmlx-gantt@6.3.7
2.引入组件
<template>
<div>
<div ref="gantt" style="height:500px;" />
</div>
</template>
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.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;
})
},
更多配置
完整代码
<template>
<div>
<div ref="gantt" style="height:500px;" />
</div>
</template>
<script>
import gantt from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, putAction } from '@/api/manage'
export default {
props: {
planId: {
type: String,
required: true,
}
},
// mixins: [JeecgListMixin],
data() {
return {
// 甘特图配置
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,
// },
],
// #字段解释
// 格式 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' },
],
},
url: {
list: "/projectManage/projectPlan/queryProjectPlanGTT",
// delete: "/projectManage/projectModule/delete",
// deleteBatch: "/projectManage/projectModule/deleteBatch",
// exportXlsUrl: "/projectManage/projectModule/exportXls",
// importExcelUrl: "/projectManage/projectModule/importExcel",
// budgetExportXlsUrl: "/projectManage/projectModule/budgetExportXls",
// budgetImportUrl: "/projectManage/projectModule/budgetImportExcel",
},
}
},
watch: {
},
created() {
console.log(this.planId, '参数');
},
mounted() {
this.loadData();
},
methods: {
// 初始化
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)
},
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;
})
},
},
}
</script>
<style lang="less" scoped>
.firstLevelTask {
border: none;
.gantt_task_content {
// font-weight: bold;
font-size: 13px;
}
}
.secondLevelTask {
border: none;
}
.thirdLevelTask {
border: 2px solid #da645d;
color: #da645d;
background: #da645d;
}
.milestone-default {
border: none;
background: rgba(0, 0, 0, 0.45);
}
.milestone-unfinished {
border: none;
background: #5692f0;
}
.milestone-finished {
border: none;
background: #84bd54;
}
.milestone-canceled {
border: none;
background: #da645d;
}
html,
body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
.container {
height: 900px;
.left-container {
height: 100%;
}
}
.left-container {
height: 600px;
}
.gantt_scale_line {
border-top: 0;
}
.weekend {
//background:#f4f7f4!important;
color: #000000 !important;
}
.gantt_selected .weekend {
background: #f7eb91 !important;
}
.gantt_task_content {
text-align: left;
padding-left: 10px;
}
//上面任务条样式
.gantt_task_scale {
height: 45px !important;
}
.gantt_task .gantt_task_scale .gantt_scale_cell {
line-height: 30px !important;
height: 28px !important;
}
</style>
