442 lines
19 KiB
HTML
442 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>体质数据统计分析</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#2563EB', // 专业蓝
|
|
secondary: '#10B981', // 健康绿
|
|
accent: '#F59E0B', // 活力橙
|
|
warning: '#EF4444',
|
|
light: '#F3F4F6',
|
|
dark: '#1F2937'
|
|
},
|
|
fontFamily: {
|
|
sans: ['PingFang SC', 'Microsoft YaHei', 'sans-serif'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.card {
|
|
@apply bg-white rounded-xl shadow-sm p-4 transition-all duration-300 hover:shadow-md;
|
|
}
|
|
.stat-card {
|
|
@apply bg-white rounded-xl shadow-sm p-4 transition-all duration-300 hover:shadow-md border-l-4;
|
|
}
|
|
.progress-bar {
|
|
@apply h-2 rounded-full bg-gray-200 overflow-hidden;
|
|
}
|
|
.progress-value {
|
|
@apply h-full rounded-full transition-all duration-700;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-light text-dark font-sans min-h-screen flex flex-col">
|
|
<!-- 顶部导航栏 -->
|
|
<header class="bg-primary text-white py-4 px-5 sticky top-0 z-10 shadow-md">
|
|
<div class="flex items-center justify-between">
|
|
<button id="back-btn" class="text-white">
|
|
<i class="fa fa-arrow-left text-xl"></i>
|
|
</button>
|
|
<h1 class="text-lg font-bold">体质数据统计分析</h1>
|
|
<div class="w-6"></div> <!-- 占位元素，保持标题居中 -->
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 筛选条件 -->
|
|
<div class="bg-white px-5 py-3 border-b border-gray-100">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm text-gray-500">统计周期:</span>
|
|
<select class="text-sm border-none bg-transparent focus:outline-none text-primary font-medium">
|
|
<option>近30天</option>
|
|
<option>本学期</option>
|
|
<option>上月</option>
|
|
<option>自定义</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm text-gray-500">班级:</span>
|
|
<select class="text-sm border-none bg-transparent focus:outline-none text-primary font-medium">
|
|
<option>全部班级</option>
|
|
<option>三年级(1)班</option>
|
|
<option>四年级(2)班</option>
|
|
<option>五年级(3)班</option>
|
|
<option>六年级(1)班</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="flex-1 overflow-y-auto">
|
|
<!-- 核心指标卡片 -->
|
|
<div class="px-5 py-4">
|
|
<h2 class="text-sm font-medium text-gray-500 mb-3">核心指标</h2>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="stat-card border-primary bg-primary/5">
|
|
<p class="text-xs text-gray-500">平均打卡完成率</p>
|
|
<h3 class="text-2xl font-bold mt-1 text-primary">78.5%</h3>
|
|
<div class="flex items-center mt-2 text-xs">
|
|
<span class="text-secondary flex items-center">
|
|
<i class="fa fa-arrow-up mr-1"></i> 4.2%
|
|
</span>
|
|
<span class="text-gray-500 ml-2">较上周</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card border-secondary bg-secondary/5">
|
|
<p class="text-xs text-gray-500">体质提升幅度</p>
|
|
<h3 class="text-2xl font-bold mt-1 text-secondary">12.3%</h3>
|
|
<div class="flex items-center mt-2 text-xs">
|
|
<span class="text-secondary flex items-center">
|
|
<i class="fa fa-arrow-up mr-1"></i> 2.8%
|
|
</span>
|
|
<span class="text-gray-500 ml-2">较上月</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card border-accent bg-accent/5">
|
|
<p class="text-xs text-gray-500">参与率</p>
|
|
<h3 class="text-2xl font-bold mt-1 text-accent">92.7%</h3>
|
|
<div class="flex items-center mt-2 text-xs">
|
|
<span class="text-secondary flex items-center">
|
|
<i class="fa fa-arrow-up mr-1"></i> 1.5%
|
|
</span>
|
|
<span class="text-gray-500 ml-2">较上周</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card border-warning bg-warning/5">
|
|
<p class="text-xs text-gray-500">待提升学生</p>
|
|
<h3 class="text-2xl font-bold mt-1 text-warning">24人</h3>
|
|
<div class="flex items-center mt-2 text-xs">
|
|
<span class="text-secondary flex items-center">
|
|
<i class="fa fa-arrow-down mr-1"></i> 6人
|
|
</span>
|
|
<span class="text-gray-500 ml-2">较上月</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 打卡趋势图表 -->
|
|
<div class="px-5 py-2">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h3 class="font-bold">家庭打卡趋势</h3>
|
|
<select class="text-xs border-none bg-transparent focus:outline-none text-primary">
|
|
<option>按周统计</option>
|
|
<option>按月统计</option>
|
|
<option>按日统计</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="card h-64">
|
|
<canvas id="checkInChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 各项目完成情况 -->
|
|
<div class="px-5 py-2">
|
|
<h3 class="font-bold mb-3">各项目完成情况</h3>
|
|
|
|
<div class="card mb-3">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-sm">一分钟跳绳</span>
|
|
<span class="text-sm font-medium">82%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-value bg-primary" style="width: 82%"></div>
|
|
</div>
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
|
<span>平均时长: 9.2分钟</span>
|
|
<span>提升: +15.3%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-3">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-sm">仰卧起坐</span>
|
|
<span class="text-sm font-medium">68%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-value bg-primary" style="width: 68%"></div>
|
|
</div>
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
|
<span>平均时长: 7.5分钟</span>
|
|
<span>提升: +9.7%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-3">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-sm">坐位体前屈</span>
|
|
<span class="text-sm font-medium">75%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-value bg-primary" style="width: 75%"></div>
|
|
</div>
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
|
<span>平均时长: 5.8分钟</span>
|
|
<span>提升: +11.2%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-sm">家庭趣味跑步</span>
|
|
<span class="text-sm font-medium">62%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-value bg-primary" style="width: 62%"></div>
|
|
</div>
|
|
<div class="flex justify-between text-xs text-gray-500 mt-1">
|
|
<span>平均时长: 12.3分钟</span>
|
|
<span>提升: +8.5%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 班级对比 -->
|
|
<div class="px-5 py-2 mb-4">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h3 class="font-bold">班级表现对比</h3>
|
|
<button class="text-primary text-sm">详情</button>
|
|
</div>
|
|
|
|
<div class="card h-64">
|
|
<canvas id="classComparisonChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 待提升学生 -->
|
|
<div class="px-5 py-2 mb-20">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h3 class="font-bold">需重点关注学生</h3>
|
|
<button class="text-primary text-sm">查看全部</button>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<div class="card">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<img src="https://picsum.photos/id/1012/100/100" alt="学生头像" class="w-10 h-10 rounded-full object-cover">
|
|
<div>
|
|
<h4 class="font-medium">张明 - 四年级(2)班</h4>
|
|
<p class="text-xs text-gray-500">打卡完成率: 35% | 体质提升: 2.1%</p>
|
|
</div>
|
|
</div>
|
|
<button class="text-xs bg-warning/10 text-warning px-3 py-1 rounded-full">
|
|
重点关注
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<img src="https://picsum.photos/id/1027/100/100" alt="学生头像" class="w-10 h-10 rounded-full object-cover">
|
|
<div>
|
|
<h4 class="font-medium">李娜 - 五年级(3)班</h4>
|
|
<p class="text-xs text-gray-500">打卡完成率: 42% | 体质提升: 3.5%</p>
|
|
</div>
|
|
</div>
|
|
<button class="text-xs bg-warning/10 text-warning px-3 py-1 rounded-full">
|
|
重点关注
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<img src="https://picsum.photos/id/1025/100/100" alt="学生头像" class="w-10 h-10 rounded-full object-cover">
|
|
<div>
|
|
<h4 class="font-medium">王浩 - 六年级(1)班</h4>
|
|
<p class="text-xs text-gray-500">打卡完成率: 58% | 体质提升: 1.8%</p>
|
|
</div>
|
|
</div>
|
|
<button class="text-xs bg-accent/10 text-accent px-3 py-1 rounded-full">
|
|
一般关注
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 底部导航 -->
|
|
<footer class="bg-white border-t border-gray-200 py-2 px-4 fixed bottom-0 left-0 right-0 z-10">
|
|
<div class="flex justify-between">
|
|
<a href="#" class="flex flex-col items-center justify-center w-1/5 text-gray-500">
|
|
<i class="fa fa-home text-lg"></i>
|
|
<span class="text-xs mt-1">首页</span>
|
|
</a>
|
|
<a href="#" class="flex flex-col items-center justify-center w-1/5 text-gray-500">
|
|
<i class="fa fa-tasks text-lg"></i>
|
|
<span class="text-xs mt-1">任务管理</span>
|
|
</a>
|
|
<a href="#" class="flex flex-col items-center justify-center w-1/5 text-primary">
|
|
<i class="fa fa-bar-chart text-lg"></i>
|
|
<span class="text-xs mt-1">数据统计</span>
|
|
</a>
|
|
<a href="#" class="flex flex-col items-center justify-center w-1/5 text-gray-500">
|
|
<i class="fa fa-users text-lg"></i>
|
|
<span class="text-xs mt-1">班级管理</span>
|
|
</a>
|
|
<a href="#" class="flex flex-col items-center justify-center w-1/5 text-gray-500">
|
|
<i class="fa fa-cog text-lg"></i>
|
|
<span class="text-xs mt-1">设置</span>
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 页面加载完成后初始化图表
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 返回按钮功能
|
|
document.getElementById('back-btn').addEventListener('click', function() {
|
|
window.history.back();
|
|
});
|
|
|
|
// 打卡趋势图表
|
|
const checkInCtx = document.getElementById('checkInChart').getContext('2d');
|
|
const checkInChart = new Chart(checkInCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
|
|
datasets: [
|
|
{
|
|
label: '打卡完成率',
|
|
data: [65, 68, 72, 69, 75, 78.5],
|
|
borderColor: '#2563EB',
|
|
backgroundColor: 'rgba(37, 99, 235, 0.1)',
|
|
tension: 0.3,
|
|
fill: true
|
|
},
|
|
{
|
|
label: '体质提升幅度',
|
|
data: [3.2, 5.8, 7.5, 9.1, 10.5, 12.3],
|
|
borderColor: '#10B981',
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
|
tension: 0.3,
|
|
fill: true
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
labels: {
|
|
boxWidth: 12,
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value + '%';
|
|
},
|
|
font: {
|
|
size: 10
|
|
}
|
|
}
|
|
},
|
|
x: {
|
|
ticks: {
|
|
font: {
|
|
size: 10
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// 班级对比图表
|
|
const classCtx = document.getElementById('classComparisonChart').getContext('2d');
|
|
const classChart = new Chart(classCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['3(1)班', '4(2)班', '5(3)班', '6(1)班'],
|
|
datasets: [
|
|
{
|
|
label: '打卡完成率',
|
|
data: [91, 85, 76, 68],
|
|
backgroundColor: '#2563EB',
|
|
borderRadius: 4
|
|
},
|
|
{
|
|
label: '体质提升幅度',
|
|
data: [15.2, 13.8, 11.5, 8.7],
|
|
backgroundColor: '#10B981',
|
|
borderRadius: 4
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
labels: {
|
|
boxWidth: 12,
|
|
font: {
|
|
size: 11
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
ticks: {
|
|
callback: function(value) {
|
|
return value + '%';
|
|
},
|
|
font: {
|
|
size: 10
|
|
}
|
|
}
|
|
},
|
|
x: {
|
|
ticks: {
|
|
font: {
|
|
size: 10
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|