Разработали веб-приложение с интеграцией с 1С для работы с грузовыми заявками, пропусками и документами. Данные о грузах вывели в отчёты, на дашборд и интерактивную карту склада.
Задача: от заявки на погрузку до документов
Для ввоза или вывоза груза через порт нужно согласовать операцию, передать сведения о грузе и транспорте, а при необходимости оформить пропуск. У судна, автомобиля и железной дороги разные сценарии. Часть сведений раньше передавали вручную. Порту понадобился личный кабинет, в котором клиент может оформить заявку и вернуться к ней, когда нужно уточнить детали или найти связанные документы.
Разложили сложные формы по шагам
Спроектировали отдельные сценарии для ввоза и вывоза груза, оформления пропусков и складских операций. Сложные формы разделили на шаги. В зависимости от операции пользователь указывает груз, грузовые места и данные автотранспорта.
На примере погрузки судна видно, как устроен сценарий. Пользователь открывает форму, заполняет данные по операции, затем переходит к табличной части с деталями. Для ввоза и вывоза груза, пропусков и складских операций предусмотрели отдельные формы и карточки.
Сведения, которые используются в разных заявках, вынесли в справочники. Например, у грузоотправителя есть отдельная карточка с реквизитами и связанными договорами. Для заявок, документов и приёмных актов сделали отдельные журналы, а для пропусков — список и карточку.
Цифровые решения для промышленности
Разрабатываем сайты, каталоги оборудования и личные кабинеты для предприятий. Помогаем понятно представить сложный продукт и связать сайт с рабочими системами компании.
Показали движение грузов в отчётах и на карте
Подготовили отчёты о поступлении, наличии и движении грузов по приёмным актам, а также об отгрузке на морской транспорт. Для операций погрузки и выгрузки судов сделали отдельный дашборд, он сводит показатели по заявкам и визуализирует погрузку и выгрузку.
На интерактивной карте склада показали зоны хранения. Заявку можно связать с конкретным местом, а координаты и цвета зон подгружаются через API. Карта помогает найти место хранения на схеме, а отчёты показывают, какие операции выполнялись с грузами.
Смотрите также проекты для промышленных компаний
Подключили кабинет к 1С
Команда порта разработала API, через который кабинет получает данные из 1С. F5 спроектировала интерфейсы, разработала веб-приложение на React и подключила его к API заказчика. Визуальный стиль кабинета связали с корпоративным сайтом порта.
Работали итерациями: сначала собрали архитектуру и авторизацию, затем добавляли формы, журналы и отчёты. Сценарии оформления заявок уточняли по итогам тестирования.
Результат
В первой итерации в одном приложении собрали работу с заявками, документами и данными по грузам. Многошаговые формы помогают пройти оформление по порядку, журналы — вернуться к нужной записи, а дашборд и карта — увидеть общую картину по операциям и хранению.
Ещё один проект для порта
Посмотрите, как мы разработали корпоративный сайт порта — услуги, онлайн-сервисы и схемы терминалов в открытом доступе.