change - 门体库可视化看板

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

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

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 = `
+                <div class="table">
+                    <div class="thead">
+                        <div class="tr"></div>
+                    </div>
+                    <div class="tbody"></div>
+                </div>
+            `;
+	//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('<div class="th"><span class="index">#</span></div>')
+	}
+	colName.forEach(element => {
+		$(ele + '>.table>.thead>.tr').append(`<div class="th">${element}</div>`)
+	});
+
+	//遍历插入数据 数据行
+	for (let i = 0; i < rowData.length; i++) {
+
+		$(ele + '>.table>.tbody').append('<div class="tr"></div>');
+		if (colIndex) {
+			$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+				`<div class="td"><span class="index">${i+1}</span></div>`)
+		}
+		rowData[i].forEach(element => {
+			if (element == "一级") {
+				$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+					`<div class="td" ><img src="img/firstAlarm.png" alt="一级报警" width="30%" height="30%" /></div>`
+					)
+			} else if (element == "二级") {
+				$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+					`<div class="td" ><img src="img/secondAlarm.png" alt="二级报警" width="30%" height="30%" /></div>`
+					)
+			} else if (element == "三级") {
+				$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+					`<div class="td" ><img src="img/thirdlyAlarm.png" alt="三级报警" width="30%" height="30%" /></div>`
+					)
+			} else if (element == "未处理") {
+				$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+					`<div class="td" Style="border:1px solid #D81F29;border-radius: 6px;background-color:#941D3B;color:white">${element}</div>`
+					)
+			} else if (element == "处理中") {
+				$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+					`<div class="td" Style="border:1px solid #E08018;border-radius: 6px;background-color:#935A2F;color:white">${element}</div>`
+					)
+			} else if (element == "已结束") {
+				$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+					`<div class="td" Style="border:1px solid #0FF4D5;border-radius: 6px;background-color:#0B9EA9;color:white">${element}</div>`
+					)
+			} else {
+				$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(`<div class="td">${element}</div>`)
+			}
+
+		})
+
+	}
+
+	//设置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);
+		}
+	});
+}

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%");
 })

productionboard/src/main/resources/templates/storage/index.html

@@ -11,17 +11,32 @@
     <script src="../../../js/common/update-split-blocks.js"></script>
     <script src="../../../js/common/ondutyplan.js"></script>
     <script src="../../../js/common/echarts.common.js"></script>
+    <script src="../../../js/common/scrollTable.js"></script>
 </head>
 <body>
 
     <!--生产计划-->
+    <div class="productionPlan" id="productionPlan"></div>
 
     <!--当前库存-->
+    <div class="theCurrentInventory" id="theCurrentInventory"></div>
 
     <!--库位统计-左库-->
+    <div class="emptyLocation" style="left:43%" id="emptyLocation-left"></div>
+    <div class="haveUsedLocation" style="left:43%" id="haveUsedLocation-left"></div>
 
     <!--库位统计-右库-->
+    <div class="emptyLocation" style="right:8%" id="emptyLocation-right"></div>
+    <div class="haveUsedLocation" style="right:8%" id="haveUsedLocation-right"></div>
+
+    <!--库位占比-->
+    <div class="emptyLocationRatio" style="left: 55.5%;" id="emptyLocationNumber"></div>
+    <div class="emptyLocationRatio" style="left: 60.7%;" id="emptyLocationRatio"></div>
+
+    <div class="haveUsedLocationRatio" style="right: 20.8%;" id="haveUsedLocationNumber"></div>
+    <div class="haveUsedLocationRatio" style="right: 15.5%;" id="haveUsedLocationRatio"></div>
 
 </body>
 <script src="../../../js/storage/index.js"></script>
+
 </html>