parent: bfc38772 | 补丁 | 提交 | ignore whitespace
#
luxiaotao1123
2021-12-21 4d767348e1c46630edbc8faf4c90a77795dbc399 
#
2个文件已修改
1个文件已添加
1个文件已删除
1145 ■■■■■ 已修改文件
static/css/index.css 65 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
views/index.html 533 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
views/index0.html 115 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
views/index1.html 432 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 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 {




 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="游览厂区&#10;前进：W&#10;后退：S&#10;左：A&#10;右：D&#10;跳跃：Space" 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>&nbsp;</i><i>S</i><i>&nbsp;</i><i>/</i><i>&nbsp;</i><i>R</i><i>&nbsp;</i><i>S</i><i>&nbsp;</i><i>-</i><i>&nbsp;</i><i>W</i><i>&nbsp;</i><i>C</i><i>&nbsp;</i><i>S</i></div>


    <div class="say">


        <p>自动化仓库控制系统，是介于WMS和PLC之间的一层管理控制系统</p>


        <p>可以协调各种物流设备如输送机、堆垛机、穿梭车以及机器人、自动导引小车等物流设备之间的运行</p>


        <p>"WAREHOUSE CONTROL SYSTEM"</p>


    </div>


    <div class="use">


        <div></div>


        《中扬立库》


    </div>


</div>


<img id="logo" class="logo" src="../static/img/logo0.png"  alt=""/>


<div id="ship-info-box" class="ship-info-box">


    <div class="ship-type pointernone">


        <ul id="ship-type-ul">


            <li>初始化</li>


            <li>待机…</li>


            <li>您现在可以自由移动视角</li>


        </ul>


    </div>


    <div class="speed pointernone"><span id="speed">0</span> <i id="speed-unit">%</i></div>


    <div id="ship-info-btn" class="btn" data-type="1">


        <div id="btn-lock"></div>


        <div class="btn-word">启动</div>


        <div class="line line1"></div>


        <div class="line line2"></div>


    </div>


    <div id="control-remind" class="remind">您现在可以自由移动视角</div>


</div>






            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>




 views/index0.html


File was deleted




 views/index1.html


New file


@@ -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="游览厂区&#10;前进：W&#10;后退：S&#10;左：A&#10;右：D&#10;跳跃：Space" 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>