#

luxiaotao1123

2020-11-17 7137fd8b37b0ba1248a6535ef05b7537965e7b50

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

@@ -13,6 +13,8 @@
    <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%;
@@ -91,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监控平台
@@ -294,7 +296,7 @@
                            在库
                        </div>
                        <div class="elem-footer">
                            3,300
                            <span id="stock-count">0</span>
                        </div>
                    </div>
                    <div class="top-footer-elem">
@@ -304,7 +306,7 @@
                            空库
                        </div>
                        <div class="elem-footer">
                            161
                            <span id="empty-count">0</span>
                        </div>
                    </div>
                    <div class="top-footer-elem">
@@ -314,7 +316,7 @@
                            使用中
                        </div>
                        <div class="elem-footer">
                            666
                            <span id="used-count">0</span>
                        </div>
                    </div>
                </div>
@@ -327,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>
@@ -338,7 +340,7 @@
                    <div class="bar-container">
                        <div class="bar-proportion"><span>实际使用</span></div>
                    </div>
                    <i class="bar-container-count">7777<span>个</span></i>
                    <i class="bar-container-count"><span id="used">0</span></i>
                </div>
            </div>
        </div>
@@ -365,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%',
@@ -432,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%',
@@ -452,7 +486,7 @@
        legend: {
            orient: 'vertical',
            left: 10,
            data: ['1', '2', '3']
            data: ['在库', '空']
        },
        series: [
            {
@@ -475,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: {
@@ -498,7 +533,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>