Сбор информации об изменении состояния и вывод в виде направленного графа с помощью vis.js

29.03.20

В публикации опишу схему данных сбора истории изменения реквизита и вывода в виде графа.

Вводные:

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

2. Конфигурация на базе УТ 11

Решение:

Структура данных:

Добавил регистр сведений "ис_СостоянияЗаказовКлиентов", периодический, независимый

Измерения: Заказ

Ресурсы: Состояние, сделал через тип строка, т.к. планирую переделывать для состояний вынесенных в другое поле.

Запись данных в РС

Записываю при изменении РС СостоянияЗаказовКлиентов

Менеджер набора записей

&После("ПриЗаписи")
Процедура ис_ПриЗаписи(Отказ, Замещение)
	
	Для каждого СтрНЗ Из ЭтотОбъект Цикл
		РегистрыСведений.ис_СостоянияЗаказовКлиентов.ЗаписатьИзменениеСостояния(СтрНЗ.Заказ, СтрНЗ.Состояние);	
	КонецЦикла;
		
КонецПроцедуры

Проверка, запись изменений

Процедура ЗаписатьИзменениеСостояния(Знач Заказ, Знач Состояние) Экспорт
	
	Запрос = Новый Запрос;
	Запрос.Текст = "ВЫБРАТЬ
	|	ис_СостоянияЗаказовКлиентовСрезПоследних.Период КАК Период,
	|	ис_СостоянияЗаказовКлиентовСрезПоследних.Заказ КАК Заказ,
	|	ис_СостоянияЗаказовКлиентовСрезПоследних.Состояние КАК Состояние
	|ИЗ
	|	РегистрСведений.ис_СостоянияЗаказовКлиентов.СрезПоследних(,
	|			Заказ = &Заказ) КАК ис_СостоянияЗаказовКлиентовСрезПоследних";
	Запрос.УстановитьПараметр("Заказ", Заказ);
	РезультатЗапроса = Запрос.Выполнить();
	
	Если НЕ РезультатЗапроса.Пустой() Тогда
		Выборка = РезультатЗапроса.Выбрать();
		Выборка.Следующий();
		
		Если Строка(Выборка.Состояние) = Состояние Тогда
			Возврат;
		КонецЕсли;
	КонецЕсли;
	
	МЗ = РегистрыСведений.ис_СостоянияЗаказовКлиентов.СоздатьМенеджерЗаписи();
	МЗ.Заказ = Заказ;
	МЗ.Период = ТекущаяДата();
	МЗ.Состояние = Состояние;
	МЗ.Записать(Истина);
	
КонецПроцедуры

Формирование отчета

В качестве движка отрисовки графа использую vis.js, https://almende.github.io/vis/, документация по части network https://almende.github.io/vis/docs/network/, примеры по части network https://visjs.github.io/vis-network/examples/

Используем макет в котором храним заготовку HTML страницы, используется загрузка js с внешнего ресурса https://unpkg.com

Макет

<!doctype html>
<html>
<head>
  <title>Network</title>
  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
  <style type="text/css">
    #mynetwork {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
  // create an array with nodes
      
var container = document.getElementById("mynetwork");

var options = {
    nodes: {
      shape: "dot",
      scaling: {
        label: {
          min: 8,
          max: 20
        }
      }
    }
  };

var data = {};  

var network = new vis.Network(container, data, options);

  
function draw(nodes_json, edges_json) {
	var nodes = new vis.DataSet(JSON.parse(nodes_json));

	// create an array with edges
	var edges = new vis.DataSet(JSON.parse(edges_json));

	// create a network
	
	var data = {
	nodes: nodes,
	edges: edges
	};

	network.setData(data);
}
</script>
</body>
</html>

Для работы с HTML документом использую наработки из статьи //infostart.ru/public/398366/

Загрузку макета делаю при создании на сервере, при нажатии кнопки сформировать отправляю запрос на перерисовку.

Основные процедура и функция

&НаКлиенте
Процедура Сформировать(Команда)
	
	СтруктураДанные = СформироватьНаСервере();
	ОкноПервогоБраузера.draw(СтруктураДанные.СтрокаВершины, СтруктураДанные.СтрокаРебра);
	
КонецПроцедуры

&НаСервере
Функция СформироватьНаСервере()
	
	ВыборкаЗаказ = ПолучитьДанные();
		
	КоличествоЗаказов = ВыборкаЗаказ.Количество();
	
	ТЗ_СостоянияВершины = Новый ТаблицаЗначений;
	ТЗ_СостоянияВершины.Колонки.Добавить("Состояние");
	ТЗ_СостоянияВершины.Колонки.Добавить("Время");
	
	ТЗ_СостоянияРебра = Новый ТаблицаЗначений;
	ТЗ_СостоянияРебра.Колонки.Добавить("СостояниеНачальное");
	ТЗ_СостоянияРебра.Колонки.Добавить("Состояние");
	ТЗ_СостоянияРебра.Колонки.Добавить("Количество");
	
	СформироватьВершиныИРебра(ВыборкаЗаказ, ТЗ_СостоянияВершины, ТЗ_СостоянияРебра);
	
	//--
	
	ТЗ_СостоянияВершины.Свернуть("Состояние", "Время");
	Для каждого ТЗ_СВ Из ТЗ_СостоянияВершины Цикл
		 ТЗ_СВ.Время = ТЗ_СВ.Время / КоличествоЗаказов;
	КонецЦикла;
	
	ТЗ_СостоянияВершины.Индексы.Добавить("Состояние");
	
	ТЗ_СостоянияРебра.Свернуть("СостояниеНачальное, Состояние", "Количество");
	
	//--
		
	СтрокаВершины = В_JSON(СформироватьМассивВершин(ТЗ_СостоянияВершины));
	СтрокаРебра = В_JSON(СформироватьмассивРебер(ТЗ_СостоянияВершины, ТЗ_СостоянияРебра));
	
	СтруктураДанные = Новый Структура;
	СтруктураДанные.Вставить("СтрокаВершины", СтрокаВершины);
	СтруктураДанные.Вставить("СтрокаРебра", СтрокаРебра);
		
	Возврат СтруктураДанные;
	
КонецФункции

Получаю изменения за период, из них вычисляю заказы и по ним запрашиваю изменения.

В качестве ключей использую индексы строк, т.к. для vis.js нужны числовые ключи.

Получение и обработка данных

Параметр value влияет на размер ребра/вершины, параметр title отображается при наведении на элемент.

Итог:

Относительно просто можно сформировать граф с визуальными дополнениями по данным системы.

Благодарю за внимание.

Буду рад конструктивной критике.

&НаСервере
Функция ПолучитьДанные()
	
	Запрос = Новый Запрос;
	Запрос.Текст = "ВЫБРАТЬ РАЗЛИЧНЫЕ
	               |	ис_СостоянияЗаказовКлиентов.Заказ КАК Ссылка
	               |ПОМЕСТИТЬ втЗаказы
	               |ИЗ
	               |	РегистрСведений.ис_СостоянияЗаказовКлиентов КАК ис_СостоянияЗаказовКлиентов
	               |ГДЕ
	               |	ис_СостоянияЗаказовКлиентов.Период МЕЖДУ &ДатаНачала И &ДатаОкончания
	               |;
	               |
	               |////////////////////////////////////////////////////////////////////////////////
	               |ВЫБРАТЬ
	               |	ис_СостоянияЗаказовКлиентов.Период КАК Период,
	               |	ис_СостоянияЗаказовКлиентов.Заказ КАК Заказ,
	               |	ис_СостоянияЗаказовКлиентов.Состояние КАК Состояние
	               |ИЗ
	               |	РегистрСведений.ис_СостоянияЗаказовКлиентов КАК ис_СостоянияЗаказовКлиентов
	               |ГДЕ
	               |	ис_СостоянияЗаказовКлиентов.Заказ В
	               |			(ВЫБРАТЬ
	               |				втЗаказы.Ссылка КАК Ссылка
	               |			ИЗ
	               |				втЗаказы КАК втЗаказы)
	               |
	               |УПОРЯДОЧИТЬ ПО
	               |	Период
	               |ИТОГИ ПО
	               |	Заказ";
	Запрос.УстановитьПараметр("ДатаНачала", ПериодЗапроса.ДатаНачала);
	Запрос.УстановитьПараметр("ДатаОкончания", ПериодЗапроса.ДатаОкончания);
	РезультатЗапроса = Запрос.Выполнить();
	
	ВыборкаЗаказ = РезультатЗапроса.Выбрать(ОбходРезультатаЗапроса.ПоГруппировкам, "Заказ");

	Возврат ВыборкаЗаказ;
	
КонецФункции

&НаСервере
Процедура СформироватьВершиныИРебра(ВыборкаЗаказ, ТЗ_СостоянияВершины, ТЗ_СостоянияРебра)
	
	Пока ВыборкаЗаказ.Следующий() Цикл
		
		ТекущееСостояние = Неопределено;
		ТекущийПериод = Дата(1,1,1);
		
		ВыборкаСостояния = ВыборкаЗаказ.Выбрать();
		
		Пока ВыборкаСостояния.Следующий() Цикл
			
			Если ТекущийПериод <> Дата(1,1,1) Тогда
				РазницаПериод = (ВыборкаСостояния.Период - ТекущийПериод) / 60;
			Иначе
				РазницаПериод = 0;
			КонецЕсли;
			
			Если ЗначениеЗаполнено(ТекущееСостояние) 
				И НЕ ТекущееСостояние = ВыборкаСостояния.Состояние
				Тогда
				
				СтрР = ТЗ_СостоянияРебра.Добавить();
				СтрР.СостояниеНачальное = ТекущееСостояние;
				СтрР.Состояние = ВыборкаСостояния.Состояние;
				СтрР.Количество = 1;
				
				СтрВ = ТЗ_СостоянияВершины.Добавить();
				СтрВ.Состояние = ТекущееСостояние;
				СтрВ.Время = РазницаПериод;
				
				//-- Добавляю конечный узел
				СтрВ = ТЗ_СостоянияВершины.Добавить();
				СтрВ.Состояние = ВыборкаСостояния.Состояние;
				
			КонецЕсли;
			
			ТекущееСостояние = ВыборкаСостояния.Состояние;
			ТекущийПериод = ВыборкаСостояния.Период;
		КонецЦикла;
		
	КонецЦикла;
	
КонецПроцедуры

&НаСервере
Функция СформироватьМассивВершин(ТЗ_СостоянияВершины)
	
	МассивВершины = Новый Массив;
	
	Для каждого СтрВ Из ТЗ_СостоянияВершины Цикл
		
		СоответствиеВершины = Новый Соответствие;
		СоответствиеВершины.Вставить("id", ТЗ_СостоянияВершины.Индекс(СтрВ) + 1);  
		СоответствиеВершины.Вставить("label", Строка(СтрВ.Состояние));
		СоответствиеВершины.Вставить("value", СтрВ.Время);
		СоответствиеВершины.Вставить("title", СтрВ.Время);
		
		МассивВершины.Добавить(СоответствиеВершины);
		
	КонецЦикла;
	
	Возврат МассивВершины

	
КонецФункции

&НаСервере
Функция СформироватьмассивРебер(ТЗ_СостоянияВершины, ТЗ_СостоянияРебра)
	
	МассивРебра = Новый Массив;
	
	Для каждого СтрР Из ТЗ_СостоянияРебра Цикл
		
		СоответствиеРебра = Новый Соответствие;
		
		ПараметрыОтбора = Новый Структура;
		ПараметрыОтбора.Вставить("Состояние", СтрР.СостояниеНачальное);
		нСтроки = ТЗ_СостоянияВершины.НайтиСтроки(ПараметрыОтбора);
		
		СоответствиеРебра.Вставить("from", ТЗ_СостоянияВершины.Индекс(нСтроки[0]) + 1);  
		
		ПараметрыОтбора = Новый Структура;
		ПараметрыОтбора.Вставить("Состояние", СтрР.Состояние);
		нСтроки = ТЗ_СостоянияВершины.НайтиСтроки(ПараметрыОтбора);
		
		СоответствиеРебра.Вставить("to", ТЗ_СостоянияВершины.Индекс(нСтроки[0]) + 1);
		
		//--
		
		СоответствияСтрокиПараметры = Новый Соответствие;
		СоответствияСтрокиПараметры.Вставить("enabled", Истина);
		СоответствияСтрокиПараметры.Вставить("type", "arrow");
		
		СоответствияСтроки = Новый Соответствие;
		СоответствияСтроки.Вставить("to", СоответствияСтрокиПараметры);
		
		СоответствиеРебра.Вставить("value", СтрР.Количество); 
		СоответствиеРебра.Вставить("title", СтрР.Количество);
		
		СоответствиеРебра.Вставить("arrows", СоответствияСтроки);
		
		//--
		
		МассивРебра.Добавить(СоответствиеРебра);
		
	КонецЦикла;
	
	Возврат МассивРебра;
		
КонецФункции

+13 –

См. также

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Системный администратор Программист Платформа 1С v8.3 Управляемые формы 1C:Бухгалтерия Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016 55614 17 23

Управление дашбордами

Работа с интерфейсом Программист Платформа 1С v8.3 1C:Бухгалтерия 1С:ERP Управление предприятием 2 Платные (руб)

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

2400 руб.

29.06.2020 19930 28 6

Дизайн Гайд для создания форм на 1С. Когда и как использовать различные элементы, примеры и антипримеры по использованию

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

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

20.08.2024 23398 mrXoxot 44

130

Прогресс-бар в поле динамического списка

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

Пример простого и симпатичного прогресс-бара в динамическом списке, без картинок, используя редактирование запроса.

27.05.2024 11939 smielka 37

105

Новогоднее оформление для 1С

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

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

27.12.2023 18337 1228 elcoan 53

125

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Программист Платформа 1С v8.3 1C:Бухгалтерия Абонемент ($m)

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

3 стартмани

10.04.2023 12879 167 acces969 31

126

Модель состояния для MVC

Работа с интерфейсом Программист Платформа 1С v8.3 1C:Бухгалтерия Абонемент ($m)

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

1 стартмани

05.07.2022 7942 kalyaka 6

[Расширение] Смена стиля оформления интерфейса

Работа с интерфейсом Программист Пользователь Платформа 1С v8.3 8.3.14 1C:Бухгалтерия 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Абонемент ($m)

Ещё с времен платформы 8.3.13 можно изменять цвет стилей интерфейса главного окна. Данное расширение позволит вам выбрать из подготовленных десятка стилей на свой вкус.

1 стартмани

01.07.2022 26846 423 rpgshnik 69

101

Комментарии

Подписаться на ответы Инфостарт бот

Свернуть все

1. for_sale 979 30.03.20 07:26 Сейчас в теме

ОБ изменении

2. malikov_pro 1328 30.03.20 09:11 Сейчас в теме

(1) Поправил, благодарю

Оставьте свое сообщение

E-mail:

Автор:

Александр Маликов (malikov_pro)

Рейтинг: 1328

Для получения уведомлений о новых публикациях автора подключите телеграм бот: Инфостарт бот

Публикация:

№ 1217135

Создание 29.03.20 15:00

Обновление 29.03.20 15:00

Статистика:

Просмотры 3092

Загрузки 0

Рейтинг 13

Комментарии 2

Характеристики:

Код открыт Да

Рубрики Работа с интерфейсом Языки и среды

Кому Программист

Тип файла Нет файла

Платформа Платформа 1С v8.3

Конфигурация 1C:Бухгалтерия

Операционная система Не имеет значения

Страна Не имеет значения

Отрасль Не имеет значения

Налоги Не имеет значения

Вид учета Не имеет значения

Доступ к файлу Бесплатно (free)