127 lines
4.1 KiB
JavaScript
127 lines
4.1 KiB
JavaScript
// app/static/js/overdue_analysis.js
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
let overdueRangeChart = null;
|
|
let overdueStatusChart = null;
|
|
|
|
// 初始加载
|
|
loadOverdueStatistics();
|
|
|
|
function loadOverdueStatistics() {
|
|
// 调用API获取数据
|
|
fetch('/statistics/api/overdue-statistics')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
updateOverdueCards(data);
|
|
updateOverdueRangeChart(data.overdue_ranges);
|
|
updateOverdueStatusChart(data);
|
|
})
|
|
.catch(error => {
|
|
console.error('加载逾期统计数据失败:', error);
|
|
});
|
|
}
|
|
|
|
function updateOverdueCards(data) {
|
|
document.getElementById('total-borrows').querySelector('.card-value').textContent = data.total_borrows;
|
|
document.getElementById('current-overdue').querySelector('.card-value').textContent = data.current_overdue;
|
|
document.getElementById('returned-overdue').querySelector('.card-value').textContent = data.returned_overdue;
|
|
document.getElementById('overdue-rate').querySelector('.card-value').textContent = data.overdue_rate + '%';
|
|
}
|
|
|
|
function updateOverdueRangeChart(rangeData) {
|
|
// 销毁旧图表
|
|
if (overdueRangeChart) {
|
|
overdueRangeChart.destroy();
|
|
}
|
|
|
|
if (!rangeData || rangeData.length === 0) {
|
|
return;
|
|
}
|
|
|
|
// 准备图表数据
|
|
const labels = rangeData.map(item => item.range);
|
|
const counts = rangeData.map(item => item.count);
|
|
|
|
// 创建图表
|
|
const ctx = document.getElementById('overdue-range-chart').getContext('2d');
|
|
overdueRangeChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: '逾期数量',
|
|
data: counts,
|
|
backgroundColor: [
|
|
'rgba(255, 206, 86, 0.7)',
|
|
'rgba(255, 159, 64, 0.7)',
|
|
'rgba(255, 99, 132, 0.7)',
|
|
'rgba(255, 0, 0, 0.7)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: {
|
|
display: true,
|
|
text: '数量'
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: '逾期时长分布'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateOverdueStatusChart(data) {
|
|
// 销毁旧图表
|
|
if (overdueStatusChart) {
|
|
overdueStatusChart.destroy();
|
|
}
|
|
|
|
// 准备图表数据
|
|
const statusLabels = ['当前逾期', '历史逾期', '正常'];
|
|
const statusData = [
|
|
data.current_overdue,
|
|
data.returned_overdue,
|
|
data.total_borrows - data.current_overdue - data.returned_overdue
|
|
];
|
|
|
|
// 创建图表
|
|
const ctx = document.getElementById('overdue-status-chart').getContext('2d');
|
|
overdueStatusChart = new Chart(ctx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: statusLabels,
|
|
datasets: [{
|
|
data: statusData,
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.7)',
|
|
'rgba(255, 206, 86, 0.7)',
|
|
'rgba(75, 192, 192, 0.7)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: '借阅状态分布'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|