Визуальный редактор для инжиниринговой компании. Заменили и расширили возможности AutoCAD

Заказчик

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

Задача

Профилю было важно интегрировать весь процесс работы с чертежами в новую систему, поэтому отдельным инструментом в ЦУПе стал визуальный редактор.

С 2021 мы работаем над Центром управления проектами (ЦУП) для сотрудников Профиля. Это производственная система, которая автоматизирует полный цикл работы над проектами: от создания схем сварки трубопроводов, назначения исполнителей проекта с мониторингом квалификационных допусков, до ведения закупочной деятельности материалов, непосредственной работы сварщиков, формирования документации разного рода и контроля качества выполнения проекта.

Один из ключевых этапов работы над проектом — подготовка схемы трубопровода перед работой «в полях»:

• выставление опор и стыков;
• обогащение схемы данными для сварки;
• форматирование чертежа для сварщика.

До внедрения ЦУПа сотрудники производственно-технического отдела (ПТО) работали с чертежами в AutoCAD. Для производственного процесса информация жила только на бумаге — по бумажной схеме делалась сварка, на этой же схеме вручную отмечались расхождения с требованиями.

Профилю было важно интегрировать весь процесс работы с чертежами в новую систему, поэтому отдельным инструментом в ЦУПе стал визуальный редактор. Он дополняет AutoCAD и позволяет работать с оцифрованными данными всем исполнителям на протяжении проекта.

Как работает редактор?

Парсинг схем

Схемы трубопроводов приходят в Профиль pdf-документом, который нужно преобразовать в удобный для редактирования формат. При загрузке чертежа в ЦУП сервер конвертирует в png и сохраняет в базу данных каждые 5 страниц. Обработка группами сокращает подготовку png до 10 минут. Один проект может состоять из 1000 листов и постраничный парсинг растягивал бы конвертацию на час.

Редактор выдает png в 4К. Хорошего качества мы добились увеличением dpi и разрешения, которое сейчас более 1080 рх. В перспективе думаем перейти на svg, что сделает качество изображения еще лучше.

Из листов сотрудник ПТО собирает линии и приступает к расстановке объектов. В процессе работы листы можно добавлять и удалять.

Расстановка объектов на линии

Пользователь работает с чертежами через окно браузера в специальном визуальном редакторе, который находится непосредственно в ЦУПе. Работа происходит . Главным требованием к работе с изометрией трубопроводов, помимо расстановки стыков и опор, была возможность заполнять по ним информацию и передавать ее дальше в систему.

Визуальный редактор состоит из двух частей:

• Холст
• Информационная панель.
• Панель инструментов.

Холст

На холсте пользователь расставляет объекты для сварки с помощью разных инструментов:

• опора
• стык
• неподвижная опора

Их можно увеличивать, изменять градус поворота, переносить.

Когда пользователь совершает действие, информация налету отправляется на сервер. При этом сам редактор работает плавно, обновление данных не грузит интерфейс. Чтобы добиться такого результата, мы уменьшили количество событий. По идее движение объекта запускает: создание данных, получение данных, выставление их на рабочую область, смену положения, изменение данных. Редактор же запускает событие только по измененной информации. Например, пользователь подвинул объект — обновились данные о положении.

Визуальная часть редактора работает на Canvas в связке с Fabric.js. Fabric позволяет создавать объекты из нескольких элементов. Например, для опоры используются линии и круг.

Марат Самохин, разработчик Ареал

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

Информационная панель

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

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

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

Евгений Малюга, директор, ООО «Профиль»

По мере производственной работы на проекте в информационном меню появляется и обновляется статус объекта.

Если сварщик вынужденно отошел от данных чертежа, сотрудник ПТО может скорректировать расхождение на схеме. Например, стереть ластиком расстояние 400 мм и прописывает новое 405 мм.. Несовпадения трассировки подсвечиваются в таблице.

Когда все работы по проекту выполнены, трубопровод готов, сотрудник ПТО формирует схемы для документации:

• Размещает печати подписантов, которые протягиваются из другого интерфейса. Перечень исполнителей и авторов подписей также выводится автоматически.
• Добавляет актуальную таблицу материалов отдельным файлом.

• Добавляет условные обозначения с пояснениями. Обозначения выводятся из одноименного справочника, пользователь для каждого определяет изображение и размещает обозначения на холсте.

 Если необходимо распечатать схемы, то менеджер может настроить качество необходимое для определенного формата.

Технологии

Мы используем модульную архитектуру, что упрощает написание редактора и скорость разработки. Это позволяет работать с компонентами отдельно, не влияя на остальной функционал. При таком подходе модификация и развитие инструмента двигаются быстрее. Фреймворк Vue.js выбран с той же целью — упростить задачи и разбить функции на компоненты.

Итого

Визуальный редактор — часть большой производственной системы, которую мы разрабатываем для компании Профиль. Он позволяет сотрудникам:

• Полноценно готовить чертежи трубопровода для работы над проектом: расставить стыки и опоры, дополнить объекты параметрами.
• Оперировать параметрами объекта в производственном процессе без дополнительных инструментов: данные размещенные или обновленные в визуальном редакторе автоматически сохраняются в базе и выводятся в соседних интерфейсах, где с ними работают закупщики, прораб, начальник проекта, мастер, сварщик, сотрудник отдела снабжения, производитель работ, руководитель проекта, мастер, инженер по сварке. Процесс работает и в обратную сторону — данные, измененные в системе, обновляются в редакторе.
• Генерировать исполнительную документацию на основе чертежей за несколько кликов вместо месяцев ручного ввода и формирования.