allocatr/public/assets/js/backend/statistics/dispatcher.js

define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts', 'echarts-theme', 'template','addtabs','moment'], function ($, undefined, Backend, Table, Form,Echarts,undefined,Template,Datatable,Moment) {

    var Controller = {

        index: function () {
            // 初始化表格参数配置
            Table.api.init();

            //绑定事件
           /* $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                var panel = $($(this).attr("href"));
                if (panel.length > 0) {
                    /!*Controller.table[panel.attr("id")].call(this);
                    $(this).on('click', function (e) {
                       // $($(this).attr("href")).find(".btn-refresh").trigger("click");
                    });*!/
                }
                //移除绑定的事件
                $(this).unbind('shown.bs.tab');
            });*/

            //必须默认触发shown.bs.tab事件
            /*$('ul.nav-tabs li.active a[data-toggle="tab"]').trigger("shown.bs.tab");

            var barChart = Echarts.init(document.getElementById('bar-chart'), 'walden');
            var option = {
                legend: {},
                tooltip: {},
                dataset: {
                    source: [
                        ['产品销售', '2015', '2016', '2017'],
                        ['风扇', 43.3, 85.8, 93.7],
                        ['电视机', 83.1, 73.4, 55.1],
                        ['空调', 86.4, 65.2, 82.5],
                        ['冰箱', 72.4, 53.9, 39.1]
                    ]
                },
                xAxis: {type: 'category'},
                yAxis: {},
                // Declare several bar series, each will be mapped
                // to a column of dataset.source by default.
                series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'}
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            barChart.setOption(option);*/

            // 触发 tab 后发起 ajax 获取图表数据
            $('ul.nav-tabs li.active a[data-toggle="tab"]').on("shown.bs.tab", function () {
                getChartData();
            });


            function getChartData(){
                // 获取单选框选中的值
                var timeBy = $('input[name="filter[time_by]"]:checked').val();

                // 获取日期范围值
                var daterange = $('#daterange').val();

                // 构建查询参数
                var params = {
                    'time_by': timeBy,
                    'daterange': daterange
                };

                $.ajax({
                    url: "statistics/dispatcher/chartData", // 替换为你的接口地址
                    type: "POST",
                    dataType: "json",
                    data:params,
                    success: function (response) {
                        // 假设返回的数据结构是
                        // response = {
                        //   source: [
                        //     ['产品销售', '2015', '2016', '2017'],
                        //     ['风扇', 43.3, 85.8, 93.7],
                        //     ...
                        //   ]
                        // }

                        var barChart = Echarts.init(document.getElementById('bar-chart'), 'walden');
                        var option = {
                            legend: {},
                            tooltip: {},
                            dataset: {
                                source: response
                            },
                            xAxis: { type: 'category' },
                            yAxis: {},
                            series: [
                                { type: 'bar' },
                                { type: 'bar' },
                                { type: 'bar' },
                                { type: 'bar' }
                            ]
                        };
                        barChart.setOption(option);
                    },
                    error: function () {
                        console.error("图表数据加载失败");
                    }
                });
            }




            var form = $("#chart-filter");
            var ranges = {};
            ranges[__('Today')] = [Moment().startOf('day'), Moment().endOf('day')];
            ranges[__('Yesterday')] = [Moment().subtract(1, 'days').startOf('day'), Moment().subtract(1, 'days').endOf('day')];
            ranges[__('Last 7 Days')] = [Moment().subtract(6, 'days').startOf('day'), Moment().endOf('day')];
            ranges[__('Last 30 Days')] = [Moment().subtract(29, 'days').startOf('day'), Moment().endOf('day')];
            ranges[__('This Month')] = [Moment().startOf('month'), Moment().endOf('month')];
            ranges[__('Last Month')] = [Moment().subtract(1, 'month').startOf('month'), Moment().subtract(1, 'month').endOf('month')];
            ranges[__('今年')] = [Moment().startOf('year'), Moment().endOf('year')];
            var options = {
                timePicker: false,
                autoUpdateInput: false,
                timePickerSeconds: true,
                timePicker24Hour: true,
                autoApply: true,
                locale: {
                    format: 'YYYY-MM-DD',
                    customRangeLabel: __("Custom Range"),
                    applyLabel: __("Apply"),
                    cancelLabel: __("Clear"),
                },
                ranges: ranges,
            };
            var callback = function (start, end) {
                $(this.element).val(start.format(options.locale.format) + " - " + end.format(options.locale.format));
            };
            require(['bootstrap-daterangepicker'], function () {
                $(".datetimerange", form).each(function () {
                    $(this).on('apply.daterangepicker', function (ev, picker) {
                        callback.call(picker, picker.startDate, picker.endDate);
                        var label = picker.chosenLabel;
                        $(picker.element).data('label', label).trigger("change");
                    });
                    $(this).on('cancel.daterangepicker', function (ev, picker) {
                        $(this).val('');
                    });
                    $(this).daterangepicker($.extend({}, options), callback);
                });
            });

            // 手动触发一次激活 tab 的 shown.bs.tab
            getChartData();
            // 绑定查询按钮的点击事件
            $('#filter-btn').on('click', function() {
                getChartData();
            });
        },
        add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }
    };
    return Controller;
});