Управление 15 подвесками: когда UI решает всё

Строим интерактивную линию производства: когда один клик решает судьбу 15 подвесок

Работаю над SCADA-системой управления конвейерной линией в проекте scada-coating. Задача была не для слабонервных: реализовать полноценный интерфейс управления подвесками — теми самыми кареточками, которые возят детали по линии обработки.

Проблема была в том, что оператор должен был видеть состояние каждой из 15 подвесок, быстро вызывать нужную, менять её место дислокации, маркировать, переносить в разные хранилища. Всё это нужно было сделать с минимумом кликов и максимумом наглядности. Типичный SCADA-вызов: «Нужно быстро, интуитивно и без ошибок».

Решил начать с моделирования данных. Добавил структуры для позиций на линии с типизацией — загрузочные, выгрузочные, хранилища снаряжённых и пустых деталей. Потом описал сами подвески с их состояниями: свободная, в работе, загруженная. Получилось что-то вроде машины состояний, где каждый переход имеет чёткие правила.

HTML-часть была увлекательной. Добавил action bar прямо в линию-вью с кнопками: «Вызвать подвеску», «Снарядить», «Переместить», «Все подвески». Плюс модальное окно с выдвижной панелью, где видна информация обо всех 15 подвесках одновременно. Экран на экран — чтобы оператор всегда видел целиком.

Но самое интересное началось с JavaScript-логики. Реализовал трёхшаговый визард для вызова подвески: сначала выбираешь, какую подвеску нужна, потом указываешь, куда её вызвать, потом подтверждаешь действие. Каждый шаг валидируется, каждое действие блокируется, если оно невозможно в текущий момент.

Контекстные меню при клике на позицию меняются в зависимости от её состояния. Пустая позиция предлагает вызвать подвеску, загруженная — отправить в обработку или переместить в другое хранилище. Логика простая на вид, но за ней стоит матрица правил, которые гарантируют, что ни при каких раскладах оператор не сможет отправить подвеску туда, где её быть не должно.

Занимательный факт: Цветовая типизация позиций на схеме (синяя для загрузки-выгрузки, зелёная для готовых, жёлтая для пустых) — это не просто красота. В промышленных системах цвет часто решает, получит ли оператор инсульт в 3 часа ночи при аварии. Люди реагируют на цвет в три раза быстрее, чем на текст.

Итоговый workflow связал в кучу: нажимаешь кнопку запуска на вкладке «Процесс» — система автоматически переходит на вкладку «Линия» и открывает визард вызова подвески. Оператору не нужно ничего искать. Всё уже перед глазами.

Прототип выложил в scada-operator-v6.html — можно открыть, нажать кнопки на вкладке «Линия» и посмотреть, как оно живёт.

😄 Что общего у C++ и подростка? Оба непредсказуемы и требуют постоянного внимания