派生自 zy-wcs

parent: 3b59f659 | 补丁 | 提交 | ignore whitespace
#
luxiaotao1123
2021-01-28 ba05cae7c0637b499a4632b0554358896bed1c6e 
#
1个文件已添加
1个文件已修改
550 ■■■■■ 已修改文件
src/main/java/com/zy/common/web/RouterController.java 11 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main/webapp/views/monitor/monitor0.html 539 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 src/main/java/com/zy/common/web/RouterController.java


@@ -48,11 +48,20 @@


                        @PathVariable("ledId") Integer ledId,


                        HttpServletResponse response) {


        try{




            response.sendRedirect(contextPath+"/views/monitor/monitor.html"+ "?" + "crnId=" + cnrId + "&" + "ledId=" + ledId);


        } catch (Exception ex){


            ex.printStackTrace();


        }


    }




    @RequestMapping("/monitor0/{ledId}")


    public void monitor(@PathVariable("ledId") Integer ledId,


                        HttpServletResponse response) {


        try{


            response.sendRedirect(contextPath+"/views/monitor/monitor0.html"+ "?" + "ledId=" + ledId);


        } catch (Exception ex){


            ex.printStackTrace();


        }


    }




}




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


New file


@@ -0,0 +1,539 @@


<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <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: 75%;


            position: absolute;


            text-align: center;


            overflow: hidden;


            text-overflow: ellipsis;


            white-space: nowrap;


            top: -15%;


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


        }






        .scroll-pane {


            position: absolute;


            width: 100%;


            height: 85%;


        }


        .scroll-bar {


            float: left;


            width: 50%;


            height: 100%;


            text-align: center;


        }




        .scroll-header span {


            font-size:64px;


            font-family:'Pacifico',serif


        }




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


            }


        }




        #led-content {


            display: none;


        }


        #led-p-content {


            text-align: center;


            padding: 20px 40px;


            font-size: 35px;


            font-weight: bold;


            /*color: #FF5722;*/


        }




    </style>


</head>


<body class="monitor-bg">




    <!--头部-->


    <div class="header" >


        <div class="button-left"></div>


        <div class="button-right"></div>


        <div class="time-tools">


            <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监控平台


        </div>


    </div>




    <!--主体-->


    <div class="container">




        <!--左-->


        <div class="container-element-side">


            <div class="container-side-box">


                <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="introduce">


                    <h6>自动化立体仓库</h6>


                    <p class="english">Automatic Storageand Retrieval System</p>


                    <p class="introduce-content">  利用立体仓库设备可实现仓库高层合理化、存取自动化、操作简便化；自动化立体仓库是当前技术水平较高的形式。自动化立体仓库的主体由货架、巷道式堆垛起重机、入（出）库工作台和自动运进（出）及操作控制系统组成。货架是钢结构或钢筋混凝土结构的建筑物或结构体，货架内是标准尺寸的货位空间，巷道堆垛起重机穿行于货架之间的巷道中，完成存、取货的工作。管理上采用计算机及条形码技术。</p>


                </div>


                <div class="charge-info">


                    <div class="info-header">


                        <h6>仓库数据</h6>


                        <p class="english">warehouse data</p>


                    </div>


                    <div class="charge-info-elem">


                        <img src="img/a.png">


                        <div class="info-detail">


                            <div class="real-data">


                                <i class="count" id="xDistance">0</i>


                                <span class="unit">m</span>


                            </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" id="yDistance">0</i>


                                <span class="unit">m</span>


                            </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" id="xDuration">0</i>


                                <span class="unit">s</span>


                            </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" id="yDuration">0</i>


                                <span class="unit">s</span>


                            </div>


                            <div class="content">累计升降时长(秒)</div>


                        </div>


                    </div>


                </div>


                <div class="footer container-side-box">


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


                    <span>浙江中扬物流装备有限公司</span>


                    <img src="../../static/image/barcode.png">


                </div>


            </div>


        </div>




        <!--中-->


        <div class="container-element-middle">


            <div class="map-board" style="padding-top: 10%">


                    <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="scroll-pane">


                        <div class="layui-carousel" id="banner">


                            <div carousel-item>


                                <div class="item-img" id="img-1" style="background-color: red"></div>


                                <div class="item-img" id="img-2" style="background-color: gold"></div>


                                <div class="item-img" id="img-3" style="background-color: green"></div>


                                <div class="item-img" id="img-4" style="background-color: white"></div>


                                <div class="item-img" id="img-5" style="background-color: darkgoldenrod"></div>


                            </div>


                        </div>




                        <div id="led-content">


                            <pre id="led-p-content"></pre>


                        </div>


                </div>




            </div>


        </div>




        <!--右-->


        <div class="container-element-side">


            <div class="container-side-box right-top">


                <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="line-chart-title">


                    <div class="order-report">


                        <span class="order-report-left" >入出库统计</span>


                        <span class="order-report-right">31</span>


                    </div>


                    <div class="order-report-english english">


                        <span class="order-report-left">ORDER STATISTICS</span>


                        <span class="order-report-right">今日充电订单数</span>


                    </div>


                </div>


                <!--折线图-->


                <div id="line-charts"></div>


            </div>


            <div class="container-side-box right-middle">


                <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="top-header">


                    <div class="income-date">


                        <span class="income-date-left" >库存类型</span>


                        <span class="income-date-right">今天</span>


                    </div>


                    <div class="income-date-english english">


                        <span class="income-date-left">INCOME DATE</span>


                        <span class="income-date-right">Today</span>


                    </div>


                </div>


                <div class="top-main">


                    <div id="pie-charts"></div>


                </div>


                <div class="top-footer">


                    <div class="top-footer-elem">


                        <div class="elem-header" id="elem-header-first">


                        </div>


                        <div class="elem-main">


                            在库


                        </div>


                        <div class="elem-footer">


                            <span id="stock-count">0</span>


                        </div>


                    </div>


                    <div class="top-footer-elem">


                        <div class="elem-header" id="elem-header-second">


                        </div>


                        <div class="elem-main">


                            空库


                        </div>


                        <div class="elem-footer">


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


                            <span id="none-count">0</span>


                        </div>


                    </div>


                </div>


            </div>


            <div class="container-side-box right-bottom">


                <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="progress-bar">


                    <div class="usage-rate">


                        <span class="usage-rate-left" >库位使用率</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>


                        <span class="usage-rate-right">同比上月 + 5%</span>


                    </div>


                </div>


                <div class="progress-bar-modal">


                    <div class="layui-progress layui-progress-big" lay-filter="used-progress" style="background-color: #233751;width: 80%;display: inline-block">


                        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>


                    </div>


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




    </div>


</body>


<script>


    layui.use(['element', 'carousel'], function(){


        var carousel = layui.carousel;


        var element = layui.element;


        // 轮播图


        carousel.render({


            elem: '#banner'


            ,width: '100%' //设置容器宽度


            ,arrow: 'hover' // 切换箭头默认显示状态，可选值为 hover（悬停显示） always（始终显示） none（始终不显示）


            ,interval: '3000' // 自动切换的时间间隔，单位：ms（毫秒），不能低于800


            ,anim: 'fade'


        });


    });




    /***********************************************************************************/


    /************************************* 头部按钮 *************************************/


    /***********************************************************************************/


    // 左


    $('.button-left').click(function () {


        exitFull();


    });


    // 右


    $('.button-right').click(function () {


        full();


    });




    /***********************************************************************************/


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


    /***********************************************************************************/




    var lineCharts = echarts.init(document.getElementById('line-charts'));


    var lineChartOption = {


        // animation: false,


        grid: {


            top: '0%',


            left: '0%',


            right: '2%',


            bottom: '0%',


            containLabel: true,


            // backgroundColor: 'rgb(116,148,174,0.3)',


            show: true


        },


        xAxis: {


            type: 'category',


            boundaryGap: false,


            data:  ['1', '2', '3', '4', '5', '6', '7'],


            axisLabel: {


                textStyle:{


                    color:'#aaa',  //坐标的字体颜色


                    fontSize: 6,


                },


            },


            axisLine:{


                lineStyle:{


                    color:'#3590ac', // 坐标轴颜色


                }


            }


        },


        yAxis: {


            type: 'value',


            axisLabel: {


                textStyle:{


                    color:'#aaa',  //坐标的字体颜色


                    fontSize: 5


                },


            },


            axisLine:{


                lineStyle:{


                    color:'#3590ac', // 坐标轴颜色


                }


            },


            splitLine:{


                show: true,


                lineStyle:{


                    color:'#517a9b', // 分割线颜色


                }


            }




        },


        series: [


            {


                data: [820, 932, 901, 934, 1290, 1330, 1320],


                type: 'line',


                // areaStyle: {


                //     color: '#7494ae' // 折线区域颜色


                // },


                itemStyle:{


                    normal:{


                        color:'#3590ac', //折点颜色


                        lineStyle:{


                            color:'#3590ac' //折线颜色


                        }


                    }


                }


            },


            {


                data: [820, 932, 901, 934, 1290, 1330, 1320],


                type: 'line',


                // areaStyle: {


                //     color: '#d55b35' // 折线区域颜色


                // },


                itemStyle:{


                    normal:{


                        color:'#ef550e', //折点颜色


                        lineStyle:{


                            color:'#ec670f' //折线颜色


                        }


                    }


                }


            }


        ]


    };




    function initlineChart() {


        var reportView = lineChartOption;


        $.ajax({


            url: baseUrl+"/monitor/line/charts",


            method: 'GET',


            success: function (res) {


                if (res.code === 200){


                    var json = res.data.rows;


                    reportView.xAxis.data=[getDateFormat(-11), getDateFormat(-10), getDateFormat(-9), getDateFormat(-8), getDateFormat(-7), getDateFormat(-6),


                        getDateFormat(-5), getDateFormat(-4), getDateFormat(-3), getDateFormat(-2), getDateFormat(-1), getDateFormat(-0)];


                    reportView.series[0].data=res.data.rows[0].data;


                    reportView.series[1].data=res.data.rows[1].data;


                    lineCharts.setOption(reportView)


                } else if (res.code === 403){


                    top.location.href = "/";


                } else {


                    console.log(res.msg);


                }


            }


        });


    }




    /***********************************************************************************/


    /************************************* 饼图 *****************************************/


    /***********************************************************************************/




    var pieCharts = echarts.init(document.getElementById('pie-charts'));


    var pieChartOption = {


        // animation: false,


        grid: {


            top: '0%',


            left: '0%',


            right: '0%',


            bottom: '0%',


            containLabel: false,


        },


        tooltip: {


            trigger: 'item',


            formatter: '{a} <br/>{b}: {c} ({d}%)'


        },


        legend: {


            orient: 'vertical',


            left: 10,


            data: ['在库', '空']


        },


        series: [


            {


                name: '访问来源',


                type: 'pie',


                radius: ['25%', '70%'],


                avoidLabelOverlap: false,


                label: {


                    show: false,


                    position: 'center'


                },


                emphasis: {


                    label: {


                        show: false,


                        fontSize: '50',


                        fontWeight: 'bold'


                    }


                },


                labelLine: {


                    show: false


                },


                data: [


                    {value: 1, name: '在库'},


                    {value: 1, name: '空'},


                    {value: 1, name: '使用'},


                    {value: 1, name: '禁用'},


                ],


                itemStyle: {


                    emphasis: {


                        shadowBlur: 10,


                        shadowOffsetX: 0,


                        shadowColor: 'rgba(0, 0, 0, 0.5)'


                    },


                    normal:{


                        color:function(params) {


                            //自定义颜色


                            let colorList = [


                                '#28b9a2', '#69d7fc', '#fcbf5d',


                            ];


                            return colorList[params.dataIndex]


                        }


                    }


                }


            }


        ]


    };


    // 饼图加载


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




                    layui.element.progress('used-progress', res.data.usedPr + '%');


                } else if (res.code === 403){


                    top.location.href = "/";


                } else {


                    layer.msg(res.msg);


                }


            }


        });


    }




    // eCharts 跟随窗口改变


    window.onresize = function(){


        lineCharts.resize();


        pieCharts.resize();


    }






</script>


</html>