<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--360浏览器优先以webkit内核解析-->
<title>概况</title>
<link rel="shortcut icon" href="favicon.ico">
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
<link th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
<link th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
<style>
.tab-ul{
display: inline-block;
margin: 0 auto;
}
.tab-ul li{
text-decoration: none;
display: inline-block;
margin: 0 20px;
}
.chart-hide{
display: none;
}
</style>
</head>
<body class="gray-bg">
<div class="row" style="padding:20px 30px 10px 30px;">
<div class="col-sm-2" style="padding:5px;">
<div class="total_box ys01">
<h1 id="s1">-</h1>
<p>今日总单量</p>
</div>
</div>
<div class="col-sm-2" style="padding:5px;" onclick="createMenuItem('/twms/admin/receiptHeader?type=40','入库单')">
<div class="total_box ys02">
<h1 id="s2">-</h1>
<p>今日入库量</p>
</div>
</div>
<div class="col-sm-2" style="padding:5px;" onclick="createMenuItem('/twms/admin/shipmentHeader?type=40','出库单')">
<div class="total_box ys03">
<h1 id="s3">-</h1>
<p>今日出库量</p>
</div>
</div>
<div class="col-sm-2" style="padding:5px;" onclick="createMenuItem('/twms/admin/inventory','库存查看')">
<div class="total_box ys04">
<h1 id="s4">-</h1>
<p>库存总量</p>
</div>
</div>
<div class="col-sm-2" style="padding:5px;">
<div class="total_box ys05">
<h1 id="s5">-</h1>
<p>库内物料品数</p>
</div>
</div>
<div class="col-sm-2" style="padding:5px;" onclick="createMenuItem('/twms/admin/task?id=100','任务查看')">
<div class="total_box ys06">
<h1 id="s6">-</h1>
<p>待执行任务数</p>
</div>
</div>
</div>
<div class="row" style="padding:0 30px;">
<div class="col-sm-6" style="padding:5px 5px 10px 5px;">
<div class="float-e-margins">
<div class="ibox-title">
<h5>每日收发货量</h5>
<ul class="tab-ul tab-list1">
<li><a>时间维度</a></li>
<li><a>仓库维度</a></li>
<li><a>货主维度</a></li>
</ul>
</div>
<div class="ibox-content">
<div class="echart-1"><div id="chart1" class="flot-chart1"></div></div>
<div class="echart-1 chart-hide">
<div id="chart1-1" class="flot-chart1"></div>
</div>
<div class="echart-1 chart-hide"><div id="chart1-2" class="flot-chart1"></div></div>
</div>
</div>
</div>
<div class="col-sm-6" style="padding:5px 5px 10px 5px;">
<div class="float-e-margins">
<div class="ibox-title">
<h5>库位利用率</h5>
</div>
<div class="ibox-content">
<div class="echart-2"><div id="chart2" class="flot-chart1"></div></div>
</div>
</div>
</div>
<div class="col-sm-6" style="padding:5px 5px 10px 5px;">
<div class="float-e-margins">
<div class="ibox-title">
<h5>库龄展示</h5>
<ul class="tab-ul tab-list3">
<li><a>仓库维度</a></li>
<li><a>货主维度</a></li>
</ul>
</div>
<div class="ibox-content">
<div class="echart-3"><div id="chart3" class="flot-chart1"></div></div>
<div class="echart-3 chart-hide"><div id="chart3-1" class="flot-chart1">2</div></div>
</div>
</div>
</div>
<div class="col-sm-6" style="padding:5px 5px 10px 5px;">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>库存分布</h5>
<ul class="tab-ul tab-list4">
<li><a>仓库维度</a></li>
<li><a>货主维度</a></li>
</ul>
</div>
<div class="ibox-content">
<div class="echart-4"><div id="chart4" class="flot-chart1"></div></div>
<div class="echart-4 chart-hide"><div id="chart4-1" class="flot-chart1">2</div></div>
</div>
</div>
</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/echarts/echarts.js}"></script>
<script th:src="@{/huaheng/js/common.js}"></script>
<script>
$(function () {
refresh();
$(".tab-list1 li").click(function () {
let a=$('.tab-list1 li').index(this);
$(".echart-1").addClass('chart-hide');
$(".echart-1").eq(a).removeClass('chart-hide');
a=String(a+1);
chart(a);
});
$(".tab-list3 li").click(function () {
let a=$('.tab-list3 li').index(this);
$(".echart-3").addClass('chart-hide');
$(".echart-3").eq(a).removeClass('chart-hide');
a=String(a+1);
chart3(a);
});
$(".tab-list4 li").click(function () {
let a=$('.tab-list4 li').index(this);
$(".echart-4").addClass('chart-hide');
$(".echart-4").eq(a).removeClass('chart-hide');
a=String(a+1);
chart4(a);
});
});
function refresh() {
$.get("../admin/home/getCommonData").done(function (data) {
if(data.code==200){
$("#s1").text(data.data.bllCount)
$("#s2").text(data.data.receiptTotal)
$("#s3").text(data.data.shipmentTotal)
$("#s4").text(data.data.inventoryTotal)
$("#s5").text(data.data.materialCount)
$("#s6").text(data.data.taskUncompletedTotal)
}
});
$.ajax({
url: '../admin/home/getShipmentsLast7Days',
type:'get',
data:{
type:'1'
},
success:function (data) {
let option={
title: {
// text: '',
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['今日入库量','今日出库量']
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value',
},
series: [
{
name:'今日入库量',
type:'line',
data:[],
},
{
name:'今日出库量',
type:'line',
data:[],
}
]
};
for(let value of data.data.receiptDetails){
option.xAxis.data.push(value.lastUpdated.substr(0,10));
option.series[0].data.push(value.qty)
}
for(let value of data.data.shipmentDetails){
option.series[1].data.push(value.qty)
}
let chart1=echarts.init(document.getElementById('chart1'));
chart1.setOption(option);
}
});
$.ajax({
url:'../admin/home/getLocationProp',
type:'get',
data:{
type:'1'
},
success:function (data) {
let option={
title: {
// text: '',
},
tooltip: {
trigger: 'axis',
// formatter: '{a0}:{c0}% <br>{a1}:{c1}%',
axisPointer : {
type : 'shadow'
},
formatter:function (params) {
let tip=params[0].name+'<br>';
for (let i = params.length-1; i >= 0; i--) {
tip=tip+params[i].marker+params[i].seriesName+':'+params[i].value+'%<br>'
}
return tip
}
},
legend: {
data:['有货','无货']
},
xAxis: {
type: 'category',
boundaryGap: true,
data: []
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} %'
}
},
series: [
{
name:'有货',
type:'bar',
stack: '总量',
barWidth: '30%',
data:[],
},
{
name:'无货',
type:'bar',
stack: '总量',
barWidth: '30%',
data:[],
}
]
};
for(let value of data.data){
option.xAxis.data.push(value.warehouseName);
option.series[0].data.push(value.有货*100);
option.series[1].data.push(value.无货*100);
}
let chart1=echarts.init(document.getElementById('chart2'));
chart1.setOption(option);
}
});
$.ajax({
url:'../admin/home/getInventoryStatus',
type:'get',
data:{
type:'1'
},
success:function (value) {
let option={
tooltip: {
trigger: 'axis',
axisPointer : {
type : 'shadow'
},
formatter:function (params) {
let tip=params[0].name+'<br>';
for (let i = params.length-1; i >= 0; i--) {
tip=tip+params[i].marker+params[i].seriesName+':'+params[i].value+'%<br>'
}
return tip
}
},
legend: {
data:['<3个月','3-6个月','6-9个月','9-12个月','>12个月']
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: true,
data: []
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} %'
}
},
series: []
};
let length=value.data.length;
for(let t=0;t<length;t++){
option.xAxis.data.push(value.data[t].warehouseName);
}
// for (let l = 0; l < length; l++) {
// for(let k=0;k<9;k++){
// option.series.push({name:value.data[l].list1[k].materialName,type:'bar',stack: value.data[l].warehouseName,data:[]});
// }
// }
for(let k=0;k<5;k++){
option.series.push({name:option.legend.data[k],type:'bar',stack:'总量',barWidth:'30%',data:[]});
}
// for (let i = 0; i < 10 ; i++) {
// for(let j=i;j<i+length*10;j+=10){
// option.series[i].data.push(value.data[j].days);
// }
// }
for(let i=0;i<length;i++){
for (let j = 0; j < 5; j++) {
option.series[j].data.push(value.data[i].list1[j]*100);
}
}
let chart1=echarts.init(document.getElementById('chart3'));
chart1.setOption(option);
}
});
$.ajax({
url:'../admin/home/getInventoryProp',
type:'get',
data:{
type:'1'
},
success:function (value) {
let option={
tooltip: {
trigger: 'item',
axisPointer : {
type : 'shadow'
},
formatter:function (params) {
return params.marker+params.data.name+':'+params.data.value
}
},
xAxis: {
type: 'category',
boundaryGap: true,
data: []
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
}
},
series: []
};
let length=value.data.length;
for(let t=0;t<length;t++){
option.xAxis.data.push(value.data[t].warehouseName);
}
for(let k=0;k<10;k++){
option.series.push({type:'bar',stack:'总量',data:[]});
}
for(let i=0;i<length;i++){
let showLine = 0;
if (value.data[i].list1.length < 10){
showLine = value.data[i].list1.length;
} else {
showLine = 10;
}
for (let j = 0; j < showLine; j++) {
option.series[j].data.push({value:value.data[i].list1[j].total,name:value.data[i].list1[j].name});
}
}
let chart1=echarts.init(document.getElementById('chart4'));
chart1.setOption(option);
}
})
}
let chart11=null;
let chart12=null;
let chart31=null;
let chart41=null;
function chart(index) {
$.ajax({
url: '../admin/home/getShipmentsLast7Days',
type:'get',
data:{
type:index
},
success:function (data) {
if(index==='2'){
let option={
title: {
// text: '',
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['今日入库量','今日出库量']
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value',
},
series: [
{
name:'今日入库量',
type:'line',
data:[],
},
{
name:'今日出库量',
type:'line',
data:[],
}
]
};
for(let value of data.data.receiptDetails){
option.xAxis.data.push(value.warehouseName);
option.series[0].data.push(value.qty)
}
for(let value of data.data.shipmentDetails){
option.series[1].data.push(value.qty)
}
if(chart11 !== null){
chart11.setOption(option);
}
else {
chart11=echarts.init(document.getElementById('chart1-1'));
chart11.setOption(option);
}
}
else if(index==='3'){
let option={
title: {
// text: '',
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['今日入库量','今日出库量']
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value',
},
series: [
{
name:'今日入库量',
type:'line',
data:[],
},
{
name:'今日出库量',
type:'line',
data:[],
}
]
};
for(let value of data.data.receiptDetails){
option.xAxis.data.push(value.companyName);
option.series[0].data.push(value.qty)
}
for(let value of data.data.shipmentDetails){
option.series[1].data.push(value.qty)
}
if(chart12 !== null){
chart12.setOption(option);
}
else {
chart12=echarts.init(document.getElementById('chart1-2'));
chart12.setOption(option);
}
}
}
});
}
function chart3(index) {
$.ajax({
url:'../admin/home/getInventoryStatus',
type:'get',
data:{
type:index
},
success:function (value) {
if(index==='2'){
let option={
tooltip: {
trigger: 'axis',
axisPointer : {
type : 'shadow'
},
formatter:function (params) {
let tip=params[0].name+'<br>';
for (let i = params.length-1; i >= 0; i--) {
tip=tip+params[i].marker+params[i].seriesName+':'+params[i].value+'%<br>'
}
return tip
}
},
legend: {
data:['<3个月','3-6个月','6-9个月','9-12个月','>12个月']
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: true,
data: []
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} %'
}
},
series: []
};
let length=value.data.length;
for(let t=0;t<length;t++){
option.xAxis.data.push(value.data[t].companyName);
}
for(let k=0;k<5;k++){
option.series.push({name:option.legend.data[k],type:'bar',stack:'总量',barWidth:'30%',data:[]});
}
for(let i=0;i<length;i++){
for (let j = 0; j < 5; j++) {
option.series[j].data.push(value.data[i].list1[j]*100);
}
}
if(chart31 !== null){
chart31.setOption(option);
}
else {
chart31=echarts.init(document.getElementById('chart3-1'));
chart31.setOption(option);
}
}
}
});
}
function chart4(index) {
$.ajax({
url:'../admin/home/getInventoryProp',
type:'get',
data:{
type:index
},
success:function (value) {
if(index==='2'){
let option={
tooltip: {
trigger: 'item',
axisPointer : {
type : 'shadow'
},
formatter:function (params) {
return params.marker+params.data.name+':'+params.data.value
}
},
xAxis: {
type: 'category',
boundaryGap: true,
data: []
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}'
}
},
series: []
};
let length=value.data.length;
for(let t=0;t<length;t++){
option.xAxis.data.push(value.data[t].companyName);
}
for(let k=0;k<10;k++){
option.series.push({type:'bar',stack:'总量',data:[]});
}
for(let i=0;i<length;i++){
for (let j = 0; j < 10; j++) {
option.series[j].data.push({value:value.data[i].list1[j].total,name:value.data[i].list1[j].name});
}
}
if(chart41 !== null){
chart41.setOption(option);
}
else {
chart41=echarts.init(document.getElementById('chart4-1'));
chart41.setOption(option);
}
}
}
})
}
function createMenuItem(dataUrl, menuName) {
let dataIndex = Math.floor((Math.random() * 200) + 100),
flag = true;
if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
var topWindow = $(window.parent.document);
// 选项卡菜单已存在
$('.menuTab', topWindow).each(function() {
//todo 增加判断 如果是detail 则需去掉后面的/id 再判断
if ($(this).data('id') == dataUrl) {
if (!$(this).hasClass('active')) {
$(this).addClass('active').siblings('.menuTab').removeClass('active');
$('.page-tabs-content').animate({ marginLeft: ""}, "fast");
// 显示tab对应的内容区
$('.mainContent .huaheng_iframe', topWindow).each(function() {
if ($(this).data('id') == dataUrl) {
$(this).show().siblings('.huaheng_iframe').hide();
return false;
}
});
}
flag = false;
return false;
}
});
// 选项卡菜单不存在
if (flag) {
// if (dataUrl.indexOf("?") != -1) {
// dataUrl=dataUrl.substr(0,dataUrl.indexOf("?"));
// }
var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
$('.menuTab', topWindow).removeClass('active');
// 添加选项卡对应的iframe
var str1 = '<iframe class="huaheng_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
$('.mainContent', topWindow).find('iframe.huaheng_iframe').hide().parents('.mainContent').append(str1);
// 添加选项卡
$('.menuTabs .page-tabs-content', topWindow).append(str);
}
return false;
}
</script>
</body>
</html>