#

zjj

2023-11-02 8d0e66e935ead9bfeb4a822c0fefb512e4bf2c85

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

@@ -92,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>
@@ -109,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({
@@ -174,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({