tz.md 8.3 KB

Техническое задание Тема: «КПП-3 · Пост охраны. Моделирование работы шлагбаума»

Это одностраничное интерактивное веб-приложение — симулятор поста охраны на контрольно-пропускном пункте (КПП) с автоматическим шлагбаумом. Оформлено в стиле служебной системы контроля доступа: тёмный интерфейс, янтарные и голубые акценты, индикаторы состояния, журнал событий, анимации на Canvas. Пользователь выступает в роли оператора КПП: сравнивает пропуска, принимает решение о пропуске или отказе, управляет шлагбаумом и реагирует на нештатные ситуации.

Что делает проект Это интерактивный тренажёр оператора КПП, состоящий из основной сцены, боковой панели управления и нескольких встроенных сценариев:

  1. Верхняя панель (header) Логотип «КПП-3 · Система контроля доступа», системные часы в реальном времени и индикатор состояния поста. Индикатор меняет цвет и текст в зависимости от ситуации: «ПОСТ СВОБОДЕН» (зелёный), «ПРИБЛИЖАЕТСЯ АВТО» / «ОЖИДАНИЕ РЕШЕНИЯ» (жёлтый), «МАШИНА ЖДЁТ» (синий), «СТАРШИЙ ВЫЗВАН» (голубой), «НАРУШИТЕЛЬ !» / «ТРЕВОГА !» (красный, мигающий).

  2. Основная сцена (Canvas) Псевдо-3D вид на КПП: небо с градиентом, силуэты зданий, две полосы движения, будка охраны, охранник, шлагбаум со светящейся лампой и красно-белой стрелой, автомобили. Шлагбаум плавно открывается и закрывается, стрела анимирована по углу. На экране — HUD-индикатор камеры «CAM-1 [IR]/[DAY]» и строка состояния текущей фазы.

  3. Сравнение пропусков Две карточки: «В БАЗЕ» (эталонный пропуск) и «ПРЕДЪЯВЛЕН» (то, что показывает водитель). Карточка содержит номер, ФИО, подразделение и статус «АКТИВЕН» или «ОТОЗВАН». Генерируются случайно: либо совпадающий активный пропуск, либо чужой, либо отозванный.

  4. Принятие решения Кнопки «✓ РАЗРЕШИТЬ» и «✕ ЗАПРЕТИТЬ». При верном решении начисляется балл, при ошибке — фиксируется ошибка оператора. При «разрешить» шлагбаум открывается, машина проезжает. При «запретить» открывается меню отказа.

  5. Меню отказа Кнопки «📢 Объяснить причину отказа» и «📞 Вызвать старшего смены». В первом случае машина разворачивается и уезжает. Во втором — появляется старший смены, идёт к машине (анимированный персонаж), сам проверяет документы и принимает верное решение.

  6. Силовой проезд и сцена ДТП Кнопка «⚠ Силовой проезд» запускает чёрную тонированную Ладу Приору, которая не сбрасывает скорость. Если шлагбаум закрыт — происходит столкновение: искры, красная пульсирующая рамка, надпись «!!! ТРЕВОГА !!!». Через 0.7 с приезжает полиция (красный VW Passat B3 с мигалками), через 1.4 с — эвакуатор. Водитель эвакуатора выходит из кабины, идёт к машине, цепляет её тросом, возвращается и уезжает вместе с задержанным авто. Полиция уезжает одновременно.

  7. Панель действий Кнопки «▸ Следующая машина», «⚠ Силовой проезд», «✎ Отметить в журнале» (через prompt), «⏹ Закончить смену», «↻ Сброс».

  8. Внешние условия Селекторы «Время» (день / ночь) и «Погода» (ясно / дождь / снег / туман). Меняют освещение, цвета неба и дороги, видимость, поведение фар. Дождь и снег снижают скорость машин (коэффициенты 0.75 и 0.6). Туман добавляет сумеречный режим и облака. Ночь включает ИК-режим камеры и звёзды.

  9. Журнал событий Список записей с временем и цветовой кодировкой (info, ok, warn, alarm, senior). Фиксирует все действия: приближение авто, решения оператора, вызов старшего, тревоги, проезды, уход машин, отметки оператора. Хранит до 80 последних записей.

  10. Отчёт о смене Модальное окно «СМЕНА ЗАВЕРШЕНА» с итогами: впущено авто, отказано, верных решений, ошибок, тревог, силовых проездов, вызовов старшего, оценка смены («ОТЛИЧНО» / «ХОРОШО» / «УДОВЛЕТВОРИТЕЛЬНО» / «ТРЕБУЕТСЯ ПОДГОТОВКА»). Кнопка «Закрыть и сбросить» обнуляет статистику.

Техническая реализация

  • HTML5 + CSS3 + JavaScript (ES5/ES6-совместимый).
  • Canvas 2D — отрисовка сцены КПП: небо, земля, дороги, будка, охранник, шлагбаум, автомобили (седан, Приора, полицейский Passat B3, эвакуатор), персонажи (старший смены, водитель эвакуатора), частицы погоды (дождь, снег, туман), искры при столкновении.
  • Анимация requestAnimationFrame с delta-time, плавное движение машин, колёс, стрелы шлагбаума.
  • CSS-анимации — мигающие LED-индикаторы, пульсация статуса, переключение меню отказа.
  • Модальное окно отчёта о смене.
  • Слайдеры отсутствуют — вместо них селекторы внешних условий.
  • Всё в одном файле, без внешних библиотек и зависимостей.

Идея и аудитория

Проект рассчитан на школьников, студентов колледжей и техникумов, изучающих основы автоматизации, охранных систем, мехатроники и систем контроля доступа. Это интерактивный тренажёр, который имитирует реальную работу оператора КПП с шлагбаумом: сравнение пропусков, принятие решений, реакция на нарушителей, взаимодействие со старшим смены и экстренными службами. Сочетает визуализацию, игровые сценарии и итоговую оценку действий оператора.