В данном разделе приведены сведения о порядке настройки шаблона формы для вывода данных о владельце и пропуске.
ПОДСКАЗКА Если вы не хотите разбираться с кодом шаблона формы или вам требуется форма о определенном стиле, с дополнительными графическими элементами, вы всегда можете заказать разработку такой формы у специалистов компании ИТРИУМ. |
Содержание:
Общие сведения
Платформа НЕЙРОСС с версии 20.41 позволяет вывести в форме фотоидентификации любые данные в владельце и пропуске, в том числе пользовательские свойства владельца и пропуска.
Инструкция по добавлению пользовательских свойств приведена в разделе [Добавление пользовательских свойств]. Чтобы вывести свойства в форме владельца и пропуска для ввода данных в АРМ Доступ используйте конструктор форм [Настройка форм ввода данных]. |
Для отображения поля необходимо сформировать его ключ по следующим правилам:
$PASS.$type_$field |
где $PASS фиксированная строка, $type = person для владельца и pass для пропуска, а $field формируется по следующим правилам:
- Если свойство типовое (ФИО, организация и т. п.) – то просто ключ свойства
- Если свойство пользовательское с ключом key – то строка вида
property_key
Ключи свойств
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Заметки отображения пользовательских свойств
| Тип поля | Комментарий |
|---|---|
Дата и время | 1979-03-31T10:00:00+03:00 |
| Только дата | 1979-03-31 |
| Только время | 18:00:00 |
| Переключатель | да/нет |
| Список | Отображается код, а не значение. Рекомендуется задавать осмысленные коды. |
Порядок настройки
Скопируйте приведённый ниже код шаблона формы.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale = 1.0, maximum-scale=1.0, user-scalable = no, width=device-width"
/>
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="/dry/css/vendor/font-awesome.css" />
</head>
<body>
<div class="card">
<div class="card__header">
<div class="{{ $EVENT.state }}">
<span>{{ $EVENT.status }}</span>
</div>
</div>
<div class="card__body">
<div class="card__body__photo" style="background-image: url('{{ $PASS.photoURL }}')"></div>
<div class="card__body__data">
<div class="card__body__data__row">
<div class="card__body__data__row__title">ФИО:</div>
<div class="card__body__data__row__value">{{ $PASS.personName }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Карта:</div>
<div class="card__body__data__row__value">{{ $PASS.cardNumber }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Событие:</div>
<div class="card__body__data__row__value">{{ $EVENT.status }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Источник события:</div>
<div class="card__body__data__row__value">{{ $EVENT.source }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Время события:</div>
<div class="card__body__data__row__value">{{ $EVENT.time }}</div>
</div>
<!-- all person fields -->
<div class="card__body__data__row">
<div class="card__body__data__row__title">Фамилия:</div>
<div class="card__body__data__row__value">{{ $PASS.person_surname }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Имя:</div>
<div class="card__body__data__row__value">{{ $PASS.person_name }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Отчество:</div>
<div class="card__body__data__row__value">{{ $PASS.person_patronymic }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Организация:</div>
<div class="card__body__data__row__value">{{ $PASS.person_organization }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Подразделение:</div>
<div class="card__body__data__row__value">{{ $PASS.person_division }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Должность:</div>
<div class="card__body__data__row__value">{{ $PASS.person_post }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Табельный номер:</div>
<div class="card__body__data__row__value">{{ $PASS.person_clock_number }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Номер документа:</div>
<div class="card__body__data__row__value">{{ $PASS.person_document_number }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Доп. информация:</div>
<div class="card__body__data__row__value">{{ $PASS.person_properties_extra }}</div>
</div>
<!-- all pass fields -->
<div class="card__body__data__row">
<div class="card__body__data__row__title">Состояние:</div>
<div class="card__body__data__row__value">{{ $PASS.pass_state }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Тип:</div>
<div class="card__body__data__row__value">{{ $PASS.pass_type }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Номер карты:</div>
<div class="card__body__data__row__value">{{ $PASS.pass_card }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Код предприятия:</div>
<div class="card__body__data__row__value">{{ $PASS.pass_facility }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Дата начала действия:</div>
<div class="card__body__data__row__value">{{ $PASS.pass_activation_date }}</div>
</div>
<div class="card__body__data__row">
<div class="card__body__data__row__title">Дата окончания действия:</div>
<div class="card__body__data__row__value">{{ $PASS.pass_expiration_date }}</div>
</div>
</div>
</div>
<div class="card__footer">{{ #DECISION_BUTTONS }} {{ #CAMERA_ICON }}</div>
</div>
<script type="text/javascript">
function safeClosure() {
return {
execute: function () {
// code goes here
},
cleanup: function () {
// required hook for script deactivation!
},
};
}
safeClosure().execute();
window.cleanup = safeClosure().cleanup;
</script>
<style>
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.card {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: space-between;
overflow: hidden;
}
.card__header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 40px;
}
.card__header > div {
width: 100%;
height: 100%;
padding: 0 25px;
overflow: hidden;
text-overflow: ellipsis;
}
.card__header > .ok {
background-color: #0a9d13;
}
.card__header > .warn {
background-color: #e8a71b;
}
.card__header > .alert {
background-color: #c73734;
}
.card__header > div > span {
line-height: 40px;
color: #fff;
display: block;
white-space: nowrap;
}
.card__body {
display: flex;
flex-direction: row;
height: calc(100% - 80px);
margin-top: 0;
margin-bottom: auto;
padding: 20px;
overflow: auto;
}
.card__body__photo {
position: relative;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
max-width: 30%;
max-height: 70%;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.card__body__photo > img {
width: 100%;
height: 100%;
margin: auto;
object-fit: contain;
}
.card__body__data {
display: table;
padding-left: 4vw;
width: 60%;
}
.card__body__data__row {
display: table-row;
}
.card__body__data__row__title {
display: table-cell;
padding-top: 4.5vh;
padding-right: 1vw;
font-size: 2vw;
}
.card__body__data__row__value {
display: table-cell;
font-size: 2.5vw;
}
.card__footer {
position: absolute;
display: flex;
flex-direction: row;
background-color: #d8dde1;
bottom: 0;
height: 40px;
width: 100%;
}
.card__footer #hoverable-camera-tooltip {
flex-shrink: 0;
color: #8f9aa3;
margin-right: 0;
margin-left: auto;
padding: 12px;
}
.card__footer .buttons__wrapper {
height: 40px;
flex-grow: 1;
}
.card__footer .buttons__wrapper > .button {
height: 40px;
line-height: 40px;
width: 50%;
padding: 0 20px;
margin: 0;
color: #fff;
border: none;
outline: none;
cursor: pointer;
}
.button.disabled {
opacity: 0.7;
pointer-events: none;
}
.card__footer .buttons__wrapper > .button.green {
background-color: #0a9d13;
}
.card__footer .buttons__wrapper > .button.green:hover {
background-color: #08820f;
}
.card__footer .buttons__wrapper > .button.red {
background-color: #9e0b0f;
}
.card__footer .buttons__wrapper > .button.red:hover {
background-color: #800007;
}
</style>
</body>
</html> |
Вставьте в текстовый редактор без форматирования, например, — свободно распространяемый Notepad++.
Отредактируйте код формы из блока:
<div class="card__body"> ... </div> |
В этом блоке три группы полей. Порядок соответствует таблице выше.
Чтобы удалить поле из шаблона формы, просто удалите соответствующий блок кода.
Вы также можете добавить произвольное количество полей с пользовательскими свойствами владельца и пропуска, например:
<div class="card__body__data__row">
<div class="card__body__data__row__title">Группа крови:</div>
<div class="card__body__data__row__value">{{ $PASS.person_properties_Gruppa_krovi }}</div>
</div> |
, поле «Группа крови» с полем типа «список».
<div class="card__body__data__row">
<div class="card__body__data__row__title">Согласие на обработку персональных данных:</div>
<div class="card__body__data__row__value">{{ $PASS.person_properties_consent_to_personal_data_processing }}</div>
</div> |
, поле «Согласие на обработку персональных данных» типа «переключатель».
<div class="card__body__data__row">
<div class="card__body__data__row__title">Выход строго до:</div>
<div class="card__body__data__row__value">{{ $PASS.pass_properties_Vikhod_do }}</div>
</div> |
, поле «Выход строго до» типа «дата и время», подтипом «только время».
ВАЖНО Будьте внимательны при вводе уникального ключа свойства. Рекомендуется копировать код во избежание ошибок. |
Сохраните подготовленный шаблон формы в формате TEMPLATE, например:
Шаблон_формы.template |
Загрузите файл шаблона в соответствующее поле настроек ячейки [Настройка АРМ фотоидентификации]. Каждая ячейка может иметь свой шаблон формы.