开发生产订单功能
wangziyangyang
parent
e80b425a12
commit
ee340a3da3
|
|
@ -17,10 +17,12 @@ import org.apache.commons.lang3.StringUtils;
|
|||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
import java.util.ArrayList;
|
||||
import java.util.HashMap;
|
||||
import java.util.List;
|
||||
import java.util.Map;
|
||||
|
||||
/**
|
||||
* <p>
|
||||
|
|
@ -120,4 +122,40 @@ public class SpOrderController extends BaseController {
|
|||
iSpOrderService.removeById(req.getId());
|
||||
return Result.success();
|
||||
}
|
||||
|
||||
@ResponseBody
|
||||
@RequestMapping(value = "/gantt/list", method = RequestMethod.POST, produces = "application/json")
|
||||
public Result getListGantt(Map<String, Object> params) throws Exception {
|
||||
List<Map<String, Object>> result = new ArrayList<>();
|
||||
for (int i = 0; i < 20; i++) {
|
||||
Map<String, Object> map = new HashMap<>(8);
|
||||
map.put("id", "id" + (i + 1));
|
||||
if (i % 2 == 0) {
|
||||
map.put("name", "物料编码" + (i + 1));
|
||||
map.put("desc", "计划：");
|
||||
} else {
|
||||
map.put("desc", "实际：");
|
||||
}
|
||||
map.put("cssClass", "redLabel");
|
||||
|
||||
List<Map<String, Object>> values = new ArrayList<>();
|
||||
Map<String, Object> value = new HashMap<>(8);
|
||||
value.put("from", "/Date(" + System.currentTimeMillis() + ")/");
|
||||
value.put("to", "/Date(" + (System.currentTimeMillis() + 1000000000) + ")/");
|
||||
value.put("label", "极板");
|
||||
value.put("desc", "悬停悬停悬停悬停悬停...");
|
||||
value.put("customClass", "ganttGreen");
|
||||
if (i == 1) {
|
||||
value.put("customClass", "ganttOrange");
|
||||
}
|
||||
if (i == 2) {
|
||||
value.put("customClass", "ganttRed");
|
||||
}
|
||||
value.put("dataObj", "1");
|
||||
values.add(value);
|
||||
map.put("values", values);
|
||||
result.add(map);
|
||||
}
|
||||
return Result.success(result);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 B |
Binary file not shown.
|
After Width: | Height: | Size: 683 B |
Binary file not shown.
|
After Width: | Height: | Size: 160 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1,474 @@
|
|||
.gantt {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
/*清除掉上下间距*/
|
||||
border: 8px solid #ddd;
|
||||
position: relative;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*设置底部控件位置（前端技术有限，就这样简单的处理了一下）*/
|
||||
.nav-slider {
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
.gantt:after {
|
||||
content: ".";
|
||||
visibility: hidden;
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.fn-gantt {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fn-gantt *,
|
||||
.fn-gantt *:after,
|
||||
.fn-gantt *:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fn-gantt .fn-content {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fn-gantt .row {
|
||||
float: left;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* === LEFT PANEL === */
|
||||
|
||||
.fn-gantt .leftPanel {
|
||||
float: left;
|
||||
width: 380px;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid #DDD;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.fn-gantt .leftPanel .fn-label {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 5px;
|
||||
color: #484A4D;
|
||||
width: 180px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fn-gantt .leftPanel .row {
|
||||
border-bottom: 1px solid #DDD;
|
||||
}
|
||||
|
||||
.fn-gantt .leftPanel .name, .fn-gantt .leftPanel .desc {
|
||||
float: left;
|
||||
height: 24px;
|
||||
width: 50%;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.fn-gantt .leftPanel .name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fn-gantt .leftPanel .fn-wide, .fn-gantt .leftPanel .fn-wide .fn-label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fn-gantt .leftPanel .spacer {
|
||||
background-color: #f6f6f6;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* === RIGHT PANEL === */
|
||||
|
||||
.fn-gantt .rightPanel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fn-gantt .dataPanel {
|
||||
margin-left: 0;
|
||||
outline: 1px solid #DDD;
|
||||
/* TODO: Replace image with gradient?
|
||||
background-size: 24px 24px;
|
||||
background-image: linear-gradient(to left, rgba(221, 221, 221, 0.7) 1px, transparent 1px), linear-gradient(to top, rgba(221, 221, 221, 0.7) 1px, transparent 1px);
|
||||
*/
|
||||
background-image: url(img/grid.png);
|
||||
background-repeat: repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fn-gantt .row.header {
|
||||
margin-right: -1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fn-gantt .day, .fn-gantt .date {
|
||||
overflow: visible;
|
||||
width: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
border-right: 1px solid #DDD;
|
||||
border-bottom: 1px solid #DDD;
|
||||
font-size: 11px;
|
||||
color: #484a4d;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fn-gantt .sa, .fn-gantt .sn, .fn-gantt .wd {
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fn-gantt .sa, .fn-gantt .sn {
|
||||
color: #939496;
|
||||
background-color: #f5f5f5;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fn-gantt .wd {
|
||||
background-color: #f6f6f6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fn-gantt .holiday {
|
||||
background-color: #ffd263;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.fn-gantt .today {
|
||||
background-color: #fff8da;
|
||||
height: 24px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fn-gantt .rightPanel .month, .fn-gantt .rightPanel .year {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
border-right: 1px solid #DDD;
|
||||
border-bottom: 1px solid #DDD;
|
||||
height: 24px;
|
||||
background-color: #f6f6f6;
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
color: #484a4d;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fn-gantt-hint {
|
||||
border: 3px solid #eeeeee;
|
||||
background-color: #F0F0F0;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 11;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.fn-gantt .bar {
|
||||
background-color: #D0E4FD;
|
||||
height: 18px;
|
||||
margin: 0 3px 3px 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.25) inset;
|
||||
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.25) inset;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0.25) inset;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
opacity: 0.80;
|
||||
}
|
||||
|
||||
.fn-gantt .bar .fn-label {
|
||||
line-height: 18px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
|
||||
color: #414B57 !important;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttRed {
|
||||
background-color: #FF5722;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttRed .fn-label {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttGreen {
|
||||
background-color: #009688;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttGreen .fn-label {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttOrange {
|
||||
background-color: #FFB800;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttOrange .fn-label {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttBlue {
|
||||
background-color: #1E9FFF;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttBlue .fn-label {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttBlack {
|
||||
background-color: #393D49;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttBlack .fn-label {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttCyan {
|
||||
background-color: #2F4056;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttCyan .fn-label {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttGray {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.fn-gantt .ganttGray .fn-label {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
/* === BOTTOM NAVIGATION === */
|
||||
|
||||
.fn-gantt .bottom {
|
||||
clear: both;
|
||||
background-color: #f6f6f6;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate {
|
||||
border-top: 1px solid #DDD;
|
||||
padding: 10px 0 10px 225px;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-slider {
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-slider-left, .fn-gantt .navigate .nav-slider-right {
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-slider-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-slider-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-slider-content {
|
||||
text-align: left;
|
||||
width: 160px;
|
||||
height: 20px;
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-slider-bar, .fn-gantt .navigate .nav-slider-button {
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-slider-bar {
|
||||
width: 155px;
|
||||
height: 6px;
|
||||
background-color: #838688;
|
||||
margin: 8px 0 0 0;
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) inset;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-slider-button {
|
||||
width: 17px;
|
||||
height: 60px;
|
||||
background: url(img/slider_handle.png) center center no-repeat;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: -26px 0 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .page-number {
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .page-number span {
|
||||
color: #666666;
|
||||
margin: 0 6px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate a:link, .fn-gantt .navigate a:visited, .fn-gantt .navigate a:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fn-gantt .nav-link {
|
||||
margin: 0 3px 0 0;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 0;
|
||||
background: #595959 url(img/icon_sprite.png) !important;
|
||||
border: 1px solid #454546;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fn-gantt .nav-link:active {
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) inset, 0 1px 0 #FFF;
|
||||
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) inset, 0 1px 0 #FFF;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) inset, 0 1px 0 #FFF;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-page-back {
|
||||
background-position: 1px 0 !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-page-next {
|
||||
background-position: 1px -16px !important;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-slider .nav-page-next {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-begin {
|
||||
background-position: 1px -112px !important;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-prev-week {
|
||||
background-position: 1px -128px !important;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-prev-day {
|
||||
background-position: 1px -48px !important;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-next-day {
|
||||
background-position: 1px -64px !important;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-next-week {
|
||||
background-position: 1px -160px !important;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-end {
|
||||
background-position: 1px -144px !important;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-zoomOut {
|
||||
background-position: 1px -96px !important;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-zoomIn {
|
||||
background-position: 1px -80px !important;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-now {
|
||||
background-position: 1px -32px !important;
|
||||
}
|
||||
|
||||
.fn-gantt .navigate .nav-slider .nav-now {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.fn-gantt-loader {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf000000', endColorstr='#bf000000', GradientType=0);
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
cursor: wait;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.fn-gantt-loader-spinner span {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery.Gantt</title>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css" />
|
||||
<link href="css/prettify.min.css" rel="stylesheet" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
|
||||
.contain {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="gantt_ot" style="width:800px; margin:100px auto;">
|
||||
<div class="gantt"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<script src="js/jquery-2.1.4.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/jquery.fn.gantt.js"></script>
|
||||
|
||||
<script src="js/prettify.min.js"></script>
|
||||
<script>
|
||||
|
||||
$(function () {
|
||||
|
||||
"use strict";
|
||||
|
||||
//初始化gantt
|
||||
$(".gantt").gantt({
|
||||
source: [
|
||||
|
||||
{
|
||||
name: "task 1",
|
||||
desc: "",
|
||||
values: [{
|
||||
from: "/Date(1320192000000)/",
|
||||
to: "/Date(1320592000000)/",
|
||||
label: "",
|
||||
customClass: "ganttRed"
|
||||
}]
|
||||
}, {
|
||||
name: "task 2",
|
||||
desc: "这是描述",
|
||||
values: [{
|
||||
from: "/Date(1322611200000)/",
|
||||
to: "/Date(1323302400000)/",
|
||||
label: "",
|
||||
customClass: "ganttRed"
|
||||
}]
|
||||
}, {
|
||||
name: "task 3",
|
||||
desc: "",
|
||||
values: [{
|
||||
from: "/Date(1323802400000)/",
|
||||
to: "/Date(1325685200000)/",
|
||||
label: "",
|
||||
customClass: "ganttGreen"
|
||||
}]
|
||||
}, {
|
||||
name: "task 4",
|
||||
desc: "描述",
|
||||
values: [{
|
||||
from: "/Date(1325685200000)/",
|
||||
to: "/Date(1325695200000)/",
|
||||
label: "",
|
||||
customClass: "ganttBlue"
|
||||
}]
|
||||
}, {
|
||||
name: "task 5",
|
||||
desc: "",
|
||||
values: [{
|
||||
from: "/Date(1326785200000)/",
|
||||
to: "/Date(1325785200000)/",
|
||||
label: "",
|
||||
customClass: "ganttGreen"
|
||||
}]
|
||||
}, {
|
||||
name: "task 6",
|
||||
desc: "",
|
||||
values: [{
|
||||
from: "/Date(1328785200000)/",
|
||||
to: "/Date(1328905200000)/",
|
||||
label: "",
|
||||
customClass: "ganttBlue"
|
||||
}]
|
||||
}, {
|
||||
name: "task 7",
|
||||
desc: "",
|
||||
values: [{
|
||||
from: "/Date(1330011200000)/",
|
||||
to: "/Date(1336611200000)/",
|
||||
label: "",
|
||||
customClass: "ganttOrange"
|
||||
}]
|
||||
}, {
|
||||
name: "task 8",
|
||||
desc: "",
|
||||
values: [{
|
||||
from: "/Date(1336611200000)/",
|
||||
to: "/Date(1338711200000)/",
|
||||
label: "",
|
||||
customClass: "ganttOrange"
|
||||
}]
|
||||
},
|
||||
|
||||
{
|
||||
name: "more",
|
||||
desc: "",
|
||||
values: [
|
||||
{
|
||||
from: "/Date(1322611200000)/",
|
||||
to: "/Date(1323302400000)/",
|
||||
label: "",
|
||||
customClass: "ganttBlue"
|
||||
},
|
||||
{
|
||||
from: "/Date(1323802400000)/",
|
||||
to: "/Date(1325685200000)/",
|
||||
label: "",
|
||||
customClass: "ganttOrange"
|
||||
},
|
||||
{
|
||||
from: "/Date(1328785200000)/",
|
||||
to: "/Date(1328905200000)/",
|
||||
label: "",
|
||||
customClass: "ganttGreen"
|
||||
},
|
||||
|
||||
]
|
||||
}],
|
||||
navigate: 'scroll',//buttons scroll
|
||||
scale: "weeks",// months weeks days hours
|
||||
maxScale: "months",
|
||||
minScale: "days",
|
||||
itemsPerPage: 10,
|
||||
onItemClick: function (data) {
|
||||
alert("Item clicked - show some details");
|
||||
},
|
||||
onAddClick: function (dt, rowId) {
|
||||
alert("Empty space clicked - add an item!");
|
||||
},
|
||||
onRender: function () {
|
||||
if (window.console && typeof console.log === "function") {
|
||||
console.log("chart rendered");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
//弹窗功能
|
||||
$(".gantt").popover({
|
||||
selector: ".bar",
|
||||
title: "I'm a popover",
|
||||
content: "And I'm the content of said popover.",
|
||||
trigger: "hover",
|
||||
placement: "auto right"
|
||||
});
|
||||
|
||||
|
||||
//prettyPrint();
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -7,6 +7,20 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<#include "${request.contextPath}/common/common.ftl">
|
||||
<link rel="stylesheet" href="${request.contextPath}/lib/gantt/css/style.css" media="all">
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
padding: 0 0 50px 0;
|
||||
}
|
||||
|
||||
.contain {
|
||||
width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="splayui-container">
|
||||
|
|
@ -34,7 +48,8 @@
|
|||
</form>
|
||||
|
||||
<!--表格-->
|
||||
<table class="layui-hide" id="js-record-table" lay-filter="js-record-table-filter"></table>
|
||||
<#-- <table class="layui-hide" id="js-record-table" lay-filter="js-record-table-filter"></table>-->
|
||||
<div id="js-gantt" class="gantt"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -57,7 +72,61 @@
|
|||
</script>
|
||||
|
||||
<!--js逻辑-->
|
||||
<script src="${request.contextPath}/lib/gantt/js/jquery.fn.gantt.js" charset="utf-8"></script>
|
||||
|
||||
<script>
|
||||
var ganttData = [];
|
||||
// 获取数据
|
||||
spUtil.ajax({
|
||||
url: '${request.contextPath}/order/release/gantt/list',
|
||||
async: false,
|
||||
type: 'POST',
|
||||
// 是否显示 loading
|
||||
showLoading: true,
|
||||
// 是否序列化参数
|
||||
serializable: false,
|
||||
// 参数
|
||||
data: {
|
||||
},
|
||||
success: function (data) {
|
||||
ganttData = data.data;
|
||||
},
|
||||
error: function () {
|
||||
}
|
||||
});
|
||||
|
||||
//初始化gantt
|
||||
var $gantt = $("#js-gantt").gantt({
|
||||
source: ganttData,
|
||||
navigate: 'scroll',//buttons scroll
|
||||
scale: "days",// months weeks days hours
|
||||
maxScale: "months",
|
||||
minScale: "days",
|
||||
waitText: "请稍后...",
|
||||
itemsPerPage: 10,
|
||||
tnTitle1: '物料编码',
|
||||
tnTitle2: '计划/实际',
|
||||
onItemClick: function (data) {
|
||||
modifyPlan();
|
||||
},
|
||||
onAddClick: function (dt, rowId) {
|
||||
console.log(dt)
|
||||
console.log(rowId)
|
||||
console.log("onAddClick");
|
||||
},
|
||||
onRender: function () {
|
||||
console.log('onRender');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 修改
|
||||
* @param
|
||||
*/
|
||||
function modifyPlan(id) {
|
||||
alert(id)
|
||||
}
|
||||
|
||||
layui.use(['form', 'table', 'spLayer', 'spTable'], function () {
|
||||
var form = layui.form,
|
||||
table = layui.table,
|
||||
|
|
|
|||
Loading…
Reference in New Issue