1884 lines
74 KiB
HTML
1884 lines
74 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>
|
||
<style>
|
||
:root {
|
||
--primary-color: #3498db;
|
||
--secondary-color: #2c3e50;
|
||
--success-color: #27ae60;
|
||
--danger-color: #e74c3c;
|
||
--warning-color: #f39c12;
|
||
--light-color: #f8f9fa;
|
||
--dark-color: #343a40;
|
||
--gray-color: #7f8c8d;
|
||
--border-color: #ddd;
|
||
--transition-speed: 0.3s;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Microsoft YaHei', sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #f4f6f9;
|
||
color: #333;
|
||
}
|
||
|
||
.header {
|
||
background-color: var(--secondary-color);
|
||
color: white;
|
||
padding: 15px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.header h1 {
|
||
margin: 0;
|
||
font-size: 22px;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.user-info span {
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.logout-btn {
|
||
background-color: var(--danger-color);
|
||
color: white;
|
||
border: none;
|
||
padding: 5px 10px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
transition: background-color var(--transition-speed);
|
||
}
|
||
|
||
.logout-btn:hover {
|
||
background-color: #c0392b;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
min-height: calc(100vh - 60px);
|
||
}
|
||
|
||
.sidebar {
|
||
width: 220px;
|
||
background-color: #34495e;
|
||
color: white;
|
||
padding: 20px 0;
|
||
transition: width var(--transition-speed);
|
||
position: relative;
|
||
z-index: 90;
|
||
}
|
||
|
||
.sidebar-menu {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.sidebar-menu li {
|
||
padding: 12px 20px;
|
||
cursor: pointer;
|
||
transition: all var(--transition-speed);
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.sidebar-menu li i {
|
||
margin-right: 10px;
|
||
width: 20px;
|
||
text-align: center;
|
||
transition: margin-right var(--transition-speed);
|
||
}
|
||
|
||
.sidebar-menu li:hover {
|
||
background-color: var(--secondary-color);
|
||
}
|
||
|
||
.sidebar-menu li.active {
|
||
background-color: var(--secondary-color);
|
||
border-left: 4px solid var(--primary-color);
|
||
}
|
||
|
||
.sidebar-menu li .shortcut {
|
||
position: absolute;
|
||
right: 20px;
|
||
font-size: 12px;
|
||
opacity: 0.7;
|
||
transition: opacity var(--transition-speed);
|
||
}
|
||
|
||
.sidebar-menu li:hover .shortcut {
|
||
opacity: 1;
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
padding: 20px;
|
||
transition: margin-left var(--transition-speed);
|
||
}
|
||
|
||
/* 内容区域切换动画 */
|
||
.tab-content {
|
||
display: none;
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
}
|
||
|
||
.tab-content.active {
|
||
display: block;
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
animation: fadeIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.card {
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
padding: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.card-header {
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding-bottom: 10px;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-header h2 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
th, td {
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
th {
|
||
background-color: var(--light-color);
|
||
font-weight: bold;
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
tr:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.btn {
|
||
padding: 8px 12px;
|
||
border-radius: 3px;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
margin-right: 5px;
|
||
transition: background-color 0.3s;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn i {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.btn-success {
|
||
background-color: var(--success-color);
|
||
color: white;
|
||
}
|
||
|
||
.btn-danger {
|
||
background-color: var(--danger-color);
|
||
color: white;
|
||
}
|
||
|
||
.btn-warning {
|
||
background-color: var(--warning-color);
|
||
color: white;
|
||
}
|
||
|
||
.btn-info {
|
||
background-color: #17a2b8;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #2980b9;
|
||
}
|
||
|
||
.btn-success:hover {
|
||
background-color: #219653;
|
||
}
|
||
|
||
.btn-danger:hover {
|
||
background-color: #c0392b;
|
||
}
|
||
|
||
.btn-warning:hover {
|
||
background-color: #e67e22;
|
||
}
|
||
|
||
.btn-info:hover {
|
||
background-color: #138496;
|
||
}
|
||
|
||
.status-active {
|
||
color: var(--success-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-expired {
|
||
color: var(--danger-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-pending {
|
||
color: var(--warning-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-warning {
|
||
color: var(--warning-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.text-success {
|
||
color: var(--success-color);
|
||
}
|
||
|
||
.text-warning {
|
||
color: var(--warning-color);
|
||
}
|
||
|
||
.text-danger {
|
||
color: var(--danger-color);
|
||
}
|
||
|
||
.text-info {
|
||
color: #17a2b8;
|
||
}
|
||
|
||
.search-bar {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.search-bar input {
|
||
flex: 1;
|
||
padding: 10px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.search-bar button {
|
||
padding: 10px 15px;
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.search-bar button:hover {
|
||
background-color: #2980b9;
|
||
}
|
||
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.pagination a {
|
||
color: var(--primary-color);
|
||
padding: 8px 16px;
|
||
text-decoration: none;
|
||
border: 1px solid var(--border-color);
|
||
margin: 0 4px;
|
||
}
|
||
|
||
.pagination a.active {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border: 1px solid var(--primary-color);
|
||
}
|
||
|
||
.pagination a:hover:not(.active) {
|
||
background-color: #ddd;
|
||
}
|
||
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1000;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
background-color: rgba(0,0,0,0.4);
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: #fefefe;
|
||
margin: 10% auto;
|
||
padding: 20px;
|
||
border: 1px solid #888;
|
||
width: 60%;
|
||
border-radius: 5px;
|
||
max-width: 800px;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.close {
|
||
color: #aaa;
|
||
float: right;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.close:hover {
|
||
color: black;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group select,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-group textarea {
|
||
min-height: 100px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.form-actions {
|
||
text-align: right;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 3px 8px;
|
||
border-radius: 10px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.badge-success {
|
||
background-color: var(--success-color);
|
||
color: white;
|
||
}
|
||
|
||
.badge-warning {
|
||
background-color: var(--warning-color);
|
||
color: white;
|
||
}
|
||
|
||
.badge-danger {
|
||
background-color: var(--danger-color);
|
||
color: white;
|
||
}
|
||
|
||
.badge-info {
|
||
background-color: #17a2b8;
|
||
color: white;
|
||
}
|
||
|
||
.alert {
|
||
padding: 10px 15px;
|
||
border-radius: 4px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.alert-warning {
|
||
background-color: #fff3cd;
|
||
color: #856404;
|
||
border-left: 4px solid var(--warning-color);
|
||
}
|
||
|
||
.alert-info {
|
||
background-color: #d1ecf1;
|
||
color: #0c5460;
|
||
border-left: 4px solid #17a2b8;
|
||
}
|
||
|
||
.toggle-sidebar {
|
||
display: none;
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.health-record {
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.health-record-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.health-record-title {
|
||
font-weight: bold;
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.health-record-date {
|
||
color: var(--gray-color);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.health-record-content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
|
||
.health-record-section {
|
||
flex: 1;
|
||
min-width: 250px;
|
||
}
|
||
|
||
.health-record-section h4 {
|
||
margin-top: 0;
|
||
color: var(--secondary-color);
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.health-record-item {
|
||
display: flex;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.health-record-label {
|
||
width: 120px;
|
||
font-weight: bold;
|
||
color: #555;
|
||
}
|
||
|
||
.health-record-value {
|
||
flex: 1;
|
||
}
|
||
|
||
.stat-cards {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.stat-card {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-card h3 {
|
||
margin-top: 0;
|
||
color: var(--gray-color);
|
||
}
|
||
|
||
.stat-card .value {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.stat-card .trend {
|
||
font-size: 14px;
|
||
color: var(--success-color);
|
||
}
|
||
|
||
.stat-card .trend.down {
|
||
color: var(--danger-color);
|
||
}
|
||
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 400px;
|
||
margin-bottom: 20px;
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.profile-section {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.profile-avatar img {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
margin-right: 20px;
|
||
border: 3px solid var(--primary-color);
|
||
}
|
||
|
||
.profile-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.profile-name {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.profile-meta {
|
||
color: var(--gray-color);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.info-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.info-table td {
|
||
padding: 10px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.info-table td:first-child {
|
||
width: 150px;
|
||
font-weight: bold;
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--border-color);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.tab {
|
||
padding: 10px 20px;
|
||
cursor: pointer;
|
||
border-bottom: 3px solid transparent;
|
||
transition: all var(--transition-speed);
|
||
}
|
||
|
||
.tab:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.tab.active {
|
||
border-bottom-color: var(--primary-color);
|
||
color: var(--primary-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.settings-tab-content {
|
||
display: none;
|
||
}
|
||
|
||
.settings-tab-content.active {
|
||
display: block;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 992px) {
|
||
.sidebar {
|
||
width: 60px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar-menu li span {
|
||
display: none;
|
||
opacity: 0;
|
||
transition: opacity var(--transition-speed);
|
||
}
|
||
|
||
.sidebar-menu li i {
|
||
margin-right: 0;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.sidebar-menu li .shortcut {
|
||
display: none;
|
||
}
|
||
|
||
.sidebar.expanded {
|
||
width: 220px;
|
||
}
|
||
|
||
.sidebar.expanded .sidebar-menu li span {
|
||
display: inline;
|
||
opacity: 1;
|
||
}
|
||
|
||
.sidebar.expanded .sidebar-menu li i {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.toggle-sidebar {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sidebar {
|
||
width: 100%;
|
||
padding: 10px 0;
|
||
position: sticky;
|
||
top: 60px;
|
||
}
|
||
|
||
.sidebar-menu {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
.sidebar-menu::-webkit-scrollbar {
|
||
display: none; /* Chrome/Safari */
|
||
}
|
||
|
||
.sidebar-menu li {
|
||
white-space: nowrap;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.sidebar.expanded .sidebar-menu {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.main-content {
|
||
padding: 15px;
|
||
}
|
||
|
||
.stat-cards {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.health-record-content {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.modal-content {
|
||
width: 90%;
|
||
margin: 20px auto;
|
||
}
|
||
|
||
.profile-section {
|
||
flex-direction: column;
|
||
text-align: center;
|
||
}
|
||
|
||
.profile-avatar {
|
||
margin-bottom: 15px;
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div>
|
||
<button class="toggle-sidebar" onclick="toggleSidebar()">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
<h1>员工健康管理系统 - 管理员</h1>
|
||
</div>
|
||
<div class="user-info">
|
||
<span id="current-username">系统管理员</span>
|
||
<button class="logout-btn" onclick="logout()">
|
||
<i class="fas fa-sign-out-alt"></i> 退出
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="sidebar" id="sidebar">
|
||
<ul class="sidebar-menu">
|
||
<li class="active" data-target="dashboard" data-shortcut="1">
|
||
<i class="fas fa-tachometer-alt"></i>
|
||
<span>工作台</span>
|
||
<span class="shortcut">1</span>
|
||
</li>
|
||
<li data-target="health-records" data-shortcut="2">
|
||
<i class="fas fa-heartbeat"></i>
|
||
<span>健康档案</span>
|
||
<span class="shortcut">2</span>
|
||
</li>
|
||
<li data-target="medical-checkups" data-shortcut="3">
|
||
<i class="fas fa-stethoscope"></i>
|
||
<span>体检管理</span>
|
||
<span class="shortcut">3</span>
|
||
</li>
|
||
<li data-target="health-statistics" data-shortcut="4">
|
||
<i class="fas fa-chart-bar"></i>
|
||
<span>健康统计</span>
|
||
<span class="shortcut">4</span>
|
||
</li>
|
||
<li data-target="profile" data-shortcut="5">
|
||
<i class="fas fa-user"></i>
|
||
<span>个人信息</span>
|
||
<span class="shortcut">5</span>
|
||
</li>
|
||
<li data-target="settings" data-shortcut="6">
|
||
<i class="fas fa-cog"></i>
|
||
<span>系统设置</span>
|
||
<span class="shortcut">6</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="main-content" id="main-content">
|
||
<!-- 工作台 -->
|
||
<div id="dashboard" class="tab-content active">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-tachometer-alt"></i> 健康管理概览</h2>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="stat-cards">
|
||
<div class="stat-card">
|
||
<h3>员工总数</h3>
|
||
<div class="value">156</div>
|
||
<div class="trend">↑ 5% 较上月</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>健康员工</h3>
|
||
<div class="value">128</div>
|
||
<div class="trend">↑ 3% 较上月</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>需关注员工</h3>
|
||
<div class="value">23</div>
|
||
<div class="trend down">↑ 5% 较上月</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>年度体检率</h3>
|
||
<div class="value">92%</div>
|
||
<div class="trend">↑ 8% 较上年</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filter-bar">
|
||
<select>
|
||
<option>全部部门</option>
|
||
<option>人事部</option>
|
||
<option>技术部</option>
|
||
<option>市场部</option>
|
||
<option>财务部</option>
|
||
</select>
|
||
<button class="btn btn-primary">
|
||
<i class="fas fa-filter"></i> 筛选
|
||
</button>
|
||
<button class="btn btn-success">
|
||
<i class="fas fa-file-excel"></i> 导出Excel
|
||
</button>
|
||
</div>
|
||
|
||
<div class="alert alert-warning">
|
||
<i class="fas fa-exclamation-triangle"></i> 您有 <strong>5名</strong> 员工需要近期体检，请及时安排。
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<img src="https://via.placeholder.com/1200x400?text=员工健康状况分布图表" alt="员工健康状况分布图表" style="width:100%; border:1px solid #eee; border-radius:5px;">
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-bell"></i> 健康待办事项</h2>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>事项</th>
|
||
<th>相关员工</th>
|
||
<th>截止日期</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>张三-年度体检</td>
|
||
<td>张三 (EMP001)</td>
|
||
<td>2023-12-15</td>
|
||
<td class="status-warning">即将到期</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 处理
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>李四-复查安排</td>
|
||
<td>李四 (EMP002)</td>
|
||
<td>2023-12-20</td>
|
||
<td class="status-warning">即将到期</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 处理
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>王五-体检报告审核</td>
|
||
<td>王五 (EMP003)</td>
|
||
<td>2023-11-30</td>
|
||
<td class="status-danger">已过期</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 处理
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 健康档案 -->
|
||
<div id="health-records" class="tab-content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-heartbeat"></i> 健康档案管理</h2>
|
||
<button class="btn btn-success" id="add-health-btn" onclick="showModal('addHealthRecordModal')">
|
||
<i class="fas fa-plus"></i> 添加记录
|
||
</button>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="search-bar">
|
||
<input type="text" placeholder="搜索员工姓名或工号...">
|
||
<button class="btn btn-primary">
|
||
<i class="fas fa-search"></i> 搜索
|
||
</button>
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>员工姓名</th>
|
||
<th>工号</th>
|
||
<th>最近体检日期</th>
|
||
<th>体检医院</th>
|
||
<th>体检结果</th>
|
||
<th>下次体检日期</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>张三</td>
|
||
<td>EMP001</td>
|
||
<td>2023-10-15</td>
|
||
<td>北京协和医院</td>
|
||
<td><span class="badge badge-success">正常</span></td>
|
||
<td>2024-10-15</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm" onclick="showHealthDetail('张三')">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-info btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>李四</td>
|
||
<td>EMP002</td>
|
||
<td>2023-09-20</td>
|
||
<td>上海瑞金医院</td>
|
||
<td><span class="badge badge-warning">轻度异常</span></td>
|
||
<td>2024-03-20</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm" onclick="showHealthDetail('李四')">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-info btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>王五</td>
|
||
<td>EMP003</td>
|
||
<td>2023-08-10</td>
|
||
<td>广州中山医院</td>
|
||
<td><span class="badge badge-danger">异常</span></td>
|
||
<td>2023-11-10</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm" onclick="showHealthDetail('王五')">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-info btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="pagination">
|
||
<a href="#">«</a>
|
||
<a href="#" class="active">1</a>
|
||
<a href="#">2</a>
|
||
<a href="#">3</a>
|
||
<a href="#">»</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 体检管理 -->
|
||
<div id="medical-checkups" class="tab-content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-stethoscope"></i> 体检管理</h2>
|
||
<button class="btn btn-success" onclick="showModal('addCheckupModal')">
|
||
<i class="fas fa-plus"></i> 添加体检安排
|
||
</button>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="search-bar">
|
||
<input type="text" placeholder="搜索员工姓名、工号或体检医院...">
|
||
<button class="btn btn-primary">
|
||
<i class="fas fa-search"></i> 搜索
|
||
</button>
|
||
</div>
|
||
|
||
<div class="alert alert-info">
|
||
<i class="fas fa-info-circle"></i> 当前有 <strong>3名</strong> 员工需要在本月完成体检。
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>员工姓名</th>
|
||
<th>工号</th>
|
||
<th>部门</th>
|
||
<th>体检类型</th>
|
||
<th>体检医院</th>
|
||
<th>体检日期</th>
|
||
<th>体检状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>张三</td>
|
||
<td>EMP001</td>
|
||
<td>技术部</td>
|
||
<td>年度体检</td>
|
||
<td>北京协和医院</td>
|
||
<td>2023-10-15</td>
|
||
<td><span class="badge badge-success">已完成</span></td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-info btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>李四</td>
|
||
<td>EMP002</td>
|
||
<td>市场部</td>
|
||
<td>专项体检</td>
|
||
<td>上海瑞金医院</td>
|
||
<td>2023-09-20</td>
|
||
<td><span class="badge badge-success">已完成</span></td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-info btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>王五</td>
|
||
<td>EMP003</td>
|
||
<td>财务部</td>
|
||
<td>年度体检</td>
|
||
<td>广州中山医院</td>
|
||
<td>2023-11-30</td>
|
||
<td><span class="badge badge-warning">待完成</span></td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-info btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-success btn-sm">
|
||
<i class="fas fa-check"></i> 确认完成
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 健康统计 -->
|
||
<div id="health-statistics" class="tab-content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-chart-bar"></i> 健康统计与分析</h2>
|
||
<button class="btn btn-primary">
|
||
<i class="fas fa-download"></i> 导出报告
|
||
</button>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="filter-bar">
|
||
<select>
|
||
<option>全部部门</option>
|
||
<option>人事部</option>
|
||
<option>技术部</option>
|
||
<option>市场部</option>
|
||
<option>财务部</option>
|
||
</select>
|
||
<select>
|
||
<option>2023年</option>
|
||
<option>2022年</option>
|
||
<option>2021年</option>
|
||
</select>
|
||
<button class="btn btn-primary">
|
||
<i class="fas fa-filter"></i> 筛选
|
||
</button>
|
||
</div>
|
||
|
||
<div class="stat-cards">
|
||
<div class="stat-card">
|
||
<h3>体检覆盖率</h3>
|
||
<div class="value">92%</div>
|
||
<div class="trend">↑ 5% 较上年</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>健康员工比例</h3>
|
||
<div class="value">82%</div>
|
||
<div class="trend">↑ 3% 较上年</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>异常检出率</h3>
|
||
<div class="value">18%</div>
|
||
<div class="trend down">↓ 2% 较上年</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>复查完成率</h3>
|
||
<div class="value">75%</div>
|
||
<div class="trend">↑ 8% 较上年</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<img src="https://via.placeholder.com/1200x400?text=员工健康状况趋势图表" alt="员工健康状况趋势图表" style="width:100%; border:1px solid #eee; border-radius:5px;">
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<img src="https://via.placeholder.com/1200x400?text=各部门健康状况对比图表" alt="各部门健康状况对比图表" style="width:100%; border:1px solid #eee; border-radius:5px;">
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-list"></i> 常见健康问题统计</h2>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>健康问题</th>
|
||
<th>人数</th>
|
||
<th>占比</th>
|
||
<th>较上年变化</th>
|
||
<th>建议措施</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>颈椎/腰椎问题</td>
|
||
<td>45</td>
|
||
<td>28.8%</td>
|
||
<td class="text-danger">↑ 5%</td>
|
||
<td>工位调整、定期运动</td>
|
||
</tr>
|
||
<tr>
|
||
<td>视力问题</td>
|
||
<td>38</td>
|
||
<td>24.4%</td>
|
||
<td class="text-danger">↑ 3%</td>
|
||
<td>定期休息、眼保健操</td>
|
||
</tr>
|
||
<tr>
|
||
<td>高血压</td>
|
||
<td>22</td>
|
||
<td>14.1%</td>
|
||
<td class="text-success">↓ 2%</td>
|
||
<td>饮食指导、定期监测</td>
|
||
</tr>
|
||
<tr>
|
||
<td>脂肪肝</td>
|
||
<td>18</td>
|
||
<td>11.5%</td>
|
||
<td class="text-success">↓ 4%</td>
|
||
<td>运动计划、饮食调整</td>
|
||
</tr>
|
||
<tr>
|
||
<td>糖尿病</td>
|
||
<td>8</td>
|
||
<td>5.1%</td>
|
||
<td class="text-success">↓ 1%</td>
|
||
<td>医疗干预、定期检查</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 个人信息 -->
|
||
<div id="profile" class="tab-content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-user"></i> 个人信息</h2>
|
||
<button class="btn btn-primary" id="edit-profile-btn">
|
||
<i class="fas fa-edit"></i> 编辑信息
|
||
</button>
|
||
</div>
|
||
|
||
<div class="profile-section">
|
||
<div class="profile-avatar">
|
||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="员工头像">
|
||
</div>
|
||
<div class="profile-info">
|
||
<div class="profile-name">系统管理员</div>
|
||
<div class="profile-meta">
|
||
<span>ADM001</span> |
|
||
<span>人事部</span> |
|
||
<span>系统管理员</span>
|
||
</div>
|
||
<div class="profile-actions">
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-camera"></i> 更换头像
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="info-table">
|
||
<tr>
|
||
<td>员工编号</td>
|
||
<td>ADM001</td>
|
||
</tr>
|
||
<tr>
|
||
<td>部门</td>
|
||
<td>人事部</td>
|
||
</tr>
|
||
<tr>
|
||
<td>职位</td>
|
||
<td>系统管理员</td>
|
||
</tr>
|
||
<tr>
|
||
<td>入职日期</td>
|
||
<td>2020-01-15</td>
|
||
</tr>
|
||
<tr>
|
||
<td>联系电话</td>
|
||
<td>13800138000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>电子邮箱</td>
|
||
<td>admin@company.com</td>
|
||
</tr>
|
||
<tr>
|
||
<td>身份证号</td>
|
||
<td>**************0000</td>
|
||
</tr>
|
||
<tr>
|
||
<td>联系地址</td>
|
||
<td>北京市海淀区中关村软件园1号楼</td>
|
||
</tr>
|
||
<tr>
|
||
<td>紧急联系人</td>
|
||
<td>王五 (同事) 13800138003</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统设置 -->
|
||
<div id="settings" class="tab-content">
|
||
<div class="card">
|
||
<div class="tabs">
|
||
<div class="tab active" onclick="switchSettingsTab('health')">健康设置</div>
|
||
<div class="tab" onclick="switchSettingsTab('checkup')">体检设置</div>
|
||
<div class="tab" onclick="switchSettingsTab('notification')">通知设置</div>
|
||
</div>
|
||
|
||
<div id="settings-health" class="settings-tab-content active">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-heartbeat"></i> 健康管理设置</h2>
|
||
</div>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="health-levels">健康等级划分</label>
|
||
<textarea id="health-levels" rows="3">1. 健康：无异常指标
|
||
2. 亚健康：1-2项轻度异常
|
||
3. 需关注：3项及以上轻度异常或1项中度异常
|
||
4. 高风险：1项及以上重度异常</textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="health-intervention">健康干预措施</label>
|
||
<textarea id="health-intervention" rows="3">1. 健康：定期体检
|
||
2. 亚健康：健康指导
|
||
3. 需关注：医疗咨询
|
||
4. 高风险：医疗干预</textarea>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="reset" class="btn btn-danger">
|
||
<i class="fas fa-times"></i> 重置
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div id="settings-checkup" class="settings-tab-content">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-stethoscope"></i> 体检管理设置</h2>
|
||
</div>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="checkup-interval">常规体检间隔(月)</label>
|
||
<input type="number" id="checkup-interval" value="12">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-types">体检类型</label>
|
||
<textarea id="checkup-types" rows="3">1. 入职体检
|
||
2. 年度体检
|
||
3. 专项体检
|
||
4. 复查体检</textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-hospitals">合作医院</label>
|
||
<textarea id="checkup-hospitals" rows="3">1. 北京协和医院
|
||
2. 上海瑞金医院
|
||
3. 广州中山医院
|
||
4. 深圳人民医院</textarea>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="reset" class="btn btn-danger">
|
||
<i class="fas fa-times"></i> 重置
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div id="settings-notification" class="settings-tab-content">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-bell"></i> 通知设置</h2>
|
||
</div>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="checkup-notice">体检提前通知天数</label>
|
||
<input type="number" id="checkup-notice" value="30">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="recheck-notice">复查提前通知天数</label>
|
||
<input type="number" id="recheck-notice" value="14">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="health-alert">健康异常提醒级别</label>
|
||
<select id="health-alert">
|
||
<option value="all">所有异常</option>
|
||
<option value="moderate" selected>中度及以上</option>
|
||
<option value="severe">仅重度</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="notification-methods">通知方式</label>
|
||
<div>
|
||
<label><input type="checkbox" checked> 系统消息</label>
|
||
<label><input type="checkbox" checked> 电子邮件</label>
|
||
<label><input type="checkbox"> 短信通知</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="reset" class="btn btn-danger">
|
||
<i class="fas fa-times"></i> 重置
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加健康记录模态框 -->
|
||
<div id="addHealthRecordModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="hideModal('addHealthRecordModal')">×</span>
|
||
<h2><i class="fas fa-plus-circle"></i> 添加健康记录</h2>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="health-employee">员工</label>
|
||
<select id="health-employee">
|
||
<option value="">请选择员工</option>
|
||
<option value="EMP001">张三 (EMP001)</option>
|
||
<option value="EMP002">李四 (EMP002)</option>
|
||
<option value="EMP003">王五 (EMP003)</option>
|
||
<option value="EMP004">赵六 (EMP004)</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-date">体检日期</label>
|
||
<input type="date" id="checkup-date">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hospital">体检医院</label>
|
||
<input type="text" id="hospital" placeholder="请输入体检医院">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-type">体检类型</label>
|
||
<select id="checkup-type">
|
||
<option value="常规体检">常规体检</option>
|
||
<option value="入职体检">入职体检</option>
|
||
<option value="年度体检">年度体检</option>
|
||
<option value="专项体检">专项体检</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-result">体检结果</label>
|
||
<select id="checkup-result">
|
||
<option value="正常">正常</option>
|
||
<option value="轻度异常">轻度异常</option>
|
||
<option value="异常">异常</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="next-checkup">下次体检日期</label>
|
||
<input type="date" id="next-checkup">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="health-summary">体检总结</label>
|
||
<textarea id="health-summary" rows="3" placeholder="请输入体检总结"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="health-suggestion">医生建议</label>
|
||
<textarea id="health-suggestion" rows="3" placeholder="请输入医生建议"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="health-report">体检报告</label>
|
||
<input type="file" id="health-report">
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-danger" onclick="hideModal('addHealthRecordModal')">
|
||
<i class="fas fa-times"></i> 取消
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加体检安排模态框 -->
|
||
<div id="addCheckupModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="hideModal('addCheckupModal')">×</span>
|
||
<h2><i class="fas fa-calendar-plus"></i> 添加体检安排</h2>
|
||
<form>
|
||
<div class="form-group">
|
||
<label>选择员工</label>
|
||
<div style="border: 1px solid #ddd; padding: 10px; max-height: 200px; overflow-y: auto;">
|
||
<label style="display: block;"><input type="checkbox"> 张三 (EMP001)</label>
|
||
<label style="display: block;"><input type="checkbox"> 李四 (EMP002)</label>
|
||
<label style="display: block;"><input type="checkbox"> 王五 (EMP003)</label>
|
||
<label style="display: block;"><input type="checkbox"> 赵六 (EMP004)</label>
|
||
<label style="display: block;"><input type="checkbox"> 钱七 (EMP005)</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-type">体检类型</label>
|
||
<select id="checkup-type">
|
||
<option value="年度体检">年度体检</option>
|
||
<option value="入职体检">入职体检</option>
|
||
<option value="专项体检">专项体检</option>
|
||
<option value="复查体检">复查体检</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-hospital">体检医院</label>
|
||
<select id="checkup-hospital">
|
||
<option value="北京协和医院">北京协和医院</option>
|
||
<option value="上海瑞金医院">上海瑞金医院</option>
|
||
<option value="广州中山医院">广州中山医院</option>
|
||
<option value="深圳人民医院">深圳人民医院</option>
|
||
<option value="其他">其他</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-date">体检日期</label>
|
||
<input type="date" id="checkup-date">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-notice">提前通知天数</label>
|
||
<input type="number" id="checkup-notice" value="15">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-notes">备注</label>
|
||
<textarea id="checkup-notes" rows="3" placeholder="请输入备注信息"></textarea>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-danger" onclick="hideModal('addCheckupModal')">
|
||
<i class="fas fa-times"></i> 取消
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 健康详情模态框 -->
|
||
<div id="healthDetailModal" class="modal">
|
||
<div class="modal-content" style="width: 70%;">
|
||
<span class="close" onclick="hideModal('healthDetailModal')">×</span>
|
||
<h2><i class="fas fa-user-md"></i> <span id="detail-employee-name"></span> - 健康档案详情</h2>
|
||
|
||
<div class="health-record">
|
||
<div class="health-record-header">
|
||
<div class="health-record-title">基本信息</div>
|
||
<div class="health-record-date">最后更新: 2023-10-15</div>
|
||
</div>
|
||
<div class="health-record-content">
|
||
<div class="health-record-section">
|
||
<h4>个人信息</h4>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">员工编号:</div>
|
||
<div class="health-record-value">EMP001</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">部门:</div>
|
||
<div class="health-record-value">技术部</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">职位:</div>
|
||
<div class="health-record-value">高级工程师</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">年龄:</div>
|
||
<div class="health-record-value">32</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">性别:</div>
|
||
<div class="health-record-value">男</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-record-section">
|
||
<h4>体检信息</h4>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">最近体检日期:</div>
|
||
<div class="health-record-value">2023-10-15</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">体检医院:</div>
|
||
<div class="health-record-value">北京协和医院</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">体检类型:</div>
|
||
<div class="health-record-value">年度体检</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">体检结果:</div>
|
||
<div class="health-record-value"><span class="badge badge-success">正常</span></div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">下次体检日期:</div>
|
||
<div class="health-record-value">2024-10-15</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-record">
|
||
<div class="health-record-header">
|
||
<div class="health-record-title">体检结果详情</div>
|
||
</div>
|
||
<div class="health-record-content">
|
||
<div class="health-record-section">
|
||
<h4>一般检查</h4>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">身高:</div>
|
||
<div class="health-record-value">175cm</div>
|
||
>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">体重:</div>
|
||
<div class="health-record-value">68kg</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">BMI:</div>
|
||
<div class="health-record-value">22.2 (正常)</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">血压:</div>
|
||
<div class="health-record-value">120/80mmHg (正常)</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">心率:</div>
|
||
<div class="health-record-value">72次/分 (正常)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-record-section">
|
||
<h4>血液检查</h4>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">白细胞计数:</div>
|
||
<div class="health-record-value">5.6×10⁹/L (正常)</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">红细胞计数:</div>
|
||
<div class="health-record-value">4.5×10¹²/L (正常)</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">血红蛋白:</div>
|
||
<div class="health-record-value">145g/L (正常)</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">血小板计数:</div>
|
||
<div class="health-record-value">210×10⁹/L (正常)</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">血糖:</div>
|
||
<div class="health-record-value">5.2mmol/L (正常)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-record-section">
|
||
<h4>其他检查</h4>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">肝功能:</div>
|
||
<div class="health-record-value">正常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">肾功能:</div>
|
||
<div class="health-record-value">正常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">血脂:</div>
|
||
<div class="health-record-value">正常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">心电图:</div>
|
||
<div class="health-record-value">窦性心律，正常心电图</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">胸部X光:</div>
|
||
<div class="health-record-value">未见明显异常</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-record">
|
||
<div class="health-record-header">
|
||
<div class="health-record-title">医生建议</div>
|
||
</div>
|
||
<div class="health-record-content">
|
||
<div class="health-record-section" style="flex: 1 1 100%;">
|
||
<p>1. 继续保持健康的生活方式，均衡饮食，适量运动。</p>
|
||
<p>2. 建议每天保持30分钟以上的中等强度运动。</p>
|
||
<p>3. 注意用眼卫生，每工作1小时休息5-10分钟。</p>
|
||
<p>4. 建议每年进行一次常规体检。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-danger" onclick="hideModal('healthDetailModal')">
|
||
<i class="fas fa-times"></i> 关闭
|
||
</button>
|
||
<button type="button" class="btn btn-primary">
|
||
<i class="fas fa-print"></i> 打印
|
||
</button>
|
||
<button type="button" class="btn btn-success">
|
||
<i class="fas fa-download"></i> 下载报告
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 初始化页面
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 绑定侧边栏菜单点击事件
|
||
bindSidebarMenuEvents();
|
||
|
||
// 绑定其他事件
|
||
bindEvents();
|
||
|
||
// 初始化键盘快捷键
|
||
initKeyboardShortcuts();
|
||
|
||
// 检查URL hash并导航到对应页面
|
||
checkUrlHash();
|
||
});
|
||
|
||
// 绑定侧边栏菜单点击事件（使用事件委托）
|
||
function bindSidebarMenuEvents() {
|
||
const sidebar = document.querySelector('.sidebar-menu');
|
||
|
||
sidebar.addEventListener('click', function(e) {
|
||
const menuItem = e.target.closest('li');
|
||
if (!menuItem) return;
|
||
|
||
// 获取目标内容区域ID
|
||
const targetId = menuItem.getAttribute('data-target');
|
||
|
||
// 切换导航
|
||
switchTab(targetId);
|
||
});
|
||
}
|
||
|
||
// 切换标签页
|
||
function switchTab(targetId) {
|
||
// 移除所有菜单项的active类
|
||
document.querySelectorAll('.sidebar-menu li').forEach(li => {
|
||
li.classList.remove('active');
|
||
});
|
||
|
||
// 给当前点击的菜单项添加active类
|
||
const activeMenuItem = document.querySelector(`.sidebar-menu li[data-target="${targetId}"]`);
|
||
if (activeMenuItem) {
|
||
activeMenuItem.classList.add('active');
|
||
}
|
||
|
||
// 隐藏所有内容区域
|
||
document.querySelectorAll('.tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 显示目标内容区域
|
||
const targetContent = document.getElementById(targetId);
|
||
if (targetContent) {
|
||
targetContent.classList.add('active');
|
||
|
||
// 更新URL hash
|
||
window.location.hash = targetId;
|
||
|
||
// 滚动到顶部
|
||
window.scrollTo(0, 0);
|
||
|
||
// 触发自定义事件
|
||
const event = new CustomEvent('tabChanged', { detail: { tabId: targetId } });
|
||
document.dispatchEvent(event);
|
||
}
|
||
}
|
||
|
||
// 检查URL hash并导航到对应页面
|
||
function checkUrlHash() {
|
||
const hash = window.location.hash.substring(1);
|
||
if (hash) {
|
||
const targetContent = document.getElementById(hash);
|
||
if (targetContent) {
|
||
switchTab(hash);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 初始化键盘快捷键
|
||
function initKeyboardShortcuts() {
|
||
document.addEventListener('keydown', function(e) {
|
||
// 检查是否按下了数字键1-6
|
||
if (e.key >= '1' && e.key <= '6') {
|
||
const targetId = document.querySelector(`.sidebar-menu li[data-shortcut="${e.key}"]`)?.getAttribute('data-target');
|
||
if (targetId) {
|
||
switchTab(targetId);
|
||
}
|
||
}
|
||
|
||
// Ctrl+1 到 Ctrl+6 快捷键
|
||
if (e.ctrlKey && e.key >= '1' && e.key <= '6') {
|
||
const targetId = document.querySelector(`.sidebar-menu li[data-shortcut="${e.key}"]`)?.getAttribute('data-target');
|
||
if (targetId) {
|
||
switchTab(targetId);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 绑定其他事件
|
||
function bindEvents() {
|
||
// 点击模态框外部关闭模态框
|
||
window.addEventListener('click', function(event) {
|
||
if (event.target.classList.contains('modal')) {
|
||
event.target.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// 监听hash变化
|
||
window.addEventListener('hashchange', checkUrlHash);
|
||
|
||
// 监听自定义tabChanged事件
|
||
document.addEventListener('tabChanged', function(e) {
|
||
console.log('切换到标签页:', e.detail.tabId);
|
||
// 可以在这里添加标签页切换后的额外逻辑
|
||
});
|
||
}
|
||
|
||
// 显示模态框
|
||
function showModal(modalId) {
|
||
document.getElementById(modalId).style.display = 'block';
|
||
}
|
||
|
||
// 隐藏模态框
|
||
function hideModal(modalId) {
|
||
document.getElementById(modalId).style.display = 'none';
|
||
}
|
||
|
||
// 显示健康详情
|
||
function showHealthDetail(employeeName) {
|
||
document.getElementById('detail-employee-name').textContent = employeeName;
|
||
showModal('healthDetailModal');
|
||
}
|
||
|
||
// 切换系统设置标签页
|
||
function switchSettingsTab(tabId) {
|
||
// 隐藏所有标签内容
|
||
document.querySelectorAll('.settings-tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 取消所有标签的活动状态
|
||
document.querySelectorAll('#settings .tab').forEach(tab => {
|
||
tab.classList.remove('active');
|
||
});
|
||
|
||
// 显示选中的标签内容
|
||
document.getElementById('settings-' + tabId).classList.add('active');
|
||
|
||
// 设置选中标签的活动状态
|
||
event.currentTarget.classList.add('active');
|
||
}
|
||
|
||
// 切换侧边栏显示状态
|
||
function toggleSidebar() {
|
||
const sidebar = document.getElementById('sidebar');
|
||
sidebar.classList.toggle('expanded');
|
||
|
||
const mainContent = document.getElementById('main-content');
|
||
if (sidebar.classList.contains('expanded')) {
|
||
mainContent.style.marginLeft = '220px';
|
||
} else {
|
||
mainContent.style.marginLeft = '60px';
|
||
}
|
||
}
|
||
|
||
// 退出登录
|
||
function logout() {
|
||
if (confirm('确定要退出系统吗？')) {
|
||
window.location.href = 'login.html';
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|