define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts','echarts-theme', 'template', 'addtabs', 'moment','citypicker','cascader'], function ($, undefined, Backend, Table, Form, echarts, undefined, Template, Datatable, Moment) { var Controller = { index: function () { //绑定事件 Controller.api.datepicker(); Controller.api.areapicker(); $('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/item/list', toolbar: '#toolbar1', sortName: 'id', search: false, commonSearch: false, visible: false, showToggle: false, showColumns: false, showExport: true, searchFormVisible: true, columns: [ [ {field: 'id', title: __('ID'),visible:true,operate: false}, {field: 'name', title: '项目类型', operate: false}, {field: 'total', title: __('成效额(￥)'), operate: false}, {field: 'performance', title: __('总业绩(￥)'), operate: false}, {field: 'count_num', title: __('总订单数'), operate: false}, {field: 'performance_rate', title: __('利润率(%)'), operate: false}, {field: 'trans_rate', title: __('转化率(%)'), operate: false}, {field: 'cash_value', title: __('变现值'), operate: false}, {field: 'performance_avg', title: __('客单利润(￥)'), operate: false}, {field: 'total_avg', title: __('客单价(￥)'), operate: false}, {field: 'avg_time_diff', title: __('派单时效(小时)'), operate: false}, {field: 'cost_total', title: __('总成本(￥)'), operate: false}, {field: 'finish_num', title: __('完单数'), operate: false}, {field: 'refund_count', title: __('退款单数'), operate: false}, {field: 'refund_total', title: __('退款金额(￥)'), operate: false}, ] ] }); // 为表格2绑定事件 Table.api.bindevent(table2); setTimeout(function () { var $city = $('#select_city'); if ($city.data('citypicker')) { $city.citypicker('destroy'); } $city.citypicker(); $city.off("cp:updated").on("cp:updated", function () { var citypicker = $(this).data("citypicker"); var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province"); $("#select_area_id").val(code); }); }, 500); } }); // 触发 tab 后发起 ajax 获取图表数据 $('ul.nav-tabs li.active a[data-toggle="tab"]').on("shown.bs.tab", function () { Controller.api.getChartData(); }); // 手动触发一次激活 tab 的 shown.bs.tab Controller.api.getChartData(); // 绑定查询按钮的点击事件 $('#filter-btn').on('click', function () { Controller.api.getChartData(); }); $('#filter-btn-table').on('click', function () { const area_id = $('#select_area_id').val(); const range = $('#daterange-table').val(); const source1 = $('#source').val(); const item_id = $('#item_id').val(); let data = ''; if (area_id !== '' ){ data += 'area_id=' + area_id+'&'; } if (range !== ''){ data += 'range=' + range+'&'; } if (source1!== ''){ data += 'source=' + source1+'&'; } if (item_id !== '' && item_id !== 'undefined'){ data +='item_id=' + item_id + '&'; } // data = encodeURIComponent(data); $("#table2").bootstrapTable('refresh',{ url:'statistics/item/list?' + data, }); }); /* var _data = items; $('#select_item').zdCascader({ data: _data, onChange: function ($this, data, allPathData) { // console.log(data,allPathData); $('#select_item_id').val(data.value); }, clear: true, clickParent: true });*/ }, add: function () { Controller.api.bindevent(); }, edit: function () { Controller.api.bindevent(); }, aftersales: function () { Controller.api.bindevent(); }, api: { bindevent: function () { Form.api.bindevent($("form[role=form]")); }, chart(chartData) { const option = { tooltip: { trigger: 'axis', axisPointer: {type: 'shadow'} }, legend: { data: chartData.series.map(s => s.name) }, xAxis: { type: 'category', data: chartData.xAxis }, yAxis: [ {type: 'value', name: '金额 (¥)'}, {type: 'value', name: '比率 (%)'} ], series: chartData.series }; // 初始化图表 const myChart = echarts.init(document.getElementById('bar-chart')); myChart.setOption(option); // 监听窗口大小变化，自动重新绘制图表 window.addEventListener('resize', function () { myChart.resize(); }); }, datepicker: function () { 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").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); }); }); }, areapicker: function () { $("#area-table").citypicker(); $("#area-table").on("cp:updated", function() { var citypicker = $(this).data("citypicker"); var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province"); // table.bootstrapTable('refresh',{query: {area_code: code}}); $('#area_id').val(code); }); }, getChartData: function () { // 获取日期范围值 var daterange = $('#daterange').val(); /* var source = $('#source').val(); var city_id = $('#area_id').val(); var item_id = $('#item_id').val(); */ // 构建查询参数 var params = { 'daterange': daterange, /* 'source': source, 'area_id': city_id, 'item_id': item_id,*/ }; $.ajax({ url: "statistics/item/chartData", // type: "POST", dataType: "json", data: params, success: function (response) { Controller.api.chart(response); }, error: function () { console.error("图表数据加载失败"); } }); }, } }; return Controller; });