开发生产订单功能

pull/1/head
wangziyangyang 2020-07-01 18:09:02 +08:00
parent e80b425a12
commit ee340a3da3
10 changed files with 2561 additions and 6 deletions

View File

@ -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

View File

@ -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;
}

View File

@ -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

View File

@ -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,