#

luxiaotao1123

2020-11-17 4eea87e9d12f148f6a43f6c9e70f2b1f372d4c64

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

@@ -4,43 +4,72 @@
    <meta charset="UTF-8">
    <title>ASRS监控</title>
    <link href="css/monitor.css" rel="stylesheet">
<!--    <link href="css/Pacifico.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="https://api.map.baidu.com/api?v=2.0&ak=pnkdgjAQGCS0nwjFnBjbprCtPrNNvDBe" type="text/javascript"></script>
    <script src="js/echarts/bmap.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>
        span.counter {
            display:block;
        .crn-speed {
            width: 100%;
            height: 35%;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            /*border-bottom: 1px solid rgba(0, 0, 0, 0.3);*/
        }

        .crn-speed span {
            display:inline-block;
            margin:20px auto;
            font-size:56px;
            font-family:'Pacifico',serif
        }
        .speed-content {
            display: inline-block;
        }


        .scroll-pane {
            width: 100%;
            height: 65%;
        }
        .scroll-bar {
            float: left;
            width: 50%;
            height: 100%;
            text-align: center;
        }

        .scroll-header span {
            font-size:64px;
            font-family:'Pacifico',serif
        }

        /*.div1 {*/
        /*    width:200px;*/
        /*    height:200px;*/
        /*    overflow:hidden;*/
        /*    margin:auto;*/
        /*    position:relative;*/
        /*    font-family:'Pacifico',serif*/
        /*}*/
        /*@keyframes anis {*/
        /*    100% {*/
        /*        transform:translateY(-200px)*/
        /*    }*/
        /*}img {*/
        /*     position:absolute;*/
        /* }*/
        /*.div2 {*/
        /*    animation:anis 10s linear infinite;*/
        /*}*/
        /*.div2:hover {*/
        /*    animation-play-state:paused;*/
        /*}*/
        .scroll-content {
            animation:anis 10s linear infinite;
            padding: 200px 10px 20px 10px;
            font-family:'Pacifico',serif;
            overflow:hidden;
        }
        .scroll-content:last-child {
            border-left: 1px solid rgba(0, 0, 0, 0.3);
        }
        .scroll-content:hover {
            animation-play-state:paused;
        }
        @keyframes anis {
            100% {
                transform:translateY(-200px)
            }
        }

    </style>
</head>
@@ -64,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监控平台
@@ -95,40 +124,40 @@
                        <img src="img/a.png">
                        <div class="info-detail">
                            <div class="real-data">
                                <i class="count">7777</i>
                                <span class="unit">个</span>
                                <i class="count" id="xDistance">0</i>
                                <span class="unit">km</span>
                            </div>
                            <div class="content">库位总数(个)</div>
                            <div class="content">累计走行距离(千米)</div>
                        </div>
                    </div>
                    <div class="charge-info-elem">
                        <img src="img/b.png">
                        <div class="info-detail">
                            <div class="real-data">
                                <i class="count">777</i>
                                <span class="unit">个</span>
                                <i class="count" id="yDistance">0</i>
                                <span class="unit">km</span>
                            </div>
                            <div class="content">使用中库位(个)</div>
                            <div class="content">累计升降距离(千米)</div>
                        </div>
                    </div>
                    <div class="charge-info-elem">
                        <img src="img/c.png">
                        <div class="info-detail">
                            <div class="real-data">
                                <i class="count">33</i>
                                <span class="unit">托</span>
                                <i class="count" id="xDuration">0</i>
                                <span class="unit">h</span>
                            </div>
                            <div class="content">今日入库(托)</div>
                            <div class="content">累计走行时长(小时)</div>
                        </div>
                    </div>
                    <div class="charge-info-elem">
                        <img src="img/d.png">
                        <div class="info-detail">
                            <div class="real-data">
                                <i class="count">14296</i>
                                <span class="unit">千瓦时</span>
                                <i class="count" id="yDuration">0</i>
                                <span class="unit">h</span>
                            </div>
                            <div class="content">今日电总量(千瓦时)</div>
                            <div class="content">累计升降时长(小时)</div>
                        </div>
                    </div>
                </div>
@@ -137,7 +166,7 @@
                    <div class="image-border image-border2"></div>
                    <div class="image-border image-border3"></div>
                    <div class="image-border image-border4"></div>
                    <span>中扬物流客户服务中心</span>
                    <span>浙江中扬物流装备有限公司</span>
                    <img src="img/wxCode.jpg">
                </div>
            </div>
@@ -146,43 +175,79 @@
        <!--中-->
        <div class="container-element-middle">
            <div class="map-board">
                <div class="inside">
                    <div class="image-border image-border1"></div>
                    <div class="image-border image-border2"></div>
                    <div class="image-border image-border3"></div>
                    <div class="image-border image-border4"></div>


                    <!-- 中上 -->
                    <div class="demo">
                        <span class="counter">5.00</span>
                    </div>

                    <!-- 中左 -->
                    <div class="div1">
                        <div class="div2">
                            <p>111111111111111111111</p>
                            <p>211111111111111111111</p>
                            <p>311111111111111111111</p>
                            <p>411111111111111111111</p>
                            <p>511111111111111111111</p>
                            <p>611111111111111111111</p>
                            <p>711111111111111111111</p>
                            <p>2211111111111111111111</p>
                            <p>331111111111111111111</p>
                            <p>441111111111111111111</p>
                            <p>551111111111111111111</p>
                            <p>661111111111111111111</p>
                            <p>771111111111111111111</p>
                            <p>881111111111111111111</p>
                            <p>991111111111111111111</p>
                            <p>001111111111111111111</p>
                    <div class="crn-speed">
                        <div class="speed-content">
                            <div>
                                <span>堆垛机走行速度：</span><span id="xSpeed" class="counter">5.00</span><span>米/秒</span>
                            </div>
                            <div>
                                <span>堆垛机升降速度：</span><span id="ySpeed" class="counter">5.00</span><span>米/秒</span>
                            </div>
                        </div>
                    </div>
                    <!-- 中右 -->
                </div>
            </div>

                    <div class="scroll-pane">

                        <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>

<!--                        &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>

        <!--右-->
@@ -231,7 +296,7 @@
                            在库
                        </div>
                        <div class="elem-footer">
                            3,300
                            <span id="stock-count">0</span>
                        </div>
                    </div>
                    <div class="top-footer-elem">
@@ -241,17 +306,17 @@
                            空库
                        </div>
                        <div class="elem-footer">
                            161
                            <span id="empty-count">0</span>
                        </div>
                    </div>
                    <div class="top-footer-elem">
                        <div class="elem-header" id="elem-header-third">
                        </div>
                        <div class="elem-main">
                            使用中
                            禁用
                        </div>
                        <div class="elem-footer">
                            666
                            <span id="none-count">0</span>
                        </div>
                    </div>
                </div>
@@ -264,7 +329,7 @@
                <div class="progress-bar">
                    <div class="usage-rate">
                        <span class="usage-rate-left" >库位使用率</span>
                        <span class="usage-rate-right">60%</span>
                        <span class="usage-rate-right"><span id="usedPr">0</span>%</span>
                    </div>
                    <div class="usage-rate-english english">
                        <span class="usage-rate-left">EQUIPMENT USAGE THIS MONTH</span>
@@ -272,10 +337,13 @@
                    </div>
                </div>
                <div class="progress-bar-modal">
                    <div class="bar-container">
                        <div class="bar-proportion"><span>实际使用</span></div>
                    <div class="layui-progress layui-progress-big" style="background-color: #233751;width: 80%;display: inline-block">
                        <div class="layui-progress-bar layui-bg-red" lay-percent="100%"></div>
                    </div>
                    <i class="bar-container-count">7777<span>个</span></i>
<!--                    <div class="bar-container">-->
<!--                        <div class="bar-proportion"><span>实际使用</span></div>-->
<!--                    </div>-->
                    <i class="bar-container-count"><span id="used">0</span></i>
                </div>
            </div>
        </div>
@@ -283,18 +351,24 @@
    </div>
</body>
<script>
    $('.counter').countUp();
    //  遮罩
    let closeBtn = document.getElementById('closeBtn');
    let detailModal = document.getElementById('detail-modal');
    closeBtn.onclick = function () {
        detailModal.style.display = 'none';
    };
    var data = [];
    layui.use(['element', 'carousel'], function(){
        var carousel = layui.carousel;
        var element = layui.element;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });

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

    var lineCharts = echarts.init(document.getElementById('line-charts'));
    var lineChartOption = {
        // animation: false,
        grid: {
            top: '0%',
@@ -359,11 +433,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%',
@@ -379,7 +481,7 @@
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['1', '2', '3']
            data: ['在库', '空']
        },
        series: [
            {
@@ -402,9 +504,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: {
@@ -425,7 +528,30 @@
            }
        ]
    };
    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.pie;
                    pieCharts.setOption(pieChartOption);

                    $('#stock-count').text(res.data.stockCunt);
                    $('#empty-count').text(res.data.emptyCount);
                    $('#none-count').text(res.data.noneCount);

                    $('#usedPr').text(res.data.usedPr);
                    $('#used').text(res.data.used);
                } else if (res.code === 403){
                    top.location.href = "/";
                } else {
                    layer.msg(res.msg);
                }
            }
        });
    }

</script>
</html>