1697 lines
95 KiB
HTML
1697 lines
95 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>
|
||
<!-- Tailwind CSS v3 -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<!-- Font Awesome -->
|
||
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
<!-- Chart.js -->
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
||
<!-- Tailwind 配置 -->
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: '#3b82f6',
|
||
secondary: '#64748b',
|
||
success: '#22c55e',
|
||
danger: '#ef4444',
|
||
warning: '#f59e0b',
|
||
info: '#0ea5e9',
|
||
light: '#f8fafc',
|
||
dark: '#1e293b'
|
||
},
|
||
fontFamily: {
|
||
sans: ['Inter', 'system-ui', 'sans-serif']
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style type="text/tailwindcss">
|
||
@layer utilities {
|
||
.content-auto {
|
||
content-visibility: auto;
|
||
}
|
||
.form-input {
|
||
@apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
|
||
}
|
||
.form-label {
|
||
@apply block text-sm font-medium text-gray-700 mb-1;
|
||
}
|
||
.btn {
|
||
@apply px-4 py-2 rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200;
|
||
}
|
||
.btn-primary {
|
||
@apply bg-primary text-white hover:bg-blue-600 focus:ring-blue-500;
|
||
}
|
||
.btn-secondary {
|
||
@apply bg-secondary text-white hover:bg-slate-600 focus:ring-slate-500;
|
||
}
|
||
.btn-success {
|
||
@apply bg-success text-white hover:bg-green-600 focus:ring-green-500;
|
||
}
|
||
.btn-danger {
|
||
@apply bg-danger text-white hover:bg-red-600 focus:ring-red-500;
|
||
}
|
||
.btn-outline {
|
||
@apply border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-500;
|
||
}
|
||
.tab-active {
|
||
@apply border-b-2 border-primary text-primary;
|
||
}
|
||
.tab-inactive {
|
||
@apply text-gray-500 hover:text-gray-700;
|
||
}
|
||
.table-header {
|
||
@apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
|
||
}
|
||
.table-cell {
|
||
@apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
|
||
}
|
||
.table-row {
|
||
@apply bg-white border-b hover:bg-gray-50;
|
||
}
|
||
.card {
|
||
@apply bg-white shadow-sm rounded-lg border border-gray-200;
|
||
}
|
||
.card-header {
|
||
@apply px-6 py-4 border-b border-gray-200;
|
||
}
|
||
.card-body {
|
||
@apply px-6 py-4;
|
||
}
|
||
.card-footer {
|
||
@apply px-6 py-4 border-t border-gray-200 bg-gray-50;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50 min-h-screen">
|
||
<div class="flex h-screen overflow-hidden">
|
||
<!-- 侧边栏导航 -->
|
||
<aside class="w-64 bg-white shadow-md hidden md:block">
|
||
<div class="p-4 border-b border-gray-200">
|
||
<h1 class="text-xl font-bold text-primary">视力筛查系统</h1>
|
||
</div>
|
||
<nav class="mt-4">
|
||
<div class="px-4 py-2">
|
||
<p class="text-sm font-medium text-gray-500 uppercase tracking-wider">一级菜单</p>
|
||
<div class="mt-2">
|
||
<a href="#" class="flex items-center px-4 py-2 text-gray-700 bg-gray-100 rounded-md">
|
||
<i class="fa fa-eye mr-3 text-primary"></i>
|
||
<span>视力筛查结果管理</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="px-4 py-2 mt-2">
|
||
<p class="text-sm font-medium text-gray-500 uppercase tracking-wider">二级菜单</p>
|
||
<div class="mt-2 space-y-1">
|
||
<a href="#" class="tab-link flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" data-tab="input-form">
|
||
<i class="fa fa-pencil mr-3 text-primary"></i>
|
||
<span>视力筛查结果录入</span>
|
||
</a>
|
||
<a href="#" class="tab-link flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" data-tab="comparison-form">
|
||
<i class="fa fa-bar-chart mr-3 text-primary"></i>
|
||
<span>视力筛查结果对比</span>
|
||
</a>
|
||
<a href="#" class="tab-link flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" data-tab="query-form">
|
||
<i class="fa fa-search mr-3 text-primary"></i>
|
||
<span>视力筛查结果查询</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- 主内容区 -->
|
||
<div class="flex-1 flex flex-col overflow-hidden">
|
||
<!-- 顶部导航栏 -->
|
||
<header class="bg-white shadow-sm z-10">
|
||
<div class="px-6 py-4 flex items-center justify-between">
|
||
<div class="flex items-center md:hidden">
|
||
<button type="button" class="text-gray-500 hover:text-gray-700 focus:outline-none" id="mobile-menu-button">
|
||
<i class="fa fa-bars text-xl"></i>
|
||
</button>
|
||
<h1 class="text-lg font-bold text-primary ml-3">视力筛查系统</h1>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<span class="text-sm text-gray-600">欢迎使用学生视力筛查结果管理系统</span>
|
||
</div>
|
||
<div class="flex items-center space-x-4">
|
||
<button type="button" class="text-gray-500 hover:text-gray-700 focus:outline-none">
|
||
<i class="fa fa-bell text-xl"></i>
|
||
</button>
|
||
<div class="relative">
|
||
<button type="button" class="flex items-center focus:outline-none">
|
||
<span class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center">
|
||
<i class="fa fa-user"></i>
|
||
</span>
|
||
<span class="ml-2 text-sm font-medium text-gray-700 hidden md:block">管理员</span>
|
||
<i class="fa fa-chevron-down ml-1 text-gray-500 hidden md:block"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 移动端菜单 -->
|
||
<div class="md:hidden hidden bg-white shadow-md absolute w-full z-20" id="mobile-menu">
|
||
<nav class="p-4">
|
||
<div class="mb-4">
|
||
<p class="text-sm font-medium text-gray-500 uppercase tracking-wider">一级菜单</p>
|
||
<div class="mt-2">
|
||
<a href="#" class="flex items-center px-4 py-2 text-gray-700 bg-gray-100 rounded-md">
|
||
<i class="fa fa-eye mr-3 text-primary"></i>
|
||
<span>视力筛查结果管理</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-500 uppercase tracking-wider">二级菜单</p>
|
||
<div class="mt-2 space-y-1">
|
||
<a href="#" class="tab-link flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" data-tab="input-form">
|
||
<i class="fa fa-pencil mr-3 text-primary"></i>
|
||
<span>视力筛查结果录入</span>
|
||
</a>
|
||
<a href="#" class="tab-link flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" data-tab="comparison-form">
|
||
<i class="fa fa-bar-chart mr-3 text-primary"></i>
|
||
<span>视力筛查结果对比</span>
|
||
</a>
|
||
<a href="#" class="tab-link flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" data-tab="query-form">
|
||
<i class="fa fa-search mr-3 text-primary"></i>
|
||
<span>视力筛查结果查询</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- 主内容 -->
|
||
<main class="flex-1 overflow-y-auto p-6">
|
||
<div class="mb-6">
|
||
<h2 class="text-2xl font-bold text-gray-800">视力筛查结果管理</h2>
|
||
<p class="text-gray-600 mt-1">管理学生视力筛查数据，进行录入和对比分析</p>
|
||
</div>
|
||
|
||
<!-- 标签页导航 -->
|
||
<div class="border-b border-gray-200 mb-6">
|
||
<nav class="-mb-px flex space-x-8">
|
||
<a href="#" class="tab-link tab-active whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm" data-tab="input-form">
|
||
视力筛查结果录入
|
||
</a>
|
||
<a href="#" class="tab-link tab-inactive whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm" data-tab="comparison-form">
|
||
视力筛查结果对比
|
||
</a>
|
||
<a href="#" class="tab-link tab-inactive whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm" data-tab="query-form">
|
||
视力筛查结果查询
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- 标签页内容 -->
|
||
<div class="tab-content" id="input-form">
|
||
<!-- 视力筛查结果录入表单 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="text-lg font-medium text-gray-900">学生视力筛查结果录入</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="vision-input-form" class="space-y-6">
|
||
<!-- 学生基本信息 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div>
|
||
<label for="student-name" class="form-label">学生姓名</label>
|
||
<input type="text" id="student-name" name="student-name" class="form-input" required>
|
||
</div>
|
||
<div>
|
||
<label for="student-id" class="form-label">学生身份证号</label>
|
||
<input type="text" id="student-id" name="student-id" class="form-input" required>
|
||
</div>
|
||
<div>
|
||
<label for="school" class="form-label">学校</label>
|
||
<select id="school" name="school" class="form-input" required>
|
||
<option value="">请选择学校</option>
|
||
<option value="school1">第一小学</option>
|
||
<option value="school2">第二小学</option>
|
||
<option value="school3">第三小学</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="county" class="form-label">县（市、区）</label>
|
||
<select id="county" name="county" class="form-input" required>
|
||
<option value="">请选择县（市、区）</option>
|
||
<option value="county1">城东区</option>
|
||
<option value="county2">城西区</option>
|
||
<option value="county3">城南区</option>
|
||
<option value="county4">城北区</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="grade" class="form-label">年级</label>
|
||
<select id="grade" name="grade" class="form-input" required>
|
||
<option value="">请选择年级</option>
|
||
<option value="grade1">一年级</option>
|
||
<option value="grade2">二年级</option>
|
||
<option value="grade3">三年级</option>
|
||
<option value="grade4">四年级</option>
|
||
<option value="grade5">五年级</option>
|
||
<option value="grade6">六年级</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="class" class="form-label">班级</label>
|
||
<select id="class" name="class" class="form-input" required>
|
||
<option value="">请选择班级</option>
|
||
<option value="class1">1班</option>
|
||
<option value="class2">2班</option>
|
||
<option value="class3">3班</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 复查信息 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label for="review-date" class="form-label">复查时间</label>
|
||
<input type="date" id="review-date" name="review-date" class="form-input" required>
|
||
</div>
|
||
<div>
|
||
<label for="review-image" class="form-label">复查结果图片</label>
|
||
<input type="file" id="review-image" name="review-image" class="form-input" accept="image/*">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视力检查结果 -->
|
||
<div class="border-t border-gray-200 pt-6">
|
||
<h4 class="text-md font-medium text-gray-900 mb-4">眼科检查结果</h4>
|
||
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th scope="col" class="table-header">检查项目</th>
|
||
<th scope="col" class="table-header">右眼</th>
|
||
<th scope="col" class="table-header">左眼</th>
|
||
<th scope="col" class="table-header">备注</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr>
|
||
<td class="table-cell font-medium">裸眼视力</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="naked-vision-right" class="form-input" placeholder="如：5.0">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="naked-vision-left" class="form-input" placeholder="如：5.0">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="naked-vision-note" class="form-input" placeholder="缺失值为9">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="table-cell font-medium">球面镜</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="sphere-right" class="form-input" placeholder="如：-1.00">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="sphere-left" class="form-input" placeholder="如：-1.00">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="sphere-note" class="form-input" placeholder="缺失值为999">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="table-cell font-medium">柱镜</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="cylinder-right" class="form-input" placeholder="如：-0.50">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="cylinder-left" class="form-input" placeholder="如：-0.50">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="cylinder-note" class="form-input" placeholder="缺失值为999">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="table-cell font-medium">轴位</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="axis-right" class="form-input" placeholder="如：180">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="axis-left" class="form-input" placeholder="如：180">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="axis-note" class="form-input" placeholder="缺失值为999">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="table-cell font-medium">右眼散光度数</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="astigmatism-right" class="form-input" placeholder="如：150">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="astigmatism-left" class="form-input" placeholder="如：150">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="astigmatism-note" class="form-input" placeholder="缺失值为0">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="table-cell font-medium">右眼戴镜视力</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="corrected-vision-right" class="form-input" placeholder="如：5.0">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="corrected-vision-left" class="form-input" placeholder="如：5.0">
|
||
</td>
|
||
<td class="table-cell">
|
||
<input type="text" name="corrected-vision-note" class="form-input" placeholder="缺失值为9">
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 其他信息 -->
|
||
<div class="border-t border-gray-200 pt-6">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div>
|
||
<label for="diagnosis" class="form-label">诊断结果</label>
|
||
<textarea id="diagnosis" name="diagnosis" rows="3" class="form-input" placeholder="请输入诊断结果"></textarea>
|
||
</div>
|
||
<div>
|
||
<label for="advice" class="form-label">处理建议</label>
|
||
<textarea id="advice" name="advice" rows="3" class="form-input" placeholder="请输入处理建议"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提交按钮 -->
|
||
<div class="flex justify-end space-x-4">
|
||
<button type="button" class="btn btn-outline" id="reset-form">重置</button>
|
||
<button type="submit" class="btn btn-primary">保存</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content hidden" id="comparison-form">
|
||
<!-- 视力筛查结果对比 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="text-lg font-medium text-gray-900">学生视力筛查结果对比</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 查询条件 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||
<div>
|
||
<label for="compare-county" class="form-label">县（市、区）</label>
|
||
<select id="compare-county" name="compare-county" class="form-input">
|
||
<option value="">全部</option>
|
||
<option value="county1">城东区</option>
|
||
<option value="county2">城西区</option>
|
||
<option value="county3">城南区</option>
|
||
<option value="county4">城北区</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="compare-school" class="form-label">学校</label>
|
||
<select id="compare-school" name="compare-school" class="form-input">
|
||
<option value="">请选择学校</option>
|
||
<option value="school1">第一小学</option>
|
||
<option value="school2">第二小学</option>
|
||
<option value="school3">第三小学</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="compare-grade" class="form-label">年级</label>
|
||
<select id="compare-grade" name="compare-grade" class="form-input">
|
||
<option value="">请选择年级</option>
|
||
<option value="grade1">一年级</option>
|
||
<option value="grade2">二年级</option>
|
||
<option value="grade3">三年级</option>
|
||
<option value="grade4">四年级</option>
|
||
<option value="grade5">五年级</option>
|
||
<option value="grade6">六年级</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="compare-class" class="form-label">班级</label>
|
||
<select id="compare-class" name="compare-class" class="form-input">
|
||
<option value="">请选择班级</option>
|
||
<option value="class1">1班</option>
|
||
<option value="class2">2班</option>
|
||
<option value="class3">3班</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="compare-name" class="form-label">学生姓名</label>
|
||
<input type="text" id="compare-name" name="compare-name" class="form-input" placeholder="请输入学生姓名">
|
||
</div>
|
||
<div>
|
||
<label for="compare-id" class="form-label">学生身份证号</label>
|
||
<input type="text" id="compare-id" name="compare-id" class="form-input" placeholder="请输入学生身份证号">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 时间范围选择 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||
<div>
|
||
<label for="date-start" class="form-label">开始日期</label>
|
||
<input type="date" id="date-start" name="date-start" class="form-input">
|
||
</div>
|
||
<div>
|
||
<label for="date-end" class="form-label">结束日期</label>
|
||
<input type="date" id="date-end" name="date-end" class="form-input">
|
||
</div>
|
||
<div class="flex items-end">
|
||
<button type="button" class="btn btn-primary" id="search-btn">查询</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 查询结果 -->
|
||
<div id="comparison-results" class="hidden">
|
||
<!-- 图例选择 -->
|
||
<div class="mb-6">
|
||
<h4 class="text-md font-medium text-gray-900 mb-2">图例选择</h4>
|
||
<div class="flex flex-wrap gap-4">
|
||
<label class="inline-flex items-center">
|
||
<input type="checkbox" class="form-checkbox text-primary" value="naked-vision-right" checked>
|
||
<span class="ml-2">右眼裸眼视力</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="checkbox" class="form-checkbox text-primary" value="naked-vision-left" checked>
|
||
<span class="ml-2">左眼裸眼视力</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="checkbox" class="form-checkbox text-primary" value="sphere-right">
|
||
<span class="ml-2">右眼球面镜</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="checkbox" class="form-checkbox text-primary" value="sphere-left">
|
||
<span class="ml-2">左眼球面镜</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="checkbox" class="form-checkbox text-primary" value="cylinder-right">
|
||
<span class="ml-2">右眼柱镜</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="checkbox" class="form-checkbox text-primary" value="cylinder-left">
|
||
<span class="ml-2">左眼柱镜</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="checkbox" class="form-checkbox text-primary" value="corrected-vision-right">
|
||
<span class="ml-2">右眼戴镜视力</span>
|
||
</label>
|
||
<label class="inline-flex items-center">
|
||
<input type="checkbox" class="form-checkbox text-primary" value="corrected-vision-left">
|
||
<span class="ml-2">左眼戴镜视力</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 视力折线图 -->
|
||
<div class="mb-6">
|
||
<h4 class="text-md font-medium text-gray-900 mb-2">视力趋势图</h4>
|
||
<div class="bg-white p-4 rounded-lg border border-gray-200" style="height: 400px;">
|
||
<canvas id="vision-chart"></canvas>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 结果表格 -->
|
||
<div class="mb-6">
|
||
<div class="flex justify-between items-center mb-2">
|
||
<h4 class="text-md font-medium text-gray-900">检查结果列表</h4>
|
||
<button type="button" class="btn btn-outline" id="export-btn">
|
||
<i class="fa fa-download mr-1"></i> 导出
|
||
</button>
|
||
</div>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th scope="col" class="table-header">复查日期</th>
|
||
<th scope="col" class="table-header">右眼裸眼视力</th>
|
||
<th scope="col" class="table-header">左眼裸眼视力</th>
|
||
<th scope="col" class="table-header">右眼球面镜</th>
|
||
<th scope="col" class="table-header">左眼球面镜</th>
|
||
<th scope="col" class="table-header">右眼柱镜</th>
|
||
<th scope="col" class="table-header">左眼柱镜</th>
|
||
<th scope="col" class="table-header">右眼戴镜视力</th>
|
||
<th scope="col" class="table-header">左眼戴镜视力</th>
|
||
<th scope="col" class="table-header">诊断结果</th>
|
||
<th scope="col" class="table-header">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200" id="results-table-body">
|
||
<!-- 表格内容将通过JavaScript动态生成 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 无结果提示 -->
|
||
<div id="no-results" class="text-center py-12">
|
||
<i class="fa fa-search text-gray-300 text-5xl mb-4"></i>
|
||
<p class="text-gray-500">请输入查询条件并点击查询按钮</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content hidden" id="query-form">
|
||
<!-- 视力筛查结果查询 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="text-lg font-medium text-gray-900">学生视力筛查结果查询</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 查询条件 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||
<div>
|
||
<label for="query-county" class="form-label">县（市、区）</label>
|
||
<select id="query-county" name="query-county" class="form-input">
|
||
<option value="">全部</option>
|
||
<option value="county1">城东区</option>
|
||
<option value="county2">城西区</option>
|
||
<option value="county3">城南区</option>
|
||
<option value="county4">城北区</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="query-school" class="form-label">学校</label>
|
||
<select id="query-school" name="query-school" class="form-input">
|
||
<option value="">请选择学校</option>
|
||
<option value="school1">第一小学</option>
|
||
<option value="school2">第二小学</option>
|
||
<option value="school3">第三小学</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="query-grade" class="form-label">年级</label>
|
||
<select id="query-grade" name="query-grade" class="form-input">
|
||
<option value="">请选择年级</option>
|
||
<option value="grade1">一年级</option>
|
||
<option value="grade2">二年级</option>
|
||
<option value="grade3">三年级</option>
|
||
<option value="grade4">四年级</option>
|
||
<option value="grade5">五年级</option>
|
||
<option value="grade6">六年级</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="query-class" class="form-label">班级</label>
|
||
<select id="query-class" name="query-class" class="form-input">
|
||
<option value="">请选择班级</option>
|
||
<option value="class1">1班</option>
|
||
<option value="class2">2班</option>
|
||
<option value="class3">3班</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label for="query-name" class="form-label">学生姓名</label>
|
||
<input type="text" id="query-name" name="query-name" class="form-input" placeholder="请输入学生姓名">
|
||
</div>
|
||
<div>
|
||
<label for="query-id" class="form-label">学生身份证号</label>
|
||
<input type="text" id="query-id" name="query-id" class="form-input" placeholder="请输入学生身份证号">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 时间范围选择 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||
<div>
|
||
<label for="query-date-start" class="form-label">开始日期</label>
|
||
<input type="date" id="query-date-start" name="query-date-start" class="form-input">
|
||
</div>
|
||
<div>
|
||
<label for="query-date-end" class="form-label">结束日期</label>
|
||
<input type="date" id="query-date-end" name="query-date-end" class="form-input">
|
||
</div>
|
||
<div class="flex items-end">
|
||
<button type="button" class="btn btn-primary" id="query-search-btn">查询</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 查询结果 -->
|
||
<div id="query-results" class="hidden">
|
||
<!-- 结果表格 -->
|
||
<div class="mb-6">
|
||
<div class="flex justify-between items-center mb-2">
|
||
<h4 class="text-md font-medium text-gray-900">检查结果列表</h4>
|
||
<button type="button" class="btn btn-outline" id="query-export-btn">
|
||
<i class="fa fa-download mr-1"></i> 导出
|
||
</button>
|
||
</div>
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th scope="col" class="table-header">学生姓名</th>
|
||
<th scope="col" class="table-header">身份证号</th>
|
||
<th scope="col" class="table-header">学校</th>
|
||
<th scope="col" class="table-header">年级</th>
|
||
<th scope="col" class="table-header">班级</th>
|
||
<th scope="col" class="table-header">复查时间</th>
|
||
<th scope="col" class="table-header">右眼裸眼视力</th>
|
||
<th scope="col" class="table-header">左眼裸眼视力</th>
|
||
<th scope="col" class="table-header">诊断结果</th>
|
||
<th scope="col" class="table-header">操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200" id="query-results-table-body">
|
||
<!-- 表格内容将通过JavaScript动态生成 -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="flex justify-between items-center">
|
||
<div class="text-sm text-gray-700">
|
||
显示 <span id="query-start-record">1</span> 到 <span id="query-end-record">10</span> 条，共 <span id="query-total-records">0</span> 条记录
|
||
</div>
|
||
<div class="flex space-x-2">
|
||
<button type="button" class="btn btn-outline" id="query-prev-page" disabled>
|
||
<i class="fa fa-chevron-left"></i>
|
||
</button>
|
||
<button type="button" class="btn btn-outline" id="query-next-page">
|
||
<i class="fa fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 无结果提示 -->
|
||
<div id="query-no-results" class="text-center py-12">
|
||
<i class="fa fa-search text-gray-300 text-5xl mb-4"></i>
|
||
<p class="text-gray-500">请输入查询条件并点击查询按钮</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 预览图片模态框 -->
|
||
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="image-modal">
|
||
<div class="bg-white rounded-lg max-w-4xl w-full mx-4">
|
||
<div class="flex justify-between items-center p-4 border-b border-gray-200">
|
||
<h3 class="text-lg font-medium text-gray-900">复查结果图片预览</h3>
|
||
<button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none" id="close-modal">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="p-6">
|
||
<img id="preview-image" src="" alt="复查结果图片" class="max-w-full h-auto mx-auto">
|
||
</div>
|
||
<div class="bg-gray-50 px-6 py-4 flex justify-end">
|
||
<button type="button" class="btn btn-outline" id="close-modal-btn">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 模拟数据存储
|
||
let visionData = [];
|
||
|
||
// 当前选中的学生ID
|
||
let currentStudentId = null;
|
||
|
||
// 图表实例
|
||
let visionChart = null;
|
||
|
||
// DOM 加载完成后执行
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 设置当前日期为默认值
|
||
const today = new Date().toISOString().split('T')[0];
|
||
document.getElementById('review-date').value = today;
|
||
document.getElementById('date-start').value = today;
|
||
document.getElementById('date-end').value = today;
|
||
document.getElementById('query-date-start').value = '2025-01-01';
|
||
document.getElementById('query-date-end').value = today;
|
||
|
||
// 初始化查询页面
|
||
initQueryPage();
|
||
|
||
// 标签页切换
|
||
const tabLinks = document.querySelectorAll('.tab-link');
|
||
const tabContents = document.querySelectorAll('.tab-content');
|
||
|
||
// 确保有默认选中的标签页
|
||
if (tabLinks.length > 0) {
|
||
const firstTabId = tabLinks[0].getAttribute('data-tab');
|
||
tabLinks[0].classList.add('tab-active');
|
||
tabLinks[0].classList.remove('tab-inactive');
|
||
|
||
if (tabContents.length > 0) {
|
||
tabContents.forEach(content => {
|
||
if (content.id === firstTabId) {
|
||
content.classList.remove('hidden');
|
||
} else {
|
||
content.classList.add('hidden');
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
tabLinks.forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
const tabId = this.getAttribute('data-tab');
|
||
console.log('切换到标签页:', tabId);
|
||
|
||
// 更新标签页状态
|
||
tabLinks.forEach(link => {
|
||
if (link.getAttribute('data-tab') === tabId) {
|
||
link.classList.add('tab-active');
|
||
link.classList.remove('tab-inactive');
|
||
} else {
|
||
link.classList.remove('tab-active');
|
||
link.classList.add('tab-inactive');
|
||
}
|
||
});
|
||
|
||
// 更新内容显示
|
||
tabContents.forEach(content => {
|
||
if (content.id === tabId) {
|
||
content.classList.remove('hidden');
|
||
} else {
|
||
content.classList.add('hidden');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// 移动端菜单切换
|
||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
|
||
mobileMenuButton.addEventListener('click', function() {
|
||
mobileMenu.classList.toggle('hidden');
|
||
});
|
||
|
||
// 表单提交处理
|
||
const visionForm = document.getElementById('vision-input-form');
|
||
visionForm.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
|
||
// 获取表单数据
|
||
const formData = new FormData(visionForm);
|
||
const studentId = document.getElementById('student-id').value;
|
||
const reviewDate = document.getElementById('review-date').value;
|
||
|
||
// 创建新的视力数据记录
|
||
const newRecord = {
|
||
id: Date.now(),
|
||
studentId: studentId,
|
||
studentName: document.getElementById('student-name').value,
|
||
school: document.getElementById('school').value,
|
||
county: document.getElementById('county').value,
|
||
grade: document.getElementById('grade').value,
|
||
class: document.getElementById('class').value,
|
||
reviewDate: reviewDate,
|
||
reviewImage: document.getElementById('review-image').files[0] ? URL.createObjectURL(document.getElementById('review-image').files[0]) : null,
|
||
nakedVisionRight: document.getElementById('naked-vision-right').value,
|
||
nakedVisionLeft: document.getElementById('naked-vision-left').value,
|
||
sphereRight: document.getElementById('sphere-right').value,
|
||
sphereLeft: document.getElementById('sphere-left').value,
|
||
cylinderRight: document.getElementById('cylinder-right').value,
|
||
cylinderLeft: document.getElementById('cylinder-left').value,
|
||
axisRight: document.getElementById('axis-right').value,
|
||
axisLeft: document.getElementById('axis-left').value,
|
||
astigmatismRight: document.getElementById('astigmatism-right').value,
|
||
astigmatismLeft: document.getElementById('astigmatism-left').value,
|
||
correctedVisionRight: document.getElementById('corrected-vision-right').value,
|
||
correctedVisionLeft: document.getElementById('corrected-vision-left').value,
|
||
diagnosis: document.getElementById('diagnosis').value,
|
||
advice: document.getElementById('advice').value
|
||
};
|
||
|
||
// 添加到数据存储
|
||
visionData.push(newRecord);
|
||
|
||
// 显示成功消息
|
||
alert('视力筛查结果已成功保存！');
|
||
|
||
// 重置表单
|
||
visionForm.reset();
|
||
document.getElementById('review-date').value = today;
|
||
});
|
||
|
||
// 重置表单按钮
|
||
document.getElementById('reset-form').addEventListener('click', function() {
|
||
visionForm.reset();
|
||
document.getElementById('review-date').value = today;
|
||
});
|
||
|
||
// 查询按钮点击事件
|
||
document.getElementById('search-btn').addEventListener('click', function() {
|
||
console.log('查询按钮被点击');
|
||
const studentId = document.getElementById('compare-id').value;
|
||
const studentName = document.getElementById('compare-name').value;
|
||
const school = document.getElementById('compare-school').value;
|
||
const grade = document.getElementById('compare-grade').value;
|
||
const classValue = document.getElementById('compare-class').value;
|
||
const county = document.getElementById('compare-county').value;
|
||
const dateStart = document.getElementById('date-start').value;
|
||
const dateEnd = document.getElementById('date-end').value;
|
||
|
||
console.log('查询条件:', { studentId, studentName, school, grade, classValue, county, dateStart, dateEnd });
|
||
|
||
// 保存当前查询的学生ID
|
||
currentStudentId = studentId;
|
||
|
||
// 筛选数据
|
||
let filteredData = visionData.filter(record => {
|
||
return (!studentId || record.studentId === studentId) &&
|
||
(!studentName || record.studentName.includes(studentName)) &&
|
||
(!school || record.school === school) &&
|
||
(!grade || record.grade === grade) &&
|
||
(!classValue || record.class === classValue) &&
|
||
(!county || record.county === county) &&
|
||
record.reviewDate >= dateStart &&
|
||
record.reviewDate <= dateEnd;
|
||
});
|
||
|
||
console.log('筛选后的数据:', filteredData);
|
||
|
||
// 显示或隐藏结果区域
|
||
const comparisonResults = document.getElementById('comparison-results');
|
||
const noResults = document.getElementById('no-results');
|
||
|
||
if (filteredData.length > 0) {
|
||
comparisonResults.classList.remove('hidden');
|
||
noResults.classList.add('hidden');
|
||
|
||
// 更新表格内容
|
||
updateResultsTable(filteredData);
|
||
|
||
// 更新图表
|
||
console.log('准备更新图表');
|
||
updateVisionChart(filteredData);
|
||
} else {
|
||
comparisonResults.classList.add('hidden');
|
||
noResults.classList.remove('hidden');
|
||
console.log('没有找到匹配的数据');
|
||
}
|
||
});
|
||
|
||
// 更新结果表格
|
||
function updateResultsTable(data) {
|
||
const tableBody = document.getElementById('results-table-body');
|
||
tableBody.innerHTML = '';
|
||
|
||
// 按日期排序
|
||
data.sort((a, b) => new Date(a.reviewDate) - new Date(b.reviewDate));
|
||
|
||
data.forEach(record => {
|
||
const row = document.createElement('tr');
|
||
row.className = 'table-row';
|
||
|
||
row.innerHTML = `
|
||
<td class="table-cell">${formatDate(record.reviewDate)}</td>
|
||
<td class="table-cell">${record.nakedVisionRight || '-'}</td>
|
||
<td class="table-cell">${record.nakedVisionLeft || '-'}</td>
|
||
<td class="table-cell">${record.sphereRight || '-'}</td>
|
||
<td class="table-cell">${record.sphereLeft || '-'}</td>
|
||
<td class="table-cell">${record.cylinderRight || '-'}</td>
|
||
<td class="table-cell">${record.cylinderLeft || '-'}</td>
|
||
<td class="table-cell">${record.correctedVisionRight || '-'}</td>
|
||
<td class="table-cell">${record.correctedVisionLeft || '-'}</td>
|
||
<td class="table-cell">${record.diagnosis || '-'}</td>
|
||
<td class="table-cell">
|
||
${record.reviewImage ?
|
||
`<button class="text-primary hover:text-blue-700 mr-2 view-image" data-id="${record.id}">
|
||
<i class="fa fa-eye"></i>
|
||
</button>` : ''
|
||
}
|
||
</td>
|
||
`;
|
||
|
||
tableBody.appendChild(row);
|
||
});
|
||
|
||
// 添加图片预览事件
|
||
document.querySelectorAll('.view-image').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const recordId = parseInt(this.getAttribute('data-id'));
|
||
const record = visionData.find(item => item.id === recordId);
|
||
|
||
if (record && record.reviewImage) {
|
||
document.getElementById('preview-image').src = record.reviewImage;
|
||
document.getElementById('image-modal').classList.remove('hidden');
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 更新视力趋势图表
|
||
function updateVisionChart(chartData) {
|
||
console.log('开始更新图表，数据:', chartData);
|
||
|
||
// 如果没有数据，不显示图表
|
||
if (!chartData || chartData.length === 0) {
|
||
console.log('没有数据，不更新图表');
|
||
return;
|
||
}
|
||
|
||
// 确保有选中的图例
|
||
const legendCheckboxes = document.querySelectorAll('.form-checkbox:checked');
|
||
let selectedLegend = Array.from(legendCheckboxes).map(checkbox => checkbox.value);
|
||
|
||
console.log('当前选中的图例:', selectedLegend);
|
||
|
||
if (selectedLegend.length === 0) {
|
||
// 默认选中裸眼视力
|
||
console.log('没有选中图例，设置默认值');
|
||
const rightCheckbox = document.getElementById('naked-vision-right');
|
||
const leftCheckbox = document.getElementById('naked-vision-left');
|
||
|
||
if (rightCheckbox && leftCheckbox) {
|
||
rightCheckbox.checked = true;
|
||
leftCheckbox.checked = true;
|
||
selectedLegend = ['naked-vision-right', 'naked-vision-left'];
|
||
console.log('已设置默认图例:', selectedLegend);
|
||
} else {
|
||
console.error('找不到图例复选框');
|
||
return;
|
||
}
|
||
}
|
||
|
||
// 按日期排序
|
||
chartData.sort((a, b) => new Date(a.reviewDate) - new Date(b.reviewDate));
|
||
|
||
// 提取日期和各项视力数据
|
||
const labels = chartData.map(record => formatDate(record.reviewDate));
|
||
console.log('图表标签:', labels);
|
||
|
||
// 准备图表数据
|
||
const datasets = [];
|
||
|
||
// 颜色映射
|
||
const colorMap = {
|
||
'naked-vision-right': 'rgba(75, 192, 192, 1)',
|
||
'naked-vision-left': 'rgba(153, 102, 255, 1)',
|
||
'sphere-right': 'rgba(255, 159, 64, 1)',
|
||
'sphere-left': 'rgba(255, 99, 132, 1)',
|
||
'cylinder-right': 'rgba(54, 162, 235, 1)',
|
||
'cylinder-left': 'rgba(255, 206, 86, 1)',
|
||
'corrected-vision-right': 'rgba(199, 199, 199, 1)',
|
||
'corrected-vision-left': 'rgba(83, 102, 255, 1)'
|
||
};
|
||
|
||
// 标签映射
|
||
const labelMap = {
|
||
'naked-vision-right': '右眼裸眼视力',
|
||
'naked-vision-left': '左眼裸眼视力',
|
||
'sphere-right': '右眼球面镜',
|
||
'sphere-left': '左眼球面镜',
|
||
'cylinder-right': '右眼柱镜',
|
||
'cylinder-left': '左眼柱镜',
|
||
'corrected-vision-right': '右眼戴镜视力',
|
||
'corrected-vision-left': '左眼戴镜视力'
|
||
};
|
||
|
||
// 添加选中的数据系列
|
||
selectedLegend.forEach(key => {
|
||
console.log('处理数据系列:', key);
|
||
const seriesData = chartData.map(record => {
|
||
// 转换为数字，如果为空则返回null
|
||
const value = record[key];
|
||
let numValue = null;
|
||
|
||
if (value) {
|
||
// 尝试直接转换
|
||
numValue = parseFloat(value);
|
||
console.log(`记录 ${record.reviewDate} 的 ${key} 值: "${value}" -> ${numValue}`);
|
||
|
||
// 检查转换是否成功
|
||
if (isNaN(numValue)) {
|
||
console.warn(`无法将 "${value}" 转换为数字`);
|
||
numValue = null;
|
||
}
|
||
}
|
||
|
||
return numValue;
|
||
});
|
||
|
||
console.log(`数据系列 ${key} 最终数据:`, seriesData);
|
||
|
||
datasets.push({
|
||
label: labelMap[key],
|
||
data: seriesData,
|
||
borderColor: colorMap[key],
|
||
backgroundColor: colorMap[key].replace('1)', '0.2)'),
|
||
borderWidth: 2,
|
||
tension: 0.1,
|
||
pointRadius: 4
|
||
});
|
||
});
|
||
|
||
console.log('准备的数据集:', datasets);
|
||
|
||
// 销毁旧图表
|
||
if (visionChart) {
|
||
console.log('销毁旧图表');
|
||
visionChart.destroy();
|
||
}
|
||
|
||
// 检查canvas元素
|
||
const canvas = document.getElementById('vision-chart');
|
||
if (!canvas) {
|
||
console.error('找不到vision-chart canvas元素');
|
||
return;
|
||
}
|
||
|
||
console.log('创建新图表');
|
||
try {
|
||
const ctx = canvas.getContext('2d');
|
||
visionChart = new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: labels,
|
||
datasets: datasets
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
scales: {
|
||
y: {
|
||
beginAtZero: false,
|
||
title: {
|
||
display: true,
|
||
text: '数值'
|
||
}
|
||
},
|
||
x: {
|
||
title: {
|
||
display: true,
|
||
text: '日期'
|
||
}
|
||
}
|
||
},
|
||
plugins: {
|
||
title: {
|
||
display: true,
|
||
text: `${chartData[0].studentName}的视力趋势图`
|
||
},
|
||
tooltip: {
|
||
mode: 'index',
|
||
intersect: false
|
||
},
|
||
legend: {
|
||
position: 'top',
|
||
}
|
||
}
|
||
}
|
||
});
|
||
console.log('图表创建成功');
|
||
} catch (error) {
|
||
console.error('创建图表时出错:', error);
|
||
}
|
||
}
|
||
|
||
// 图例选择变化事件
|
||
document.querySelectorAll('.form-checkbox').forEach(checkbox => {
|
||
checkbox.addEventListener('change', function() {
|
||
// 如果当前有查询结果，更新图表
|
||
if (document.getElementById('comparison-results').classList.contains('hidden') === false) {
|
||
const studentId = document.getElementById('compare-id').value;
|
||
const studentName = document.getElementById('compare-name').value;
|
||
const school = document.getElementById('compare-school').value;
|
||
const grade = document.getElementById('compare-grade').value;
|
||
const classValue = document.getElementById('compare-class').value;
|
||
const county = document.getElementById('compare-county').value;
|
||
const dateStart = document.getElementById('date-start').value;
|
||
const dateEnd = document.getElementById('date-end').value;
|
||
|
||
// 筛选数据
|
||
let filteredData = visionData.filter(record => {
|
||
return (!studentId || record.studentId === studentId) &&
|
||
(!studentName || record.studentName.includes(studentName)) &&
|
||
(!school || record.school === school) &&
|
||
(!grade || record.grade === grade) &&
|
||
(!classValue || record.class === classValue) &&
|
||
(!county || record.county === county) &&
|
||
record.reviewDate >= dateStart &&
|
||
record.reviewDate <= dateEnd;
|
||
});
|
||
|
||
// 更新图表
|
||
updateVisionChart(filteredData);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 导出按钮点击事件
|
||
document.getElementById('export-btn').addEventListener('click', function() {
|
||
// 获取当前查询条件
|
||
const studentId = document.getElementById('compare-id').value;
|
||
const studentName = document.getElementById('compare-name').value;
|
||
const school = document.getElementById('compare-school').value;
|
||
const grade = document.getElementById('compare-grade').value;
|
||
const classValue = document.getElementById('compare-class').value;
|
||
const county = document.getElementById('compare-county').value;
|
||
const dateStart = document.getElementById('date-start').value;
|
||
const dateEnd = document.getElementById('date-end').value;
|
||
|
||
// 筛选数据
|
||
let filteredData = visionData.filter(record => {
|
||
return (!studentId || record.studentId === studentId) &&
|
||
(!studentName || record.studentName.includes(studentName)) &&
|
||
(!school || record.school === school) &&
|
||
(!grade || record.grade === grade) &&
|
||
(!classValue || record.class === classValue) &&
|
||
(!county || record.county === county) &&
|
||
record.reviewDate >= dateStart &&
|
||
record.reviewDate <= dateEnd;
|
||
});
|
||
|
||
// 如果没有数据，显示提示
|
||
if (filteredData.length === 0) {
|
||
alert('没有可导出的数据！');
|
||
return;
|
||
}
|
||
|
||
// 创建CSV内容
|
||
let csvContent = "data:text/csv;charset=utf-8,";
|
||
csvContent += "复查日期,右眼裸眼视力,左眼裸眼视力,右眼球面镜,左眼球面镜,右眼柱镜,左眼柱镜,右眼戴镜视力,左眼戴镜视力,诊断结果,处理建议\n";
|
||
|
||
filteredData.forEach(record => {
|
||
csvContent += `${formatDate(record.reviewDate)},${record.nakedVisionRight || ''},${record.nakedVisionLeft || ''},${record.sphereRight || ''},${record.sphereLeft || ''},${record.cylinderRight || ''},${record.cylinderLeft || ''},${record.correctedVisionRight || ''},${record.correctedVisionLeft || ''},${record.diagnosis || ''},${record.advice || ''}\n`;
|
||
});
|
||
|
||
// 创建下载链接
|
||
const encodedUri = encodeURI(csvContent);
|
||
const link = document.createElement("a");
|
||
link.setAttribute("href", encodedUri);
|
||
link.setAttribute("download", `${filteredData[0].studentName}_视力检查结果.csv`);
|
||
document.body.appendChild(link);
|
||
|
||
// 触发下载
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
});
|
||
|
||
// 图片预览模态框
|
||
const imageModal = document.getElementById('image-modal');
|
||
const closeModal = document.getElementById('close-modal');
|
||
const closeModalBtn = document.getElementById('close-modal-btn');
|
||
|
||
closeModal.addEventListener('click', function() {
|
||
imageModal.classList.add('hidden');
|
||
});
|
||
|
||
closeModalBtn.addEventListener('click', function() {
|
||
imageModal.classList.add('hidden');
|
||
});
|
||
|
||
// 查询页面相关变量
|
||
let currentPage = 1;
|
||
const recordsPerPage = 10;
|
||
let filteredQueryData = [];
|
||
|
||
// 初始化查询页面
|
||
function initQueryPage() {
|
||
// 设置当前日期为默认值
|
||
const today = new Date().toISOString().split('T')[0];
|
||
document.getElementById('query-date-start').value = '2025-01-01';
|
||
document.getElementById('query-date-end').value = today;
|
||
|
||
// 查询按钮点击事件
|
||
document.getElementById('query-search-btn').addEventListener('click', function() {
|
||
currentPage = 1;
|
||
performQuery();
|
||
});
|
||
|
||
// 导出按钮点击事件
|
||
document.getElementById('query-export-btn').addEventListener('click', function() {
|
||
exportQueryResults();
|
||
});
|
||
|
||
// 分页按钮点击事件
|
||
document.getElementById('query-prev-page').addEventListener('click', function() {
|
||
if (currentPage > 1) {
|
||
currentPage--;
|
||
updateQueryResultsTable();
|
||
}
|
||
});
|
||
|
||
document.getElementById('query-next-page').addEventListener('click', function() {
|
||
if (currentPage < Math.ceil(filteredQueryData.length / recordsPerPage)) {
|
||
currentPage++;
|
||
updateQueryResultsTable();
|
||
}
|
||
});
|
||
}
|
||
|
||
// 执行查询
|
||
function performQuery() {
|
||
const studentId = document.getElementById('query-id').value;
|
||
const studentName = document.getElementById('query-name').value;
|
||
const school = document.getElementById('query-school').value;
|
||
const grade = document.getElementById('query-grade').value;
|
||
const classValue = document.getElementById('query-class').value;
|
||
const county = document.getElementById('query-county').value;
|
||
const dateStart = document.getElementById('query-date-start').value;
|
||
const dateEnd = document.getElementById('query-date-end').value;
|
||
|
||
// 筛选数据
|
||
filteredQueryData = visionData.filter(record => {
|
||
return (!studentId || record.studentId === studentId) &&
|
||
(!studentName || record.studentName.includes(studentName)) &&
|
||
(!school || record.school === school) &&
|
||
(!grade || record.grade === grade) &&
|
||
(!classValue || record.class === classValue) &&
|
||
(!county || record.county === county) &&
|
||
record.reviewDate >= dateStart &&
|
||
record.reviewDate <= dateEnd;
|
||
});
|
||
|
||
// 按日期排序
|
||
filteredQueryData.sort((a, b) => new Date(b.reviewDate) - new Date(a.reviewDate));
|
||
|
||
// 显示或隐藏结果区域
|
||
const queryResults = document.getElementById('query-results');
|
||
const queryNoResults = document.getElementById('query-no-results');
|
||
|
||
if (filteredQueryData.length > 0) {
|
||
queryResults.classList.remove('hidden');
|
||
queryNoResults.classList.add('hidden');
|
||
|
||
// 更新表格内容
|
||
updateQueryResultsTable();
|
||
} else {
|
||
queryResults.classList.add('hidden');
|
||
queryNoResults.classList.remove('hidden');
|
||
}
|
||
}
|
||
|
||
// 更新查询结果表格
|
||
function updateQueryResultsTable() {
|
||
const tableBody = document.getElementById('query-results-table-body');
|
||
tableBody.innerHTML = '';
|
||
|
||
// 计算当前页显示的数据范围
|
||
const startIndex = (currentPage - 1) * recordsPerPage;
|
||
const endIndex = Math.min(startIndex + recordsPerPage, filteredQueryData.length);
|
||
|
||
// 更新分页信息
|
||
document.getElementById('query-start-record').textContent = startIndex + 1;
|
||
document.getElementById('query-end-record').textContent = endIndex;
|
||
document.getElementById('query-total-records').textContent = filteredQueryData.length;
|
||
|
||
// 更新分页按钮状态
|
||
document.getElementById('query-prev-page').disabled = currentPage === 1;
|
||
document.getElementById('query-next-page').disabled = endIndex >= filteredQueryData.length;
|
||
|
||
// 显示当前页的数据
|
||
for (let i = startIndex; i < endIndex; i++) {
|
||
const record = filteredQueryData[i];
|
||
const row = document.createElement('tr');
|
||
row.className = 'table-row';
|
||
|
||
// 学校名称映射
|
||
const schoolMap = {
|
||
'school1': '第一小学',
|
||
'school2': '第二小学',
|
||
'school3': '第三小学'
|
||
};
|
||
|
||
// 年级映射
|
||
const gradeMap = {
|
||
'grade1': '一年级',
|
||
'grade2': '二年级',
|
||
'grade3': '三年级',
|
||
'grade4': '四年级',
|
||
'grade5': '五年级',
|
||
'grade6': '六年级'
|
||
};
|
||
|
||
// 班级映射
|
||
const classMap = {
|
||
'class1': '1班',
|
||
'class2': '2班',
|
||
'class3': '3班'
|
||
};
|
||
|
||
row.innerHTML = `
|
||
<td class="table-cell">${record.studentName}</td>
|
||
<td class="table-cell">${record.studentId}</td>
|
||
<td class="table-cell">${schoolMap[record.school] || record.school}</td>
|
||
<td class="table-cell">${gradeMap[record.grade] || record.grade}</td>
|
||
<td class="table-cell">${classMap[record.class] || record.class}</td>
|
||
<td class="table-cell">${formatDate(record.reviewDate)}</td>
|
||
<td class="table-cell">${record.nakedVisionRight || '-'}</td>
|
||
<td class="table-cell">${record.nakedVisionLeft || '-'}</td>
|
||
<td class="table-cell">${record.diagnosis || '-'}</td>
|
||
<td class="table-cell">
|
||
<button class="text-primary hover:text-blue-700 mr-2 view-details" data-id="${record.id}">
|
||
<i class="fa fa-eye"></i> 查看
|
||
</button>
|
||
${record.reviewImage ?
|
||
`<button class="text-primary hover:text-blue-700 view-image" data-id="${record.id}">
|
||
<i class="fa fa-picture-o"></i> 图片
|
||
</button>` : ''
|
||
}
|
||
</td>
|
||
`;
|
||
|
||
tableBody.appendChild(row);
|
||
}
|
||
|
||
// 添加查看详情事件
|
||
document.querySelectorAll('.view-details').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const recordId = parseInt(this.getAttribute('data-id'));
|
||
const record = visionData.find(item => item.id === recordId);
|
||
|
||
if (record) {
|
||
// 显示详情模态框
|
||
showDetailModal(record);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 添加图片预览事件
|
||
document.querySelectorAll('.view-image').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
const recordId = parseInt(this.getAttribute('data-id'));
|
||
const record = visionData.find(item => item.id === recordId);
|
||
|
||
if (record && record.reviewImage) {
|
||
document.getElementById('preview-image').src = record.reviewImage;
|
||
document.getElementById('image-modal').classList.remove('hidden');
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
// 显示详情模态框
|
||
function showDetailModal(record) {
|
||
// 创建模态框
|
||
const modal = document.createElement('div');
|
||
modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
|
||
modal.id = 'detail-modal';
|
||
|
||
// 学校名称映射
|
||
const schoolMap = {
|
||
'school1': '第一小学',
|
||
'school2': '第二小学',
|
||
'school3': '第三小学'
|
||
};
|
||
|
||
// 年级映射
|
||
const gradeMap = {
|
||
'grade1': '一年级',
|
||
'grade2': '二年级',
|
||
'grade3': '三年级',
|
||
'grade4': '四年级',
|
||
'grade5': '五年级',
|
||
'grade6': '六年级'
|
||
};
|
||
|
||
// 班级映射
|
||
const classMap = {
|
||
'class1': '1班',
|
||
'class2': '2班',
|
||
'class3': '3班'
|
||
};
|
||
|
||
// 县（市、区）映射
|
||
const countyMap = {
|
||
'county1': '城东区',
|
||
'county2': '城西区',
|
||
'county3': '城南区',
|
||
'county4': '城北区'
|
||
};
|
||
|
||
modal.innerHTML = `
|
||
<div class="bg-white rounded-lg max-w-4xl w-full mx-4">
|
||
<div class="flex justify-between items-center p-4 border-b border-gray-200">
|
||
<h3 class="text-lg font-medium text-gray-900">视力检查详情</h3>
|
||
<button type="button" class="text-gray-400 hover:text-gray-500 focus:outline-none close-modal">
|
||
<i class="fa fa-times"></i>
|
||
</button>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-500">学生姓名</p>
|
||
<p class="text-lg font-medium text-gray-900">${record.studentName}</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-500">身份证号</p>
|
||
<p class="text-lg font-medium text-gray-900">${record.studentId}</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-500">学校</p>
|
||
<p class="text-lg font-medium text-gray-900">${schoolMap[record.school] || record.school}</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-500">县（市、区）</p>
|
||
<p class="text-lg font-medium text-gray-900">${countyMap[record.county] || record.county}</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-500">年级</p>
|
||
<p class="text-lg font-medium text-gray-900">${gradeMap[record.grade] || record.grade}</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-500">班级</p>
|
||
<p class="text-lg font-medium text-gray-900">${classMap[record.class] || record.class}</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-500">复查时间</p>
|
||
<p class="text-lg font-medium text-gray-900">${formatDate(record.reviewDate)}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t border-gray-200 pt-6 mb-6">
|
||
<h4 class="text-md font-medium text-gray-900 mb-4">眼科检查结果</h4>
|
||
|
||
<div class="overflow-x-auto">
|
||
<table class="min-w-full divide-y divide-gray-200">
|
||
<thead class="bg-gray-50">
|
||
<tr>
|
||
<th scope="col" class="table-header">检查项目</th>
|
||
<th scope="col" class="table-header">右眼</th>
|
||
<th scope="col" class="table-header">左眼</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="bg-white divide-y divide-gray-200">
|
||
<tr>
|
||
<td class="table-cell font-medium">裸眼视力</td>
|
||
<td class="table-cell">${record.nakedVisionRight || '-'}</td>
|
||
<td class="table-cell">${record.nakedVisionLeft || '-'}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="table-cell font-medium">球面镜</td>
|
||
<td class="table-cell">${record.sphereRight || '-'}</td>
|
||
<td class="table-cell">${record.sphereLeft || '-'}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="table-cell font-medium">柱镜</td>
|
||
<td class="table-cell">${record.cylinderRight || '-'}</td>
|
||
<td class="table-cell">${record.cylinderLeft || '-'}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="table-cell font-medium">轴位</td>
|
||
<td class="table-cell">${record.axisRight || '-'}</td>
|
||
<td class="table-cell">${record.axisLeft || '-'}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="table-cell font-medium">散光度数</td>
|
||
<td class="table-cell">${record.astigmatismRight || '-'}</td>
|
||
<td class="table-cell">${record.astigmatismLeft || '-'}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="table-cell font-medium">戴镜视力</td>
|
||
<td class="table-cell">${record.correctedVisionRight || '-'}</td>
|
||
<td class="table-cell">${record.correctedVisionLeft || '-'}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border-t border-gray-200 pt-6">
|
||
<div class="mb-4">
|
||
<p class="text-sm font-medium text-gray-500">诊断结果</p>
|
||
<p class="text-gray-900">${record.diagnosis || '-'}</p>
|
||
</div>
|
||
<div>
|
||
<p class="text-sm font-medium text-gray-500">处理建议</p>
|
||
<p class="text-gray-900">${record.advice || '-'}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-gray-50 px-6 py-4 flex justify-end">
|
||
<button type="button" class="btn btn-outline close-modal">关闭</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
document.body.appendChild(modal);
|
||
|
||
// 添加关闭事件
|
||
modal.querySelectorAll('.close-modal').forEach(button => {
|
||
button.addEventListener('click', function() {
|
||
document.body.removeChild(modal);
|
||
});
|
||
});
|
||
}
|
||
|
||
// 导出查询结果
|
||
function exportQueryResults() {
|
||
// 如果没有数据，显示提示
|
||
if (filteredQueryData.length === 0) {
|
||
alert('没有可导出的数据！');
|
||
return;
|
||
}
|
||
|
||
// 创建CSV内容
|
||
let csvContent = "data:text/csv;charset=utf-8,";
|
||
csvContent += "学生姓名,身份证号,学校,年级,班级,复查时间,右眼裸眼视力,左眼裸眼视力,右眼球面镜,左眼球面镜,右眼柱镜,左眼柱镜,右眼戴镜视力,左眼戴镜视力,诊断结果,处理建议\n";
|
||
|
||
// 学校名称映射
|
||
const schoolMap = {
|
||
'school1': '第一小学',
|
||
'school2': '第二小学',
|
||
'school3': '第三小学'
|
||
};
|
||
|
||
// 年级映射
|
||
const gradeMap = {
|
||
'grade1': '一年级',
|
||
'grade2': '二年级',
|
||
'grade3': '三年级',
|
||
'grade4': '四年级',
|
||
'grade5': '五年级',
|
||
'grade6': '六年级'
|
||
};
|
||
|
||
// 班级映射
|
||
const classMap = {
|
||
'class1': '1班',
|
||
'class2': '2班',
|
||
'class3': '3班'
|
||
};
|
||
|
||
filteredQueryData.forEach(record => {
|
||
csvContent += `${record.studentName},${record.studentId},${schoolMap[record.school] || record.school},${gradeMap[record.grade] || record.grade},${classMap[record.class] || record.class},${formatDate(record.reviewDate)},${record.nakedVisionRight || ''},${record.nakedVisionLeft || ''},${record.sphereRight || ''},${record.sphereLeft || ''},${record.cylinderRight || ''},${record.cylinderLeft || ''},${record.correctedVisionRight || ''},${record.correctedVisionLeft || ''},${record.diagnosis || ''},${record.advice || ''}\n`;
|
||
});
|
||
|
||
// 创建下载链接
|
||
const encodedUri = encodeURI(csvContent);
|
||
const link = document.createElement("a");
|
||
link.setAttribute("href", encodedUri);
|
||
link.setAttribute("download", `视力检查结果查询_${new Date().toISOString().split('T')[0]}.csv`);
|
||
document.body.appendChild(link);
|
||
|
||
// 触发下载
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
}
|
||
|
||
// 模拟数据
|
||
const mockData = [
|
||
{
|
||
id: 1,
|
||
studentId: '110101201001010001',
|
||
studentName: '张三',
|
||
school: 'school1',
|
||
county: 'county1',
|
||
grade: 'grade3',
|
||
class: 'class1',
|
||
reviewDate: '2025-01-15',
|
||
reviewImage: null,
|
||
nakedVisionRight: 5.0,
|
||
nakedVisionLeft: 4.9,
|
||
sphereRight: -0.50,
|
||
sphereLeft: -0.75,
|
||
cylinderRight: -0.25,
|
||
cylinderLeft: -0.50,
|
||
axisRight: '180',
|
||
axisLeft: '175',
|
||
astigmatismRight: '100',
|
||
astigmatismLeft: '150',
|
||
correctedVisionRight: 5.0,
|
||
correctedVisionLeft: 5.0,
|
||
diagnosis: '轻度近视',
|
||
advice: '注意用眼卫生，定期复查'
|
||
},
|
||
{
|
||
id: 2,
|
||
studentId: '110101201001010001',
|
||
studentName: '张三',
|
||
school: 'school1',
|
||
county: 'county1',
|
||
grade: 'grade3',
|
||
class: 'class1',
|
||
reviewDate: '2025-03-20',
|
||
reviewImage: null,
|
||
nakedVisionRight: 4.9,
|
||
nakedVisionLeft: 4.8,
|
||
sphereRight: -0.75,
|
||
sphereLeft: -1.00,
|
||
cylinderRight: -0.25,
|
||
cylinderLeft: -0.50,
|
||
axisRight: '180',
|
||
axisLeft: '175',
|
||
astigmatismRight: '100',
|
||
astigmatismLeft: '150',
|
||
correctedVisionRight: 5.0,
|
||
correctedVisionLeft: 5.0,
|
||
diagnosis: '轻度近视',
|
||
advice: '注意用眼卫生，增加户外活动时间，定期复查'
|
||
},
|
||
{
|
||
id: 3,
|
||
studentId: '110101201001010001',
|
||
studentName: '张三',
|
||
school: 'school1',
|
||
county: 'county1',
|
||
grade: 'grade3',
|
||
class: 'class1',
|
||
reviewDate: '2025-06-10',
|
||
reviewImage: null,
|
||
nakedVisionRight: 4.8,
|
||
nakedVisionLeft: 4.7,
|
||
sphereRight: -1.00,
|
||
sphereLeft: -1.25,
|
||
cylinderRight: -0.25,
|
||
cylinderLeft: -0.50,
|
||
axisRight: '180',
|
||
axisLeft: '175',
|
||
astigmatismRight: '100',
|
||
astigmatismLeft: '150',
|
||
correctedVisionRight: 5.0,
|
||
correctedVisionLeft: 5.0,
|
||
diagnosis: '中度近视',
|
||
advice: '建议配镜矫正，注意用眼卫生，增加户外活动时间，3个月后复查'
|
||
}
|
||
];
|
||
|
||
// 添加模拟数据
|
||
visionData = [...mockData];
|
||
});
|
||
|
||
// 日期格式化函数
|
||
function formatDate(dateString) {
|
||
const date = new Date(dateString);
|
||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |