257 lines
10 KiB
JavaScript
257 lines
10 KiB
JavaScript
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts','echarts-theme', 'template', 'addtabs', 'moment','citypicker'], 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);
|
|
}
|
|
|
|
});
|
|
// 触发 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();
|
|
var 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 !== ''){
|
|
data +='item_id=' + item_id;
|
|
}
|
|
|
|
// data = encodeURIComponent(data);
|
|
$("#table2").bootstrapTable('refresh',{
|
|
url:'statistics/item/list?' + data,
|
|
});
|
|
});
|
|
|
|
|
|
$("#select_city").on("cp:updated", function () {
|
|
console.log(123);
|
|
var citypicker = $(this).data("citypicker");
|
|
var code = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province");
|
|
console.log(code);
|
|
$("#select_area_id").val(code);
|
|
});
|
|
|
|
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;
|
|
});
|