511 lines
19 KiB
JavaScript
511 lines
19 KiB
JavaScript
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'echarts','echarts-theme'], function ($, undefined, Backend, Table, Form,echarts) {
|
|
|
|
var Controller = {
|
|
dashboard: function () {
|
|
Controller.api.getData();
|
|
Controller.datetime();
|
|
},
|
|
add: function () {
|
|
Controller.api.bindevent();
|
|
},
|
|
edit: function () {
|
|
Controller.api.bindevent();
|
|
},
|
|
api: {
|
|
bindevent: function () {
|
|
Form.api.bindevent($("form[role=form]"));
|
|
},
|
|
|
|
getData:function (){
|
|
// 获取日期范围值
|
|
var daterange = $('#daterange').val();
|
|
|
|
// 构建查询参数
|
|
var params = {
|
|
'daterange': daterange
|
|
};
|
|
|
|
Fast.api.ajax({
|
|
url: 'orderplan/data',
|
|
data: params,
|
|
method:'get'
|
|
}, function (data, ret) {
|
|
Controller.echarts.top(data.top);
|
|
Controller.echarts.order(data.order);
|
|
Controller.echarts.orderdoing(data.order_doing);
|
|
Controller.echarts.ordercount(data.order_count);
|
|
Controller.echarts.orderrank(data.order_rank);
|
|
Controller.echarts.orderItemRank(data.item_rank);
|
|
Controller.echarts.money_line(data.lines);
|
|
Controller.echarts.cancel_order_pie(data.pie.cancel);
|
|
Controller.echarts.item_pie(data.pie.item);
|
|
Controller.echarts.area_pie(data.pie.area);
|
|
Controller.echarts.source_pie(data.pie.source);
|
|
return;
|
|
});
|
|
}
|
|
},
|
|
|
|
datetime:function () {
|
|
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()];
|
|
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);
|
|
});
|
|
});
|
|
// 绑定查询按钮的点击事件
|
|
$('#filter-btn').on('click', function() {
|
|
Controller.api.getData();
|
|
});
|
|
},
|
|
echarts: {
|
|
top: function(data){
|
|
let map = [
|
|
'count','performance','total','worker'
|
|
];
|
|
$('.myplan-num').each(function(index) {
|
|
if (index === 1 || index === 2){
|
|
$(this).html('¥' + data[map[index]]);
|
|
}else {
|
|
$(this).html(data[map[index]]);
|
|
|
|
}
|
|
});
|
|
},
|
|
order: function(data){
|
|
let map = [
|
|
'abnormal','check','auditing','check','review','invoice'
|
|
];
|
|
$('.todo-plan-num').each(function(index) {
|
|
$(this).html(data[map[index]]);
|
|
});
|
|
},
|
|
|
|
orderdoing: function(data){
|
|
const text = `${data.dispatch} / ${data.toget} / ${data.plan} / ${data.doing}`;
|
|
$('.order-count-num ').html(text);
|
|
},
|
|
ordercount: function(data){
|
|
let map = [
|
|
'total',
|
|
'month_total',
|
|
'count',
|
|
'month_count',
|
|
'worker',
|
|
'month_worker',
|
|
'after_sale',
|
|
'month_after_sale',
|
|
'cancel',
|
|
'month_cancel'
|
|
];
|
|
$('.static-text-num').each(function(index) {
|
|
$(this).html(data[map[index]]);
|
|
});
|
|
},
|
|
orderrank: function(data){
|
|
|
|
$('#order_rank .rank-name').each(function(index) {
|
|
$(this).html(data.dispatch[index]?.name ?? '虚位以待');
|
|
});
|
|
$('#order_rank .rank-num').each(function(index) {
|
|
$(this).html((data.dispatch[index]?.count ?? 0) + '单');
|
|
});
|
|
|
|
$('#order_worker .rank-name').each(function(index) {
|
|
$(this).html(data.doing[index]?.name ?? '虚位以待');
|
|
});
|
|
$('#order_worker .rank-num').each(function(index) {
|
|
$(this).html((data.doing[index]?.count ?? 0) + '单');
|
|
});
|
|
|
|
},
|
|
orderItemRank: function(data){
|
|
|
|
$('#hot_item_rank .service-content-title').each(function(index) {
|
|
$(this).html(data.item[index]?.name ?? '虚位以待');
|
|
});
|
|
$('#hot_item_rank .service-content-sub').each(function(index) {
|
|
let text = data.item[index]?.count ?? '';
|
|
if (text !== ''){
|
|
text ='订单' + text + '('+ (data.item[index]?.rate ?? '0') + '%)';
|
|
}
|
|
$(this).html(text);
|
|
});
|
|
|
|
$('#hot_item_rank .progress .bg-pink').each(function(index) {
|
|
let width = data.item[index]?.rate ?? 0;
|
|
$(this).css('width',width+'%');
|
|
});
|
|
|
|
|
|
$('#hot_area_rank .service-content-title').each(function(index) {
|
|
$(this).html(data.area[index]?.name ?? '虚位以待');
|
|
});
|
|
$('#hot_area_rank .service-content-sub').each(function(index) {
|
|
let text = data.area[index]?.count ?? '';
|
|
if (text !== ''){
|
|
text ='订单' + text + '('+ (data.area[index]?.rate ?? '0') + '%)';
|
|
}
|
|
$(this).html(text);
|
|
});
|
|
|
|
$('#hot_area_rank .progress .bg-pink').each(function(index) {
|
|
let width = data.area[index]?.rate ?? 0;
|
|
$(this).css('width',width+'%');
|
|
});
|
|
|
|
},
|
|
item_pie: function(data){
|
|
// 基本的饼图配置
|
|
var myChart = echarts.init(document.getElementById('item_pie'));
|
|
var option = {
|
|
title: {
|
|
text: '订单项目类型',
|
|
subtext: '',
|
|
left: 'right'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
color: [
|
|
"#18d1b1",
|
|
"#3fb1e3",
|
|
"#626c91",
|
|
"#a0a7e6",
|
|
"#c4ebad",
|
|
"#96dee8"
|
|
],
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
type: 'scroll', // 启用分页
|
|
data: data.map(item => item.name)
|
|
},
|
|
series: [
|
|
{
|
|
name: '服务项目',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
center: ['50%', '60%'],
|
|
data: data,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
|
|
// 监听窗口大小变化，自动重新绘制图表
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
area_pie: function(data){
|
|
// 基本的饼图配置
|
|
var myChart = echarts.init(document.getElementById('area_pie'));
|
|
|
|
var option = {
|
|
title: {
|
|
text: '订单区域',
|
|
subtext: '',
|
|
left: 'right'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
color: [
|
|
"#18d1b1",
|
|
"#3fb1e3",
|
|
"#626c91",
|
|
"#a0a7e6",
|
|
"#c4ebad",
|
|
"#96dee8"
|
|
],
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
type: 'scroll', // 启用分页
|
|
data: data.map(item => item.name)
|
|
},
|
|
series: [
|
|
{
|
|
name: '订单区域',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
center: ['50%', '60%'],
|
|
data: data,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
|
|
// 监听窗口大小变化，自动重新绘制图表
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
source_pie: function(data){
|
|
// 基本的饼图配置
|
|
var myChart = echarts.init(document.getElementById('source_pie'));
|
|
|
|
var option = {
|
|
title: {
|
|
text: '来源店铺',
|
|
subtext: '',
|
|
left: 'right'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
color: [
|
|
"#18d1b1",
|
|
"#3fb1e3",
|
|
"#626c91",
|
|
"#a0a7e6",
|
|
"#c4ebad",
|
|
"#96dee8"
|
|
],
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
type: 'scroll', // 启用分页
|
|
data: data.map(item => item.name)
|
|
},
|
|
series: [
|
|
{
|
|
name: '来源店铺',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
center: ['50%', '60%'],
|
|
data: data,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
|
|
// 监听窗口大小变化，自动重新绘制图表
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
cancel_order_pie: function(data){
|
|
// 基本的饼图配置
|
|
var myChart = echarts.init(document.getElementById('cancel_order_pie'));
|
|
|
|
var option = {
|
|
title: {
|
|
text: '异常订单占比',
|
|
subtext: '',
|
|
left: 'right'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
},
|
|
color: [
|
|
"#18d1b1",
|
|
"#3fb1e3",
|
|
"#626c91",
|
|
"#a0a7e6",
|
|
"#c4ebad",
|
|
"#96dee8"
|
|
],
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
type: 'scroll', // 启用分页
|
|
data: data.map(item => item.name)
|
|
},
|
|
series: [
|
|
{
|
|
name: '访问来源',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
center: ['50%', '60%'],
|
|
data: data,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
|
|
// 监听窗口大小变化，自动重新绘制图表
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
money_line: function (data){
|
|
var myChart = echarts.init(document.getElementById('money_line'));
|
|
|
|
var option = {
|
|
title: {
|
|
text: '总业绩',
|
|
subtext: '数据',
|
|
left: 'right'
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
color: [
|
|
"#18d1b1",
|
|
"#3fb1e3",
|
|
"#626c91",
|
|
"#a0a7e6",
|
|
"#c4ebad",
|
|
"#96dee8"
|
|
],
|
|
legend: {
|
|
data: ['订单量', '营销额', '收益','收益率'],
|
|
left: 'left'
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: data.xAxis,
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '金额',
|
|
position: 'left'
|
|
},
|
|
{
|
|
type: 'value',
|
|
name: '单量/百分比',
|
|
position: 'right',
|
|
min: 0, // 设置右侧y轴的最小值
|
|
max: 100 // 设置右侧y轴的最大值
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '订单量',
|
|
type: 'bar',
|
|
data: data.series.count,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
yAxisIndex: 1,
|
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
|
},
|
|
{
|
|
name: '营销额',
|
|
type: 'bar',
|
|
data: data.series.total,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
|
},
|
|
{
|
|
name: '收益',
|
|
type: 'bar',
|
|
data: data.series.performance,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
|
},
|
|
{
|
|
name: '收益率',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: data.series.rate,
|
|
smooth: true,
|
|
lineStyle: {
|
|
color: '#ff6600'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
|
|
// 监听窗口大小变化，自动重新绘制图表
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
}
|
|
|
|
};
|
|
return Controller;
|
|
});
|