#

zjj

2025-04-14 2310cd72974e2fb7a5ec006c8c615379f5ba0b9a

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

@@ -10,7 +10,7 @@
    <script type="text/javascript" src="../../static/js/common.js"></script>
    <script type="text/javascript" src="../../static/layui/layui.js"></script>
    <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../../static/js/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="../../static/js/echarts/echarts.min.5.4.3.js"></script>
    <script type="text/javascript" src="../../static/js/echarts/highcharts.js"></script>
    <style>
        body {
@@ -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,11 +127,87 @@
</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({
            url:baseUrl+'/console/loc/pie/charts',
            url: baseUrl+'/console/loc/pie/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);

                Highcharts.chart('pie', {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: '库位使用比例',
                        margin:1,
                        style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                        y: 5
                    },
                    credits:{
                        enabled:false
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    legend:{
                        align:'right',
                        labelFormat:'{name}:{y}'
                    },
                    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'
                                }
                            },
                            showInLegend: true,

                        }
                    },
                    series: [{
                        name: '库位占比',
                        colorByPoint: true,
                        data: dataPie
                    }]
                });
            },
            error: function(){
                // 错误处理
            }
        });
    }

    function pieACharts(){
        $.ajax({
            url:baseUrl+'/console/loc/pieA/charts',
            headers: {'token': localStorage.getItem('token')},
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
@@ -118,53 +216,296 @@
            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: 20
                };
                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'
                            }
                Highcharts.chart('pie2', {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: '库位使用比例',
                        margin:1,
                        style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                        y: 5
                    },
                    credits:{
                        enabled:false
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    legend:{
                        align:'right',
                        labelFormat:'{name}:{y}'
                    },
                    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'
                                }
                            },
                            showInLegend: true
                        }
                    }
                };
                var series= [{
                    type: 'pie',
                    name: '库位占比',
                    data: dataPie
                }];

                var json = {};
                json.chart = chart;
                json.title = title;
                json.tooltip = tooltip;
                json.series = series;
                json.plotOptions = plotOptions;
                json.credits = {enabled: false};
                $('#pie').highcharts(json);
                    },
                    series: [{
                        name: '库位占比',
                        colorByPoint: true,
                        data: dataPie
                    }]
                });

            },
            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);
                Highcharts.chart('pie3', {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: '库位使用比例',
                        margin:1,
                        style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                        y: 5
                    },
                    credits:{
                        enabled:false
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    legend:{
                        align:'right',
                        labelFormat:'{name}:{y}'
                    },
                    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'
                                }
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        name: '库位占比',
                        colorByPoint: true,
                        data: dataPie
                    }]
                });

            },
            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);
                Highcharts.chart('pie4', {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: '库位使用比例',
                        margin:1,
                        style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                        y: 5
                    },
                    credits:{
                        enabled:false
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    legend:{
                        align:'right',
                        labelFormat:'{name}:{y}'
                    },
                    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'
                                }
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        name: '库位占比',
                        colorByPoint: true,
                        data: dataPie
                    }]
                });

            },
            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);
                Highcharts.chart('pie5', {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: '库位使用比例',
                        margin:1,
                        style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                        y: 5
                    },
                    credits:{
                        enabled:false
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    legend:{
                        align:'right',
                        labelFormat:'{name}:{y}'
                    },
                    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'
                                }
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        name: '库位占比',
                        colorByPoint: true,
                        data: dataPie
                    }]
                });

            },
            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);
                Highcharts.chart('pie6', {
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: '库位使用比例',
                        margin:1,
                        style: {fontSize: '18px',color: '#777',fontWeight: 'bold'},
                        y: 5
                    },
                    credits:{
                        enabled:false
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    legend:{
                        align:'right',
                        labelFormat:'{name}:{y}'
                    },
                    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'
                                }
                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        name: '库位占比',
                        colorByPoint: true,
                        data: dataPie
                    }]
                });

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


    // 折线图
    function lineCharts() {
@@ -181,7 +522,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),
@@ -204,6 +545,10 @@
                    verticalAlign: 'middle',
                    borderWidth: 0
                };
                var loading = {
                    hideDuration: 3,
                    showDuration: 3
                }
                var series = dataPie;
                var json = {};
                json.title = title;
@@ -211,6 +556,7 @@
                json.yAxis = yAxis;
                json.tooltip = tooltip;
                json.legend = legend;
                json.loading = loading;
                json.series = series;
                json.credits = {enabled: false};
                $('#line').highcharts(json);
@@ -222,7 +568,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: '库位号'}
        ];
@@ -317,4 +663,4 @@
        return fmt;
    }
</script>
</html>
</html>