ASRS-3D.git - Gitblit

			@@ -1,185 +1,129 @@
			<!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-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: #f0f8ff;
			}
			#sidebar h1{
			font-family: Fantasy;
			font-size: 36px;
			text-indent: 5%;
			}
			#baobiao1{
			width: 400px;
			height: 300px;
			}
			<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">
			<link rel="stylesheet" href="../static/css/index.css">
			<link rel="stylesheet" href="../static/css/loader.css" media="all">
			<script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script>
			<script type="text/javascript" src="../static/js/lib/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/Asrs.js"></script>
			<script type="text/javascript" src="../static/js/data/BuildingData.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/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>
			<style>
			* {
			margin: 0;
			padding: 0;
			}
			html {
			height: 100%;
			}
			body {
			height: 100%;
			}

			</style>
			</head>
			<body>

			<div id="mask" class="mask"></div>
			<div id="title-box" class="title-box">
			<div id="title" class="title"><i>A</i><i>S</i><i> </i><i>/</i><i> </i><i>R</i><i>S</i><i> </i><i>-</i><i> </i><i>W</i><i> </i><i>C</i><i> </i><i>S</i></div>
			<div class="say">
			<p>自动化仓库控制系统，是介于WMS和PLC之间的一层管理控制系统</p>
			<p>可以协调各种物流设备如输送机、堆垛机、穿梭车以及机器人、自动导引小车等物流设备之间的运行</p>
			<p>"WAREHOUSE CONTROL SYSTEM"</p>
			</div>
			<div class="use">
			<div></div>
			《中扬立库》
			</div>
			</div>
			<img id="logo" class="logo" src="../static/img/logo0.png" alt=""/>
			<div id="ship-info-box" class="ship-info-box">
			<div class="ship-type pointernone">
			<ul id="ship-type-ul">
			<li>初始化</li>
			<li>待机…</li>
			<li>您现在可以自由移动视角</li>
			</ul>
			</div>
			<div class="speed pointernone"><span id="speed">0</span> <i id="speed-unit">%</i></div>
			<div id="ship-info-btn" class="btn" data-type="1">
			<div id="btn-lock"></div>
			<div class="btn-word">启动</div>
			<div class="line line1"></div>
			<div class="line line2"></div>
			</div>
			<div id="control-remind" class="remind">您现在可以自由移动视角</div>
			</div>


			</style>
			</head>
			<body style="position: relative">
			<div id="sidebar">
			<h1>中扬-立体仓库</h1>
			<div id="baobiao1"></div>
			<div id="container"></div>
			</body>
			<script type="module">

			</div>
			<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 dom = document.getElementById("baobiao1");
			var myChart = echarts.init(dom);
			var app = {};
			import * as THREE from '../static/js/three.module.js';
			import { APP } from '../static/js/app.js';

			var option;
			window.THREE = THREE;

			var player = new APP.Player();
			player.start();

			document.getElementById("btn-lock").addEventListener('click', function () {
			player.lockControl();
			removeClass(document.getElementById("ship-info-btn"), "show");
			removeClass(document.getElementById("title-box"), "show");
			document.getElementById("ship-type-ul").style.transform = 'translateY(-60px)';
			}, false);

			option = {
			title: {
			text: '年度进/出货量',
			textStyle:{
			color:'#F8F8FF',
			},
			subtext: 'Data',
			subtextStyle:{
			color:'#F8F8FF',
			},
			show: true,
			</script>
			<script>
			var percent = 0;
			var shipInfoBtn = document.getElementById("ship-info-btn");
			var speedDom = document.getElementById("speed");
			var timer = setInterval(function () {
			if (percent < 100.00) {
			// percent += 0.04;
			percent += 1;
			speedDom.innerText = percent.toFixed(2);
			} else {
			if (!hasClass(shipInfoBtn, "show")) {
			addClass(shipInfoBtn, "show")
			clearInterval(timer);
			}
			}
			}, 1);

			},
			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:'#ffffff',
			type: 'category',
			// prettier-ignore
			data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
			}
			],
			yAxis: [
			{
			// show:false,
			type: 'value'
			}
			],
			series: [
			{
			color:['#F8F8FF'],
			name: '进货',
			type: 'bar',
			data: [
			2.0, 4.9, 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: [
			2.6, 5.9, 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' }]
			// }
			}
			],
			$(document).on('click','.btn-word', function () {
			fullScreen()
			$("#mask").fadeOut(3000, function () {
			setTimeout(function () {
			$("#ship-type-ul").css("transform", "translateY(-40px)");
			$("#ship-info-btn .btn-word").text("体验调度世界");
			$("#ship-info-btn").data("type", 2).addClass("show");
			$("#ship-info-btn #btn-lock").css("z-index", "10");
			}, 1000);
			});
			$("#title-box, #logo").addClass("show");
			$("#ship-info-btn").removeClass("show");
			$('.speed.pointernone').addClass("hide");
			$("#ship-type-ul").css("transform", "translateY(-20px)");
			});

			};

			if (option && typeof option === 'object') {
			myChart.setOption(option);
			}

			</script>
			<script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.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/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>
			</script>
			</html>