binghuai/qwsy
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

12.11

Browse Source
This commit is contained in:
binghuai
2025-12-11 19:15:42 +08:00
parent de4b3a5167
commit f4aa3446b6
11 changed files with 3412 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
月度/12月/12月.md
View File

@@ -233,8 +233,11 @@ feat(podcast): 支持根据type字段跳转播客页面
[新市区表](https://www.binghuai.xyz/markdown/20251205220747148.png)
2.确认<span style="color:#3EC1D3 !important;">巴州常见病</span>需求，并安排排期
2.确认<span style="color:#3EC1D3 !important;">巴州常见病</span>新需求，并安排排期
[[V1.1-巴州常见病系统需求确认书.docx]]
[[视力筛查管理.html]]
[[数据审核功能.html]]
[[中班视力专项统计.html]]
3.修复<span style="color:#3EC1D3 !important;">中考体育</span>国产化BUG
> [!tip]
@@ -265,3 +268,160 @@ feat(podcast): 支持根据type字段跳转播客页面
> - 修改保存数据的AJAX请求，使用直接 $.ajax 调用并添加成功和错误回调。
> - 改进错误处理，添加 try-catch 块和更详细的错误消息。
> - 清理代码注释和格式，提升可读性。
# D50周
## 12.8
1.<span style="color:#3EC1D3 !important;">石榴籽</span>
feat(snow-holiday): 新增评论功能并优化点赞删除逻辑
- 在前端页面添加评论列表、评论输入区域及相关样式
- 支持用户发表评论及展示评论内容
- 修改后端点赞删除接口参数类型为String
- 更新MyBatis映射文件中对应SQL语句的参数类型
- 调整服务层和控制器中的方法签名以适配变更
- 修复活动删除时点赞记录关联删除的问题
2.对<span style="color:#3EC1D3 !important;">晨午检</span>访问不通进行排查
3.<span style="color:#3EC1D3 !important;">晨午检</span>预警地图进行优化
> [!tip]
> 高德地图api使用,需要代入安全密钥
```js
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "5f6ea4083069e32ec9b62af316596164",
};
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=3158c3661b1ca704535a7a6c8382cb3b&plugin=AMap.DistrictSearch"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
```
feat(sys): 优化系统首页地图展示与数据统计功能
- 移除旧版高德地图API脚本引用，更新为新版API及安全配置
- 重构地图初始化逻辑，实现新疆区域掩模显示与3D视图支持
- 删除冗余的地图加载提示元素，优化页面结构
- 调整ECharts图表数据解密格式化代码的缩进规范
- 增加地图加载失败的降级处理机制，提升系统稳定性
- 优化地图与图表组件的初始化时序，确保数据正确渲染
## 12.9
1.<span style="color:#3EC1D3 !important;">巴州常见病</span>
> [!note] <span style="color:#00b050 !important;">中班视力专项统计</span>需求
>
![image.png](https://www.binghuai.xyz/markdown/20251209160424437.png)
**后端**
feat(statistics): 新增中班视力筛查统计功能
- 添加视力筛查统计控制器、服务及数据传输对象
- 实现统计数据汇总与Excel导出功能
- 构建摘要卡片、详细数据项及图表数据结构
- 创建视力筛查统计映射器接口及实现类
- 增加视力筛查服务接口用于获取学校年级视力数据
- 实现统计计算逻辑，包括眼轴、角膜曲率等关键指标分析
**前端**
feat(shili): 实现幼儿园中班视力筛查统计报表功能
- 新增视力筛查统计页面，包含查询条件、数据摘要、图表展示和详细数据
- 集成 Chart.js 实现眼轴长度和角膜曲率对比图表
- 添加数据导出 Excel 功能
- 引入 Font Awesome 图标库优化界面展示
- 完善区域选择级联和筛选逻辑
- 优化页面样式和响应式布局
- 修复 vue.config.js 中的路径配置问题
**追加**
feat(statistics): 新增中班视力筛查统计功能
- 添加获取指定学校和年份下班级列表的接口
- 在视力筛查查询参数中增加班级ID字段
- 实现根据学校ID和年份查询班级信息的Mapper方法
- 扩展统计服务接口与实现，支持按班级筛选数据
- 优化视力筛查统计数据导出逻辑及显示内容
- 更新XML映射文件以支持新增字段和查询条件
- 完善视力各项指标判断规则和状态描述信息
- 修正眼轴正常范围年龄段描述文字错误
- 增加对空值处理的安全性检查避免SQL异常
- 调整角膜厚度等其他眼部参数的标准区间设定
feat(static): 增加班级筛选功能并优化视力统计报表
- 新增班级选择下拉框，支持按班级筛选数据
- 优化区域选择逻辑，支持学校层级班级加载
- 更新表格样式，突出显示无标准参考范围提示
- 导出文件名增加区域和班级信息
- 调整图表更新逻辑和页面布局结构
- 修复区域选择时班级数据重置问题
# 12.10
1.优化新市区体测2024年数据与上半年新市区体测的2024年数据一致
[[v7.0 2025年5月29日161426 高新区（新市区）报告书.docx]]
2.晨午检
> [!WARNING] BUG
> 修复<span style="color:#3EC1D3 !important;">晨午检</span>因病缺课统计和晨午检登记查询里的因病缺课筛选不一致的问题
> [!tip]
> 首页增加回车登录
> [!IMPORTANT]
> 修复和优化内容同步到国产达梦分支
> [!note] 提交记录
> **生产**
> feat(statistics): 增强统计查询与性别识别逻辑
> - 在统计 Mapper 中增加空字段占位符，确保 SQL 语法完整性
> - 修改学生表关联为 LEFT JOIN，避免数据丢失
> - 增强性别判断逻辑，支持从身份证号码中解析性别
> - 动态构建症状类型显示列表，提升前端展示准确性
> - 优化控制器中的数值累加逻辑，增加空值检查
> - 为登录页面添加回车键触发登录功能，改善用户体验
>
> **国产**
> fix(statistic): 修复统计查询中的性别筛选和数据展示问题
> - 在统计Mapper中增加otherwise分支处理空条件情况
> - 修改性别筛选逻辑，支持从学生表或身份证号提取性别信息
> - 调整LEFT JOIN连接方式确保数据完整性
> - 优化GROUP BY语句结构，避免SQL语法错误
> - 简化控制器中的数值转换逻辑，统一使用BigDecimal处理
> - 动态构建症状类型显示列表，提高查询结果准确性
> - 修复登录页面用户信息保存和恢复功能
> - 增强表单验证和加密处理流程
> - 添加调试信息输出便于问题排查
# 12.11
1.统计沙依巴克区体测数据
截止12.11目前完成的区
![image.png](https://www.binghuai.xyz/markdown/20251211191203201.png)
2.<span style="color:#3EC1D3 !important;">晨午检</span>
> [!WARNING] BUG
> 修复<span style="color:#3EC1D3 !important;">晨午检</span>地州、县区教育局，地州、县区卫健委在停课登记查询和传染病报告查询区域选择栏能够看到所有地区的问题。
> [!IMPORTANT]
> 修复和优化内容同步到国产达梦分支
> [!note] 提交记录
> feat(report): 根据用户角色自动筛选地区并优化下拉框显示
> - 新增根据用户角色（区县管理员、地市管理员等）自动选中所在地区功能
> - 优化前端自动填充逻辑，支持地市和区县的联动选择及默认值设置
> - 后端增加通过父级ID获取区县列表的方法getAllDistrictAndCountyByParentId
> - 页面控制显示/隐藏地市选择框，提升不同角色用户的操作体验
> - 区县管理员登录时自动加载其管理的区县数据并触发初始查询
> - 地市管理员可自动加载对应区县列表，减少手动选择步骤

BIN
月度/12月/体测数据统计/v7.0 2025年5月29日161426 高新区（新市区）报告书.docx Normal file
View File

Binary file not shown.

BIN
月度/12月/体测数据统计/~$25年11月24日 县市区报告书模版.docx
View File

Binary file not shown.

BIN
月度/12月/体测数据统计/每个区县下各学校及学生数.xls
View File

Binary file not shown.

BIN
月度/12月/巴州常见病/V1.1-巴州常见病系统需求确认书.docx Normal file
View File

Binary file not shown.

534
月度/12月/巴州常见病/中班视力专项统计.html Normal file
View File

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

952
月度/12月/巴州常见病/数据审核功能.html Normal file
View File

@@ -0,0 +1,952 @@
<!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>

1697
月度/12月/巴州常见病/视力筛查管理.html Normal file
View File

File diff suppressed because it is too large Load Diff