278 lines
12 KiB
JavaScript
278 lines
12 KiB
JavaScript
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();
|
||
}
|
||
$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);
|
||
});
|
||
|
||
// 手动调整dropdown位置，确保它跟输入框对齐
|
||
var $dropdown = $('.city-picker-dropdown');
|
||
if ($dropdown.length) {
|
||
var offset = $city.offset();
|
||
$dropdown.css({
|
||
top: offset.top + $city.outerHeight() + 2, // +2像素做一点距离
|
||
left: offset.left,
|
||
display: 'block',
|
||
position: 'absolute',
|
||
'z-index': 9999
|
||
});
|
||
}
|
||
}, 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;
|
||
});
|