<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body>
<div id="myTabContent" class="tab-content" style="width:auto;height: auto ">
<div class="tab-pane fade in active" id="tabHeader">
<div class="col-sm-12 select-info">
<form id="task-form">
<div class="select-list">
<ul>
<li style="height: 30px">
<label>创建时间： </label>
<div style="display: inline-block;">
<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="startTime" readonly/>
</div>
<span>-</span>
<div style="display: inline-block;">
<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime" readonly/>
</div>
</li>
<li>
物料编码：<input type="text" name="code" class="code"/>
</li>
<li>
<a class="btn btn-primary btn-rounded btn-sm btnQuery" ><i class="fa fa-search"></i> 搜索</a>
</li>
</ul>
</div>
</form>
</div>
</div>
</div><br><br><br><br>
<div id="inventoryEle" style="width:105%;height:90%;"></div>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div th:include="include :: footer"></div>
<script th:src="@{/js/echarts/echarts.js}"></script>
<script type="text/javascript">
/* 数组去掉重复*/
Array.prototype.unique5 = function () {
let x = new Set(this);
return [...x];
}
$(function () {
layui.use('laydate', function() {
var laydate = layui.laydate;
var now = new Date();
var before = new Date(now - 6 * 30 * 86400 * 1000);
laydate.render({ elem: '#startTime', theme: 'molv', value: before, isInitValue: true});
laydate.render({ elem: '#endTime', theme: 'molv', value: now, isInitValue: true});
});
});
/*时间差*/
String.prototype.GetDateDiff = function (statr, end) {
if (statr == null || end == null) return "";
var diff = new Date(end).getTime() - new Date(statr).getTime(); //时间差的毫秒数
//计算出相差天数
var days = Math.floor(diff / (24 * 3600 * 1000));
//计算出小时数
var leave1 = diff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000));
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000));
//计算相差秒数
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000);
var value = "";
if (days != 0) value = days + "天";
if (hours != 0) value += hours + "小时";
if (minutes != 0) value += minutes + "分钟";
if (seconds != 0) value += seconds + "秒";
return value;
}
var prefix = ctx + "inventory/report";
let app = {
data: {
urlInventory: prefix + "/changes",
echartsInventory: {
title:{
text:'库存变化报表'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis: {
name : '创建时间',
type: 'category',
data: []//时间
},
legend: {
data: [] //物料编码
},
yAxis: {
name : '库存数量',
type: 'value'
},
series:[]
},
inventoryEchartsObj:null,
ele:{
inventoryEle: document.querySelector("#inventoryEle"),
},
echartsInventoryData:{
xAxisData:[],
seriesData:[ {
name: '', //物料编码
type: 'bar',
data: []
}],
legendData:[]
},
startTimeEle:document.querySelector("#startTime"),
endTimeEle:document.querySelector("#endTime"),
seTypeEle:document.querySelector(".code"),
},
methods: {
getData: function (bodyValue) {
let seType=app.data.seTypeEle.value;
let startTime=app.data.startTimeEle.value;
let endTime=app.data.endTimeEle.value;
let url="";
if (seType===""){
url= `${app.data.urlInventory}?startTime=${startTime}&endTime=${endTime}`;
}else {
url= `${app.data.urlInventory}?materialCode=${seType}&startTime=${startTime}&endTime=${endTime}`;
}
fetch(url,
{
method: "post",
headers: new Headers({
"Content-Type": "json"
})
}).then(function (res) {
return res.json();
}).then(function (data) {
console.log(data);
app.methods.initValue(data);
app.methods.initEcharts();
}).catch(function (error) {
alert(error);
});
},
initEcharts: function () {
if (app.data.inventoryEchartsObj==null)
app.data.inventoryEchartsObj = echarts.init(app.data.ele.inventoryEle);
app.data.echartsInventory.legend.data=app.data.echartsInventoryData.legendData;
app.data.echartsInventory.xAxis.data=app.data.echartsInventoryData.xAxisData;
app.data.echartsInventory.series=app.data.echartsInventoryData.seriesData;
//清空
app.data.inventoryEchartsObj.clear();
app.data.inventoryEchartsObj.setOption(app.data.echartsInventory);
},
initValue:function (json){
var temp=app.data.echartsInventoryData;
temp.seriesData[0].data=[];
temp.xAxisData=[];
for (let i=0;i<json.length;i++){
temp.xAxisData.push(json[i].created);
temp.legendData.push(json[i].materialCode);
temp.seriesData[0].name=json[i].materialCode;
temp.seriesData[0].data.push(json[i].count);
}
temp.legendData= temp.legendData.unique5();
}
},
registerEvent: function () {
let btn = document.querySelector('.btnQuery');
btn.addEventListener('click',function() {
let startTime=document.querySelector("#startTime").value;
let endTime=document.querySelector("#endTime").value;
// let day="".GetDateDiff(startTime,endTime).replace("天","");
// if (parseInt(day)>8){
// alert("日期范围请在一周内！")
// return;
// }
app.methods.getData();
})
},
init: function () {
setTimeout(()=>{
app.methods.getData();
},1000)
app.registerEvent();
}
};
app.init();
</script>
</body>
</html>