121 lines
4.1 KiB
HTML
121 lines
4.1 KiB
HTML
<!-- app/templates/statistics/borrow_statistics.html -->
|
|
{% extends "base.html" %}
|
|
|
|
{% block title %}借阅趋势分析 - 统计分析{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/statistics.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/borrow_statistics.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="statistics-container">
|
|
<!-- 页面装饰元素 -->
|
|
<div class="page-decoration left"></div>
|
|
<div class="page-decoration right"></div>
|
|
|
|
<div class="breadcrumb">
|
|
<a href="{{ url_for('statistics.index') }}">统计分析</a> / <span class="current-page">借阅趋势分析</span>
|
|
</div>
|
|
|
|
<h1 class="page-title">借阅趋势分析</h1>
|
|
|
|
<div class="intro-text">
|
|
<p>探索读者的阅读习惯与喜好，发现图书流通的奥秘</p>
|
|
</div>
|
|
|
|
<div class="filter-section">
|
|
<div class="filter-label">时间范围：</div>
|
|
<select id="time-range" class="filter-select">
|
|
<option value="week">最近7天</option>
|
|
<option value="month" selected>最近30天</option>
|
|
<option value="year">最近一年</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="chart-container trend-chart">
|
|
<h3>借阅与归还趋势</h3>
|
|
<div class="chart-decoration left floating"></div>
|
|
<div class="chart-decoration right floating"></div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="trend-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-row">
|
|
<div class="chart-container half">
|
|
<h3>分类借阅分布</h3>
|
|
<div class="chart-wrapper">
|
|
<canvas id="category-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-summary half">
|
|
<h3>借阅概况</h3>
|
|
<div class="stats-grid" id="borrow-summary">
|
|
<!-- 数据将通过JS动态填充 -->
|
|
<div class="loading">
|
|
<div class="loader"></div>
|
|
<span>数据加载中<span class="dot-animation">...</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="insights-container">
|
|
<h3>阅读洞察</h3>
|
|
<div class="insights-content">
|
|
<p>根据当前数据分析，发现读者更喜欢在周末借阅图书，女性读者偏爱文学和艺术类书籍，而男性读者则更关注科技和历史类图书。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="{{ url_for('static', filename='js/borrow_statistics.js') }}"></script>
|
|
<script>
|
|
// 添加动画效果
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 为统计项添加hover效果
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fadeInUp');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.1
|
|
});
|
|
|
|
// 监听所有主要元素
|
|
document.querySelectorAll('.chart-container, .stats-summary, .insights-container').forEach(el => {
|
|
observer.observe(el);
|
|
});
|
|
|
|
// 统计卡片的交互效果
|
|
document.addEventListener('mouseover', function(e) {
|
|
if (e.target.closest('.stats-item')) {
|
|
const item = e.target.closest('.stats-item');
|
|
const items = document.querySelectorAll('.stats-item');
|
|
|
|
items.forEach(i => {
|
|
if (i !== item) {
|
|
i.style.opacity = '0.7';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
document.addEventListener('mouseout', function(e) {
|
|
if (e.target.closest('.stats-item')) {
|
|
document.querySelectorAll('.stats-item').forEach(i => {
|
|
i.style.opacity = '1';
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|