Создание и визуализация блок-схемы при помощи HTML-документа

29.05.24

Разработка - Работа с интерфейсом

Обработка создает блок-схему в HTML-документе, данные для которой берутся из дерева значений.

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки для того, чтобы самостоятельно ее доработать для вашей базы данных. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в вашей базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование SM По подписке Купить один файл
Создание и визуализация блок-схемы при помощи HTML-документа:
.epf 14,93Kb
101
101
0 SM
Скачать
ZIP-Архив с HTML файлом
.zip 54,86Kb
67
67
0 SM
Скачать

Предыстория: 

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

Но на этом их просьбы не закончились, в этот блок они попросили привнести красок, добавить картинок, добавить стилизацию т.д.

По итогу анализа их запроса стало ясно, что обычная графическая карта тут не поможет, и тогда мне пришлось прибегнуть к HTML и CSS.

 

 

 

Подробное описание:

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

Вдобавок, в 90% примерах которые я находил, использовалось свойство "float".

Если коротко, это свойство заставляет один HTML элемент прижаться к краю и делает так, чтобы соседние элементы его обтекали.

(Свойство float детально: https://hcdev.ru/css/float/#_4)

Но оно сбивает центрирование, и вся схема становится прижата к краю.

Проблему решило: display: inline-table;

Данное свойство похоже на inline-block, но оно преобразовывает элементы не в блок, а в мини-таблицы.

 

Описание кода в 1С:

В обработке находятся несколько макетов:

 

 

     • СтилиИОбласть - основной макет, в котором содержится стили CSS, и область для программой вставки контента;

     •  ЯчейкаБезПодчиненныхЭлементов - макет с кодом ячейки у которой нет дочерних элементов;

     •  ЯчейкаСПодчиненнымиЭлементами - макет с кодом ячейки в которую будут помещены дочерние элементы;

     •  ПодстветкаПриНаведении - фрагмент CSS стилей отвечающих за HOVER-эффект.

 

 

Код по заполнению HTML документа:

&НаСервере
Процедура СформироватьHTMLНаСервере()
	
	Обработка = РеквизитФормыВЗначение("Объект");
	Дерево = РеквизитФормыВЗначение("СоставляющиеБлокСхемы");
	ШаблонОсновнаяОбласть = Обработка.ПолучитьМакет("СтилиИОбласть").ПолучитьТекст();  
	ШаблонСтилиНаведения = Обработка.ПолучитьМакет("ПодсветкаПриНаведении").ПолучитьТекст();
	ШаблонБезПодчиненныхЭлементов = Обработка.ПолучитьМакет("ЯчейкаБезПодчиненныхЭлементов").ПолучитьТекст();
	ШаблонСПодчиненнымиЭлементами = Обработка.ПолучитьМакет("ЯчейкаСПодчиненнымиЭлементами").ПолучитьТекст();
	
	КонтентHTML = СформироватьHTMLБлокСхемы(Дерево.Строки, ШаблонБезПодчиненныхЭлементов, ШаблонСПодчиненнымиЭлементами);
	БлокСхема = СтрЗаменить(ШаблонОсновнаяОбласть, "[СОДЕРЖИМОЕ ДЕРЕВА ЗНАЧЕНИЙ]", КонтентHTML);  
	
	БлокСхема = ?(ПодстветкаПриНаведении,
		СтрЗаменить(БлокСхема, "[ПОДСВЕТКА ПРИ НАВЕДЕНИИ]", ШаблонСтилиНаведения),
		СтрЗаменить(БлокСхема, "[ПОДСВЕТКА ПРИ НАВЕДЕНИИ]", ""));
	
КонецПроцедуры

&НаСервереБезКонтекста
Функция СформироватьHTMLБлокСхемы(Строки, ШаблонБезПодчиненных, ШаблонСПодчиненными)
	
	КонтентHTML = "";
	Для Каждого Строка Из Строки Цикл 
		
		Если Строка.Строки.Количество() > 0 Тогда
			КонтентHTML = КонтентHTML + ШаблонСПодчиненными;	
		Иначе
			КонтентHTML = КонтентHTML + ШаблонБезПодчиненных;	
		КонецЕсли;
		
		КонтентHTML = СтрЗаменить(КонтентHTML, "[ЗАГОЛОВОК]", Строка.Составляющая);
		
		АдресВХ = ПолучитьАдресВХКартинкиПоОбозначению(Строка.Иконка);
		Если АдресВХ = "" Тогда
			КонтентHTML = СтрЗаменить(КонтентHTML, "<img src=""[АДРЕС ВХ КАРТИНКИ]"" class=""stepImg"">", "");	
		Иначе
			КонтентHTML = СтрЗаменить(КонтентHTML, "[АДРЕС ВХ КАРТИНКИ]", АдресВХ);
		КонецЕсли;
		
		Если Строка.Строки.Количество() = 0 Тогда
			Продолжить;	 
		КонецЕсли;   
		
		КонтентHTML = СтрЗаменить(КонтентHTML, "[ДОЧЕРНИЕ ЭЛЕМЕНТЫ]",
			СформироватьHTMLБлокСхемы(Строка.Строки, ШаблонБезПодчиненных, ШаблонСПодчиненными));
		
	КонецЦикла;
	
	Возврат КонтентHTML;
		
КонецФункции 

&НаСервереБезКонтекста
Функция ПолучитьАдресВХКартинкиПоОбозначению(Обозначение) 
		
	Картинка = Неопределено;	
	Если Обозначение = "Символ" Тогда 	
		Картинка = БиблиотекаКартинок.Избранное;			
	ИначеЕсли Обозначение = "Персонал" Тогда 	
		Картинка = БиблиотекаКартинок.ВнешнийПользовательСистемыВзаимодействия;		
	ИначеЕсли Обозначение = "Группа" Тогда
		Картинка = БиблиотекаКартинок.ГрупповоеОбсуждение;
	ИначеЕсли Обозначение = "Куб" Тогда
		Картинка = БиблиотекаКартинок.ВнешнийИсточникДанныхКуб;
	ИначеЕсли Обозначение = "Документ" Тогда
		Картинка = БиблиотекаКартинок.Дендрограмма;
	Иначе	
		Возврат "";
	КонецЕсли;
		
	Возврат ПоместитьВоВременноеХранилище(Картинка);
	
КонецФункции

 

На самом деле в обработке (сделана на платформе 8.3.23.2040) нет ничего очень сложного, просто на сбор информации и поиска подходящего решения ушло много времени. И если, дорогие мои, кто-то из вас столкнется с подобной задачей, надеюсь, мое решение вам поможет.

Спасибо за внимание :)

Обработка Блок-схема ДеревоЗначений HTML

См. также

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    17358    23    4    

37

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    11959    781    elcoan    47    

109

Инструментарий разработчика Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

2 стартмани

10.04.2023    10411    158    acces969    31    

120

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    4379    kalyaka    4    

31

Работа с интерфейсом Платформа 1С v8.3 Платные (руб)

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

6000 руб.

18.01.2022    9210    1    2    

6

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 Бесплатно (free)

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

25.11.2021    10263    AtamanovYS    19    

143
Отзывы
2. SerVer1C 781 29.05.24 14:03 Сейчас в теме
Интересно!
Можете продемонстрировать отображение более широкого дерева (чтобы в каждой ветке было 3+ листьев) ?
DrAku1a; GrigoryYanshin; +2 Ответить
Остальные комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. Daulet777 29.05.24 13:41 Сейчас в теме
2. SerVer1C 781 29.05.24 14:03 Сейчас в теме
Интересно!
Можете продемонстрировать отображение более широкого дерева (чтобы в каждой ветке было 3+ листьев) ?
DrAku1a; GrigoryYanshin; +2 Ответить
3. GrigoryYanshin 66 29.05.24 14:27 Сейчас в теме
(2) На скриншоте 1 изображена карта в несколько веток.
Но важное НО! Если экран пользователя небольшой, то тут нужно уже адаптировать дерево под размеры, иначе будет как на скриншоте 2. От размеров экрана к сожалению или к счастью никуда не деться, это пожалуй главная особенность WEBa
Прикрепленные файлы:
11. Rafael-87 42 29.05.24 16:53 Сейчас в теме
(3) По-моему css имеет свойство размеров блоков, адаптивных к размеру экрана, но конечно некрасиво если маленьким будет, надо как то переносить, чтобы ветки второго уровня следовали за первым
12. GrigoryYanshin 66 29.05.24 18:00 Сейчас в теме
(11) Я тоже думал об этом, но проблема в том что так может быть нарушена Иерархия у элементов.
И если один под другим будет находиться, то сложится впечатление что, например, должность "Директор" находится ниже чем "Кладовщик"

Само управление этими ветками, дело достаточно проблематичное, и скорее всего при изменении ширины экрана пришлось бы менять сам HTML

Но повторюсь, вся блок схема должна была выводиться в отдельной области, то было выделено необходимое количество места, для того чтобы пользователь не "листал" вверх-вниз влево-вправо эту блок-схему
4. Rafael-87 42 29.05.24 16:02 Сейчас в теме
В 8.3.18.1334 выходит ошибка при сформировать: К сожалению произошла непредвиденная ошибка
6. GrigoryYanshin 66 29.05.24 16:19 Сейчас в теме
(4) Скорее всего ошибка платформы.
Я проверял на платформах 8.3.21, 8.3.22.1923 и 8.3.23.2040 и на разных устройствах, у меня все работало без проблем
7. Rafael-87 42 29.05.24 16:20 Сейчас в теме
(6) Да удалось исправить, сформировалось
10. GrigoryYanshin 66 29.05.24 16:23 Сейчас в теме
(7) Но в любом случае, спасибо за обратную связь
5. Rafael-87 42 29.05.24 16:14 Сейчас в теме
Если б, еще они перемещались по области, было бы супер!
GrigoryYanshin; +1 Ответить
8. GrigoryYanshin 66 29.05.24 16:22 Сейчас в теме
(5) Согласен, но когда нам постановили задачу, блок-схема должна была быть статичной.
То есть один раз заполнили ее и все, она не изменяется.
Возможно в будущем доработаю и добавлю перемещение по области
9. Rafael-87 42 29.05.24 16:23 Сейчас в теме
(8) Очень интересна эта тема, если получится будет основой для другой идеи
GrigoryYanshin; +1 Ответить
13. xlmel 29.05.24 18:15 Сейчас в теме
Я для таких диаграмм предпочитаю использовать Google charts orgchart. Есть шаблон страницы, из базы передал данные в таблицу, добавил настройки и вывел в поле HTML. Используя настройки можно включить сворачивание веток, каждую карточку сделать блоком HTML, то есть выводить аватары. Имеет 3 варианта размера. Если заморочиться, то можно и 2 CSS создать для обычных веток и выделенных.
GrigoryYanshin; siamagic; +2 Ответить
14. maksa2005 537 30.05.24 08:14 Сейчас в теме
чет подобное искал и хотел сделать, но руки не дошли. Вы молодец!
15. GrigoryYanshin 66 30.05.24 09:21 Сейчас в теме
(14) Спасибо за обратную связь!
16. malikov_pro 1307 30.05.24 23:11 Сейчас в теме
(5) оставлю ссылку на динамический вариант
https://github.com/bumbeishvili/org-chart

Сам формировал чз python. Думаю собрать через передачу параметра в поле HTML документа реально.
JohnyDeath; GrigoryYanshin; Rafael-87; +3 Ответить
17. dimanich70 816 03.06.24 09:40 Сейчас в теме
(16) А как твою тему прикрутить к 1С. Может обработка есть готовая с пояснениями?
18. Vinzor 100 05.06.24 14:21 Сейчас в теме
Добрый день.
А как ограничить ширину ячейки, и чтобы текст не терялся, а переносился на новую строку ?
19. Vinzor 100 05.06.24 17:07 Сейчас в теме
Оставьте свое сообщение