534 lines
19 KiB
HTML
534 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">
|
||
<title>幼儿园中班视力筛查统计报表</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
|
||
body {
|
||
background-color: #f5f9ff;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
padding: 20px;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
background-color: white;
|
||
border-radius: 15px;
|
||
box-shadow: 0 5px 20px rgba(0, 0, 150, 0.08);
|
||
overflow: hidden;
|
||
}
|
||
|
||
header {
|
||
background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
|
||
color: white;
|
||
padding: 25px 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 28px;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 15px;
|
||
}
|
||
|
||
h1 i {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.subtitle {
|
||
font-size: 16px;
|
||
opacity: 0.9;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.age-range {
|
||
background-color: rgba(255, 255, 255, 0.15);
|
||
display: inline-block;
|
||
padding: 5px 15px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.summary-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
gap: 20px;
|
||
padding: 25px;
|
||
}
|
||
|
||
.card {
|
||
background-color: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||
border-top: 5px solid #4b6cb7;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.card:hover {
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 16px;
|
||
color: #555;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.card-value {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #182848;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.card-desc {
|
||
font-size: 14px;
|
||
color: #777;
|
||
}
|
||
|
||
.card.normal {
|
||
border-top-color: #2ecc71;
|
||
}
|
||
|
||
.card.warning {
|
||
border-top-color: #f39c12;
|
||
}
|
||
|
||
.card.alert {
|
||
border-top-color: #e74c3c;
|
||
}
|
||
|
||
.content-section {
|
||
padding: 0 25px 25px;
|
||
}
|
||
|
||
h2 {
|
||
color: #182848;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 2px solid #eef2ff;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.data-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-bottom: 30px;
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.data-table th {
|
||
background-color: #4b6cb7;
|
||
color: white;
|
||
text-align: left;
|
||
padding: 15px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.data-table td {
|
||
padding: 15px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
|
||
.data-table tr:nth-child(even) {
|
||
background-color: #f9fbff;
|
||
}
|
||
|
||
.data-table tr:hover {
|
||
background-color: #edf2ff;
|
||
}
|
||
|
||
.eye-label {
|
||
display: inline-block;
|
||
padding: 3px 10px;
|
||
border-radius: 15px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.eye-right {
|
||
background-color: #e1f0ff;
|
||
color: #1976d2;
|
||
}
|
||
|
||
.eye-left {
|
||
background-color: #ffeaea;
|
||
color: #d32f2f;
|
||
}
|
||
|
||
.charts-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
|
||
gap: 25px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.chart-box {
|
||
background-color: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.chart-title {
|
||
font-size: 18px;
|
||
color: #182848;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.note-box {
|
||
background-color: #fff9e6;
|
||
border-left: 5px solid #f39c12;
|
||
padding: 18px;
|
||
border-radius: 8px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
.note-box h3 {
|
||
color: #d35400;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
footer {
|
||
text-align: center;
|
||
padding: 25px;
|
||
color: #666;
|
||
font-size: 14px;
|
||
border-top: 1px solid #eee;
|
||
background-color: #f9fbff;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.summary-cards {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.charts-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.data-table {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.data-table th, .data-table td {
|
||
padding: 10px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<h1><i class="fas fa-eye"></i> 幼儿园中班视力筛查统计报表</h1>
|
||
<p class="subtitle">基于儿童视力筛查数据的关键指标分析与统计</p>
|
||
<div class="age-range">适用年龄：4 - 5.5岁</div>
|
||
</header>
|
||
|
||
<div class="summary-cards">
|
||
<div class="card normal">
|
||
<div class="card-title"><i class="fas fa-ruler-combined"></i> 平均眼轴长度</div>
|
||
<div class="card-value">21.63 mm</div>
|
||
<div class="card-desc">右眼21.56mm / 左眼21.70mm | 在正常范围内</div>
|
||
</div>
|
||
|
||
<div class="card warning">
|
||
<div class="card-title"><i class="fas fa-eye-dropper"></i> 平均角膜曲率</div>
|
||
<div class="card-value">44.86 D</div>
|
||
<div class="card-desc">右眼44.25D / 左眼44.75D | 略高于标准值</div>
|
||
</div>
|
||
|
||
<div class="card alert">
|
||
<div class="card-title"><i class="fas fa-search"></i> 屈光异常比例</div>
|
||
<div class="card-value">75%</div>
|
||
<div class="card-desc">检测到散光或近视 | 需关注发展情况</div>
|
||
</div>
|
||
|
||
<div class="card normal">
|
||
<div class="card-title"><i class="fas fa-shield-alt"></i> 角膜厚度正常率</div>
|
||
<div class="card-value">100%</div>
|
||
<div class="card-desc">双眼角膜厚度均在正常范围内</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content-section">
|
||
<h2><i class="fas fa-chart-bar"></i> 关键指标对比</h2>
|
||
<div class="charts-container">
|
||
<div class="chart-box">
|
||
<div class="chart-title"><i class="fas fa-eye"></i> 眼轴长度对比</div>
|
||
<canvas id="eyeAxisChart"></canvas>
|
||
</div>
|
||
|
||
<div class="chart-box">
|
||
<div class="chart-title"><i class="fas fa-ruler-horizontal"></i> 角膜曲率对比</div>
|
||
<canvas id="cornealCurvatureChart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<h2><i class="fas fa-table"></i> 详细筛查数据</h2>
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>项目</th>
|
||
<th>右眼数值</th>
|
||
<th>左眼数值</th>
|
||
<th>参考范围(4-5.5岁)</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="eye-label eye-right">右</span><span class="eye-label eye-left">左</span>球镜(平均值)</td>
|
||
<td>-0.75 D</td>
|
||
<td>-0.56 D</td>
|
||
<td>+0.50 ~ +2.50 D</td>
|
||
<td><span style="color:#e74c3c;">异常</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="eye-label eye-right">右</span><span class="eye-label eye-left">左</span>柱镜(平均值)</td>
|
||
<td>-1.00 D</td>
|
||
<td>-0.69 D</td>
|
||
<td>≤ 1.00 D</td>
|
||
<td><span style="color:#f39c12;">临界</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="eye-label eye-right">右</span><span class="eye-label eye-left">左</span>等效球镜(SE)</td>
|
||
<td>-1.25 D</td>
|
||
<td>-0.91 D</td>
|
||
<td>+0.75 ~ +2.25 D</td>
|
||
<td><span style="color:#e74c3c;">异常</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="eye-label eye-right">右</span><span class="eye-label eye-left">左</span>眼轴长度(AL)</td>
|
||
<td>21.56 mm</td>
|
||
<td>21.70 mm</td>
|
||
<td>21.0 ~ 22.5 mm</td>
|
||
<td><span style="color:#2ecc71;">正常</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="eye-label eye-right">右</span><span class="eye-label eye-left">左</span>角膜曲率(K1)</td>
|
||
<td>44.25 D</td>
|
||
<td>44.75 D</td>
|
||
<td>42.0 ~ 44.5 D</td>
|
||
<td><span style="color:#f39c12;">略高</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="eye-label eye-right">右</span><span class="eye-label eye-left">左</span>角膜厚度(CCT)</td>
|
||
<td>593 μm</td>
|
||
<td>594 μm</td>
|
||
<td>540 ~ 600 μm</td>
|
||
<td><span style="color:#2ecc71;">正常</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="eye-label eye-right">右</span><span class="eye-label eye-left">左</span>前房深度(AD)</td>
|
||
<td>2.29 mm</td>
|
||
<td>2.77 mm</td>
|
||
<td>2.5 ~ 3.5 mm</td>
|
||
<td><span style="color:#2ecc71;">正常</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="eye-label eye-right">右</span><span class="eye-label eye-left">左</span>角膜散光(AST)</td>
|
||
<td>1.71 D</td>
|
||
<td>1.25 D</td>
|
||
<td>≤ 1.50 D</td>
|
||
<td><span style="color:#f39c12;">临界</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h2><i class="fas fa-file-medical-alt"></i> 屈光度测量详情</h2>
|
||
<table class="data-table">
|
||
<thead>
|
||
<tr>
|
||
<th>测量次数</th>
|
||
<th>右眼球镜/柱镜/轴位</th>
|
||
<th>左眼球镜/柱镜/轴位</th>
|
||
<th>备注</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>第1次</td>
|
||
<td>-0.75 D / -1.00 D / 173°</td>
|
||
<td>-0.75 D / -0.50 D / 170°</td>
|
||
<td>初次测量</td>
|
||
</tr>
|
||
<tr>
|
||
<td>第2次</td>
|
||
<td>-0.75 D / -1.00 D / 4°</td>
|
||
<td>-0.50 D / -0.75 D / 137°</td>
|
||
<td>复查测量</td>
|
||
</tr>
|
||
<tr>
|
||
<td>第3次</td>
|
||
<td>-0.75 D / -1.00 D / 2°</td>
|
||
<td>-0.50 D / -0.75 D / 151°</td>
|
||
<td>最终测量</td>
|
||
</tr>
|
||
<tr>
|
||
<td>平均值</td>
|
||
<td><strong>-0.75 D / -1.00 D / -</strong></td>
|
||
<td><strong>-0.58 D / -0.67 D / -</strong></td>
|
||
<td>计算值</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="note-box">
|
||
<h3><i class="fas fa-info-circle"></i> 重要说明与建议</h3>
|
||
<p>1. 本报表基于提供的视力筛查数据生成，参考范围适用于4-5.5岁儿童。</p>
|
||
<p>2. 数据中显示部分儿童存在屈光不正（球镜负值），建议进行专业眼科检查确认是否需要矫正。</p>
|
||
<p>3. 角膜曲率值略高于常规范围，可能与测量设备或儿童角膜发育特点有关，建议定期复查。</p>
|
||
<p>4. 统计数据显示75%的儿童存在不同程度的视力异常，建议加强用眼卫生教育和户外活动时间。</p>
|
||
<p>5. 此报表为统计分析工具，不能替代专业医疗诊断，具体处理请咨询眼科医生。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<footer>
|
||
<p>© 2023 幼儿园视力筛查统计系统 | 数据更新时间: <span id="currentDate"></span></p>
|
||
<p>本报表专为4-5.5岁儿童视力筛查设计，基于行业通用标准与临床实践经验</p>
|
||
</footer>
|
||
</div>
|
||
|
||
<script>
|
||
// 设置当前日期
|
||
document.getElementById('currentDate').textContent = new Date().toLocaleDateString('zh-CN', {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric'
|
||
});
|
||
|
||
// 眼轴长度对比图表
|
||
const eyeAxisCtx = document.getElementById('eyeAxisChart').getContext('2d');
|
||
const eyeAxisChart = new Chart(eyeAxisCtx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['右眼', '左眼', '参考下限', '参考上限'],
|
||
datasets: [{
|
||
label: '眼轴长度 (mm)',
|
||
data: [21.56, 21.70, 21.0, 22.5],
|
||
backgroundColor: [
|
||
'rgba(54, 162, 235, 0.7)',
|
||
'rgba(255, 99, 132, 0.7)',
|
||
'rgba(200, 200, 200, 0.5)',
|
||
'rgba(200, 200, 200, 0.5)'
|
||
],
|
||
borderColor: [
|
||
'rgba(54, 162, 235, 1)',
|
||
'rgba(255, 99, 132, 1)',
|
||
'rgba(150, 150, 150, 1)',
|
||
'rgba(150, 150, 150, 1)'
|
||
],
|
||
borderWidth: 1
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: {
|
||
display: false
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: false,
|
||
min: 20,
|
||
max: 23,
|
||
title: {
|
||
display: true,
|
||
text: '眼轴长度 (mm)'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 角膜曲率对比图表
|
||
const cornealCurvatureCtx = document.getElementById('cornealCurvatureChart').getContext('2d');
|
||
const cornealCurvatureChart = new Chart(cornealCurvatureCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['右眼K1', '右眼K2', '左眼K1', '左眼K2'],
|
||
datasets: [{
|
||
label: '角膜曲率 (D)',
|
||
data: [44.25, 45.67, 44.75, 46.00],
|
||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||
borderColor: 'rgba(75, 192, 192, 1)',
|
||
borderWidth: 3,
|
||
fill: true,
|
||
tension: 0.3
|
||
}, {
|
||
label: '参考上限',
|
||
data: [44.5, 44.5, 44.5, 44.5],
|
||
borderColor: 'rgba(231, 76, 60, 0.7)',
|
||
borderWidth: 2,
|
||
borderDash: [5, 5],
|
||
fill: false,
|
||
pointRadius: 0
|
||
}, {
|
||
label: '参考下限',
|
||
data: [42.0, 42.0, 42.0, 42.0],
|
||
borderColor: 'rgba(46, 204, 113, 0.7)',
|
||
borderWidth: 2,
|
||
borderDash: [5, 5],
|
||
fill: false,
|
||
pointRadius: 0
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: false,
|
||
min: 40,
|
||
max: 48,
|
||
title: {
|
||
display: true,
|
||
text: '角膜曲率 (D)'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
// 添加交互效果：点击卡片显示详细信息
|
||
document.querySelectorAll('.card').forEach(card => {
|
||
card.addEventListener('click', function() {
|
||
const cardTitle = this.querySelector('.card-title').textContent;
|
||
alert(`查看 ${cardTitle} 的详细分析报告`);
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |