3167 lines
130 KiB
HTML
3167 lines
130 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>装备履历本全生命周期管理系统</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg-primary: #0a0e27;
|
||
--bg-secondary: #0f1535;
|
||
--bg-card: rgba(15, 21, 53, 0.8);
|
||
--border-color: rgba(6, 182, 212, 0.3);
|
||
--border-hover: rgba(6, 182, 212, 0.6);
|
||
--text-primary: #ffffff;
|
||
--text-secondary: #94a3b8;
|
||
--accent-cyan: #06b6d4;
|
||
--accent-blue: #3b82f6;
|
||
--shadow-cyan: rgba(6, 182, 212, 0.2);
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
|
||
background: linear-gradient(135deg, #0a0e27 0%, #1e3a8a 50%, #0a0e27 100%);
|
||
background-attachment: fixed;
|
||
color: var(--text-primary);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* 顶部导航栏 */
|
||
.top-navbar {
|
||
background: rgba(15, 21, 53, 0.9);
|
||
backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid var(--border-color);
|
||
box-shadow: 0 4px 20px var(--shadow-cyan);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1030;
|
||
padding: 1rem 1.5rem;
|
||
}
|
||
|
||
.logo-section {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.logo-icon {
|
||
width: 45px;
|
||
height: 45px;
|
||
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 4px 15px var(--shadow-cyan);
|
||
}
|
||
|
||
.logo-text h1 {
|
||
font-size: 1.3rem;
|
||
font-weight: bold;
|
||
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin: 0;
|
||
}
|
||
|
||
.logo-text p {
|
||
font-size: 0.7rem;
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
}
|
||
|
||
.search-box {
|
||
position: relative;
|
||
width: 300px;
|
||
}
|
||
|
||
.search-box input {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid var(--border-color);
|
||
color: var(--text-primary);
|
||
padding-left: 2.5rem;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.search-box input:focus {
|
||
background: rgba(30, 41, 59, 0.7);
|
||
border-color: var(--accent-cyan);
|
||
box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.25);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.search-box i {
|
||
position: absolute;
|
||
left: 1rem;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.notification-btn {
|
||
position: relative;
|
||
background: transparent;
|
||
border: none;
|
||
color: var(--text-primary);
|
||
font-size: 1.2rem;
|
||
padding: 0.5rem;
|
||
border-radius: 8px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.notification-btn:hover {
|
||
background: rgba(6, 182, 212, 0.2);
|
||
}
|
||
|
||
.notification-badge {
|
||
position: absolute;
|
||
top: 0.3rem;
|
||
right: 0.3rem;
|
||
width: 8px;
|
||
height: 8px;
|
||
background: #ef4444;
|
||
border-radius: 50%;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 1rem;
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 35px;
|
||
height: 35px;
|
||
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* 侧边栏 */
|
||
.sidebar {
|
||
position: fixed;
|
||
top: 77px;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 260px;
|
||
background: rgba(15, 21, 53, 0.9);
|
||
backdrop-filter: blur(20px);
|
||
border-right: 1px solid var(--border-color);
|
||
overflow-y: auto;
|
||
transition: transform 0.3s;
|
||
z-index: 1020;
|
||
padding: 1.5rem 1rem;
|
||
}
|
||
|
||
.sidebar.collapsed {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
.nav-section-title {
|
||
font-size: 0.75rem;
|
||
color: var(--text-secondary);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
margin: 1.5rem 0 0.5rem 0.75rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.nav-item-custom {
|
||
margin-bottom: 0.3rem;
|
||
}
|
||
|
||
.nav-link-custom {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
padding: 0.75rem 1rem;
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
border-radius: 8px;
|
||
transition: all 0.3s;
|
||
border: 1px solid transparent;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.nav-link-custom:hover {
|
||
background: rgba(6, 182, 212, 0.1);
|
||
color: var(--text-primary);
|
||
border-color: var(--border-color);
|
||
}
|
||
|
||
.nav-link-custom.active {
|
||
background: linear-gradient(90deg, rgba(6, 182, 212, 0.3), rgba(59, 130, 246, 0.3));
|
||
color: var(--text-primary);
|
||
border-color: var(--border-hover);
|
||
box-shadow: 0 4px 15px var(--shadow-cyan);
|
||
}
|
||
|
||
.nav-link-custom i {
|
||
font-size: 1.1rem;
|
||
width: 20px;
|
||
}
|
||
|
||
/* 主内容区 */
|
||
.main-content {
|
||
margin-left: 260px;
|
||
margin-top: 77px;
|
||
padding: 2rem;
|
||
transition: margin-left 0.3s;
|
||
min-height: calc(100vh - 77px);
|
||
}
|
||
|
||
.main-content.expanded {
|
||
margin-left: 0;
|
||
}
|
||
|
||
/* 卡片样式 */
|
||
.card-custom {
|
||
background: var(--bg-card);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.card-custom:hover {
|
||
border-color: var(--border-hover);
|
||
box-shadow: 0 12px 40px rgba(6, 182, 212, 0.2);
|
||
}
|
||
|
||
.card-header-custom {
|
||
background: transparent;
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding: 1.25rem 1.5rem;
|
||
}
|
||
|
||
.card-body-custom {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
/* 统计卡片 */
|
||
.stat-card {
|
||
background: var(--bg-card);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: 0 12px 40px rgba(6, 182, 212, 0.3);
|
||
}
|
||
|
||
.stat-card.cyan {
|
||
background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.1));
|
||
border-color: rgba(6, 182, 212, 0.5);
|
||
}
|
||
|
||
.stat-card.blue {
|
||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
|
||
border-color: rgba(59, 130, 246, 0.5);
|
||
}
|
||
|
||
.stat-card.yellow {
|
||
background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(234, 179, 8, 0.1));
|
||
border-color: rgba(234, 179, 8, 0.5);
|
||
}
|
||
|
||
.stat-card.green {
|
||
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
|
||
border-color: rgba(34, 197, 94, 0.5);
|
||
}
|
||
|
||
.stat-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.stat-icon.cyan { background: rgba(6, 182, 212, 0.2); color: var(--accent-cyan); }
|
||
.stat-icon.blue { background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); }
|
||
.stat-icon.yellow { background: rgba(234, 179, 8, 0.2); color: #eab308; }
|
||
.stat-icon.green { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||
|
||
.stat-value {
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
margin: 0.5rem 0;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.stat-trend {
|
||
font-size: 0.75rem;
|
||
color: #22c55e;
|
||
margin-top: 0.25rem;
|
||
}
|
||
|
||
/* 流程卡片 */
|
||
.process-card {
|
||
background: var(--bg-card);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
height: 100%;
|
||
}
|
||
|
||
.process-card:hover {
|
||
transform: scale(1.05);
|
||
border-color: var(--border-hover);
|
||
box-shadow: 0 12px 40px rgba(6, 182, 212, 0.3);
|
||
}
|
||
|
||
.process-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 2rem;
|
||
margin-bottom: 1rem;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.process-card:hover .process-icon {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.process-card.cyan .process-icon { background: rgba(6, 182, 212, 0.2); color: var(--accent-cyan); }
|
||
.process-card.blue .process-icon { background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); }
|
||
.process-card.purple .process-icon { background: rgba(168, 85, 247, 0.2); color: #a855f7; }
|
||
.process-card.green .process-icon { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||
.process-card.orange .process-icon { background: rgba(249, 115, 22, 0.2); color: #f97316; }
|
||
.process-card.yellow .process-icon { background: rgba(234, 179, 8, 0.2); color: #eab308; }
|
||
.process-card.pink .process-icon { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
|
||
.process-card.indigo .process-icon { background: rgba(99, 102, 241, 0.2); color: #6366f1; }
|
||
|
||
.process-title {
|
||
font-size: 1.1rem;
|
||
font-weight: bold;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.process-desc {
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.process-steps {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.process-steps li {
|
||
font-size: 0.75rem;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 0.3rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.process-steps li::before {
|
||
content: '';
|
||
width: 4px;
|
||
height: 4px;
|
||
background: var(--text-secondary);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.btn-custom-primary {
|
||
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
|
||
border: none;
|
||
color: white;
|
||
padding: 0.6rem 1.5rem;
|
||
border-radius: 8px;
|
||
font-weight: 500;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-custom-primary:hover {
|
||
box-shadow: 0 8px 25px var(--shadow-cyan);
|
||
transform: translateY(-2px);
|
||
color: white;
|
||
}
|
||
|
||
.btn-custom-secondary {
|
||
background: rgba(6, 182, 212, 0.2);
|
||
border: 1px solid var(--border-hover);
|
||
color: var(--accent-cyan);
|
||
padding: 0.6rem 1.5rem;
|
||
border-radius: 8px;
|
||
font-weight: 500;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-custom-secondary:hover {
|
||
background: rgba(6, 182, 212, 0.3);
|
||
color: var(--accent-cyan);
|
||
}
|
||
|
||
.btn-success-custom {
|
||
background: rgba(34, 197, 94, 0.2);
|
||
border: 1px solid rgba(34, 197, 94, 0.5);
|
||
color: #22c55e;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 6px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-success-custom:hover {
|
||
background: rgba(34, 197, 94, 0.3);
|
||
color: #22c55e;
|
||
}
|
||
|
||
.btn-danger-custom {
|
||
background: rgba(239, 68, 68, 0.2);
|
||
border: 1px solid rgba(239, 68, 68, 0.5);
|
||
color: #ef4444;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 6px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-danger-custom:hover {
|
||
background: rgba(239, 68, 68, 0.3);
|
||
color: #ef4444;
|
||
}
|
||
|
||
.btn-info-custom {
|
||
background: rgba(59, 130, 246, 0.2);
|
||
border: 1px solid rgba(59, 130, 246, 0.5);
|
||
color: var(--accent-blue);
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 6px;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-info-custom:hover {
|
||
background: rgba(59, 130, 246, 0.3);
|
||
color: var(--accent-blue);
|
||
}
|
||
|
||
/* 表格样式 */
|
||
.table-custom {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.table-custom thead th {
|
||
background: rgba(6, 182, 212, 0.1);
|
||
border-bottom: 1px solid var(--border-color);
|
||
color: var(--text-secondary);
|
||
font-weight: 600;
|
||
font-size: 0.85rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
padding: 1rem;
|
||
}
|
||
|
||
.table-custom tbody tr {
|
||
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.table-custom tbody tr:hover {
|
||
background: rgba(6, 182, 212, 0.05);
|
||
}
|
||
|
||
.table-custom tbody td {
|
||
padding: 1rem;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* 徽章样式 */
|
||
.badge-custom {
|
||
padding: 0.4rem 0.8rem;
|
||
border-radius: 6px;
|
||
font-size: 0.75rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.badge-success { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||
.badge-warning { background: rgba(234, 179, 8, 0.2); color: #eab308; }
|
||
.badge-danger { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
|
||
.badge-info { background: rgba(6, 182, 212, 0.2); color: var(--accent-cyan); }
|
||
.badge-primary { background: rgba(59, 130, 246, 0.2); color: var(--accent-blue); }
|
||
|
||
/* 表单样式 */
|
||
.form-control-custom {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid var(--border-color);
|
||
color: var(--text-primary);
|
||
border-radius: 8px;
|
||
padding: 0.6rem 1rem;
|
||
}
|
||
|
||
.form-control-custom:focus {
|
||
background: rgba(30, 41, 59, 0.7);
|
||
border-color: var(--accent-cyan);
|
||
box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.25);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.form-control-custom::placeholder {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.form-label-custom {
|
||
color: var(--text-primary);
|
||
font-weight: 500;
|
||
margin-bottom: 0.5rem;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.form-select-custom {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid var(--border-color);
|
||
color: var(--text-primary);
|
||
border-radius: 8px;
|
||
padding: 0.6rem 1rem;
|
||
}
|
||
|
||
.form-select-custom:focus {
|
||
background: rgba(30, 41, 59, 0.7);
|
||
border-color: var(--accent-cyan);
|
||
box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.25);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* 进度条 */
|
||
.progress-custom {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border-radius: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
.progress-bar-custom {
|
||
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
|
||
border-radius: 8px;
|
||
}
|
||
|
||
/* 待办事项 */
|
||
.todo-item {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
margin-bottom: 0.75rem;
|
||
transition: all 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.todo-item:hover {
|
||
border-color: var(--border-hover);
|
||
background: rgba(30, 41, 59, 0.7);
|
||
}
|
||
|
||
.priority-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
margin-right: 0.5rem;
|
||
}
|
||
|
||
.priority-high { background: #ef4444; }
|
||
.priority-medium { background: #eab308; }
|
||
.priority-low { background: #22c55e; }
|
||
|
||
/* 活动项 */
|
||
.activity-item {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
/* 页面标题 */
|
||
.page-title {
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.page-subtitle {
|
||
color: var(--text-secondary);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* 步骤指示器 */
|
||
.step-indicator {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.step-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.step-circle {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.step-circle.active {
|
||
background: var(--accent-cyan);
|
||
color: white;
|
||
}
|
||
|
||
.step-circle.inactive {
|
||
background: rgba(148, 163, 184, 0.2);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.step-line {
|
||
flex: 1;
|
||
height: 2px;
|
||
margin: 0 0.5rem;
|
||
}
|
||
|
||
.step-line.active {
|
||
background: var(--accent-cyan);
|
||
}
|
||
|
||
.step-line.inactive {
|
||
background: rgba(148, 163, 184, 0.2);
|
||
}
|
||
|
||
/* 设备状态卡片 */
|
||
.device-card {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
padding: 1.25rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 模板卡片 */
|
||
.template-card {
|
||
background: var(--bg-card);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
height: 100%;
|
||
}
|
||
|
||
.template-card:hover {
|
||
transform: scale(1.05);
|
||
border-color: var(--border-hover);
|
||
box-shadow: 0 12px 40px rgba(6, 182, 212, 0.3);
|
||
}
|
||
|
||
.template-icon {
|
||
font-size: 2.5rem;
|
||
color: var(--accent-cyan);
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* 印章卡片 */
|
||
.seal-card {
|
||
background: var(--bg-card);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
transition: all 0.3s;
|
||
text-align: center;
|
||
}
|
||
|
||
.seal-card:hover {
|
||
border-color: var(--border-hover);
|
||
}
|
||
|
||
.seal-preview {
|
||
width: 100%;
|
||
height: 150px;
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.seal-circle {
|
||
width: 80px;
|
||
height: 80px;
|
||
border: 2px solid #ef4444;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #ef4444;
|
||
font-size: 0.75rem;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 校验结果卡片 */
|
||
.validation-item {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid;
|
||
border-radius: 8px;
|
||
padding: 1.25rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.validation-item.error {
|
||
background: rgba(239, 68, 68, 0.1);
|
||
border-color: rgba(239, 68, 68, 0.3);
|
||
}
|
||
|
||
.validation-item.warning {
|
||
background: rgba(234, 179, 8, 0.1);
|
||
border-color: rgba(234, 179, 8, 0.3);
|
||
}
|
||
|
||
.validation-item.info {
|
||
background: rgba(59, 130, 246, 0.1);
|
||
border-color: rgba(59, 130, 246, 0.3);
|
||
}
|
||
|
||
/* 对比结果 */
|
||
.compare-result {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.diff-item {
|
||
font-size: 0.9rem;
|
||
padding: 0.5rem 0;
|
||
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
|
||
}
|
||
|
||
.diff-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.text-removed {
|
||
color: #ef4444;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.text-added {
|
||
color: #22c55e;
|
||
}
|
||
|
||
/* 审批卡片 */
|
||
.approval-card {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||
border-radius: 8px;
|
||
padding: 1.25rem;
|
||
margin-bottom: 1rem;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.approval-card:hover {
|
||
border-color: var(--border-hover);
|
||
background: rgba(30, 41, 59, 0.7);
|
||
}
|
||
|
||
/* 规则卡片 */
|
||
.rule-card {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||
border-radius: 8px;
|
||
padding: 1.25rem;
|
||
margin-bottom: 1rem;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.rule-card:hover {
|
||
border-color: var(--border-hover);
|
||
}
|
||
|
||
/* 响应式 */
|
||
@media (max-width: 768px) {
|
||
.sidebar {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
.sidebar.show {
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.main-content {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.search-box {
|
||
width: 200px;
|
||
}
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: rgba(15, 21, 53, 0.5);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba(6, 182, 212, 0.3);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(6, 182, 212, 0.5);
|
||
}
|
||
|
||
/* 隐藏类 */
|
||
.d-none {
|
||
display: none !important;
|
||
}
|
||
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 顶部导航栏 -->
|
||
<nav class="top-navbar">
|
||
<div class="d-flex align-items-center justify-content-between">
|
||
<div class="d-flex align-items-center gap-3">
|
||
<button class="btn notification-btn" onclick="toggleSidebar()">
|
||
<i class="bi bi-list"></i>
|
||
</button>
|
||
<div class="logo-section">
|
||
<div class="logo-icon">
|
||
<i class="bi bi-file-text text-white" style="font-size: 1.5rem;"></i>
|
||
</div>
|
||
<div class="logo-text">
|
||
<h1>装备履历本管理系统</h1>
|
||
<p>Equipment Record Management System</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex align-items-center gap-3">
|
||
<div class="search-box">
|
||
<i class="bi bi-search"></i>
|
||
<input type="text" class="form-control" placeholder="搜索产品、履历本...">
|
||
</div>
|
||
<button class="notification-btn">
|
||
<i class="bi bi-bell"></i>
|
||
<span class="notification-badge"></span>
|
||
</button>
|
||
<div class="user-info">
|
||
<div class="user-avatar">管</div>
|
||
<span>管理员</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 侧边栏 -->
|
||
<aside class="sidebar" id="sidebar">
|
||
<nav>
|
||
<div class="nav-section-title">主要功能</div>
|
||
<ul class="list-unstyled">
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom active" onclick="showPage('dashboard')">
|
||
<i class="bi bi-speedometer2"></i>
|
||
<span>工作台</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('product')">
|
||
<i class="bi bi-box-seam"></i>
|
||
<span>产品管理</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('create')">
|
||
<i class="bi bi-file-earmark-plus"></i>
|
||
<span>履历本制作</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('scan')">
|
||
<i class="bi bi-upc-scan"></i>
|
||
<span>扫描管理</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('validate')">
|
||
<i class="bi bi-check-circle"></i>
|
||
<span>智能校验</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('compare')">
|
||
<i class="bi bi-arrow-left-right"></i>
|
||
<span>版本对比</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('approve')">
|
||
<i class="bi bi-file-earmark-check"></i>
|
||
<span>审批管理</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('print')">
|
||
<i class="bi bi-printer"></i>
|
||
<span>套打输出</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="nav-section-title">系统配置</div>
|
||
<ul class="list-unstyled">
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('rules')">
|
||
<i class="bi bi-list-check"></i>
|
||
<span>规则管理</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('template')">
|
||
<i class="bi bi-file-earmark-text"></i>
|
||
<span>模板管理</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('seal')">
|
||
<i class="bi bi-award"></i>
|
||
<span>印章管理</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('data')">
|
||
<i class="bi bi-database"></i>
|
||
<span>数据管理</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('users')">
|
||
<i class="bi bi-people"></i>
|
||
<span>用户管理</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('permission')">
|
||
<i class="bi bi-shield-check"></i>
|
||
<span>权限管理</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item-custom">
|
||
<a href="#" class="nav-link-custom" onclick="showPage('settings')">
|
||
<i class="bi bi-gear"></i>
|
||
<span>系统设置</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</aside>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="main-content" id="mainContent">
|
||
<!-- 工作台页面 -->
|
||
<div id="page-dashboard" class="page-content">
|
||
<div class="d-flex justify-content-between align-items-start mb-4">
|
||
<div>
|
||
<h2 class="page-title">工作台</h2>
|
||
<p class="page-subtitle">履历本全生命周期管理流程</p>
|
||
</div>
|
||
<div class="text-end">
|
||
<p class="text-secondary small mb-0">当前时间</p>
|
||
<p class="fw-semibold" id="currentTime"></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="row g-3 mb-4">
|
||
<div class="col-md-3">
|
||
<div class="stat-card cyan">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">产品总数</p>
|
||
<p class="stat-value">1,234</p>
|
||
</div>
|
||
<div class="stat-icon cyan">
|
||
<i class="bi bi-box-seam"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card blue">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">履历本总数</p>
|
||
<p class="stat-value">5,678</p>
|
||
</div>
|
||
<div class="stat-icon blue">
|
||
<i class="bi bi-file-text"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card yellow">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">待审批</p>
|
||
<p class="stat-value">23</p>
|
||
<p class="stat-trend">↑ +5</p>
|
||
</div>
|
||
<div class="stat-icon yellow">
|
||
<i class="bi bi-file-earmark-check"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card green">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">今日制作</p>
|
||
<p class="stat-value">45</p>
|
||
<p class="stat-trend">↑ +12</p>
|
||
</div>
|
||
<div class="stat-icon green">
|
||
<i class="bi bi-printer"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 业务流程可视化 -->
|
||
<div class="card-custom mb-4">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">
|
||
<span class="border-start border-4 border-info ps-2">履历本业务流程</span>
|
||
</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="row g-3 mb-3">
|
||
<div class="col-md-3">
|
||
<div class="process-card cyan" onclick="showPage('create')">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="process-icon">
|
||
<i class="bi bi-file-earmark-plus"></i>
|
||
</div>
|
||
<i class="bi bi-chevron-right text-secondary"></i>
|
||
</div>
|
||
<h6 class="process-title">新本制作</h6>
|
||
<p class="process-desc">装备首次出厂履历本制作</p>
|
||
<ul class="process-steps">
|
||
<li>产品信息</li>
|
||
<li>数据录入</li>
|
||
<li>AI校验</li>
|
||
<li>审批</li>
|
||
<li>套打输出</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="process-card blue" onclick="showPage('scan')">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="process-icon">
|
||
<i class="bi bi-upc-scan"></i>
|
||
</div>
|
||
<i class="bi bi-chevron-right text-secondary"></i>
|
||
</div>
|
||
<h6 class="process-title">扫描识别</h6>
|
||
<p class="process-desc">纸质履历本数字化</p>
|
||
<ul class="process-steps">
|
||
<li>放入扫描仪</li>
|
||
<li>自动翻页</li>
|
||
<li>OCR识别</li>
|
||
<li>数据提取</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="process-card purple" onclick="showPage('validate')">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="process-icon">
|
||
<i class="bi bi-check-circle"></i>
|
||
</div>
|
||
<i class="bi bi-chevron-right text-secondary"></i>
|
||
</div>
|
||
<h6 class="process-title">智能校验</h6>
|
||
<p class="process-desc">AI智能规则校验</p>
|
||
<ul class="process-steps">
|
||
<li>规则加载</li>
|
||
<li>数据校验</li>
|
||
<li>异常检测</li>
|
||
<li>生成报告</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="process-card green" onclick="showPage('compare')">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="process-icon">
|
||
<i class="bi bi-arrow-left-right"></i>
|
||
</div>
|
||
<i class="bi bi-chevron-right text-secondary"></i>
|
||
</div>
|
||
<h6 class="process-title">版本对比</h6>
|
||
<p class="process-desc">新旧版本差异分析</p>
|
||
<ul class="process-steps">
|
||
<li>加载版本</li>
|
||
<li>数据对比</li>
|
||
<li>差异标注</li>
|
||
<li>生成报告</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-3">
|
||
<div class="col-md-3">
|
||
<div class="process-card orange" onclick="showPage('create')">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="process-icon">
|
||
<i class="bi bi-pencil-square"></i>
|
||
</div>
|
||
<i class="bi bi-chevron-right text-secondary"></i>
|
||
</div>
|
||
<h6 class="process-title">副本修订</h6>
|
||
<p class="process-desc">返厂修理履历本修订</p>
|
||
<ul class="process-steps">
|
||
<li>扫描原本</li>
|
||
<li>修订记录</li>
|
||
<li>版本对比</li>
|
||
<li>审批输出</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="process-card yellow" onclick="showPage('approve')">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="process-icon">
|
||
<i class="bi bi-file-earmark-check"></i>
|
||
</div>
|
||
<i class="bi bi-chevron-right text-secondary"></i>
|
||
</div>
|
||
<h6 class="process-title">审批流程</h6>
|
||
<p class="process-desc">履历本审批管理</p>
|
||
<ul class="process-steps">
|
||
<li>提交审批</li>
|
||
<li>工艺审核</li>
|
||
<li>技术审核</li>
|
||
<li>质量审核</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="process-card pink" onclick="showPage('print')">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="process-icon">
|
||
<i class="bi bi-printer"></i>
|
||
</div>
|
||
<i class="bi bi-chevron-right text-secondary"></i>
|
||
</div>
|
||
<h6 class="process-title">套打输出</h6>
|
||
<p class="process-desc">自动套打打印</p>
|
||
<ul class="process-steps">
|
||
<li>模板加载</li>
|
||
<li>数据填充</li>
|
||
<li>印章填充</li>
|
||
<li>打印输出</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="process-card indigo" onclick="showPage('data')">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="process-icon">
|
||
<i class="bi bi-database"></i>
|
||
</div>
|
||
<i class="bi bi-chevron-right text-secondary"></i>
|
||
</div>
|
||
<h6 class="process-title">数据管理</h6>
|
||
<p class="process-desc">全生命周期数据管理</p>
|
||
<ul class="process-steps">
|
||
<li>数据存储</li>
|
||
<li>版本管理</li>
|
||
<li>数据查询</li>
|
||
<li>统计分析</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 待办事项和最近操作 -->
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">
|
||
<span class="border-start border-4 border-info ps-2">待办事项</span>
|
||
</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="todo-item">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div>
|
||
<div class="mb-1">
|
||
<span class="priority-dot priority-high"></span>
|
||
<span class="fw-semibold">XX-2024-001 履历本待审批</span>
|
||
</div>
|
||
<small class="text-secondary">2小时前</small>
|
||
</div>
|
||
<i class="bi bi-chevron-right text-secondary"></i>
|
||
</div>
|
||
</div>
|
||
<div class="todo-item">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div>
|
||
<div class="mb-1">
|
||
<span class="priority-dot priority-medium"></span>
|
||
<span class="fw-semibold">XX-2024-002 校验异常待处理</span>
|
||
</div>
|
||
<small class="text-secondary">5小时前</small>
|
||
</div>
|
||
<i class="bi bi-chevron-right text-secondary"></i>
|
||
</div>
|
||
</div>
|
||
<div class="todo-item">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div>
|
||
<div class="mb-1">
|
||
<span class="priority-dot priority-low"></span>
|
||
<span class="fw-semibold">XX-2024-003 副本制作中</span>
|
||
</div>
|
||
<small class="text-secondary">1天前</small>
|
||
</div>
|
||
<i class="bi bi-chevron-right text-secondary"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">
|
||
<span class="border-start border-4 border-info ps-2">最近操作</span>
|
||
</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="activity-item">
|
||
<p class="mb-1">
|
||
<span class="text-info">张三</span> 制作履历本
|
||
<span class="text-primary">XX-2024-005</span>
|
||
</p>
|
||
<small class="text-secondary">10分钟前</small>
|
||
</div>
|
||
<div class="activity-item">
|
||
<p class="mb-1">
|
||
<span class="text-info">李四</span> 审批通过
|
||
<span class="text-primary">XX-2024-004</span>
|
||
</p>
|
||
<small class="text-secondary">1小时前</small>
|
||
</div>
|
||
<div class="activity-item">
|
||
<p class="mb-1">
|
||
<span class="text-info">王五</span> 扫描完成
|
||
<span class="text-primary">XX-2024-003</span>
|
||
</p>
|
||
<small class="text-secondary">2小时前</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品管理页面 -->
|
||
<div id="page-product" class="page-content d-none">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h2 class="page-title">产品管理</h2>
|
||
<p class="page-subtitle">管理装备产品基本信息</p>
|
||
</div>
|
||
<button class="btn btn-custom-primary">
|
||
<i class="bi bi-plus-lg me-2"></i>新建产品
|
||
</button>
|
||
</div>
|
||
|
||
<div class="card-custom">
|
||
<div class="card-body-custom">
|
||
<div class="row g-3 mb-4">
|
||
<div class="col-md-8">
|
||
<input type="text" class="form-control-custom" placeholder="搜索产品型号、编号...">
|
||
</div>
|
||
<div class="col-md-4">
|
||
<select class="form-select-custom">
|
||
<option>全部主机厂</option>
|
||
<option>132厂</option>
|
||
<option>其他</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-custom">
|
||
<thead>
|
||
<tr>
|
||
<th>产品型号</th>
|
||
<th>产品编号</th>
|
||
<th>交付主机厂</th>
|
||
<th>履历本数量</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>XX-2024-001</td>
|
||
<td>20240101001</td>
|
||
<td>132厂</td>
|
||
<td>3</td>
|
||
<td><span class="badge-custom badge-success">正常</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none">查看详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2024-002</td>
|
||
<td>20240101002</td>
|
||
<td>132厂</td>
|
||
<td>6</td>
|
||
<td><span class="badge-custom badge-success">正常</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none">查看详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2024-003</td>
|
||
<td>20240101003</td>
|
||
<td>132厂</td>
|
||
<td>9</td>
|
||
<td><span class="badge-custom badge-success">正常</span></td>
|
||
<td><a href="#" class="text-decoration-none">查看详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2024-004</td>
|
||
<td>20240101004</td>
|
||
<td>132厂</td>
|
||
<td>12</td>
|
||
<td><span class="badge-custom badge-success">正常</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none">查看详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2024-005</td>
|
||
<td>20240101005</td>
|
||
<td>132厂</td>
|
||
<td>15</td>
|
||
<td><span class="badge-custom badge-success">正常</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none">查看详情</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 履历本制作页面 -->
|
||
<div id="page-create" class="page-content d-none">
|
||
<div class="mb-4">
|
||
<h2 class="page-title">履历本制作</h2>
|
||
<p class="page-subtitle">新本制作与副本修订</p>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-8">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">制作向导</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="step-indicator mb-4">
|
||
<div class="step-item">
|
||
<div class="step-circle active">1</div>
|
||
<div class="step-line active"></div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-circle inactive">2</div>
|
||
<div class="step-line inactive"></div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-circle inactive">3</div>
|
||
<div class="step-line inactive"></div>
|
||
</div>
|
||
<div class="step-item">
|
||
<div class="step-circle inactive">4</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="p-4" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<h6 class="fw-semibold mb-3">步骤1：选择产品</h6>
|
||
<div class="mb-3">
|
||
<label class="form-label-custom">产品型号</label>
|
||
<select class="form-select-custom">
|
||
<option>请选择产品型号</option>
|
||
<option>XX-2024-001</option>
|
||
<option>XX-2024-002</option>
|
||
<option>XX-2024-003</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label-custom">产品编号</label>
|
||
<input type="text" class="form-control-custom" placeholder="自动填充">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label-custom">交付主机厂</label>
|
||
<input type="text" class="form-control-custom" placeholder="自动填充">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 d-flex justify-content-between">
|
||
<button class="btn btn-custom-secondary" disabled>上一步</button>
|
||
<button class="btn btn-custom-primary">下一步</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="card-custom mb-3">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">快速操作</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="mb-3">
|
||
<div class="p-3"
|
||
style="background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2)); border: 1px solid rgba(6, 182, 212, 0.5); border-radius: 8px; cursor: pointer;">
|
||
<h6 class="fw-semibold mb-1">新本制作</h6>
|
||
<small class="text-secondary">装备首次出厂</small>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="p-3"
|
||
style="background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(239, 68, 68, 0.2)); border: 1px solid rgba(249, 115, 22, 0.5); border-radius: 8px; cursor: pointer;">
|
||
<h6 class="fw-semibold mb-1">副本修订</h6>
|
||
<small class="text-secondary">返厂修理后</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">制作进度</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="mb-3">
|
||
<small class="text-secondary d-block mb-2">当前步骤</small>
|
||
<h5 class="text-info">1/4 - 选择产品</h5>
|
||
</div>
|
||
<div class="progress-custom">
|
||
<div class="progress-bar-custom" style="width: 25%"></div>
|
||
</div>
|
||
<small class="text-secondary d-block mt-2">25% 完成</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 扫描管理页面 -->
|
||
<div id="page-scan" class="page-content d-none">
|
||
<div class="mb-4">
|
||
<h2 class="page-title">扫描管理</h2>
|
||
<p class="page-subtitle">纸质履历本数字化扫描</p>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">设备状态</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="device-card mb-3">
|
||
<div>
|
||
<h6 class="fw-semibold mb-1">KABIS V系列扫描仪</h6>
|
||
<small class="text-secondary">设备ID: SCAN-001</small>
|
||
</div>
|
||
<span class="badge-custom badge-success">在线</span>
|
||
</div>
|
||
|
||
<div class="row g-3 mb-3">
|
||
<div class="col-6">
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">今日扫描</small>
|
||
<h4 class="mb-0 text-info">156页</h4>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">识别率</small>
|
||
<h4 class="mb-0 text-success">99.2%</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-custom-primary w-100 mb-2">
|
||
<i class="bi bi-play-fill me-2"></i>开始扫描
|
||
</button>
|
||
<button class="btn btn-custom-secondary w-100">
|
||
<i class="bi bi-gear me-2"></i>设备设置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">扫描任务</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="mb-3 p-3"
|
||
style="background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
<span class="fw-semibold">XX-2024-001</span>
|
||
<small class="text-info">进行中</small>
|
||
</div>
|
||
<div class="progress-custom mb-2">
|
||
<div class="progress-bar-custom" style="width: 30%"></div>
|
||
</div>
|
||
<small class="text-secondary">30% 完成 · 已扫描 15/50 页</small>
|
||
</div>
|
||
|
||
<div class="mb-3 p-3"
|
||
style="background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
<span class="fw-semibold">XX-2024-002</span>
|
||
<small class="text-info">进行中</small>
|
||
</div>
|
||
<div class="progress-custom mb-2">
|
||
<div class="progress-bar-custom" style="width: 60%"></div>
|
||
</div>
|
||
<small class="text-secondary">60% 完成 · 已扫描 24/40 页</small>
|
||
</div>
|
||
|
||
<div class="p-3"
|
||
style="background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
<span class="fw-semibold">XX-2024-003</span>
|
||
<small class="text-success">已完成</small>
|
||
</div>
|
||
<div class="progress-custom mb-2">
|
||
<div class="progress-bar-custom" style="width: 100%"></div>
|
||
</div>
|
||
<small class="text-secondary">100% 完成 · 已扫描 45/45 页</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom mt-4">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">扫描历史</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="table-responsive">
|
||
<table class="table table-custom">
|
||
<thead>
|
||
<tr>
|
||
<th>产品编号</th>
|
||
<th>扫描时间</th>
|
||
<th>页数</th>
|
||
<th>识别率</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>XX-2024-003</td>
|
||
<td>2026-01-13 14:30:00</td>
|
||
<td>45</td>
|
||
<td>99.5%</td>
|
||
<td><span class="badge-custom badge-success">完成</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none">查看结果</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2024-002</td>
|
||
<td>2026-01-13 13:20:00</td>
|
||
<td>40</td>
|
||
<td>98.8%</td>
|
||
<td><span class="badge-custom badge-info">进行中</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none">查看进度</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2024-001</td>
|
||
<td>2026-01-13 12:10:00</td>
|
||
<td>50</td>
|
||
<td>99.2%</td>
|
||
<td><span class="badge-custom badge-info">进行中</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none">查看进度</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 智能校验页面 -->
|
||
<div id="page-validate" class="page-content d-none">
|
||
<div class="mb-4">
|
||
<h2 class="page-title">智能校验</h2>
|
||
<p class="page-subtitle">AI智能规则校验与异常检测</p>
|
||
</div>
|
||
|
||
<div class="row g-3 mb-4">
|
||
<div class="col-md-3">
|
||
<div class="stat-card green">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">通过</p>
|
||
<p class="stat-value">156</p>
|
||
</div>
|
||
<div class="stat-icon green">
|
||
<i class="bi bi-check-circle"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card"
|
||
style="background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1)); border-color: rgba(239, 68, 68, 0.5);">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">严重错误</p>
|
||
<p class="stat-value">3</p>
|
||
</div>
|
||
<div class="stat-icon" style="background: rgba(239, 68, 68, 0.2); color: #ef4444;">
|
||
<i class="bi bi-x-circle"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card yellow">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">警告</p>
|
||
<p class="stat-value">12</p>
|
||
</div>
|
||
<div class="stat-icon yellow">
|
||
<i class="bi bi-exclamation-triangle"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card blue">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">提示</p>
|
||
<p class="stat-value">8</p>
|
||
</div>
|
||
<div class="stat-icon blue">
|
||
<i class="bi bi-info-circle"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom mb-4">
|
||
<div class="card-header-custom">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h5 class="mb-0 fw-bold">校验配置</h5>
|
||
<button class="btn btn-custom-primary btn-sm">
|
||
<i class="bi bi-play-fill me-1"></i>开始校验
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="row g-3">
|
||
<div class="col-md-4">
|
||
<label class="form-label-custom">选择产品</label>
|
||
<select class="form-select-custom">
|
||
<option>XX-2024-001</option>
|
||
<option>XX-2024-002</option>
|
||
<option>XX-2024-003</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label class="form-label-custom">校验规则集</label>
|
||
<select class="form-select-custom">
|
||
<option>132厂技术协议 V2.0</option>
|
||
<option>通用规则集 V1.0</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<label class="form-label-custom">校验级别</label>
|
||
<select class="form-select-custom">
|
||
<option>全面校验</option>
|
||
<option>快速校验</option>
|
||
<option>自定义</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">校验详情</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="validation-item error">
|
||
<div class="d-flex align-items-start justify-content-between">
|
||
<div class="flex-grow-1">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<span class="badge-custom badge-danger me-2">严重</span>
|
||
<span class="fw-semibold">封面 - 日期逻辑错误</span>
|
||
</div>
|
||
<p class="mb-2 text-secondary">出厂日期(2026-01-10)早于性能测试日期(2026-01-11)</p>
|
||
<p class="mb-0 small text-info">
|
||
<i class="bi bi-lightbulb me-1"></i>
|
||
建议：修正出厂日期为2026-01-12或更晚
|
||
</p>
|
||
</div>
|
||
<button class="btn btn-danger-custom btn-sm ms-3">修正</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="validation-item error">
|
||
<div class="d-flex align-items-start justify-content-between">
|
||
<div class="flex-grow-1">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<span class="badge-custom badge-danger me-2">严重</span>
|
||
<span class="fw-semibold">性能指标 - 数据超差</span>
|
||
</div>
|
||
<p class="mb-2 text-secondary">电压值(25.2V)超出允许范围(24V±0.5V)</p>
|
||
<p class="mb-0 small text-info">
|
||
<i class="bi bi-lightbulb me-1"></i>
|
||
建议：重新测试或确认数据准确性
|
||
</p>
|
||
</div>
|
||
<button class="btn btn-danger-custom btn-sm ms-3">修正</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="validation-item warning">
|
||
<div class="d-flex align-items-start justify-content-between">
|
||
<div class="flex-grow-1">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<span class="badge-custom badge-warning me-2">警告</span>
|
||
<span class="fw-semibold">验收证明 - 印章缺失</span>
|
||
</div>
|
||
<p class="mb-2 text-secondary">质检印章未填充</p>
|
||
<p class="mb-0 small text-info">
|
||
<i class="bi bi-lightbulb me-1"></i>
|
||
建议：补充质检人员印章
|
||
</p>
|
||
</div>
|
||
<button class="btn btn-info-custom btn-sm ms-3">处理</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="validation-item info">
|
||
<div class="d-flex align-items-start justify-content-between">
|
||
<div class="flex-grow-1">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<span class="badge-custom badge-info me-2">提示</span>
|
||
<span class="fw-semibold">配套页 - 格式建议</span>
|
||
</div>
|
||
<p class="mb-2 text-secondary">配套件批次号格式建议统一为：YYYYMMDD-XXX</p>
|
||
<p class="mb-0 small text-info">
|
||
<i class="bi bi-lightbulb me-1"></i>
|
||
建议：按标准格式填写以便后续管理
|
||
</p>
|
||
</div>
|
||
<button class="btn btn-info-custom btn-sm ms-3">忽略</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 版本对比页面 -->
|
||
<div id="page-compare" class="page-content d-none">
|
||
<div class="mb-4">
|
||
<h2 class="page-title">版本对比</h2>
|
||
<p class="page-subtitle">新旧版本差异分析</p>
|
||
</div>
|
||
|
||
<div class="card-custom mb-4">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">版本选择</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="row g-3 mb-3">
|
||
<div class="col-md-5">
|
||
<label class="form-label-custom">原版本</label>
|
||
<select class="form-select-custom">
|
||
<option>V1.0 (新本, 2026-01-12)</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-5">
|
||
<label class="form-label-custom">新版本</label>
|
||
<select class="form-select-custom">
|
||
<option>V1.1 (副本, 2026-03-15)</option>
|
||
<option>V1.2 (副本, 2026-05-20)</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-2 d-flex align-items-end">
|
||
<button class="btn btn-custom-primary w-100">
|
||
<i class="bi bi-arrow-left-right me-2"></i>对比
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-4">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">对比统计</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="mb-3 p-3"
|
||
style="background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.3); border-radius: 8px;">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<i class="bi bi-pencil-square text-warning me-2" style="font-size: 1.5rem;"></i>
|
||
<div>
|
||
<h4 class="mb-0">5</h4>
|
||
<small class="text-secondary">修改项</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3 p-3"
|
||
style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 8px;">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<i class="bi bi-plus-circle text-success me-2" style="font-size: 1.5rem;"></i>
|
||
<div>
|
||
<h4 class="mb-0">3</h4>
|
||
<small class="text-secondary">新增项</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="p-3"
|
||
style="background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 8px;">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<i class="bi bi-check-circle text-secondary me-2" style="font-size: 1.5rem;"></i>
|
||
<div>
|
||
<h4 class="mb-0">15</h4>
|
||
<small class="text-secondary">未变化项</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-8">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">差异详情</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="compare-result mb-3">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="badge-custom badge-warning me-2">修改</span>
|
||
<h6 class="mb-0">封面 - 修订次数</h6>
|
||
</div>
|
||
<div class="diff-item">
|
||
<span class="text-secondary">原值：</span>
|
||
<span class="text-removed">0</span>
|
||
<i class="bi bi-arrow-right mx-2 text-secondary"></i>
|
||
<span class="text-secondary">新值：</span>
|
||
<span class="text-added">1</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="compare-result mb-3">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="badge-custom badge-success me-2">新增</span>
|
||
<h6 class="mb-0">修理记录 - 新增记录</h6>
|
||
</div>
|
||
<div class="diff-item">
|
||
<div class="text-added">
|
||
<p class="mb-1"><strong>修理日期：</strong>2026-03-10</p>
|
||
<p class="mb-1"><strong>修理内容：</strong>更换电源模块</p>
|
||
<p class="mb-0"><strong>修理人员：</strong>李四</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="compare-result mb-3">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="badge-custom badge-success me-2">新增</span>
|
||
<h6 class="mb-0">换件记录 - 新增记录</h6>
|
||
</div>
|
||
<div class="diff-item">
|
||
<div class="text-added">
|
||
<p class="mb-1"><strong>换件日期：</strong>2026-03-10</p>
|
||
<p class="mb-1"><strong>换件名称：</strong>电源模块</p>
|
||
<p class="mb-1"><strong>旧件编号：</strong>PM-20240101</p>
|
||
<p class="mb-0"><strong>新件编号：</strong>PM-20260310</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="compare-result">
|
||
<div class="d-flex align-items-center mb-3">
|
||
<span class="badge-custom badge-warning me-2">修改</span>
|
||
<h6 class="mb-0">性能检查表 - 性能数据更新</h6>
|
||
</div>
|
||
<div class="diff-item">
|
||
<span class="text-secondary">电压：</span>
|
||
<span class="text-removed">24.2V</span>
|
||
<i class="bi bi-arrow-right mx-2 text-secondary"></i>
|
||
<span class="text-added">24.3V</span>
|
||
</div>
|
||
<div class="diff-item">
|
||
<span class="text-secondary">电流：</span>
|
||
<span class="text-removed">1.5A</span>
|
||
<i class="bi bi-arrow-right mx-2 text-secondary"></i>
|
||
<span class="text-added">1.6A</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 审批管理页面 -->
|
||
<div id="page-approve" class="page-content d-none">
|
||
<div class="mb-4">
|
||
<h2 class="page-title">审批管理</h2>
|
||
<p class="page-subtitle">履历本审批流程管理</p>
|
||
</div>
|
||
|
||
<div class="row g-3 mb-4">
|
||
<div class="col-md-4">
|
||
<div class="stat-card yellow">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">待我审批</p>
|
||
<p class="stat-value">5</p>
|
||
</div>
|
||
<div class="stat-icon yellow">
|
||
<i class="bi bi-hourglass-split"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="stat-card green">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">我已审批</p>
|
||
<p class="stat-value">23</p>
|
||
</div>
|
||
<div class="stat-icon green">
|
||
<i class="bi bi-check-circle"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="stat-card blue">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">审批中</p>
|
||
<p class="stat-value">12</p>
|
||
</div>
|
||
<div class="stat-icon blue">
|
||
<i class="bi bi-arrow-repeat"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">待审批列表</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="approval-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<div>
|
||
<h6 class="fw-semibold mb-2">XX-2024-001 履历本新本</h6>
|
||
<div class="mb-2">
|
||
<span class="text-secondary small">提交人：</span>
|
||
<span class="small">张三</span>
|
||
<span class="text-secondary small ms-3">提交时间：</span>
|
||
<span class="small">2026-01-12 10:30:00</span>
|
||
</div>
|
||
<span class="badge-custom badge-warning">待审批</span>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-success-custom">
|
||
<i class="bi bi-check-lg me-1"></i>通过
|
||
</button>
|
||
<button class="btn btn-danger-custom">
|
||
<i class="bi bi-x-lg me-1"></i>退回
|
||
</button>
|
||
<button class="btn btn-info-custom">
|
||
<i class="bi bi-eye me-1"></i>查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="approval-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<div>
|
||
<h6 class="fw-semibold mb-2">XX-2024-002 履历本副本</h6>
|
||
<div class="mb-2">
|
||
<span class="text-secondary small">提交人：</span>
|
||
<span class="small">李四</span>
|
||
<span class="text-secondary small ms-3">提交时间：</span>
|
||
<span class="small">2026-01-12 14:20:00</span>
|
||
</div>
|
||
<span class="badge-custom badge-warning">待审批</span>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-success-custom">
|
||
<i class="bi bi-check-lg me-1"></i>通过
|
||
</button>
|
||
<button class="btn btn-danger-custom">
|
||
<i class="bi bi-x-lg me-1"></i>退回
|
||
</button>
|
||
<button class="btn btn-info-custom">
|
||
<i class="bi bi-eye me-1"></i>查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="approval-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<div>
|
||
<h6 class="fw-semibold mb-2">XX-2024-003 履历本新本</h6>
|
||
<div class="mb-2">
|
||
<span class="text-secondary small">提交人：</span>
|
||
<span class="small">王五</span>
|
||
<span class="text-secondary small ms-3">提交时间：</span>
|
||
<span class="small">2026-01-13 09:15:00</span>
|
||
</div>
|
||
<span class="badge-custom badge-warning">待审批</span>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-success-custom">
|
||
<i class="bi bi-check-lg me-1"></i>通过
|
||
</button>
|
||
<button class="btn btn-danger-custom">
|
||
<i class="bi bi-x-lg me-1"></i>退回
|
||
</button>
|
||
<button class="btn btn-info-custom">
|
||
<i class="bi bi-eye me-1"></i>查看详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 套打输出页面 -->
|
||
<div id="page-print" class="page-content d-none">
|
||
<div class="mb-4">
|
||
<h2 class="page-title">套打输出</h2>
|
||
<p class="page-subtitle">自动套打打印管理</p>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">打印设备</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="device-card mb-3">
|
||
<div>
|
||
<h6 class="fw-semibold mb-1">智能套打打印机</h6>
|
||
<small class="text-secondary">设备ID: PRINT-001</small>
|
||
</div>
|
||
<span class="badge-custom badge-success">就绪</span>
|
||
</div>
|
||
|
||
<div class="row g-3 mb-3">
|
||
<div class="col-6">
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">今日打印</small>
|
||
<h4 class="mb-0 text-info">45页</h4>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">套打精度</small>
|
||
<h4 class="mb-0 text-success">±0.3mm</h4>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<label class="form-label-custom">打印设置</label>
|
||
<select class="form-select-custom mb-2">
|
||
<option>A4纸张</option>
|
||
<option>A3纸张</option>
|
||
</select>
|
||
<select class="form-select-custom">
|
||
<option>双面打印</option>
|
||
<option>单面打印</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button class="btn btn-custom-primary w-100">
|
||
<i class="bi bi-printer me-2"></i>开始打印
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">打印队列</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="mb-3 p-3"
|
||
style="background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
<span class="fw-semibold">XX-2024-001</span>
|
||
<span class="badge-custom badge-info">等待中</span>
|
||
</div>
|
||
<small class="text-secondary">12页 · A4纸 · 双面打印</small>
|
||
</div>
|
||
|
||
<div class="mb-3 p-3"
|
||
style="background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
<span class="fw-semibold">XX-2024-002</span>
|
||
<span class="badge-custom badge-info">等待中</span>
|
||
</div>
|
||
<small class="text-secondary">15页 · A4纸 · 双面打印</small>
|
||
</div>
|
||
|
||
<div class="p-3"
|
||
style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||
<span class="fw-semibold">XX-2024-003</span>
|
||
<span class="badge-custom badge-primary">打印中</span>
|
||
</div>
|
||
<div class="progress-custom mb-2">
|
||
<div class="progress-bar-custom" style="width: 65%"></div>
|
||
</div>
|
||
<small class="text-secondary">65% 完成 · 已打印 13/20 页</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom mt-4">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">打印历史</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="table-responsive">
|
||
<table class="table table-custom">
|
||
<thead>
|
||
<tr>
|
||
<th>产品编号</th>
|
||
<th>打印时间</th>
|
||
<th>页数</th>
|
||
<th>纸张</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>XX-2024-005</td>
|
||
<td>2026-01-13 14:30:00</td>
|
||
<td>18</td>
|
||
<td>A4 双面</td>
|
||
<td><span class="badge-custom badge-success">完成</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none">重新打印</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2024-004</td>
|
||
<td>2026-01-13 13:20:00</td>
|
||
<td>22</td>
|
||
<td>A4 双面</td>
|
||
<td><span class="badge-custom badge-success">完成</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none">重新打印</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2024-003</td>
|
||
<td>2026-01-13 12:10:00</td>
|
||
<td>20</td>
|
||
<td>A4 双面</td>
|
||
<td><span class="badge-custom badge-primary">打印中</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none">查看进度</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 规则管理页面 -->
|
||
<div id="page-rules" class="page-content d-none">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h2 class="page-title">规则管理</h2>
|
||
<p class="page-subtitle">校验规则配置与管理</p>
|
||
</div>
|
||
<button class="btn btn-custom-primary">
|
||
<i class="bi bi-plus-lg me-2"></i>新建规则
|
||
</button>
|
||
</div>
|
||
|
||
<div class="card-custom mb-4">
|
||
<div class="card-body-custom">
|
||
<div class="row g-3">
|
||
<div class="col-md-8">
|
||
<input type="text" class="form-control-custom" placeholder="搜索规则名称、描述...">
|
||
</div>
|
||
<div class="col-md-4">
|
||
<select class="form-select-custom">
|
||
<option>全部类型</option>
|
||
<option>技术协议</option>
|
||
<option>技术规范</option>
|
||
<option>试验大纲</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom">
|
||
<div class="card-body-custom">
|
||
<div class="rule-card">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="flex-grow-1">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<h6 class="fw-semibold mb-0 me-3">封面日期逻辑校验</h6>
|
||
<span class="badge-custom badge-info">技术协议</span>
|
||
</div>
|
||
<p class="text-secondary small mb-2">
|
||
适用厂家：132厂 | 适用产品：全部
|
||
</p>
|
||
<p class="text-secondary small mb-0">
|
||
封面的开始日期必须在后续页面的日期之前，否则需要提出校验错误的提示
|
||
</p>
|
||
</div>
|
||
<div class="d-flex align-items-center gap-3 ms-3">
|
||
<span class="badge-custom badge-success">启用</span>
|
||
<button class="btn btn-info-custom btn-sm">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rule-card">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="flex-grow-1">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<h6 class="fw-semibold mb-0 me-3">性能数据超差检查</h6>
|
||
<span class="badge-custom badge-primary">技术规范</span>
|
||
</div>
|
||
<p class="text-secondary small mb-2">
|
||
适用厂家：132厂 | 适用产品：全部
|
||
</p>
|
||
<p class="text-secondary small mb-0">
|
||
性能测试数据必须在技术规范规定的范围内，超出范围需要提示错误
|
||
</p>
|
||
</div>
|
||
<div class="d-flex align-items-center gap-3 ms-3">
|
||
<span class="badge-custom badge-success">启用</span>
|
||
<button class="btn btn-info-custom btn-sm">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rule-card">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="flex-grow-1">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<h6 class="fw-semibold mb-0 me-3">印章完整性检查</h6>
|
||
<span class="badge-custom badge-warning">通用规则</span>
|
||
</div>
|
||
<p class="text-secondary small mb-2">
|
||
适用厂家：全部 | 适用产品：全部
|
||
</p>
|
||
<p class="text-secondary small mb-0">
|
||
所有需要签字盖章的位置必须填充完整，不能有空缺
|
||
</p>
|
||
</div>
|
||
<div class="d-flex align-items-center gap-3 ms-3">
|
||
<span class="badge-custom badge-success">启用</span>
|
||
<button class="btn btn-info-custom btn-sm">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rule-card">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div class="flex-grow-1">
|
||
<div class="d-flex align-items-center mb-2">
|
||
<h6 class="fw-semibold mb-0 me-3">时间序列逻辑检查</h6>
|
||
<span class="badge-custom badge-info">技术协议</span>
|
||
</div>
|
||
<p class="text-secondary small mb-2">
|
||
适用厂家：132厂 | 适用产品：全部
|
||
</p>
|
||
<p class="text-secondary small mb-0">
|
||
各项操作时间必须符合逻辑顺序，如生产日期应早于测试日期，测试日期应早于出厂日期
|
||
</p>
|
||
</div>
|
||
<div class="d-flex align-items-center gap-3 ms-3">
|
||
<span class="badge-custom badge-success">启用</span>
|
||
<button class="btn btn-info-custom btn-sm">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模板管理页面 -->
|
||
<div id="page-template" class="page-content d-none">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h2 class="page-title">模板管理</h2>
|
||
<p class="page-subtitle">履历本模板配置与管理</p>
|
||
</div>
|
||
<button class="btn btn-custom-primary">
|
||
<i class="bi bi-plus-lg me-2"></i>新建模板
|
||
</button>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-4">
|
||
<div class="template-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<i class="bi bi-file-earmark-text template-icon"></i>
|
||
<span class="badge-custom badge-info">V2.0</span>
|
||
</div>
|
||
<h6 class="fw-semibold mb-2">封面模板</h6>
|
||
<p class="text-secondary small mb-3">132厂</p>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-info-custom btn-sm flex-grow-1">预览</button>
|
||
<button class="btn btn-custom-secondary btn-sm flex-grow-1">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="template-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<i class="bi bi-file-earmark-check template-icon"></i>
|
||
<span class="badge-custom badge-info">V1.5</span>
|
||
</div>
|
||
<h6 class="fw-semibold mb-2">验收证明模板</h6>
|
||
<p class="text-secondary small mb-3">132厂</p>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-info-custom btn-sm flex-grow-1">预览</button>
|
||
<button class="btn btn-custom-secondary btn-sm flex-grow-1">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="template-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<i class="bi bi-file-earmark-bar-graph template-icon"></i>
|
||
<span class="badge-custom badge-info">V2.1</span>
|
||
</div>
|
||
<h6 class="fw-semibold mb-2">性能指标模板</h6>
|
||
<p class="text-secondary small mb-3">132厂</p>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-info-custom btn-sm flex-grow-1">预览</button>
|
||
<button class="btn btn-custom-secondary btn-sm flex-grow-1">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="template-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<i class="bi bi-file-earmark-ruled template-icon"></i>
|
||
<span class="badge-custom badge-info">V1.0</span>
|
||
</div>
|
||
<h6 class="fw-semibold mb-2">配套页模板</h6>
|
||
<p class="text-secondary small mb-3">全部</p>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-info-custom btn-sm flex-grow-1">预览</button>
|
||
<button class="btn btn-custom-secondary btn-sm flex-grow-1">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="template-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<i class="bi bi-file-earmark-medical template-icon"></i>
|
||
<span class="badge-custom badge-info">V1.2</span>
|
||
</div>
|
||
<h6 class="fw-semibold mb-2">修理记录模板</h6>
|
||
<p class="text-secondary small mb-3">全部</p>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-info-custom btn-sm flex-grow-1">预览</button>
|
||
<button class="btn btn-custom-secondary btn-sm flex-grow-1">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="template-card">
|
||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||
<i class="bi bi-file-earmark-font template-icon"></i>
|
||
<span class="badge-custom badge-info">V1.0</span>
|
||
</div>
|
||
<h6 class="fw-semibold mb-2">重要记事模板</h6>
|
||
<p class="text-secondary small mb-3">全部</p>
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-info-custom btn-sm flex-grow-1">预览</button>
|
||
<button class="btn btn-custom-secondary btn-sm flex-grow-1">编辑</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 印章管理页面 -->
|
||
<div id="page-seal" class="page-content d-none">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h2 class="page-title">印章管理</h2>
|
||
<p class="page-subtitle">履历本印章配置与管理</p>
|
||
</div>
|
||
<button class="btn btn-custom-primary">
|
||
<i class="bi bi-upload me-2"></i>上传印章
|
||
</button>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-3">
|
||
<div class="seal-card">
|
||
<div class="seal-preview">
|
||
<div class="seal-circle">工艺负责人</div>
|
||
</div>
|
||
<h6 class="fw-semibold mb-1">工艺负责人</h6>
|
||
<p class="text-secondary small mb-0">PNG · 200x200</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="seal-card">
|
||
<div class="seal-preview">
|
||
<div class="seal-circle">技术负责人</div>
|
||
</div>
|
||
<h6 class="fw-semibold mb-1">技术负责人</h6>
|
||
<p class="text-secondary small mb-0">PNG · 200x200</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="seal-card">
|
||
<div class="seal-preview">
|
||
<div class="seal-circle">质量负责人</div>
|
||
</div>
|
||
<h6 class="fw-semibold mb-1">质量负责人</h6>
|
||
<p class="text-secondary small mb-0">PNG · 200x200</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="seal-card">
|
||
<div class="seal-preview">
|
||
<div class="seal-circle">检验员</div>
|
||
</div>
|
||
<h6 class="fw-semibold mb-1">检验员</h6>
|
||
<p class="text-secondary small mb-0">PNG · 200x200</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="seal-card">
|
||
<div class="seal-preview">
|
||
<div class="seal-circle">审核员</div>
|
||
</div>
|
||
<h6 class="fw-semibold mb-1">审核员</h6>
|
||
<p class="text-secondary small mb-0">PNG · 200x200</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="seal-card">
|
||
<div class="seal-preview">
|
||
<div class="seal-circle">批准人</div>
|
||
</div>
|
||
<h6 class="fw-semibold mb-1">批准人</h6>
|
||
<p class="text-secondary small mb-0">PNG · 200x200</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="seal-card">
|
||
<div class="seal-preview">
|
||
<div class="seal-circle">公司公章</div>
|
||
</div>
|
||
<h6 class="fw-semibold mb-1">公司公章</h6>
|
||
<p class="text-secondary small mb-0">PNG · 200x200</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="seal-card">
|
||
<div class="seal-preview">
|
||
<div class="seal-circle">质检章</div>
|
||
</div>
|
||
<h6 class="fw-semibold mb-1">质检章</h6>
|
||
<p class="text-secondary small mb-0">PNG · 200x200</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据管理页面 -->
|
||
<div id="page-data" class="page-content d-none">
|
||
<div class="mb-4">
|
||
<h2 class="page-title">数据管理</h2>
|
||
<p class="page-subtitle">全生命周期数据管理与统计</p>
|
||
</div>
|
||
|
||
<div class="row g-3 mb-4">
|
||
<div class="col-md-3">
|
||
<div class="stat-card cyan">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">总数据量</p>
|
||
<p class="stat-value">2.3TB</p>
|
||
</div>
|
||
<div class="stat-icon cyan">
|
||
<i class="bi bi-database"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card blue">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">履历本文件</p>
|
||
<p class="stat-value">5,678</p>
|
||
</div>
|
||
<div class="stat-icon blue">
|
||
<i class="bi bi-file-text"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card green">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">今日备份</p>
|
||
<p class="stat-value">成功</p>
|
||
</div>
|
||
<div class="stat-icon green">
|
||
<i class="bi bi-archive"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="stat-card yellow">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<div>
|
||
<p class="stat-label">存储使用率</p>
|
||
<p class="stat-value">68%</p>
|
||
</div>
|
||
<div class="stat-icon yellow">
|
||
<i class="bi bi-pie-chart"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom mb-4">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">数据统计</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="d-flex align-items-center justify-content-center"
|
||
style="height: 300px; background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<div class="text-center">
|
||
<i class="bi bi-bar-chart" style="font-size: 3rem; color: var(--accent-cyan);"></i>
|
||
<p class="text-secondary mt-3">数据统计图表区域</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-6">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">数据备份</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="mb-3">
|
||
<label class="form-label-custom">备份策略</label>
|
||
<select class="form-select-custom">
|
||
<option>每日自动备份</option>
|
||
<option>每周自动备份</option>
|
||
<option>手动备份</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-custom-primary w-100">
|
||
<i class="bi bi-cloud-upload me-2"></i>立即备份
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">数据导出</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="mb-3">
|
||
<label class="form-label-custom">导出格式</label>
|
||
<select class="form-select-custom">
|
||
<option>Excel格式</option>
|
||
<option>PDF格式</option>
|
||
<option>CSV格式</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-custom-primary w-100">
|
||
<i class="bi bi-download me-2"></i>导出数据
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 用户管理页面 -->
|
||
<div id="page-users" class="page-content d-none">
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h2 class="page-title">用户管理</h2>
|
||
<p class="page-subtitle">系统用户配置与管理</p>
|
||
</div>
|
||
<button class="btn btn-custom-primary">
|
||
<i class="bi bi-plus-lg me-2"></i>新建用户
|
||
</button>
|
||
</div>
|
||
|
||
<div class="card-custom">
|
||
<div class="card-body-custom">
|
||
<div class="table-responsive">
|
||
<table class="table table-custom">
|
||
<thead>
|
||
<tr>
|
||
<th>用户名</th>
|
||
<th>姓名</th>
|
||
<th>部门</th>
|
||
<th>角色</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>admin</td>
|
||
<td>管理员</td>
|
||
<td>系统管理部</td>
|
||
<td><span class="badge-custom badge-info">系统管理员</span></td>
|
||
<td><span class="badge-custom badge-success">启用</span></td>
|
||
<td>
|
||
<a href="#" class="text-info text-decoration-none me-2">编辑</a>
|
||
<a href="#" class="text-danger text-decoration-none">删除</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>zhangsan</td>
|
||
<td>张三</td>
|
||
<td>工艺部</td>
|
||
<td><span class="badge-custom badge-primary">编制人</span></td>
|
||
<td><span class="badge-custom badge-success">启用</span></td>
|
||
<td>
|
||
<a href="#" class="text-info text-decoration-none me-2">编辑</a>
|
||
<a href="#" class="text-danger text-decoration-none">删除</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>lisi</td>
|
||
<td>李四</td>
|
||
<td>技术部</td>
|
||
<td><span class="badge-custom badge-warning">审核人</span></td>
|
||
<td><span class="badge-custom badge-success">启用</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none me-2">编辑</a> <a href="#"
|
||
class="text-danger text-decoration-none">删除</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>wangwu</td>
|
||
<td>王五</td>
|
||
<td>质量部</td>
|
||
<td><span class="badge-custom badge-success">质量管理员</span></td>
|
||
<td><span class="badge-custom badge-success">启用</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none me-2">编辑</a> <a href="#"
|
||
class="text-danger text-decoration-none">删除</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>zhaoliu</td>
|
||
<td>赵六</td>
|
||
<td>生产部</td>
|
||
<td><span class="badge-custom badge-primary">编制人</span></td>
|
||
<td><span class="badge-custom badge-danger">停用</span></td>
|
||
<td><a href="#" class="text-info text-decoration-none me-2">编辑</a> <a href="#"
|
||
class="text-danger text-decoration-none">删除</a>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 权限管理页面 -->
|
||
<div id="page-permission" class="page-content d-none">
|
||
<div class="mb-4">
|
||
<h2 class="page-title">权限管理</h2>
|
||
<p class="page-subtitle">角色与权限配置</p>
|
||
</div>
|
||
|
||
<div class="row g-4">
|
||
<div class="col-md-4">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">角色列表</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="list-group">
|
||
<a href="#" class="list-group-item list-group-item-action active"
|
||
style="background: rgba(6, 182, 212, 0.2); border: 1px solid rgba(6, 182, 212, 0.5); color: var(--text-primary); margin-bottom: 0.5rem; border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="fw-semibold">系统管理员</span>
|
||
<i class="bi bi-chevron-right"></i>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="list-group-item list-group-item-action"
|
||
style="background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.2); color: var(--text-primary); margin-bottom: 0.5rem; border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span>产品管理员</span>
|
||
<i class="bi bi-chevron-right"></i>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="list-group-item list-group-item-action"
|
||
style="background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.2); color: var(--text-primary); margin-bottom: 0.5rem; border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span>编制人</span>
|
||
<i class="bi bi-chevron-right"></i>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="list-group-item list-group-item-action"
|
||
style="background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.2); color: var(--text-primary); margin-bottom: 0.5rem; border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span>审核人</span>
|
||
<i class="bi bi-chevron-right"></i>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="list-group-item list-group-item-action"
|
||
style="background: rgba(30, 41, 59, 0.5); border: 1px solid rgba(148, 163, 184, 0.2); color: var(--text-primary); margin-bottom: 0.5rem; border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span>质量管理员</span>
|
||
<i class="bi bi-chevron-right"></i>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-8">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h5 class="mb-0 fw-bold">系统管理员 - 权限配置</h5>
|
||
<button class="btn btn-custom-primary btn-sm">保存</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="mb-4">
|
||
<h6 class="fw-semibold mb-3">主要功能</h6>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm1">
|
||
<label class="form-check-label text-white" for="perm1">
|
||
工作台 - 查看
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm2">
|
||
<label class="form-check-label text-white" for="perm2">
|
||
产品管理 - 增删改查
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm3">
|
||
<label class="form-check-label text-white" for="perm3">
|
||
履历本制作 - 增删改查
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm4">
|
||
<label class="form-check-label text-white" for="perm4">
|
||
扫描管理 - 操作与查看
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm5">
|
||
<label class="form-check-label text-white" for="perm5">
|
||
智能校验 - 操作与查看
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm6">
|
||
<label class="form-check-label text-white" for="perm6">
|
||
版本对比 - 操作与查看
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm7">
|
||
<label class="form-check-label text-white" for="perm7">
|
||
审批管理 - 全部权限
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm8">
|
||
<label class="form-check-label text-white" for="perm8">
|
||
套打输出 - 操作与查看
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h6 class="fw-semibold mb-3">系统配置</h6>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm9">
|
||
<label class="form-check-label text-white" for="perm9">
|
||
规则管理 - 增删改查
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm10">
|
||
<label class="form-check-label text-white" for="perm10">
|
||
模板管理 - 增删改查
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm11">
|
||
<label class="form-check-label text-white" for="perm11">
|
||
印章管理 - 增删改查
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm12">
|
||
<label class="form-check-label text-white" for="perm12">
|
||
数据管理 - 全部权限
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm13">
|
||
<label class="form-check-label text-white" for="perm13">
|
||
用户管理 - 增删改查
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm14">
|
||
<label class="form-check-label text-white" for="perm14">
|
||
权限管理 - 配置权限
|
||
</label>
|
||
</div>
|
||
<div class="form-check mb-2">
|
||
<input class="form-check-input" type="checkbox" checked id="perm15">
|
||
<label class="form-check-label text-white" for="perm15">
|
||
系统设置 - 全部权限
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统设置页面 -->
|
||
<div id="page-settings" class="page-content d-none">
|
||
<div class="mb-4">
|
||
<h2 class="page-title">系统设置</h2>
|
||
<p class="page-subtitle">系统参数配置</p>
|
||
</div>
|
||
|
||
<div class="card-custom mb-4">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">基本设置</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">系统名称</label>
|
||
<input type="text" class="form-control-custom" value="装备履历本全生命周期管理系统">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">单位名称</label>
|
||
<input type="text" class="form-control-custom" placeholder="请输入单位名称">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">联系电话</label>
|
||
<input type="text" class="form-control-custom" placeholder="请输入联系电话">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">联系邮箱</label>
|
||
<input type="email" class="form-control-custom" placeholder="请输入联系邮箱">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom mb-4">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">安全设置</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">密码最小长度</label>
|
||
<input type="number" class="form-control-custom" value="8">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">会话超时时间（分钟）</label>
|
||
<input type="number" class="form-control-custom" value="30">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">登录失败锁定次数</label>
|
||
<input type="number" class="form-control-custom" value="5">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">锁定时间（分钟）</label>
|
||
<input type="number" class="form-control-custom" value="15">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom mb-4">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">文件设置</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">单文件最大大小（MB）</label>
|
||
<input type="number" class="form-control-custom" value="100">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">允许上传文件类型</label>
|
||
<input type="text" class="form-control-custom" value="pdf,doc,docx,xls,xlsx,png,jpg">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">备份设置</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">自动备份策略</label>
|
||
<select class="form-select-custom">
|
||
<option>每日自动备份</option>
|
||
<option>每周自动备份</option>
|
||
<option>每月自动备份</option>
|
||
<option>关闭自动备份</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">备份保留天数</label>
|
||
<input type="number" class="form-control-custom" value="30">
|
||
</div>
|
||
<div class="col-md-12">
|
||
<label class="form-label-custom">备份路径</label>
|
||
<input type="text" class="form-control-custom" value="/data/backup">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 d-flex justify-content-end gap-2">
|
||
<button class="btn btn-custom-secondary">重置</button>
|
||
<button class="btn btn-custom-primary">保存设置</button>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
// 切换侧边栏
|
||
function toggleSidebar() {
|
||
const sidebar = document.getElementById('sidebar');
|
||
const mainContent = document.getElementById('mainContent');
|
||
sidebar.classList.toggle('collapsed');
|
||
mainContent.classList.toggle('expanded');
|
||
}
|
||
|
||
// 显示页面
|
||
function showPage(pageId) {
|
||
// 隐藏所有页面
|
||
const pages = document.querySelectorAll('.page-content');
|
||
pages.forEach(page => {
|
||
page.classList.add('d-none');
|
||
});
|
||
|
||
// 显示指定页面
|
||
const targetPage = document.getElementById('page-' + pageId);
|
||
if (targetPage) {
|
||
targetPage.classList.remove('d-none');
|
||
}
|
||
|
||
// 更新导航激活状态
|
||
const navLinks = document.querySelectorAll('.nav-link-custom');
|
||
navLinks.forEach(link => {
|
||
link.classList.remove('active');
|
||
});
|
||
event.target.closest('.nav-link-custom').classList.add('active');
|
||
|
||
// 滚动到顶部
|
||
window.scrollTo(0, 0);
|
||
}
|
||
|
||
// 更新当前时间
|
||
function updateTime() {
|
||
const now = new Date();
|
||
const timeString = now.toLocaleString('zh-CN', {
|
||
year: 'numeric',
|
||
month: '2-digit',
|
||
day: '2-digit',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
second: '2-digit',
|
||
hour12: false
|
||
});
|
||
const timeElement = document.getElementById('currentTime');
|
||
if (timeElement) {
|
||
timeElement.textContent = timeString;
|
||
}
|
||
}
|
||
|
||
// 初始化
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 更新时间
|
||
updateTime();
|
||
setInterval(updateTime, 1000);
|
||
|
||
// 为所有导航链接添加点击事件
|
||
const navLinks = document.querySelectorAll('.nav-link-custom');
|
||
navLinks.forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
});
|
||
});
|
||
});
|
||
|
||
// 响应式处理
|
||
window.addEventListener('resize', function() {
|
||
const sidebar = document.getElementById('sidebar');
|
||
const mainContent = document.getElementById('mainContent');
|
||
|
||
if (window.innerWidth <= 768) {
|
||
sidebar.classList.add('collapsed');
|
||
mainContent.classList.add('expanded');
|
||
} else {
|
||
sidebar.classList.remove('collapsed');
|
||
mainContent.classList.remove('expanded');
|
||
}
|
||
});
|
||
|
||
|
||
</script>
|
||
</body>
|
||
</html> |