Операции редактирования информационной панели

Основными действиями при выполнении редактирования информационной являются:

  • выбор или создание виджетов для использования на данной панели;

  • создание системных виджетов;

  • организация размещения виджетов на поле информационной панели, работа со слоями;

  • настройка отображения виджетов;

  • настройка взаимосвязи виджетов.

Вкладка «Конструктор»

Вкладка «Структура»
Примечание
В более ранних версиях Системы вкладка «Вид» называлась «Виджеты».

В режиме редактирования панели в области настроек перейдите на вкладку «Структура» (Рисунок «Вкладка «Структура» в области настроек панели»). На данной вкладке расположен список виджетов (системных и аналитических), выведенных на текущую вкладку панели. По умолчанию виджеты расположены в порядке добавления снизу вверх. Если виджет типа «Контейнер» содержит в себе другие виджеты, то они отображаются в древовидной структуре.

Рисунок 22. Вкладка «Структура» в области настроек панели

Вкладка «Структура» в области настроек панели

На данной вкладке доступны следующие действия:

  • перемещение виджета – наведите курсор мыши на виджет, нажмите на кнопку или на наименование виджета и, удерживая кнопку (или наименование виджета), переместите виджет вверх или вниз по структуре (Рисунок «Кнопка для перемещения объекта на вкладке «Структура»). Место виджета в структуре определяет позицию z-индекса виджета и его дочерних элементов (если они есть). Чем выше виджет в списке, тем z-индекс выше. Перекрывающие виджеты с большим значением z-индекса будут накладываться поверх элементов с меньшим z-индексом;

    Рисунок 23. Кнопка для перемещения объекта на вкладке «Структура»

    Кнопка для перемещения объекта на вкладке «Структура»

  • блокировка виджета – наведите курсор мыши на виджет и нажмите на кнопку (Рисунок «Кнопка для блокировки виджета на вкладке «Структура»). Виджет заблокируется, станут недоступными следующие операции:

    • изменение размеров виджета;

    • изменение расположения виджета;

    • открытие контекстного меню виджета.

    Рисунок 24. Кнопка для блокировки виджета на вкладке «Структура»

    Кнопка для блокировки виджета на вкладке «Структура»

    У заблокированного виджета на вкладке «Структура» отображается кнопка , а в области редактирования панели – пиктограмма . Для разблокировки виджета нажмите на кнопку на вкладке «Структура».

  • скрытие виджета – наведите курсор мыши на виджет и нажмите на кнопку . Виджет скроется в области редактирования панели, и на вкладке «Структура» отобразится кнопка , наименование виджета станет бледным цветом. Для разблокировки виджета нажмите на кнопку ;

  • фокусировка виджета – в списке виджетов на вкладке «Структура» нажмите на необходимый виджет. Виджет станет в фокусе, т.е. произойдут следующие действия:

    • на вкладке «Структура» виджет будет выделен (отобразится серая подложка под наименованием);

    • в области редактирования панели виджет будет выделен, отобразятся наименование виджета, кнопка контекстного меню и кнопка перемещения виджета;

    • при переходе на вкладку «Вид» отобразятся настройки выделенного виджета.

На рисунке ниже представлены функциональные возможности на вкладке «Структура» (Рисунок «Функциональные возможности на вкладке «Структура»).

Рисунок 25. Функциональные возможности на вкладке «Структура»


Вкладка «Вид»

В режиме редактирования панели в области настроек перейдите на вкладку «Вид». На данной вкладке отображаются настройки панели или виджета, находящегося в области редактирования информационной панели. Набор настроек зависит от выбранного объекта в области редактирования информационной панели.

Настройки информационной панели

Нажмите на свободное место в области редактирования панели (в которой отсутствуют виджеты) или на свободное место в области вкладок панели и перейдите на вкладку «Вид». Отобразятся настройки внешнего вида информационной панели (Рисунок «Настройки информационной панели на вкладке «Вид»). Над блоками настроек отображается тип редактируемого объекта: «Информационная панель».

Рисунок 26. Настройки информационной панели на вкладке «Вид»

Настройки информационной панели на вкладке «Вид»

По умолчанию блоки настроек панели свернуты. Нажмите на кнопку , отобразится блок необходимой настройки. Для панели доступны следующие блоки:

  • блок «Фон»:

    • «Тип» – выберите тип фона:

      • – заливка;

      • – градиент.

    • «Цвет» – поле доступно при выборе в поле «Фон» значения (заливка). Выберите цвет для фона из палитры;

    • «Цвета» – поле доступно при выборе в поле «Фон» значения (градиент). Выберите цвета для фона из палитры. Нажмите на кнопку , чтобы поменять цвета местами;

    • «Угол» – поле доступно при выборе в поле «Фон» значения (градиент). Выберите направление градиента:

      • – сверху вниз;

      • – слева направо;

      • – с правого верхнего угла в левый нижний;

      • – с левого верхнего угла в нижний правый.

  • блок «Заголовок»:

    Примечание
    Параметры, указанные в настройках блока «Заголовок», будут применены при просмотре панели по прямой ссылке.
    • «Отображение» – передвиньте переключатель для отображения заголовка информационной панели при просмотре панели по прямой ссылке;

    • «Шрифт» – выберите из выпадающего списка шрифт. По умолчанию установлено значение «PT Root UI»;

    • «Начертание» – выберите начертание при необходимости:

      • – полужирный;

      • – курсив;

      • – подчеркнутый.

    • «Размер» – выберите из выпадающего списка необходимый размер;

    • «Цвет текста» – выберите цвет текста заголовка из палитры;

    • «Цвет фона» – выберите цвет фона заголовка из палитры.

  • блок «Вкладки»:

    • «Расположение» – выберите из выпадающего списка тип расположения вкладок;

    • «Позиция» – поле доступно при выборе в поле «Расположение» значения «Слева» или «Справа». Выберите позицию расположения названий вкладок:

      • – вертикально;

      • – горизонтально.

    • «Шрифт» – выберите из выпадающего списка шрифт. По умолчанию установлено значение «PT Root UI»;

    • «Начертание» – выберите начертание при необходимости:

      • – полужирный;

      • – курсив;

      • – подчеркнутый.

    • «Размер» – выберите из выпадающего списка необходимый размер

    • «Цвет активной» – выберите цвет для названия активной вкладки из палитры;

    • «Цвет неактивной» – выберите цвет для названия неактивной вкладки из палитры;

    • «Цвет линии» – выберите цвет для линии под названием активной вкладки из палитры;

    • «Цвет фона» – выберите цвет для фона области вкладок из палитры.

На рисунке ниже представлена настройка информационной панели на вкладке «Вид» (Рисунок «Настройка информационной панели на вкладке «Вид»).

Рисунок 27. Настройка информационной панели на вкладке «Вид»


Настройки виджетов

Нажмите на необходимый виджет в области редактирования панели или в области настроек панели на вкладке «Структура». Перейдите на вкладку «Вид», отобразятся настройки внешнего вида выбранного виджета (Рисунок «Настройки виджета на вкладке «Вид»). Над блоками настроек отображается тип виджета.

Рисунок 28. Настройки виджета на вкладке «Вид»

Настройки виджета на вкладке «Вид»

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

  • «Настройки объекта»:

    • «Размер по горизонтали» – поле доступно для виджета, находящегося внутри контейнера. Выберите из выпадающего списка значение: «Растянуть по контейнеру» (установлено по умолчанию) или «Фиксированный»;

    • «Размер по вертикали» – поле доступно для виджета, находящегося внутри контейнера. Выберите из выпадающего списка значение: «Растянуть по контейнеру» (установлено по умолчанию) или «Фиксированный»;

    • «Отступы по горизонтали» – поле доступно для всех виджетов, кроме виджета типа «Тренд». Введите значение, определяющее отступ от края виджета до его содержимого по горизонтали;

    • «Отступы по вертикали» – поле доступно для всех виджетов, кроме виджета типа «Тренд». Введите значение, определяющее отступ от края виджета до его содержимого по вертикали.

  • блок «Фон» (блок доступен для всех виджетов, кроме виджета типа «Тренд»):

    • «Скругление» – передвиньте ползунок, регулирующий скругление границ виджета;

    • «Тип» – выберите фон для виджета:

      • – заливка;

      • – изображение. При выборе значения отображается поле, в которое загрузите файл для фона в формате .jpeg или .png.

    • «Цвет» – поле доступно при выборе в поле «Фон» значения (заливка). Выберите цвет для фона из палитры;

    • «Тень» – передвиньте переключатель для отображения тени границ виджета;

    • «Разделитель в заголовке» – поле доступно для всех виджетов, кроме виджета типа «Тренд» и « HTML». Передвиньте переключатель для отображения разделителя между названием виджета и его содержимым.

На рисунке ниже представлена настройка виджета на вкладке «Вид» (Рисунок «Настройка виджета на вкладке «Вид»).

Рисунок 29. Настройка виджета на вкладке «Вид»


Настройки системных виджетов «Кнопка» и «Контейнер» на вкладке «Вид» описаны в п. Системный виджет «Кнопка», Системный виджет «Контейнер» соответственно. Для системного виджета «Фильтр» настройки на вкладке «Вид» не предусмотрены.

Область редактирования информационной панели
Организация размещения виджетов

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

Визуальное выделение виджета в области редактирования панели:

При компоновке панели можно выполнить следующие действия:

  • переместить виджет – нажмите на виджет, отобразится синяя подложка с кнопкой в левом углу. Нажмите на кнопку и, удерживая ее, переместите виджет в необходимое место в области редактирования панели;

  • изменить размеры виджета – нажмите на виджет, а затем наведите курсор на одну из границ виджета:

    • при наведении курсора мыши на верхнюю или нижнюю границу отобразится кнопка , с помощью которой измените высоту виджета;

    • при наведении курсора мыши на верхнюю или нижнюю границу отобразится кнопка , с помощью которой измените ширину виджета;

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

Изменение размера и организации размещения виджетов представлено на рисунке ниже (Рисунок «Изменение размера и организации размещения виджетов»).

Рисунок 33. Изменение размера и организации размещения виджетов


На рисунке (Рисунок «Информационная панель, состоящая из аналитических и системных виджетов») приведена информационная панель, состоящая из нескольких аналитических и системных виджетов. Операциями изменения положения и размера получены необходимые пропорции виджетов и вид информационной панели.

Рисунок 34. Информационная панель, состоящая из нескольких аналитических и системных виджетов

Информационная панель, состоящая из нескольких аналитических и системных виджетов

Панель вкладок

В режиме редактирования информационной панели реализован инструмент по управлению элементами – панель вкладок (Рисунок «Информационная панель с двумя вкладками»).

Рисунок 35. Информационная панель с двумя вкладками

Информационная панель с двумя вкладками

При создании панели в режиме редактирования по умолчанию отображается панель вкладок с одной вкладкой (Рисунок «Информационная панель с одной вкладкой по умолчанию в режиме редактирования»). В режиме просмотра вкладка не отображается.

Рисунок 36. Информационная панель с одной вкладкой по умолчанию в режиме редактирования

Информационная панель с одной вкладкой по умолчанию в режиме редактирования

Для добавления новой вкладки в режиме редактирования панели нажмите на кнопку . После нажатия на кнопку отображается новая вкладка с наименованием по умолчанию «Вкладка» (Рисунок «Добавление новой вкладки в режиме редактирования панели»). Вкладка отображается черным цветом как активная вкладка. Если настроены две или более вкладок в панели, то они отображаются в режиме просмотра.

Рисунок 37. Добавление новой вкладки в режиме редактирования панели

Добавление новой вкладки в режиме редактирования панели

Для переименования вкладки в режиме редактирования дважды нажмите на наименование вкладки и введите необходимое наименование (Рисунок «Переименование вкладки»).

Рисунок 38. Переименование вкладки

Переименование вкладки

Для перемещения вкладки в режиме редактирования переместите вкладку с помощью drag-and-drop.

Для клонирования вкладки нажмите на кнопку рядом с наименованием вкладки и в выпадающем списке выберите пункт «Клонировать» (Рисунок «Клонирование вкладки»). Создается копия вкладки – в наименование добавляется слово «(клон)», все виджеты добавляются с вкладки оригинала на копию вкладки как экземпляр виджета.

Рисунок 39. Клонирование вкладки

Клонирование вкладки

Доступна настройка отображения вкладок в области настроек на вкладке «Вид», подробное описание настроек приведено в п. Вкладка «Вид».

Для удаления вкладки нажмите на кнопку рядом с наименованием вкладки и в выпадающем списке выберите пункт «Удалить» (Рисунок «Удаление вкладки»). Откроется окно с сообщением: «Вы действительно хотите удалить вкладку?». Нажмите на кнопку «Удалить», вкладка и все экземпляры виджетов, расположенные на этой вкладки информационной панели, удалятся.

Рисунок 40. Удаление вкладки

Удаление вкладки

Настройка связи виджетов

Связь виджетов позволяет реализовать единство фильтрации выводимых в виджеты данных. Каждая связь реализуется выбором двух связываемых полей в связываемых виджетах. Например, есть несколько виджетов, отображающих различную информацию из разных источников. В каждом есть поле «Дата». Можно вывести их все на одну аналитическую панель и связать по данному полю. В результате будет достигнута связанность данных за счет того, что фильтрация значений по дате, введенной в любом из виджетов, будет применена ко всем остальным (даже если они явно не выводят в интерфейс значения дат).

Например, необходимо реализовать аналитическую панель следующего вида (Рисунок «Аналитическая панель с фильтрами»):

  1. область табличных виджетов (1), используемых как фильтры (по датам данных и названию организации);

  2. области виджетов диаграмм (2, 3), отображающих основные данные, к которым применяются фильтры из области (1).

Рисунок 41. Аналитическая панель с фильтрами

Аналитическая панель с фильтрами

Виджеты, основанные на одной и той же модели данных, при включении в информационную панель будут связаны сразу, без каких-либо дополнительных настроек, т.к. в их основе одни и те же данные. Для связи же виджетов из разных моделей настройте условия, предполагающие явное указание ключевых полей.

Чтобы перейти в интерфейс настройки связей, нажмите на кнопку «Настройка связи» в интерфейсе редактирования информационной панели (Рисунок «Кнопка «Настройка связи» для перехода в интерфейс настройки и редактирования связей»).

Рисунок 42. Кнопка «Настройка связи» для перехода в интерфейс настройки и редактирования связей

Кнопка «Настройка связи» для перехода в интерфейс настройки и редактирования связей

Интерфейс настройки связей виджетов представлен на рисунке (Рисунок «Интерфейс настройки связей виджетов»). Выделенные на рисунке области:

  1. список виджетов, включенных в информационную панель (1);

  2. схема связей виджетов (2);

  3. список реализованных связей (3) и возможности вызова операций добавления новой связи или удаления выбранных существующих.

Рисунок 43. Интерфейс настройки связей виджетов

Интерфейс настройки связей виджетов

Для настройки новой связи виджетов, нажмите на кнопку «Добавить». Интерфейс настройки новой связи приведен на рисунке (Рисунок «Интерфейс настройки новой связи виджетов»). На рисунке выделены:

  1. кнопки «Добавить» и «Отменить» для сохранения или отмены сделанных настроек (1);

  2. область выбора связываемых виджетов (2);

  3. область выбора полей связываемых виджетов, реализующих данную связь (3).

Рисунок 44. Интерфейс настройки новой связи виджетов

Интерфейс настройки новой связи виджетов

После добавления новая связь виджетов отобразится на схеме связей (см. п. 2, Рисунок «Интерфейс настройки новой связи виджетов»). Для одной и той же пары виджетов можно таким образом создать несколько связей (с использованием разных полей). Количество созданных связей двух виджетов отображается на схеме цифрой на линии связи.

Добавление связи виджетов представлено на рисунке ниже (Рисунок «Добавление связи виджетов»).

Рисунок 45. Добавление связи виджетов


Рядом с названиями полей отображаются пиктограммы, обозначающие типы полей:

  • – числовое значение;

  • – строка/логическое;

  • – дата;

  • – иерархия.

В результате будут образованы два независимых блока связей виджетов, например:

  • виджет «МИС.Календарь» связывает через себя все виджеты диаграмм по полям дат;

  • виджет «МИС.Выбор ЛПУ» связывает через себя все виджеты диаграмм по названию организации.

Связи будут работать следующим образом:

Примечание
Если в составе информационной панели были связанные без настройки виджеты на базе единой модели и к этому добавлена настроенная связь с виджетами на основе другой модели, то связи обеспечиваемые единством модели перестанут работать. Если они необходимы – настройте их явно в окне «Настройка связей» либо удалите все произведенные настройки связей.