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 () { //绑定事件 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { var $targetPanel = $($(this).attr("href")); var tabVal = $(this).data('val'); if (tabVal === 'second') { // 当切换到“统计列表”时，自动刷新表格 //$targetPanel.find(".btn-refresh").trigger("click"); // 初始化表格参数配置 Table.api.init(); // 表格2 var table2 = $("#table2"); table2.bootstrapTable({ url: 'statistics/worker/index' + location.search, toolbar: '#toolbar1', sortName: 'id', search: false, commonSearch:true, visible: false, showToggle: false, showColumns: false, showExport: true, searchFormVisible:true, columns: [ [ //{field: 'id', title: __('Id')}, {field: 'id', title: __('ID'),visible:true}, {field: 'name', title: __('姓名'),operate: "like"}, {field: 'tel', title: __('电话'),operate: "like"}, {field: 'area2.name', title: __('城市'),operate: false}, {field: 'star', title: __('评分'),operate: false}, {field: 'performance', title: __('总业绩(￥)'), operate: false}, {field: 'get_count', title: __('接单数'),operate: false,sortable:true}, {field: 'finish_num', title: __('完单数'),operate: false,sortable:true}, {field: 'cost', title: __('收入(￥)'), operate: false,sortable:true}, {field: 'performance_rate', title: __('利润率(%)'), operate: false}, {field: 'trans_rate', title: __('转化率(%)'), operate: false}, {field: 'cash_value', title: __('变现值'), operate: false}, {field: 'refuse_rate', title: __('拒单率(%)'), operate: false}, {field: 'arrive_rate', title: __('上门率(%)'), operate: false}, {field: 'good_rate', title: __('好评率(%)'), operate: false}, //{field: 'refund_total', title: __('退款金额(￥)'), operate: false}, {field: 'refund_count', title: __('退款单数'), operate: false,sortable:true}, {field: 'avg_time_diff', title: __('联系时效(小时)'), operate: false}, //{field: 'admin_user', title: __('派单员'),operate: "LIKE",visible:false}, //{field: 'city_name', title: __('城市'),operate: "LIKE",visible:false}, //{field: 'city_name', title: __('城市'),operate: "LIKE",visible:false}, /*{field: 'area', title: __('城市'), searchList: function (column) { return Template('sourcetpl', {}); } }, */ {field: 'area2.merge_name', title: __('地区'),operate: 'LIKE',visible:false}, {field: 'daterange', title: __('时间筛选'), addclass:'datetimerange', autocomplete:false, operate: "RANGE", datetimeFormat: "YYYY-MM-DD", //defaultValue:today()+' - '+today(), data:'autocomplete="off" data-local={"format":"YYYY-MM-DD"}', visible:false, defaultValue: Config.default_daterange }, {field: 'operate', title: __('Operate'), table: table2, events: Table.api.events.operate, formatter: Table.api.formatter.operate, buttons: [ { name: 'aftersales', text:"售后列表", title:"售后列表", icon: 'fa fa-list', url: function(row){ return 'aftersales/aftersale/index?from=3&man_id='+row.id; }, extend: 'data-toggle="tooltip" data-container="body"', classname: 'btn btn-xs btn-default btn-dialog', visible:function(row){ return true; } }, ] } ] ] }); // 为表格2绑定事件 Table.api.bindevent(table2); } }); // 触发 tab 后发起 ajax 获取图表数据 $('ul.nav-tabs li.active a[data-toggle="tab"]').on("shown.bs.tab", function () { getChartData(); }); function getChartData(){ return; // 获取单选框选中的值 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], // ... // ] // } const headers = response[0]; const units = ['元', '%', '%', '']; // 如果你有单位可以一起拼接 var barChart = Echarts.init(document.getElementById('bar-chart'), 'walden'); var option = { legend: {}, tooltip: {}, dataset: { source: response }, xAxis: { type: 'category', axisLabel: { show: true // 隐藏“系统” }, axisTick: { show: false }, axisLine: { show: false } }, yAxis: {}, series: headers.slice(1).map((title, i) => ({ type: 'bar', label: { show: true, position: 'top', formatter: function (params) { const value = params.value[i + 1]; // 因为第一列是“派单员” const unit = units[i] || ''; return `${value} ${unit}`; // 显示数值 + 单位 } }, itemStyle: { borderRadius: 4 } })) }; 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(); }, aftersales: function () { Controller.api.bindevent(); }, api: { bindevent: function () { Form.api.bindevent($("form[role=form]")); } } }; return Controller; });