#

luxiaotao1123

2020-11-16 fa29b45fb2f25087b106bfa234a1ec6feebb3f8d

 src/main/webapp/views/monitor/monitor.html

@@ -5,15 +5,18 @@
    <title>ASRS监控</title>
    <link href="css/monitor.css" rel="stylesheet">
    <link href="css/Pacifico.css" rel="stylesheet">
    <link href="../../static/layui/css/layui.css" rel="stylesheet">
    <link href="css/lunbo.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vincent.js"></script>
    <script src="js/echarts/echarts.min.js"></script>
    <script src="js/jquery.countup.min.js"></script>
    <script src="js/jquery.waypoints.min.js"></script>
    <script src="../../static/layui/layui.js"></script>
    <style>
        .crn-speed {
            width: 100%;
            height: 20%;
            height: 35%;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
@@ -24,18 +27,18 @@
        .crn-speed span {
            display:inline-block;
            margin:20px auto;
            font-size:64px;
            font-size:56px;
            font-family:'Pacifico',serif
        }
        .speed-content {
            display: inline-block;
        }


        .scroll-pane {
            width: 100%;
            height: 80%;
            height: 65%;
        }

        .scroll-bar {
            float: left;
            width: 50%;
@@ -178,57 +181,71 @@
                    <!-- 中上 -->
                    <div class="crn-speed">
                        <div class="speed-content">
                            <span>堆垛机速度：</span><span class="counter">5.00</span><span>米/秒</span>
                            <div>
                                <span>堆垛机走行速度：</span><span class="counter">5.00</span><span>米/秒</span>
                            </div>
                            <div>
                                <span>堆垛机升降速度：</span><span class="counter">5.00</span><span>米/秒</span>
                            </div>
                        </div>
                    </div>

                    <div class="scroll-pane">


                        <!-- 中左 -->
                        <div class="scroll-bar left-bar">
                            <div class="scroll-header">
                                <span>入库</span>
                                <p class="english">Entering Warehouse</p>
                            </div>
                            <div class="scroll-content">
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                        <div class="layui-carousel" id="test1">
                            <div carousel-item>
                                <div style="background-color: red">条目1</div>
                                <div style="background-color: gold">条目2</div>
                                <div style="background-color: #333333">条目3</div>
                                <div style="background-color: #00FF00">条目4</div>
                                <div style="background-color: #5FB878">条目5</div>
                            </div>
                        </div>

                        <!-- 中右 -->
                        <div class="scroll-bar right-bar">
                            <div class="scroll-header">
                                <span>出库</span>
                                <p class="english">Delivery Of Cargo From Storage</p>
                            </div>
                            <div class="scroll-content">
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                                <p>111111111111111111111</p>
                            </div>
                        </div>
                    </div>
<!--                        &lt;!&ndash; 中左 &ndash;&gt;-->
<!--                        <div class="scroll-bar left-bar">-->
<!--                            <div class="scroll-header">-->
<!--                                <span>入库</span>-->
<!--                                <p class="english">Entering Warehouse</p>-->
<!--                            </div>-->
<!--                            <div class="scroll-content">-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                        &lt;!&ndash; 中右 &ndash;&gt;-->
<!--                        <div class="scroll-bar right-bar">-->
<!--                            <div class="scroll-header">-->
<!--                                <span>出库</span>-->
<!--                                <p class="english">Delivery Of Cargo From Storage</p>-->
<!--                            </div>-->
<!--                            <div class="scroll-content">-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                                <p>111111111111111111111</p>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->

                </div>

            </div>

        </div>

        <!--右-->
@@ -329,6 +346,16 @@
    </div>
</body>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
    $('.counter').countUp();
    //  遮罩
    let closeBtn = document.getElementById('closeBtn');