From 1df29b623eb9d49091303db4c611fc4568db70b1 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@63.com>
Date: 星期一, 13 十二月 2021 08:58:27 +0800
Subject: [PATCH] #
---
views/index.html | 586 +++++++++++++++++++++++++++-------------------------------
1 files changed, 273 insertions(+), 313 deletions(-)
diff --git a/views/index.html b/views/index.html
index 013b1d3..9f88b44 100644
--- a/views/index.html
+++ b/views/index.html
@@ -5,99 +5,31 @@
<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: #ffffff;
- }
- #sidebar h1{
- font-family: Fantasy;
- font-size: 36px;
- text-indent: 5%;
- }
- #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>
+ <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/common.js"></script>
+ <script type="text/javascript" src="../static/js/data/Warehouse.js"></script>
+ <script type="text/javascript" src="../static/js/data/Task.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/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/lib/btnHide.js"></script>
</head>
<body style="position: relative">
+ <div id="groundglass"></div>
<div id="sidebar">
- <h1>涓壃-绔嬩綋浠撳簱</h1>
- <div id="baobiao1"></div>
+ <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>
@@ -111,7 +43,6 @@
<tbody style="opacity:0;" ></tbody>
</table>
</div>
-
<div class="tbl-body">
<table border="0" cellspacing="0" cellpadding="0">
<thead>
@@ -127,6 +58,260 @@
</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.body.appendChild( player.dom );
+ // window.addEventListener( 'resize', function () {
+ // player.setSize( window.innerWidth, window.innerHeight );
+ // } );
+
+
+ </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);
@@ -218,231 +403,6 @@
}
</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>
--
Gitblit v1.9.1