При автоматизации складского учета на предприятиях, работающих с наливными грузами, часто возникает задача наглядного отображения остатков. Простого списка цифр в отчете бывает недостаточно для быстрой оценки ситуации. Рассмотрим, как программными средствами 1С 8.3 создать интерактивный план склада, где уровень заполнения каждой емкости (бочки, танка или цистерны) отображается графически.
Самым гибким и современным способом является использование формата SVG (Scalable Vector Graphics) внутри стандартного реквизита формы ПолеHTMLДокумента. SVG представляет собой XML-документ, что позволяет нам манипулировать геометрическими фигурами как обычными строками или объектами 1С.
Разберем алгоритм реализации этого метода:
ПолеHTMLДокумента.ЗаписьXML для генерации кода «на лету» без сохранения временных файлов.Посмотрим на пример кода, который формирует одну емкость с уровнем заполнения:
Функция СформироватьКодSVG(ПроцентЗаполнения)
// Определяем высоту заполненной части (от 0 до 100 пикселей)
ВысотаЖидкости = ПроцентЗаполнения;
Y_Координата = 100 - ВысотаЖидкости;
ТекстSVG = "<svg width='150' height='150' xmlns='http://www.w3.org/2000/svg'>
|<!-- Контур бочки -->
|<rect x='10' y='10' width='80' height='100' stroke='black' fill='transparent' stroke-width='2'/>
|<!-- Уровень жидкости -->
|<rect x='10' y='" + Формат(10 + Y_Координата, "ЧГ=0") + "' width='80' height='" + Формат(ВысотаЖидкости, "ЧГ=0") + "' fill='blue'/>
|</svg>";
Возврат "<html><body>" + ТекстSVG + "</body></html>";
КонецФункции
Для создания полноценного плана склада мы можем использовать абсолютное позиционирование элементов <div> или вложенные элементы <g> внутри одного большого SVG-полотна, расставляя емкости согласно координатам из справочника.
Если задача требует отрисовки сотен объектов или добавления анимации (например, плавного перетекания жидкости), проанализируем возможности HTML5 Canvas API. Начиная с версии платформы 8.3.14, 1С использует современный движок WebKit, который отлично справляется с JavaScript-графикой.
Процесс реализации выглядит следующим образом:
ПолеHTMLДокумента загружается базовый шаблон с элементом <canvas>.Этот метод позволяет реализовать интерактивность. Например, при наведении курсора на емкость можно выводить всплывающее окно с точным весом и номенклатурой. Перехватить клик в 1С можно через событие ПриНажатии (обработка навигации по ссылке типа "e1cib/tank_id_123").
Рассмотрим нестандартный подход: использование объекта ГеографическаяСхема. Несмотря на название, этот объект можно использовать для любых планов и схем. Вместо карты мира мы загружаем макет склада в формате .shp или другом поддерживаемом графическом формате.
Основные преимущества этого метода:
ЗначенияПоказателей.Выясним, как программно изменить цвет емкости в зависимости от уровня:
Процедура ОбновитьЦветЕмкости(Схема, ИмяОбъекта, Процент)
ОбъектСхемы = Схема.Объекты[ИмяОбъекта];
Если Процент > 90 Тогда
ОбъектСхемы.ЦветФона = ЦветаСтиля.ЦветОсобогоТекста; // Критический уровень
Иначе
ОбъектСхемы.ЦветФона = Новый Цвет(0, 255 * (Процент/100), 0);
КонецЕсли;
КонецПроцедуры
Если план склада достаточно прост, разберем возможность использования объекта ГрафическаяСхема. Обычно в ней рисуют алгоритмы, но программно в нее можно добавлять элементы типа Декорация или Фигура.
Чтобы имитировать уровень заполнения, можно накладывать две фигуры друг на друга. Нижняя фигура (серый прямоугольник) служит фоном, а верхняя (синий прямоугольник) меняет свою высоту в зависимости от остатка. Свойство ZOrder (порядок отображения) позволит корректно разместить элементы.
Для создания максимально быстрого и легкого интерфейса проанализируем вариант с иконочными шрифтами. Вы можете создать собственный шрифт, где каждый символ (от «A» до «J») соответствует баку с уровнем заполнения от 0% до 100% с шагом 10%.
В 1С это реализуется предельно просто:
ТабличногоДокумента или в Надписи на форме выводим нужный символ, меняя его цвет и размер.Если визуализация должна быть частью печатной формы или сложного отчета, воспользуемся методом внедрения диаграмм в ячейки. В каждую ячейку ТабличногоДокумента можно вставить объект Рисунок с типом ТипРисункаТабличногоДокумента.Диаграмма.
Для отображения уровня жидкости лучше всего подходят следующие типы:
ТипДиаграммы.Полосковая (вертикальная ориентация).ТипДиаграммы.Измерительная (Gauge), если нужно показать процент на шкале.Проанализируем ситуацию: использование диаграмм внутри табличного документа позволяет легко масштабировать отчет. Мы можем вывести сетку 10x10 ячеек, каждая из которых будет представлять собой мини-график текущего состояния бака.
Важный нюанс: при выборе метода на базе ПоляHTMLДокумента всегда учитывайте версию платформы. Начиная с 8.3.14, использование WebKit позволяет применять CSS3-анимации, что даст возможность сделать интерфейс по-настоящему современным, добавив плавные переходы и градиенты для эффекта объема металлической емкости.
Таким образом, мы рассмотрели шесть различных подходов — от простых шрифтовых иконок до сложных систем на базе SVG и HTML5. Выбор конкретного метода зависит от требований к интерактивности, производительности и эстетике вашего решения в 1С.