开发生产订单功能

mes/src/main/java/com/wangziyang/mes/order/controller/SpOrderController.java

@@ -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.*;
-import org.springframework.web.bind.annotation.PostMapping;
+
-import org.springframework.web.bind.annotation.RequestMapping;
+import java.util.ArrayList;
-import org.springframework.web.bind.annotation.ResponseBody;
+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);
+    }
 }

mes/src/main/resources/static/lib/gantt/css/style.css

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

mes/src/main/resources/static/lib/gantt/index.html

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

mes/src/main/resources/templates/order/production/list.ftl

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