ASRS-3D.git - Gitblit

			@@ -5,28 +5,66 @@
			<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-size: 11px;
			background-color: #000;
			margin: 0;
			}
			canvas {
			display: block;
			}
			</style>
			</head>
			<body>
			<div id="container"></div>
			<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/StoreShelf.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/CrnTask.js"></script>
			<script type="text/javascript" src="../static/js/object/Floor.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';
			@@ -42,7 +80,338 @@
			// 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>