/
DriveVision
/
Smart-Column-S3
Обзор
Документация
Войти
/
DriveVision
/
Smart-Column-S3
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
data/charts.html
176 строк
9 KB
Claude
Добавить настройки MQTT и безопасности в Web UI, исправить сохранение темы
07 дек 2025, 13:24
07 дек 2025, 13:24
507eeaf
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Графики - Smart-Column S3</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="charts-style.css"> <script> // Загрузить тему из localStorage перед отрисовкой страницы (function() { const savedTheme = localStorage.getItem('theme') || 'dark'; if (document.body) { document.body.setAttribute('data-theme', savedTheme); } else { document.addEventListener('DOMContentLoaded', function() { document.body.setAttribute('data-theme', savedTheme); }); } })(); </script> </head> <body> <div class="container"> <!-- Заголовок --> <header> <div class="header-content"> <div> <h1>📈 Графики реального времени</h1> <a href="index.html" class="back-link">← Вернуться к управлению</a> </div> <div class="status-bar"> <span id="connection-status" class="status-dot offline">●</span> <span id="connection-text">Подключение...</span> <span class="uptime">Uptime: <span id="uptime">--:--:--</span></span> </div> </div> </header> <!-- Панель управления графиками --> <div class="chart-controls"> <div class="control-panel"> <div class="control-group-inline"> <label><strong>Период:</strong></label> <button class="btn btn-sm period-btn active" data-period="60">1 мин</button> <button class="btn btn-sm period-btn" data-period="300">5 мин</button> <button class="btn btn-sm period-btn" data-period="900">15 мин</button> <button class="btn btn-sm period-btn" data-period="3600">1 час</button> <button class="btn btn-sm period-btn" data-period="0">Всё</button> </div> <div class="control-group-inline"> <button class="btn btn-sm" onclick="pauseCharts()">⏸️ Пауза</button> <button class="btn btn-sm" onclick="resumeCharts()">▶️ Продолжить</button> <button class="btn btn-sm" onclick="clearCharts()">🗑️ Очистить</button> <button class="btn btn-sm btn-primary" onclick="exportCharts()">💾 Экспорт PNG</button> </div> </div> </div> <!-- Панель маркеров аномалий --> <div class="card" style="margin-bottom: 20px;"> <h2>⚠️ Маркеры отклонений от нормы</h2> <div class="anomaly-controls"> <div class="control-group-inline"> <label class="switch-label"> <input type="checkbox" id="anomaly-toggle"> <span>Включить маркеры</span> </label> </div> <div class="control-group-inline"> <label><strong>Порог отклонения:</strong></label> <input type="range" id="anomaly-threshold" min="5" max="50" value="15" step="5" style="width: 200px;"> <span id="anomaly-threshold-value" style="min-width: 40px; display: inline-block; font-weight: bold;">15%</span> </div> <div class="control-group-inline"> <label><strong>Окно усреднения:</strong></label> <select id="anomaly-window" class="select-sm"> <option value="60">1 минута</option> <option value="180">3 минуты</option> <option value="300" selected>5 минут</option> <option value="600">10 минут</option> <option value="900">15 минут</option> </select> </div> <div style="margin-top: 10px; padding: 10px; background-color: var(--bg-secondary); border-radius: 5px; font-size: 0.9em;"> <strong>ℹ️ Как работает:</strong> Маркеры автоматически появляются на графиках, когда текущее значение отклоняется от среднего за выбранное окно времени больше чем на указанный порог. Маркеры показывают процент отклонения. </div> </div> </div> <!-- График 1: Температуры --> <div class="card chart-card"> <div class="chart-header"> <h2>🌡️ Температуры</h2> <div class="chart-checkboxes"> <label><input type="checkbox" id="check-temp-cube" checked> Куб</label> <label><input type="checkbox" id="check-temp-column-bottom" checked> Царга низ</label> <label><input type="checkbox" id="check-temp-column-top" checked> Царга верх</label> <label><input type="checkbox" id="check-temp-reflux" checked> Дефлегматор</label> <label><input type="checkbox" id="check-temp-tsa" checked> ТСА</label> <label><input type="checkbox" id="check-temp-water-in"> Вода вход</label> <label><input type="checkbox" id="check-temp-water-out"> Вода выход</label> </div> </div> <div id="chart-temperatures" class="chart"></div> </div> <!-- График 2: Давление --> <div class="card chart-card"> <div class="chart-header"> <h2>📈 Давление</h2> <div class="chart-checkboxes"> <label><input type="checkbox" id="check-pressure-cube" checked> Куб (мм рт.ст.)</label> <label><input type="checkbox" id="check-pressure-atm" checked> Атмосферное (гПа)</label> <label><input type="checkbox" id="check-pressure-flood"> Порог захлёба</label> </div> </div> <div id="chart-pressure" class="chart"></div> </div> <!-- График 3: Мощность PZEM-004T --> <div class="card chart-card"> <div class="chart-header"> <h2>⚡ Электропитание (PZEM-004T)</h2> <div class="chart-checkboxes"> <label><input type="checkbox" id="check-power-voltage" checked> Напряжение (V)</label> <label><input type="checkbox" id="check-power-current" checked> Ток (A)</label> <label><input type="checkbox" id="check-power-power" checked> Мощность (W)</label> <label><input type="checkbox" id="check-power-energy"> Энергия (кВт·ч)</label> <label><input type="checkbox" id="check-power-frequency"> Частота (Гц)</label> <label><input type="checkbox" id="check-power-pf"> PF</label> </div> </div> <div id="chart-power" class="chart"></div> </div> <!-- График 4: Насос и отбор --> <div class="card chart-card"> <div class="chart-header"> <h2>💧 Насос и отбор</h2> <div class="chart-checkboxes"> <label><input type="checkbox" id="check-pump-speed" checked> Скорость (мл/ч)</label> <label><input type="checkbox" id="check-pump-volume" checked> Накопительный объём (мл)</label> </div> </div> <div id="chart-pump" class="chart"></div> </div> <!-- График 5: Крепость --> <div class="card chart-card"> <div class="chart-header"> <h2>🍷 Электронный ареометр</h2> </div> <div id="chart-abv" class="chart"></div> </div> <!-- График 6: Фракции (столбчатый) --> <div class="card chart-card"> <div class="chart-header"> <h2>📊 Объёмы фракций</h2> </div> <div id="chart-fractions" class="chart-bar"></div> </div> <!-- Футер --> <footer> <p>Smart-Column S3 v1.0 | Графики: ApexCharts</p> </footer> </div> <!-- ApexCharts библиотека --> <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.45.1/dist/apexcharts.min.js"></script> <script src="charts.js"></script> </body> </html>