网站首页 > 技术文章正文

求大佬帮我把这html的文档变成图片

nanyue 2025-07-28 19:25:31 技术文章 2 ℃

<!DOCTYPE html>

<head>

<title>低压控制电路设计 - 刮筛、水泵、转筛</title>

<style>

* {

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);

color: #333;

line-height: 1.6;

padding: 20px;

min-height: 100vh;

}

.container {

max-width: 1200px;

margin: 0 auto;

}

header {

text-align: center;

padding: 30px 0;

margin-bottom: 30px;

background: linear-gradient(90deg, #1a3a5f, #2c5a8a);

color: white;

border-radius: 10px;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}

h1 {

font-size: 2.5rem;

margin-bottom: 10px;

}

.subtitle {

font-size: 1.2rem;

opacity: 0.9;

}

.content {

display: flex;

gap: 30px;

flex-wrap: wrap;

}

.panel {

background: white;

border-radius: 10px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

padding: 25px;

flex: 1;

min-width: 300px;

}

.panel-title {

font-size: 1.5rem;

color: #2c5a8a;

margin-bottom: 20px;

padding-bottom: 10px;

border-bottom: 2px solid #eaeaea;

}

.requirements {

background: #eef7ff;

}

.requirements ul {

padding-left: 20px;

margin: 15px 0;

}

.requirements li {

margin-bottom: 10px;

}

.legend {

display: flex;

flex-wrap: wrap;

gap: 15px;

margin-top: 20px;

}

.legend-item {

display: flex;

align-items: center;

gap: 8px;

font-size: 0.9rem;

}

.symbol {

width: 30px;

height: 30px;

border-radius: 4px;

display: flex;

align-items: center;

justify-content: center;

font-weight: bold;

color: white;

}

.symbol-contactor { background: #3498db; }

.symbol-relay { background: #9b59b6; }

.symbol-switch { background: #e74c3c; }

.symbol-protection { background: #e67e22; }

.symbol-sensor { background: #2ecc71; }

.symbol-power { background: #f1c40f; color: #333; }

.circuit-diagram {

background: white;

padding: 30px;

overflow-x: auto;

border-radius: 10px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

margin-top: 30px;

min-width: 100%;

}

.diagram-title {

text-align: center;

font-size: 1.8rem;

margin-bottom: 30px;

color: #2c5a8a;

}

.circuit-container {

display: flex;

justify-content: center;

min-width: 1000px;

}

.circuit-grid {

display: grid;

grid-template-columns: repeat(8, 1fr);

gap: 10px;

min-width: 1000px;

}

.grid-item {

padding: 15px;

border-radius: 5px;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

min-height: 80px;

font-weight: bold;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

.power { background: #f1c40f; grid-column: span 2; }

.breaker { background: #e67e22; }

.contactor { background: #3498db; }

.switch { background: #e74c3c; }

.relay { background: #9b59b6; }

.sensor { background: #2ecc71; }

.load { background: #1abc9c; }

.line {

display: flex;

align-items: center;

justify-content: center;

font-size: 24px;

}

.explanation {

margin-top: 30px;

padding: 20px;

background: #eef7ff;

border-radius: 10px;

}

.explanation h3 {

color: #2c5a8a;

margin-bottom: 15px;

}

.operation-table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

background: white;

}

.operation-table th, .operation-table td {

border: 1px solid #ddd;

padding: 12px;

text-align: center;

}

.operation-table th {

background: #2c5a8a;

color: white;

}

.operation-table tr:nth-child(even) {

background: #f8f9fa;

}

footer {

text-align: center;

margin-top: 40px;

padding: 20px;

color: #7f8c8d;

font-size: 0.9rem;

}

@media (max-width: 768px) {

.content {

flex-direction: column;

}

.circuit-container {

overflow-x: auto;

}

</style>

</head>

<body>

<h1>低压控制电路设计方案</h1>

<p class="subtitle">刮筛、水泵、转筛设备控制系统（手/自动模式）</p>

</header>

<ul>

<li>控制系统采用<strong>低压（24V DC）</strong>电路设计</li>

<li>设备具有<strong>手动和自动</strong>两种运行模式</li>

<li><strong>刮筛设备</strong>24小时持续运行</li>

<li>自动模式下，<strong>水泵和转筛</strong>由浮球液位开关控制</li>

<li>自动模式下，<strong>水泵和转筛同时启动</strong></li>

<li>手动模式下，可单独控制水泵和转筛</li>

</ul>

<ul>

<li><strong>刮筛设备</strong>: 24小时连续运行，不受模式切换影响</li>

<li><strong>水泵设备</strong>: 在自动模式下受液位控制，手动模式下可单独启停</li>

<li><strong>转筛设备</strong>: 与水泵联动，在自动模式下与水泵同时启停</li>

</ul>

</div>

</div>

</div>

</div>

</div>

<span>模式选择开关</span>

</div>

<span>浮球液位开关</span>

</div>

</div>

</div>

<h3 class="panel-title" style="margin-top: 25px;">控制逻辑说明</h3>

<ul>

<li>当液位达到高水位时，浮球开关SL闭合</li>

<li>继电器KA得电，其常开触点闭合</li>

<li>接触器KM1（水泵）和KM2（转筛）同时得电</li>

<li>水泵和转筛设备同时启动</li>

</ul>

<ul>

<li>可通过按钮SB1/SB2独立控制水泵启停</li>

<li>可通过按钮SB3/SB4独立控制转筛启停</li>

<li>刮筛设备在任何模式下都持续运行</li>

</ul>

</div>

<h2 class="diagram-title">控制电路原理图</h2>

<div class="grid-item breaker">QF2<br>控制断路器</div>

<div class="grid-item protection">FR0<br>刮筛热保护</div>

<div class="grid-item contactor">KM0<br>刮筛接触器</div>

<div class="grid-item protection">FR1<br>水泵热保护</div>

<div class="grid-item protection">FR2<br>转筛热保护</div>

<div class="grid-item contactor">KM1<br>水泵接触器</div>

<div class="grid-item contactor">KM2<br>转筛接触器</div>

<div class="grid-item sensor">SL<br>浮球液位开关<br>(高水位闭合)</div>

<div class="grid-item relay">KA<br>控制继电器</div>

<div class="grid-item contactor">KM1<br>水泵接触器</div>

<div class="grid-item contactor">KM2<br>转筛接触器</div>

</div>

<h3>电路工作原理说明：</h3>

<p>1. <strong>刮筛控制回路</strong>：刮筛设备通过KM0接触器控制，24小时连续运行，仅受急停(ES)和热保护(FR0)影响</p>

<p>2. <strong>模式选择</strong>：SA模式选择开关决定系统工作状态（手动/自动）</p>

<p>3. <strong>自动模式</strong>：当液位达到高位时，浮球开关SL闭合 → 继电器KA得电 → KA常开触点闭合 → KM1和KM2同时得电 → 水泵和转筛同时启动</p>

<p>4. <strong>手动模式</strong>：通过独立按钮控制：

<ul>

<li>SB1/SB2控制水泵启停</li>

<li>SB3/SB4控制转筛启停</li>

</ul>

</p>

<p>5. <strong>保护功能</strong>：所有回路均配备热继电器(FR)提供过载保护，急停按钮(ES)可立即切断所有设备电源</p>

</div>

<h3 class="panel-title" style="margin-top: 30px;">设备操作状态表</h3>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>浮球开关控制</td>

</tr>

<tr>

<td>浮球开关控制</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

<p>低压控制系统设计 | 刮筛、水泵、转筛设备 | 手/自动模式控制</p>

</footer>

</div>

</body>

</html>

网站首页 > 技术文章 正文

求大佬帮我把这html的文档变成图片

猜你喜欢

网站首页 > 技术文章正文