298 lines
13 KiB
JavaScript
Executable File
298 lines
13 KiB
JavaScript
Executable File
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.bindevent()
|
|
Controller.api.datepicker()
|
|
Controller.api.getChartData()
|
|
$('#filter-btn').on('click', function () {
|
|
Controller.api.getChartData();
|
|
});
|
|
|
|
// 页面加载完成后更新数据
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 模拟数据实时更新（可选）
|
|
setInterval(() => {
|
|
Controller.api.getChartData()
|
|
}, 60000); // 每分钟更新一次时间
|
|
});
|
|
|
|
// 添加卡片点击效果
|
|
document.querySelectorAll('.stat-card').forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
this.style.transform = 'scale(0.95)';
|
|
setTimeout(() => {
|
|
this.style.transform = '';
|
|
}, 150);
|
|
});
|
|
});
|
|
},
|
|
api: {
|
|
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,*/
|
|
};
|
|
|
|
Fast.api.ajax({
|
|
url: "dashboard/getData",
|
|
type: "POST",
|
|
dataType: "json",
|
|
data: params,
|
|
},function (response) {
|
|
document.getElementById('updateTime').textContent = new Date().toLocaleString('zh-CN');
|
|
Controller.api.updateDashboard(response.top);
|
|
Controller.api.money_line(response.lines);
|
|
return false;
|
|
},function () {
|
|
console.error("图表数据加载失败");
|
|
});
|
|
},
|
|
bindevent: function () {
|
|
Form.api.bindevent($("form[role=form]"));
|
|
},
|
|
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);
|
|
});
|
|
});
|
|
},
|
|
|
|
// 格式化金额
|
|
formatCurrency: function (amount) {
|
|
return new Intl.NumberFormat('zh-CN', {
|
|
style: 'currency',
|
|
currency: 'CNY',
|
|
minimumFractionDigits: 0,
|
|
maximumFractionDigits: 0
|
|
}).format(parseFloat(amount));
|
|
},
|
|
|
|
// 计算百分比
|
|
calculatePercentage: function (part, total) {
|
|
return ((parseFloat(part) / parseFloat(total)) * 100).toFixed(2) + '%';
|
|
},
|
|
money_line: function (data){
|
|
var myChart = echarts.init(document.getElementById('money_line'));
|
|
|
|
var option = {
|
|
title: {
|
|
text: '总业绩',
|
|
subtext: '数据',
|
|
left: 'left'
|
|
},
|
|
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'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '订单量',
|
|
type: 'line',
|
|
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: 'line',
|
|
data: data.series.new_count,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
yAxisIndex: 1,
|
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
|
},
|
|
{
|
|
name: '新车营销额',
|
|
type: 'bar',
|
|
data: data.series.new_total,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
|
},
|
|
{
|
|
name: '租车单量',
|
|
type: 'line',
|
|
data: data.series.rent_count,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
yAxisIndex: 1,
|
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
|
},
|
|
{
|
|
name: '租车营销额',
|
|
type: 'line',
|
|
data: data.series.rent_total,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
|
},
|
|
{
|
|
name: '二手车单量',
|
|
type: 'line',
|
|
data: data.series.old_count,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
yAxisIndex: 1,
|
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
|
},
|
|
{
|
|
name: '二手车营销额',
|
|
type: 'bar',
|
|
data: data.series.old_total,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barGap: '10%' // 调整柱状图1与柱状图2之间的间距
|
|
},
|
|
]
|
|
};
|
|
|
|
myChart.setOption(option);
|
|
|
|
// 监听窗口大小变化，自动重新绘制图表
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
// 更新界面数据
|
|
updateDashboard: function (data) {
|
|
// 基础数据更新
|
|
document.getElementById('newCarCount').textContent = data.new_car + ' 辆';
|
|
document.getElementById('rentCarCount').textContent = data.rent_car + ' 辆';
|
|
document.getElementById('oldCarCount').textContent = data.old_car + ' 辆';
|
|
|
|
document.getElementById('newSalesCount').textContent = data.new_count + ' 辆';
|
|
document.getElementById('rentOrderCount').textContent = data.rent_count + ' 单';
|
|
document.getElementById('oldSalesCount').textContent = data.old_count + ' 辆';
|
|
|
|
document.getElementById('newSalesAmount').textContent = Controller.api.formatCurrency(data.new_sum);
|
|
document.getElementById('rentIncome').textContent = Controller.api.formatCurrency(data.rent_sum);
|
|
document.getElementById('oldSalesAmount').textContent = Controller.api.formatCurrency(data.old_sum);
|
|
document.getElementById('totalRevenue').textContent = Controller.api.formatCurrency(data.total_price);
|
|
|
|
// 占比计算
|
|
document.getElementById('newCarPercent').textContent = Controller.api.calculatePercentage(data.new_sum, data.total_price);
|
|
document.getElementById('rentCarPercent').textContent = Controller.api.calculatePercentage(data.rent_sum, data.total_price);
|
|
|
|
// 汇总数据
|
|
const totalCars = data.new_car + data.rent_car + data.old_car;
|
|
const totalOrders = data.new_count + data.rent_count + data.old_count;
|
|
const avgOrderValue = totalOrders > 0 ? parseFloat(data.total_price) / totalOrders : 0;
|
|
const inventoryUtilization = (totalOrders / totalCars * 100).toFixed(1);
|
|
|
|
document.getElementById('totalCars').textContent = totalCars;
|
|
document.getElementById('totalOrders').textContent = totalOrders;
|
|
document.getElementById('avgOrderValue').textContent = Controller.api.formatCurrency(avgOrderValue);
|
|
document.getElementById('inventoryUtilization').textContent = inventoryUtilization + '%';
|
|
|
|
// 更新时间
|
|
document.getElementById('updateTime').textContent = new Date().toLocaleString('zh-CN');
|
|
},
|
|
|
|
|
|
}
|
|
};
|
|
|
|
return Controller;
|
|
});
|