hxtc-order/public/assets/js/backend/workorder/statistics.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts', 'echarts-theme'], function ($, undefined, Backend, Table, Form, Echarts, undefined) {

    var Controller = {
        index: function () {

            // 基于准备好的dom，初始化echarts实例
            var trend_echart = Echarts.init(document.getElementById('trend_echart'), 'walden');

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '',
                    subtext: __('Work order submission trend chart'),
                    x: 'center',
                    bottom: 10,
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "<b>{a}</b> <br/>{b} : {c}单"
                },
                legend: {},
                toolbox: {
                    show: false,
                    feature: {
                        magicType: {show: true, type: ['stack', 'tiled']},
                        saveAsImage: {show: true}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Config.orderTrend.columns
                },
                yAxis: {},
                grid: [{
                    left: 34,
                    top: 30,
                    right: 34,
                    bottom: 60
                }],
                series: [
                    {
                        name: __('New Order Number'),
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            normal: {}
                        },
                        lineStyle: {
                            normal: {
                                width: 1.5
                            }
                        },
                        data: Config.orderTrend.data,
                        markLine: {
                            data: [
                                {type: 'average', name: __('average value')}
                            ]
                        }
                    }]
            };

            // 使用刚指定的配置项和数据显示图表。
            trend_echart.setOption(option);

            $(window).resize(function () {
                trend_echart.resize();
            });

            Form.api.bindevent($("form[role=form]"));

            $(document).on("click", ".btn-filter", function () {
                var label = $(this).text();
                var obj = $(".datetimerange").data("daterangepicker");

                var dates = obj.ranges[label];
                obj.startDate = dates[0];
                obj.endDate = dates[1];

                obj.clickApply();
            });

            $(".datetimerange").on("blur", function () {
                if (!$(this).val()) {
                    return ;
                }
                Fast.api.ajax({
                    url: 'workorder/statistics/index',
                    data: {date: $(this).val()}
                }, function (data) {
                    trend_echart.setOption({
                        xAxis: {
                            data: data.columns
                        },
                        series: [{
                            name: __('New Order Number'),
                            data: data.data
                        }]
                    });
                    $("#number").text(data.sum);
                    $.each(data, function (i, j) {
                        if ($("#" + i).size() > 0) {
                            $("#" + i).text(j);
                        }
                    });
                    return false;
                });
            });

            $(document).on("click", ".btn-refresh", function () {
                $(".datetimerange").trigger("blur");
            });

            // pie
            var piePleased = Echarts.init(document.getElementById('pie-pleased'), 'walden');
            var option = {
                title: {
                    text: __('Percentage of satisfaction'),
                    subtext: __('Satisfaction ratio of work order solution'),
                    x: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: [__('star 0'), __('star 1'), __('star 2'), __('star 3'), __('star 4'), __('Not evaluated'), __('No data available')]
                },
                series: [
                    {
                        name: __('Percentage of satisfaction'),
                        type: 'pie',
                        center: ['50%', '50%'],
                        radius: [0, '30%'],
                        label: {
                            position: 'inner'
                        },
                        data: Config.stars
                    },
                    {
                        name: __('Percentage of satisfaction'),
                        type: 'pie',
                        radius: ['40%', '55%'],
                        data: Config.stars
                    },
                ]
            };
            piePleased.setOption(option);

            var pieSolve = Echarts.init(document.getElementById('pie-solve'), 'walden');
            var option = {
                title: {
                    text: __('Proportion of solution rate'),
                    subtext: __('Proportion of work order problem solving rate'),
                    x: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: [__('resolved'), __('unresolved'), __('Not evaluated'), __('No data available')]
                },
                series: [
                    {
                        name: __('Proportion of solution rate'),
                        type: 'pie',
                        center: ['50%', '50%'],
                        radius: [0, '30%'],
                        label: {
                            position: 'inner'
                        },
                        data: Config.solved
                    },
                    {
                        name: __('Proportion of solution rate'),
                        type: 'pie',
                        radius: ['40%', '55%'],
                        data: Config.solved
                    },
                ]
            };
            pieSolve.setOption(option);
        }
    };
    return Controller;
});