From 4d767348e1c46630edbc8faf4c90a77795dbc399 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@63.com>
Date: 星期二, 21 十二月 2021 13:30:17 +0800
Subject: [PATCH] #
---
static/css/index.css | 65 +++
/dev/null | 115 -----
views/index.html | 533 +++++--------------------
views/index1.html | 432 +++++++++++++++++++++
4 files changed, 612 insertions(+), 533 deletions(-)
diff --git a/static/css/index.css b/static/css/index.css
index 4317dcc..91e0efd 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -150,6 +150,71 @@
transform:translate(0,0);
}
+.title-box {
+ position:absolute;
+ top:40%;
+ left:8%;
+ transform:translateY(-50%);
+ color:#fff;
+ z-index:2;
+ pointer-events:none;
+}
+.title-box .title {
+ font-size:36px;
+ perspective:600px;
+ -webkit-perspective:600px;
+ -moz-perspective:600px;
+}
+.title-box .title i {
+ display:inline-block;
+ font-style:normal;
+ opacity:0;
+ transform:rotateY(90deg);
+ transition:all 5000ms;
+ transform-style:preserve-3d;
+ -webkit-transform-style:preserve-3d;
+}
+.title-box.show .title i {
+ opacity:1;
+ transform:rotateY(0);
+}
+.title-box.show .say {
+ opacity:1;
+ transform:translateX(0);
+}
+.title-box .say {
+ font-size:12px;
+ color:#888;
+ padding:20px 0 20px 40px;
+ opacity:0;
+ transform:translateX(20px);
+ transition:all 2000ms;
+ transition-delay:2000ms;
+}
+.title-box.show .use {
+ opacity:1;
+ transform:translateY(0);
+}
+.title-box .say p {
+ padding:0;
+}
+.title-box .use {
+ font-size:14px;
+ color:#fff;
+ display:flex;
+ align-items:center;
+ padding-left:40px;
+ opacity:0;
+ transform:translateY(20px);
+ transition:all 2000ms;
+ transition-delay:2000ms;
+}
+.title-box .use div {
+ height:1px;
+ background-color:#fff;
+ width:80px;
+ margin-right:10px;
+}
#container {
diff --git a/views/index.html b/views/index.html
index 6418e92..a806627 100644
--- a/views/index.html
+++ b/views/index.html
@@ -1,432 +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">
- <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/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>
- </head>
- <body style="position: relative">
- <!--鍒濆鍖栧姞杞藉眰-->
- <div class="layuimini-loader">
- <div class="layuimini-loader-inner"></div>
- </div>
+<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/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%;
+ }
- <div class="sidebar">
- <img id="fps" class="buttonClass" title="鎬ц兘璋冭瘯" src="../static/img/icon/fps.svg">
- <img id="skyBox" class="buttonClass" title="鏇存敼鑳屾櫙" src="../static/img/icon/skyBox.svg">
-<!-- <img id="store" class="buttonClass" title="鏄剧ず浠撳簱" src="../static/img/icon/store.svg">-->
-<!-- <img id="group" class="buttonClass" title="鏄剧ず宸烽亾" src="../static/img/icon/group.svg">-->
-<!-- <img id="shelf" class="buttonClass" title="鏄剧ず鏋跺瓙" src="../static/img/icon/shelf.svg">-->
-<!-- <img id="reset" class="buttonClass" title="澶嶄綅鍦烘櫙" src="../static/img/icon/reset.svg">-->
- <img id="tour" class="buttonClass" title="娓歌鍘傚尯 鍓嶈繘锛歐 鍚庨��锛歋 宸︼細A 鍙筹細D 璺宠穬锛歋pace" src="../static/img/icon/tour.svg">
-<!-- <img id="temperature" class="buttonClass" title="杞﹂棿娓╁害" src="../static/img/icon/temperature.svg">-->
-<!-- <img id="roomRate" class="buttonClass" title="搴撴埧鍒╃敤鐜�" src="../static/img/icon/roomRate.svg">-->
- </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">
+ </style>
+</head>
+<body>
- 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("fps").addEventListener('click', function () {
- player.changeStats();
- }, false);
- document.getElementById("skyBox").addEventListener('click', function () {
- player.changeBackGround();
- }, false);
- document.getElementById("tour").addEventListener('click', function () {
- player.lockControl();
- }, false)
-
- $('.layuimini-loader').fadeOut();
-
- </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 = {};
+<div id="mask" class="mask"></div>
+<div id="title-box" class="title-box">
+ <div id="title" class="title"><i>A</i><i> </i><i>S</i><i> </i><i>/</i><i> </i><i>R</i><i> </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>鑷姩鍖栦粨搴撴帶鍒剁郴缁燂紝鏄粙浜嶹MS鍜孭LC涔嬮棿鐨勪竴灞傜鐞嗘帶鍒剁郴缁�</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>
- var option1;
+<div id="container"></div>
+</body>
+<script type="module">
- 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,
+ import * as THREE from '../static/js/three.module.js';
+ import { APP } from '../static/js/app.js';
- },
- 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杞村垎鍓茬嚎棰滆壊
- }
- }
+ window.THREE = THREE;
- }
- ],
- 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
- ],
- }
- ],
+ 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);
- if (option1 && typeof option1 === 'object') {
- myChart1.setOption(option1);
- }
+</script>
+<script>
+ var percent = 0;
+ var shipInfoBtn = document.getElementById("ship-info-btn");
+ var speedDom = document.getElementById("speed");
+ var timer = setInterval(function () {
+ if (percent < 99.95) {
+ percent += 0.05;
+ speedDom.innerText = percent.toFixed(2);
+ } else {
+ if (!hasClass(shipInfoBtn, "show")) {
+ addClass(shipInfoBtn, "show")
+ clearInterval(timer);
+ }
+ }
+ }, 1);
- 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杞村埢搴︾嚎鐨勯鑹�
- }},
+ $(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);
+ setTimeout(function () {
+ $("#title-box").removeClass("show");
+ }, 5000);
+ });
+ $("#title-box, #logo").addClass("show");
+ $("#ship-info-btn").removeClass("show");
+ $('.speed.pointernone').addClass("hide");
+ $("#ship-type-ul").css("transform", "translateY(-20px)");
+ });
- },
-
- 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>
+</script>
</html>
diff --git a/views/index0.html b/views/index0.html
deleted file mode 100644
index dee13e4..0000000
--- a/views/index0.html
+++ /dev/null
@@ -1,115 +0,0 @@
-<!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/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/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>
-
-<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>
-
-
-<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);
-
-</script>
-<script>
- var percent = 0;
- var shipInfoBtn = document.getElementById("ship-info-btn");
- var speedDom = document.getElementById("speed");
- var timer = setInterval(function () {
- if (percent < 99.95) {
- percent += 0.15;
- speedDom.innerText = percent.toFixed(2);
- } else {
- if (!hasClass(shipInfoBtn, "show")) {
- addClass(shipInfoBtn, "show")
- clearInterval(timer);
- }
- }
- }, 1);
-
- $(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);
- });
- $("#logo").addClass("show");
- $("#ship-info-btn").removeClass("show");
- $('.speed.pointernone').addClass("hide");
- $("#ship-type-ul").css("transform", "translateY(-20px)");
- });
-
-</script>
-</html>
diff --git a/views/index1.html b/views/index1.html
new file mode 100644
index 0000000..6418e92
--- /dev/null
+++ b/views/index1.html
@@ -0,0 +1,432 @@
+<!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/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/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>
+ </head>
+ <body style="position: relative">
+ <!--鍒濆鍖栧姞杞藉眰-->
+ <div class="layuimini-loader">
+ <div class="layuimini-loader-inner"></div>
+ </div>
+
+ <div class="sidebar">
+ <img id="fps" class="buttonClass" title="鎬ц兘璋冭瘯" src="../static/img/icon/fps.svg">
+ <img id="skyBox" class="buttonClass" title="鏇存敼鑳屾櫙" src="../static/img/icon/skyBox.svg">
+<!-- <img id="store" class="buttonClass" title="鏄剧ず浠撳簱" src="../static/img/icon/store.svg">-->
+<!-- <img id="group" class="buttonClass" title="鏄剧ず宸烽亾" src="../static/img/icon/group.svg">-->
+<!-- <img id="shelf" class="buttonClass" title="鏄剧ず鏋跺瓙" src="../static/img/icon/shelf.svg">-->
+<!-- <img id="reset" class="buttonClass" title="澶嶄綅鍦烘櫙" src="../static/img/icon/reset.svg">-->
+ <img id="tour" class="buttonClass" title="娓歌鍘傚尯 鍓嶈繘锛歐 鍚庨��锛歋 宸︼細A 鍙筹細D 璺宠穬锛歋pace" src="../static/img/icon/tour.svg">
+<!-- <img id="temperature" class="buttonClass" title="杞﹂棿娓╁害" src="../static/img/icon/temperature.svg">-->
+<!-- <img id="roomRate" class="buttonClass" title="搴撴埧鍒╃敤鐜�" src="../static/img/icon/roomRate.svg">-->
+ </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.getElementById("fps").addEventListener('click', function () {
+ player.changeStats();
+ }, false);
+ document.getElementById("skyBox").addEventListener('click', function () {
+ player.changeBackGround();
+ }, false);
+ document.getElementById("tour").addEventListener('click', function () {
+ player.lockControl();
+ }, false)
+
+ $('.layuimini-loader').fadeOut();
+
+ </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>
--
Gitblit v1.9.1