标题效果图
单数据渲染
多条数据
<template>
<div class="hello">
<h1>甘特Test</h1>
<!-- 渲染位置 -->
<div ref="gannt" id="ganntTest" class="gantt-container"></div>
</div>
</template>
引入
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
数据
tasks: {
// 单数据渲染格式
// data: [
// {
// id: 1,
// name: "Project #2",
// start_date: "2024-1-2",
// duration: 3,
// order: 10,
// progress: 0.4,
// open: true,
// label:
// '<span style="color:#0077c0;">Project #2</span><br/><span style="color:#0077c0;">好好说说</span>',
// },
// {
// id: 2,
// name: "Task #1",
// start_date: "2023-12-18",
// duration: 8,
// order: 10,
// progress: 0.5,
// // parent: 0,
// },
// {
// id: 3,
// name: "Task #1",
// start_date: "2023-12-20",
// duration: 8,
// order: 10,
// progress: 0.5,
// // parent: ,
// },
// {
// id: 4,
// name: "Task #2",
// start_date: "2023-12-26",
// duration: 4, //总天数
// order: 30,
// // progress: 0.6,//进度占比
// // parent: 1,
// },
// ],
// 多条数据渲染格式
data: [
{
id: 1,
name: "名称",
age: 18,
render: "split",
text: "",
},
// 第一行对应的第一条数据
{
id: 100,
parent: 1,
start_date: "2024-1-20 07:20:00",
label: '<span style="color:#0077c0;">事情一222</span>',
end_date: "2024-1-22 07:20:00",
text: "事情一111",
color: "#F56C6C",
},
// 第一行对应的第二条数据
{
id: 101,
parent: 1,
label: '<span style="color:#0077c0;">事情一2test</span>',
start_date: "2024-1-20 23:20:00",
end_date: "2024-1-21 20:00:00",
text: "事情一",
color: "#67C23A",
},
{
id: 102,
parent: 1,
start_date: "2024-1-20 07:20:00",
end_date: "2024-08-22 20:00:00",
text: "事情二",
color: "#E6A23C",
},
{
id: 103,
parent: 1,
start_date: "2024-1-20 07:20:00",
end_date: "2024-1-30 20:00:00",
text: "事情三",
color: "#909399",
},
//第二组
{
id: 2,
name: "设备2",
age: 16,
render: "split",
open: true,
text: "",
},
{
id: 104,
parent: 2,
start_date: "2024-1-04 00:00:00",
end_date: "2024-1-04 00:00:00",
text: "事情一",
color: "#E6A23C",
},
{
id: 105,
parent: 2,
start_date: "2024-1-20 22:10:00",
end_date: "2024-1-22 10:00:00",
text: "事情四",
color: "#909399",
},
{
id: 106,
parent: 2,
start_date: "2024-1-1 17:20:00",
end_date: "2024-1-3 20:00:00",
text: "事情五",
color: "#67C23A",
},
{
id: 107,
parent: 2,
start_date: "2024-1-3 00:20:00",
end_date: "2024-1-5 20:00:00",
text: "事情六",
color: "#F56C6C",
},
//第三组
{
id: 3,
name: "设备2",
age: 16,
render: "split",
open: true,
text: "事情1",
color: "#E6A23C",
},
{
id: 104,
parent: 2,
start_date: "2024-1-19 00:20:00",
end_date: "2024-1-20 20:00:00",
text: "事情一",
color: "#E6A23C",
},
{
id: 305,
parent: 3,
start_date: "2024-1-20 22:10:00",
end_date: "2024-1-21 10:00:00",
text: "事情四",
color: "#909399",
},
{
id: 306,
parent: 3,
start_date: "2024-1-21 17:20:00",
end_date: "2024-1-22 20:00:00",
text: "事情五",
color: "#67C23A",
},
{
id: 307,
parent: 3,
start_date: "2024-1-3 00:20:00",
end_date: "2024-01-6 20:00:00",
text: "事情六",
color: "#F56C6C",
},
],
//连接线
// links: [
// { id: 1, source: 1, target: 2, type: "1" },
// { id: 2, source: 2, target: 3, type: "0" },
// ],
},
使用
init2() {
var textEditor = { type: "text", map_to: "text" };
// var startDateEditor = { type: "date", map_to: "start_date" };
gantt.config.columns = [
{
name: "text",
/*height:'40',*/
label: "项目名称",
editor: textEditor,
resize: true,
tree: true,
width: "230",
},
// {
// name: "start_date",
// label: "项目开始时间",
// align: "center",
// editor: startDateEditor,
// resize: true,
// tree: false,
// width: "100",
// },
];
gantt.clearAll();
gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.config.scale_height = 50; //设置甘特图的表头高度
gantt.config.show_errors = false;
//鼠标移入展示信息
gantt.plugins({
tooltip: true,
});
//时间展示 2021-10-11 07:22
gantt.templates.tooltip_date_format =
gantt.date.date_to_str("%Y-%m-%d %H:%i");
//鼠标移入展示信息
gantt.config.scale_unit = "day";
// gantt.config.scale_unit = "month";
gantt.config.readonly = true; //甘蔗图只读属性
gantt.config.round_dnd_dates = false; //将任务开始时间和结束时间自动“四舍五入'
gantt.config.root_id = "root";
//添加taba栏
gantt.config.columns = [
{ name: "name", label: "名称", align: "center", width: 120 },
];
gantt.config.show_tasks_outside_timescale = true;
// gantt.parse({ data: this.dataList });
// gantt.attachEvent("onTaskClick", function (e, data) {
// _this.ganttClick(e, data);
// });
//悬浮
gantt.templates.tooltip_text = gantt.templates.tooltip_text = function (
start,
end,
task
) {
if (
task.text &&
task.start_date &&
task.end_date &&
task.dispatchingNum
) {
return (
//悬浮展示的内容
"<p style='font-size: 14px'>" +
'<span style="font-weight: 700;">名称: </span>' +
'<span style="font-weight: 500;">' +
task.dispatchingNum +
"</span>" +
"<br/>" +
'<span style="font-weight: 700;">名称2: </span>' +
'<span style="font-weight: 500;">' +
task.mouldManageCode +
"</span>" +
);
} else {
return task.label;
}
};
gantt.config.start_date = new Date(
new Date(new Date().toLocaleDateString()).getTime()
);
gantt.config.end_date = new Date().setDate(new Date().getDate() + 30);
// gantt.config.date_scale = "星期" + "%D";
gantt.templates.date_scale = "%Y-%m-%d";
//禁用拖拽项 拖拽类型
// gantt.attachEvent("onBeforeTaskDrag", function (id, mode, e) {
gantt.attachEvent("onBeforeTaskDrag", function (mode) {
var modes = gantt.config.drag_mode;
switch (mode) {
case modes.move:
break;
case modes.resize:
break;
case modes.progress:
break;
}
});
gantt.init("ganntTest");
gantt.parse(this.tasks);
},
样式
<style scoped>
.gantt-container {
background: #eddddd;
height: 250px;
width: 100%;
}
.ganntClass {
background-color: red;
padding: 10px;
border-radius: 4px;
}
</style>