Настройка формы фотоидентификации

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

ПОДСКАЗКА

Если вы не хотите разбираться с кодом шаблона формы или вам требуется форма о определенном стиле, с дополнительными графическими элементами, вы всегда можете заказать разработку такой формы у специалистов компании ИТРИУМ.

Содержание:

Общие сведения

Платформа НЕЙРОСС с версии 20.41 позволяет вывести в форме фотоидентификации любые данные в владельце и пропуске, в том числе пользовательские свойства владельца и пропуска.

Инструкция по добавлению пользовательских свойств приведена в разделе [Добавление пользовательских свойств]. Чтобы вывести свойства в форме владельца и пропуска для ввода данных в АРМ Доступ используйте конструктор форм [Настройка форм ввода данных].

Для отображения поля необходимо сформировать его ключ по следующим правилам:

$PASS.$type_$field

где $PASS фиксированная строка, $type = person для владельца и pass для пропуска, а $field формируется по следующим правилам:

Если свойство типовое (ФИО, организация и т. п.) – то просто ключ свойства
Если свойство пользовательское с ключом key – то строка вида property_key

Ключи свойств

Свойство	Ключ	Пример
Стандартные поля формы
ФИО	`$PASS.personName`	Петров Петр Сергеевич
Карта №Код_предприятия/Номер_карты	`$PASS.cardNumber`	№175/32784
Событие	`$EVENT.status`	Доступ разрешен
Источник события	`$EVENT.source`	Главный вход (турникет) — имя точки доступа
Время события	$EVENT.time	08:56
Свойства владельца пропуска
Фамилия	`$PASS.person_surname`	Петров
Имя	`$PASS.person_name`	Петр
Отчество	`$PASS.person_patronymic`	Сергеевич
Организация	`$PASS.person_organization`	ООО Промтехмонтаж
Подразделение	`$PASS.person_division`	Технологической инспекции
Должность	`$PASS.person_post`	Инспектор
Табельный номер	`$PASS.person_clock_number`	5465-У
Номер документа	`$PASS.person_document_number`	4016584681
Доп. информация	`$PASS.person_properties_extra`	Доступ к работе на электроустановках: до 1000 В
пользовательское свойство с ключом xxxxx	`$PASS.person_properties_xxxx`	Заметки отображения пользовательских свойств владельца/пропуска
Свойства пропуска
Состояние пропуска	`$PASS.pass_state`	Действителен
Тип пропуска	`$PASS.pass_type`	Постоянный
Номер карты	`$PASS.pass_card`	32784
Код предприятия	`$PASS.pass_facility`	175
Действителен с	`$PASS.pass_activation_date`	2025.12.01 00:00:00
Действителен по	`$PASS.pass_expiration_date`	2032.12.16 00:00:00
пользовательское свойство с ключом yyyyy	`$PASS.pass_properties_yyyyy`

Заметки отображения пользовательских свойств

Тип поля	Комментарий
Дата и время	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

Загрузите файл шаблона в соответствующее поле настроек ячейки [Настройка АРМ фотоидентификации]. Каждая ячейка может иметь свой шаблон формы.

Быстрые ссылки

Дерево страниц

Общие сведения

Ключи свойств

Заметки отображения пользовательских свойств

Порядок настройки