效果图:
1.安装
使用 npm i dhtmlx-gantt 安装插件
2.插件文档地址：Gantt API Gantt Docs
3.先把代码放下边了,可以根据代码研究一下细节,用不到的的功能可以注释,直接复制就可以用,各位小伙伴,根据自己的需求改一下(也是从别的大神那看的例子,大家可以借鉴一下)
<template>
<div class="container">
<div class="select-wrap">
<el-select v-model="value" placeholder="请选择" @change="selectChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div ref="gantt" class="gantt-container"></div>
</div>
</template>
<script>
import {
gantt
} from 'dhtmlx-gantt'; //引入插件
import "dhtmlx-gantt/codebase/dhtmlxgantt.css" //引入插件样式
export default {
name: 'gantt',
data() {
return {
tasks: {
data: []
},
options: [{
value: '1',
label: '全部'
}, {
value: '2',
label: '完成'
}, {
value: '3',
label: '正常'
}, {
value: '4',
label: '异常'
}, {
value: '5',
label: '未启动'
}],
value: '1'
}
},
methods: {
//开始时间-结束时间参数
DateDifference: function(strDateStart, strDateEnd) {
var begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, '/'))) //begintime 为开始时间
var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, '/'))) // endtime 为结束时间
var date3 = endtime_ms - begintime_ms //时间差的毫秒数
var days = Math.floor(date3 / (24 * 3600 * 1000))
return days
},
initData: function() {
this.tasks.data = [
{
id: 1,
text: '概念设计',
start_date: '2020-04-08',
duration: 10,
open: true, //默认打开，
toolTipsTxt: 'xxx项目概念设计',
progress: 0.6,
status: "parent"
},
{
toolTipsTxt: 'xxx项目-项目启动会',
text: '项目启动会-外部', // 任务名
start_date: '2020-04-08', // 开始时间
id: 11, // 任务id
duration: 3, // 任务时长，从start_date开始计算
parent: 1, // 父任务ID
type: 1,
progress: 0.5,
status: "yellow"
},
{
toolTipsTxt: 'xxx项目-项目启动会议',
text: '项目启动会-内部',
start_date: '2020-04-11',
id: 12,
duration: 2,
parent: 1,
type: 2,
progress: 0.6,
status: "pink"
},
{
toolTipsTxt: 'xxx项目开工会',
text: '项目开工会',
start_date: '2020-04-13',
id: 13,
duration: 4,
parent: 1,
type: 3,
progress: 1,
status: "green"
}, {
toolTipsTxt: 'xxx项目-项目分析',
text: '项目分析',
start_date: '2020-04-13',
id: 14,
duration: 4,
parent: 1,
type: 4,
progress: 0.6,
status: "popular"
},
{
id: 2,
text: '方案设计',
start_date: '2020-04-08',
duration: 8,
open: true,
toolTipsTxt: 'xxx方案设计',
state: 'default',
// color:"#409EFF", //设置颜色
progress: 0.6,
status: "parent"
},
{
toolTipsTxt: 'xxx新项目原型图设计',
text: '原型图设计',
start_date: '2020-04-08',
id: 21,
duration: 2,
parent: 2,
type: 1,
progress: 0.6,
status: "yellow"
},
{
toolTipsTxt: 'xxx项目-项目设计图',
text: '设计图设计',
start_date: '2020-04-09',
id: 22,
duration: 2,
parent: 2,
type: 2,
progress: 0.6,
status: "pink"
},
{
toolTipsTxt: 'xxx项目-项目确认',
text: '项目确认',
start_date: '2020-04-11',
id: 23,
duration: 2,
parent: 2,
type: 3,
progress: 1,
status: "green"
}
].map(function(current, ind, arry) {
var newObj = {}
if (current.type) { //存在type字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色
if (current.type == 1) { //冒烟
newObj = Object.assign({}, current, {
'color': '#fcca02'
})
} 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': '#5692f0'
})
}
return newObj
})
},
selectChange(val){
console.log(val)
//测试用例
var obj = {
toolTipsTxt: '新增任务',
text: '新增任务', // 任务名
start_date: '2020-04-15', // 开始时间
id: 24, // 任务id
duration: 2, // 任务时长，从start_date开始计算
parent: 2, // 父任务ID
type: 4,
progress:0,
status: "popular"
}
this.tasks.data.push(obj)
// 数据解析
gantt.parse(this.tasks)
// 刷新数据
gantt.refreshData();
}
},
mounted() {
this.initData()
//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
gantt.config.autosize = true
//只读模式
gantt.config.readonly = true
//是否显示左侧树表格
gantt.config.show_grid = true
//表格列设置
gantt.config.columns = [{
name: 'text',
label: '阶段名字',
// label: '分项工程名称',
tree: true,
width: '280',
onrender: function(task, node) {
node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.status);
}
},
{
name: 'duration',
label: '时长',
align: 'center',
template: function(obj) {
return obj.duration + '天'
},
hide: true
}
]
var weekScaleTemplate = function(date) {
var dateToStr = gantt.date.date_to_str("%m %d");
var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
var weekNum = gantt.date.date_to_str("第 %W 周");
return weekNum(date)
};
var daysStyle = function(date) {
var dateToStr = gantt.date.date_to_str("%D");
if (dateToStr(date) == "六" || dateToStr(date) == "日") return "weekend";
return "";
};
gantt.config.subscales = [{
unit: "week",
step: 1,
template: weekScaleTemplate
},
{
unit: "day",
step: 1,
format: "%d"
}
];
gantt.plugins({
tooltip: true
});
gantt.attachEvent("onGanttReady", function() {
var tooltips = gantt.ext.tooltips;
gantt.templates.tooltip_text = function(start, end, task) {
return task.toolTipsTxt + "<br/>" +
"阶段：" + task.text + "<br/>" +
gantt.templates.tooltip_date_format(start)
};
});
//设置任务条进度内容
gantt.templates.progress_text = function(start, end, task) {
return "<div style='text-align:left;color:#fff;padding-left:20px'>" + Math.round(task.progress * 100) +
"% </div>";
};
//任务条显示内容
gantt.templates.task_text = function(start, end, task) {
// return task.text + '(' + task.duration + '天)';
return "<div style='text-align:center;color:#fff'>" + task.text + '(' + task.duration + '天)' +
"</div>";
}
// gantt.templates.scale_cell_class = function(date) {
// /*if(date.getDay()== 0 || date.getDay()== 6){
// return "weekend";
// }*/
// return 'weekend'
// }
//任务栏周末亮色
/*gantt.templates.task_cell_class = function(item,date){
if(date.getDay()== 0 || date.getDay()== 6){
return "weekend";
}
};*/
//任务条上的文字大小 以及取消border自带样式
gantt.templates.task_class = function(start, end, item) {
return item.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
}
gantt.config.layout = {
css: "gantt_container",
cols: [{
width: 280,
min_width: 280,
rows: [{
view: "grid",
scrollX: "gridScroll",
scrollable: true,
scrollY: "scrollVer"
},
{
view: "scrollbar",
id: "gridScroll",
group: "horizontal"
}
]
},
{
resizer: true,
width: 1
},
{
rows: [{
view: "timeline",
scrollX: "scrollHor",
scrollY: "scrollVer"
},
{
view: "scrollbar",
id: "scrollHor",
group: "horizontal"
}
]
},
{
view: "scrollbar",
id: "scrollVer"
}
]
};
//时间轴图表中，任务条形图的高度
// gantt.config.task_height = 28
//时间轴图表中，甘特图的高度
// gantt.config.row_height = 36
//时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
gantt.config.show_task_cells = true
//当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
gantt.config.fit_tasks = true
gantt.config.min_column_width = 50;
gantt.config.auto_types = true;
gantt.config.xml_date = "%Y-%m-%d";
gantt.config.scale_unit = "month";
gantt.config.step = 1;
gantt.config.date_scale = "%Y年%M";
gantt.config.start_on_monday = true;
gantt.config.scale_height = 90;
gantt.config.autoscroll = true;
gantt.config.calendar_property = "start_date";
gantt.config.calendar_property = "end_date";
gantt.config.readonly = true;
gantt.i18n.setLocale('cn');
// 初始化
gantt.init(this.$refs.gantt)
// 数据解析
gantt.parse(this.tasks)
}
}
</script>
<style lang="scss">
.firstLevelTask {
border: none;
.gantt_task_content {
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: 100%;
width: 100%;
position: relative;
.gantt_grid_head_cell {
padding-left: 20px;
text-align: left !important;
font-size: 14px;
color: #333;
}
.select-wrap {
position: absolute;
top: 25px;
z-index: 99;
width: 90px;
left: 180px;
.el-input__inner {
border: none;
}
}
.left-container {
height: 100%;
}
.parent {
.gantt_tree_icon {
&.gantt_folder_open {
// background-image: url(assets/gantt-icon.svg) !important;
}
&.gantt_folder_closed{
// background-image: url(assets/gantt-icon-up.svg) !important;
}
}
}
.green,
.yellow,
.pink,
.popular {
.gantt_tree_icon.gantt_file {
background: none;
position: relative;
&::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
.green {
.gantt_tree_icon.gantt_file {
&::before {
background: #84bd54;
}
}
}
.yellow {
.gantt_tree_icon.gantt_file {
&::before {
background: #fcca02;
}
}
}
.pink {
.gantt_tree_icon.gantt_file {
&::before {
background: #da645d;
}
}
}
.popular {
.gantt_tree_icon.gantt_file {
&::before {
background: #d1a6ff;
}
}
}
}
.left-container {
height: 100%;
}
.gantt_task_content {
text-align: left;
padding-left: 10px;
}
</style>这是我请求后台数据然后重组数据的全部代码(注意 mounted周期中,一些插件的属性都要全部带上,不然显示不出来)
<template>
<div class="container">
<div ref="gantt" class="gantt-container"></div>
</div>
</template>
<script>
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import Cookies from "js-cookie";
import { gantelistall } from "@/api/purchasing/gantetu";
export default {
name: "gantt",
data() {
return {
tasks: {
data: [],
},
};
},
// 把携带的参数放到queryParams查询参数里
created() {
// console.log(this.$route.params.id);
},
methods: {
//开始时间-结束时间参数
DateDifference: function (strDateStart, strDateEnd) {
var begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, "/"))); //begintime 为开始时间
var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, "/"))); // endtime 为结束时间
var date3 = endtime_ms - begintime_ms; //时间差的毫秒数
var days = Math.floor(date3 / (24 * 3600 * 1000));
return days;
},
initData: function () {
gantelistall({ projectId: this.$route.params.id }).then((res) => {
this.tasks.data = res.rows.map((item) => {
return {
id: item.projectBaseClassId,
text: item.projectBaseClassName,
start_date: "2020-04-08",
// start_date: item.startDate,
// duration: item.days,
duration: 7,
// open: true, //默认打开，
toolTipsTxt: item.projectBaseClassName,
progress: 0.6,
status: "popular",
};
});
this.tasks.data.map(function (current, ind, arry) {
var newObj = {};
if (current.type) {
//存在type字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色
if (current.type == 1) {
//冒烟
newObj = Object.assign({}, current, {
color: "#fcca02",
});
} 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: "#5692f0",
});
}
return newObj;
});
//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
gantt.config.autosize = true;
//只读模式
gantt.config.readonly = true;
//是否显示左侧树表格
gantt.config.show_grid = true;
//表格列设置
gantt.config.columns = [
{
name: "text",
label: "分项工程名称",
tree: true,
width: "280",
onrender: function (task, node) {
node.setAttribute(
"class",
"gantt_cell gantt_last_cell gantt_cell_tree " + task.status
);
},
},
{
name: "duration",
label: "时长",
align: "center",
template: function (obj) {
return obj.duration + "天";
},
hide: true,
},
];
var weekScaleTemplate = function (date) {
var dateToStr = gantt.date.date_to_str("%m %d");
var endDate = gantt.date.add(
gantt.date.add(date, 1, "week"),
-1,
"day"
);
var weekNum = gantt.date.date_to_str("第 %W 周");
return weekNum(date);
};
var daysStyle = function (date) {
var dateToStr = gantt.date.date_to_str("%D");
if (dateToStr(date) == "六" || dateToStr(date) == "日")
return "weekend";
return "";
};
gantt.config.subscales = [
{
unit: "week",
step: 1,
template: weekScaleTemplate,
},
{
unit: "day",
step: 1,
format: "%d",
},
];
gantt.plugins({
tooltip: true,
});
//设置任务条进度内容
gantt.templates.progress_text = function (start, end, task) {
return (
"<div style='text-align:left;color:#fff;padding-left:20px'>" +
Math.round(task.progress * 100) +
"% </div>"
);
};
//任务条显示内容
gantt.templates.task_text = function (start, end, task) {
// return task.text + '(' + task.duration + '天)';
return (
"<div style='text-align:center;color:#fff'>" +
task.text +
"(" +
task.duration +
"天)" +
"</div>"
);
};
//任务条上的文字大小 以及取消border自带样式
gantt.templates.task_class = function (start, end, item) {
return item.$level == 0 ? "firstLevelTask" : "secondLevelTask";
};
gantt.config.layout = {
css: "gantt_container",
cols: [
{
width: 280, //表格左侧宽度
min_width: 280, //表格左侧宽度
rows: [
{
view: "grid",
scrollX: "gridScroll",
scrollable: true,
scrollY: "scrollVer",
},
{
view: "scrollbar",
id: "gridScroll",
group: "horizontal",
},
],
},
{
resizer: true,
width: 1,
},
{
rows: [
{
view: "timeline",
scrollX: "scrollHor",
scrollY: "scrollVer",
},
{
view: "scrollbar",
id: "scrollHor",
group: "horizontal",
},
],
},
{
view: "scrollbar",
id: "scrollVer",
},
],
};
//时间轴图表中，任务条形图的高度
// gantt.config.task_height = 28
//时间轴图表中，甘特图的高度
// gantt.config.row_height = 36
//时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
gantt.config.show_task_cells = true;
//当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
gantt.config.fit_tasks = true;
gantt.config.min_column_width = 50;
gantt.config.auto_types = true;
gantt.config.xml_date = "%Y-%m-%d";
gantt.config.scale_unit = "month";
gantt.config.step = 1;
gantt.config.date_scale = "%Y年%M";
gantt.config.start_on_monday = true;
gantt.config.scale_height = 160;
gantt.config.autoscroll = true;
gantt.config.calendar_property = "start_date";
gantt.config.calendar_property = "end_date";
gantt.config.readonly = true;
gantt.i18n.setLocale("cn");
// 初始化
gantt.init(this.$refs.gantt);
// 数据解析
gantt.parse(this.tasks);
});
},
},
mounted() {
this.initData();
// this.getgantelistall();
//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
// gantt.config.autosize = true;
// //只读模式
// gantt.config.readonly = true;
// //是否显示左侧树表格
// gantt.config.show_grid = true;
// //表格列设置
// gantt.config.columns = [
// {
// name: "text",
// label: "分项工程名称",
// tree: true,
// width: "280",
// onrender: function (task, node) {
// node.setAttribute(
// "class",
// "gantt_cell gantt_last_cell gantt_cell_tree " + task.status
// );
// },
// },
// {
// name: "duration",
// label: "时长",
// align: "center",
// template: function (obj) {
// return obj.duration + "天";
// },
// hide: true,
// },
// ];
// var weekScaleTemplate = function (date) {
// var dateToStr = gantt.date.date_to_str("%m %d");
// var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
// var weekNum = gantt.date.date_to_str("第 %W 周");
// return weekNum(date);
// };
// var daysStyle = function (date) {
// var dateToStr = gantt.date.date_to_str("%D");
// if (dateToStr(date) == "六" || dateToStr(date) == "日") return "weekend";
// return "";
// };
// gantt.config.subscales = [
// {
// unit: "week",
// step: 1,
// template: weekScaleTemplate,
// },
// {
// unit: "day",
// step: 1,
// format: "%d",
// },
// ];
// gantt.plugins({
// tooltip: true,
// });
// //设置任务条进度内容
// gantt.templates.progress_text = function (start, end, task) {
// return (
// "<div style='text-align:left;color:#fff;padding-left:20px'>" +
// Math.round(task.progress * 100) +
// "% </div>"
// );
// };
// //任务条显示内容
// gantt.templates.task_text = function (start, end, task) {
// // return task.text + '(' + task.duration + '天)';
// return (
// "<div style='text-align:center;color:#fff'>" +
// task.text +
// "(" +
// task.duration +
// "天)" +
// "</div>"
// );
// };
// //任务条上的文字大小 以及取消border自带样式
// gantt.templates.task_class = function (start, end, item) {
// return item.$level == 0 ? "firstLevelTask" : "secondLevelTask";
// };
// gantt.config.layout = {
// css: "gantt_container",
// cols: [
// {
// width: 280, //表格左侧宽度
// min_width: 280, //表格左侧宽度
// rows: [
// {
// view: "grid",
// scrollX: "gridScroll",
// scrollable: true,
// scrollY: "scrollVer",
// },
// {
// view: "scrollbar",
// id: "gridScroll",
// group: "horizontal",
// },
// ],
// },
// {
// resizer: true,
// width: 1,
// },
// {
// rows: [
// {
// view: "timeline",
// scrollX: "scrollHor",
// scrollY: "scrollVer",
// },
// {
// view: "scrollbar",
// id: "scrollHor",
// group: "horizontal",
// },
// ],
// },
// {
// view: "scrollbar",
// id: "scrollVer",
// },
// ],
// };
// //时间轴图表中，任务条形图的高度
// // gantt.config.task_height = 28
// //时间轴图表中，甘特图的高度
// // gantt.config.row_height = 36
// //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
// gantt.config.show_task_cells = true;
// //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
// gantt.config.fit_tasks = true;
// gantt.config.min_column_width = 50;
// gantt.config.auto_types = true;
// gantt.config.xml_date = "%Y-%m-%d";
// gantt.config.scale_unit = "month";
// gantt.config.step = 1;
// gantt.config.date_scale = "%Y年%M";
// gantt.config.start_on_monday = true;
// gantt.config.scale_height = 160;
// gantt.config.autoscroll = true;
// gantt.config.calendar_property = "start_date";
// gantt.config.calendar_property = "end_date";
// gantt.config.readonly = true;
// gantt.i18n.setLocale("cn");
// // 初始化
// gantt.init(this.$refs.gantt);
// // 数据解析
// gantt.parse(this.tasks);
},
};
</script>
<style lang="scss">
.firstLevelTask {
border: none;
.gantt_task_content {
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: 100%;
width: 100%;
position: relative;
.gantt_grid_head_cell {
padding-left: 20px;
text-align: left !important;
font-size: 14px;
color: #333;
}
.select-wrap {
position: absolute;
top: 25px;
z-index: 99;
width: 90px;
left: 180px;
.el-input__inner {
border: none;
}
}
.left-container {
height: 100%;
}
// 第一列的小图标显示
.parent {
.gantt_tree_icon {
&.gantt_folder_open {
// background-image: url(assets/icons/scg/gantt-icon.svg) !important;
// background-image: url(assets/icons/svg/chart.svg) !important;
}
&.gantt_folder_closed {
// background-image: url(assets/gantt-icon-up.svg) !important;
// background-image: url(assets/icons/svg/dict.svg) !important;
}
}
}
.green,
.yellow,
.pink,
.popular {
.gantt_tree_icon.gantt_file {
background: none;
position: relative;
&::before {
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
}
.green {
.gantt_tree_icon.gantt_file {
&::before {
background: #84bd54;
}
}
}
.yellow {
.gantt_tree_icon.gantt_file {
&::before {
background: #fcca02;
}
}
}
.pink {
.gantt_tree_icon.gantt_file {
&::before {
background: #da645d;
}
}
}
.popular {
.gantt_tree_icon.gantt_file {
&::before {
background: #d1a6ff;
}
}
}
}
.left-container {
height: 100%;
}
.gantt_task_content {
text-align: left;
padding-left: 10px;
}
// .gantt_grid_data .gantt_row.gantt_selected, .gantt_grid_data .gantt_row.odd.gantt_selected, .gantt_task_row.gantt_selected{
// background-color: red;
// }
.gantt-container {
height: 270px !important;
}
</style>
2023-11-28发现了甘特图的bug,数据渲染会重复,所以来总结一下,每一次加载页面需要先清除组件,避免组件重复,在initData方法中 加一行代码 gantt.clearAll();
就是这样的.完毕
5544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
