<!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">
|
<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/data/Asrs.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/BuildingData.js"></script>
|
<script type="text/javascript" src="../static/js/data/ConveyData.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>
|
<ul class="menu" id="menu">
|
<li id="menu-w">
|
<div><div>主</div></div>
|
</li>
|
<li id="menu-m">
|
<div><div>左</div></div>
|
</li>
|
<li id="menu-t">
|
<div><div>俯</div></div>
|
</li>
|
<li id="menu-b">
|
<div><div>返</div></div>
|
</li>
|
</ul>
|
|
|
<div id="container"></div>
|
</body>
|
<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.getElementById("btn-lock").addEventListener('click', function () {
|
player.lockControl();
|
removeClass(document.getElementById("ship-info-btn"), "show");
|
document.getElementById("ship-type-ul").style.transform = 'translateY(-60px)';
|
}, false);
|
|
document.getElementById("menu-w").addEventListener('click', function () {
|
player.mainView();
|
}, false);
|
|
document.getElementById("menu-m").addEventListener('click', function () {
|
player.leftView();
|
}, false);
|
|
document.getElementById("menu-t").addEventListener('click', function () {
|
player.verticalView();
|
}, false);
|
|
document.getElementById("menu-b").addEventListener('click', function () {
|
player.backlView();
|
}, false);
|
</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.02;
|
percent += 1;
|
speedDom.innerText = percent.toFixed(2);
|
} else {
|
speedDom.innerText = '100.00';
|
if (!hasClass(shipInfoBtn, "show")) {
|
addClass(shipInfoBtn, "show")
|
clearInterval(timer);
|
}
|
}
|
}, 1);
|
|
$(document).on('click','.btn-word', function () {
|
// fullScreen()
|
$("#mask").fadeOut(1, function () { // 3000
|
$("#menu").addClass("show");
|
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");
|
$("#menu li").css("transition", "all 200ms !important");
|
setTimeout(function () {
|
removeClass(document.getElementById("title-box"), "show");
|
}, 10000);
|
}, 1); // 1000
|
});
|
$("#title-box, #logo").addClass("show");
|
$("#ship-info-btn").removeClass("show");
|
$('.speed.pointernone').addClass("hide");
|
$("#ship-type-ul").css("transform", "translateY(-20px)");
|
});
|
|
</script>
|
</html>
|
