MAPPEX Dashboards

Интерактивный прототип концепта «Межведомственный наблюдательный пункт»: МЧС, МВД, Минздрав и другие службы работают с единой базой, а ИИ-автопилот назначает исполнителей, если оператор не успел отреагировать.

• Демо: https://mappex.yappix.ru
• Код: https://git.myunion.pro/yappix-samples/mappex
• Кейс: https://yappix.ru/eksperimenty/mappex
• Макет: Figma «Government Dashboards», фреймы «Dashboard» и «Dashboard 3D Map» (3840×2160)

Запуск

npm install
npm run dev

Откройте http://localhost:5173. Сборка: npm run build, проверка: npx tsc -b && npm run lint.

Нужен интернет: подложка карты — векторные тайлы OpenFreeMap (данные © OpenStreetMap), спутник — Esri World Imagery. Ключи API не нужны.

Развернуть у себя

Прототип собирается в статическую папку dist/, сервер с бэкендом не нужен.

git clone https://git.myunion.pro/yappix-samples/mappex.git
cd mappex
npm ci
npm run build

Папку dist/ можно выложить на любой статический хостинг: nginx, Vercel, Netlify, GitHub Pages, S3. Для nginx есть готовый конфиг: deploy/nginx-mappex.yappix.ru.conf. Скрипт deploy/publish.sh собирает проект и выкладывает его по rsync: DEPLOY_HOST=root@ваш-сервер DEPLOY_REMOTE=/var/www/mappex/ bash deploy/publish.sh.

Воркер MapLibre — ES-модуль (assets/maplibre-gl-worker-*.mjs). Сервер должен отдавать .mjs с типом application/javascript, иначе карта не загрузится. Конфиг nginx выше это учитывает.

Что работает

• Карта «Пункт наблюдения» (MapLibre GL):

  • 2D — регионы РФ с подсветкой при наведении. Клик по региону открывает карточку с камерами городов, а «Статистика по региону» — сводку по смертности.
  • 3D — вид с дрона: переключение дронов, облёт цели ИИ-пилотом, ручное управление с клавиатуры (WASD/стрелки, Q/E, R/F, Z/X).
  • Спутник и Гибрид.
  • Слои: Города, Разметки, Дороги, Метки, Регионы, Черно-белое. Кнопка «Здания» включает 3D-здания на 2D-карте.
  • «Глобус» в углу переключает проекцию, стрелки прокручивают карту.

• Самые важные события — вызов ведомства в 1 клик. Залитая кнопка значит, что служба уже выехала. «Камера» открывает 3D-вид с ближайшего дрона. На карточке идёт таймер «ИИ через N с».

• ИИ-автопилот — переключатель в верхней строке:

  • «Автопилот» назначает исполнителей сразу.
  • «Полуручной» назначает, только если оператор не успел за отведённое время.
  • «Ручной» не вмешивается.

  Исполнителя ИИ выбирает по релевантности, профпригодности, скорости, стрессу и расстоянию до места (src/store/useStore.ts, scoreEmployee).

• Журнал действий — кто, что и когда сделал, статусы «В работе», «Провалил» и время завершения, датчик-рейтинг сотрудника.

• Мой профиль — датчики «Стресс» и «Задачи» зависят от текущей нагрузки, плюс столбики по годам и KPI.

• Радар событий — следит за ближайшим к центру Москвы происшествием, умеет приближать и открывать его на карте.

• Статистика и графика — периоды 1-Д, 1-НЕД, 1-МЕС, 1-ГОД, выбор показателей, три типа графика, курсор с подсказкой.

• Плитки модулей скрывают и показывают виджеты. Авиация, Сообщения, Расписания и Задачи открываются боковой панелью.

• Уведомления ведомств — «Принять» создаёт задачу, «Отклонить» и «Закрыть всё» убирают уведомления.

• Экстренный вызов — кнопка внизу слева: набор 112, 101, 102, 103, 104, окно звонка, радиоканал.

• Разделы меню: «Управление задачами» (происшествия, исполнители, канбан, учёт качества сотрудников) и «Настройки системы».

Демо-симуляция каждые 40 секунд добавляет новый сигнал с дрона или камеры. Интервал и время на реакцию настраиваются в «Настройках системы».

Специальные возможности

По умолчанию включены «Ночное время» и «Плохое зрение», как в макете. В настройках есть ещё «Максимальная контрастность» и дневная тема. Палитра пастельная: на чёрном фоне такие цвета не дают ореолов и «двоения» при астигматизме. Учитывается prefers-reduced-motion.

Устройство

src/
  store/useStore.ts      состояние, ИИ-автопилот, симуляция (zustand)
  data/                  моковые происшествия, сотрудники, дроны, статистика
  components/map/        карта, стили MapLibre, HUD дрона, попап региона, глобус
  components/            панели дашборда, шапка, меню, экстренный вызов
  pages/                 «Управление задачами», «Настройки», заглушки разделов
  styles/tokens.css      токены и темы (ночь / день / контраст / плохое зрение)
  assets/figma/          иконки, фото и SVG, выгруженные из Figma
public/data/             границы субъектов РФ (упрощённый GeoJSON)

Сетка повторяет макет: при корневом шрифте 16 px 1rem соответствует 32 px макета, поэтому на 1920×1080 раскладка совпадает с Figma в масштабе 1:2. Шрифт масштабируется с шириной экрана. На экранах уже 1100 px панели выстраиваются в колонку.

Отличия от макета

• Шуточные тексты-заглушки заменены нейтральными правдоподобными, опечатки исправлены.
• Фон с гранеными ромбами нарисован на CSS, а не взят из 4K-картинки (1,6 МБ).
• Векторная карта и 3D-вид с дрона — живые (MapLibre), а не статичные картинки.
• Шрифт SF Compact Display используется, если установлен в системе, иначе подставляется Inter.

Лицензия

Код — MIT. Фото, эмблема ИФНС, аватары и прочие картинки из макета (src/assets/figma/) лежат в репозитории только для демонстрации и под MIT не попадают. Данные карты — © участники OpenStreetMap (через OpenFreeMap), спутниковые снимки — © Esri и партнёры. Границы субъектов РФ (public/data/) взяты из click_that_hood (Code for Germany, MIT).