#托盘码下架

zjj

2023-11-03 a546b70a863e44c2e8735b3cfc9da45a781b735f

 src/main/webapp/views/home/console.html

@@ -31,11 +31,15 @@
            display: inline-block;
            width: 49%;
        }
        .chart-elem div {
            padding-top: 15px;
            padding-bottom: 5px;
        }
        .chart-elem:first-child {
            padding: 0 50px;
        }
        .chart-elem:last-child {
            padding-left: 20px;
            padding: 0 50px;
            border-left: 1px solid rgba(0,0,0,.1);
        }
        /*表格工具栏*/
@@ -88,7 +92,25 @@
<!--报表数据-->
<div class="home-elem charts-contain">
    <div class="chart-elem">
        <div id="pie"></div>
        <div class="layui-tab layui-tab-card" style="width: 100%">
            <ul class="layui-tab-title">
                <li class="layui-this">总计</li>
                <li>A区</li>
                <li>B区</li>
                <li>C区</li>
                <li>D区</li>
                <li>E区</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show" id="pie" style="width: 95%"></div>
                <div class="layui-tab-item" id="pie2" style="width: 95%"></div>
                <div class="layui-tab-item" id="pie3" style="width: 95%"></div>
                <div class="layui-tab-item" id="pie4" style="width: 95%"></div>
                <div class="layui-tab-item" id="pie5" style="width: 95%"></div>
                <div class="layui-tab-item" id="pie6" style="width: 95%"></div>
            </div>
        </div>
<!--        <div id="pie"></div>-->
    </div>
    <div class="chart-elem">
        <div id="line"></div>
@@ -105,7 +127,20 @@
</body>
<script>
    pieCharts();
    pieACharts();
    pieBCharts();
    pieCCharts();
    pieDCharts();
    pieECharts();
    lineCharts();
    layui.use('element', function(){
        var element = layui.element;

        //一些事件触发
        element.on('tab(demo)', function(data){
            console.log(data);
        });
    });
    // 饼图
    function pieCharts(){
        $.ajax({
@@ -127,7 +162,7 @@
                    text: '库位使用比例',
                    margin:1,
                    style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                    y: 20
                    y: 5
                };
                var tooltip = {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
@@ -170,6 +205,318 @@
        });
    }

    function pieACharts(){
        $.ajax({
            url:baseUrl+'/console/loc/pieA/charts',
            headers: {'token': localStorage.getItem('token')},
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            crossDomain: true,
            method: 'POST',
            success:function(res){
                var data = res.data;
                var dataPie=eval(data.rows);
                var chart = {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                };
                var title = {
                    text: '库位使用比例',
                    margin:1,
                    style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                    y: 5
                };
                var tooltip = {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                };
                var plotOptions = {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                };
                var series= [{
                    type: 'pie',
                    name: '库位占比',
                    data: dataPie
                }];
                var loading = {
                    hideDuration: 3,
                    showDuration: 3
                };
                var json = {};
                json.chart = chart;
                json.title = title;
                json.tooltip = tooltip;
                json.series = series;
                json.plotOptions = plotOptions;
                json.loading = loading;
                json.credits = {enabled: false};
                $('#pie2').highcharts(json);

            },
            error:function(){
            }
        });
    }
    function pieBCharts(){
        $.ajax({
            url:baseUrl+'/console/loc/pieB/charts',
            headers: {'token': localStorage.getItem('token')},
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            crossDomain: true,
            method: 'POST',
            success:function(res){
                var data = res.data;
                var dataPie=eval(data.rows);
                var chart = {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                };
                var title = {
                    text: '库位使用比例',
                    margin:1,
                    style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                    y: 5
                };
                var tooltip = {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                };
                var plotOptions = {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                };
                var series= [{
                    type: 'pie',
                    name: '库位占比',
                    data: dataPie
                }];
                var loading = {
                    hideDuration: 3,
                    showDuration: 3
                };
                var json = {};
                json.chart = chart;
                json.title = title;
                json.tooltip = tooltip;
                json.series = series;
                json.plotOptions = plotOptions;
                json.loading = loading;
                json.credits = {enabled: false};
                $('#pie3').highcharts(json);

            },
            error:function(){
            }
        });
    }
    function pieCCharts(){
        $.ajax({
            url:baseUrl+'/console/loc/pieC/charts',
            headers: {'token': localStorage.getItem('token')},
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            crossDomain: true,
            method: 'POST',
            success:function(res){
                var data = res.data;
                var dataPie=eval(data.rows);
                var chart = {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                };
                var title = {
                    text: '库位使用比例',
                    margin:1,
                    style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                    y: 5
                };
                var tooltip = {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                };
                var plotOptions = {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                };
                var series= [{
                    type: 'pie',
                    name: '库位占比',
                    data: dataPie
                }];
                var loading = {
                    hideDuration: 3,
                    showDuration: 3
                };
                var json = {};
                json.chart = chart;
                json.title = title;
                json.tooltip = tooltip;
                json.series = series;
                json.plotOptions = plotOptions;
                json.loading = loading;
                json.credits = {enabled: false};
                $('#pie4').highcharts(json);

            },
            error:function(){
            }
        });
    }
    function pieDCharts(){
        $.ajax({
            url:baseUrl+'/console/loc/pieD/charts',
            headers: {'token': localStorage.getItem('token')},
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            crossDomain: true,
            method: 'POST',
            success:function(res){
                var data = res.data;
                var dataPie=eval(data.rows);
                var chart = {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                };
                var title = {
                    text: '库位使用比例',
                    margin:1,
                    style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                    y: 5
                };
                var tooltip = {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                };
                var plotOptions = {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                };
                var series= [{
                    type: 'pie',
                    name: '库位占比',
                    data: dataPie
                }];
                var loading = {
                    hideDuration: 3,
                    showDuration: 3
                };
                var json = {};
                json.chart = chart;
                json.title = title;
                json.tooltip = tooltip;
                json.series = series;
                json.plotOptions = plotOptions;
                json.loading = loading;
                json.credits = {enabled: false};
                $('#pie5').highcharts(json);

            },
            error:function(){
            }
        });
    }
    function pieECharts(){
        $.ajax({
            url:baseUrl+'/console/loc/pieE/charts',
            headers: {'token': localStorage.getItem('token')},
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            crossDomain: true,
            method: 'POST',
            success:function(res){
                var data = res.data;
                var dataPie=eval(data.rows);
                var chart = {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                };
                var title = {
                    text: '库位使用比例',
                    margin:1,
                    style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                    y: 5
                };
                var tooltip = {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                };
                var plotOptions = {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                };
                var series= [{
                    type: 'pie',
                    name: '库位占比',
                    data: dataPie
                }];
                var loading = {
                    hideDuration: 3,
                    showDuration: 3
                };
                var json = {};
                json.chart = chart;
                json.title = title;
                json.tooltip = tooltip;
                json.series = series;
                json.plotOptions = plotOptions;
                json.loading = loading;
                json.credits = {enabled: false};
                $('#pie6').highcharts(json);

            },
            error:function(){
            }
        });
    }


    // 折线图
    function lineCharts() {
        $.ajax({
@@ -185,7 +532,7 @@
                    text: '日入出库数量',
                    margin: 1,
                    style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                    y: 20
                    y: 5
                };
                var xAxis = {
                    categories: [getDate(-11), getDate(-10), getDate(-9), getDate(-8), getDate(-7), getDate(-6),
@@ -231,7 +578,7 @@
    var pageCurr;
    function getCol() {
        var cols = [
            {field: 'appe_time', title: '入库时间', align: 'center', width: 200}
            {field: 'appeTime$', title: '入库时间', align: 'center', width: 200}
            ,{field: 'stay_time', align: 'center',title: '滞留天数'}
            ,{field: 'loc_no', align: 'center',title: '库位号'}
        ];
@@ -326,4 +673,4 @@
        return fmt;
    }
</script>
</html>
</html>