Сбор информации об изменении состояния и вывод в виде направленного графа с помощью 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 –

См. также

Богатый редактор картинок 1С, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

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

Богатый редактор картинок 1С предназначен для обработки изображений в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015 62984 44 59

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

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

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

2400 руб.

29.06.2020 18849 26 6

Настройки управляемых форм (списков, объектов), заполнение реквизитов по условиям, контроль заполнения, доступ [Расширение]

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

Настройки упр.форм (списков, объектов), заполнение реквизитов по условиям, контроль заполнения, условное оформление, доступ.

2000 руб.

20.02.2018 20583 24 21

Редактор графов в 1С

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

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

1500 руб.

06.10.2020 10221 7 7

Гайд для создания форм на 1С

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

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

20.08.2024 16772 mrXoxot 43

121

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

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

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

27.05.2024 7337 smielka 37

100

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

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

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

27.12.2023 14780 913 elcoan 47

117

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

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

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

2 стартмани

10.04.2023 11907 162 acces969 31

124

Комментарии

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

Свернуть все

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

ОБ изменении

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

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

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

E-mail:

Автор:

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

Рейтинг: 1324

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

Публикация:

№ 1217135

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

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

Статистика:

Просмотры 2976

Загрузки 0

Рейтинг 13

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

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

Код открыт Да

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

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

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

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

Конфигурация Конфигурации 1cv8

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

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

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

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

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

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