Формы программы бурения скважин для нефтегазовой компании

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

Фронтенд экосистемы разбит на пять микрофронтендов. Над ним работают четыре фронтенд- и четыре бэкенд-разработчика, три тестировщика, три аналитика и отраслевой эксперт. В июле 2025 года компания пополняла команду, и к одному из микрофронтендов подключился фронтенд-разработчик Фортех. Работа шла шесть месяцев, до конца декабря 2025 года.

Задача

Главная задача: переделать и сильно расширить сайдбар для заполнения компоновки низа буровой колонны:

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

Кроме этого, нужно было:

• сделать автозаполнение в расчёте параметров бурения;
• создавать новые компоненты UI-кита и дорабатывать существующие под обновлённые требования;
• построить интерактивные графики уровня обученности сотрудников в бурении.

Ограничения задачи

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

Бизнес-логику бурения пришлось осваивать с нуля, а спецификация местами была заполнена неточно.

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

Решение

Автозаполнение по справочнику. Разработчик Фортех написал логику, которая после каждого введённого значения фильтрует строки справочника и подставляет в остальные поля только подходящие варианты. Порядок заполнения не важен: форма работает как набор связанных фильтров. Это была самая сложная часть задачи.

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

Расчёт параметров бурения. В расчёте параметров списки значений тоже берутся из справочников, а одно поле заполняется автоматически по значению другого.

UI-кит и графики. Разработчик участвовал в создании новых компонентов UI-кита на дизайн-системе Consta и дорабатывал существующие. Интерактивные графики обученности сотрудников построены на G2Plot, данные кешируются на фронтенде в IndexedDB.

Инженеры заполняют компоновку низа буровой колонны для разных типов установок в одном обновлённом сайдбаре: поля подстраиваются под установку, а значения подставляются из справочника по уже выбранным параметрам.

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

В расчёте параметров бурения появилось автозаполнение, UI-кит пополнился новыми компонентами, а уровень обученности сотрудников виден на интерактивных графиках.

Частые вопросы

Как сделать автозаполнение формы по большому справочнику?
Фильтровать строки справочника после каждого введённого значения и предлагать в остальных полях только подходящие варианты. Тогда порядок заполнения не важен, а форма ведёт себя как фильтры в Excel.

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

Можно ли подключить разработчика к микрофронтенду, где сложная отраслевая логика?
Да. Здесь фронтенд-разработчик Фортех освоил бизнес-логику бурения с нуля и шесть месяцев работал на одном из пяти микрофронтендов экосистемы.