#

luxiaotao1123

2021-12-17 4091312dca634f4d1801c4869632d6b6d1b90b6f

 views/index.html

@@ -5,122 +5,37 @@
      <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-weight: bold;*/
            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 p1{
            height: 24px;
            font-family:   FZChaoCuHei-M10S;
            font-weight: bold;
            font-size: 24px;
            text-indent: 2.5%;
            letter-spacing:1px;
            line-height: 25px;
            margin-top: 15px;
            margin-left: 2.5%;
            display: block;
         }
         #sidebar p2{
            height: 10px;
            font-family:   FZChaoCuHei-M10S;
            font-weight: bold;
            text-indent: 2.5%;
            letter-spacing:2px;
            line-height: 8px;
            margin-top: 5px;
            margin-left: 2.5%;
            display: block;
         }

         #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/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/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">
<!--         <h1>中扬-立体仓库</h1>-->
         <p1>广州市-广州塔商圈</p1>
         <p2>ZhongYang Automated warehouse</p2>
         <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>
@@ -134,7 +49,6 @@
                  <tbody style="opacity:0;" ></tbody>
               </table>
            </div>

            <div class="tbl-body">
               <table border="0" cellspacing="0" cellpadding="0">
                  <thead>
@@ -150,6 +64,263 @@
            </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 );
         // } );

         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);
@@ -241,231 +412,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>