MAPPEX: прототип межведомственного пункта наблюдения
Интерактивный дашборд по макету Figma «Government Dashboards»: карта РФ (2D, вид с дрона в 3D, спутник, гибрид), ленты событий с вызовом ведомств в 1 клик, ИИ-автопилот назначений, журнал, профиль, радар, статистика, режимы «Ночное время», «Плохое зрение» и «Максимальная контрастность». Vite + React + TypeScript, MapLibre GL, zustand. Лицензия MIT. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Renat Usmanov
@@ -0,0 +1,97 @@
|
||||
# MAPPEX Dashboards
|
||||
|
||||
Интерактивный прототип концепта «Межведомственный наблюдательный пункт»: МЧС, МВД, Минздрав и другие службы работают с единой базой, а ИИ-автопилот назначает исполнителей, если оператор не успел отреагировать.
|
||||
|
||||
- **Демо:** https://mappex.yappix.ru
|
||||
- **Код:** https://git.myunion.pro/yappix-samples/mappex
|
||||
- **Кейс:** https://yappix.ru/eksperimenty/mappex
|
||||
- **Макет:** [Figma — Government Dashboards](https://www.figma.com/design/lvFq6m1GspPNv5PaDI6pu0/Government-Dashboards?node-id=0-1) (фреймы «Dashboard» и «Dashboard 3D Map», 3840×2160)
|
||||
|
||||
|
||||
|
||||
## Запуск
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Откройте http://localhost:5173. Сборка: `npm run build`, проверка: `npx tsc -b && npm run lint`.
|
||||
|
||||
Нужен интернет: подложка карты — векторные тайлы [OpenFreeMap](https://openfreemap.org) (данные © OpenStreetMap), спутник — Esri World Imagery. Ключи API не нужны.
|
||||
|
||||
## Развернуть у себя
|
||||
|
||||
Прототип собирается в статическую папку `dist/`, сервер с бэкендом не нужен.
|
||||
|
||||
```bash
|
||||
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/nginx-mappex.yappix.ru.conf). Скрипт [`deploy/publish.sh`](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](LICENSE). Фото, эмблема ИФНС, аватары и прочие картинки из макета (`src/assets/figma/`) лежат в репозитории только для демонстрации и под MIT не попадают. Данные карты — © участники OpenStreetMap (через OpenFreeMap), спутниковые снимки — © Esri и партнёры. Границы субъектов РФ (`public/data/`) взяты из [click_that_hood](https://github.com/codeforgermany/click_that_hood) (Code for Germany, MIT).
|
||||
Reference in New Issue
Block a user