<!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">
|
<style>
|
|
body {
|
font-family: sans-serif;
|
/*font-weight: bold;*/
|
font-size: 11px;
|
background-color: #000;
|
margin: 0;
|
}
|
canvas {
|
display: block;
|
}
|
#sidebar{
|
/*定位*/
|
position: absolute;
|
top: 50%;
|
left: 1%;
|
transform: translateY(-50%);
|
width: 20%;
|
height: 95%;
|
/*特效*/
|
background: rgba(255,255,255,0.3);
|
border-radius: 5px;
|
color: #ffffff;
|
}
|
#sidebar p1{
|
height: 24px;
|
font-family: FZChaoCuHei-M10S;
|
font-weight: bold;
|
font-size: 24px;
|
text-indent: 2.5%;
|
letter-spacing:1px;
|
line-height: 25px;
|
margin-top: 15px;
|
margin-left: 2.5%;
|
display: block;
|
}
|
#sidebar p2{
|
height: 10px;
|
font-family: FZChaoCuHei-M10S;
|
font-weight: bold;
|
text-indent: 2.5%;
|
letter-spacing:2px;
|
line-height: 8px;
|
margin-top: 5px;
|
margin-left: 2.5%;
|
display: block;
|
}
|
|
#baobiao1{
|
width: 99%;
|
height: 260px;
|
}
|
#baobiao2 {
|
width: 99%;
|
height: 260px;
|
}
|
.tablebox {
|
height: 25%;
|
overflow: hidden;
|
position: relative;
|
width: 95%;
|
margin: 30px auto;
|
/*background-color: rgba(6,26,103,1);*/
|
}
|
.tbl-header {
|
width: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
}
|
.tbl-body {
|
width: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
}
|
.tablebox table {
|
width: 100%;
|
}
|
.tablebox table th,
|
.tablebox table td {
|
font-size: 12px;
|
color: #ffffff;
|
line-height: 15px;
|
text-align: center;
|
}
|
.tablebox table tr th {
|
background-color: rgba(255,255,255,0.3);
|
cursor: pointer;
|
}
|
.tablebox table tr td {
|
background-color: transparent;
|
}
|
.tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {
|
background-color: rgba(214, 214, 224, 0.5);
|
}
|
.tablebox table tr td span,
|
.tablebox table tr td span {
|
font-size: 24px;
|
}
|
|
|
</style>
|
<script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script>
|
</head>
|
<body style="position: relative">
|
<div id="sidebar">
|
<!-- <h1>中扬-立体仓库</h1>-->
|
<p1>广州市-广州塔商圈</p1>
|
<p2>ZhongYang Automated warehouse</p2>
|
<div id="baobiao1"></div>
|
<div id="baobiao2"></div>
|
<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>
|
<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>
|
<div id="container"></div>
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
|
<script type="text/javascript">
|
var dom1 = document.getElementById("baobiao1");
|
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: '年度进/出货量',
|
textStyle:{
|
color:'#F8F8FF',
|
},
|
subtext: 'Data',
|
subtextStyle:{
|
color:'#F8F8FF',
|
},
|
show: true,
|
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
textStyle:{
|
color:'#F8F8FF',
|
},
|
// subtextStyle:{
|
// color:'#F8F8FF',
|
// },
|
// tooltip: {
|
// trigger: 'axis'
|
// },
|
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,
|
},
|
axisLabel: { // 如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
|
interval: 1, // 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
|
rotate: 0 ,// 横坐标上label的倾斜度
|
textStyle: {
|
color:'#fff'
|
}
|
},
|
axisLine:{
|
lineStyle: {
|
color: '#fff',
|
// width: 8,
|
}},
|
// prettier-ignore
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
}
|
],
|
yAxis: [
|
{
|
// show:false,
|
type: 'value',
|
offset: -4,
|
// interval: 35
|
}
|
],
|
series: [
|
{
|
color:['#F8F8FF'],
|
name: '进货',
|
type: 'bar',
|
data: [
|
204.5, 65.5, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
],
|
// markPoint: {
|
// data: [
|
// { type: 'max', name: 'Max' },
|
// { type: 'min', name: 'Min' }
|
// ]
|
// },
|
// markLine: {
|
// data: [{ type: 'average', name: 'Avg' }]
|
// }
|
},
|
{
|
color:['#C0C0C0'],
|
name: '出货',
|
type: 'bar',
|
data: [
|
210, 72.2, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
],
|
// markPoint: {
|
// data: [
|
// { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
|
// { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
|
// ]
|
// },
|
// markLine: {
|
// data: [{ type: 'average', name: 'Avg' }]
|
// }
|
}
|
],
|
|
};
|
|
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: {
|
left: 'left',
|
text: '销售件数',
|
textStyle:{
|
color:'#F8F8FF',
|
},
|
},
|
toolbox: {
|
show:false,
|
feature: {
|
dataZoom: {
|
yAxisIndex: 'none'
|
},
|
restore: {},
|
saveAsImage: {}
|
}
|
},
|
xAxis: {
|
type: 'time',
|
boundaryGap: false
|
},
|
yAxis: {
|
type: 'value',
|
boundaryGap: [0, '100%']
|
},
|
dataZoom: [
|
{
|
type: 'inside',
|
start: 0,
|
end: 20
|
},
|
{
|
start: 0,
|
end: 20
|
}
|
],
|
series: [
|
{
|
name: 'Fake Data',
|
type: 'line',
|
smooth: true,
|
symbol: 'none',
|
areaStyle: {},
|
data: data
|
}
|
]
|
};
|
|
if (option && typeof option === 'object') {
|
myChart.setOption(option);
|
}
|
|
|
</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/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/StoreShelf.js"></script>
|
<script type="text/javascript" src="../static/js/object/StoreGoods.js"></script>
|
<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 );
|
// } );
|
|
|
</script>
|
</body>
|
</html>
|
