d3m0k1d/rostpoliplast
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

q

Browse Source
This commit is contained in:
Mephimeow
2026-04-29 11:52:46 +00:00
parent 2b4d6c3441
commit 0f8a80b6e1
3 changed files with 544 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Line/diagram.html
+400
View File
@@ -0,0 +1,400 @@
<!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>