Wiki
Clone wikiMBoard / Виджет Template
Описание виджета "Template"
При создании пользовательского темплейта необходимо использовать синтаксис шаблонов Vue
Темплейт должен быть описан в одном корневом блоке.
Для написание виджета можно использовать:
Свойства
- values - массив значенией списка свойств (индекс-значение), для использования в v-model
Доступные свойства виджета через обьект widget:
- widget.title - название
- widget.icon - иконка
- widget.object_value - список заданных в виджете свойств обьектов
- widget.resources - список заданных в виджете ресурсов
Кроме этого доступны параметры для общей стилизации виджета, которые формируются на основании заданного стиля виджета и системных настроек
- card_color - цвет виджета
- card_style - стиль виджета
Функции
- getValue(index) - выдает значение свойства обьекта из списка свойств виджета, index - порядковый номер свойства в списке (начинается с 0)
- getInfoObject(index) - выдает описание обьекта
- getInfoProperty(index) - выдает описание свойства
- getResource(index) - выдает ресурс из списка ресурсов, index - порядковый номер в списке (начинается с 0)
- switchValue(index) - меняет значение свойства 0->1 , 1->0
- switchResource(index) - меняет значение ресурса 0 <-> 1 , true <-> false
- setValue(index, value) - устанавливает указанное значение в свойство
- setResource(index, value) - устанавливает указанное значение в ресурс
- runAction(index) - выполняет действие из списка действий виджета, index - порядковый номер действия в списке (начинается с 0)
- historyValue(index) - вызывает окно с историей свойства обьекта из списка свойств виджета
- historyValue(index, title=null, color='
#3F51B5', step=false, type='auto', period='') - параметры - historyValue(index, title)
- historyValue(index, title, '
#3F51B5') - historyValue(index, title, '
#3F51B5', false) - historyValue(index, title, '
#3F51B5', true, 'table') - historyValue(index, title, '
#3F51B5', false, 'line', '180')
Пример виджета для простого устройства реле
<v-btn style="text-transform: none;" width="100%" height="100%" @click="runAction(0)" :color="getValue(0) == '1' ? 'primary':''"> <v-row align="center"> <v-col cols="12"> <icon-view v-if="getValue(1)" :value='getValue(1)' :size="40"/> </v-col> <v-col cols="12" class="pt-0"> <span>{{widget.title}}</span> </v-col> </v-row> </v-btn>
Необходимые настройки виджета
Значения
- Статус (status)
- Изображение (icon)
Действия
- Метод переключения статуса (switch)
Updated