Интерфейс «Москоллектор»

Веб-интерфейс диспетчерского стенда: прогноз инцидентов в коллекторах Москвы и отказов датчиков, разбор прогнозов и фиксация решений.

Стенд · Команда /goal · Архитектура интерфейса

Хакатон ЛЦТ 2026, кейс 8. Заказчик — Департамент ЖКХ города Москвы и АО «Москоллектор». Интерфейс показывает готовые прогнозы, которые бэкенд читает из журнала инференса; модель напрямую клиент не вызывает.

_{Аналитическая панель: сводка рисков, распределение инцидентов по уровням риска, последние уведомления}

Возможности

• Аналитическая панель — счётчики активных рисков, высокого риска и прогнозов без решения, карточка «Оборудование к проверке», лента последних уведомлений.
• Журнал прогнозов — вкладки «Инциденты» и «Оборудование» (прогноз отказов датчиков), фильтры по периоду, типу инцидента, состоянию и минимальной вероятности, карточка прогноза с факторами и историей решений.
• Реестр и иерархия объектов — граф объекта, узлы окрашены по уровню риска, отдельный значок отмечает датчик в зоне риска отказа.
• Уведомления в реальном времени — поток SSE о критических прогнозах: тосты, индикатор в шапке, переход в карточку прогноза.
• Светлая и тёмная тема.

Что доступно пользователю, определяют права его роли; область видимости (поддерево объектов) бэкенд проверяет в каждом запросе.

Роль	Что делает в интерфейсе
Техник	Смотрит прогнозы, иерархию объектов и оборудование к проверке
Диспетчер района, ЦДС	Разбирает прогнозы и фиксирует решение с причиной из справочника
Руководитель	Смотрит прогнозы и сводку; раздел отчётов пока заглушка
Администратор	Загрузка журнала, параметры и пороги риска, интеграции, аудит

Маршруты и права подробно — в docs/architecture.md.

Скриншоты

Журнал прогнозов: инциденты высокого риска без решения и карточка прогноза с классом, вероятностью, горизонтом, факторами и формой решения
Иерархия объекта: граф узлов с цветом риска (роль «Техник»)	Вкладка «Оборудование»: датчики к проверке по прогнозу отказов
Администратор
Настройки: ручное обновление интеграций (метеослужба, уровень Москвы-реки, реестр каналов и объектов, заявки ОДС) и параметры прогноза — срок действия решения, окно свежести показания, пороги риска MEDIUM и HIGH	Аудит: журнал входов и действий пользователей с фильтрами по периоду, пользователю, категории и действию

Быстрый старт

Нужны Node.js 20.x (LTS) и npm 10.x.

npm ci
cp .env.template .env.local
npm run dev

Приложение откроется на http://localhost:5173/. Шаблон окружения включает MSW, поэтому интерфейс работает без бэкенда.

Установка Node.js

Windows: скачать LTS с https://nodejs.org/en/download, установить, проверить:

node -v   # v20.x.x
npm -v    # 10.x.x

Linux/macOS: через nvm или пакетный менеджер.

Окружение

Скопировать .env.template в .env.local. Шаблон включает MSW для автономной демонстрации. Для подключения к запущенному бэкенду задайте:

VITE_API_URL=/api/v1
VITE_USE_MOCK=false
VITE_API_TARGET=http://localhost:8080

Моки: при VITE_USE_MOCK=true MSW перехватывает запросы к /api/v1/* только в режиме разработки. При VITE_USE_MOCK=false Vite проксирует /api/* на VITE_API_TARGET. Переменная VITE_API_TOKEN из шаблона клиентом не используется: авторизация работает через cookie-сессию. Секреты нельзя размещать в переменных VITE_*: они попадают в клиентскую сборку.

Проверки

npm run lint
npm run typecheck
npm run format:check
npm run test:run

Состав тестов зависит от текущей версии репозитория. npm run build также выполняет проверку типов (vue-tsc -b).

Сборка для продакшена

npm run build

Результат — папка dist/.

Локальная проверка сборки

npm run preview

Сервер: http://localhost:4173/

Деплой на Nginx

1. Скопировать dist/* на сервер (например, в /var/www/app/).

2. Настроить Nginx:

   server {
       listen 80;
       server_name your-domain.com;
       root /var/www/app;
       index index.html;
       location /api/ {
           proxy_pass http://backend:8080;
       }
       location / {
           try_files $uri $uri/ /index.html;
       }
   }

3. Проверить и перезагрузить:

   sudo nginx -t
   sudo systemctl reload nginx

Для SSE /api/v1/notifications/stream на прокси следует отключить буферизацию ответа. Пример конфигурации стенда — backend/deploy/nginx-frontend.conf. Бэкенд публикует Swagger на /swagger-ui.html и JSON на /v3/api-docs. Контракт интерфейса хранится в backend/docs/openapi-frontend.yaml. YAML содержит и проектные договорённости; фактически доступные маршруты проверяйте по запущенному API.