← На главную

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

Выясним, какие архитектурные подходы и механизмы платформы 1С позволяют реализовать такой функционал.

Основной подход: Использование элемента «Поле HTML документа» и JavaScript

Проанализируем наиболее гибкий и функциональный способ решения задачи — создание веб-компонента на базе элемента формы ПолеHTMLДокумента с интеграцией специализированных JavaScript-библиотек визуализации графов (например, vis-network, Cytoscape.js, GoJS или ECharts).

Преимущества данного решения:

1. Автоматическая раскладка узлов: в библиотеки встроены алгоритмы физической модели (force-directed layout), которые автоматически рассчитывают положение элементов и связей на экране без необходимости вручную вычислять координаты каждого устройства.
2. Интерактивность и зум: из коробки поддерживается масштабирование колесиком мыши, перетаскивание узлов и карты, а также сворачивание и разворачивание группировок (например, при клике по маршрутизатору открываются подключенные к нему кассы и камеры).

Механизм взаимодействия между 1С и веб-компонентом

Разберем по шагам, как организуется связка данных 1С и интерактивной схемы в элементе формы:

1. Формирование и передача данных из 1С: из справочников и регистров 1С выбирается структура узлов и связей оборудования. Данные сериализуются в формат JSON и передаются в JavaScript-код с помощью метода ВыполнитьСкрипт() элемента формы ПолеHTMLДокумента.
2. Обратная связь из карты в 1С: при нажатии на конкретный узел оборудования на схеме часто требуется открыть соответствующую карточку справочника в 1С. Для этого используется отправка сообщений из JavaScript в 1С через метод window.1c.postMessage. В форме 1С данное событие обрабатывается в назначенной процедуре-обработчике.

Обеспечение автономности (работа без интернета)

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

Альтернативные варианты реализации в 1С

Рассмотрим другие способы построения схем и их особенности:

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

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

1. Отсутствуют встроенные алгоритмы автоматической расстановки узлов на плоскости — координаты каждой точки придется рассчитывать математически в коде 1С.
2. Отсутствует штатный механизм масштабирования (зума) и динамической кластеризации сложных графов.

2. Генерация SVG-графики или использование языков описания графов

Еще один вариант — программное формирование из 1С вектора в формате SVG или генерация текстового описания связей на специализированных языках (например, DOT для Graphviz, PlantUML или Mermaid). Из 1С передается готовый текст описания связей, а в ПолеHTMLДокумента лёгкий конвертер рендерит интерактивную векторную картинку.

3. Интеграция с внешними системами учета и мониторинга

Если инфраструктура клиентов насчитывает тысячи устройств и требует постоянного опроса по протоколу SNMP, топологию сети логичнее строить во внешних специализированных системах инвентаризации и мониторинга (NetBox, Zabbix), а в 1С получать готовую карту или обмениваться данными через REST API.

Оптимизация производительности при больших объемах

Проанализируем ситуацию, когда у клиентов суммарно используются тысячи единиц техники. Одновременное построение огромного графа вызовет зависание интерфейса. Для решения этой проблемы рекомендуется применять динамическую (ленивую) загрузку:

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