Визуализация процесса на сайте - отображение движения по статусам

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

Мы можем указать различные стадии прохождения заявки, сверху и снизу можем указать ответственных лиц. Также при наведении на элемент показывается подсказка, а по клику - можно вызывать модальную форму.

Документация по элементу - https://falcon.web-automation.ru/docs/vyvod-dvizheniya-zayavki-po-statusam

Как реализовать

Используем компонент таблица с viewType=statusbar

CREATE PROCEDURE [dbo].[crud_watch_statusbar_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	-- SELECT 1
	select '1' name, 'Создание заявки' tooltip, 'far fa-file' icon, 1 done, 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '2' name, 'Проверка корректности' tooltip,  'fa fa-eye' icon, 1 done, 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '3' name, 'Передача диспетчеру' tooltip,  'far fa-hand-point-right' icon, 1 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '4' name, 'Поиск машины' tooltip,  'fas fa-car' icon, 1 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '5' name, 'Передача документов экспедитору' tooltip,  'fa fa-bars' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '6' name, 'Получение груза' tooltip,  'fab fa-wpforms' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '7' name,  'Поездка' tooltip, 'fas fa-car-side' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    union
    select '8' name,  'Передача груза клиенту' tooltip, 'far fa-smile-wink' icon, 0 done , 'birthday' formCode, 1 formItemID, 'Вывод некой формы, связанной со статусом' formTitle, '1' formBig  
    
	-- SELECT 2
	select 1

	-- SELECT 3
    select 'statusbar' viewType, 1 hideTitleCount, 'h3' headerTag
	
		
	-- 4 SELECT Footer data or kanban/gantt data
    select * from (
      select 'Клиент' name, 1 shift, 1 width, 0 [top] 
      union
      select 'Менеджер' name, 2 shift, 2 width, 1 [top]   
       union
      select 'Диспетчер' name, 4 shift, 2 width, 0 [top] 
      union
      select 'Экспедитор' name, 6 shift, 3 width, 1 [top] 
   )t1 
   order by shift -- order important
END

В SELECT 1 передаются данные по элементам (статусы), а в SELECT 4 передаются данные для постоения подписей сверху и снизу.

Другие модули

Рабочий стол в личном кабинете на сайте. Что видит пользователь в личном кабинете

Дашборд пользователя с фильтром по времени. Создание панели управления на сайте

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

Вывод полосок прогресса - отображение статуса процесса в личном кабинете

Вывод круговой диаграммы polarArea

Как отобразить гистограмму bar на странице

Графики в личном кабинете. Вывод графика типа line

Диаграмма радар на сайте - radar bar

Последние обновления

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

Суть подхода и история создания Falcon Space

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства