refactor: 修复知识库和操作指引
This commit is contained in:
84
public/guides/how-to-use-beam/step-1.html
Normal file
84
public/guides/how-to-use-beam/step-1.html
Normal file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 1 - 打开光子光闸 PS1</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.annotation-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation-box { stroke-width: 3; fill: none; }
|
||||
.annotation-label { font-weight: bold; font-size: 16px; }
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 1: 打开光子光闸 PS1</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/ps1-panel.jpg" alt="PS1 控制面板" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
|
||||
<svg class="annotation-layer">
|
||||
<rect class="annotation-box" x="20%" y="15%" width="30%" height="25%" stroke="#f59e0b" />
|
||||
<text class="annotation-label" x="21%" y="12%" fill="#f59e0b">PS1 开关位置</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>首先需要打开光子光闸 PS1。请问安全光闸 SS1 是否能打开？如果 SS1 无法打开，需要先检查人员安全系统（PSS）状态。</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
92
public/guides/how-to-use-beam/step-2.html
Normal file
92
public/guides/how-to-use-beam/step-2.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 2 - 搜索光学棚屋</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.annotation-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation-box { stroke-width: 3; fill: none; }
|
||||
.annotation-label { font-weight: bold; font-size: 16px; }
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
.step-content ul { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 2: 搜索光学棚屋</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/optics-hutch-layout.jpg" alt="光学棚屋布局图" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
|
||||
<svg class="annotation-layer">
|
||||
<rect class="annotation-box" x="8%" y="20%" width="25%" height="20%" stroke="#3b82f6" />
|
||||
<text class="annotation-label" x="9%" y="17%" fill="#3b82f6">前门12</text>
|
||||
<rect class="annotation-box" x="60%" y="20%" width="25%" height="20%" stroke="#10b981" />
|
||||
<text class="annotation-label" x="61%" y="17%" fill="#10b981">后门</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>光学棚屋设置了 2 种搜索顺序，请选择您要使用的搜索路径：</p>
|
||||
<ul>
|
||||
<li><strong>前门12</strong>：从前门进入，适合常规实验</li>
|
||||
<li><strong>后门</strong>：从后门进入，适合特殊设备维护</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
72
public/guides/how-to-use-beam/step-3a.html
Normal file
72
public/guides/how-to-use-beam/step-3a.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 3 - 前门12路径 - 检查设备状态</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
.step-content ol { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 3: 前门12路径 - 检查设备状态</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/frontend-equipment.jpg" alt="前端设备" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>从前门12进入后，请检查以下设备状态：</p>
|
||||
<ol>
|
||||
<li>白光挡板是否正常</li>
|
||||
<li>单色器冷却水流量</li>
|
||||
<li>光束位置监测器读数</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
91
public/guides/how-to-use-beam/step-3b.html
Normal file
91
public/guides/how-to-use-beam/step-3b.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 3 - 后门路径 - 安全确认</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
.step-content ol { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
|
||||
.warning-box {
|
||||
background: #fef3c7;
|
||||
border-left: 4px solid #f59e0b;
|
||||
padding: 12px;
|
||||
margin: 16px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.warning-box strong {
|
||||
color: #d97706;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 3: 后门路径 - 安全确认</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/backdoor-safety.jpg" alt="后门安全区域" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>从后门进入需要额外的安全确认：</p>
|
||||
<ol>
|
||||
<li>确认后门区域无人员</li>
|
||||
<li>检查后门联锁状态</li>
|
||||
<li>通知控制室操作人员</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="warning-box">
|
||||
<strong>⚠️ 注意</strong>
|
||||
后门路径需要额外安全授权，请确保已通知控制室后再进入。
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
65
public/guides/how-to-use-beam/step-4a.html
Normal file
65
public/guides/how-to-use-beam/step-4a.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 4 - 前门12路径 - 打开实验站光闸</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 4: 前门12路径 - 打开实验站光闸</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/ss2-panel.jpg" alt="SS2 控制面板" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>确认所有设备状态正常后，打开实验站光闸 SS2。观察光束强度是否达到预期值。</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
72
public/guides/how-to-use-beam/step-4b.html
Normal file
72
public/guides/how-to-use-beam/step-4b.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 4 - 后门路径 - 设备检查</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
.step-content ol { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 4: 后门路径 - 设备检查</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/backdoor-equipment.jpg" alt="后门区域设备" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>检查后门区域的关键设备：</p>
|
||||
<ol>
|
||||
<li>聚焦镜冷却系统</li>
|
||||
<li>狭缝位置</li>
|
||||
<li>光束诊断设备</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
94
public/guides/how-to-use-beam/step-5.html
Normal file
94
public/guides/how-to-use-beam/step-5.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 5 - 完成</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.success-box {
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-left: 4px solid #22c55e;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.success-box .check {
|
||||
font-size: 20px;
|
||||
color: #16a34a;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.step-content ul { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
|
||||
.param-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.param-table td {
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.param-table td:first-child {
|
||||
font-weight: bold;
|
||||
color: #0f172a;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.param-table td:last-child {
|
||||
color: #475569;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 5: 完成</div>
|
||||
|
||||
<div class="success-box">
|
||||
<div class="check">✓ 光束已成功送达实验站！</div>
|
||||
<div class="step-content">
|
||||
<p>当前光束参数：</p>
|
||||
<table class="param-table">
|
||||
<tr><td>能量</td><td>12.66 keV</td></tr>
|
||||
<tr><td>通量</td><td>1.2×10¹² ph/s</td></tr>
|
||||
<tr><td>光斑尺寸</td><td>0.15×0.08 mm²</td></tr>
|
||||
</table>
|
||||
<p style="margin-top: 16px;">您现在可以开始实验了。</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
98
public/guides/vacuum-valve-issue/step-1.html
Normal file
98
public/guides/vacuum-valve-issue/step-1.html
Normal file
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 1 - 检查真空度</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.annotation-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation-box { stroke-width: 3; fill: none; }
|
||||
.annotation-label { font-weight: bold; font-size: 16px; }
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
.step-content ul { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
.step-content code {
|
||||
background: #f1f5f9;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #0f172a;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 1: 检查真空度</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/vacuum-gauge.jpg" alt="真空计读数面板" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
|
||||
<svg class="annotation-layer">
|
||||
<rect class="annotation-box" x="15%" y="22%" width="25%" height="20%" stroke="#3b82f6" />
|
||||
<text class="annotation-label" x="16%" y="19%" fill="#3b82f6">上游真空计</text>
|
||||
<rect class="annotation-box" x="58%" y="22%" width="25%" height="20%" stroke="#10b981" />
|
||||
<text class="annotation-label" x="59%" y="19%" fill="#10b981">下游真空计</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>真空阀门无法打开通常是因为真空度不满足联锁条件。</p>
|
||||
<p>请检查阀门两侧的真空度读数：</p>
|
||||
<ul>
|
||||
<li>上游真空度应 < <code>1×10⁻⁷ mbar</code></li>
|
||||
<li>下游真空度应 < <code>1×10⁻⁶ mbar</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
89
public/guides/vacuum-valve-issue/step-2.html
Normal file
89
public/guides/vacuum-valve-issue/step-2.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 2 - 检查联锁状态</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.annotation-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation-box { stroke-width: 3; fill: none; }
|
||||
.annotation-label { font-weight: bold; font-size: 16px; }
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
.step-content ol { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 2: 检查联锁状态</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/valve-control-panel.jpg" alt="阀门控制面板" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
|
||||
<svg class="annotation-layer">
|
||||
<rect class="annotation-box" x="30%" y="18%" width="35%" height="30%" stroke="#f59e0b" />
|
||||
<text class="annotation-label" x="31%" y="15%" fill="#f59e0b">联锁指示区</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>如果真空度满足要求但阀门仍无法打开，检查联锁系统：</p>
|
||||
<ol>
|
||||
<li>查看阀门控制面板的联锁指示灯</li>
|
||||
<li>确认相关设备（离子泵、分子泵）运行正常</li>
|
||||
<li>检查 EPS 系统是否有相关报警</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
108
public/guides/vacuum-valve-issue/step-3.html
Normal file
108
public/guides/vacuum-valve-issue/step-3.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 3 - 尝试手动复位</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.annotation-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation-box { stroke-width: 3; fill: none; }
|
||||
.annotation-label { font-weight: bold; font-size: 16px; }
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
.step-content ol { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
|
||||
.warning-box {
|
||||
background: #fef2f2;
|
||||
border-left: 4px solid #ef4444;
|
||||
padding: 12px;
|
||||
margin: 16px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.warning-box strong {
|
||||
color: #dc2626;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 3: 尝试手动复位</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/valve-reset.jpg" alt="阀门复位操作" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
|
||||
<svg class="annotation-layer">
|
||||
<rect class="annotation-box" x="40%" y="40%" width="18%" height="12%" stroke="#ef4444" />
|
||||
<text class="annotation-label" x="41%" y="37%" fill="#ef4444">复位按钮</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>如果联锁状态异常，尝试手动复位：</p>
|
||||
<ol>
|
||||
<li>按下阀门控制面板上的"复位"按钮</li>
|
||||
<li>等待 5 秒</li>
|
||||
<li>再次尝试打开阀门</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="warning-box">
|
||||
<strong>⚠️ 重要提醒</strong>
|
||||
复位前必须确认真空度满足要求！在真空度不达标时强行复位可能导致设备损坏。
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
96
public/guides/vacuum-valve-issue/step-4.html
Normal file
96
public/guides/vacuum-valve-issue/step-4.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 4 - 检查气动系统</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.annotation-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation-box { stroke-width: 3; fill: none; }
|
||||
.annotation-label { font-weight: bold; font-size: 16px; }
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
.step-content ol { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
.step-content code {
|
||||
background: #f1f5f9;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #0f172a;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 4: 检查气动系统</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/pneumatic-system.jpg" alt="气动系统" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
|
||||
<svg class="annotation-layer">
|
||||
<rect class="annotation-box" x="22%" y="28%" width="30%" height="24%" stroke="#06b6d4" />
|
||||
<text class="annotation-label" x="23%" y="25%" fill="#06b6d4">气动控制单元</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>如果复位后仍无法打开，检查气动系统：</p>
|
||||
<ol>
|
||||
<li>确认压缩空气供应正常（压力 > <code>5 bar</code>）</li>
|
||||
<li>检查气动管路是否有泄漏</li>
|
||||
<li>查看电磁阀是否工作（应有"咔哒"声）</li>
|
||||
</ol>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
123
public/guides/vacuum-valve-issue/step-5.html
Normal file
123
public/guides/vacuum-valve-issue/step-5.html
Normal file
@@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 5 - 联系维护人员</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
|
||||
.contact-card {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.contact-card h4 {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #0c4a6e;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #e0f2fe;
|
||||
font-size: 14px;
|
||||
color: #0369a1;
|
||||
}
|
||||
|
||||
.contact-item:last-child { border-bottom: none; }
|
||||
|
||||
.contact-item strong {
|
||||
min-width: 140px;
|
||||
color: #0c4a6e;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #fefce8;
|
||||
border: 1px solid #fde68a;
|
||||
border-left: 4px solid #f59e0b;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.info-box h4 {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #92400e;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.info-box ul {
|
||||
margin-left: 24px;
|
||||
color: #a16207;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-box li { margin-bottom: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 5: 联系维护人员</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>如果以上步骤都无法解决问题，可能是阀门机械故障或控制系统故障。请联系维护人员。</p>
|
||||
</div>
|
||||
|
||||
<div class="contact-card">
|
||||
<h4>维护人员联系方式</h4>
|
||||
<div class="contact-item">
|
||||
<strong>真空系统负责人</strong>
|
||||
<span>内线 1234</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<strong>控制系统负责人</strong>
|
||||
<span>内线 5678</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<h4>请记录以下信息以便维护人员排查：</h4>
|
||||
<ul>
|
||||
<li>故障时间</li>
|
||||
<li>真空度读数</li>
|
||||
<li>已执行的操作步骤</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
115
public/guides/water-leak-alarm/step-1.html
Normal file
115
public/guides/water-leak-alarm/step-1.html
Normal file
@@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 1 - 确认报警位置</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.annotation-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation-box { stroke-width: 3; fill: none; }
|
||||
.annotation-label { font-weight: bold; font-size: 16px; }
|
||||
.annotation-arrow { stroke-width: 3; fill: none; }
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
|
||||
.warning-box {
|
||||
background: #fef2f2;
|
||||
border-left: 4px solid #ef4444;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.warning-box strong {
|
||||
color: #dc2626;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.warning-box p {
|
||||
color: #991b1b;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="warning-box">
|
||||
<strong>⚠️ 紧急处理流程</strong>
|
||||
<p>水泄漏报警触发后应立即按照以下步骤处理，防止设备损坏。如遇大面积漏水，请先关闭主水阀并通知值班负责人。</p>
|
||||
</div>
|
||||
|
||||
<div class="step-title">步骤 1: 确认报警位置</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/eps-cabinet.jpg" alt="EPS 机柜" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
|
||||
<svg class="annotation-layer">
|
||||
<defs>
|
||||
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
|
||||
<polygon points="0 0, 10 3, 0 6" fill="#ef4444" />
|
||||
</marker>
|
||||
</defs>
|
||||
<rect class="annotation-box" x="30%" y="30%" width="35%" height="20%" stroke="#ef4444" />
|
||||
<text class="annotation-label" x="31%" y="27%" fill="#ef4444">水泄漏检测模块</text>
|
||||
<line class="annotation-arrow" x1="48%" y1="50%" x2="48%" y2="60%" stroke="#ef4444" marker-end="url(#arrowhead)" />
|
||||
<text class="annotation-label" x="50%" y="65%" fill="#ef4444">查看编号</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>水泄漏报警已触发。首先需要确认漏水点的具体位置。</p>
|
||||
<p>请查看设备保护系统（EPS）机柜上的水泄漏检测模块，记录显示的数字编号。</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
94
public/guides/water-leak-alarm/step-2.html
Normal file
94
public/guides/water-leak-alarm/step-2.html
Normal file
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 2 - 搜索光学棚屋</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.annotation-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation-box { stroke-width: 3; fill: none; }
|
||||
.annotation-label { font-weight: bold; font-size: 14px; }
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
.step-content ul { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 2: 搜索光学棚屋</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/optics-hutch-layout.jpg" alt="光学棚屋布局图" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
|
||||
<svg class="annotation-layer">
|
||||
<rect class="annotation-box" x="15%" y="20%" width="20%" height="16%" stroke="#c4b5fd" />
|
||||
<text class="annotation-label" x="16%" y="17%" fill="#7c3aed">1-10</text>
|
||||
<rect class="annotation-box" x="42%" y="20%" width="20%" height="16%" stroke="#93c5fd" />
|
||||
<text class="annotation-label" x="43%" y="17%" fill="#2563eb">11-20</text>
|
||||
<rect class="annotation-box" x="68%" y="20%" width="20%" height="16%" stroke="#6ee7b7" />
|
||||
<text class="annotation-label" x="69%" y="17%" fill="#059669">21-30</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>根据检测模块显示的编号，进入光学棚屋找到对应的水泄漏检测线缆。</p>
|
||||
<p>线缆编号对应位置：</p>
|
||||
<ul>
|
||||
<li><strong>1-10</strong>：单色器区域</li>
|
||||
<li><strong>11-20</strong>：聚焦镜区域</li>
|
||||
<li><strong>21-30</strong>：实验站区域</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
109
public/guides/water-leak-alarm/step-3.html
Normal file
109
public/guides/water-leak-alarm/step-3.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 3 - 定位并处理漏水点</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.annotation-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation-box { stroke-width: 3; fill: none; }
|
||||
.annotation-label { font-weight: bold; font-size: 16px; }
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
.step-content ol { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
|
||||
.warning-box {
|
||||
background: #fef3c7;
|
||||
border-left: 4px solid #f59e0b;
|
||||
padding: 12px;
|
||||
margin: 16px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.warning-box strong {
|
||||
color: #d97706;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 3: 定位并处理漏水点</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/leak-detection-cable.jpg" alt="漏水检测线缆" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
|
||||
<svg class="annotation-layer">
|
||||
<rect class="annotation-box" x="25%" y="40%" width="50%" height="30%" stroke="#f59e0b" />
|
||||
<text class="annotation-label" x="26%" y="37%" fill="#f59e0b">检查此区域</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>找到对应编号的线缆后，沿线缆检查漏水点：</p>
|
||||
<ol>
|
||||
<li>查看线缆周围是否有水渍</li>
|
||||
<li>检查附近的冷却水管接头</li>
|
||||
<li>用干布擦干水渍</li>
|
||||
<li>如果是管道漏水，需要关闭该区域冷却水阀门并通知维护人员</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="warning-box">
|
||||
<strong>⚠️ 注意</strong>
|
||||
如果是管道漏水，应立即关闭该区域冷却水阀门，并联系维护人员处理。
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
108
public/guides/water-leak-alarm/step-4.html
Normal file
108
public/guides/water-leak-alarm/step-4.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 4 - 复位报警</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.step-image-container {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.step-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.annotation-layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.annotation-box { stroke-width: 3; fill: none; }
|
||||
.annotation-label { font-weight: bold; font-size: 16px; }
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.step-content p { margin-bottom: 12px; }
|
||||
.step-content ol { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
|
||||
.warning-box {
|
||||
background: #fef3c7;
|
||||
border-left: 4px solid #f59e0b;
|
||||
padding: 12px;
|
||||
margin: 16px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.warning-box strong {
|
||||
color: #d97706;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 4: 复位报警</div>
|
||||
|
||||
<div class="step-image-container">
|
||||
<img src="images/eps-reset.jpg" alt="EPS 复位面板" class="step-image"
|
||||
onerror="this.style.display='none'">
|
||||
|
||||
<svg class="annotation-layer">
|
||||
<rect class="annotation-box" x="40%" y="35%" width="18%" height="12%" stroke="#10b981" />
|
||||
<text class="annotation-label" x="41%" y="32%" fill="#10b981">复位按钮</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="step-content">
|
||||
<p>处理完漏水点后，返回 EPS 机柜：</p>
|
||||
<ol>
|
||||
<li>确认水泄漏检测模块指示灯已熄灭</li>
|
||||
<li>按下"复位"按钮</li>
|
||||
<li>观察系统是否恢复正常</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="warning-box">
|
||||
<strong>⚠️ 注意</strong>
|
||||
如果报警持续，说明漏水未完全处理，需要重新检查。
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
71
public/guides/water-leak-alarm/step-5.html
Normal file
71
public/guides/water-leak-alarm/step-5.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>步骤 5 - 完成</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
padding: 24px;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.success-box {
|
||||
background: #f0fdf4;
|
||||
border: 1px solid #bbf7d0;
|
||||
border-left: 4px solid #22c55e;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.success-box .check {
|
||||
font-size: 20px;
|
||||
color: #16a34a;
|
||||
font-weight: bold;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.step-content ul { margin-left: 24px; margin-top: 12px; }
|
||||
.step-content li { margin-bottom: 8px; }
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="step-title">步骤 5: 完成</div>
|
||||
|
||||
<div class="success-box">
|
||||
<div class="check">✓ 水泄漏报警已成功处理！</div>
|
||||
<div class="step-content">
|
||||
<p>后续建议：</p>
|
||||
<ul>
|
||||
<li>记录漏水位置和处理方法</li>
|
||||
<li>如果是管道问题，提交维护工单</li>
|
||||
<li>增加该区域的巡检频率</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user