Navikey Wiki Pages

Look beyond the horizon...

Инструменты пользователя

Инструменты сайта

Вы посетили: • descriptionformat
ru:airlay:descriptionformat

Это старая версия документа!

−Содержание

Описание формата

Описание

В основе формата описания лежит шаблонизатор https://mustache.github.io/mustache.5.html. В описание можно добавлять:

  • HTML разметку.
  • Значение атрибутов объекта слоя.
  • Вызов встроенных функций.
  • Возможность копирования текстового содержимого HTML элементов в буфер обмена.
  • Конвертацию unixtime времени.

Добавление значений атрибутов объекта слоя

За добавление значений атрибутов объекта слоя отвечает шаблонизатор Mustache. Справочную информацию по синтаксису Mustache можно найти здесь Также можно использовать операторы сравнения, по следующему принципу: `airlay…obj.field`. После проверок оно будет заменено на стандартный мусташевские значения

Пример атрибутов объекта слоя: 

{
  "color": "Красный",
  "workers": [
      {"name": "Василий", "age": 20},
      {"name": "Пётр", "age": 23},
      {"name": "Мария", "age": 25}
  ],
  "count": 25
}

Пример описания: 

Цвет: {{color}}
 
{{#workers}}
  Имя: {{name}}
  Возраст: {{age}}
{{/workers}}
 
{{#count}}
  Количество: {{count}}
{{/count}}
 
{{#flag}}
  Этот текст никогда не будет выведен, так как атрибута flag нет.
{{/flag}}
 
{{!#color="Красный"}}
  тут будет показа {{color}}
{{/color}}
 
{{!#color="синий"}}
 это текст не будет показан так как color != Красный
{{/color}}

Итоговое описание объекта: 

Цвет: Красный
 
Имя: Василий
Возраст: 20
Имя: Пётр
Возраст: 23
Имя: Мария
Возраст: 25
 
Количество: 25

Вызов встроенных функций

Для вызова встроенных функций необходимо добавить к HTML элементу атрибут data-createFunctionCall. Значение атрибута - это список имён функций, которые будут вызваны при клике на HTML элемент и/или json объекты в формате: 

{
	"name": "Имя функции",
	"agruments": ["первый аргумент", 1, "третий аргумент", false]
}

Доступные функции:

  • addToPreparedData - добавить элемент в список «Подготовленные данные».
  • loadTrack - функция получения трека, для мобильных объектов имеющих deviceId.
  • hideTrack - функция скрытия трека.
  • runSearchInRadius - функция показа информации об объекте слоя в SideBar. HTML тег, с вызовом этой функции, автоматически удаляется, если в настройках портала включен SideBar.
  • setCategory - функция изменения категории объекта.
  • editProperties - редактировать свойства объекта.
  • createObject - создать объект в другом наборе данных, аргументы:
    1. Идентификатор набора данных, в котором нужно создать объект.
    2. Идентификатор категории, которую нужно присвоить объекту (необязательный аргумент).
  • MrskModule::getSap - функция перехода в SAP (при подключённом плагине SAP-connector), аргументы:
    1. Идентификатор объекта (необязательный аргумент, по умолчанию берется значение уникального поля объекта).
    2. Имя системы (необязательный аргумент).
    3. Команда (необязательный аргумент).
  • enableLineRunner - функция открытия инструмента «расстояние на линии» (для объектов типа «Линия»).
  • createNewMilestone - функция создания мероприятия (объект с которого производился вызов, будет добавлен в список объектов Мероприятия), аргументы:
    1. Идентификатор шаблона мероприятия.
  • PluginBinderModule::showPluginBinder - функция открытия плагина связывания.
  • OporyRelationPickerModule::showOporyPicker - функция открытия плагина редактора пролётов.
  • sendUrlRequest - функция для отправки объекта по указанному url (параметр url должен содержаться в передаваемом объекте). Также может быть добавлено поле `filter` в котором может быть передан фильтр.
  • createReport - функция для получения(скачивания) отчета. В случае успеха отчет будет добавлен в очередь скачивания. Требуется ид отчета, второй опциональный параметр true/false(делать/не делать скриншот), третий опциональный параметр это формат (blob, image, base64).

Пример описания: 

<button data-createFunctionCall='["addToPreparedData"]'>Подготовить данные для печати</button>
<button data-createFunctionCall='["runSearchInRadius"]'>Больше...</button>
<button data-createfunctioncall='["loadTrack"]' class='btn btn-primary btn-md'>Показать трэк</button> 
<button data-createfunctioncall='["hideTrack"]' class='btn btn-primary btn-md'>Скрыть Трек</button>
<button data-createFunctionCall='["MrskModule::getSap"]'>Показать трэк и перейти в SAP</button>
<button data-createfunctioncall='[{"name": "setCategory", "arguments": ["5e4e3bda9ae89212cd1f2782"]}]'>Штатный режим</button>
<button data-createfunctioncall='[{"name": "createObject", "arguments": ["608788a86db2a069937bf792"]}]'>Создать объект</button>
<button data-createfunctioncall='[{"name": "createObject", "arguments": ["608788a86db2a069937bf792", "6099d8740398ec5040647613"]}]'>Создать объект с категорией</button>
<button data-createFunctionCall='["enableLineRunner"]'>Расстояние на линии</button>
<button data-createFunctionCall='[{"name": "createNewMilestone", "arguments": ["619e0ff794779c32113745f9"]}]'>Создать мероприятие</button>
<button data-createFunctionCall='[{"name": "PluginBinderModule::showPluginBinder", "arguments": ["5e6f9b55525c1b12437eeadb"]}]'>Привязать</button>
<button data-createFunctionCall='[{"name": "OporyRelationPickerModule::showOporyPicker", "arguments": ["5e6f9b55525c1b12437eeadb"]}]'>Пролёты</button>
<button data-createfunctioncall='[{"name": "sendUrlRequest", "arguments": [{ "url" : "test.com", "tplnr" : "{{tplnr}}", "systemname" : "ER2", "command" : "33", "filter": "(<f>voltage</f> = 10 || <f>voltage</f> = 35) && (<f>type</f> = \"33\" && <f>type</f> = \"TP\")"}]}]'>Отправить объект</button>
<button data-createFunctionCall='[{"name": "createReport", "arguments": ["647095d90083c945a20ceef2", true]}]' >сделать отчет со скриншотом</button>

Функция отправки сообщения с карты

  • sendMessages - функция отправки push сообщения из окна с описанием.

Для этой функции помимо кнопки необходимо добавить пустой textarea. Пример описания: 

<textarea id=send_{{deviceId}}></textarea>
<button data-createFunctionCall='[{"name": "sendMessages", "arguments": ["{{deviceId}}"]}]'>Отправка сообщения</button>

Копирование текстового содержимого HTML элемента

Для копирования текстового содержимого HTML элемента в буфер обмена необходимо добавить к элементу атрибут data-canBeCopied. При клике на данный элемент его текстовое содержимое будет скопировано в буфер обмена.

Пример описания: 

Копируемое значение атрибута: <b data-canBeCopied>{{attribute}}</b>

Конвертация unixtime времени

Если текстовое содержимое HTML элемента это время в формате unixtime, то его можно преобразовать в удобочитаемый вид. Для этого необходимо добавить к HTML элементу атрибут data-convertUnixTime. Значение атрибута - это формат вывода времени. Форматирование времени осуществляется с помощью библиотеки momentjs описание форматов можно найти здесь.

Пример атрибутов объекта: 

{
  "time": "1325412001"
}

Пример описания: 

Формат №1: <b data-convertUnixTime="DD-MM-YYYY HH:mm:ss">{{time}}</b>
Формат №2: <b data-convertUnixTime="D-M-YYYY H:m:s">{{time}}</b>
Формат №3: <b data-convertUnixTime="DDD-MMM-YYYY HH:mm:ss">{{time}}</b>
 
Unixtime: <b>{{time}}</b>

Итоговое описание объекта: 

Формат №1: 01-01-2012 18:00:01
Формат №2: 1-1-2012 18:0:1
Формат №3: 1-янв.-2012 18:00:01
 
Unixtime: 1325412001

Округление чисел

Если содержимое HTML элемента это число или строка, содержащая только число, то его можно округлить. Для этого необходимо добавить к HTML элементу атрибут data-roundingNumber. Значение атрибута - это стратегия округления:

  • math - округление по математическим правилам (по умолчанию).
  • up - округление вверх.
  • down - округление вниз.

Пример атрибутов объекта: 

{
  "value": 0.616
}

Пример описания: 

Формат №1: <b data-roundingNumber>{{value}}</b>
Формат №2: <b data-roundingNumber="math">{{value}}</b>
Формат №3: <b data-roundingNumber="up">{{value}}</b>
Формат №4: <b data-roundingNumber="down">{{value}}</b>
Формат №5: <b data-roundingNumber="2">{{value}}</b>
 
Значение: <b>{{value}}</b>

Итоговое описание объекта: 

Формат №1: 1
Формат №2: 1
Формат №3: 1
Формат №4: 0
Формат №5: 0.61
 
Значение: 0.6

Фильтрация описания по правам доступа

Если требуется показывать часть описания только пользователям с определенными правами доступа к набору данных, то необходимо воспользоваться атрибутом data-showOnlyByAccess. Значение атрибута - маска доступа пользователя к набору данных (целое число от 0 до 7). В маске:

  • Первый бит - чтение.
  • Второй бит - запись.
  • Третий бит - изменение категории.

Пример описания: 

<span data-showOnlyByAccess="1">Этот текст увидят пользователи с правами на чтение</span>
<span data-showOnlyByAccess="2">Этот текст увидят пользователи с правами на запись</span>
<span data-showOnlyByAccess="3">Этот текст увидят пользователи с правами на чтение и запись</span>
<span data-showOnlyByAccess="4">Этот текст увидят пользователи с правами на изменение категории</span>

Вставка иконки слоя в описание

Для того, чтобы вставить в описание иконку слоя необходимо воспользоваться тегом description-layer-icon. По умолчанию иконка будет не больше 24 пикселей по высоте и ширине, если необходимо изменить это ограничение, то задайте встроенные css стиль с опциями height и width у тэга description-layer-icon на требуемые.

P.S. Тег layer-icon отображается как inline-block.

Пример описания: 

<description-layer-icon></description-layer-icon> Стандартная иконка
<description-layer-icon style="width: 12px; height: 12px"></description-layer-icon> Маленькая иконка
<description-layer-icon style="width: 36px; height: 36px"></description-layer-icon> Большая иконка
Имя пользователя: {{userInfo.name}}
Номер телефона: {{userInfo.number}}

Вставка координат точечного объекта в описание

Для того, чтобы вставить в описание координаты точечного объекта необходимо воспользоваться тегом point-lng-lat.

Пример описания: 

Координаты объекта: <point-lng-lat></point-lng-lat>

Наследование описания (доступно в версии 1.90 и выше)

Для того что бы унаследовать описание слоя от вышестоящего элемента дерева (папки/дерева) необходимо: 

1. Оставить описание слоя пустым (Слой полностью унаследует описание вышестоящего элемента)
2. Использовать тэг {{@include name}}(на место тэга будет вставлен родительский тэг с заданным именем)

Примеры наследования: 

**Описание**
{
    "name" : "Дерево 1"
    "description" : "<div id=\"tree-header\">tree-header</div> <div id=\"tree-footer\">tree-footer</div>"
}
 
{
    "name" : "Папка 1 дерева 1",
    "description" : "{{@include tree-header}} <div id=\"dir-header\">dir-header</div> name = {{name}} <div id=\"dir-footer\">dir-footer</div> {{@include tree-footer}}"
}
 
{
    "name" : "Слой 1 папки 1 дерева 1",
    "description" : "{{@include dir-footer}} name = {{name}} {{@include tree-header}}"
}
 
{
    "name" : "Слой 2 папки 1 дерева 1",
    "description" : "{{@include dir-header}} text {{@include tree-footer}}\n{{@include dir-footer}}"
}
 
{
    "type" : "Папка 2 дерева 1",
    "description" : ""
}
 
{
    "type" : "Слой 1 папки 2 дерева 1",
    "description" : ""
}
 
**Полученное описание для слоев**
{
 
    "name" : "Слой 1 папки 1 дерева 1",
    "description" : "<div id=\"dir-footer\">dir-footer</div> name = {{name}} <div id=\"tree-header\">tree-header</div>"
}
{
    "name" : "Слой 2 папки 1 дерева 1",
    "description" : "<div id=\"dir-header\">dir-header</div> text <div id=\"tree-footer\">tree-footer</div>\n<div id=\"dir-footer\">dir-footer</div>"
}
{
    "type" : "Слой 1 папки 2 дерева 1",
    "description" : "<div id=\"tree-header\">tree-header</div> <div id=\"tree-footer\">tree-footer</div>"
}
**Описание**
{
    "name" : "Дерево 2",
    "description" : "<h1 id=h1t> this h1 <h2 id=h2t> this h2 <h3 id=h3t> this h3 </h1></h2></h3>  <div id=div1> this div1 <div id=div2> this div2 </div></div>"
}
 
{
    "name" : "Слой 1 дерева 2",
    "description" : "{{@include h1t}}\n\n{{@include h2t}}\n\n{{@include h3t}}\n\n{{@include div1}}\n\n{{@include div2}}",
}
 
**Полученное описание для слоя**
{
    "type" : "Слой 1 дерева 2",
    "description" : "<h1 id=\"h1t\"> this h1 <h2 id=\"h2t\"> this h2 <h3 id=\"h3t\"> this h3 </h3></h2></h1>\n\n<h2 id=\"h2t\"> this h2 <h3 id=\"h3t\"> this h3 </h3></h2>\n\n<h3 id=\"h3t\"> this h3 </h3>\n\n<div id=\"div1\"> this div1 <div id=\"div2\"> this div2 </div></div>\n\n<div id=\"div2\"> this div2 </div>"
}

Пример не правильного наследования: 

**Описание**
{
    "name" : "Дерево 3",
    "description" : "<div id=\"tree-header\">tree-header</div>"
}
 
{
    "name" : "Папка 1 дерева 3",
    "description" : "<div id=\"dir-footer\">dir-footer</div>"
}
 
{
    "name" : "Слой 1 папки 1 дерева 3",
    "description" : "{{@include dir-footer}} name = {{name}} {{@include tree-header}}"
}
 
**Полученное описание**
{ 
    "type" : "layerEntity"
    "description" : "<div id=\"dir-footer\">dir-footer</div> name = {{name}} "
}

В данном варианте тэг tree-header не унаследуется так как его нет в папке.

Отображение изображения в слое

**Изображение в атрибуте img**
{{#media}}
   <a target='_blank' href="{{url}}"> 
      <img src="{{preview}}" width="250" height="190" > 
   </a>
{{/media}}
 
**Медиа и изображение**
{{#media}}
<video width="250" height="190" autoplay="autoplay" poster="{{url}}">
   <source src="{{url}}" type='video/ogg; codecs="theora, vorbis"'>
   <a target='_blank' href="{{media.url}}"> 
      <img src="{{preview}}" width="250" height="190" > 
   </a>
</video>
{{/media}}

Отображение документа в слое

{{#document}}
   <a target='_blank' href="{{url}}"> Скачать документ</a>
{{/document}}
{{#imagesLinks}}
   <a target='_blank' href="{{.}}"> 
      <img src="{{.}}" width="250" height="190" > 
   </a>
{{/imagesLinks}}
ru/airlay/descriptionformat.1729507232.txt.gz · Последнее изменение: 2024/10/21 17:40 — Георгий

Инструменты страницы

Если не указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki