Интерфейсы для автоматизированной системы управления технологическим процессом (АСУ ТП) — это всегда вызов: высокая плотность данных, работа в реальном времени и ответственность, где цена ошибки особенно высока. В статье разбираем, как Webix подходит для систем с большими данными, real-time обновлениями и строгими требованиями к стабильности интерфейса.
Мы поговорили с Евгенией Балуевой, специалист отдела веб-разработки компании “Децима”, чтобы рассказать, как команда решала эту задачу с помощью Webix.
КОТМИ-14 — новое поколение АСУ ТП, предназначенное для комплексной автоматизации бизнес-процессов оперативно-диспетчерского, технологического и ситуационного управления.
Платформа используется операторами на разных устройствах (ПК, планшет, смартфон на Windows и Linux) и отображает:
- режимную информацию в реальном времени,
- журналы событий,
- мнемосхемы — визуальные схемы технологических процессов,
- графики,
- документы,
- а также ретроспективные данные.
Система поддерживает гибкое разграничение прав и используется в средах с повышенной ответственностью, таких как: управление производством, передачей и распределением электроэнергии, систем управления ремонтами и эксплуатацией, систем управления отказами и др.
Задачи и особенности проекта
Команде требовалось разработать веб-АРМ, автоматизированное рабочее место в браузере, для отображения большого объема технических данных, обновляемых в реальном времени, с возможностью дальнейшего масштабирования и адаптации под отраслевую специфику.
Кроме того, интерфейс должен был работать на разных устройствах и обеспечивать высокую скорость взаимодействия операторов с данными.
До выбора Webix разработчики столкнулись с типичным для таких систем набором вызовов:
- большая плотность данных и высокая нагрузка на UI, особенно при обновлении в реальном времени;
- необходимость создавать и поддерживать большое количество custom-компонентов;
- сложность интеграции графиков и карт без нарушения общей архитектуры;
Команде нужна была библиотека, которая включает в себя все необходимые для системы и кастомизируемыми UI контролы в одном пакете.
Почему Webix
После пробного периода и технической оценки команда выбрала Webix и микро-фреймворк Webix Jet за:
- широкую базовую библиотеку UI-компонентов, покрывающую основные сценарии интерфейса «из коробки»;
- гибкость и расширяемость — возможность глубоко дорабатывать компоненты под сложный домен;
- стабильную архитектуру Jet, которая упрощает масштабирование проекта;
- простую интеграцию со сторонними библиотеками, включая Plotly (графики) и OpenLayers (карты);
- поддержку и документацию, которые помогли пройти кривую обучения.
Как проходило внедрение и кастомизация Webix
Веб-интерфейс проекта развивается на базе Webix уже более трёх лет. Старт был непростым: несмотря на документацию и примеры, команде потребовалось время, чтобы освоить архитектуру Jet и особенности компонентов. Но благодаря специалистам технической поддержки Webix вопросы решались быстро, и подход становился понятнее.
Дальше разработка пошла ощутимо быстрее: Webix позволил создавать стабильные интерфейсы для отображения рабочих параметров, событий, графиков и мнемосхем, при этом поддерживая высокую производительность.
Используемые компоненты
В проект активно вошли базовые UI-компоненты, которые включены в Webix Core:
- datatable — основной компонент для рабочих таблиц и журналов;
- tree и treetable — для отображения иерархии данных;
- charts — для отображения визуальных данных;
- property — для динамической настройки параметров интерфейса (чатров, дашбордов и панелей) и автоматической перерисовки части интерфейса;
- tabs, lists, forms, buttons — основа приложения.
Также используется JavaScript Spreadsheet, который команда активно расширяла, включая собственную реализацию условного форматирования.
Расширение функционала Webix
Одно из ключевых преимуществ Webix — это гибкость и настраиваемость компонентов. Команда значительно расширила функционал компонента property, адаптировав его под сложные структуры параметров.
Кроме того, им удалось полностью встроить:
- Plotly — для многоуровневых графиков,
- OpenLayers — для работы с картографией и геоданными.
Это позволило объединить интерфейсы разного типа в одном приложении, не создавая отдельные модули и не усложняя разработку.
Результаты
За три года использования Webix команда получила:
- ускорение разработки веб-АРМ за счет готовых и расширяемых компонентов;
- единый стек для всей визуальной части;
- гибкую архитектуру, которая не мешает интегрировать внешние библиотеки;
- высокую производительность UI, критичную для систем с отображением изменений в реальном времени;
- улучшение UX операторов благодаря богатой компонентной базе;
- постоянную техническую поддержку от команды Webix, позволяющую улучшать компоненты и закрывать узкие места.
Несмотря на то, что некоторые компоненты хотелось бы развивать быстрее (например, property и Spreadsheet), в целом Евгения оценивает опыт как очень положительный, цитата: «В общем, всё хорошо 🙂».
Советы от команды Децима
- Используйте Webix Jet, это гибкий архитектурный каркас вашего приложения. Один раз разберитесь с ним, это упростит масштабирование.
- При необходимости кастомизируйте компоненты и подключайте сторонние библиотеки, Вебикс дает эти возможности.
- Обращайтесь в техподдержку, если необходимо, это позволит сэкономить время разработки и решить сложные вопросы.
Спасибо Евгение и команде Децима за подробный и честный опыт использования Webix и за готовность поделиться практическими выводами из реального проекта.
Итог
Внедрение гибкой UI библиотеки Webix позволило команде Децима быстро создать масштабируемый, адаптивный и производительный интерфейс для управления технологическими процессами. Компонентный подход, архитектура Jet и возможность настройки фреймворка стали ключевыми факторами успеха.
Для каких систем подойдёт Webix
Опыт КОТМИ-2014 показывает, что Webix особенно хорошо подходит для проектов с высокой сложностью интерфейса и требований к надежности:
- систем АСУ ТП;
- мониторинга и анализа данных в реальном времени;
- диспетчерских и ситуационных центров;
- приложений с большим количеством взаимосвязанных экранов;
- интерфейсов с онлайн-обновлением данных и большими таблицами.
Мы собираем реальные истории использования Webix в разных проектах и отраслях. Если у вас есть такой опыт, будем рады, если вы им поделитесь.
