#

luxiaotao1123

2020-11-17 b621bb1034544a8c3c90257c96e4a1460747aa6d

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

@@ -5,15 +5,20 @@
    <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>
    <script src="../../static/js/common.js"></script>
    <script src="js/monitor.js"></script>
    <style>
        .crn-speed {
            width: 100%;
            height: 20%;
            height: 35%;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
@@ -24,18 +29,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%;
@@ -88,7 +93,7 @@
        <div class="button-left"></div>
        <div class="button-right"></div>
        <div class="time-tools">
            2019-04-27 10:30:01 星期一
            <span id="bar-year"></span>-<span id="bar-month"></span>-<span id="bar-day"></span> <span id="bar-hour"></span>:<span id="bar-minute"></span>:<span id="bar-second"></span>&nbsp;&nbsp;<span id="bar-week"></span>
        </div>
        <div class="title">
            自动仓库WCS监控平台
@@ -178,55 +183,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>

        <!--右-->
@@ -327,6 +348,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');
@@ -336,9 +367,13 @@
    };
    var data = [];

//    折线图
    let lineCharts = echarts.init(document.getElementById('line-charts'));
    lineChartOption = {

    /***********************************************************************************/
    /************************************* 折线图 ***************************************/
    /***********************************************************************************/

    var lineCharts = echarts.init(document.getElementById('line-charts'));
    var lineChartOption = {
        // animation: false,
        grid: {
            top: '0%',
@@ -403,11 +438,39 @@
        }]
    };

    lineCharts.setOption(lineChartOption);
    // 访问量报表加载
    function initlinChart() {
        var reportView = lineChartOption;
        var xAxisDate = [];
        var seriesDate=[];
        $.ajax({
            url: baseUrl+"/monitor/pakin/rep",
            method: 'GET',
            success: function (res) {
                if (res.code === 200){
                    var json = res.data;
                    for (var i = 0; i < json.length; i++) {
                        xAxisDate[i]=json[i].node;
                        seriesDate[i]=json[i].val;
                    }
                    reportView.xAxis.data=xAxisDate;
                    reportView.series[0].data=seriesDate;
                    lineCharts.setOption(reportView)
                } else if (res.code === 403){
                    top.location.href = "/";
                } else {
                    layer.msg(res.msg);
                }
            }
        });
    }

//    饼图
    let pieCharts = echarts.init(document.getElementById('pie-charts'));
    pieChartOption = {
    /***********************************************************************************/
    /************************************* 饼图 *****************************************/
    /***********************************************************************************/

    var pieCharts = echarts.init(document.getElementById('pie-charts'));
    var pieChartOption = {
        // animation: false,
        grid: {
            top: '0%',
@@ -423,7 +486,7 @@
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['1', '2', '3']
            data: ['在库库位', '空库位', '使用库位', '禁用库位']
        },
        series: [
            {
@@ -446,9 +509,10 @@
                    show: false
                },
                data: [
                    {value: 335, name: '1'},
                    {value: 310, name: '2'},
                    {value: 234, name: '3'},
                    {value: 1, name: '在库库位'},
                    {value: 1, name: '空库位'},
                    {value: 1, name: '使用库位'},
                    {value: 1, name: '禁用库位'},
                ],
                itemStyle: {
                    emphasis: {
@@ -469,7 +533,24 @@
            }
        ]
    };
    pieCharts.setOption(pieChartOption);
    // pieCharts.setOption(pieChartOption)
    // 饼图加载
    function initPieChart() {
        $.ajax({
            url: baseUrl+"/monitor/loc/rep",
            method: 'GET',
            success: function (res) {
                if (res.code === 200){
                    pieChartOption.series[0].data = res.data;
                    pieCharts.setOption(pieChartOption)
                } else if (res.code === 403){
                    top.location.href = "/";
                } else {
                    layer.msg(res.msg);
                }
            }
        });
    }

</script>
</html>