<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<title>首页</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
|
<script type="text/javascript" src="../../static/js/common.js"></script>
|
<script type="text/javascript" src="../../static/layui/layui.js"></script>
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/js/echarts/echarts.min.js"></script>
|
<script type="text/javascript" src="../../static/js/echarts/highcharts.js"></script>
|
<style>
|
body {
|
background-color: #f1f1f1;
|
}
|
.home-elem {
|
background-color: #fff;
|
height: 30%;
|
margin: 15px 15px 45px 15px;
|
border-radius: 5px;
|
box-shadow: 0 0 3px rgba(0,0,0,.3);
|
}
|
.home-elem:first-child{
|
margin-bottom: 0;
|
}
|
.chart-elem {
|
box-sizing: border-box;
|
display: inline-block;
|
width: 49%;
|
}
|
.chart-elem div {
|
padding-top: 15px;
|
padding-bottom: 5px;
|
}
|
.chart-elem:first-child {
|
padding: 0 50px;
|
}
|
.chart-elem:last-child {
|
padding: 0 50px;
|
border-left: 1px solid rgba(0,0,0,.1);
|
}
|
/*表格工具栏*/
|
.layui-table-tool {
|
display: none;
|
}
|
/*表格*/
|
.layui-table thead th {
|
font-weight: bold;
|
text-align: center;
|
}
|
div .layui-table-tool .layui-table-tool-self .layui-inline[title='导出']{
|
display: none;
|
}
|
.layui-form.layui-border-box.layui-table-view{
|
margin: 15px 0 35px 0;
|
width: 100%;
|
border-width: 0;
|
}
|
.layui-table-box{
|
padding-bottom: 10px;
|
}
|
.layui-table-body.layui-table-main{
|
overflow: hidden;
|
}
|
.layui-table-page{
|
border-width: 0;
|
}
|
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {
|
background-color: #f9f9f9;
|
}
|
.layui-table thead tr {
|
background-color: #fff;
|
}
|
#form-header {
|
font-size: 18px;
|
color: #377bb5;
|
font-weight: bold;
|
height: 30px;
|
box-sizing: border-box;
|
padding: 10px 0 10px 20px;
|
}
|
.layui-form.layui-border-box.layui-table-view {
|
border-top: 1px solid rgba(0,0,0,.1);
|
}
|
</style>
|
</head>
|
<body>
|
|
<!--报表数据-->
|
<div class="home-elem charts-contain">
|
<div class="chart-elem">
|
<div id="pie"></div>
|
</div>
|
<div class="chart-elem">
|
<div id="line"></div>
|
</div>
|
</div>
|
|
<!--表格数据-->
|
<div class="home-elem loc-retention">
|
<div class="layui-form">
|
<div id="form-header">库存滞留时间统计表</div>
|
<table class="layui-hide" id="stayTime" lay-filter="stayTime"></table>
|
</div>
|
</div>
|
</body>
|
<script>
|
pieCharts();
|
lineCharts();
|
// 饼图
|
function pieCharts(){
|
$.ajax({
|
url:baseUrl+'/console/loc/pie/charts',
|
headers: {'token': localStorage.getItem('token')},
|
dataType: 'json',
|
contentType: 'application/json;charset=UTF-8',
|
crossDomain: true,
|
method: 'POST',
|
success:function(res){
|
var data = res.data;
|
var dataPie=eval(data.rows);
|
var chart = {
|
plotBackgroundColor: null,
|
plotBorderWidth: null,
|
plotShadow: false
|
};
|
var title = {
|
text: '库位使用比例',
|
margin:1,
|
style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
|
y: 5
|
};
|
var tooltip = {
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
};
|
var plotOptions = {
|
pie: {
|
allowPointSelect: true,
|
cursor: 'pointer',
|
dataLabels: {
|
enabled: true,
|
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
|
style: {
|
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
}
|
}
|
}
|
};
|
var series= [{
|
type: 'pie',
|
name: '库位占比',
|
data: dataPie
|
}];
|
var loading = {
|
hideDuration: 3,
|
showDuration: 3
|
};
|
var json = {};
|
json.chart = chart;
|
json.title = title;
|
json.tooltip = tooltip;
|
json.series = series;
|
json.plotOptions = plotOptions;
|
json.loading = loading;
|
json.credits = {enabled: false};
|
$('#pie').highcharts(json);
|
|
},
|
error:function(){
|
}
|
});
|
}
|
|
// 折线图
|
function lineCharts() {
|
$.ajax({
|
url: baseUrl+'/console/locIo/line/charts',
|
headers: {'token': localStorage.getItem('token')},
|
dataType: 'json',
|
contentType: 'application/json;charset=UTF-8',
|
method: 'POST',
|
success: function (res) {
|
var data = res.data;
|
var dataPie = eval(data.rows);
|
var title = {
|
text: '日入出库数量',
|
margin: 1,
|
style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
|
y: 5
|
};
|
var xAxis = {
|
categories: [getDate(-11), getDate(-10), getDate(-9), getDate(-8), getDate(-7), getDate(-6),
|
getDate(-5), getDate(-4), getDate(-3), getDate(-2), getDate(-1), getDate(-0)]
|
};
|
var yAxis = {
|
title: {
|
text: '入/出库数量'
|
},
|
plotLines: [{
|
value: 0,
|
width: 1,
|
color: '#808080'
|
}]
|
};
|
var tooltip = {};
|
var legend = {
|
layout: 'vertical',
|
align: 'right',
|
verticalAlign: 'middle',
|
borderWidth: 0
|
};
|
var loading = {
|
hideDuration: 3,
|
showDuration: 3
|
}
|
var series = dataPie;
|
var json = {};
|
json.title = title;
|
json.xAxis = xAxis;
|
json.yAxis = yAxis;
|
json.tooltip = tooltip;
|
json.legend = legend;
|
json.loading = loading;
|
json.series = series;
|
json.credits = {enabled: false};
|
$('#line').highcharts(json);
|
}
|
});
|
}
|
|
// 表格
|
var pageCurr;
|
function getCol() {
|
var cols = [
|
{field: 'appeTime$', title: '入库时间', align: 'center', width: 200}
|
,{field: 'stay_time', align: 'center',title: '滞留天数'}
|
,{field: 'loc_no', align: 'center',title: '库位号'}
|
];
|
cols.push.apply(cols, detlCols);
|
return cols;
|
}
|
layui.use(['table','laydate', 'form'], function() {
|
var table = layui.table;
|
var $ = layui.jquery;
|
var layer = layui.layer;
|
|
// 数据渲染
|
tableIns = table.render({
|
elem: '#stayTime',
|
headers: {token: localStorage.getItem('token')},
|
url: baseUrl+'/report/viewStayTimeList.action',
|
page: true,
|
limit: 10,
|
toolbar: '#toolbar',
|
even: true,
|
cellMinWidth: 50,
|
crossDomain: true,
|
cols: [getCol()],
|
request: {
|
pageName: 'curr',
|
pageSize: 'limit'
|
},
|
parseData: function (res) {
|
return {
|
'code': res.code,
|
'msg': res.msg,
|
'count': res.data.total,
|
'data': res.data.records
|
}
|
},
|
response: {
|
statusCode: 200
|
},
|
done: function(res, curr, count) {
|
if (res.code === 403) {
|
top.location.href = baseUrl+"/";
|
}
|
pageCurr=curr;
|
}
|
});
|
|
// 监听排序事件
|
table.on('sort(stayTime)', function (obj) {
|
var searchData = {};
|
$.each($('#search-box [name]').serializeArray(), function() {
|
searchData[this.name] = this.value;
|
});
|
searchData['orderByField'] = obj.field;
|
searchData['orderByType'] = obj.type;
|
tableIns.reload({
|
where: searchData,
|
page: {
|
curr: 1
|
},
|
done: function (res, curr, count) {
|
if (res.code === 403) {
|
top.location.href = baseUrl+"/";
|
}
|
pageCurr=curr;
|
}
|
});
|
});
|
});
|
|
|
function getDate(value){
|
var date = new Date();// 获取当前时间
|
date.setDate(date.getDate() + value);// 设置天数 -1 天
|
return date.Format("MM-dd");
|
}
|
/**
|
* 日期格式化
|
*/
|
Date.prototype.Format = function (fmt) {
|
var o = {
|
"M+": this.getMonth() + 1, //月份
|
"d+": this.getDate(), //日
|
"h+": this.getHours(), //小时
|
"m+": this.getMinutes(), //分
|
"s+": this.getSeconds(), //秒
|
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
"S": this.getMilliseconds() //毫秒
|
};
|
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
for (var k in o)
|
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
return fmt;
|
}
|
</script>
|
</html>
|
