diff --git a/productionboard/src/main/java/com/productionboard/controller/StorageController.java b/productionboard/src/main/java/com/productionboard/controller/StorageController.java
index afca7a6..65bc498 100644
--- a/productionboard/src/main/java/com/productionboard/controller/StorageController.java
+++ b/productionboard/src/main/java/com/productionboard/controller/StorageController.java
@@ -3,6 +3,7 @@ package com.productionboard.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseBody;
/**
* 门体库仓储看板
@@ -19,4 +20,58 @@ public class StorageController {
{
return prefix;
}
+
+ @GetMapping("/getProductionPlan")
+ @ResponseBody()
+ public String productionPlan(){
+ String info =
+ "{\n"
+ + " \"header\":[\n"
+ + " \"计划型号\",\n"
+ + " \"计划数量\",\n"
+ + "\t\t\"完成数量\",\n"
+ + " \"差异值\",\n"
+ + " \"计划进度\"\n"
+ + " ],\n"
+ + " \"data\":[\n"
+ + " [\n"
+ + " \"20210\",\n"
+ + " \"50\",\n"
+ + " \"25\",\n"
+ + " \"25\",\n"
+ + " \"50%\"\n"
+ + " ],\n"
+ + " [\n"
+ + " \"20210\",\n"
+ + " \"50\",\n"
+ + " \"25\",\n"
+ + " \"25\",\n"
+ + " \"50%\"\n"
+ + " ],\n"
+ + " [\n"
+ + " \"20210\",\n"
+ + " \"50\",\n"
+ + " \"25\",\n"
+ + " \"25\",\n"
+ + " \"50%\"\n"
+ + " ],\n"
+ + " [\n"
+ + " \"20210\",\n"
+ + " \"50\",\n"
+ + " \"25\",\n"
+ + " \"25\",\n"
+ + " \"50%\"\n"
+ + " ],\n"
+ + " [\n"
+ + " \"20210\",\n"
+ + " \"50\",\n"
+ + " \"25\",\n"
+ + " \"25\",\n"
+ + " \"50%\"\n"
+ + " ]\n"
+ + " ]\n"
+ + "}";
+
+ return info;
+ }
}
diff --git a/productionboard/src/main/resources/static/css/storage/style.css b/productionboard/src/main/resources/static/css/storage/style.css
index 3122ab0..dacdf34 100644
--- a/productionboard/src/main/resources/static/css/storage/style.css
+++ b/productionboard/src/main/resources/static/css/storage/style.css
@@ -35,4 +35,76 @@ body {
.differenceValue {
left: 82.9%;
color:#A0FF00;
+}
+
+.productionPlan{
+ position: absolute;
+ border: 0px solid red;
+ width: 33%;
+ height: 36%;
+ top: 14.5%;
+ left: 3.5%;
+ font-size: 12%;
+}
+
+.theCurrentInventory{
+ position: absolute;
+ border: 0px solid red;
+ width: 33%;
+ height: 36%;
+ bottom: 5%;
+ left: 3.5%;
+ font-size: 12%;
+}
+
+.emptyLocation{
+ position: absolute;
+ border: 0px solid red;
+ width: 4%;
+ height: 4%;
+ top: 48.3%;
+ color:#6BFF71;
+ font-size: 14%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.haveUsedLocation{
+ position: absolute;
+ border: 0px solid red;
+ width: 4%;
+ height: 4%;
+ top: 65%;
+ color:#FF9768;
+ font-size: 14%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.emptyLocationRatio{
+ position: absolute;
+ border: 0px solid red;
+ width: 4%;
+ height: 4%;
+ bottom: 10%;
+ color:#FF9768;
+ font-size: 14%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.haveUsedLocationRatio{
+ position: absolute;
+ border: 0px solid red;
+ width: 4%;
+ height: 4%;
+ bottom: 10%;
+ color:#FF9768;
+ font-size: 14%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
\ No newline at end of file
diff --git a/productionboard/src/main/resources/static/js/common/scrollTable.js b/productionboard/src/main/resources/static/js/common/scrollTable.js
new file mode 100644
index 0000000..950975a
--- /dev/null
+++ b/productionboard/src/main/resources/static/js/common/scrollTable.js
@@ -0,0 +1,245 @@
+/**
+ * dynamicTable 动态表格
+ * @param { Object } resource
+ * @param { String } el : 指定元素
+ * @param { Array } header : 表头
+ * @param { Array } data : 数据行
+ * @param { Number } rowNum : 显示行数
+ * @param { Boolean } index : 是否显示索引列
+ * @param { Number } timeout : 滚动动画延时
+ * @param { String } headerBGC : 标题栏背景颜色
+ * @param { String } oddRowBGC : 奇数行背景颜色
+ * @param { String } evenRowBGC : 偶数行背景颜色
+ * @param { String } fontColor : 字体颜色
+ * @param { String } indexBGC : 索引列背景颜色
+ * @param { Array } colWidth : 每列的宽度
+ */
+let dynamicTable = resource => {
+ 'use strict';
+
+ //检查参数类型
+ if (typeof resource !== 'object') {
+ console.error('未传入参数,或者参数不是Object类型');
+ return
+ }
+
+ // 检查是否传入元素
+ const ele = resource.el;
+ if (!ele) {
+ console.error('元素获取不正确！');
+ return
+ }
+ /**
+ * 检查是否传入动画触发时长
+ * 当时间小于 10 计算为秒级单位，
+ * 大于 10 计算为毫秒级单位
+ */
+ let timeout = resource.timeout;
+ if (!timeout) {
+ timeout = 2000
+ } else if (timeout < 10) {
+ timeout = timeout * 1000
+ }
+
+ // 检查 配置元素是否传入数据
+ const colName = resource.header === undefined ? '' : resource.header;
+ const rowData = resource.data === undefined ? '' : resource.data;
+ const rowNum = resource.rowNum === undefined ? '20%' : 100 / resource.rowNum + '%';
+ const headerBGC = resource.headerBGC === undefined ? '#999' : resource.headerBGC;
+ const oddRowBGC = resource.oddRowBGC === undefined ? '#bbb' : resource.oddRowBGC;
+ const evenRowBGC = resource.evenRowBGC === undefined ? '#ddd' : resource.evenRowBGC;
+ const fontColor = resource.fontColor === undefined ? 'black' : resource.fontColor;
+ const indexBGC = resource.indexBGC === undefined ? '#555' : resource.indexBGC;
+ const colIndex = resource.index === undefined ? true : resource.index;
+ const colWidth = resource.colWidth === undefined ? false : resource.colWidth;
+ const indexColor = fontColor.search(/('black')|(0{3,6})/) ? "white" : fontColor;
+
+ //基本table html
+ const html = `
+
+ `;
+ //Css样式集
+ const boxCSS = {
+ overflow: 'hidden',
+ background: headerBGC
+ };
+ const tableCSS = {
+ color: fontColor,
+ width: '100%',
+ height: '100%'
+ };
+ const theadCSS = {
+ width: '100%',
+ height: '20%'
+ };
+ const thead_trCSS = {
+ display: "flex",
+ flexWrap: "nowrap",
+ width: "100%",
+ height: "100%",
+ background: headerBGC,
+ justifyContent: "space-around"
+ };
+ const thCSS = {
+ justifyContent: "space-around",
+ fontWeight: "bold"
+ };
+ const tbodyCSS = {
+ width: "100%",
+ height: '80%',
+ boxSizing: 'border-box'
+ };
+ const tbody_trCSS = {
+ flexWrap: "nowrap",
+ width: "100%",
+ height: rowNum,
+ justifyContent: "space-around"
+ };
+ const trOddCSS = {
+ display: "flex",
+ background: oddRowBGC
+ };
+ const trEvenCSS = {
+ display: "flex",
+ background: evenRowBGC
+ };
+ const th_tdCSS = {
+ margin: 'auto',
+ whiteSpace: 'nowrap',
+ overflow: "hidden",
+ textOverflow: 'ellipsis',
+ textAlign: 'center',
+ padding: '0 4px 0 4px'
+ };
+ const indexCSS = {
+ display: 'inline-block',
+ width: '90%',
+ height: "90%",
+ background: indexBGC,
+ color: indexColor,
+ borderRadius: '20%',
+ margin: 'auto'
+ };
+ //插入table元素
+ $(ele).append(html);
+
+ //核心代码
+ //遍历插入数据 表头
+ if (colIndex) {
+ $(ele + '>.table>.thead>.tr').append('#
')
+ }
+ colName.forEach(element => {
+ $(ele + '>.table>.thead>.tr').append(`${element}
`)
+ });
+
+ //遍历插入数据 数据行
+ for (let i = 0; i < rowData.length; i++) {
+
+ $(ele + '>.table>.tbody').append('');
+ if (colIndex) {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ `${i+1}
`)
+ }
+ rowData[i].forEach(element => {
+ if (element == "一级") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ ``
+ )
+ } else if (element == "二级") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ ``
+ )
+ } else if (element == "三级") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ ``
+ )
+ } else if (element == "未处理") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ `${element}
`
+ )
+ } else if (element == "处理中") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ `${element}
`
+ )
+ } else if (element == "已结束") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ `${element}
`
+ )
+ } else {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(`${element}
`)
+ }
+
+ })
+
+ }
+
+ //设置CSS样式
+ $(ele).css(boxCSS);
+ $(ele + '>.table').css(tableCSS);
+ $(ele + '>.table>.thead').css(theadCSS);
+ $(ele + '>.table>.thead>.tr').css(thead_trCSS);
+ $(ele + '>.table>.thead>.tr>.th').css(th_tdCSS).css(thCSS);
+ $(ele + '>.table>.tbody').css(tbodyCSS);
+ $(ele + '>.table>.tbody>.tr').css(tbody_trCSS);
+ $(ele + '>.table>.tbody>.tr:odd').css(trOddCSS);
+ $(ele + '>.table>.tbody>.tr:even').css(trEvenCSS);
+ $(ele + '>.table>.tbody>.tr>.td').css(th_tdCSS);
+ $(ele + '>.table span.index').css(indexCSS)
+
+ //统一计量单位
+ const emptyUnit = element => element.replace(/[^0-9]/g, '');
+ const hendlen = $(`${ele}>.table>.thead>.tr>.th`).length;
+ const bodylen = $(`${ele}>.table>.tbody>.tr:nth-child(1)>.td`).length;
+ const ceil = Math.ceil;
+
+ /**
+ * 设置每列的宽度
+ * eq() 是在匹配的元素中取下标为n的元素
+ * nth-child() 是在匹配元素的父元素中选择第n个元素
+ */
+ if (!colWidth) {
+ $(`${ele}>.table>.thead>.tr>.th`).css({
+ width: ceil(100 / hendlen) + '%'
+ });
+ $(`${ele}>.table>.tbody>.tr>.td`).css({
+ width: ceil(100 / bodylen) + '%'
+ });
+ } else {
+ for (let i = 0; i < colWidth.length; i++) {
+ let emptyUnitColWidth = emptyUnit(colWidth[i]);
+ $(`${ele}>.table>.thead>.tr>.th:nth-child(${i+1})`).width(emptyUnitColWidth);
+ $(`${ele}>.table>.tbody>.tr>.td:nth-child(${i+1})`).width(emptyUnitColWidth);
+ }
+ }
+
+ //奇偶校验 --> 处理最后一行是奇数的问题
+ let oddORevenCheck = $(`${ele}>.table>.tbody>.tr`).length % 2 == 0 ? 'even' : 'odd';
+ //滚动动画
+ setInterval(function() {
+ $(ele + '>.table>.tbody>.tr:eq(0)').slideToggle(100, function() {
+ switch (oddORevenCheck) {
+ case 'even':
+ $(this).clone().css(trEvenCSS).appendTo(ele + '>.table>.tbody');
+ oddORevenCheck = 'odd';
+ break;
+ case 'odd':
+ $(this).clone().css(trOddCSS).appendTo(ele + '>.table>.tbody');
+ oddORevenCheck = 'even';
+ break;
+ }
+ $(this).remove();
+ });
+ }, timeout);
+
+ // 组件销毁钩子
+ $(`${ele}`).bind('DOMNodeRemoved', (e) => {
+ if (e.target.classList[0] === 'asit-table') {
+ clearInterval(timer);
+ }
+ });
+}
diff --git a/productionboard/src/main/resources/static/js/storage/index.js b/productionboard/src/main/resources/static/js/storage/index.js
index 44d61bc..8632fd2 100644
--- a/productionboard/src/main/resources/static/js/storage/index.js
+++ b/productionboard/src/main/resources/static/js/storage/index.js
@@ -1,4 +1,45 @@
$(()=>{
//单日出入库统计
storageStatistics(123,233,211,124);
+
+ //生产计划
+ $.ajax({
+ url: '/storage/getProductionPlan',
+ type: 'GET',
+ dataType: 'JSON',
+ success: function(res) {
+ dynamicTable({
+ el: '#productionPlan',
+ rowNum: 5,
+ timeout: 0,
+ header: res.header,
+ data: res.data,
+ index: false,
+ fontColor: '#B4B7BF ',
+ indexBGC: '#86F3FF',
+ headerBGC: 'rgba(8,36,75,0.2)',
+ oddRowBGC: 'rgba(8,36,75,0.2)',
+ evenRowBGC: 'rgba(6,25,57,0.2)',
+ colWidth: ['100%', '100%', '100%', '100%','100%']
+ });
+ },
+ error: function(e) {
+ console.log(e)
+ }
+ });
+
+ //当前库存统计
+ multipleThreeDimensionalCylindrical(null,document.getElementById("theCurrentInventory"));
+
+ //库存统计
+ $("#emptyLocation-left").text(123);
+ $("#emptyLocation-right").text(456);
+ $("#haveUsedLocation-left").text(789);
+ $("#haveUsedLocation-right").text(1234);
+
+ //库位占比
+ $("#emptyLocationNumber").text(68);
+ $("#emptyLocationRatio").text("39%");
+ $("#haveUsedLocationNumber").text(132);
+ $("#haveUsedLocationRatio").text("61%");
})
\ No newline at end of file
diff --git a/productionboard/src/main/resources/templates/storage/index.html b/productionboard/src/main/resources/templates/storage/index.html
index 1ae0f63..50d9641 100644
--- a/productionboard/src/main/resources/templates/storage/index.html
+++ b/productionboard/src/main/resources/templates/storage/index.html
@@ -11,17 +11,32 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
