Как реализовать интерактивную схему склада в 1С на основе чертежа AutoCAD?

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

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

Способ 1. Векторная графика SVG в элементе «Поле HTML документа»

Это наиболее гибкий и современный подход. В управляемых формах 1С элемент управления Поле HTML документа использует современный браузерный движок, что позволяет бесшовно интегрировать векторные изображения стандарта SVG (Scalable Vector Graphics), манипулировать их стилями через CSS и обрабатывать события мыши с помощью JavaScript.

Разберем процесс реализации по шагам:

1. Экспорт чертежа в SVG: Исходный чертеж из AutoCAD экспортируется в формат SVG напрямую или через промежуточные векторные редакторы. Важно, чтобы графические примитивы стоек, полок и проходов сохранились в виде отдельных векторных путей (path), прямоугольников (rect) или полигонов (polygon).
2. Разметка идентификаторов: Каждому графическому элементу стеллажа или ячейки в SVG-файле присваивается уникальный идентификатор в атрибуте id или data-id, соответствующий коду, наименованию или Уникальному Идентификатору (GUID) ячейки из справочника 1С (например, id="CELL_A102").
3. Загрузка схемы в форму: SVG-код внедряется в HTML-шаблон страницы, которая загружается в реквизит формы с типом Строка, привязанный к элементу Поле HTML документа.
4. Динамическая подсветка: Изменение цвета стоек (например, при получении остатков) выполняется программно через вызов JavaScript, который обращается к нужным элементам по их id и меняет CSS-атрибут заливки fill или обводки stroke.

Способ 2. Использование HTML-карт изображений (теги map и area)

Если нет возможности преобразовать чертеж в масштабируемый векторный SVG, можно использовать классический механизм карт-изображений (Image Maps):

1. Чертеж склада сохраняется в виде растрового изображения высокого разрешения (PNG или JPEG).
2. В HTML-документе изображение связывается с тегом <map>, внутри которого для каждой зоны склада создается элемент <area> с указанием координат и типа геометрии (прямоугольник rect, круг circle или полигон poly).
3. Каждому тегу <area> задаются идентификаторы и обработчики событий нажатия.

Этот способ проще в базовой подготовке, однако он уступает SVG в четкости при масштабировании схемы (зуме) и накладывает ограничения на динамическую заливку произвольных контуров.

Способ 3. Использование объекта конфигурации «Географическая схема»

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

1. Чертеж склада конвертируется в векторный формат ESRI Shapefile (набор файлов .shp и .dbf).
2. В таблицу атрибутов .dbf заносятся идентификаторы ячеек склада.
3. В 1С схема загружается в элемент формы Географическая схема. Программно на встроенном языке 1С можно обращаться к полигонам, настраивать слои, цвета серий и выводить всплывающие подсказки.

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

Организация взаимодействия между 1С и интерактивной схемой

Рассмотрим, как связать действия пользователя в Поле HTML документа с обработчиками на встроенном языке 1С. Для перехвата кликов по объектам схемы используется событие элемента формы ПриНажатии (или механизм генерации событий DOM).

Посмотрим на пример обработки клика по ячейке склада в модуле формы 1С:

&НаКлиенте
Процедура ПолеСхемыПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
    
    // Получаем DOM-элемент, по которому кликнул пользователь
    ЭлементСхемы = ДанныеСобытия.Element;
    
    Если ЭлементСхемы <> Неопределено Тогда
        // Считываем идентификатор стойки/ячейки из атрибута SVG-элемента
        ИдентификаторЯчейки = ЭлементСхемы.getAttribute("id");
        
        Если ЗначениеЗаполнено(ИдентификаторЯчейки) Тогда
            СтандартнаяОбработка = Ложь;
            
            // Обрабатываем выбор ячейки в 1С
            ПоказатьИнформациюПоЯчейке(ИдентификаторЯчейки);
        КонецЕсли;
    КонецЕсли;
    
КонецПроцедуры

Для обратной передачи данных (раскраска стоек по остаткам из базы) формируется JavaScript-скрипт, который выполняется в контексте документа:

&НаКлиенте
Процедура ПодсветитьЯчейку(ИдентификаторЯчейки, ЦветHTML)
    
    // Получаем объектную модель документа HTML
    ДокументHTML = Элементы.ПолеСхемы.Документ;
    
    Если ДокументHTML <> Неопределено Тогда
        ЭлементЯчейки = ДокументHTML.getElementById(ИдентификаторЯчейки);
        
        Если ЭлементЯчейки <> Неопределено Тогда
            // Меняем цвет заливки элемента SVG
            ЭлементЯчейки.style.fill = ЦветHTML;
        КонецЕсли;
    КонецЕсли;
    
КонецПроцедуры

Связка Поле HTML документа + SVG является наиболее производительным и масштабируемым решением для отображения чертежей AutoCAD в 1С, обеспечивая полное совпадение геометрии и высокую скорость отклика интерфейса.