gantt/甘特图完整代码带注释，可以复制

zheshihuahua

2024-05-09 帮助1人

官网地址：Gantt : Samples

效果图：

学新通

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../component/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../component/style/admin.css" media="all">
<link rel="stylesheet" href="../../component/dhtmlxgantt.css" type="text/css">
<script src="../../component/dhtmlxgantt.js"></script>
<!--[if lt IE 9]>
<script src="../../component/html5.min.js"></script>
<script src="../../component/respond.min.js"></script>
<![endif]-->
<style>
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.weekend {
background: #f4f7f4 !important;
}
.gantt_grid_head_cell {
font-size: 14px;
font-weight: 600;
color: #000 !important;
}
.gantt_scale_cell {
font-size: 14px;
font-weight: 600;
color: #000 !important;
}
</style>
</head>
<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-row">
<div class="layui-col-md3">
<div class="layui-form-item">
<label class="layui-form-label">订单名称</label>
<div class="layui-input-block">
<select id="orderId" name="orderId" autocomplete="off" lay-search>
<option value="">请选择订单</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-form-item">
<label class="layui-form-label">设备编码</label>
<div class="layui-input-block">
<input id="deviceCode" type="text" name="deviceCode" placeholder="请选择设备编码"
autocomplete="off" class="layui-input start">
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-form-item">
<div class="layui-inline">
<button style="margin-left: 50px;"
class="layui-btn layui-btn-vat layuiadmin-btn-useradmin layui-bg-blue" lay-submit
lay-filter="spmrp-search">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
查询
</button>
</div>
</div>
</div>
</div>
</div>
<div class="layui-card-body">
<div class="layui-btn-container">
<button type="button" id="reset" class="layui-btn layui-btn-danger">重排
</button>
</div>
<div id="device_load" style='width:100%;'></div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script>
layui.config({
base: '../../component/'
}).extend({
index: 'lib/index'
}).use(['index', 'view', 'form', 'laydate'], function () {
var $ = layui.$,
form = layui.form,
view = layui.view,
layer = layui.layer,
laydate = layui.laydate;
view.req({
method: 'POST',
data: JSON.stringify({ orderComplete: 0, page: 1, limit: 99999 }),
url: layui.setter.api 'biz/order/produce/page',
success: function (res) {
data = res["data"]["list"] || [];
if (data.length > 0) {
var element = document.getElementById("orderId");
for (var i = 0; i < data.length; i ) {
var option = document.createElement("option");
option.setAttribute("value", data[i]["ordNo"]);
option.innerText = data[i]["project"];
element.appendChild(option);
}
form.render("select");
}
}
});
// 颜色
function randomColor1() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
if (r < 16) {
r = "0" r.toString(16);
} else {
r = r.toString(16);
}
if (g < 16) {
g = "0" g.toString(16);
} else {
g = g.toString(16);
}
if (b < 16) {
b = "0" b.toString(16);
} else {
b = b.toString(16);
}
return "#" r g b;
}
function renderPanel() {
document.getElementById('device_load').style.cssText = 'height:' ($(window).height() - 140) 'px';
}
$(window).resize(function () {
renderPanel();
});
renderPanel();
// gantt.templates.tooltip_text = function (start, end, task) {
// var div = '<table class="layui-table"><thead><tr><th>订单</th><th>产品</th><th>数量</th><th>占用产能</th></tr></thead><tbody>';
// for (var i = 0; i < task.orders.length; i ) {
// div = '<tr>';
// div = '<td>' task.orders[i].order '</td>'
// '<td>' task.orders[i].product '</td>'
// '<td>' task.orders[i].qty '</td>'
// '<td>' percenToString(task.orders[i].progress) '</td>';
// div = '</tr>';
// }
// div = '</tbody></table>';
// return div;
// };
// 尺寸比例
function percenToString(num) {
return Math.floor(num * 100) '%';
}
function renderLabel(progress, type, sum) {
var relWidth = progress * 100;
switch (type) {
case 1:
return "<div class='custom_progress idle' style='width:" relWidth "%'>"
percenToString(progress) "</div>";
break;
case 2:
return "<div class='custom_progress in_progress' style='width:" relWidth "%'>" percenToString(progress) "</div>";
break;
case 3:
return "<div class='custom_progress ' style='width:" relWidth "%;background-color:" randomColor1() "'>" percenToString(progress) "</div>";
break;
default:
return "<div class='custom_progress ' style='width:" relWidth "%;background-color:" randomColor1() "''>" percenToString(progress) "</div>";
break;
}
}
// gantt.templates.task_text = function (start, end, task) {
// var div = '';
// var relWidth=0;
//
// for (var i = 0; i < task.orders.length; i ) {
// div = renderLabel(task.orders[i].progress, 1 i, task.storage);
// relWidth =task.orders[i].progress * 100;
//
// }
//
// //剩余宽度--------------------------------------------
// var RWidth=100-relWidth;
// if(RWidth>0)
// {
// div = "<div class='custom_progress nearly_done' style='width:" RWidth "%'></div>";
// }
//
// //--------------------------------------------
// return div;
// };
// 时间格式
gantt.config.date_format = "%Y-%m-%d";
gantt.config.scales = [
{ unit: "year", step: 1, format: "%Y" },
{ unit: "day", step: 1, date: "%m-%d" },
{ unit: "hour", step: 1, format: "%H:%i" }
];
gantt.config.reorder_grid_columns = true;
gantt.config.columns = [{
name: "text",
label: "任务名",
width: 200,
align: "center",
tree: true,
resize: true
}, {
name: "start_date",
label: "开始日期",
width: 100,
align: "center",
resize: true
}, {
name: "duration",
label: "持续时间",
width: 100,
align: "center",
resize: true
}];
gantt.config.row_height = 40;
gantt.config.scale_height = 50;
gantt.config.drag_move = false;
gantt.config.drag_resize = false;
gantt.config.sort = true;
gantt.config.show_quick_info = false;
// 关闭点击事件
gantt.attachEvent("onTaskDblClick", function (id, e) {
return false;
});
gantt.config.show_tasks_outside_timescale = true;
gantt.plugins({
auto_scheduling: true, //自动排程
tooltip: true //提示信息
});
gantt.config.start_date = new Date("2022-11-03 00:00:00");
gantt.config.end_date = new Date("2022-11-03 23:59:59");
// 样式
gantt.config.layout = {
css: "gantt_container",
cols: [{
width: 400,
min_width: 300,
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.init("device_load");
gantt.i18n.setLocale("cn"); //使用中文
function render() {
var index = layer.load(); //后面会使用这赋值来关闭这个页面
view.req({
method: 'POST',
data: JSON.stringify({
orderId: $('#orderId').val(),
deviceCode: $('#deviceCode').val()
}),
url: layui.setter.api "biz/plan/device/load",
success: function (res) {
gantt.clearAll(); //清空缓存
console.info("gantt", gantt.config.end_date);
var data = [
{ id: "10cz1t", text: "P220901-044", type: "project", progress: 0.88, open: true, parent: 0 },
{ id: "11cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },
{ id: "12cz1t", text: "备膜", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
{ id: "121cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 05:00", parent: "12cz1t", progress: 0, open: true },
{ id: "13cz1t", text: "挤压加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
{ id: "131cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 02:00", parent: "13cz1t", progress: 0, open: true },
{ id: "132cz1t", text: "Stage #2", start_date: "2022-11-03 04:00", end_date: "2022-11-03 05:00", parent: "13cz1t", progress: 0, open: true },
{ id: "133cz1t", text: "Stage #3", start_date: "2022-11-03 07:00", end_date: "2022-11-03 08:00", parent: "13cz1t", progress: 0, open: true },
{ id: "134cz1t", text: "Stage #4", start_date: "2022-11-03 10:00", end_date: "2022-11-03 11:00", parent: "13cz1t", progress: 0, open: true },
{ id: "135cz1t", text: "Stage #5", start_date: "2022-11-03 13:00", end_date: "2022-11-03 14:00", parent: "13cz1t", progress: 0, open: true },
{ id: "136cz1t", text: "Stage #6", start_date: "2022-11-03 16:00", end_date: "2022-11-03 17:00", parent: "13cz1t", progress: 0, open: true },
{ id: "137cz1t", text: "Stage #7", start_date: "2022-11-03 19:00", end_date: "2022-11-03 20:00", parent: "13cz1t", progress: 0, open: true },
{ id: "24cz1t", text: "时效加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
{ id: "241cz1t", text: "Stage #1", start_date: "2022-11-03 05:00", end_date: "2022-11-03 06:00", parent: "24cz1t", progress: 0, open: true },
{ id: "242cz1t", text: "Stage #2", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "24cz1t", progress: 0, open: true },
{ id: "243cz1t", text: "Stage #3", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "24cz1t", progress: 0, open: true },
{ id: "244cz1t", text: "Stage #4", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "24cz1t", progress: 0, open: true },
{ id: "25cz1t", text: "氧化包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
{ id: "251cz1t", text: "Stage #1", start_date: "2022-11-03 06:00", end_date: "2022-11-03 07:00", parent: "25cz1t", progress: 0, open: true },
{ id: "252cz1t", text: "Stage #2", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "25cz1t", progress: 0, open: true },
{ id: "253cz1t", text: "Stage #3", start_date: "2022-11-03 12:00", end_date: "2022-11-03 13:00", parent: "25cz1t", progress: 0, open: true },
{ id: "254cz1t", text: "Stage #4", start_date: "2022-11-03 14:00", end_date: "2022-11-03 15:00", parent: "25cz1t", progress: 0, open: true },
{ id: "255cz1t", text: "Stage #5", start_date: "2022-11-03 18:00", end_date: "2022-11-03 19:00", parent: "25cz1t", progress: 0, open: true },
{ id: "256cz1t", text: "Stage #6", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "25cz1t", progress: 0, open: true },
{ id: "257cz1t", text: "Stage #7", start_date: "2022-11-03 22:00", end_date: "2022-11-03 23:30", parent: "25cz1t", progress: 0, open: true },
{ id: "29cz1t", text: "测试包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
{ id: "291cz1t", text: "Stage #5", start_date: "2022-11-03 15:00", end_date: "2022-11-03 16:00", parent: "29cz1t", progress: 0, open: true },
{ id: "292cz1t", text: "Stage #6", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "29cz1t", progress: 0, open: true },
{ id: "28cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },
// ,start_date: "2022-11-03 01:00",end_date: "2022-11-03 03:00"
{ id: "281cz1t", text: "备膜", start_date: "2022-11-03 01:00", end_date: "2022-11-03 03:00", parent: "28cz1t", progress: 0, open: true },
{ id: "281cz1t1", text: "备膜1", start_date: "2022-11-03 02:30", end_date: "2022-11-03 05:30", parent: "28cz1t", progress: 0, open: true },
{ id: "281cz1t2", text: "备膜2", start_date: "2022-11-03 06:50", end_date: "2022-11-03 07:50", parent: "28cz1t", progress: 0, open: true },
{ id: "282cz1t", text: "挤压加工", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "28cz1t", progress: 0.5, open: true },
{ id: "283cz1t", text: "时效加工", start_date: "2022-11-03 010:00", end_date: "2022-11-03 11:00", parent: "28cz1t", progress: 0, open: true },
{ id: "284cz1t", text: "氧化包装", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "28cz1t", progress: 0, open: true },
];
var datalist = new Array();
$.each(data, function (i, item) {
var model = new Object();
model.id = item.id;
model.text = item.text;
if (item.type != null) {
model.type = item.type;
}
model.progress = item.progress;
model.open = item.open;
model.start_date = new Date(item.start_date);
model.end_date = new Date(item.end_date);
model.parent = item.parent;
if (item.render != null) {
model.render = item.render;
}
datalist.push(model);
});
// 数据之间的关系
var links = [
// {id: "1", source: "10", target: "11", type: "1"},
// {id: "2", source: "11", target: "12", type: "1"},
// {id: "3", source: "10", target: "28", type: "1"},
//
// {id: "4", source: "12", target: "131", type: "1"},
// source:连接谁 ; target:和谁连 ; (里面写data里面的id)
{ id: "5c", source: "131cz1t", target: "241cz1t", type: "0" },
{ id: "6c", source: "132cz1t", target: "241cz1t", type: "0" },
{ id: "7c", source: "133cz1t", target: "242cz1t", type: "0" },
{ id: "8c", source: "134cz1t", target: "242cz1t", type: "0" },
{ id: "9c", source: "135cz1t", target: "243cz1t", type: "0" },
{ id: "10c", source: "136cz1t", target: "243cz1t", type: "0" },
{ id: "11c", source: "137cz1t", target: "244cz1t", type: "0" },
{ id: "14c", source: "241cz1t", target: "253cz1t", type: "0", color: "green" },
{ id: "13c", source: "241cz1t", target: "252cz1t", type: "0", color: "green" },
{ id: "12c", source: "241cz1t", target: "251cz1t", type: "0", color: "green" },
{ id: "16c", source: "242cz1t", target: "254cz1t", type: "0", color: "green" },
{ id: "15c", source: "242cz1t", target: "253cz1t", type: "0", color: "green" },
{ id: "19c", source: "243cz1t", target: "257cz1t", type: "0", color: "green" },
{ id: "18c", source: "243cz1t", target: "256cz1t", type: "0", color: "green" },
{ id: "17c", source: "243cz1t", target: "255cz1t", type: "0", color: "green" },
{ id: "21c", source: "254cz1t", target: "292cz1t", type: "0", color: "blue" },
{ id: "20c", source: "254cz1t", target: "291cz1t", type: "0", color: "blue" },
{ id: "22c", source: "28cz1t", target: "281cz1t", type: "0", color: "red" },
{ id: "23c", source: "281cz1t", target: "281cz1t1", type: "0", color: "red" },
{ id: "24c", source: "281cz1t", target: "281cz1t2", type: "0", color: "red" },
{ id: "25c", source: "281cz1t", target: "282cz1t", type: "0", color: "hotpink" },
{ id: "26c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },
{ id: "27c", source: "281cz1t", target: "283cz1t", type: "0", color: "hotpink" },
{ id: "28c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },
]
//解析
gantt.parse({
data: datalist,
links: links
});
console.info("gantt", gantt);
layer.close(index); //关闭页面
}
});
}
render();
$('#reset').click(function () {
view.req({
method: 'get',
url: layui.setter.api "biz/plan/device/init",
success: function (res) {
render();
}
});
});
form.on('submit(spmrp-search)', function (data) {
render();
});
});
</script>
</body>
</html>

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="https://blog.csdn.net/zheshihuahua/component/layui/css/layui.css" media="all">
<link rel="stylesheet" href="https://blog.csdn.net/zheshihuahua/component/style/admin.css" media="all">
<link rel="stylesheet" href="https://blog.csdn.net/zheshihuahua/component/dhtmlxgantt.css" type="text/css">
<script src="https://blog.csdn.net/zheshihuahua/component/dhtmlxgantt.js"></script>

<style>
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}

.weekend {
background: #f4f7f4 !important;
}

.gantt_grid_head_cell {
font-size: 14px;
font-weight: 600;
color: #000 !important;
}

.gantt_scale_cell {
font-size: 14px;
font-weight: 600;
color: #000 !important;

}
</style>
</head>

<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-row">
<div class="layui-col-md3">
<div class="layui-form-item">
<label class="layui-form-label">订单名称</label>
<div class="layui-input-block">
<select id="orderId" name="orderId" autocomplete="off" lay-search>
<option value="">请选择订单</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-form-item">
<label class="layui-form-label">设备编码</label>
<div class="layui-input-block">
<input id="deviceCode" type="text" name="deviceCode" placeholder="请选择设备编码"
autocomplete="off" class="layui-input start">
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-form-item">
<div class="layui-inline">
<button style="margin-left: 50px;"
class="layui-btn layui-btn-vat layuiadmin-btn-useradmin layui-bg-blue" lay-submit
lay-filter="spmrp-search">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
查询
</button>
</div>
</div>
</div>
</div>
</div>
<div class="layui-card-body">
<div class="layui-btn-container">
<button type="button" id="reset" class="layui-btn layui-btn-danger">重排
</button>
</div>
<div id="device_load" style='width:100%;'></div>
</div>
</div>
</div>
<script src="https://blog.csdn.net/zheshihuahua/component/layui/layui.js"></script>
<script>
layui.config({
base: '../../component/'
}).extend({
index: 'lib/index'
}).use(['index', 'view', 'form', 'laydate'], function () {
var $ = layui.$,
form = layui.form,
view = layui.view,
layer = layui.layer,
laydate = layui.laydate;

view.req({
method: 'POST',
data: JSON.stringify({ orderComplete: 0, page: 1, limit: 99999 }),
url: layui.setter.api 'biz/order/produce/page',
success: function (res) {
data = res["data"]["list"] || [];
if (data.length > 0) {
var element = document.getElementById("orderId");
for (var i = 0; i < data.length; i ) {
var option = document.createElement("option");
option.setAttribute("value", data[i]["ordNo"]);
option.innerText = data[i]["project"];
element.appendChild(option);
}
form.render("select");
}
}
});

// 颜色
function randomColor1() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
if (r < 16) {
r = "0" r.toString(16);
} else {
r = r.toString(16);
}
if (g < 16) {
g = "0" g.toString(16);
} else {
g = g.toString(16);
}
if (b < 16) {
b = "0" b.toString(16);
} else {
b = b.toString(16);
}
return "#" r g b;
}

function renderPanel() {
document.getElementById('device_load').style.cssText = 'height:' ($(window).height() - 140) 'px';
}

$(window).resize(function () {
renderPanel();
});
renderPanel();

// gantt.templates.tooltip_text = function (start, end, task) {
// var div = '<table class="layui-table"><thead><tr><th>订单</th><th>产品</th><th>数量</th><th>占用产能</th></tr></thead><tbody>';
// for (var i = 0; i < task.orders.length; i ) {
// div = '<tr>';
// div = '<td>' task.orders[i].order '</td>'
// '<td>' task.orders[i].product '</td>'
// '<td>' task.orders[i].qty '</td>'
// '<td>' percenToString(task.orders[i].progress) '</td>';
// div = '</tr>';
// }
// div = '</tbody></table>';
// return div;
// };
// 尺寸比例
function percenToString(num) {
return Math.floor(num * 100) '%';
}

function renderLabel(progress, type, sum) {
var relWidth = progress * 100;

switch (type) {
case 1:
return "<div class='custom_progress idle' style='width:" relWidth "%'>"
percenToString(progress) "</div>";
break;
case 2:
return "<div class='custom_progress in_progress' style='width:" relWidth "%'>" percenToString(progress) "</div>";
break;
case 3:
return "<div class='custom_progress ' style='width:" relWidth "%;background-color:" randomColor1() "'>" percenToString(progress) "</div>";
break;
default:
return "<div class='custom_progress ' style='width:" relWidth "%;background-color:" randomColor1() "''>" percenToString(progress) "</div>";
break;

}
}

// gantt.templates.task_text = function (start, end, task) {
// var div = '';
// var relWidth=0;
//
// for (var i = 0; i < task.orders.length; i ) {
// div = renderLabel(task.orders[i].progress, 1 i, task.storage);
// relWidth =task.orders[i].progress * 100;
//
// }
//
// //剩余宽度--------------------------------------------
// var RWidth=100-relWidth;
// if(RWidth>0)
// {
// div = "<div class='custom_progress nearly_done' style='width:" RWidth "%'></div>";
// }
//
// //--------------------------------------------
// return div;
// };
// 时间格式
gantt.config.date_format = "%Y-%m-%d";
gantt.config.scales = [
{ unit: "year", step: 1, format: "%Y" },
{ unit: "day", step: 1, date: "%m-%d" },
{ unit: "hour", step: 1, format: "%H:%i" }
];

gantt.config.reorder_grid_columns = true;
gantt.config.columns = [{
name: "text",
label: "任务名",
width: 200,
align: "center",
tree: true,
resize: true
}, {
name: "start_date",
label: "开始日期",
width: 100,
align: "center",
resize: true
}, {
name: "duration",
label: "持续时间",
width: 100,
align: "center",
resize: true

}];

gantt.config.row_height = 40;
gantt.config.scale_height = 50;
gantt.config.drag_move = false;
gantt.config.drag_resize = false;
gantt.config.sort = true;
gantt.config.show_quick_info = false;
// 关闭点击事件
gantt.attachEvent("onTaskDblClick", function (id, e) {
return false;
});

gantt.config.show_tasks_outside_timescale = true;
gantt.plugins({
auto_scheduling: true, //自动排程
tooltip: true //提示信息
});

gantt.config.start_date = new Date("2022-11-03 00:00:00");
gantt.config.end_date = new Date("2022-11-03 23:59:59");
// 样式
gantt.config.layout = {
css: "gantt_container",
cols: [{
width: 400,
min_width: 300,
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.init("device_load");

gantt.i18n.setLocale("cn"); //使用中文
function render() {
var index = layer.load(); //后面会使用这赋值来关闭这个页面
view.req({
method: 'POST',
data: JSON.stringify({
orderId: $('#orderId').val(),
deviceCode: $('#deviceCode').val()
}),
url: layui.setter.api "biz/plan/device/load",
success: function (res) {

gantt.clearAll(); //清空缓存
console.info("gantt", gantt.config.end_date);
var data = [
{ id: "10cz1t", text: "P220901-044", type: "project", progress: 0.88, open: true, parent: 0 },
{ id: "11cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },

{ id: "12cz1t", text: "备膜", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },

{ id: "121cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 05:00", parent: "12cz1t", progress: 0, open: true },

{ id: "13cz1t", text: "挤压加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
{ id: "131cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 02:00", parent: "13cz1t", progress: 0, open: true },
{ id: "132cz1t", text: "Stage #2", start_date: "2022-11-03 04:00", end_date: "2022-11-03 05:00", parent: "13cz1t", progress: 0, open: true },
{ id: "133cz1t", text: "Stage #3", start_date: "2022-11-03 07:00", end_date: "2022-11-03 08:00", parent: "13cz1t", progress: 0, open: true },
{ id: "134cz1t", text: "Stage #4", start_date: "2022-11-03 10:00", end_date: "2022-11-03 11:00", parent: "13cz1t", progress: 0, open: true },
{ id: "135cz1t", text: "Stage #5", start_date: "2022-11-03 13:00", end_date: "2022-11-03 14:00", parent: "13cz1t", progress: 0, open: true },
{ id: "136cz1t", text: "Stage #6", start_date: "2022-11-03 16:00", end_date: "2022-11-03 17:00", parent: "13cz1t", progress: 0, open: true },
{ id: "137cz1t", text: "Stage #7", start_date: "2022-11-03 19:00", end_date: "2022-11-03 20:00", parent: "13cz1t", progress: 0, open: true },

{ id: "24cz1t", text: "时效加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
{ id: "241cz1t", text: "Stage #1", start_date: "2022-11-03 05:00", end_date: "2022-11-03 06:00", parent: "24cz1t", progress: 0, open: true },
{ id: "242cz1t", text: "Stage #2", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "24cz1t", progress: 0, open: true },
{ id: "243cz1t", text: "Stage #3", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "24cz1t", progress: 0, open: true },
{ id: "244cz1t", text: "Stage #4", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "24cz1t", progress: 0, open: true },

{ id: "25cz1t", text: "氧化包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
{ id: "251cz1t", text: "Stage #1", start_date: "2022-11-03 06:00", end_date: "2022-11-03 07:00", parent: "25cz1t", progress: 0, open: true },
{ id: "252cz1t", text: "Stage #2", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "25cz1t", progress: 0, open: true },
{ id: "253cz1t", text: "Stage #3", start_date: "2022-11-03 12:00", end_date: "2022-11-03 13:00", parent: "25cz1t", progress: 0, open: true },
{ id: "254cz1t", text: "Stage #4", start_date: "2022-11-03 14:00", end_date: "2022-11-03 15:00", parent: "25cz1t", progress: 0, open: true },
{ id: "255cz1t", text: "Stage #5", start_date: "2022-11-03 18:00", end_date: "2022-11-03 19:00", parent: "25cz1t", progress: 0, open: true },
{ id: "256cz1t", text: "Stage #6", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "25cz1t", progress: 0, open: true },
{ id: "257cz1t", text: "Stage #7", start_date: "2022-11-03 22:00", end_date: "2022-11-03 23:30", parent: "25cz1t", progress: 0, open: true },

{ id: "29cz1t", text: "测试包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
{ id: "291cz1t", text: "Stage #5", start_date: "2022-11-03 15:00", end_date: "2022-11-03 16:00", parent: "29cz1t", progress: 0, open: true },
{ id: "292cz1t", text: "Stage #6", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "29cz1t", progress: 0, open: true },

{ id: "28cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },
// ,start_date: "2022-11-03 01:00",end_date: "2022-11-03 03:00"
{ id: "281cz1t", text: "备膜", start_date: "2022-11-03 01:00", end_date: "2022-11-03 03:00", parent: "28cz1t", progress: 0, open: true },
{ id: "281cz1t1", text: "备膜1", start_date: "2022-11-03 02:30", end_date: "2022-11-03 05:30", parent: "28cz1t", progress: 0, open: true },
{ id: "281cz1t2", text: "备膜2", start_date: "2022-11-03 06:50", end_date: "2022-11-03 07:50", parent: "28cz1t", progress: 0, open: true },

{ id: "282cz1t", text: "挤压加工", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "28cz1t", progress: 0.5, open: true },
{ id: "283cz1t", text: "时效加工", start_date: "2022-11-03 010:00", end_date: "2022-11-03 11:00", parent: "28cz1t", progress: 0, open: true },
{ id: "284cz1t", text: "氧化包装", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "28cz1t", progress: 0, open: true },

];
var datalist = new Array();
$.each(data, function (i, item) {

var model = new Object();
model.id = item.id;
model.text = item.text;
if (item.type != null) {
model.type = item.type;
}

model.progress = item.progress;
model.open = item.open;
model.start_date = new Date(item.start_date);
model.end_date = new Date(item.end_date);
model.parent = item.parent;
if (item.render != null) {
model.render = item.render;
}

datalist.push(model);

});

// 数据之间的关系
var links = [
// {id: "1", source: "10", target: "11", type: "1"},
// {id: "2", source: "11", target: "12", type: "1"},
// {id: "3", source: "10", target: "28", type: "1"},
//
// {id: "4", source: "12", target: "131", type: "1"},
// source:连接谁 ; target:和谁连 ; (里面写data里面的id)

{ id: "5c", source: "131cz1t", target: "241cz1t", type: "0" },
{ id: "6c", source: "132cz1t", target: "241cz1t", type: "0" },

{ id: "7c", source: "133cz1t", target: "242cz1t", type: "0" },
{ id: "8c", source: "134cz1t", target: "242cz1t", type: "0" },

{ id: "9c", source: "135cz1t", target: "243cz1t", type: "0" },
{ id: "10c", source: "136cz1t", target: "243cz1t", type: "0" },
{ id: "11c", source: "137cz1t", target: "244cz1t", type: "0" },

{ id: "14c", source: "241cz1t", target: "253cz1t", type: "0", color: "green" },
{ id: "13c", source: "241cz1t", target: "252cz1t", type: "0", color: "green" },
{ id: "12c", source: "241cz1t", target: "251cz1t", type: "0", color: "green" },

{ id: "16c", source: "242cz1t", target: "254cz1t", type: "0", color: "green" },
{ id: "15c", source: "242cz1t", target: "253cz1t", type: "0", color: "green" },

{ id: "19c", source: "243cz1t", target: "257cz1t", type: "0", color: "green" },
{ id: "18c", source: "243cz1t", target: "256cz1t", type: "0", color: "green" },
{ id: "17c", source: "243cz1t", target: "255cz1t", type: "0", color: "green" },

{ id: "21c", source: "254cz1t", target: "292cz1t", type: "0", color: "blue" },
{ id: "20c", source: "254cz1t", target: "291cz1t", type: "0", color: "blue" },

{ id: "22c", source: "28cz1t", target: "281cz1t", type: "0", color: "red" },
{ id: "23c", source: "281cz1t", target: "281cz1t1", type: "0", color: "red" },
{ id: "24c", source: "281cz1t", target: "281cz1t2", type: "0", color: "red" },

{ id: "25c", source: "281cz1t", target: "282cz1t", type: "0", color: "hotpink" },
{ id: "26c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },
{ id: "27c", source: "281cz1t", target: "283cz1t", type: "0", color: "hotpink" },
{ id: "28c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },

]
//解析
gantt.parse({
data: datalist,
links: links
});
console.info("gantt", gantt);

layer.close(index); //关闭页面
}
});
}

render();
$('#reset').click(function () {
view.req({
method: 'get',
url: layui.setter.api "biz/plan/device/init",
success: function (res) {
render();
}
});
});
form.on('submit(spmrp-search)', function (data) {
render();
});

});
</script>
</body>

</html>

觉得香点个赞，让更多的小伙伴一起快乐！

这篇好文章是转载于：编程之路

gantt/甘特图完整代码带注释，可以复制

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开