953 lines
49 KiB
HTML
953 lines
49 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">
|
|
<!-- 统一的 Tailwind 配置 -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#1E40AF', // 深蓝色主色调
|
|
secondary: '#F9FAFB', // 浅灰色背景
|
|
textDark: '#1F2937', // 深灰色文字
|
|
warning: '#DC2626', // 红色（异常值提示）
|
|
success: '#10B981', // 绿色（确认操作）
|
|
alert: '#F59E0B', // 黄色（提醒信息）
|
|
borderColor: '#E5E7EB', // 边框颜色
|
|
hoverBg: '#F3F4F6', // 悬停背景色
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
boxShadow: {
|
|
'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
|
'modal': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
.transition-all-300 {
|
|
transition: all 300ms ease-in-out;
|
|
}
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 3px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background: #a1a1a1;
|
|
}
|
|
}
|
|
</style>
|
|
<style>
|
|
/* 自定义动画效果 */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
.animate-delay-100 { animation-delay: 0.1s; }
|
|
.animate-delay-200 { animation-delay: 0.2s; }
|
|
.animate-delay-300 { animation-delay: 0.3s; }
|
|
|
|
/* 输入框提示文字样式 */
|
|
.input-hint::-webkit-input-placeholder {
|
|
color: #9CA3AF;
|
|
font-style: italic;
|
|
}
|
|
|
|
.input-hint::-moz-placeholder {
|
|
color: #9CA3AF;
|
|
font-style: italic;
|
|
}
|
|
|
|
.input-hint:-ms-input-placeholder {
|
|
color: #9CA3AF;
|
|
font-style: italic;
|
|
}
|
|
|
|
.input-hint:-moz-placeholder {
|
|
color: #9CA3AF;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* 表格行悬停效果 */
|
|
.table-row-hover {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.table-row-hover:hover {
|
|
background-color: #F9FAFB;
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
/* 异常值闪烁提示 */
|
|
@keyframes pulseWarning {
|
|
0% { background-color: rgba(220, 38, 38, 0.1); }
|
|
50% { background-color: rgba(220, 38, 38, 0.2); }
|
|
100% { background-color: rgba(220, 38, 38, 0.1); }
|
|
}
|
|
|
|
.pulse-warning {
|
|
animation: pulseWarning 2s infinite;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-secondary text-textDark min-h-screen flex flex-col">
|
|
<!-- 顶部导航栏 -->
|
|
<header class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 py-3 flex items-center justify-between">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa fa-heartbeat text-primary text-2xl"></i>
|
|
<h1 class="text-xl font-bold text-primary">学生体检数据极值审核系统</h1>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<span class="text-sm text-gray-600">欢迎，管理员</span>
|
|
<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主要内容区 -->
|
|
<div class="flex flex-1 overflow-hidden">
|
|
<!-- 左侧导航菜单 -->
|
|
<nav class="w-64 bg-white shadow-sm flex-shrink-0 h-[calc(100vh-64px)] sticky top-[64px]">
|
|
<div class="p-4">
|
|
<div class="flex items-center justify-between cursor-pointer" id="mainMenu">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa fa-list-alt text-primary"></i>
|
|
<span class="font-medium">数据审核</span>
|
|
</div>
|
|
<i class="fa fa-chevron-down text-xs text-gray-500 transition-transform duration-300" id="menuChevron"></i>
|
|
</div>
|
|
|
|
<!-- 二级菜单 -->
|
|
<div class="mt-2 pl-6 space-y-1" id="subMenu">
|
|
<a href="#" class="block py-2 px-3 rounded-md bg-primary bg-opacity-10 text-primary text-sm font-medium hover:bg-opacity-20 transition-all-300 submenu-item active" data-target="height-weight">
|
|
<i class="fa fa-arrows-v mr-2"></i>身高体重
|
|
</a>
|
|
<a href="#" class="block py-2 px-3 rounded-md text-gray-700 text-sm font-medium hover:bg-hoverBg transition-all-300 submenu-item" data-target="blood-pressure">
|
|
<i class="fa fa-tint mr-2"></i>血压
|
|
</a>
|
|
<a href="#" class="block py-2 px-3 rounded-md text-gray-700 text-sm font-medium hover:bg-hoverBg transition-all-300 submenu-item" data-target="vision">
|
|
<i class="fa fa-eye mr-2"></i>裸眼视力
|
|
</a>
|
|
<a href="#" class="block py-2 px-3 rounded-md text-gray-700 text-sm font-medium hover:bg-hoverBg transition-all-300 submenu-item" data-target="dental">
|
|
<i class="fa fa-smile-o mr-2"></i>龋齿
|
|
</a>
|
|
<a href="#" class="block py-2 px-3 rounded-md text-gray-700 text-sm font-medium hover:bg-hoverBg transition-all-300 submenu-item" data-target="refraction">
|
|
<i class="fa fa-binoculars mr-2"></i>视力屈光
|
|
</a>
|
|
<a href="#" class="block py-2 px-3 rounded-md text-gray-700 text-sm font-medium hover:bg-hoverBg transition-all-300 submenu-item" data-target="lung-capacity">
|
|
<i class="fa fa-lungs mr-2"></i>肺活量
|
|
</a>
|
|
<a href="#" class="block py-2 px-3 rounded-md text-gray-700 text-sm font-medium hover:bg-hoverBg transition-all-300 submenu-item" data-target="hemoglobin">
|
|
<i class="fa fa-tint mr-2"></i>血红蛋白
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部信息 -->
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 text-xs text-gray-500">
|
|
<div class="border-t border-gray-200 pt-2">
|
|
<p>© 2025 学生体检数据极值审核系统</p>
|
|
<p class="mt-1">版本 1.0.0</p>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 右侧内容区 -->
|
|
<main class="flex-1 overflow-y-auto bg-gray-50 p-6 scrollbar-thin">
|
|
<!-- 页面标题 -->
|
|
<div class="mb-6 animate-fadeIn">
|
|
<h2 class="text-2xl font-bold text-gray-800" id="pageTitle">身高体重数据审核</h2>
|
|
<p class="text-gray-600 mt-1">查看和处理超出正常范围的身高体重数据</p>
|
|
</div>
|
|
|
|
<!-- 筛选条件区 -->
|
|
<div class="bg-white rounded-lg shadow-card p-6 mb-6 animate-fadeIn animate-delay-100">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label for="school" class="block text-sm font-medium text-gray-700 mb-1">学校</label>
|
|
<select id="school" class="w-full border border-borderColor rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
|
<option value="">全部学校</option>
|
|
<option value="1">第一中学</option>
|
|
<option value="2">第二中学</option>
|
|
<option value="3">第三中学</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="grade" class="block text-sm font-medium text-gray-700 mb-1">年级</label>
|
|
<select id="grade" class="w-full border border-borderColor rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
|
<option value="">全部年级</option>
|
|
<option value="1">一年级</option>
|
|
<option value="2">二年级</option>
|
|
<option value="3">三年级</option>
|
|
<option value="4">四年级</option>
|
|
<option value="5">五年级</option>
|
|
<option value="6">六年级</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="class" class="block text-sm font-medium text-gray-700 mb-1">班级</label>
|
|
<select id="class" class="w-full border border-borderColor rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
|
|
<option value="">全部班级</option>
|
|
<option value="1">1班</option>
|
|
<option value="2">2班</option>
|
|
<option value="3">3班</option>
|
|
<option value="4">4班</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex justify-end">
|
|
<button id="resetBtn" class="px-4 py-2 border border-borderColor rounded-md text-gray-700 mr-2 hover:bg-gray-50 transition-all-300">
|
|
<i class="fa fa-refresh mr-1"></i> 重置
|
|
</button>
|
|
<button id="searchBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
|
|
<i class="fa fa-search mr-1"></i> 查询
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据统计卡片 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div class="bg-white rounded-lg shadow-card p-4 animate-fadeIn animate-delay-200">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-500">总异常数据</p>
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">24</h3>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-full bg-warning bg-opacity-10 flex items-center justify-center">
|
|
<i class="fa fa-exclamation-triangle text-warning"></i>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 text-xs text-gray-500">
|
|
<span class="text-warning"><i class="fa fa-arrow-up"></i> 5%</span> 较上周
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-card p-4 animate-fadeIn animate-delay-200">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-500">已处理数据</p>
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">18</h3>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-full bg-success bg-opacity-10 flex items-center justify-center">
|
|
<i class="fa fa-check text-success"></i>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 text-xs text-gray-500">
|
|
<span class="text-success"><i class="fa fa-arrow-up"></i> 12%</span> 较上周
|
|
</div>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-card p-4 animate-fadeIn animate-delay-200">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-500">待处理数据</p>
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">6</h3>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-full bg-alert bg-opacity-10 flex items-center justify-center">
|
|
<i class="fa fa-clock-o text-alert"></i>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 text-xs text-gray-500">
|
|
<span class="text-alert"><i class="fa fa-arrow-down"></i> 3%</span> 较上周
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据列表区 -->
|
|
<div class="bg-white rounded-lg shadow-card overflow-hidden animate-fadeIn animate-delay-300">
|
|
<div class="overflow-x-auto scrollbar-thin">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
序号
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
学校
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
年级/班级
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
学生姓名
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
性别
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
年龄
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
身高(cm)
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
体重(kg)
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
正常范围
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
操作
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200" id="dataTableBody">
|
|
<!-- 数据行将通过JavaScript动态生成 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页控件 -->
|
|
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
|
<div class="flex-1 flex justify-between sm:hidden">
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
上一页
|
|
</a>
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
下一页
|
|
</a>
|
|
</div>
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-700">
|
|
显示第 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium">24</span> 条结果
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">上一页</span>
|
|
<i class="fa fa-chevron-left"></i>
|
|
</a>
|
|
<a href="#" aria-current="page" class="z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
1
|
|
</a>
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
2
|
|
</a>
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
3
|
|
</a>
|
|
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
|
...
|
|
</span>
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
8
|
|
</a>
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
<span class="sr-only">下一页</span>
|
|
<i class="fa fa-chevron-right"></i>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据录入示例区 (折叠展示) -->
|
|
<div class="mt-6 bg-white rounded-lg shadow-card overflow-hidden animate-fadeIn animate-delay-300">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between cursor-pointer" id="entryExampleHeader">
|
|
<h3 class="text-lg font-medium text-gray-900">数据录入示例</h3>
|
|
<i class="fa fa-chevron-down text-gray-500 transition-transform duration-300" id="entryExampleChevron"></i>
|
|
</div>
|
|
<div class="px-6 py-4 hidden" id="entryExampleContent">
|
|
<p class="text-sm text-gray-600 mb-4">录入数据时，输入框内会显示灰色的极值范围提示，超出范围的值会在提交时提醒用户确认。</p>
|
|
|
|
<div class="max-w-md">
|
|
<div class="mb-4">
|
|
<label for="heightEntry" class="block text-sm font-medium text-gray-700 mb-1">身高 (cm)</label>
|
|
<input type="number" id="heightEntry" placeholder="正常范围: 110.0 - 170.0" class="w-full border border-borderColor rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent input-hint">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="weightEntry" class="block text-sm font-medium text-gray-700 mb-1">体重 (kg)</label>
|
|
<input type="number" id="weightEntry" placeholder="正常范围: 18.0 - 70.0" class="w-full border border-borderColor rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent input-hint">
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button id="submitEntryBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
|
|
<i class="fa fa-save mr-1"></i> 提交数据
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 修改结果模态框 -->
|
|
<div id="modifyModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-lg shadow-modal w-full max-w-md animate-fadeIn">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
|
<h3 class="text-lg font-medium text-gray-900">修改体检结果</h3>
|
|
<button id="closeModifyModal" class="text-gray-400 hover:text-gray-500">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<div class="mb-4">
|
|
<p class="text-sm text-gray-600 mb-2">学生信息：<span class="font-medium" id="studentInfo">张三 (一年级/1班)</span></p>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="modifyHeight" class="block text-sm font-medium text-gray-700 mb-1">身高 (cm)</label>
|
|
<input type="number" id="modifyHeight" placeholder="正常范围: 110.0 - 170.0" class="w-full border border-borderColor rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent input-hint">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="modifyWeight" class="block text-sm font-medium text-gray-700 mb-1">体重 (kg)</label>
|
|
<input type="number" id="modifyWeight" placeholder="正常范围: 18.0 - 70.0" class="w-full border border-borderColor rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent input-hint">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="modifyReason" class="block text-sm font-medium text-gray-700 mb-1">修改原因 (可选)</label>
|
|
<textarea id="modifyReason" rows="2" class="w-full border border-borderColor rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-2">
|
|
<button id="cancelModify" class="px-4 py-2 border border-borderColor rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">
|
|
取消
|
|
</button>
|
|
<button id="confirmModify" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
|
|
确认修改
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 确认无误模态框 -->
|
|
<div id="confirmModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-lg shadow-modal w-full max-w-md animate-fadeIn">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
|
<h3 class="text-lg font-medium text-gray-900">确认数据无误</h3>
|
|
<button id="closeConfirmModal" class="text-gray-400 hover:text-gray-500">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<p class="text-sm text-gray-600 mb-4">您确定要标记该学生的体检数据为"确认无误"吗？</p>
|
|
<div class="bg-gray-50 p-3 rounded-md mb-4">
|
|
<p class="text-sm"><span class="font-medium">学生：</span><span id="confirmStudentInfo">张三 (一年级/1班)</span></p>
|
|
<p class="text-sm mt-1"><span class="font-medium">身高：</span><span id="confirmHeight" class="text-warning font-medium">175.0 cm</span> <span class="text-xs text-gray-500">(正常范围: 110.0 - 170.0)</span></p>
|
|
<p class="text-sm mt-1"><span class="font-medium">体重：</span><span id="confirmWeight">35.0 kg</span> <span class="text-xs text-gray-500">(正常范围: 18.0 - 70.0)</span></p>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="confirmReason" class="block text-sm font-medium text-gray-700 mb-1">确认原因 (可选)</label>
|
|
<textarea id="confirmReason" rows="2" class="w-full border border-borderColor rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="例如：特长生、医学特殊情况等"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-2">
|
|
<button id="cancelConfirm" class="px-4 py-2 border border-borderColor rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">
|
|
取消
|
|
</button>
|
|
<button id="confirmConfirm" class="px-4 py-2 bg-success text-white rounded-md hover:bg-success/90 transition-all-300">
|
|
确认无误
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 提交提醒模态框 -->
|
|
<div id="submitAlertModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
|
|
<div class="bg-white rounded-lg shadow-modal w-full max-w-md animate-fadeIn">
|
|
<div class="px-6 py-4 border-b border-gray-200 flex items-center">
|
|
<i class="fa fa-exclamation-circle text-alert mr-2"></i>
|
|
<h3 class="text-lg font-medium text-gray-900">超出正常范围提醒</h3>
|
|
</div>
|
|
<div class="px-6 py-4">
|
|
<p class="text-sm text-gray-600 mb-4">您输入的值超出了正常范围，是否确认提交？</p>
|
|
<div class="bg-gray-50 p-3 rounded-md mb-4">
|
|
<p class="text-sm"><span class="font-medium">身高：</span><span id="alertHeight" class="text-warning font-medium">175.0 cm</span> <span class="text-xs text-gray-500">(正常范围: 110.0 - 170.0)</span></p>
|
|
<p class="text-sm mt-1"><span class="font-medium">体重：</span><span id="alertWeight">35.0 kg</span> <span class="text-xs text-gray-500">(正常范围: 18.0 - 70.0)</span></p>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="alertReason" class="block text-sm font-medium text-gray-700 mb-1">原因说明 (可选)</label>
|
|
<textarea id="alertReason" rows="2" class="w-full border border-borderColor rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入超出范围的原因（如测量误差、特殊情况等）"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-2">
|
|
<button id="cancelSubmit" class="px-4 py-2 border border-borderColor rounded-md text-gray-700 hover:bg-gray-50 transition-all-300">
|
|
返回修改
|
|
</button>
|
|
<button id="confirmSubmit" class="px-4 py-2 bg-alert text-white rounded-md hover:bg-alert/90 transition-all-300">
|
|
确认提交
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 成功提示 -->
|
|
<div id="successToast" class="fixed bottom-4 right-4 bg-success text-white px-4 py-3 rounded-md shadow-lg flex items-center hidden animate-fadeIn">
|
|
<i class="fa fa-check-circle mr-2"></i>
|
|
<span id="successMessage">操作成功！</span>
|
|
</div>
|
|
|
|
<script>
|
|
// 模拟数据
|
|
const mockData = [
|
|
{
|
|
id: 1,
|
|
school: "第一中学",
|
|
grade: "一年级",
|
|
class: "1班",
|
|
name: "张三",
|
|
gender: "男",
|
|
age: 7,
|
|
height: 175.0,
|
|
heightRange: "110.0 - 170.0",
|
|
weight: 35.0,
|
|
weightRange: "18.0 - 70.0",
|
|
abnormalField: "height"
|
|
},
|
|
{
|
|
id: 2,
|
|
school: "第一中学",
|
|
grade: "一年级",
|
|
class: "1班",
|
|
name: "李四",
|
|
gender: "女",
|
|
age: 7,
|
|
height: 120.0,
|
|
heightRange: "110.0 - 170.0",
|
|
weight: 75.0,
|
|
weightRange: "18.0 - 70.0",
|
|
abnormalField: "weight"
|
|
},
|
|
{
|
|
id: 3,
|
|
school: "第一中学",
|
|
grade: "一年级",
|
|
class: "2班",
|
|
name: "王五",
|
|
gender: "男",
|
|
age: 7,
|
|
height: 105.0,
|
|
heightRange: "110.0 - 170.0",
|
|
weight: 30.0,
|
|
weightRange: "18.0 - 70.0",
|
|
abnormalField: "height"
|
|
},
|
|
{
|
|
id: 4,
|
|
school: "第二中学",
|
|
grade: "二年级",
|
|
class: "1班",
|
|
name: "赵六",
|
|
gender: "女",
|
|
age: 8,
|
|
height: 130.0,
|
|
heightRange: "115.0 - 175.0",
|
|
weight: 20.0,
|
|
weightRange: "20.0 - 75.0",
|
|
abnormalField: ""
|
|
},
|
|
{
|
|
id: 5,
|
|
school: "第二中学",
|
|
grade: "二年级",
|
|
class: "2班",
|
|
name: "钱七",
|
|
gender: "男",
|
|
age: 8,
|
|
height: 110.0,
|
|
heightRange: "115.0 - 175.0",
|
|
weight: 18.0,
|
|
weightRange: "20.0 - 75.0",
|
|
abnormalField: "height,weight"
|
|
},
|
|
{
|
|
id: 6,
|
|
school: "第三中学",
|
|
grade: "三年级",
|
|
class: "1班",
|
|
name: "孙八",
|
|
gender: "女",
|
|
age: 9,
|
|
height: 140.0,
|
|
heightRange: "120.0 - 180.0",
|
|
weight: 80.0,
|
|
weightRange: "22.0 - 80.0",
|
|
abnormalField: ""
|
|
}
|
|
];
|
|
|
|
// 当前选中的学生数据
|
|
let currentStudent = null;
|
|
|
|
// DOM 加载完成后执行
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 初始化数据表格
|
|
renderDataTable(mockData);
|
|
|
|
// 菜单展开/折叠
|
|
const mainMenu = document.getElementById('mainMenu');
|
|
const subMenu = document.getElementById('subMenu');
|
|
const menuChevron = document.getElementById('menuChevron');
|
|
|
|
mainMenu.addEventListener('click', function() {
|
|
subMenu.classList.toggle('hidden');
|
|
menuChevron.classList.toggle('rotate-180');
|
|
});
|
|
|
|
// 二级菜单切换
|
|
const submenuItems = document.querySelectorAll('.submenu-item');
|
|
const pageTitle = document.getElementById('pageTitle');
|
|
|
|
submenuItems.forEach(item => {
|
|
item.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
// 移除所有活动状态
|
|
submenuItems.forEach(i => {
|
|
i.classList.remove('bg-primary', 'bg-opacity-10', 'text-primary');
|
|
i.classList.add('text-gray-700');
|
|
});
|
|
|
|
// 添加当前活动状态
|
|
this.classList.add('bg-primary', 'bg-opacity-10', 'text-primary');
|
|
this.classList.remove('text-gray-700');
|
|
|
|
// 更新页面标题
|
|
const title = this.textContent.trim();
|
|
pageTitle.textContent = `${title}数据审核`;
|
|
|
|
// 这里可以根据选择的菜单项加载不同的数据
|
|
// 示例中仅更新标题，实际应用中应加载对应的数据
|
|
});
|
|
});
|
|
|
|
// 数据录入示例展开/折叠
|
|
const entryExampleHeader = document.getElementById('entryExampleHeader');
|
|
const entryExampleContent = document.getElementById('entryExampleContent');
|
|
const entryExampleChevron = document.getElementById('entryExampleChevron');
|
|
|
|
entryExampleHeader.addEventListener('click', function() {
|
|
entryExampleContent.classList.toggle('hidden');
|
|
entryExampleChevron.classList.toggle('rotate-180');
|
|
});
|
|
|
|
// 修改结果模态框
|
|
const modifyModal = document.getElementById('modifyModal');
|
|
const closeModifyModal = document.getElementById('closeModifyModal');
|
|
const cancelModify = document.getElementById('cancelModify');
|
|
const confirmModify = document.getElementById('confirmModify');
|
|
|
|
// 确认无误模态框
|
|
const confirmModal = document.getElementById('confirmModal');
|
|
const closeConfirmModal = document.getElementById('closeConfirmModal');
|
|
const cancelConfirm = document.getElementById('cancelConfirm');
|
|
const confirmConfirm = document.getElementById('confirmConfirm');
|
|
|
|
// 提交提醒模态框
|
|
const submitAlertModal = document.getElementById('submitAlertModal');
|
|
const closeSubmitAlertModal = document.getElementById('closeSubmitAlertModal');
|
|
const cancelSubmit = document.getElementById('cancelSubmit');
|
|
const confirmSubmit = document.getElementById('confirmSubmit');
|
|
const submitEntryBtn = document.getElementById('submitEntryBtn');
|
|
|
|
// 成功提示
|
|
const successToast = document.getElementById('successToast');
|
|
|
|
// 关闭模态框
|
|
closeModifyModal.addEventListener('click', () => modifyModal.classList.add('hidden'));
|
|
cancelModify.addEventListener('click', () => modifyModal.classList.add('hidden'));
|
|
|
|
closeConfirmModal.addEventListener('click', () => confirmModal.classList.add('hidden'));
|
|
cancelConfirm.addEventListener('click', () => confirmModal.classList.add('hidden'));
|
|
|
|
cancelSubmit.addEventListener('click', () => submitAlertModal.classList.add('hidden'));
|
|
|
|
// 查询按钮
|
|
const searchBtn = document.getElementById('searchBtn');
|
|
searchBtn.addEventListener('click', function() {
|
|
// 模拟查询操作
|
|
const school = document.getElementById('school').value;
|
|
const grade = document.getElementById('grade').value;
|
|
const classNum = document.getElementById('class').value;
|
|
|
|
// 在实际应用中，这里应该发送请求获取数据
|
|
// 示例中仅显示成功提示
|
|
showSuccessToast('查询成功！');
|
|
});
|
|
|
|
// 重置按钮
|
|
const resetBtn = document.getElementById('resetBtn');
|
|
resetBtn.addEventListener('click', function() {
|
|
document.getElementById('school').value = '';
|
|
document.getElementById('grade').value = '';
|
|
document.getElementById('class').value = '';
|
|
|
|
// 重新渲染原始数据
|
|
renderDataTable(mockData);
|
|
});
|
|
|
|
// 提交数据按钮
|
|
submitEntryBtn.addEventListener('click', function() {
|
|
const height = parseFloat(document.getElementById('heightEntry').value);
|
|
const weight = parseFloat(document.getElementById('weightEntry').value);
|
|
|
|
// 模拟数据验证
|
|
if (isNaN(height) || isNaN(weight)) {
|
|
alert('请输入有效的数字');
|
|
return;
|
|
}
|
|
|
|
// 检查是否超出范围
|
|
const heightOutOfRange = height < 110 || height > 170;
|
|
const weightOutOfRange = weight < 18 || weight > 70;
|
|
|
|
if (heightOutOfRange || weightOutOfRange) {
|
|
// 显示提醒模态框
|
|
document.getElementById('alertHeight').textContent = height.toFixed(1) + ' cm';
|
|
document.getElementById('alertWeight').textContent = weight.toFixed(1) + ' kg';
|
|
|
|
if (!heightOutOfRange) {
|
|
document.getElementById('alertHeight').classList.remove('text-warning', 'font-medium');
|
|
} else {
|
|
document.getElementById('alertHeight').classList.add('text-warning', 'font-medium');
|
|
}
|
|
|
|
if (!weightOutOfRange) {
|
|
document.getElementById('alertWeight').classList.remove('text-warning', 'font-medium');
|
|
} else {
|
|
document.getElementById('alertWeight').classList.add('text-warning', 'font-medium');
|
|
}
|
|
|
|
submitAlertModal.classList.remove('hidden');
|
|
} else {
|
|
// 直接提交成功
|
|
showSuccessToast('数据提交成功！');
|
|
document.getElementById('heightEntry').value = '';
|
|
document.getElementById('weightEntry').value = '';
|
|
}
|
|
});
|
|
|
|
// 确认提交按钮
|
|
confirmSubmit.addEventListener('click', function() {
|
|
submitAlertModal.classList.add('hidden');
|
|
showSuccessToast('数据已确认提交！');
|
|
document.getElementById('heightEntry').value = '';
|
|
document.getElementById('weightEntry').value = '';
|
|
document.getElementById('alertReason').value = '';
|
|
});
|
|
|
|
// 确认修改按钮
|
|
confirmModify.addEventListener('click', function() {
|
|
const newHeight = parseFloat(document.getElementById('modifyHeight').value);
|
|
const newWeight = parseFloat(document.getElementById('modifyWeight').value);
|
|
|
|
if (isNaN(newHeight) || isNaN(newWeight)) {
|
|
alert('请输入有效的数字');
|
|
return;
|
|
}
|
|
|
|
// 模拟修改操作
|
|
modifyModal.classList.add('hidden');
|
|
showSuccessToast('数据修改成功！');
|
|
|
|
// 在实际应用中，这里应该更新数据并重新渲染表格
|
|
if (currentStudent) {
|
|
// 更新当前学生数据
|
|
currentStudent.height = newHeight;
|
|
currentStudent.weight = newWeight;
|
|
|
|
// 重新渲染表格
|
|
renderDataTable(mockData);
|
|
}
|
|
});
|
|
|
|
// 确认无误按钮
|
|
confirmConfirm.addEventListener('click', function() {
|
|
// 模拟确认操作
|
|
confirmModal.classList.add('hidden');
|
|
showSuccessToast('已确认数据无误！');
|
|
|
|
// 在实际应用中，这里应该更新数据状态并从列表中移除
|
|
if (currentStudent) {
|
|
// 从数据列表中移除当前学生
|
|
const index = mockData.findIndex(item => item.id === currentStudent.id);
|
|
if (index !== -1) {
|
|
mockData.splice(index, 1);
|
|
renderDataTable(mockData);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// 渲染数据表格
|
|
function renderDataTable(data) {
|
|
const tableBody = document.getElementById('dataTableBody');
|
|
tableBody.innerHTML = '';
|
|
|
|
if (data.length === 0) {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td colspan="10" class="px-6 py-4 text-center text-sm text-gray-500">
|
|
暂无数据
|
|
</td>
|
|
`;
|
|
tableBody.appendChild(row);
|
|
return;
|
|
}
|
|
|
|
data.forEach((item, index) => {
|
|
const row = document.createElement('tr');
|
|
row.className = 'table-row-hover';
|
|
|
|
// 检查是否有异常字段
|
|
const heightAbnormal = item.abnormalField.includes('height');
|
|
const weightAbnormal = item.abnormalField.includes('weight');
|
|
|
|
// 添加脉冲效果（如果有异常）
|
|
if (heightAbnormal || weightAbnormal) {
|
|
row.classList.add('pulse-warning');
|
|
}
|
|
|
|
row.innerHTML = `
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
${index + 1}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
${item.school}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
${item.grade}/${item.class}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
${item.name}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
${item.gender}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
${item.age}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm ${heightAbnormal ? 'text-warning font-medium' : 'text-gray-500'}">
|
|
${item.height.toFixed(1)}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm ${weightAbnormal ? 'text-warning font-medium' : 'text-gray-500'}">
|
|
${item.weight.toFixed(1)}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
<div>身高: ${item.heightRange}</div>
|
|
<div>体重: ${item.weightRange}</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
<button class="modify-btn text-primary hover:text-primary/80 mr-3" data-id="${item.id}">
|
|
<i class="fa fa-pencil mr-1"></i> 修改结果
|
|
</button>
|
|
<button class="confirm-btn text-success hover:text-success/80" data-id="${item.id}">
|
|
<i class="fa fa-check-circle mr-1"></i> 确认无误
|
|
</button>
|
|
</td>
|
|
`;
|
|
|
|
tableBody.appendChild(row);
|
|
});
|
|
|
|
// 添加修改和确认按钮事件
|
|
addButtonEvents();
|
|
}
|
|
|
|
// 添加按钮事件
|
|
function addButtonEvents() {
|
|
// 修改按钮
|
|
const modifyBtns = document.querySelectorAll('.modify-btn');
|
|
modifyBtns.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const id = parseInt(this.getAttribute('data-id'));
|
|
currentStudent = mockData.find(item => item.id === id);
|
|
|
|
if (currentStudent) {
|
|
document.getElementById('studentInfo').textContent = `${currentStudent.name} (${currentStudent.grade}/${currentStudent.class})`;
|
|
document.getElementById('modifyHeight').value = currentStudent.height.toFixed(1);
|
|
document.getElementById('modifyWeight').value = currentStudent.weight.toFixed(1);
|
|
document.getElementById('modifyReason').value = '';
|
|
|
|
document.getElementById('modifyModal').classList.remove('hidden');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 确认按钮
|
|
const confirmBtns = document.querySelectorAll('.confirm-btn');
|
|
confirmBtns.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const id = parseInt(this.getAttribute('data-id'));
|
|
currentStudent = mockData.find(item => item.id === id);
|
|
|
|
if (currentStudent) {
|
|
document.getElementById('confirmStudentInfo').textContent = `${currentStudent.name} (${currentStudent.grade}/${currentStudent.class})`;
|
|
document.getElementById('confirmHeight').textContent = currentStudent.height.toFixed(1) + ' cm';
|
|
document.getElementById('confirmWeight').textContent = currentStudent.weight.toFixed(1) + ' kg';
|
|
|
|
// 检查是否异常
|
|
const heightAbnormal = currentStudent.abnormalField.includes('height');
|
|
const weightAbnormal = currentStudent.abnormalField.includes('weight');
|
|
|
|
if (heightAbnormal) {
|
|
document.getElementById('confirmHeight').classList.add('text-warning', 'font-medium');
|
|
} else {
|
|
document.getElementById('confirmHeight').classList.remove('text-warning', 'font-medium');
|
|
}
|
|
|
|
if (weightAbnormal) {
|
|
document.getElementById('confirmWeight').classList.add('text-warning', 'font-medium');
|
|
} else {
|
|
document.getElementById('confirmWeight').classList.remove('text-warning', 'font-medium');
|
|
}
|
|
|
|
document.getElementById('confirmReason').value = '';
|
|
document.getElementById('confirmModal').classList.remove('hidden');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// 显示成功提示
|
|
function showSuccessToast(message) {
|
|
const toast = document.getElementById('successToast');
|
|
const messageElement = document.getElementById('successMessage');
|
|
|
|
messageElement.textContent = message;
|
|
toast.classList.remove('hidden');
|
|
|
|
// 3秒后自动隐藏
|
|
setTimeout(() => {
|
|
toast.classList.add('hidden');
|
|
}, 3000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|