2183 lines
88 KiB
HTML
2183 lines
88 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;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.container-custom {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* 卡片样式 */
|
||
.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;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* 页面标题 */
|
||
.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;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
/* 标签页 */
|
||
.nav-tabs-custom {
|
||
border-bottom: 2px solid var(--border-color);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.nav-tabs-custom .nav-link {
|
||
color: var(--text-secondary);
|
||
border: none;
|
||
padding: 1rem 2rem;
|
||
transition: all 0.3s;
|
||
position: relative;
|
||
}
|
||
|
||
.nav-tabs-custom .nav-link:hover {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.nav-tabs-custom .nav-link.active {
|
||
color: var(--accent-cyan);
|
||
background: transparent;
|
||
}
|
||
|
||
.nav-tabs-custom .nav-link.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -2px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
|
||
}
|
||
|
||
/* 按钮样式 */
|
||
.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;
|
||
}
|
||
|
||
/* 表单样式 */
|
||
.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);
|
||
}
|
||
|
||
/* 统计卡片 */
|
||
.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.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-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-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.green { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
|
||
.stat-icon.yellow { background: rgba(234, 179, 8, 0.2); color: #eab308; }
|
||
|
||
.stat-value {
|
||
font-size: 2rem;
|
||
font-weight: bold;
|
||
margin: 0.5rem 0;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.85rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 设备卡片 */
|
||
.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;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
/* 徽章样式 */
|
||
.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); }
|
||
|
||
/* 进度条 */
|
||
.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;
|
||
height: 100%;
|
||
transition: width 0.3s;
|
||
}
|
||
|
||
/* 表格样式 */
|
||
.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;
|
||
}
|
||
|
||
/* 监控面板 */
|
||
.monitor-panel {
|
||
background: rgba(30, 41, 59, 0.5);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
padding: 1.5rem;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 0.85rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.monitor-title {
|
||
color: var(--accent-cyan);
|
||
font-weight: bold;
|
||
margin-bottom: 1rem;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.monitor-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.monitor-label {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.monitor-value {
|
||
color: var(--text-primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 日志面板 */
|
||
.log-panel {
|
||
background: rgba(10, 14, 39, 0.8);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
padding: 1rem;
|
||
max-height: 300px;
|
||
overflow-y: auto;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.log-item {
|
||
margin-bottom: 0.5rem;
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.log-time {
|
||
color: var(--text-secondary);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.log-message {
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.log-success {
|
||
color: #22c55e;
|
||
}
|
||
|
||
.log-error {
|
||
color: #ef4444;
|
||
}
|
||
|
||
/* 预览区域 */
|
||
.preview-area {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
padding: 2rem;
|
||
min-height: 400px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.preview-placeholder {
|
||
text-align: center;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.preview-placeholder i {
|
||
font-size: 4rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--accent-cyan);
|
||
}
|
||
|
||
/* 步骤指示器 */
|
||
.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-circle.completed {
|
||
background: #22c55e;
|
||
color: white;
|
||
}
|
||
|
||
.step-line {
|
||
flex: 1;
|
||
height: 2px;
|
||
margin: 0 0.5rem;
|
||
}
|
||
|
||
.step-line.active {
|
||
background: var(--accent-cyan);
|
||
}
|
||
|
||
.step-line.completed {
|
||
background: #22c55e;
|
||
}
|
||
|
||
.step-line.inactive {
|
||
background: rgba(148, 163, 184, 0.2);
|
||
}
|
||
|
||
.step-label {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
white-space: nowrap;
|
||
font-size: 0.8rem;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 写字路径可视化 */
|
||
.path-canvas {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 8px;
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
::-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;
|
||
}
|
||
|
||
/* 动画 */
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
|
||
.pulse {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container-custom">
|
||
<div class="mb-4">
|
||
<h2 class="page-title">套打输出</h2>
|
||
<p class="page-subtitle">履历本物理输出管理 - 新本打印与原本修订</p>
|
||
</div>
|
||
|
||
<!-- 标签页导航 -->
|
||
<ul class="nav nav-tabs nav-tabs-custom" id="outputTab" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link active" id="new-print-tab" data-bs-toggle="tab" data-bs-target="#new-print" type="button" role="tab">
|
||
<i class="bi bi-printer me-2"></i>新本打印
|
||
</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="revision-write-tab" data-bs-toggle="tab" data-bs-target="#revision-write" type="button" role="tab">
|
||
<i class="bi bi-pen me-2"></i>原本修订
|
||
</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="batch-output-tab" data-bs-toggle="tab" data-bs-target="#batch-output" type="button" role="tab">
|
||
<i class="bi bi-stack me-2"></i>批量输出
|
||
</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="device-manage-tab" data-bs-toggle="tab" data-bs-target="#device-manage" type="button" role="tab">
|
||
<i class="bi bi-gear me-2"></i>设备管理
|
||
</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" type="button" role="tab">
|
||
<i class="bi bi-clock-history me-2"></i>输出历史
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- 标签页内容 -->
|
||
<div class="tab-content" id="outputTabContent">
|
||
|
||
<!-- 新本打印 -->
|
||
<div class="tab-pane fade show active" id="new-print" role="tabpanel">
|
||
<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>
|
||
|
||
<!-- 步骤1：选择产品 -->
|
||
<div id="print-step-1">
|
||
<h6 class="fw-semibold mb-3 text-info">步骤1：选择产品和模板</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<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="col-md-6">
|
||
<label class="form-label-custom">产品型号</label>
|
||
<input type="text" class="form-control-custom" value="XX-2024" readonly>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">交付主机厂</label>
|
||
<input type="text" class="form-control-custom" value="132厂" readonly>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">预印模板</label>
|
||
<select class="form-select-custom">
|
||
<option>132厂封面模板 V2.0</option>
|
||
<option>132厂验收证明模板 V1.5</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="alert alert-info" style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); color: var(--text-primary);">
|
||
<i class="bi bi-info-circle me-2"></i>
|
||
系统已自动匹配模板，共20页需要打印
|
||
</div>
|
||
</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" onclick="nextPrintStep(2)">下一步</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤2：数据填充预览 -->
|
||
<div id="print-step-2" class="d-none">
|
||
<h6 class="fw-semibold mb-3 text-info">步骤2：数据填充预览</h6>
|
||
<div class="preview-area mb-3">
|
||
<div class="preview-placeholder">
|
||
<i class="bi bi-file-earmark-text"></i>
|
||
<p>履历本预览</p>
|
||
<p class="small">数据已填充，印章已加载</p>
|
||
</div>
|
||
</div>
|
||
<div class="row g-3">
|
||
<div class="col-md-4">
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">数据字段</small>
|
||
<h5 class="mb-0 text-success">156/156</h5>
|
||
<small class="text-success">全部填充</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">印章数量</small>
|
||
<h5 class="mb-0 text-success">12/12</h5>
|
||
<small class="text-success">全部填充</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">预计页数</small>
|
||
<h5 class="mb-0 text-info">20页</h5>
|
||
<small class="text-secondary">双面打印</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 d-flex justify-content-between">
|
||
<button class="btn btn-custom-secondary" onclick="nextPrintStep(1)">上一步</button>
|
||
<button class="btn btn-custom-primary" onclick="nextPrintStep(3)">下一步</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤3：打印参数设置 -->
|
||
<div id="print-step-3" class="d-none">
|
||
<h6 class="fw-semibold mb-3 text-info">步骤3：打印参数设置</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">打印设备</label>
|
||
<select class="form-select-custom">
|
||
<option>PRINT-001 (智能套打打印机)</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">纸张类型</label>
|
||
<select class="form-select-custom">
|
||
<option>A4</option>
|
||
<option>A3</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">打印质量</label>
|
||
<select class="form-select-custom">
|
||
<option>高质量 (1200DPI)</option>
|
||
<option>超高质量 (2400DPI)</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">打印方式</label>
|
||
<select class="form-select-custom">
|
||
<option>双面打印（长边翻转）</option>
|
||
<option>单面打印</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">色彩模式</label>
|
||
<select class="form-select-custom">
|
||
<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="1" min="1" max="10">
|
||
</div>
|
||
<div class="col-md-12">
|
||
<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">套打校准参数</span>
|
||
<button class="btn btn-sm btn-custom-secondary">重新校准</button>
|
||
</div>
|
||
<div class="row g-2">
|
||
<div class="col-4">
|
||
<small class="text-secondary d-block">X偏移</small>
|
||
<span class="text-success">-0.3mm</span>
|
||
</div>
|
||
<div class="col-4">
|
||
<small class="text-secondary d-block">Y偏移</small>
|
||
<span class="text-success">+0.1mm</span>
|
||
</div>
|
||
<div class="col-4">
|
||
<small class="text-secondary d-block">旋转角度</small>
|
||
<span class="text-success">-0.05°</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 d-flex justify-content-between">
|
||
<button class="btn btn-custom-secondary" onclick="nextPrintStep(2)">上一步</button>
|
||
<button class="btn btn-custom-primary" onclick="nextPrintStep(4)">下一步</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤4：确认并打印 -->
|
||
<div id="print-step-4" class="d-none">
|
||
<h6 class="fw-semibold mb-3 text-info">步骤4：确认并打印</h6>
|
||
<div class="p-3 mb-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<h6 class="fw-semibold mb-3">打印信息确认</h6>
|
||
<div class="row g-2">
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">产品编号</small>
|
||
<span>XX-2024-001</span>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">打印设备</small>
|
||
<span>PRINT-001</span>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">打印页数</small>
|
||
<span>20页</span>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">打印方式</small>
|
||
<span>双面打印</span>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">预计耗时</small>
|
||
<span>约8分钟</span>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">打印质量</small>
|
||
<span>高质量 (1200DPI)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="alert alert-warning" style="background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.3); color: var(--text-primary);">
|
||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||
请确认已正确放置预印模板到打印机手动送纸槽
|
||
</div>
|
||
<div class="mt-4 d-flex justify-content-between">
|
||
<button class="btn btn-custom-secondary" onclick="nextPrintStep(3)">上一步</button>
|
||
<button class="btn btn-success-custom" onclick="startPrint()">
|
||
<i class="bi bi-printer me-2"></i>开始打印
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：设备状态 -->
|
||
<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="device-card">
|
||
<div>
|
||
<h6 class="fw-semibold mb-1">智能套打打印机</h6>
|
||
<small class="text-secondary">PRINT-001</small>
|
||
</div>
|
||
<span class="badge-custom badge-success">就绪</span>
|
||
</div>
|
||
|
||
<div class="monitor-panel">
|
||
<div class="monitor-title">设备监控</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">设备状态：</span>
|
||
<span class="monitor-value text-success">● 在线</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">纸张余量：</span>
|
||
<span class="monitor-value">85%</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">黑色墨粉：</span>
|
||
<span class="monitor-value">60%</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">彩色墨粉：</span>
|
||
<span class="monitor-value">75%</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">硒鼓寿命：</span>
|
||
<span class="monitor-value">45%</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">打印速度：</span>
|
||
<span class="monitor-value">55页/分钟</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">今日打印：</span>
|
||
<span class="monitor-value">284页</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-custom-secondary w-100 mt-3">
|
||
<i class="bi bi-gear me-2"></i>设备设置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom mt-3">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">打印队列</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="p-3 mb-2" 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-005</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 class="p-3 mb-2" 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">
|
||
<span class="fw-semibold">XX-2024-006</span>
|
||
<span class="badge-custom badge-info">等待中</span>
|
||
</div>
|
||
<small class="text-secondary">18页 · 双面打印</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">
|
||
<span class="fw-semibold">XX-2024-007</span>
|
||
<span class="badge-custom badge-info">等待中</span>
|
||
</div>
|
||
<small class="text-secondary">15页 · 双面打印</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 原本修订 -->
|
||
<div class="tab-pane fade" id="revision-write" role="tabpanel">
|
||
<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>
|
||
|
||
<!-- 步骤1：选择产品和修订数据 -->
|
||
<div id="write-step-1">
|
||
<h6 class="fw-semibold mb-3 text-info">步骤1：选择产品和修订数据</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">产品编号</label>
|
||
<select class="form-select-custom">
|
||
<option>请选择产品编号</option>
|
||
<option>XX-2023-101</option>
|
||
<option>XX-2023-102</option>
|
||
<option>XX-2023-103</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">原本版本</label>
|
||
<input type="text" class="form-control-custom" value="V1.0 (新本)" readonly>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">新版本</label>
|
||
<input type="text" class="form-control-custom" value="V1.1 (副本)" readonly>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">修订日期</label>
|
||
<input type="date" class="form-control-custom" value="2026-03-15">
|
||
</div>
|
||
<div class="col-md-12">
|
||
<div class="alert alert-info" style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); color: var(--text-primary);">
|
||
<i class="bi bi-info-circle me-2"></i>
|
||
系统已完成版本对比，共检测到15项修订内容
|
||
</div>
|
||
</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" onclick="nextWriteStep(2)">下一步</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤2：修订内容确认 -->
|
||
<div id="write-step-2" class="d-none">
|
||
<h6 class="fw-semibold mb-3 text-info">步骤2：修订内容确认</h6>
|
||
<div class="table-responsive mb-3">
|
||
<table class="table table-custom">
|
||
<thead>
|
||
<tr>
|
||
<th>页码</th>
|
||
<th>页面类型</th>
|
||
<th>修订类型</th>
|
||
<th>修订内容</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>封面</td>
|
||
<td><span class="badge-custom badge-warning">修改</span></td>
|
||
<td>修订次数: 0 → 1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>8</td>
|
||
<td>修理记录</td>
|
||
<td><span class="badge-custom badge-success">新增</span></td>
|
||
<td>修理日期: 2026-03-10</td>
|
||
</tr>
|
||
<tr>
|
||
<td>8</td>
|
||
<td>修理记录</td>
|
||
<td><span class="badge-custom badge-success">新增</span></td>
|
||
<td>修理内容: 更换电源模块</td>
|
||
</tr>
|
||
<tr>
|
||
<td>9</td>
|
||
<td>换件记录</td>
|
||
<td><span class="badge-custom badge-success">新增</span></td>
|
||
<td>换件日期: 2026-03-10</td>
|
||
</tr>
|
||
<tr>
|
||
<td>9</td>
|
||
<td>换件记录</td>
|
||
<td><span class="badge-custom badge-success">新增</span></td>
|
||
<td>换件名称: 电源模块</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="row g-3">
|
||
<div class="col-md-4">
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">修订项总数</small>
|
||
<h5 class="mb-0 text-info">15项</h5>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">涉及页面</small>
|
||
<h5 class="mb-0 text-info">5页</h5>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">预计耗时</small>
|
||
<h5 class="mb-0 text-info">23分钟</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 d-flex justify-content-between">
|
||
<button class="btn btn-custom-secondary" onclick="nextWriteStep(1)">上一步</button>
|
||
<button class="btn btn-custom-primary" onclick="nextWriteStep(3)">下一步</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤3：写字参数设置 -->
|
||
<div id="write-step-3" class="d-none">
|
||
<h6 class="fw-semibold mb-3 text-info">步骤3：写字参数设置</h6>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">写字设备</label>
|
||
<select class="form-select-custom">
|
||
<option>WRITE-001 (智能写字机器人)</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">笔型</label>
|
||
<select class="form-select-custom">
|
||
<option>中性笔 0.5mm</option>
|
||
<option>中性笔 0.38mm</option>
|
||
<option>中性笔 0.7mm</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">笔芯颜色</label>
|
||
<select class="form-select-custom">
|
||
<option>黑色</option>
|
||
<option>蓝色</option>
|
||
<option>红色</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">笔压 (N)</label>
|
||
<input type="number" class="form-control-custom" value="1.5" min="1.0" max="2.5" step="0.1">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">写字速度 (mm/s)</label>
|
||
<input type="number" class="form-control-custom" value="50" min="20" max="100">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">移动速度 (mm/s)</label>
|
||
<input type="number" class="form-control-custom" value="100" min="50" max="200">
|
||
</div>
|
||
<div class="col-md-12">
|
||
<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">坐标校准参数</span>
|
||
<button class="btn btn-sm btn-custom-secondary">重新校准</button>
|
||
</div>
|
||
<div class="row g-2">
|
||
<div class="col-4">
|
||
<small class="text-secondary d-block">X精度</small>
|
||
<span class="text-success">±0.09mm</span>
|
||
</div>
|
||
<div class="col-4">
|
||
<small class="text-secondary d-block">Y精度</small>
|
||
<span class="text-success">±0.10mm</span>
|
||
</div>
|
||
<div class="col-4">
|
||
<small class="text-secondary d-block">Z精度</small>
|
||
<span class="text-success">±0.05mm</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-4 d-flex justify-content-between">
|
||
<button class="btn btn-custom-secondary" onclick="nextWriteStep(2)">上一步</button>
|
||
<button class="btn btn-custom-primary" onclick="nextWriteStep(4)">下一步</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤4：确认并开始写字 -->
|
||
<div id="write-step-4" class="d-none">
|
||
<h6 class="fw-semibold mb-3 text-info">步骤4：确认并开始写字</h6>
|
||
<div class="p-3 mb-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<h6 class="fw-semibold mb-3">修订信息确认</h6>
|
||
<div class="row g-2">
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">产品编号</small>
|
||
<span>XX-2023-101</span>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">写字设备</small>
|
||
<span>WRITE-001</span>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">修订项数</small>
|
||
<span>15项</span>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">涉及页面</small>
|
||
<span>5页</span>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">预计耗时</small>
|
||
<span>约23分钟</span>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<small class="text-secondary d-block">笔型</small>
|
||
<span>黑色中性笔 0.5mm</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="alert alert-warning" style="background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.3); color: var(--text-primary);">
|
||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||
请确认已将原履历本正确放置到写字机器人托盘，并打开到第1页
|
||
</div>
|
||
<div class="mt-4 d-flex justify-content-between">
|
||
<button class="btn btn-custom-secondary" onclick="nextWriteStep(3)">上一步</button>
|
||
<button class="btn btn-success-custom" onclick="startWrite()">
|
||
<i class="bi bi-pen me-2"></i>开始写字
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 写字路径可视化 -->
|
||
<div class="card-custom mt-3">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">写字路径预览</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<canvas class="path-canvas" id="pathCanvas"></canvas>
|
||
<div class="mt-3">
|
||
<small class="text-secondary">
|
||
<i class="bi bi-info-circle me-1"></i>
|
||
蓝色线条表示笔头移动路径，红色点表示写字位置
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：设备状态 -->
|
||
<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="device-card">
|
||
<div>
|
||
<h6 class="fw-semibold mb-1">智能写字机器人</h6>
|
||
<small class="text-secondary">WRITE-001</small>
|
||
</div>
|
||
<span class="badge-custom badge-success">就绪</span>
|
||
</div>
|
||
|
||
<div class="monitor-panel">
|
||
<div class="monitor-title">设备监控</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">设备状态：</span>
|
||
<span class="monitor-value text-success">● 在线</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">笔芯状态：</span>
|
||
<span class="monitor-value text-success">● 正常</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">笔芯余量：</span>
|
||
<span class="monitor-value">50%</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">笔压：</span>
|
||
<span class="monitor-value">1.5N</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">定位精度：</span>
|
||
<span class="monitor-value text-success">±0.1mm</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">翻页状态：</span>
|
||
<span class="monitor-value text-success">● 正常</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">今日修订：</span>
|
||
<span class="monitor-value">7份</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button class="btn btn-custom-secondary w-100 mt-3">
|
||
<i class="bi bi-gear me-2"></i>设备设置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom mt-3">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">写字队列</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="p-3 mb-2" 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-2023-105</span>
|
||
<span class="badge-custom badge-primary">写字中</span>
|
||
</div>
|
||
<div class="progress-custom mb-2">
|
||
<div class="progress-bar-custom" style="width: 40%"></div>
|
||
</div>
|
||
<small class="text-secondary">40% 完成 · 已完成 6/15 项修订</small>
|
||
</div>
|
||
|
||
<div class="p-3 mb-2" 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">
|
||
<span class="fw-semibold">XX-2023-106</span>
|
||
<span class="badge-custom badge-info">等待中</span>
|
||
</div>
|
||
<small class="text-secondary">12项修订 · 预计20分钟</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">
|
||
<span class="fw-semibold">XX-2023-107</span>
|
||
<span class="badge-custom badge-info">等待中</span>
|
||
</div>
|
||
<small class="text-secondary">18项修订 · 预计28分钟</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批量输出 -->
|
||
<div class="tab-pane fade" id="batch-output" role="tabpanel">
|
||
<div class="row g-4">
|
||
<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">
|
||
<i class="bi bi-plus-lg me-2"></i>创建批量任务
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="row g-3 mb-4">
|
||
<div class="col-md-6">
|
||
<label class="form-label-custom">输出类型</label>
|
||
<select class="form-select-custom">
|
||
<option>新本打印</option>
|
||
<option>原本修订</option>
|
||
<option>混合输出</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-6"> <label class="form-label-custom">产品范围</label> <select class="form-select-custom"> <option>按产品列表</option> <option>按日期范围</option> <option>按主机厂</option> </select> </div> <div class="col-md-12"> <label class="form-label-custom">选择产品</label> <textarea class="form-control-custom" rows="4" placeholder="请输入产品编号，每行一个 例如： XX-2024-001 XX-2024-002 XX-2024-003"></textarea> </div> </div>
|
||
<div class="table-responsive">
|
||
<table class="table table-custom">
|
||
<thead>
|
||
<tr>
|
||
<th><input type="checkbox" class="form-check-input"></th>
|
||
<th>产品编号</th>
|
||
<th>输出类型</th>
|
||
<th>页数/修订项</th>
|
||
<th>预计耗时</th>
|
||
<th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><input type="checkbox" class="form-check-input" checked></td>
|
||
<td>XX-2024-001</td>
|
||
<td><span class="badge-custom badge-info">新本打印</span></td>
|
||
<td>20页</td>
|
||
<td>8分钟</td>
|
||
<td><span class="badge-custom badge-success">就绪</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="form-check-input" checked></td>
|
||
<td>XX-2024-002</td>
|
||
<td><span class="badge-custom badge-info">新本打印</span></td>
|
||
<td>18页</td>
|
||
<td>7分钟</td>
|
||
<td><span class="badge-custom badge-success">就绪</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="form-check-input" checked></td>
|
||
<td>XX-2023-101</td>
|
||
<td><span class="badge-custom badge-warning">原本修订</span></td>
|
||
<td>15项</td>
|
||
<td>23分钟</td>
|
||
<td><span class="badge-custom badge-success">就绪</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="form-check-input" checked></td>
|
||
<td>XX-2024-003</td>
|
||
<td><span class="badge-custom badge-info">新本打印</span></td>
|
||
<td>22页</td>
|
||
<td>9分钟</td>
|
||
<td><span class="badge-custom badge-success">就绪</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><input type="checkbox" class="form-check-input" checked></td>
|
||
<td>XX-2023-102</td>
|
||
<td><span class="badge-custom badge-warning">原本修订</span></td>
|
||
<td>12项</td>
|
||
<td>20分钟</td>
|
||
<td><span class="badge-custom badge-success">就绪</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="mt-4 d-flex justify-content-between align-items-center">
|
||
<div>
|
||
<span class="text-secondary">已选择 5 项</span>
|
||
<span class="text-secondary ms-3">预计总耗时：67分钟</span>
|
||
</div>
|
||
<button class="btn btn-success-custom" onclick="startBatchOutput()">
|
||
<i class="bi bi-play-fill me-2"></i>开始批量输出
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 批量输出进度 -->
|
||
<div class="card-custom mt-3" id="batchProgress" style="display: none;">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">批量输出进度</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="mb-3">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span class="fw-semibold">总进度</span>
|
||
<span class="text-info">60% (3/5 完成)</span>
|
||
</div>
|
||
<div class="progress-custom" style="height: 12px;">
|
||
<div class="progress-bar-custom" style="width: 60%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-3">
|
||
<div class="col-md-4">
|
||
<div class="p-3" style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">已完成</small>
|
||
<h5 class="mb-0 text-success">3份</h5>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="p-3" style="background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">进行中</small>
|
||
<h5 class="mb-0 text-info">1份</h5>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="p-3" style="background: rgba(148, 163, 184, 0.1); border: 1px solid rgba(148, 163, 184, 0.3); border-radius: 8px;">
|
||
<small class="text-secondary d-block mb-1">待执行</small>
|
||
<h5 class="mb-0 text-secondary">1份</h5>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<h6 class="fw-semibold mb-2">任务详情</h6>
|
||
<div class="p-3 mb-2" style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div>
|
||
<span class="fw-semibold">XX-2024-001</span>
|
||
<small class="text-secondary ms-2">新本打印</small>
|
||
</div>
|
||
<span class="badge-custom badge-success">✓ 完成</span>
|
||
</div>
|
||
<small class="text-secondary">耗时：8分钟</small>
|
||
</div>
|
||
<div class="p-3 mb-2" style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div>
|
||
<span class="fw-semibold">XX-2024-002</span>
|
||
<small class="text-secondary ms-2">新本打印</small>
|
||
</div>
|
||
<span class="badge-custom badge-success">✓ 完成</span>
|
||
</div>
|
||
<small class="text-secondary">耗时：7分钟</small>
|
||
</div>
|
||
<div class="p-3 mb-2" style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<div>
|
||
<span class="fw-semibold">XX-2023-101</span>
|
||
<small class="text-secondary ms-2">原本修订</small>
|
||
</div>
|
||
<span class="badge-custom badge-success">✓ 完成</span>
|
||
</div>
|
||
<small class="text-secondary">耗时：23分钟</small>
|
||
</div>
|
||
<div class="p-3 mb-2" 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">
|
||
<div>
|
||
<span class="fw-semibold">XX-2024-003</span>
|
||
<small class="text-secondary ms-2">新本打印</small>
|
||
</div>
|
||
<span class="badge-custom badge-primary">进行中</span>
|
||
</div>
|
||
<div class="progress-custom mb-2">
|
||
<div class="progress-bar-custom" style="width: 45%"></div>
|
||
</div>
|
||
<small class="text-secondary">45% 完成 · 已打印 10/22 页</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">
|
||
<div>
|
||
<span class="fw-semibold">XX-2023-102</span>
|
||
<small class="text-secondary ms-2">原本修订</small>
|
||
</div>
|
||
<span class="badge-custom badge-info">等待中</span>
|
||
</div>
|
||
<small class="text-secondary">12项修订 · 预计20分钟</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 d-flex justify-content-end gap-2">
|
||
<button class="btn btn-custom-secondary">
|
||
<i class="bi bi-pause-fill me-2"></i>暂停
|
||
</button>
|
||
<button class="btn btn-danger-custom">
|
||
<i class="bi bi-x-lg me-2"></i>取消
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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="row g-3">
|
||
<div class="col-12">
|
||
<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">8个</p>
|
||
</div>
|
||
<div class="stat-icon cyan">
|
||
<i class="bi bi-stack"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<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-12">
|
||
<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">97.4%</p>
|
||
</div>
|
||
<div class="stat-icon blue">
|
||
<i class="bi bi-graph-up"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-custom mt-3">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">最近批量任务</h5>
|
||
</div>
|
||
<div class="card-body-custom">
|
||
<div class="p-3 mb-2" 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">BATCH-20260112-003</span>
|
||
<span class="badge-custom badge-success">完成</span>
|
||
</div>
|
||
<small class="text-secondary d-block">20份 · 新本打印</small>
|
||
<small class="text-secondary">成功率：100%</small>
|
||
</div>
|
||
<div class="p-3 mb-2" 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">BATCH-20260112-002</span>
|
||
<span class="badge-custom badge-success">完成</span>
|
||
</div>
|
||
<small class="text-secondary d-block">15份 · 混合输出</small>
|
||
<small class="text-secondary">成功率：93.3%</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">BATCH-20260112-001</span>
|
||
<span class="badge-custom badge-success">完成</span>
|
||
</div>
|
||
<small class="text-secondary d-block">10份 · 原本修订</small>
|
||
<small class="text-secondary">成功率：100%</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设备管理 -->
|
||
<div class="tab-pane fade" id="device-manage" role="tabpanel">
|
||
<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">
|
||
<i class="bi bi-printer me-2"></i>打印机管理
|
||
</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">PRINT-001 · HP LaserJet M607dn</small>
|
||
</div>
|
||
<span class="badge-custom badge-success">在线</span>
|
||
</div>
|
||
|
||
<div class="monitor-panel mb-3">
|
||
<div class="monitor-title">设备信息</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">购置日期：</span>
|
||
<span class="monitor-value">2025-06-01</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">使用天数：</span>
|
||
<span class="monitor-value">212天</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">累计打印：</span>
|
||
<span class="monitor-value">125,680页</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">故障次数：</span>
|
||
<span class="monitor-value">3次</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">故障率：</span>
|
||
<span class="monitor-value text-success">0.002%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<h6 class="fw-semibold mb-2">耗材状态</h6>
|
||
<div class="mb-2">
|
||
<div class="d-flex justify-content-between mb-1">
|
||
<small class="text-secondary">黑色墨粉</small>
|
||
<small class="text-info">60%</small>
|
||
</div>
|
||
<div class="progress-custom">
|
||
<div class="progress-bar-custom" style="width: 60%"></div>
|
||
</div>
|
||
<small class="text-secondary">剩余约6,000页</small>
|
||
</div>
|
||
<div class="mb-2">
|
||
<div class="d-flex justify-content-between mb-1">
|
||
<small class="text-secondary">彩色墨粉</small>
|
||
<small class="text-success">75%</small>
|
||
</div>
|
||
<div class="progress-custom">
|
||
<div class="progress-bar-custom" style="width: 75%"></div>
|
||
</div>
|
||
<small class="text-secondary">剩余约7,500页</small>
|
||
</div>
|
||
<div class="mb-2">
|
||
<div class="d-flex justify-content-between mb-1">
|
||
<small class="text-secondary">硒鼓寿命</small>
|
||
<small class="text-warning">45%</small>
|
||
</div>
|
||
<div class="progress-custom">
|
||
<div class="progress-bar-custom" style="width: 45%"></div>
|
||
</div>
|
||
<small class="text-secondary">剩余约45,000页</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<h6 class="fw-semibold mb-2">维护记录</h6>
|
||
<div class="p-3 mb-2" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between mb-1">
|
||
<span class="fw-semibold">定期维护</span>
|
||
<small class="text-secondary">2025-12-15</small>
|
||
</div>
|
||
<small class="text-secondary">清洁、校准、更换零件</small>
|
||
</div>
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between mb-1">
|
||
<span class="fw-semibold">下次维护</span>
|
||
<small class="text-warning">2026-03-15</small>
|
||
</div>
|
||
<small class="text-secondary">定期维护（3个月周期）</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-custom-primary flex-grow-1">
|
||
<i class="bi bi-tools me-2"></i>执行校准
|
||
</button>
|
||
<button class="btn btn-custom-secondary flex-grow-1">
|
||
<i class="bi bi-gear me-2"></i>设备设置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="card-custom">
|
||
<div class="card-header-custom">
|
||
<h5 class="mb-0 fw-bold">
|
||
<i class="bi bi-pen me-2"></i>写字机器人管理
|
||
</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">WRITE-001 · AutoWriter Pro X1</small>
|
||
</div>
|
||
<span class="badge-custom badge-success">在线</span>
|
||
</div>
|
||
|
||
<div class="monitor-panel mb-3">
|
||
<div class="monitor-title">设备信息</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">购置日期：</span>
|
||
<span class="monitor-value">2025-07-01</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">使用天数：</span>
|
||
<span class="monitor-value">184天</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">累计修订：</span>
|
||
<span class="monitor-value">2,156份</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">故障次数：</span>
|
||
<span class="monitor-value">15次</span>
|
||
</div>
|
||
<div class="monitor-item">
|
||
<span class="monitor-label">翻页成功率：</span>
|
||
<span class="monitor-value text-success">96.8%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<h6 class="fw-semibold mb-2">运动系统状态</h6>
|
||
<div class="row g-2">
|
||
<div class="col-6">
|
||
<div class="p-2" style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 6px;">
|
||
<small class="text-secondary d-block">X轴</small>
|
||
<span class="text-success">● 正常</span>
|
||
<small class="text-secondary d-block">±0.10mm</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="p-2" style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 6px;">
|
||
<small class="text-secondary d-block">Y轴</small>
|
||
<span class="text-success">● 正常</span>
|
||
<small class="text-secondary d-block">±0.11mm</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="p-2" style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 6px;">
|
||
<small class="text-secondary d-block">Z轴</small>
|
||
<span class="text-success">● 正常</span>
|
||
<small class="text-secondary d-block">±0.05mm</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="p-2" style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 6px;">
|
||
<small class="text-secondary d-block">翻页机构</small>
|
||
<span class="text-success">● 正常</span>
|
||
<small class="text-secondary d-block">96.8%</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<h6 class="fw-semibold mb-2">耗材状态</h6>
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between mb-2">
|
||
<span>当前笔芯</span>
|
||
<span class="text-info">黑色中性笔 0.5mm</span>
|
||
</div>
|
||
<div class="d-flex justify-content-between mb-1">
|
||
<small class="text-secondary">笔芯余量</small>
|
||
<small class="text-warning">50%</small>
|
||
</div>
|
||
<div class="progress-custom mb-2">
|
||
<div class="progress-bar-custom" style="width: 50%"></div>
|
||
</div>
|
||
<small class="text-secondary">累计更换：96次</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-3">
|
||
<h6 class="fw-semibold mb-2">维护记录</h6>
|
||
<div class="p-3 mb-2" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between mb-1">
|
||
<span class="fw-semibold">定期维护</span>
|
||
<small class="text-secondary">2025-12-15</small>
|
||
</div>
|
||
<small class="text-secondary">清洁、润滑、更换零件</small>
|
||
</div>
|
||
<div class="p-3" style="background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<div class="d-flex justify-content-between mb-1">
|
||
<span class="fw-semibold">下次维护</span>
|
||
<small class="text-warning">2026-02-15</small>
|
||
</div>
|
||
<small class="text-secondary">定期维护（2个月周期）</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="d-flex gap-2">
|
||
<button class="btn btn-custom-primary flex-grow-1">
|
||
<i class="bi bi-tools me-2"></i>执行校准
|
||
</button>
|
||
<button class="btn btn-custom-secondary flex-grow-1">
|
||
<i class="bi bi-gear me-2"></i>设备设置
|
||
</button>
|
||
</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="row g-4">
|
||
<div class="col-md-6">
|
||
<h6 class="fw-semibold mb-3">打印机性能趋势</h6>
|
||
<div class="d-flex align-items-center justify-content-center" style="height: 200px; 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-2">性能趋势图表</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<h6 class="fw-semibold mb-3">写字机器人性能趋势</h6>
|
||
<div class="d-flex align-items-center justify-content-center" style="height: 200px; background: rgba(30, 41, 59, 0.5); border-radius: 8px;">
|
||
<div class="text-center">
|
||
<i class="bi bi-graph-up" style="font-size: 3rem; color: var(--accent-cyan);"></i>
|
||
<p class="text-secondary mt-2">性能趋势图表</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 输出历史 -->
|
||
<div class="tab-pane fade" id="history" role="tabpanel">
|
||
<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-3">
|
||
<label class="form-label-custom">产品编号</label>
|
||
<input type="text" class="form-control-custom" placeholder="请输入产品编号">
|
||
</div>
|
||
<div class="col-md-3">
|
||
<label class="form-label-custom">输出类型</label>
|
||
<select class="form-select-custom">
|
||
<option>全部</option>
|
||
<option>新本打印</option>
|
||
<option>原本修订</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<label class="form-label-custom">开始日期</label>
|
||
<input type="date" class="form-control-custom">
|
||
</div>
|
||
<div class="col-md-3">
|
||
<label class="form-label-custom">结束日期</label>
|
||
<input type="date" class="form-control-custom">
|
||
</div>
|
||
<div class="col-md-12 d-flex gap-2">
|
||
<button class="btn btn-custom-primary">
|
||
<i class="bi bi-search me-2"></i>查询
|
||
</button>
|
||
<button class="btn btn-custom-secondary">
|
||
<i class="bi bi-arrow-clockwise me-2"></i>重置
|
||
</button>
|
||
<button class="btn btn-custom-secondary ms-auto">
|
||
<i class="bi bi-download me-2"></i>导出报表
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</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">678份</p>
|
||
</div>
|
||
<div class="stat-icon cyan">
|
||
<i class="bi bi-file-text"></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">486份</p>
|
||
</div>
|
||
<div class="stat-icon blue">
|
||
<i class="bi bi-printer"></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">192份</p>
|
||
</div>
|
||
<div class="stat-icon yellow">
|
||
<i class="bi bi-pen"></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">97.8%</p>
|
||
</div>
|
||
<div class="stat-icon green">
|
||
<i class="bi bi-check-circle"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
<th>状态</th>
|
||
<th>质检结果</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>XX-2024-010</td>
|
||
<td><span class="badge-custom badge-info">新本打印</span></td>
|
||
<td>2026-01-12 14:30:00</td>
|
||
<td>8分钟</td>
|
||
<td>PRINT-001</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">查看详情</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2023-105</td>
|
||
<td><span class="badge-custom badge-warning">原本修订</span></td>
|
||
<td>2026-01-12 13:20:00</td>
|
||
<td>23分钟</td>
|
||
<td>WRITE-001</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">查看详情</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2024-009</td>
|
||
<td><span class="badge-custom badge-info">新本打印</span></td>
|
||
<td>2026-01-12 12:10:00</td>
|
||
<td>9分钟</td>
|
||
<td>PRINT-001</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">查看详情</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2024-008</td>
|
||
<td><span class="badge-custom badge-info">新本打印</span></td>
|
||
<td>2026-01-12 11:00:00</td>
|
||
<td>失败</td>
|
||
<td>PRINT-001</td>
|
||
<td>张三</td>
|
||
<td><span class="badge-custom badge-danger">失败</span></td>
|
||
<td>-</td>
|
||
<td>
|
||
<a href="#" class="text-danger text-decoration-none">重新打印</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>XX-2023-104</td>
|
||
<td><span class="badge-custom badge-warning">原本修订</span></td>
|
||
<td>2026-01-12 10:30:00</td>
|
||
<td>20分钟</td>
|
||
<td>WRITE-001</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">查看详情</a>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<nav class="mt-3">
|
||
<ul class="pagination justify-content-center">
|
||
<li class="page-item disabled">
|
||
<a class="page-link" href="#" style="background: rgba(30, 41, 59, 0.5); border-color: var(--border-color); color: var(--text-secondary);">上一页</a>
|
||
</li>
|
||
<li class="page-item active">
|
||
<a class="page-link" href="#" style="background: var(--accent-cyan); border-color: var(--accent-cyan);">1</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#" style="background: rgba(30, 41, 59, 0.5); border-color: var(--border-color); color: var(--text-primary);">2</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#" style="background: rgba(30, 41, 59, 0.5); border-color: var(--border-color); color: var(--text-primary);">3</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#" style="background: rgba(30, 41, 59, 0.5); border-color: var(--border-color); color: var(--text-primary);">下一页</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
// 新本打印步骤切换
|
||
function nextPrintStep(step) {
|
||
// 隐藏所有步骤
|
||
for (let i = 1; i <= 4; i++) {
|
||
document.getElementById('print-step-' + i).classList.add('d-none');
|
||
}
|
||
// 显示当前步骤
|
||
document.getElementById('print-step-' + step).classList.remove('d-none');
|
||
|
||
// 更新步骤指示器
|
||
updateStepIndicator('print', step);
|
||
}
|
||
|
||
// 原本修订步骤切换
|
||
function nextWriteStep(step) {
|
||
// 隐藏所有步骤
|
||
for (let i = 1; i <= 4; i++) {
|
||
document.getElementById('write-step-' + i).classList.add('d-none');
|
||
}
|
||
// 显示当前步骤
|
||
document.getElementById('write-step-' + step).classList.remove('d-none');
|
||
|
||
// 更新步骤指示器
|
||
updateStepIndicator('write', step);
|
||
}
|
||
|
||
// 更新步骤指示器
|
||
function updateStepIndicator(type, currentStep) {
|
||
const container = type === 'print' ?
|
||
document.querySelector('#print-step-1').closest('.card-body-custom') :
|
||
document.querySelector('#write-step-1').closest('.card-body-custom');
|
||
|
||
const circles = container.querySelectorAll('.step-circle');
|
||
const lines = container.querySelectorAll('.step-line');
|
||
|
||
circles.forEach((circle, index) => {
|
||
const stepNum = index + 1;
|
||
circle.classList.remove('active', 'inactive', 'completed');
|
||
|
||
if (stepNum < currentStep) {
|
||
circle.classList.add('completed');
|
||
} else if (stepNum === currentStep) {
|
||
circle.classList.add('active');
|
||
} else {
|
||
circle.classList.add('inactive');
|
||
}
|
||
});
|
||
|
||
lines.forEach((line, index) => {
|
||
const stepNum = index + 1;
|
||
line.classList.remove('active', 'inactive', 'completed');
|
||
|
||
if (stepNum < currentStep) {
|
||
line.classList.add('completed');
|
||
} else if (stepNum === currentStep) {
|
||
line.classList.add('active');
|
||
} else {
|
||
line.classList.add('inactive');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 开始打印
|
||
function startPrint() {
|
||
alert('打印任务已提交！\n\n产品编号：XX-2024-001\n打印设备：PRINT-001\n预计耗时：8分钟\n\n请在打印机手动送纸槽放入预印模板');
|
||
}
|
||
|
||
// 开始写字
|
||
function startWrite() {
|
||
alert('写字任务已提交！\n\n产品编号：XX-2023-101\n写字设备：WRITE-001\n修订项数：15项\n预计耗时：23分钟\n\n请确认原履历本已正确放置');
|
||
}
|
||
|
||
// 开始批量输出
|
||
function startBatchOutput() {
|
||
document.getElementById('batchProgress').style.display = 'block';
|
||
alert('批量输出任务已启动！\n\n总数：5份\n新本打印：3份\n原本修订：2份\n预计总耗时：67分钟');
|
||
}
|
||
|
||
// 绘制写字路径示例
|
||
function drawPathCanvas() {
|
||
const canvas = document.getElementById('pathCanvas');
|
||
if (!canvas) return;
|
||
|
||
const ctx = canvas.getContext('2d');
|
||
canvas.width = canvas.offsetWidth;
|
||
canvas.height = canvas.offsetHeight;
|
||
|
||
// 清空画布
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
||
// 绘制背景网格
|
||
ctx.strokeStyle = 'rgba(148, 163, 184, 0.1)';
|
||
ctx.lineWidth = 1;
|
||
for (let i = 0; i < canvas.width; i += 20) {
|
||
ctx.beginPath();
|
||
ctx.moveTo(i, 0);
|
||
ctx.lineTo(i, canvas.height);
|
||
ctx.stroke();
|
||
}
|
||
for (let i = 0; i < canvas.height; i += 20) {
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, i);
|
||
ctx.lineTo(canvas.width, i);
|
||
ctx.stroke();
|
||
}
|
||
|
||
// 绘制移动路径（蓝色）
|
||
ctx.strokeStyle = '#3b82f6';
|
||
ctx.lineWidth = 2;
|
||
ctx.setLineDash([5, 5]);
|
||
ctx.beginPath();
|
||
ctx.moveTo(50, 50);
|
||
ctx.lineTo(150, 50);
|
||
ctx.lineTo(150, 100);
|
||
ctx.lineTo(250, 100);
|
||
ctx.lineTo(250, 150);
|
||
ctx.stroke();
|
||
|
||
// 绘制写字位置（红色点）
|
||
ctx.fillStyle = '#ef4444';
|
||
ctx.setLineDash([]);
|
||
const points = [
|
||
[150, 50],
|
||
[150, 100],
|
||
[250, 100],
|
||
[250, 150]
|
||
];
|
||
points.forEach(point => {
|
||
ctx.beginPath();
|
||
ctx.arc(point[0], point[1], 5, 0, 2 * Math.PI);
|
||
ctx.fill();
|
||
});
|
||
|
||
// 添加标注
|
||
ctx.fillStyle = '#06b6d4';
|
||
ctx.font = '12px Arial';
|
||
ctx.fillText('起点', 30, 45);
|
||
ctx.fillText('写字点1', 155, 45);
|
||
ctx.fillText('写字点2', 155, 95);
|
||
ctx.fillText('写字点3', 255, 95);
|
||
ctx.fillText('写字点4', 255, 145);
|
||
}
|
||
|
||
// 页面加载完成后执行
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 绘制写字路径
|
||
drawPathCanvas();
|
||
|
||
// 监听标签页切换，重新绘制canvas
|
||
document.getElementById('revision-write-tab').addEventListener('shown.bs.tab', function() {
|
||
setTimeout(drawPathCanvas, 100);
|
||
});
|
||
});
|
||
</script>
|
||
</body> </html> |