Merge branch 'dev' of http://47.97.1.152:5880/r/ASRS-3D into dev

luxiaotao1123

2021-12-11 6d088e4b4b4e68ceb555a951bf1916a65bea1779

Merge branch 'dev' of http://47.97.1.152:5880/r/ASRS-3D into dev

 static/css/main.css

New file
@@ -0,0 +1,142 @@
body {
    font-family: sans-serif;
    /*font-weight: bold;*/
    font-size: 11px;
    background-color: #000;
    margin: 0;
}
canvas {
    display: block;
}
#btnhide {
    position: absolute;
    top: 37.5%;
    left: 100%;
    transform: translateY(50%);
    width: 10%;
    height: 10%;
    background: rgba(255,255,255,0.3);
    border: none;
    color: white;
    /*padding: 15px 32px;*/
    text-align: center;
    text-decoration: none;
    /*display: none;*/
    font-size: 16px;
    border-radius: 0px 5px 5px 0px;
}
#btnhide_m{
    position: absolute;
    top: 37.5%;
    left: 100%;
    transform: translateY(50%);
    width: 10%;
    height: 10%;
    border-radius: 0px 5px 5px 0px;
    background: rgba(143, 200, 227, 0.2);
    backdrop-filter: blur(1px);
}
#groundglass {
    position: absolute;
    top: 50%;
    left: 1%;
    transform: translateY(-50%);
    width: 20%;
    height: 95%;
    background: rgba(143, 200, 227, 0.2);
    border-radius: 5px;
    backdrop-filter: blur(1px);
    /*display: none;*/
}
#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;
    /*display: none;*/
}
#sidebar p1{
    height: 24px;
    font-family:   FZChaoCuHei-M10S;
    font-weight: 900;
    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-size: 5px;
    font-family:   FZChaoCuHei-M10S;
    font-weight: 400;
    letter-spacing:0px;
    line-height: 8px;
    margin-top: 7px;
    transform: scale(0.8,0.8);
    padding-left: 5%;
}
#Histogram{
    width: 100%;
    height: 280px;
    padding-left: 3%;
}
#baobiao2 {
    width: 99%;
    height: 280px;
    padding-left: 3%;
}
.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(136,176,226,1);
    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(136, 176, 226, 0.4);
}
.tablebox table tr td span,
.tablebox table tr td span {
    font-size: 24px;
}

 static/js/lib/btnHide.js

New file
@@ -0,0 +1,28 @@
function fn1(){
    $('#sidebar').animate({
        left:'-20%'
    },"fast");
    $('#groundglass').animate({
        left:'-20%'
    },"fast");
}
function fn2() {
    $('#sidebar').animate({
        left:'1%'
    },"fast");
    $('#groundglass').animate({
        left:'1%'
    },"fast");
}
function btnHide() {
    var obj = $('#btnhide');
    var tt = obj.html();
    if (tt =='隐藏'){
        obj.html('展示');
        fn1();
    }else if(tt == '展示'){
        obj.html('隐藏');
        fn2();
    }

}

 static/js/lib/echarts.js

New file
@@ -0,0 +1,233 @@
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);
}

 static/js/lib/lunbobiao.js

New file
@@ -0,0 +1,88 @@
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);
}

 views/index.html

@@ -5,176 +5,28 @@
        <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;
            }
            #btn1 {
                background-color: #4CAF50; /* Green */
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                text-decoration: none;
                display: inline;
                font-size: 16px;
                position: absolute;
                left: 1500px;
            }
            #btn2 {
                position: absolute;
                top: 45%;
                left: 100%;
                transform: translateY(50%);
                width: 10%;
                height: 10%;
                background: rgba(255,255,255,0.3);
                border: none;
                color: white;
                /*padding: 15px 32px;*/
                text-align: center;
                text-decoration: none;
                /*display: none;*/
                font-size: 16px;
                border-radius: 0px 5px 5px 0px;
            }
            #btn2_m{
                position: absolute;
                top: 45%;
                left: 100%;
                transform: translateY(50%);
                width: 10%;
                height: 10%;
                border-radius: 0px 5px 5px 0px;
                background: rgba(143, 200, 227, 0.2);
                backdrop-filter: blur(1px);
            }
            #maoboli {
                position: absolute;
                top: 50%;
                left: 1%;
                transform: translateY(-50%);
                width: 20%;
                height: 95%;
                background: rgba(143, 200, 227, 0.2);
                border-radius: 5px;
                backdrop-filter: blur(1px);
                /*display: none;*/
            }
            #sidebar{
                display: none;
                /*定位*/
                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;
                /*display: none;*/
            }
            #sidebar p1{
                height: 24px;
                font-family:   FZChaoCuHei-M10S;
                font-weight: 900;
                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-size: 5px;
                font-family:   FZChaoCuHei-M10S;
                font-weight: 400;
                letter-spacing:1px;
                line-height: 8px;
                margin-top: 7px;
                transform: scale(0.8,0.8);
            }
            #baobiao1{
                width: 99%;
                height: 280px;
            }
            #baobiao2 {
                width: 99%;
                height: 280px;
            }
            .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(136,176,226,1);
                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(136, 176, 226, 0.4);
            }
            .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/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="text/javascript" src="../static/js/lib/btnHide.js"></script>
    </head>
    <body style="position: relative">
        <div id="maoboli"></div>
        <button id="btn1" onclick="btn1()">展开</button>
        <div id="groundglass"></div>
        <div id="sidebar">
            <p1>中扬-智能立体仓库</p1>
            <p2>ZhongYang Intelligent Three-Dimensional Warehouse</p2>
            <div id="baobiao1"></div>
            <div id="Histogram"></div>
            <div id="baobiao2"></div>
            <div id="btn2_m"></div>
            <button id="btn2" onclick="btn2()">隐藏</button>

            <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" >
@@ -204,101 +56,27 @@
                </div>
            </div>
        </div>
        <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>'
        <div id="container"></div>

                $('.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');
                }
        <script type="module">

                MyMarhq = setInterval(Marqueehq,speedhq);
            import * as THREE from '../static/js/three.module.js';
            import { APP } from '../static/js/app.js';

                // 鼠标移上去取消事件
                $(".tbl-header tbody").hover(function (){
                    clearInterval(MyMarhq);
                },function (){
                    clearInterval(MyMarhq);
                    MyMarhq = setInterval(Marqueehq,speedhq);
                })
            window.THREE = THREE;

            }
            $.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>'
            var player = new APP.Player();
            player.start();

                $('.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');
                }
            // document.body.appendChild( player.dom );
            // window.addEventListener( 'resize', function () {
            //     player.setSize( window.innerWidth, window.innerHeight );
            // } );

                MyMarhq = setInterval(Marqueehq,speedhq);
            }

        </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 dom1 = document.getElementById("Histogram");
            var myChart1 = echarts.init(dom1);
            window.addEventListener('resize',function () {
                myChart1.resize();
@@ -531,48 +309,98 @@
            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">
        <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>'

            import * as THREE from '../static/js/three.module.js';
            import { APP } from '../static/js/app.js';
                $('.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');
                }

            window.THREE = THREE;
                MyMarhq = setInterval(Marqueehq,speedhq);

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

            // document.body.appendChild( player.dom );
            // window.addEventListener( 'resize', function () {
            //     player.setSize( window.innerWidth, window.innerHeight );
            // } );


        </script>
        <script>
            function btn1() {
                $('#sidebar').show(300);
                $('#maoboli').show(300);
                // $('#btn1').hide(300);
                $('#btn2').show(300);
            }
            function btn2() {
                $('#sidebar').hide(300);
                $('#maoboli').hide(300);
                // $('#btn2').hide(300);
                // $('#btn1').show(300);
                // 鼠标移上去取消事件
                $(".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>