98 lines
8.9 KiB
Markdown
98 lines
8.9 KiB
Markdown
# 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)
|
||
|
||
|
||
|
||
## Запуск
|
||
|
||
```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).
|