<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<title></title>
|
<meta charset="utf-8">
|
<meta name="generator" content="Three.js Editor">
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
<link rel="stylesheet" href="../static/css/main.css">
|
<script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
|
<script type="text/javascript" src="../static/js/utils.js"></script>
|
<script type="text/javascript" src="../static/js/common.js"></script>
|
<script type="text/javascript" src="../static/js/data/Warehouse.js"></script>
|
<script type="text/javascript" src="../static/js/data/Asrs.js"></script>
|
<script type="text/javascript" src="../static/js/object/Cube.js"></script>
|
<script type="text/javascript" src="../static/js/object/StoreArea.js"></script>
|
<script type="text/javascript" src="../static/js/object/Store.js"></script>
|
<script type="text/javascript" src="../static/js/object/StoreGroup.js"></script>
|
<!-- <script type="text/javascript" src="../static/js/object/StoreCrn.js"></script>-->
|
<!-- <script type="text/javascript" src="../static/js/object/StoreShelf.js"></script>-->
|
<script type="text/javascript" src="../static/js/object/StoreGoods.js"></script>
|
<script type="text/javascript" src="../static/js/object/Route.js"></script>
|
<script type="text/javascript" src="../static/js/object/RouteLine.js"></script>
|
<script type="text/javascript" src="../static/js/object/CrnTask.js"></script>
|
<script type="text/javascript" src="../static/js/lib/btnHide.js"></script>
|
</head>
|
<body style="position: relative">
|
<div style="position: absolute;top: 0;right: 0">
|
<button id="print">打印</button>
|
</div>
|
<div id="groundglass"></div>
|
<div id="sidebar">
|
<p1>中扬-智能立体仓库</p1>
|
<p2>ZhongYang Intelligent Three-Dimensional Warehouse</p2>
|
<div id="Histogram"></div>
|
<div id="baobiao2"></div>
|
<div id="btnhide_m"></div>
|
<button id="btnhide" onclick="btnHide()">隐藏</button>
|
<div class="tablebox">
|
<div class="tbl-header">
|
<table border="0" cellspacing="0" cellpadding="0" >
|
<thead>
|
<tr>
|
<th>排名</th>
|
<th>地市</th>
|
<th>销售收入(万元)</th>
|
<th>同比(%)</th>
|
</tr>
|
</thead>
|
<tbody style="opacity:0;" ></tbody>
|
</table>
|
</div>
|
<div class="tbl-body">
|
<table border="0" cellspacing="0" cellpadding="0">
|
<thead>
|
<tr>
|
<th>排名</th>
|
<th>地市</th>
|
<th>销售收入(万元)</th>
|
<th>同比(%)</th>
|
</tr>
|
</thead>
|
<tbody></tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
<div id="container"></div>
|
<script type="module">
|
|
import * as THREE from '../static/js/three.module.js';
|
import { APP } from '../static/js/app.js';
|
|
window.THREE = THREE;
|
|
var player = new APP.Player();
|
player.start();
|
|
// document.body.appendChild( player.dom );
|
// window.addEventListener( 'resize', function () {
|
// player.setSize( window.innerWidth, window.innerHeight );
|
// } );
|
|
document.getElementById("print").addEventListener('click', function () {
|
console.log(player.objects);
|
player.initModelMove();
|
}, false);
|
|
</script>
|
<script type="text/javascript">
|
var dom1 = document.getElementById("Histogram");
|
var myChart1 = echarts.init(dom1);
|
window.addEventListener('resize',function () {
|
myChart1.resize();
|
})
|
var app1 = {};
|
|
var dom = document.getElementById("baobiao2");
|
var myChart = echarts.init(dom);
|
window.addEventListener('resize',function () {
|
myChart.resize();
|
})
|
var app = {};
|
|
|
var option1;
|
|
option1 = {
|
title: {
|
text: '年度进/出货量',
|
x:'5px',
|
y:'15px',
|
textStyle:{
|
color:'#ffffff',
|
fontWeight:400,
|
fontSize: 10,
|
},
|
subtext: 'Data',
|
subtextStyle:{
|
align:'center',
|
color:'#ffffff',
|
fontSize: 7,
|
},
|
show: true,
|
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
textStyle:{
|
color:'#f5f4f4',
|
},
|
legend: {
|
show:false,
|
data: ['进货', '出货']
|
},
|
toolbox: {
|
show: false,
|
feature: {
|
dataView: { show: true, readOnly: false },
|
magicType: { show: true, type: ['line', 'bar'] },
|
restore: { show: true },
|
saveAsImage: { show: true }
|
}
|
},
|
calculable: true,
|
xAxis: [
|
{
|
color:'#975a5a',
|
type: 'category',
|
axisTick:{
|
show:false,
|
lineStyle:{
|
color:'#000'
|
}
|
},
|
axisLabel: { // 如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
|
fontSize:9,
|
interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
|
rotate: 0 ,// 横坐标上label的倾斜度
|
textStyle: {
|
color:'#fff'
|
}
|
},
|
axisLine:{
|
lineStyle: {
|
color: '#e2e1e1',// x轴刻度线的颜色
|
}},
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
offset: -4,
|
axisTick:{
|
show:false,
|
},
|
axisLabel: {
|
fontSize:9,
|
},
|
splitLine:{
|
lineStyle:{
|
color:'#cdcdcd'// y轴分割线颜色
|
}
|
}
|
|
}
|
],
|
series: [
|
{
|
color:['#88b0e2'],
|
name: '进货',
|
type: 'bar',
|
data: [
|
204.5, 50.5, 15.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
],
|
},
|
{
|
color:['#f8f7f7'],
|
name: '出货',
|
type: 'bar',
|
data: [
|
100, 75.2, 33.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
],
|
}
|
],
|
|
};
|
|
if (option1 && typeof option1 === 'object') {
|
myChart1.setOption(option1);
|
}
|
|
let base = +new Date(1988, 9, 3);
|
let oneDay = 24 * 3600 * 1000;
|
let data = [[base, Math.random() * 300]];
|
for (let i = 1; i < 20000; i++) {
|
let now = new Date((base += oneDay));
|
data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
|
}
|
option = {
|
tooltip: {
|
trigger: 'axis',
|
position: function (pt) {
|
return [pt[0], '10%'];
|
}
|
},
|
title: {
|
x:'5px',
|
y:'15px',
|
text: '销售件数',
|
textStyle:{
|
color:'#ffffff',
|
fontWeight:400,
|
fontSize: 10,
|
},
|
},
|
toolbox: {
|
show:false,
|
feature: {
|
dataZoom: {
|
yAxisIndex: 'none'
|
},
|
restore: {},
|
saveAsImage: {}
|
}
|
},
|
textStyle:{
|
color:'#f5f4f4',
|
},
|
xAxis: {
|
type: 'time',
|
boundaryGap: false,
|
axisTick:{
|
show:false,
|
},
|
axisLabel: { // 如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
|
fontSize:9,
|
interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
|
rotate: 0 ,// 横坐标上label的倾斜度
|
textStyle: {
|
color:'#fff'
|
}
|
},
|
axisLine:{
|
lineStyle: {
|
color: '#e2e1e1',// x轴刻度线的颜色
|
}},
|
|
},
|
|
yAxis: {
|
type: 'value',
|
boundaryGap: [0, '100%'],
|
axisLabel: {
|
fontSize:9,
|
},
|
splitLine:{
|
lineStyle:{
|
color:'#cdcdcd'// y轴分割线颜色
|
}
|
}
|
},
|
dataZoom: [
|
{
|
type: 'inside',
|
start: 0,
|
end: 20
|
},
|
{
|
start: 0,
|
end: 20
|
}
|
],
|
series: [
|
{
|
name: 'Fake Data',
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
areaStyle: {
|
normal: {
|
color: '#88b0e2' //改变区域颜色
|
}
|
},
|
itemStyle : {
|
normal : {
|
color:'#dddede', //改变折线点的颜色
|
lineStyle:{
|
// color:'#8cd5c2' //改变折线颜色
|
width:0.5,
|
}
|
}
|
},
|
data: data
|
}
|
]
|
};
|
|
if (option && typeof option === 'object') {
|
myChart.setOption(option);
|
}
|
</script>
|
<script type="text/javascript">
|
var MyMarhq = '';
|
clearInterval(MyMarhq);
|
$('.tbl-body tbody').empty();
|
$('.tbl-header tbody').empty();
|
var Items = [{"Ranking":"1","City":"保定","SaleIncome":"2506734.43","An":"53.00",},
|
{"Ranking":"2","City":"沧州","SaleIncome":"1425935.58","An":"65.00",},
|
{"Ranking":"3","City":"秦皇岛","SaleIncome":"1372207.38","An":"34.00",},
|
{"Ranking":"4","City":"衡水","SaleIncome":"972451.15","An":"15.00",},
|
{"Ranking":"5","City":"石家庄","SaleIncome":"939010.52","An":"-57.00",},
|
{"Ranking":"6","City":"邢台","SaleIncome":"774274.70","An":"-20.00",},
|
{"Ranking":"7","City":"唐山","SaleIncome":"680456.79","An":"-29.00",},
|
{"Ranking":"8","City":"张家口","SaleIncome":"613319.87","An":"2.00",},
|
{"Ranking":"9","City":"中油华奥","SaleIncome":"596575.25","An":"35.00",},
|
{"Ranking":"10","City":"承德","SaleIncome":"589048.12","An":"30.00",},
|
{"Ranking":"11","City":"廊坊","SaleIncome":"515448.14","An":"-48.00",},
|
{"Ranking":"12","City":"瑞州","SaleIncome":"399875.26","An":"128.00",},
|
{"Ranking":"13","City":"石家庄中油","SaleIncome":"90543.62","An":"-24.00",},
|
{"Ranking":"14","City":"辛集中油","SaleIncome":"49255.52","An":"19.00",},
|
{"Ranking":"15","City":"井陉中油","SaleIncome":"29682.60","An":"-74.00",},
|
{"Ranking":"16","City":"保定中油","SaleIncome":"11887.73","An":"-64.00",}]
|
$.each(Items,function (i, item) {
|
str = '<tr>'+
|
'<td>'+item.Ranking+'</td>'+
|
'<td>'+item.City+'</td>'+
|
'<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+
|
'<td>'+(+item.An).toFixed(2)+'</td>'
|
// '<td>'+(+item.Mom).toFixed(2)+'</td>'+
|
// '<td>'+(item.SalePlan/10000).toFixed(2)+'</td>'+
|
// '<td>'+(+item.PlanFinish).toFixed(2)+'</td>'+
|
'</tr>'
|
|
$('.tbl-body tbody').append(str);
|
$('.tbl-header tbody').append(str);
|
});
|
if(Items.length > 10){
|
$('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());
|
$('.tbl-body').css('top', '0');
|
var tblTop = 0;
|
var speedhq = 50; // 数值越大越慢
|
var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
|
function Marqueehq(){
|
if(tblTop <= -outerHeight*Items.length){
|
tblTop = 0;
|
} else {
|
tblTop -= 1;
|
}
|
$('.tbl-body').css('top', tblTop+'px');
|
}
|
|
MyMarhq = setInterval(Marqueehq,speedhq);
|
|
// 鼠标移上去取消事件
|
$(".tbl-header tbody").hover(function (){
|
clearInterval(MyMarhq);
|
},function (){
|
clearInterval(MyMarhq);
|
MyMarhq = setInterval(Marqueehq,speedhq);
|
})
|
|
}
|
$.each(Items,function (i, item) {
|
str = '<tr>'+
|
'<td>'+item.Ranking+'</td>'+
|
'<td>'+item.City+'</td>'+
|
'<td>'+(+item.SaleIncome/10000).toFixed(2)+'</td>'+
|
'<td>'+(+item.An).toFixed(2)+'</td>'+
|
'</tr>'
|
|
$('.tbl-body tbody').append(str);
|
$('.tbl-header tbody').append(str);
|
});
|
if(Items.length > 10){
|
$('.tbl-body tbody').html($('.tbl-body tbody').html()+$('.tbl-body tbody').html());
|
$('.tbl-body').css('top', '0');
|
var tblTop = 0;
|
var speedhq = 50; // 数值越大越慢
|
var outerHeight = $('.tbl-body tbody').find("tr").outerHeight();
|
function Marqueehq(){
|
if(tblTop <= -outerHeight*Items.length){
|
tblTop = 0;
|
} else {
|
tblTop -= 1;
|
}
|
$('.tbl-body').css('top', tblTop+'px');
|
}
|
|
MyMarhq = setInterval(Marqueehq,speedhq);
|
}
|
|
</script>
|
|
</body>
|
</html>
|
