Mephimeow
401 lines
16 KiB
HTML
401 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Линия переработки лома — Схема процесса</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; }
|
||
|
||
header {
|
||
text-align: center;
|
||
padding: 2rem 1rem 1rem;
|
||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||
border-bottom: 1px solid #334155;
|
||
}
|
||
header h1 { font-size: 1.8rem; font-weight: 700; color: #38bdf8; }
|
||
header p { color: #94a3b8; margin-top: 0.5rem; }
|
||
|
||
.diagram {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 1.5rem;
|
||
padding: 2rem;
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.stage {
|
||
background: #1e293b;
|
||
border: 2px solid #334155;
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
width: 280px;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
cursor: default;
|
||
}
|
||
.stage:hover {
|
||
transform: translateY(-4px);
|
||
border-color: #38bdf8;
|
||
box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
|
||
}
|
||
.stage-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.stage-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
}
|
||
.stage-num {
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: #64748b;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.stage-title {
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
color: #f1f5f9;
|
||
}
|
||
.stage-details {
|
||
list-style: none;
|
||
margin-top: 0.75rem;
|
||
}
|
||
.stage-details li {
|
||
font-size: 0.85rem;
|
||
color: #94a3b8;
|
||
padding: 0.25rem 0;
|
||
border-bottom: 1px solid #1e293b;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.stage-details li:last-child { border-bottom: none; }
|
||
.stage-details .label { color: #64748b; }
|
||
.stage-details .value { color: #cbd5e1; font-family: monospace; }
|
||
|
||
.arrow {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
color: #38bdf8;
|
||
font-size: 2rem;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
.arrow-down {
|
||
width: 100%;
|
||
flex-direction: column;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 0.4; }
|
||
50% { opacity: 1; }
|
||
}
|
||
|
||
.group-label {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
color: #64748b;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
padding: 1rem 0 0.5rem;
|
||
position: relative;
|
||
}
|
||
.group-label::before, .group-label::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 20%;
|
||
height: 1px;
|
||
background: #334155;
|
||
}
|
||
.group-label::before { left: 5%; }
|
||
.group-label::after { right: 5%; }
|
||
|
||
/* Цвета для разных групп */
|
||
.group-raw .stage-icon { background: #1e3a5f; }
|
||
.group-raw { border-color: #2563eb; }
|
||
|
||
.group-sort .stage-icon { background: #581c87; }
|
||
.group-sort { border-color: #9333ea; }
|
||
|
||
.group-process .stage-icon { background: #7c2d12; }
|
||
.group-process { border-color: #f97316; }
|
||
|
||
.group-output .stage-icon { background: #14532d; }
|
||
.group-output { border-color: #22c55e; }
|
||
|
||
.telemetry {
|
||
margin-top: 1rem;
|
||
padding: 0.5rem 0.75rem;
|
||
background: #0f172a;
|
||
border-radius: 6px;
|
||
font-size: 0.75rem;
|
||
font-family: monospace;
|
||
color: #38bdf8;
|
||
border: 1px solid #1e293b;
|
||
}
|
||
.telemetry::before {
|
||
content: 'MQTT: ';
|
||
color: #64748b;
|
||
}
|
||
|
||
.legend {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
padding: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: 0.85rem;
|
||
color: #94a3b8;
|
||
}
|
||
.legend-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.stage { width: 100%; max-width: 360px; }
|
||
.arrow { transform: rotate(90deg); width: 30px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Линия переработки лома во вторичный гранулят</h1>
|
||
<p>Технологическая схема и телеметрия</p>
|
||
</header>
|
||
|
||
<div class="legend">
|
||
<div class="legend-item"><div class="legend-dot" style="background:#2563eb"></div> Сырье</div>
|
||
<div class="legend-item"><div class="legend-dot" style="background:#9333ea"></div> Сортировка</div>
|
||
<div class="legend-item"><div class="legend-dot" style="background:#f97316"></div> Переработка</div>
|
||
<div class="legend-item"><div class="legend-dot" style="background:#22c55e"></div> Готовая продукция</div>
|
||
</div>
|
||
|
||
<div class="diagram">
|
||
<!-- ГРУППА 1: СЫРЬЕ -->
|
||
<div class="group-label">Приемка и складирование сырья</div>
|
||
|
||
<div class="stage group-raw">
|
||
<div class="stage-header">
|
||
<div class="stage-icon">🚛</div>
|
||
<div>
|
||
<div class="stage-num">Этап 01</div>
|
||
<div class="stage-title">Разгрузка лома</div>
|
||
</div>
|
||
</div>
|
||
<ul class="stage-details">
|
||
<li><span class="label">Оборудование</span><span class="value">Рампа, весы</span></li>
|
||
<li><span class="label">Вход</span><span class="value">Лом полимеров</span></li>
|
||
<li><span class="label">Выход</span><span class="value">Взвешенная партия</span></li>
|
||
</ul>
|
||
<div class="telemetry">/sensor/weight/party</div>
|
||
</div>
|
||
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="stage group-raw">
|
||
<div class="stage-header">
|
||
<div class="stage-icon">📦</div>
|
||
<div>
|
||
<div class="stage-num">Этап 02</div>
|
||
<div class="stage-title">Склад сырья</div>
|
||
</div>
|
||
</div>
|
||
<ul class="stage-details">
|
||
<li><span class="label">Оборудование</span><span class="value">Зона хранения</span></li>
|
||
<li><span class="label">Контроль</span><span class="value">Уровень запасов</span></li>
|
||
<li><span class="label">Операция</span><span class="value">Буферизация</span></li>
|
||
</ul>
|
||
<div class="telemetry">/storage/raw/level</div>
|
||
</div>
|
||
|
||
<!-- ГРУППА 2: СОРТИРОВКА -->
|
||
<div class="group-label">Идентификация и сортировка</div>
|
||
|
||
<div class="stage group-sort">
|
||
<div class="stage-header">
|
||
<div class="stage-icon">📷</div>
|
||
<div>
|
||
<div class="stage-num">Этап 03</div>
|
||
<div class="stage-title">QR-сканирование</div>
|
||
</div>
|
||
</div>
|
||
<ul class="stage-details">
|
||
<li><span class="label">Оборудование</span><span class="value">Camera Module v3</span></li>
|
||
<li><span class="label">ПО</span><span class="value">pyzbar + OpenCV</span></li>
|
||
<li><span class="label">Результат</span><span class="value">Тип полимера</span></li>
|
||
</ul>
|
||
<div class="telemetry">/qr/result</div>
|
||
</div>
|
||
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="stage group-sort">
|
||
<div class="stage-header">
|
||
<div class="stage-icon">🤖</div>
|
||
<div>
|
||
<div class="stage-num">Этап 04</div>
|
||
<div class="stage-title">Сортировочный узел</div>
|
||
</div>
|
||
</div>
|
||
<ul class="stage-details">
|
||
<li><span class="label">Оборудование</span><span class="value">S7-1200, приводы</span></li>
|
||
<li><span class="label">Логика</span><span class="value">Принять / Отклонить</span></li>
|
||
<li><span class="label">Скорость</span><span class="value">до 2 м/с</span></li>
|
||
</ul>
|
||
<div class="telemetry">/sorter/decision</div>
|
||
</div>
|
||
|
||
<!-- ГРУППА 3: ПЕРЕРАБОТКА -->
|
||
<div class="group-label">Переработка</div>
|
||
|
||
<div class="stage group-process">
|
||
<div class="stage-header">
|
||
<div class="stage-icon">⚙️</div>
|
||
<div>
|
||
<div class="stage-num">Этап 05</div>
|
||
<div class="stage-title">Дробление</div>
|
||
</div>
|
||
</div>
|
||
<ul class="stage-details">
|
||
<li><span class="label">Оборудование</span><span class="value">Шредер / Дробилка</span></li>
|
||
<li><span class="label">Привод</span><span class="value">SEW MOVITRAC</span></li>
|
||
<li><span class="label">Контроль</span><span class="value">Вибрация, ток</span></li>
|
||
</ul>
|
||
<div class="telemetry">/drive/vibration, /drive/current</div>
|
||
</div>
|
||
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="stage group-process">
|
||
<div class="stage-header">
|
||
<div class="stage-icon">💧</div>
|
||
<div>
|
||
<div class="stage-num">Этап 06</div>
|
||
<div class="stage-title">Мойка / Флотация</div>
|
||
</div>
|
||
</div>
|
||
<ul class="stage-details">
|
||
<li><span class="label">Оборудование</span><span class="value">Ванна, насосы</span></li>
|
||
<li><span class="label">Контроль</span><span class="value">Уровень, T воды</span></li>
|
||
<li><span class="label">Среда</span><span class="value">Вода + реагенты</span></li>
|
||
</ul>
|
||
<div class="telemetry">/sensor/level, /sensor/temp</div>
|
||
</div>
|
||
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="stage group-process">
|
||
<div class="stage-header">
|
||
<div class="stage-icon">🌡️</div>
|
||
<div>
|
||
<div class="stage-num">Этап 07</div>
|
||
<div class="stage-title">Сушка</div>
|
||
</div>
|
||
</div>
|
||
<ul class="stage-details">
|
||
<li><span class="label">Оборудование</span><span class="value">Центрифуга + сушилка</span></li>
|
||
<li><span class="label">Контроль</span><span class="value">T агента, влажность</span></li>
|
||
<li><span class="label">Цель</span><span class="value">< 2% влаги</span></li>
|
||
</ul>
|
||
<div class="telemetry">/sensor/dry/temp, /sensor/humidity</div>
|
||
</div>
|
||
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="stage group-process">
|
||
<div class="stage-header">
|
||
<div class="stage-icon">🔥</div>
|
||
<div>
|
||
<div class="stage-num">Этап 08</div>
|
||
<div class="stage-title">Экструзия</div>
|
||
</div>
|
||
</div>
|
||
<ul class="stage-details">
|
||
<li><span class="label">Оборудование</span><span class="value">Экструдер</span></li>
|
||
<li><span class="label">Привод</span><span class="value">ABB ACS880</span></li>
|
||
<li><span class="label">Контроль</span><span class="value">Давление, T зон</span></li>
|
||
</ul>
|
||
<div class="telemetry">/extruder/pressure, /extruder/temp</div>
|
||
</div>
|
||
|
||
<!-- ГРУППА 4: ГОТОВАЯ ПРОДУКЦИЯ -->
|
||
<div class="group-label">Упаковка и отгрузка</div>
|
||
|
||
<div class="stage group-output">
|
||
<div class="stage-header">
|
||
<div class="stage-icon">🕳️</div>
|
||
<div>
|
||
<div class="stage-num">Этап 09</div>
|
||
<div class="stage-title">Бункер гранулята</div>
|
||
</div>
|
||
</div>
|
||
<ul class="stage-details">
|
||
<li><span class="label">Оборудование</span><span class="value">Силос</span></li>
|
||
<li><span class="label">Контроль</span><span class="value">Уровень заполнения</span></li>
|
||
<li><span class="label">Объем</span><span class="value">до 10 м³</span></li>
|
||
</ul>
|
||
<div class="telemetry">/storage/granulate/level</div>
|
||
</div>
|
||
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="stage group-output">
|
||
<div class="stage-header">
|
||
<div class="stage-icon">🦾</div>
|
||
<div>
|
||
<div class="stage-num">Этап 10</div>
|
||
<div class="stage-title">Манипулятор</div>
|
||
</div>
|
||
</div>
|
||
<ul class="stage-details">
|
||
<li><span class="label">Оборудование</span><span class="value">Робот-упаковщик</span></li>
|
||
<li><span class="label">Безопасность</span><span class="value">Pilz PNOZ m1p</span></li>
|
||
<li><span class="label">Цикл</span><span class="value">~30 сек/паллет</span></li>
|
||
</ul>
|
||
<div class="telemetry">/robot/cycle, /robot/pallets</div>
|
||
</div>
|
||
|
||
<div class="arrow">→</div>
|
||
|
||
<div class="stage group-output">
|
||
<div class="stage-header">
|
||
<div class="stage-icon">✅</div>
|
||
<div>
|
||
<div class="stage-num">Этап 11</div>
|
||
<div class="stage-title">Склад готовой продукции</div>
|
||
</div>
|
||
</div>
|
||
<ul class="stage-details">
|
||
<li><span class="label">Оборудование</span><span class="value">Зона хранения</span></li>
|
||
<li><span class="label">Контроль</span><span class="value">Инвентаризация</span></li>
|
||
<li><span class="label">Отгрузка</span><span class="value">По заказу</span></li>
|
||
</ul>
|
||
<div class="telemetry">/storage/finished/stock</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|