Интерактивный прототип мониторинга для распределённой генерации

О клиенте и задаче

Компания «Честная Генерация» занимается мониторингом и управлением распределёнными электростанциями, включая дизель-генераторные установки (ДГУ). В условиях непрерывно растущей потребности в надежном и эффективном электроснабжении, заказчику необходима современная система диспетчерского мониторинга. Это должно быть решение, которое предоставит операторам и инженерам доступ к критически важным данным о состоянии оборудования в реальном времени.

Система должна обеспечить операторов необходимыми показателями, такими как нагрузка, моточасы, температура охлаждающей жидкости и статус оборудования по десяткам объектов на интуитивно понятной карте. Важным требованием было отсутствие перегруженных таблиц и устаревших интерфейсов, которые затрудняли бы работу пользователей.

Проблема

Сложности, с которыми столкнулся заказчик, были связаны с недостаточно продуманным пользовательским опытом уже существующей системы. Исходный API предоставлял данные, но не предлагал удобного UX. Это приводило к тому, что операторам было сложно быстро находить нужную информацию, особенно когда речь шла о множестве объектов на карте. Необходимость отображения более 4-х станций на одной карте вызывала дополнительные трудности, так как не было четкой связи между списком объектов и их маркерами на карте.

Сложности также возникали при просмотре параметров ДГУ с мобильных устройств. Операторам требовалось удобно получать доступ к данным о состоянии оборудования на месте, и для этого нужна была адаптация интерфейса под разные устройства — от смартфонов до планшетов диспетчеров.

Заключительным требованием было создание единого визуального языка бренда «Честная Генерация», который позволил бы пользователям без труда перемещаться от общего к частному — от карты объектов к детальной информации о каждом агрегате за 1–2 клика.

Решение

Команда Rubtsov.pro приняла на себя ответственность за фронтенд-разработку и проектирование UI/UX системы. Мы создали интерактивный прототип на основе современных веб-технологий, используя Vanilla JavaScript. Это позволило нам избежать сложности, связанной с тяжёлыми фреймворками, обеспечив быстрый деплой и прозрачную интеграцию с API.

В рамках работы мы спроектировали пользовательские сценарии, визуальную иерархию, адаптивные макеты и реализовали интерфейс с интеграцией с REST API. Информационная архитектура прототипа была организована таким образом, чтобы пользователи могли легко перемещаться от карты к объекту, затем к ДГУ и далее к регистрационным данным, графикам и истории. Это обеспечивало простоту навигации и доступ к необходимой информации в несколько кликов.

Карта объектов была реализована с использованием Leaflet, что позволило создать кастомные маркеры для каждой станции. Мы заменили привычные координаты на балуны с KPI, отображающими ключевые показатели, такие как кВт, моточасы и температура охлаждающей жидкости. Двусторонняя подсветка маркера и карточки в списке при наведении улучшала визуальное восприятие и облегчала работу с интерфейсом.

Каждая станция и её ДГУ имели свои карточки с live-параметрами, которые обновлялись каждые 30 секунд. Это позволяло операторам в реальном времени следить за состоянием оборудования. Мы также внедрили механизм тихой авторизации через share-token и cookie viewer-сессии, что повышало безопасность и удобство использования приложения.

Адаптивные макеты были разработаны для трёх типов устройств: десктопы, планшеты и мобильные телефоны. Это обеспечивало пользователям возможность получать доступ к системе с любых устройств, будь то диспетчер за рабочим местом или оператор, находящийся на объекте.

Прототип был развернут на сервере и подключен к production API через nginx-прокси, что обеспечивало стабильную работу и высокую доступность системы.

Результаты

В результате работы над проектом был создан рабочий интерактивный прототип, доступный по адресу, который демонстрирует live-данные для четырёх объектов мониторинга. Оператор теперь может видеть сводку установленной мощности в 12+ МВт и среднюю нагрузку около 59% на карте. Это значительно упрощает процесс мониторинга и управления.

Пользовательский интерфейс стал единым для десктопа, iPad и смартфонов, что позволило сделать систему более доступной и удобной для всех пользователей. Сокращение пути от карты до проблемного агрегата до 2 кликов минимизирует риск пропустить важную информацию и улучшает общую эффективность работы.

При этом визуальная связь между списком объектов и картой снижает вероятность ошибок и упрощает процесс мониторинга, что критически важно для работы диспетчеров и операторов на местах.

Таким образом, проект стал успешным примером того, как правильная организация пользовательского опыта и современный подход к разработке интерфейсов могут значительно улучшить эффективность работы в сфере мониторинга распределённой генерации энергии.