jQuery甘特图工作进度
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Gantt</title>
<link rel="stylesheet" type="text/css" media="screen" href="https://www.jq22.com/demo/jqueryGanttView202303262314/jquery.ganttView.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://www.jq22.com/demo/jqueryGanttView202303262314/lib/flick/jquery-ui-1.8.2.custom.css" />
<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://www.jq22.com/demo/jqueryGanttView202303262314/lib/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="https://www.jq22.com/demo/jqueryGanttView202303262314/lib/gantt-date.js"></script>
<script type="text/javascript" src="https://www.jq22.com/demo/jqueryGanttView202303262314/lib/holidays.js"></script>
<script type="text/javascript" src="https://www.jq22.com/demo/jqueryGanttView202303262314/jquery.ganttView.js"></script>
<style>
.ganttview-vtheader {
display: none;
}
.bullet_frame {
display: inline-block;
width: 40vh;
background: #FFF;
border-radius: 2vh;
box-shadow: #ccc 4px 7px 12px 2px;
padding-bottom: 1vh;
}
.bullet_frame .title {
background: #00A3FF;
color: #fff;
padding: 1.4vh;
text-align: center;
border-top-left-radius: 2vh;
border-top-right-radius: 2vh;
margin-bottom: 4px;
}
.bullet_frame ul {
display: flex;
margin: 1px 6px;
}
.bullet_frame ul li {
display: inline-block;
width: 60%;
text-align: left;
height: 3.5vh;
line-height: 3.5vh;
padding-left: 10px;
color: #23354C;
}
.bullet_frame ul lt {
width: 40%;
text-align: right;
height: 4.5vh;
line-height: 4.5vh;
border-right: 1px solid #fff;
color: #666666;
}
</style>
</head>
<body>
<div class="three-box">
<div id="ganttChart"></div>
<br />
<div class="bullet_frame" id="bullet_frame" style="display:none;">
<div class="title" id="title-text" >
task3
</div>
<ul style="background: #E7F6FF">
<lt>进度：</lt>
<li id="jd">50%</li>
</ul>
<ul style="background: #F7F9FC">
<lt>开始日期：</lt>
<li id="startime">2022-06-18 00:00:00</li>
</ul>
<ul style="background: #E7F6FF">
<lt>完成日期：</lt>
<li id="endtime">2022-06-18 00:00:00</li>
</ul>
<ul style="background: #F7F9FC">
<lt>工期：</lt>
<li id="days">28</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
var ganttData2 = [
{
id: 100, name: "主任务", series: [
{
id: 101, name: "执行任务", serieslevel: [
{ id: 1011, name: "task1-执行", text: "task1", start: new Date(2022, 10, 18, 2, 30), end: new Date(2022, 11, 10, 8, 45) ,state:0,schedule:80},
{ id: 1012, name: "task2-执行", text: "task2", start: new Date(), end: new Date() ,state:0,schedule:0},
{ id: 1013, name: "task3-执行", text: "task3", start: new Date(2022, 10, 20, 20, 00), end: new Date(2022, 11, 16, 21, 00) ,state:0, cycle:0,delay:0,approve:0,schedule:80,readOnly: true},
]
}, {
id: 102, name: "负责任务", serieslevel: [
{ id: 1021, name: "task1-负责", text: "task4", start: new Date(2022, 10, 17, 3, 30), end: new Date(2022, 11, 10, 17, 45) ,state:0,schedule:100},
{ id: 1022, name: "task2-负责", text: "task5", start: new Date(2022, 10, 18, 5, 30), end: new Date(2022, 11, 10, 16, 45) ,state:0,schedule:100},
]
}, {
id: 103, name: "督办任务", serieslevel: [
{ id: 1031, name: "task1-督办", text: "task6", start: new Date(2022, 10, 16, 4, 30), end: new Date(2022, 11, 10, 15, 45) ,state:0,schedule:100, lastChild:true},
]
},
]
},
{
id: 110, name: "主任务", series: [
{
id: 111, name: "执行任务", serieslevel: [
{ id: 1111, name: "task1-执行", text: "task7", start: new Date(2022, 10, 17, 4, 30), end: new Date(2022, 10, 30, 15, 45) ,state:0, schedule:60},
{ id: 1112, name: "task2-执行", text: "task8", start: new Date(), end: new Date() ,state:0, schedule:0},
{ id: 1113, name: "task3-执行", text: "task9", start: new Date(2022, 10, 15, 8, 30), end: new Date(2022, 11, 6, 13, 30) ,state:0, schedule:70,lastChild:true},
]
}
]
},
{
id: 120, name: "主任务", series: [
{
id: 121, name: "执行任务", serieslevel: [
{ id: 1211, name: "task1-执行", text: "task10", start: new Date(2022, 10, 18, 3, 30), end: new Date(2022, 11, 16, 15, 45) ,state:0,schedule:90,lastChild:true},
]
}
]
},
{
id: 130, name: "主任务", series: [
{
id: 131, name: "执行任务", serieslevel: [
{ id: 1311, name: "task1-执行", text: "task11", start: new Date(2022, 10, 18, 3, 30), end: new Date(2022, 11, 1, 20, 45) ,state:0,schedule:78,lastChild:true},
]
}
]
},
];
var selectedObj = null;
$("#ganttChart").ganttView({
ganttScale: "months",// monthsweeks dayshours
showWeekends: true, //是否现在周末高亮
showLine: true,//是否显示 当前时间线(为"周"时显示背景颜色)
data: ganttData2, //数据来源
vtHeaderWidth: 300,//左侧任务模块宽度
cellWidth: 30, //格子宽度(ganttScale = hours/weeks:宽度重新计算 最小为50)
cellHeight: 30,//格子行高
titileHeight: 35,//标题行高
start: new Date(2022, 10, 13), //范围最小时间(请根据 ganttScale 参数调节初始时间范围)
end: new Date(2022, 11, 30), //范围最大时间
slideWidth: '100%',//甘特图宽度
excludeWeekends: true,//排除星期的最后一天
showDayOfWeek: true,//是否显示星期
showHolidays: false,//显示节假日
excludeHolidays: false,//排除节假日
gridHoverL:true,//是否显示鼠标移入效果(列)
gridHoverH:true,//是否显示鼠标移入效果(行)
isUnfold:false,//模块下任务超过2条 显示展开收起按钮
unfoldConfig:false,//初始化展开/收起(模块下任务超过2条 显示展开收起按钮) true:收起
clicked: function (o) {
selectedObj = o;
var data = selectedObj.data('block-data');
var itemName = data.itemName ? data.itemName : "";
var seriesName = data.seriesName ? data.seriesName : "";
var text = data.text ? data.text : "";
var sYYYY = data.start.getYear();
sYYYY = sYYYY < 1000 ? sYYYY + 1900 : sYYYY;
var sMM = data.start.getMonth();
var sDD = data.start.getDate();
console.log('sDD',sDD)
var eYYYY = data.end.getYear();
eYYYY = eYYYY < 1000 ? eYYYY + 1900 : eYYYY;
var eMM = data.end.getMonth();
var eDD = data.end.getDate();
console.log('eDD',eDD)
$('#ganttData-item-id').val(data.itemId);
$('#ganttData-item-name').val(itemName);
$('#ganttData-series-id').val(data.seriesId);
$('#ganttData-series-name').val(seriesName);
$('#ganttData-series-start').val(sYYYY + "/" + sMM + "/" + sDD);
$('#ganttData-series-end').val(eYYYY + "/" + eMM + "/" + eDD);
$('#ganttData-series-text').val(text);
},
dblClicked: function (o) {
if (selectedObj == null) { return; }
if (selectedObj.data('block-data').seriesId == o.data('block-data').seriesId) {
$('#ganttData-reset').trigger("click");
}
},
changed: function (o) {
o.trigger("click");
}
});
$('#ganttData-add').click(function () {
var name = $('#ganttData-series-name').val();
name = (name == "") ? null : name;
var text = $('#ganttData-series-text').val();
text = (text == "") ? null : text;
var start = $('#ganttData-series-start').val().split("/");
var end = $('#ganttData-series-end').val().split("/");
var data = [{
id: parseInt($('#ganttData-item-id').val()),
name: $('#ganttData-item-name').val(),
series: [{
id: parseInt($('#ganttData-series-id').val()),
name: name,
text: text,
start: new Date(start, parseInt(start) - 1, start),
end: new Date(end, parseInt(end) - 1, end),
}]
}];
$().ganttView.addData(data);
});
$('#ganttData-refresh').click(function () {
if (selectedObj == null) { return; }
var data = selectedObj.data('block-data');
data.itemName = $('#ganttData-item-name').val();
data.seriesName = $('#ganttData-series-name').val();
var start = $("#ganttData-series-start").val().split("/");
data.start = new Date(start, parseInt(start) - 1, start);
var end = $("#ganttData-series-end").val().split("/");
data.end = new Date(end, parseInt(end) - 1, end);
data.text = $('#ganttData-series-text').val();
selectedObj.refreshGanttData();
});
$('#ganttData-delete').click(function () {
if (selectedObj == null) { return; }
selectedObj.deleteGanttData(selectedObj);
$('#ganttData-reset').trigger("click");
});
$('#ganttData-reset').click(function () {
selectedObj = null;
$('.ganttData-input input').val("");
});
});
</script>
</html>
页:
[1]