В практике автоматизации учета недвижимости часто возникает задача визуализации объектов аренды. Менеджеры по продажам и руководители хотят видеть наглядный технический паспорт здания или схему торгового центра непосредственно в программе 1С. При этом схема должна быть интерактивной: свободные площади окрашиваются в зеленый цвет, занятые — в красный, а при клике на конкретный кабинет или торговую точку должно открываться окно действующего договора аренды либо создаваться новый документ.
В рамках этой статьи мы подробно разберем, как реализовать такую систему своими силами на платформе 1С:Предприятие 8.3, используя современные веб-технологии, встроенные механизмы платформы и векторную графику.
Для создания интерактивных планов этажей существует несколько подходов (рисование фигур в Excel, использование географических схем 1С, специализированные внешние компоненты). Однако самым гибким, масштабируемым и современным методом является связка векторного формата SVG (Scalable Vector Graphics) и стандартного реквизита формы 1С Поле HTML-документа.
Формат SVG представляет собой текстовый XML-файл. Каждый элемент графики (будь то прямоугольник кабинета, многоугольник сложной торговой площади или линия коридора) описывается тегами типа <path>, <rect> или <polygon>. Это дает нам колоссальные преимущества:
id="Помещение_105" или УИД элемента справочника в 1С).fill, прозрачность, толщину границ) прямо из кода 1С или с помощью JavaScript.Проанализируем пошагово процесс интеграции такой схемы в вашу конфигурацию 1С.
Для начала нам понадобится исходный план здания в векторном формате. Дизайнеры или архитекторы могут экспортировать его из AutoCAD, ArchiCAD или подготовить в редакторах вроде Adobe Illustrator, Figma или Inkscape.
Главное требование при подготовке файла — каждое арендуемое помещение должно быть представлено отдельным замкнутым контуром. В свойствах этого контура в векторном редакторе необходимо задать уникальное имя или ID. Рекомендуется использовать код помещения из 1С или его уникальный идентификатор (UUID), чтобы избежать путаницы при сопоставлении данных.
В итоге структура SVG-кода для отдельного помещения будет выглядеть примерно так:
<polygon id="UID-abc12345-def6-7890-1234-567890abcdef" points="100,100 250,100 250,220 100,220" class="room-polygon" style="fill: #cccccc; stroke: #333333; stroke-width: 2;" />
Создадим в 1С справочник СхемыПомещений, где в качестве макета (или реквизита с типом ХранилищеЗначения) будем хранить наш SVG-файл. На форме управляемого элемента добавим реквизит с типом Строка и перетащим его на форму как Поле HTML-документа. Назовем его ПолеСхемы.
При открытии формы нам необходимо прочитать SVG-код, определить текущие статусы помещений из регистров сведений 1С (занято, свободно, забронировано) и заменить цвета соответствующих контуров. Рассмотрим пример серверной функции, которая генерирует итоговый HTML-текст для вывода на форму:
&НаСервере
Функция СформироватьHTMLКодСхемы(ИдентификаторЭтажа)
// Получаем исходный SVG-шаблон из макета или справочника
МакетSVG = Справочники.СхемыПомещений.ПолучитьМакет("План1Этажа");
ТекстSVG = МакетSVG.ПолучитьТекст();
// Получаем актуальные данные о состоянии аренды помещений
Запрос = Новый Запрос;
Запрос.Текст =
"ВЫБРАТЬ
| СостоянияАрендыСрезПоследних.Помещение КАК Помещение,
| СостоянияАрендыСрезПоследних.Помещение.УникальныйИдентификаторСтрокой КАК УИДПомещения,
| СостоянияАрендыСрезПоследних.Статус КАК Статус
|ИЗ
| РегистрСведений.СостоянияАренды.СрезПоследних(,&ТекущаяДата) КАК СостоянияАрендыСрезПоследних";
Запрос.УстановитьПараметр("ТекущаяДата", ТекущаяДата());
РезультатЗапроса = Запрос.Выполнить();
// Формируем CSS-стили или напрямую меняем атрибуты fill в SVG-тексте
// Для этого воспользуемся строковыми заменами или DOM-парсером
Выборка = РезультатЗапроса.Выбрать();
Пока Выборка.Следующий() Цикл
// Определяем цвет в зависимости от статуса помещения
Если Выборка.Статус = Перечисления.СтатусыАренды.Свободно Тогда
ЦветЗаливки = "#2ecc71"; // Зеленый
ИначеЕсли Выборка.Статус = Перечисления.СтатусыАренды.Занято Тогда
ЦветЗаливки = "#e74c3c"; // Красный
Иначе
ЦветЗаливки = "#f1c40f"; // Желтый (бронь)
EndЕсли;
// Находим в тексте SVG идентификатор и подменяем стиль его заливки.
// Пример упрощенной замены (в реальной задаче лучше использовать JS или регулярные выражения)
МаркерПоиска = "id=""" + Выборка.УИДПомещения + """ style=""fill:#DEFAULT_COLOR;";
МаркерЗамены = "id=""" + Выборка.УИДПомещения + """ style=""fill:" + ЦветЗаливки + ";";
ТекстSVG = СтрЗаменить(ТекстSVG, МаркерПоиска, МаркерЗамены);
КонецЦикла;
// Оборачиваем SVG в HTML-контейнер со встроенным JavaScript для обработки кликов
HTMLШаблон =
"<!>
|<html>
|<head>
|<style>
| body { margin: 0; padding: 0; overflow: hidden; background-color: #fafafa; }
| .room-polygon { cursor: pointer; transition: fill 0.2s ease; }
| .room-polygon:hover { fill-opacity: 0.8 !important; stroke-width: 3px !important; }
|</style>
|<script>
| function onRoomClick(roomId) {
| // Передаем управление обратно в 1С
| if (window.external && window.external.roomClickEvent) {
| window.external.roomClickEvent(roomId);
| } else {
| // Альтернативный кроссплатформенный вариант через изменение хэша URL
| window.location.href = 'v8action://click?id=' + roomId;
| }
| }
|</script>
|</head>
|<body>
| " + ТекстSVG + "
|</body>
|</html>";
Возврат HTMLШаблон;
КонецФункции
Теперь выясним, как обработать клик пользователя по контуру помещения внутри веб-интерфейса и передать управление обратно в модуль управляемой формы 1С. В коде SVG каждому интерактивному тегу необходимо прописать вызов нашей JS-функции: onclick="onRoomClick('УИД_ПОМЕЩЕНИЯ')".
Существует два основных способа перехвата этого события на стороне 1С в зависимости от версии платформы и режима работы клиента:
Вариант А. Через событие «ПриНажатии» Поля HTML-документа (универсальный способ)
При клике на элемент JS-код выполняет перенаправление на специальный псевдо-URL схемы v8action://click?id=ИД. Платформа 1С перехватывает это событие в процедуре ПриНажатии, отменяет стандартный переход по ссылке и выполняет наш бизнес-сценарий.
&НаКлиенте
Процедура ПолеСхемыПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
Если Найти(ДанныеСобытия.Документ.location.href, "v8action://click") > 0 Тогда
// Отменяем стандартный переход браузера по ссылке
СтандартнаяОбработка = Ложь;
// Извлекаем идентификатор помещения из строки URL
СтрокаПараметров = ДанныеСобытия.Документ.location.href;
ПозицияИД = Найти(СтрокаПараметров, "?id=");
Если ПозицияИД > 0 Тогда
УИДПомещения = Сред(СтрокаПараметров, ПозицияИД + 4);
// Обрабатываем клик по помещению
ОбработатьВыборПомещения(УИДПомещения);
КонецЕсли;
КонецЕсли;
КонецПроцедуры
Вариант Б. С использованием «Средств интеграции» (для платформы 1С 8.3.14+)
В современных версиях платформы реализован полноценный двусторонний обмен между JS и 1С. Мы можем определить JavaScript-объект в контексте браузера, методы которого будут напрямую сопоставлены с процедурами встроенного языка 1С. Это исключает необходимость парсить URL-адреса и делает работу интерфейса мгновенной.
&НаКлиенте
Процедура ОбработатьВыборПомещения(УИДПомещения)
// Преобразуем строку в УникальныйИдентификатор
УникальныйИД = Новый УникальныйИдентификатор(УИДПомещения);
СсылкаНаПомещение = Справочники.Помещения.ПолучитьСсылку(УникальныйИД);
// Ищем действующий договор аренды по данному помещению
ДоговорСсылка = НайтиДействующийДоговор(СсылкаНаПомещение);
Если ЗначениеЗаполнено(ДоговорСсылка) Тогда
// Если договор есть, открываем его карточку
ПоказатьЗначение(, ДоговорСсылка);
Иначе
// Если помещение свободно, предлагаем создать новый договор аренды
ВопросыВыбора = Новый СписокЗначений;
ВопросыВыбора.Добавить("СоздатьДоговор", "Оформить аренду");
ВопросыВыбора.Добавить("ОткрытьКарточку", "Открыть свойства помещения");
ОписаниеОповещения = Новый ОписаниеОповещения("ПослеВыбораДействия", ЭтотОбъект, СсылкаНаПомещение);
ПоказатьВыборИзСписка(ОписаниеОповещения, ВопросыВыбора, Элементы.ПолеСхемы);
КонецЕсли;
КонецПроцедуры
Если чертеж вашего здания слишком большой (например, огромный торговый комплекс с сотнями магазинов и несколькими уровнями), простого SVG-кода внутри HTML-документа может не хватить. Менеджеры столкнутся со сложностями при попытке рассмотреть мелкие детали или переместиться в другой конец здания.
Проанализируем интеграцию популярной картографической библиотеки Leaflet.js. Хотя изначально она создавалась для работы с географическими картами, она отлично подходит для отображения чертежей в так называемой плоской системе координат (L.CRS.Simple). Подключив Leaflet, вы "из коробки" получаете:
Для интеграции библиотеки вам нужно скачать файлы leaflet.js и leaflet.css и подключить их в заголовок вашего HTML-документа внутри 1С. Код инициализации карты в JS будет выглядеть следующим образом:
<script>
var map = L.map('map-container', {
crs: L.CRS.Simple,
minZoom: -2,
maxZoom: 2,
zoomControl: true
});
var bounds = [[0, 0], [1000, 1500]]; // Размеры вашего векторного чертежа
var image = L.imageOverlay('my_floor_plan.svg', bounds).addTo(map);
map.fitBounds(bounds);
</script>
Если вы принципиально не хотите связываться с разработкой на HTML и JavaScript, платформа 1С предоставляет встроенный объект Географическая схема (работающий с файлами формата *.geo). Он позволяет конструировать карты регионов или схемы объектов непосредственно внутри конфигуратора 1С.
В этом редакторе вы можете вручную нарисовать полигоны ваших комнат, привязать к ним объекты вашей информационной базы и раскрашивать их встроенным языком 1С:
// Пример управления цветом слоя в географической схеме 1С
ОбъектСхемы = Элементы.ГеографическаяСхема.Слои.Помещения.Объекты;
Для Каждого ТекущийОбъект Из ОбъектСхемы Цикл
Если ТекущийОбъект.Значение.Статус = Перечисления.СтатусыАренды.Занято Тогда
ТекущийОбъект.ЦветФона = WebЦвета.Красный;
Иначе
ТекущийОбъект.ЦветФона = WebЦвета.Зеленый;
КонецЕсли;
КонецЦикла;
Недостатки географической схемы: визуальный стиль таких планов выглядит устаревшим и угловатым, отсутствуют современные эффекты сглаживания, анимации и плавного масштабирования. Изменение планов (перепланировки торговых павильонов) требует кропотливого ручного перерисовывания схемы в конфигураторе, тогда как SVG-файл можно просто обновить за пару кликов прямо в режиме 1С:Предприятие.
Реализация интерактивного плана помещений своими силами — вполне выполнимая задача для штатного разработчика 1С. Это позволяет отказаться от дорогих коммерческих модулей и тяжеловесных интеграций с Excel.
Придерживайтесь следующих рекомендаций при создании системы:
Помещения в 1С. Это автоматизирует процесс сопоставления графики и данных при загрузке новых планов этажей.