<!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 class="time" style="height: 30px">
<label>创建时间： </label>
<input type="text" class="time-input" id="startTime" readonly placeholder="开始时间"
name="startTime"/>
<span>-</span>
<input type="text" class="time-input" id="endTime" readonly placeholder="结束时间"
name="endTime"/>
</li>
<li>
交易类型：<select class="seType" name="type"
th:with="type=${@dict.getType('inventoryTransactionType')}">
<option value="">所有</option>
<option th:each="e : ${type}" th:text="${e['dictLabel']}"
th:value="${e['dictValue']}"></option>
</select>
</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];
}
/*时间差*/
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 + "/list",
echarts: {
opt: {
inventory: {
legend: {},
tooltip: {},
title: {
text: '库存交易报表'
},
dataset: {
//dimensions: ['product', "入库", '出库', '调整入','调整出','调整属性','盘点','移库入','移库出'],
dimensions: ['product'],
source: [
// { product: '2015-10-1', "入库": 43.3, '出库': 85.8, '调整入': 93.7 },
// { product: '2015-10-2', "入库": 43.3, '出库': 85.8, '调整入': 93.7 },
]
},
xAxis: {
type: 'category',
name: '创建时间'
},
yAxis: {
name: '库存数量'
},
series: []
}
},
ele: {
inventoryEle: document.querySelector("#inventoryEle"),
},
data: {
xAxisData: [],
seriesData: [],
legendTitle: ""
}
},
inventoryEchartsObj: null,
startTimeEle: document.querySelector("#startTime"),
endTimeEle: document.querySelector("#endTime"),
seTypeEle: document.querySelector(".seType"),
dimensionsRel: {
"10": "入库",
"20": "出库",
"30": "调整入",
"40": "调整出",
"50": "调整属性",
"60": "盘点",
"70": "移库入",
"80": "移库出",
}
},
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}?transactionType=${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.echarts.ele.inventoryEle);
//清空
app.data.inventoryEchartsObj.clear();
app.data.inventoryEchartsObj.setOption(app.data.echarts.opt.inventory);
},
initValue: function (json) {
if (json == null) return;
let source = [];
let dimensions = ['product'];
let seriesLen = 1;
for (let i = 0; i < json.length; i++) {
const created = json[i].created;
let tempSource = []
for (let j = 0; j < json[i].list.length; j++) {
//后台返回的 transactionType 值要存在 dimensionsRel
let keys = json[i].list[j].transactionType;
let typeName = app.data.dimensionsRel[keys];
dimensions.push(typeName);
var obj = {};
obj.product = created;
let arrIndex = source.findIndex(x => x.product == created);
if (arrIndex !== -1) {
source[arrIndex][typeName] = json[i].list[j].taskQty;
} else {
obj[typeName] = json[i].list[j].taskQty;
source.push(obj);
}
}
seriesLen = json[0].seriesLen;
}
// app.data.echarts.opt.inventory.series=[];
// for (let i=0;i<seriesLen;i++){
// app.data.echarts.opt.inventory.series.push({ type: 'bar' });
// }
let setType = app.data.seTypeEle.value;
app.data.echarts.opt.inventory.series = [];
if (setType == "") {
app.data.echarts.opt.inventory.series = [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar'}, {type: 'bar'}];
} else {
app.data.echarts.opt.inventory.series.push({type: 'bar'})
}
app.data.echarts.opt.inventory.dataset.dimensions = dimensions.unique5();
app.data.echarts.opt.inventory.dataset.source = source;
}
},
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>