DataVisualization / DepotManagement · 提交

转到一个项目

作者 小范
提交 0871d7a6559219c802eb34189fb0ca28a042e4fe 1 个父辈 b34b8bf5

仓库数据可视化管理

内嵌 并排对比
正在显示 3 个修改的文件 包含 1214 行增加 和 0 行删除
.body{
background-size: 100% 100%;
}
.title{
font-color: #FFFFF0;
font-size: 26px
}.title1{
font-color:#FFFFF0;
font-size: 20px
}
.dataAll{
width: 100%;
height: 28%;
... ... @@ -49,6 +60,12 @@
.maginS01{
/*margin-top:11% !important;*/
}
.new{
width: 250%;
height: 40%;
box-sizing: border-box;
border:0px
}
.dataAllBorder01{
width: 100%;
height: 100%;
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/BigData.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/index12.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js"></script>
<link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
<link href="css/Security_operation.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="js/artDialog/skins/default.css" type="text/css"/>
<script src="js/laydate.js"></script>
<script src="js/Home_page.js"></script>
<meta charset="UTF-8">
<title>大数据管理平台</title>
</head>
<body class="body" background="img/warehouse.png" style="position: relative;height: 1100px;width: 100%;background-attachment: fixed;">
<!--<iframe src="https://www.thingjs.com/pp/eb1ef62559ddf908beadaddd" style="margin: 0;padding: 0" height="1100px" width="100%" ></iframe>-->
<div class="title" style="position: absolute;top:50px;left: 120px;color:#F0F0F0">仓库数据可视化管理
</div>
<div class="title1" style="position: absolute;top:75px;left: 80px;color:#F0F0F0">Visual management of warehouse data
</div>
<div class="data_left01" style="position: absolute;top:130px;left: 10px">
<div class="new">
<p class="data_chart" id="Package"></p>
</div>
<div class="dataAll" style="display: none">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">本月航班量</div>
<div class="data_chart" id="buyTime"></div>
</div>
</div>
</div>
<!-- <div class="dataAll" style="display: none">-->
<!-- <div class="dataAllBorder01">-->
<!-- <div class="dataAllBorder02">-->
<!-- <div class="data_tit1">今日航班单量</div>-->
<!-- <p class="data_chart" id="Package01"></p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="dataAll" style="display: none">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">本月航司单量</div>
<p class="data_chart" id="rode01"></p>
</div>
</div>
</div>
</div>
<div class="data_left01" style="position: absolute;top:70px;right: 370px">
<div class="dataAllBorder02" id="cage_cl" style="float: right;width: 120%;height: 30%">
<div class="analysis">今日货物信息：</div>
<ul class="data_show_box">
<li class="data_cage">0</li>
<li class="data_cage">1</li>
<li class="data_cage" style="background-image: none;">,</li>
<li class="data_cage">3</li>
<li class="data_cage">3</li>
<li class="data_cage">2</li>
</ul>
<div class="depart_number_box">
<ul class="depart_number_cage">
<li class="depart_name">北货站：</li>
<li class="depart_number">3,238</li>
</ul>
<ul class="depart_number_cage">
<li class="depart_name">西货站：</li>
<li class="depart_number">1,630</li>
</ul>
<ul class="depart_number_cage" style="margin-bottom: 0px;">
<li class="depart_name">老货站：</li>
<li class="depart_number">4,251</li>
</ul>
<ul class="depart_number_cage" style="margin-bottom: 0px;">
<li class="depart_name">军投：</li>
<li class="depart_number">24</li>
</ul>
</div>
</div>
</div>
<div class="data_left01" style="position: absolute;top:70px;right: 10px" align="center">
<div class="dataAll" style="float: right;width: 80%;height: 30%">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">今日货物信息</div>
<p class="data_chart" id="Package01"></p>
</div>
</div>
</div>
<div class="dataAll" style="float: right;width: 80%;height: 45%" >
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">本周货物信息</div>
<p class="data_chart" id="actionBook"></p>
</div>
</div>
</div>
<!-- <div class="dataAll" style="float: right;display: none">-->
<!-- <div class="dataAllBorder01">-->
<!-- <div class="dataAllBorder02">-->
<!-- <div class="data_tit1">本年申报量</div>-->
<!-- <p class="data_chart" id="bookBmonth"></p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="dataAll maginS" style="float: right;display: none">-->
<!-- <div class="dataAllBorder01">-->
<!-- <div class="dataAllBorder02">-->
<!-- <div class="data_tit1">申报类型分析</div>-->
<!-- <p class="data_chart" id="seaAbook01"></p>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div class="data_left02" style="position: absolute;top:825px;left:0px">
<div class="dataAll maginS" style="float: left;width: 20%;height: 20%">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">在库总货量（进港）</div>
<p class="data_chart" id="bookAret"></p>
</div>
</div>
</div>
<div class="dataAll" style="float: left;width: 20%;height: 20%">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">理货信息</div>
<p class="data_chart" id="whearAbook"></p>
</div>
</div>
</div>
<div class="dataAll02" style="float: left;width: 20%;height: 20%">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">货物状态</div>
<p class="data_chart" id="rodeAbook"></p>
</div>
</div>
</div>
<div class="dataAll" style="float: left;width: 19%;height: 20%">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">在库总货量（出港）</div>
<p class="data_chart" id="bookBmonth"></p>
</div>
</div>
</div>
<div class="dataAll maginS" style="float: left;width: 20%;height: 20%">
<div class="dataAllBorder01">
<div class="dataAllBorder02">
<div class="data_tit1">货物状态</div>
<p class="data_chart" id="seaAbook01"></p>
</div>
</div>
</div>
</div>
<script src="js/echarts-all.js"></script>
<script>
function EventClick(){
$(".check_increase").removeClass("check_increase_act");
$("#over_hide1").show().siblings().hide();
$(".check_decrease").show();
$("#cage_cl").hide();
$("#map_title_innerbox").hide();
$("#cage_cl1").show();
// $("#over_hide").show();
$("#map_title_innerbox1").show();
$(".addition_check_in").hide();
$("#car_check_in").hide();
BootstrapTable();
}
function cancel(e){
$(".check_increase").removeClass("check_increase_act");
$("#over_hide").show().siblings().hide();
$(".check_decrease").show();
$("#cage_cl").show();
$("#cage_cl1").hide();
// $("#cage_cl").show();
// $("#over_hide1").show();
// $("#map_title_innerbox").show();
BootstrapTable();
}
$(function(){
var myChart = echarts.init($("#Package")[0]);
var labelTop = {
normal : {
label : {
show : true,
position : 'center',
formatter : '{b}',
textStyle: {
baseline : 'bottom'
}
},
labelLine : {
show : false
}
}
};
var labelFromatter = {
normal : {
label : {
formatter : function (params){
return 10000 - params.value
},
textStyle: {
baseline : 'top'
}
}
},
}
var labelBottom = {
normal : {
color: '#ccc',
label : {
show : true,
position : 'center'
},
labelLine : {
show : false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
};
var radius = [40, 55];
option = {
legend: {
x : 'center',
y : 'center',
data:[
],
},
title : {
text: '',
x: 'center'
},
toolbox: {
show : false,
feature : {
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
width: '20%',
height: '30%',
itemStyle : {
normal : {
label : {
formatter : function (params){
return 'other\n' + params.value + '%\n'
},
textStyle: {
baseline : 'middle'
}
}
},
}
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
type : 'pie',
center : ['10%', '30%'],
radius : radius,
x: '0%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:46, itemStyle : labelBottom},
{name:'在库总货量', value:54,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['30%', '30%'],
radius : radius,
x:'20%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:56, itemStyle : labelBottom},
{name:'已理货', value:44,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['50%', '30%'],
radius : radius,
x:'40%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:65, itemStyle : labelBottom},
{name:'未理货', value:35,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['70%', '30%'],
radius : radius,
x:'60%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:70, itemStyle : labelBottom},
{name:'已放行', value:30,itemStyle : labelTop}
]
},
{
type : 'pie',
center : ['90%', '30%'],
radius : radius,
x:'80%', // for funnel
itemStyle : labelFromatter,
data : [
{name:'other', value:73, itemStyle : labelBottom},
{name:'待提货', value:27,itemStyle : labelTop}
]
},
]
};
myChart.setOption(option);
});
$(function(){
var myChart = echarts.init($("#buyTime")[0]);
var option = {
tooltip: { //提示框，鼠标悬浮交互时的信息提示
show: true,
trigger: 'axis'
},
grid: {
x: 46,
y:30,
x2:30,
y2:40,
borderWidth: 0
},
legend: {
data: [],
orient: 'vertical',
textStyle: { fontWeight: 'bold', color: '#a4a7ab' }
},
calculable: false,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12','13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],
splitLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#a4a7ab',
align: 'center'
}
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#a4a7ab',
align: 'right'
}
}
}
],
series: [
{
name: '',
type: 'line',
stack: '24小时购买时间',
data: [120, 132, 101, 146, 199, 230, 210, 230, 240, 256, 278, 300,120, 132, 101, 146, 199, 230, 210, 230, 240, 256, 278, 300],
itemStyle: {
normal: {
color: '#02bcbc'
}
}
}
]
};
myChart.setOption(option);
});
$(function(){
var myChart = echarts.init($("#Package01")[0]);
option = {
legend: {
orient : 'vertical',
x : 'left',
data:['西货站','老货站','军投'],
textStyle:{
color:"#e9ebee"
}
},
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'航班',
type:'pie',
radius : '55%',
tooltip : {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
center: ['50%', '60%'],
data:[
{
value:335,
name:'西货站',
itemStyle: {
normal: {
color:"#1afffd"
}
}},
{
value:310,
name:'老货站',
itemStyle: {
normal: {
color:"#2e7cff"
}
}},
{
value:234,
name:'北货站',
itemStyle: {
normal: {
color:"#ffcb89"
}
}}
]
}
]
};
myChart.setOption(option);
});
$(function(){
var myChart = echarts.init($("#rode01")[0]);
option = {
tooltip : {
trigger: 'axis'
},
legend: {
orient : 'vertical',
x : 'left',
data:['CV','RU','CX','KA','5Y','5X','ET','CF'], textStyle:{
color:"#e9ebee"
}
},
calculable : false,
series : [
{
name:'航司',
type:'pie',
tooltip : {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
radius : '60%',
center: ['50%', '60%'],
roseType : 'area',
x: '50%', // for funnel
max: 40, // for funnel
sort : 'ascending', // for funnel
data:[
{value:10, name:'CF',
itemStyle: {
normal: {
color:"#45c0ff"
}
}},
{value:5, name:'ET',
itemStyle: {
normal: {
color:"#e15828"
}
}},
{value:15, name:'5X',
itemStyle: {
normal: {
color:"#ff81cb"
}
}},
{value:25, name:'5Y',
itemStyle: {
normal: {
color:"#2e7cff"
}
}},
{value:20, name:'KA',
itemStyle: {
normal: {
color:"#feb602"
}
}},
{value:35, name:'CX',
itemStyle: {
normal: {
color:"#ff7d0a"
}
}},
{value:30, name:'RU',
itemStyle: {
normal: {
color:"#1afffd"
}
}},
{value:40, name:'CV',
itemStyle: {
normal: {
color:"#2e7cff"
}
}}
]
}
]
};
myChart.setOption(option);
});
$(function(){
var myChart = echarts.init($("#bookAret")[0]);
option = {
tooltip : {
trigger: 'axis'
},
grid: {
x: 46,
y:30,
x2:30,
y2:40,
borderWidth: 0
},
legend: {
data:['总量','异常'],
textStyle:{
color:"#e9ebee"
}
},
calculable : false,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisLabel: {
show: true,
textStyle: {
color: '#a4a7ab',
align: 'center'
},
splitLine: {
show: false
},
}
}
],
yAxis : [
{
type : 'value',
axisLabel: {
show: true,
textStyle: {
color: '#a4a7ab',
align: 'right'
}
},
splitLine: {
show: false
},
}
],
series : [
{
name:'申报异常',
type:'bar',
data:[100, 80, 136, 150, 120, 56, 200, 162, 105, 63, 169, 236],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'申报正常',
type:'bar',
data:[983, 820, 1236, 930, 1600, 1032, 890, 1300, 1921, 984, 1960, 2630],
markPoint : {
data : [
{name : '月最高', value : 2630, xAxis: 12, yAxis: 2630, symbolSize:18},
{name : '月最低', value : 820, xAxis: 2, yAxis: 830}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
myChart.setOption(option);
});
$(function(){
var myChart = echarts.init($("#rodeAbook")[0]);
option = {
tooltip : {
trigger: 'axis'
},
grid: {
x: 46,
y:30,
x2:30,
y2:20,
borderWidth: 0
},
calculable : false,
legend: {
data:['已放行','待提货','已提离'],
textStyle:{
color:"#e9ebee"
}
},
xAxis : [
{
type : 'category',
data : ['周一','周二','周三','周四','周五','周六','周日'],
splitLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#a4a7ab',
align: 'center'
}
}
}
],
yAxis : [
{
type : 'value',
name : '舱单量',
axisLabel : {
formatter: '{value} ',
textStyle: {
color: '#a4a7ab',
align: 'right'
}
},
splitLine: {
show: false
},
},
{
type : 'value',
name : '航班',
axisLabel : {
formatter: '{value} ',
textStyle: {
color: '#a4a7ab',
align: 'right'
}
},
splitLine: {
show: false
},
},
],
series : [
{
name:'进港',
type:'bar',
stack: '单量',
data:[120, 132, 101, 134, 90, 230, 210],
itemStyle: {
normal: {
color:"#ffcb89"
}
}
},
{
name:'出港',
type:'bar',
stack: '单量',
data:[220, 232, 301, 234, 190, 330, 210],
itemStyle: {
normal: {
color:"#005ea1"
}
}
},
{
name:'航班',
type:'line',
yAxisIndex: 1,
data:[20, 12, 10, 14, 20, 30, 10],
itemStyle: {
normal: {
color:"#0ad5ff"
}
}
}
]
};
myChart.setOption(option);
});
$(function(){
var myChart = echarts.init($("#bookBmonth")[0]);
var option = {
tooltip: { //提示框，鼠标悬浮交互时的信息提示
show: true,
trigger: 'axis'
},
grid: {
x: 46,
y:30,
x2:30,
y2:40,
borderWidth: 0
},
legend: {
data: [],
orient: 'vertical',
textStyle: { fontWeight: 'bold', color: '#a4a7ab' }
},
calculable: false,
xAxis: [
{
type: 'category',
boundaryGap: false,
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
splitLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#a4a7ab',
align: 'center'
}
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#a4a7ab',
align: 'right'
}
}
}
],
series: [
{
name: '',
type: 'line',
stack: '申报正常',
data:[983, 820, 1236, 930, 1600, 1032, 890, 1300, 1921, 984, 1960, 2630],
itemStyle: {
normal: {
color: '#02bcbc'
}
}
}
]
};
myChart.setOption(option);
});
$(function(){
var myChart = echarts.init($("#seaAbook01")[0]);
option = {
tooltip : {
trigger: 'axis'
},
legend: {
orient : 'vertical',
x : 'left',
data:['已组板','未组板','已放行','未放行','已驶离'], textStyle:{
color:"#e9ebee"
}
},
calculable : false,
series : [
{
name:'舱单申报总量',
type:'pie',
radius : '70%',
center: ['50%', '60%'],
tooltip : {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
splitLine:{show: true},
roseType : 'area',
x: '50%', // for funnel
max: 40, // for funnel
sort : 'ascending', // for funnel
data:[
{value:2560, name:'已组板',
itemStyle: {
normal: {
color:"#2e7cff"
}
}},
{value:3690, name:'未组板',
itemStyle: {
normal: {
color:"#ffcb89"
}
}},
{value:5690, name:'已放行',
itemStyle: {
normal: {
color:"#005ea1"
}
}},
{value:6312, name:'未放行',
itemStyle: {
normal: {
color:"#0ad5ff"
}
}},
{value:6312, name:'已驶离',
itemStyle: {
normal: {
color:"#0ad5ff"
}
}}
]
}
]
};
myChart.setOption(option);
});
$(function(){
var myChart = echarts.init($("#actionBook")[0]);
option = {
tooltip : {
trigger: 'axis'
},
grid: {
x: 46,
y:30,
x2:30,
y2:20,
borderWidth: 0
},
calculable : false,
legend: {
data:['老货站','西货站','军投','北货站'],
textStyle:{
color:"#e9ebee"
}
},
xAxis : [
{
type : 'category',
splitLine : {show : false},
data : ['周一','周二','周三','周四','周五','周六','周日'],
axisLabel: {
show: true,
textStyle: {
color: '#fff',
align: 'center'
}
}
}
],
yAxis : [
{
type : 'value',
position: 'right',
splitLine : {show : false},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
align: 'center'
}
}
}
],
series : [
{
name:'老货站',
type:'bar',
data:[320, 332, 301, 334, 390, 330, 320],
itemStyle: {
normal: {
color:"#2e7cff"
}
}
},
{
name:'西货站',
type:'bar',
tooltip : {trigger: 'item'},
stack: '广告',
data:[120, 132, 101, 134, 90, 230, 210],
itemStyle: {
normal: {
color:"#feb602"
}
}
},
{
name:'军投',
type:'bar',
tooltip : {trigger: 'item'},
stack: '广告',
data:[220, 182, 191, 234, 290, 330, 310],
itemStyle: {
normal: {
color:"#ffcb89"
}
}
},
{
name:'北货站',
type:'bar',
tooltip : {trigger: 'item'},
stack: '广告',
data:[150, 232, 201, 154, 190, 330, 410],
itemStyle: {
normal: {
color:"#005ea1"
}
}
},
{
name:'申报总单量',
type:'line',
data:[862, 1018, 964, 1026, 1679, 1600, 1570],
itemStyle: {
normal: {
color:"#0ad5ff"
}
}
},
{
name:'货物细分',
type:'pie',
tooltip : {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
center: [100,80],
radius : [0, 30],
itemStyle :　{
normal : {
labelLine : {
length : 20
}
}
},
data:[
{value:1048, name:'普货',
itemStyle: {
normal: {
color:"#1afffd"
}
}},
{value:251, name:'电子',
itemStyle: {
normal: {
color:"#2e7cff"
}
}},
{value:147, name:'医疗',
itemStyle: {
normal: {
color:"#ffcb89"
}
}},
{value:102, name:'数码',
itemStyle: {
normal: {
color:"#005ea1"
}
}}
]
}
]
};
myChart.setOption(option);
});
$(function(){
var myChart = echarts.init($("#whearAbook")[0]);
option = {
tooltip : {
trigger: 'axis'
},
grid: {
x: 46,
y:30,
x2:30,
y2:20,
borderWidth: 0
},
calculable : false,
legend: {
data:['已理货','未理货','异常'],
textStyle:{
color:"#e9ebee"
}
},
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
splitLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#a4a7ab',
align: 'center'
}
}
}
],
yAxis : [
{
type : 'value',
name : '调拨转运量',
axisLabel : {
formatter: '{value} ',
textStyle: {
color: '#a4a7ab',
align: 'right'
}
},
splitLine: {
show: false
},
},
{
type : 'value',
name : '舱单申报量',
axisLabel : {
formatter: '{value} 件',
textStyle: {
color: '#a4a7ab',
align: 'right'
}
},
splitLine: {
show: false
},
},
],
series : [
{
name:'调拨',
type:'bar',
data:[20, 49, 70, 232, 256, 767, 1356, 1622, 36, 200, 64, 33],
itemStyle: {
normal: {
color:"#0ad5ff"
}
}
},
{
name:'国际转运',
type:'bar',
data:[26, 59, 90, 264, 287, 707, 1756, 1822, 487, 188, 60, 23],
itemStyle: {
normal: {
color:"#005ea1"
}
}
},
{
name:'进口申报量',
type:'line',
yAxisIndex: 1,
data:[200, 220, 330, 450, 630, 1020, 2030, 2340, 2300, 1650, 12000, 6200],
itemStyle: {
normal: {
color:"#1afffd"
}
}
}
]
};
myChart.setOption(option);
});
</script>
</body>
</html>
... ...