252 lines
12 KiB
JavaScript
252 lines
12 KiB
JavaScript
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;
|
|
});
|