изменение логики работы поиска датчиков из дашборд и истории тревог по конкретному этажу
This commit is contained in:
658
frontend/app/(protected)/navigation/page.tsx — копия 2
Normal file
658
frontend/app/(protected)/navigation/page.tsx — копия 2
Normal file
@@ -0,0 +1,658 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useCallback, useState } from 'react'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import Image from 'next/image'
|
||||
import Sidebar from '../../../components/ui/Sidebar'
|
||||
import AnimatedBackground from '../../../components/ui/AnimatedBackground'
|
||||
import useNavigationStore from '../../store/navigationStore'
|
||||
import Monitoring from '../../../components/navigation/Monitoring'
|
||||
import FloorNavigation from '../../../components/navigation/FloorNavigation'
|
||||
import DetectorMenu from '../../../components/navigation/DetectorMenu'
|
||||
import ListOfDetectors from '../../../components/navigation/ListOfDetectors'
|
||||
import Sensors from '../../../components/navigation/Sensors'
|
||||
import AlertMenu from '../../../components/navigation/AlertMenu'
|
||||
import Notifications from '../../../components/notifications/Notifications'
|
||||
import NotificationDetectorInfo from '../../../components/notifications/NotificationDetectorInfo'
|
||||
import dynamic from 'next/dynamic'
|
||||
import type { ModelViewerProps } from '../../../components/model/ModelViewer'
|
||||
import * as statusColors from '../../../lib/statusColors'
|
||||
|
||||
const ModelViewer = dynamic<ModelViewerProps>(() => import('../../../components/model/ModelViewer'), {
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="w-full h-full flex items-center justify-center bg-[#0e111a]">
|
||||
<div className="text-gray-300 animate-pulse">Загрузка 3D-модуля…</div>
|
||||
</div>
|
||||
),
|
||||
})
|
||||
|
||||
interface DetectorType {
|
||||
detector_id: number
|
||||
name: string
|
||||
serial_number: string
|
||||
object: string
|
||||
status: string
|
||||
checked: boolean
|
||||
type: string
|
||||
detector_type: string
|
||||
location: string
|
||||
floor: number
|
||||
notifications: Array<{
|
||||
id: number
|
||||
type: string
|
||||
message: string
|
||||
timestamp: string
|
||||
acknowledged: boolean
|
||||
priority: string
|
||||
}>
|
||||
}
|
||||
|
||||
interface NotificationType {
|
||||
id: number
|
||||
detector_id: number
|
||||
detector_name: string
|
||||
type: string
|
||||
status: string
|
||||
message: string
|
||||
timestamp: string
|
||||
location: string
|
||||
object: string
|
||||
acknowledged: boolean
|
||||
priority: string
|
||||
}
|
||||
|
||||
interface AlertType {
|
||||
id: number
|
||||
detector_id: number
|
||||
detector_name: string
|
||||
type: string
|
||||
status: string
|
||||
message: string
|
||||
timestamp: string
|
||||
location: string
|
||||
object: string
|
||||
acknowledged: boolean
|
||||
priority: string
|
||||
}
|
||||
|
||||
const NavigationPage: React.FC = () => {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const {
|
||||
currentObject,
|
||||
setCurrentObject,
|
||||
showMonitoring,
|
||||
showFloorNavigation,
|
||||
showNotifications,
|
||||
showListOfDetectors,
|
||||
showSensors,
|
||||
selectedDetector,
|
||||
showDetectorMenu,
|
||||
selectedNotification,
|
||||
showNotificationDetectorInfo,
|
||||
selectedAlert,
|
||||
showAlertMenu,
|
||||
closeMonitoring,
|
||||
closeFloorNavigation,
|
||||
closeNotifications,
|
||||
closeListOfDetectors,
|
||||
closeSensors,
|
||||
setSelectedDetector,
|
||||
setShowDetectorMenu,
|
||||
setSelectedNotification,
|
||||
setShowNotificationDetectorInfo,
|
||||
setSelectedAlert,
|
||||
setShowAlertMenu,
|
||||
showSensorHighlights,
|
||||
toggleSensorHighlights
|
||||
} = useNavigationStore()
|
||||
|
||||
const [detectorsData, setDetectorsData] = useState<{ detectors: Record<string, DetectorType> }>({ detectors: {} })
|
||||
const [detectorsError, setDetectorsError] = useState<string | null>(null)
|
||||
const [modelError, setModelError] = useState<string | null>(null)
|
||||
const [isModelReady, setIsModelReady] = useState(false)
|
||||
const [focusedSensorId, setFocusedSensorId] = useState<string | null>(null)
|
||||
const [highlightAllSensors, setHighlightAllSensors] = useState(false)
|
||||
const sensorStatusMap = React.useMemo(() => {
|
||||
// Создаём карту статусов всегда для отображения цветов датчиков
|
||||
const map: Record<string, string> = {}
|
||||
Object.values(detectorsData.detectors).forEach(d => {
|
||||
if (d.serial_number && d.status) {
|
||||
map[String(d.serial_number).trim()] = d.status
|
||||
|
||||
// Логируем GLE-1
|
||||
if (d.serial_number === 'GLE-1') {
|
||||
console.log('[NavigationPage] GLE-1 status from API:', d.status)
|
||||
console.log('[NavigationPage] GLE-1 notifications:', d.notifications)
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log('[NavigationPage] sensorStatusMap created with', Object.keys(map).length, 'sensors')
|
||||
console.log('[NavigationPage] Sample sensor IDs in map:', Object.keys(map).slice(0, 5))
|
||||
return map
|
||||
}, [detectorsData])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedDetector === null && selectedAlert === null) {
|
||||
setFocusedSensorId(null);
|
||||
}
|
||||
}, [selectedDetector, selectedAlert]);
|
||||
|
||||
// Управление выделением всех сенсоров при открытии/закрытии меню Sensors
|
||||
// ИСПРАВЛЕНО: Подсветка датчиков остается включенной всегда, независимо от состояния панели Sensors
|
||||
useEffect(() => {
|
||||
console.log('[NavigationPage] showSensors changed:', showSensors, 'modelReady:', isModelReady)
|
||||
if (isModelReady) {
|
||||
// Всегда включаем подсветку всех сенсоров когда модель готова
|
||||
console.log('[NavigationPage] Setting highlightAllSensors to TRUE (always enabled)')
|
||||
setHighlightAllSensors(true)
|
||||
// Сбрасываем фокус только если панель Sensors закрыта
|
||||
if (!showSensors) {
|
||||
setFocusedSensorId(null)
|
||||
}
|
||||
}
|
||||
}, [showSensors, isModelReady])
|
||||
|
||||
// Дополнительный эффект для задержки выделения сенсоров при открытии меню
|
||||
// ИСПРАВЛЕНО: Задержка применяется только при открытии панели Sensors
|
||||
useEffect(() => {
|
||||
if (showSensors && isModelReady) {
|
||||
const timer = setTimeout(() => {
|
||||
console.log('[NavigationPage] Delayed highlightAllSensors to TRUE')
|
||||
setHighlightAllSensors(true)
|
||||
}, 500) // Задержка 500мс для полной инициализации модели
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [showSensors, isModelReady])
|
||||
|
||||
const urlObjectId = searchParams.get('objectId')
|
||||
const urlObjectTitle = searchParams.get('objectTitle')
|
||||
const urlModelPath = searchParams.get('modelPath')
|
||||
const urlFocusSensorId = searchParams.get('focusSensorId')
|
||||
const objectId = currentObject.id || urlObjectId
|
||||
const objectTitle = currentObject.title || urlObjectTitle
|
||||
const [selectedModelPath, setSelectedModelPath] = useState<string>(urlModelPath || '')
|
||||
|
||||
|
||||
const handleModelLoaded = useCallback(() => {
|
||||
setIsModelReady(true)
|
||||
setModelError(null)
|
||||
}, [])
|
||||
|
||||
const handleModelError = useCallback((error: string) => {
|
||||
console.error('[NavigationPage] Model loading error:', error)
|
||||
setModelError(error)
|
||||
setIsModelReady(false)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedModelPath) {
|
||||
setIsModelReady(false);
|
||||
setModelError(null);
|
||||
// Сохраняем выбранную модель в URL для восстановления при возврате
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set('modelPath', selectedModelPath);
|
||||
window.history.replaceState(null, '', `?${params.toString()}`);
|
||||
}
|
||||
}, [selectedModelPath, searchParams]);
|
||||
|
||||
useEffect(() => {
|
||||
if (urlObjectId && (!currentObject.id || currentObject.id !== urlObjectId)) {
|
||||
setCurrentObject(urlObjectId, urlObjectTitle ?? currentObject.title ?? undefined)
|
||||
}
|
||||
}, [urlObjectId, urlObjectTitle, currentObject.id, currentObject.title, setCurrentObject])
|
||||
|
||||
// Восстановление выбранной модели из URL при загрузке страницы
|
||||
useEffect(() => {
|
||||
if (urlModelPath && !selectedModelPath) {
|
||||
setSelectedModelPath(urlModelPath);
|
||||
}
|
||||
}, [urlModelPath, selectedModelPath])
|
||||
|
||||
useEffect(() => {
|
||||
const loadDetectors = async () => {
|
||||
try {
|
||||
setDetectorsError(null)
|
||||
|
||||
// Если есть modelPath и objectId - фильтруем по зоне
|
||||
let zoneId: string | null = null
|
||||
if (selectedModelPath && objectId) {
|
||||
try {
|
||||
// Получаем зоны для объекта
|
||||
const zonesRes = await fetch(`/api/get-zones?objectId=${objectId}`, { cache: 'no-store' })
|
||||
if (zonesRes.ok) {
|
||||
const zonesResponse = await zonesRes.json()
|
||||
// API возвращает { success: true, data: [...] }
|
||||
const zonesData = zonesResponse?.data || zonesResponse
|
||||
console.log('[NavigationPage] Loaded zones:', { count: Array.isArray(zonesData) ? zonesData.length : 0, zonesData })
|
||||
// Ищем зону по model_path
|
||||
if (Array.isArray(zonesData)) {
|
||||
const zone = zonesData.find((z: any) => z.model_path === selectedModelPath)
|
||||
if (zone) {
|
||||
zoneId = zone.id
|
||||
console.log('[NavigationPage] Found zone for model_path:', { modelPath: selectedModelPath, zoneId })
|
||||
} else {
|
||||
console.log('[NavigationPage] No zone found for model_path:', selectedModelPath)
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[NavigationPage] Failed to load zones for filtering:', e)
|
||||
}
|
||||
}
|
||||
|
||||
// Загружаем датчики (с фильтром по зоне если найдена)
|
||||
const detectorsUrl = zoneId
|
||||
? `/api/get-detectors?zone_id=${zoneId}`
|
||||
: '/api/get-detectors'
|
||||
console.log('[NavigationPage] Loading detectors from:', detectorsUrl)
|
||||
|
||||
const res = await fetch(detectorsUrl, { cache: 'no-store' })
|
||||
const text = await res.text()
|
||||
let payload: any
|
||||
try { payload = JSON.parse(text) } catch { payload = text }
|
||||
console.log('[NavigationPage] GET /api/get-detectors', { status: res.status, payload })
|
||||
if (!res.ok) throw new Error(typeof payload === 'string' ? payload : (payload?.error || 'Не удалось получить детекторов'))
|
||||
const data = payload?.data ?? payload
|
||||
const detectors = (data?.detectors ?? {}) as Record<string, DetectorType>
|
||||
console.log('[NavigationPage] Received detectors count:', Object.keys(detectors).length)
|
||||
console.log('[NavigationPage] Sample detector keys:', Object.keys(detectors).slice(0, 5))
|
||||
setDetectorsData({ detectors })
|
||||
} catch (e: any) {
|
||||
console.error('Ошибка загрузки детекторов:', e)
|
||||
setDetectorsError(e?.message || 'Ошибка при загрузке детекторов')
|
||||
}
|
||||
}
|
||||
loadDetectors()
|
||||
}, [selectedModelPath, objectId])
|
||||
|
||||
const handleBackClick = () => {
|
||||
router.push('/dashboard')
|
||||
}
|
||||
|
||||
const handleDetectorMenuClick = (detector: DetectorType) => {
|
||||
// Для тестов. Выбор детектора.
|
||||
console.log('[NavigationPage] Selected detector click:', {
|
||||
detector_id: detector.detector_id,
|
||||
name: detector.name,
|
||||
serial_number: detector.serial_number,
|
||||
})
|
||||
|
||||
// Проверяем, что детектор имеет необходимые данные
|
||||
if (!detector || !detector.detector_id || !detector.serial_number) {
|
||||
console.warn('[NavigationPage] Invalid detector data, skipping menu display:', detector)
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedDetector?.serial_number === detector.serial_number && showDetectorMenu) {
|
||||
closeDetectorMenu()
|
||||
} else {
|
||||
setSelectedDetector(detector)
|
||||
setShowDetectorMenu(true)
|
||||
setFocusedSensorId(detector.serial_number)
|
||||
setShowAlertMenu(false)
|
||||
setSelectedAlert(null)
|
||||
// При открытии меню детектора - сбрасываем множественное выделение
|
||||
setHighlightAllSensors(false)
|
||||
}
|
||||
}
|
||||
|
||||
const closeDetectorMenu = () => {
|
||||
setShowDetectorMenu(false)
|
||||
setSelectedDetector(null)
|
||||
setFocusedSensorId(null)
|
||||
setSelectedAlert(null)
|
||||
// При закрытии меню детектора - выделяем все сенсоры снова
|
||||
setHighlightAllSensors(true)
|
||||
}
|
||||
|
||||
const handleNotificationClick = (notification: NotificationType) => {
|
||||
if (selectedNotification?.id === notification.id && showNotificationDetectorInfo) {
|
||||
setShowNotificationDetectorInfo(false)
|
||||
setSelectedNotification(null)
|
||||
} else {
|
||||
setSelectedNotification(notification)
|
||||
setShowNotificationDetectorInfo(true)
|
||||
}
|
||||
}
|
||||
|
||||
const closeNotificationDetectorInfo = () => {
|
||||
setShowNotificationDetectorInfo(false)
|
||||
setSelectedNotification(null)
|
||||
}
|
||||
|
||||
const closeAlertMenu = () => {
|
||||
setShowAlertMenu(false)
|
||||
setSelectedAlert(null)
|
||||
setFocusedSensorId(null)
|
||||
setSelectedDetector(null)
|
||||
// При закрытии меню алерта - выделяем все сенсоры снова
|
||||
setHighlightAllSensors(true)
|
||||
}
|
||||
|
||||
const handleAlertClick = (alert: AlertType) => {
|
||||
console.log('[NavigationPage] Alert clicked, focusing on detector in 3D scene:', alert)
|
||||
|
||||
const detector = Object.values(detectorsData.detectors).find(
|
||||
d => d.detector_id === alert.detector_id
|
||||
)
|
||||
|
||||
if (detector) {
|
||||
if (selectedAlert?.id === alert.id && showAlertMenu) {
|
||||
closeAlertMenu()
|
||||
} else {
|
||||
setSelectedAlert(alert)
|
||||
setShowAlertMenu(true)
|
||||
setFocusedSensorId(detector.serial_number)
|
||||
setShowDetectorMenu(false)
|
||||
setSelectedDetector(null)
|
||||
// При открытии меню алерта - сбрасываем множественное выделение
|
||||
setHighlightAllSensors(false)
|
||||
console.log('[NavigationPage] Showing AlertMenu for alert:', alert.detector_name)
|
||||
}
|
||||
} else {
|
||||
console.warn('[NavigationPage] Could not find detector for alert:', alert.detector_id)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSensorSelection = (serialNumber: string | null) => {
|
||||
if (serialNumber === null) {
|
||||
setFocusedSensorId(null);
|
||||
closeDetectorMenu();
|
||||
closeAlertMenu();
|
||||
// If we're in Sensors menu and no sensor is selected, highlight all sensors
|
||||
if (showSensors) {
|
||||
setHighlightAllSensors(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (focusedSensorId === serialNumber) {
|
||||
setFocusedSensorId(null);
|
||||
closeDetectorMenu();
|
||||
closeAlertMenu();
|
||||
// If we're in Sensors menu and deselected the current sensor, highlight all sensors
|
||||
if (showSensors) {
|
||||
setHighlightAllSensors(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// При выборе конкретного сенсора - сбрасываем множественное выделение
|
||||
setHighlightAllSensors(false)
|
||||
|
||||
const detector = Object.values(detectorsData?.detectors || {}).find(
|
||||
(d) => d.serial_number === serialNumber
|
||||
);
|
||||
|
||||
if (detector) {
|
||||
// Всегда показываем меню детектора для всех датчиков
|
||||
handleDetectorMenuClick(detector);
|
||||
} else {
|
||||
setFocusedSensorId(null);
|
||||
closeDetectorMenu();
|
||||
closeAlertMenu();
|
||||
// If we're in Sensors menu and no valid detector found, highlight all sensors
|
||||
if (showSensors) {
|
||||
setHighlightAllSensors(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Обработка focusSensorId из URL (при переходе из таблиц событий)
|
||||
useEffect(() => {
|
||||
if (urlFocusSensorId && isModelReady && detectorsData) {
|
||||
console.log('[NavigationPage] Setting focusSensorId from URL:', urlFocusSensorId)
|
||||
setFocusedSensorId(urlFocusSensorId)
|
||||
setHighlightAllSensors(false)
|
||||
|
||||
// Автоматически открываем тултип датчика
|
||||
setTimeout(() => {
|
||||
handleSensorSelection(urlFocusSensorId)
|
||||
}, 500) // Задержка для полной инициализации
|
||||
|
||||
// Очищаем URL от параметра после применения
|
||||
const newUrl = new URL(window.location.href)
|
||||
newUrl.searchParams.delete('focusSensorId')
|
||||
window.history.replaceState({}, '', newUrl.toString())
|
||||
}
|
||||
}, [urlFocusSensorId, isModelReady, detectorsData])
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
const s = (status || '').toLowerCase()
|
||||
switch (s) {
|
||||
case statusColors.STATUS_COLOR_CRITICAL:
|
||||
case 'critical':
|
||||
return 'Критический'
|
||||
case statusColors.STATUS_COLOR_WARNING:
|
||||
case 'warning':
|
||||
return 'Предупреждение'
|
||||
case statusColors.STATUS_COLOR_NORMAL:
|
||||
case 'normal':
|
||||
return 'Норма'
|
||||
default:
|
||||
return 'Неизвестно'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative flex h-screen bg-[#0e111a] overflow-hidden">
|
||||
<AnimatedBackground />
|
||||
<div className="relative z-20">
|
||||
<Sidebar
|
||||
activeItem={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex-1 flex flex-col">
|
||||
|
||||
{showMonitoring && (
|
||||
<div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<Monitoring
|
||||
onClose={closeMonitoring}
|
||||
onSelectModel={(path) => {
|
||||
console.log('[NavigationPage] Model selected:', path);
|
||||
setSelectedModelPath(path)
|
||||
setModelError(null)
|
||||
setIsModelReady(false)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showFloorNavigation && (
|
||||
<div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<FloorNavigation
|
||||
objectId={objectId || undefined}
|
||||
detectorsData={detectorsData}
|
||||
onDetectorMenuClick={handleDetectorMenuClick}
|
||||
onClose={closeFloorNavigation}
|
||||
is3DReady={isModelReady && !modelError}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showNotifications && (
|
||||
<div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<Notifications
|
||||
objectId={objectId || undefined}
|
||||
detectorsData={detectorsData}
|
||||
onNotificationClick={handleNotificationClick}
|
||||
onClose={closeNotifications}
|
||||
/>
|
||||
{detectorsError && (
|
||||
<div className="mt-2 text-sm text-red-400">{detectorsError}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showListOfDetectors && (
|
||||
<div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<ListOfDetectors
|
||||
objectId={objectId || undefined}
|
||||
detectorsData={detectorsData}
|
||||
onDetectorMenuClick={handleDetectorMenuClick}
|
||||
onClose={closeListOfDetectors}
|
||||
is3DReady={selectedModelPath ? !modelError : false}
|
||||
/>
|
||||
{detectorsError && (
|
||||
<div className="mt-2 text-sm text-red-400">{detectorsError}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showSensors && (
|
||||
<div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<Sensors
|
||||
objectId={objectId || undefined}
|
||||
detectorsData={detectorsData}
|
||||
onAlertClick={handleAlertClick}
|
||||
onClose={closeSensors}
|
||||
is3DReady={selectedModelPath ? !modelError : false}
|
||||
/>
|
||||
{detectorsError && (
|
||||
<div className="mt-2 text-sm text-red-400">{detectorsError}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showNotifications && showNotificationDetectorInfo && selectedNotification && (() => {
|
||||
const detectorData = Object.values(detectorsData.detectors).find(
|
||||
detector => detector.detector_id === selectedNotification.detector_id
|
||||
);
|
||||
return detectorData ? (
|
||||
<div className="absolute left-[500px] top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-30 w-[454px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<NotificationDetectorInfo
|
||||
detectorData={detectorData}
|
||||
onClose={closeNotificationDetectorInfo}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
})()}
|
||||
|
||||
{showFloorNavigation && showDetectorMenu && selectedDetector && (
|
||||
null
|
||||
)}
|
||||
|
||||
<header className="bg-[#161824] border-b border-gray-700 px-6 h-[73px] flex items-center">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={handleBackClick}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
aria-label="Назад к дашборду"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<nav className="flex items-center gap-2 text-sm">
|
||||
<span className="text-gray-400">Дашборд</span>
|
||||
<span className="text-gray-600">{'/'}</span>
|
||||
<span className="text-white">{objectTitle || 'Объект'}</span>
|
||||
<span className="text-gray-600">{'/'}</span>
|
||||
<span className="text-white">Навигация</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<div className="h-full">
|
||||
{modelError ? (
|
||||
<>
|
||||
{console.log('[NavigationPage] Rendering error message, modelError:', modelError)}
|
||||
<div className="h-full flex items-center justify-center bg-[#0e111a]">
|
||||
<div className="text-center p-8 bg-[#161824] rounded-lg border border-gray-700 max-w-md">
|
||||
<div className="text-red-400 text-lg font-semibold mb-4">
|
||||
Ошибка загрузки 3D модели
|
||||
</div>
|
||||
<div className="text-gray-300 mb-4">
|
||||
{modelError}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
Используйте навигацию по этажам для просмотра детекторов
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : !selectedModelPath ? (
|
||||
<div className="h-full flex items-center justify-center bg-[#0e111a]">
|
||||
<div className="text-center p-8 flex flex-col items-center">
|
||||
<Image
|
||||
src="/icons/logo.png"
|
||||
alt="AerBIM HT Monitor"
|
||||
width={300}
|
||||
height={41}
|
||||
className="mb-6"
|
||||
/>
|
||||
<div className="text-gray-300 text-lg">
|
||||
Выберите модель для отображения
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ModelViewer
|
||||
key={selectedModelPath || 'no-model'}
|
||||
modelPath={selectedModelPath}
|
||||
onSelectModel={(path) => {
|
||||
console.log('[NavigationPage] Model selected:', path);
|
||||
setSelectedModelPath(path)
|
||||
setModelError(null)
|
||||
setIsModelReady(false)
|
||||
}}
|
||||
onModelLoaded={handleModelLoaded}
|
||||
onError={handleModelError}
|
||||
activeMenu={showSensors ? 'sensors' : showFloorNavigation ? 'floor' : showListOfDetectors ? 'detectors' : null}
|
||||
focusSensorId={focusedSensorId}
|
||||
highlightAllSensors={showSensorHighlights && highlightAllSensors}
|
||||
sensorStatusMap={sensorStatusMap}
|
||||
isSensorSelectionEnabled={showSensors || showFloorNavigation || showListOfDetectors}
|
||||
onSensorPick={handleSensorSelection}
|
||||
renderOverlay={({ anchor }) => (
|
||||
<>
|
||||
{selectedAlert && showAlertMenu && anchor ? (
|
||||
<AlertMenu
|
||||
alert={selectedAlert}
|
||||
isOpen={true}
|
||||
onClose={closeAlertMenu}
|
||||
getStatusText={getStatusText}
|
||||
compact={true}
|
||||
anchor={anchor}
|
||||
/>
|
||||
) : selectedDetector && showDetectorMenu && anchor ? (
|
||||
<DetectorMenu
|
||||
detector={selectedDetector}
|
||||
isOpen={true}
|
||||
onClose={closeDetectorMenu}
|
||||
getStatusText={getStatusText}
|
||||
compact={true}
|
||||
anchor={anchor}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavigationPage
|
||||
687
frontend/app/(protected)/navigation/page.tsx — копия 3
Normal file
687
frontend/app/(protected)/navigation/page.tsx — копия 3
Normal file
@@ -0,0 +1,687 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect, useCallback, useState } from 'react'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import Image from 'next/image'
|
||||
import Sidebar from '../../../components/ui/Sidebar'
|
||||
import AnimatedBackground from '../../../components/ui/AnimatedBackground'
|
||||
import useNavigationStore from '../../store/navigationStore'
|
||||
import Monitoring from '../../../components/navigation/Monitoring'
|
||||
import FloorNavigation from '../../../components/navigation/FloorNavigation'
|
||||
import DetectorMenu from '../../../components/navigation/DetectorMenu'
|
||||
import ListOfDetectors from '../../../components/navigation/ListOfDetectors'
|
||||
import Sensors from '../../../components/navigation/Sensors'
|
||||
import AlertMenu from '../../../components/navigation/AlertMenu'
|
||||
import Notifications from '../../../components/notifications/Notifications'
|
||||
import NotificationDetectorInfo from '../../../components/notifications/NotificationDetectorInfo'
|
||||
import dynamic from 'next/dynamic'
|
||||
import type { ModelViewerProps } from '../../../components/model/ModelViewer'
|
||||
import * as statusColors from '../../../lib/statusColors'
|
||||
|
||||
const ModelViewer = dynamic<ModelViewerProps>(() => import('../../../components/model/ModelViewer'), {
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="w-full h-full flex items-center justify-center bg-[#0e111a]">
|
||||
<div className="text-gray-300 animate-pulse">Загрузка 3D-модуля…</div>
|
||||
</div>
|
||||
),
|
||||
})
|
||||
|
||||
interface DetectorType {
|
||||
detector_id: number
|
||||
name: string
|
||||
serial_number: string
|
||||
object: string
|
||||
status: string
|
||||
checked: boolean
|
||||
type: string
|
||||
detector_type: string
|
||||
location: string
|
||||
floor: number
|
||||
notifications: Array<{
|
||||
id: number
|
||||
type: string
|
||||
message: string
|
||||
timestamp: string
|
||||
acknowledged: boolean
|
||||
priority: string
|
||||
}>
|
||||
}
|
||||
|
||||
interface NotificationType {
|
||||
id: number
|
||||
detector_id: number
|
||||
detector_name: string
|
||||
type: string
|
||||
status: string
|
||||
message: string
|
||||
timestamp: string
|
||||
location: string
|
||||
object: string
|
||||
acknowledged: boolean
|
||||
priority: string
|
||||
}
|
||||
|
||||
interface AlertType {
|
||||
id: number
|
||||
detector_id: number
|
||||
detector_name: string
|
||||
type: string
|
||||
status: string
|
||||
message: string
|
||||
timestamp: string
|
||||
location: string
|
||||
object: string
|
||||
acknowledged: boolean
|
||||
priority: string
|
||||
}
|
||||
|
||||
const NavigationPage: React.FC = () => {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const {
|
||||
currentObject,
|
||||
setCurrentObject,
|
||||
showMonitoring,
|
||||
showFloorNavigation,
|
||||
showNotifications,
|
||||
showListOfDetectors,
|
||||
showSensors,
|
||||
selectedDetector,
|
||||
showDetectorMenu,
|
||||
selectedNotification,
|
||||
showNotificationDetectorInfo,
|
||||
selectedAlert,
|
||||
showAlertMenu,
|
||||
closeMonitoring,
|
||||
closeFloorNavigation,
|
||||
closeNotifications,
|
||||
closeListOfDetectors,
|
||||
closeSensors,
|
||||
setSelectedDetector,
|
||||
setShowDetectorMenu,
|
||||
setSelectedNotification,
|
||||
setShowNotificationDetectorInfo,
|
||||
setSelectedAlert,
|
||||
setShowAlertMenu,
|
||||
showSensorHighlights,
|
||||
toggleSensorHighlights
|
||||
} = useNavigationStore()
|
||||
|
||||
const [detectorsData, setDetectorsData] = useState<{ detectors: Record<string, DetectorType> }>({ detectors: {} })
|
||||
const [detectorsError, setDetectorsError] = useState<string | null>(null)
|
||||
const [modelError, setModelError] = useState<string | null>(null)
|
||||
const [isModelReady, setIsModelReady] = useState(false)
|
||||
const [focusedSensorId, setFocusedSensorId] = useState<string | null>(null)
|
||||
const [highlightAllSensors, setHighlightAllSensors] = useState(false)
|
||||
const sensorStatusMap = React.useMemo(() => {
|
||||
// Создаём карту статусов всегда для отображения цветов датчиков
|
||||
const map: Record<string, string> = {}
|
||||
Object.values(detectorsData.detectors).forEach(d => {
|
||||
if (d.serial_number && d.status) {
|
||||
map[String(d.serial_number).trim()] = d.status
|
||||
|
||||
// Логируем GLE-1
|
||||
if (d.serial_number === 'GLE-1') {
|
||||
console.log('[NavigationPage] GLE-1 status from API:', d.status)
|
||||
console.log('[NavigationPage] GLE-1 notifications:', d.notifications)
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log('[NavigationPage] sensorStatusMap created with', Object.keys(map).length, 'sensors')
|
||||
console.log('[NavigationPage] Sample sensor IDs in map:', Object.keys(map).slice(0, 5))
|
||||
return map
|
||||
}, [detectorsData])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedDetector === null && selectedAlert === null) {
|
||||
setFocusedSensorId(null);
|
||||
}
|
||||
}, [selectedDetector, selectedAlert]);
|
||||
|
||||
// Управление выделением всех сенсоров при открытии/закрытии меню Sensors
|
||||
// ИСПРАВЛЕНО: Подсветка датчиков остается включенной всегда, независимо от состояния панели Sensors
|
||||
useEffect(() => {
|
||||
console.log('[NavigationPage] showSensors changed:', showSensors, 'modelReady:', isModelReady)
|
||||
if (isModelReady) {
|
||||
// Всегда включаем подсветку всех сенсоров когда модель готова
|
||||
console.log('[NavigationPage] Setting highlightAllSensors to TRUE (always enabled)')
|
||||
setHighlightAllSensors(true)
|
||||
// Сбрасываем фокус только если панель Sensors закрыта
|
||||
if (!showSensors) {
|
||||
setFocusedSensorId(null)
|
||||
}
|
||||
}
|
||||
}, [showSensors, isModelReady])
|
||||
|
||||
// Дополнительный эффект для задержки выделения сенсоров при открытии меню
|
||||
// ИСПРАВЛЕНО: Задержка применяется только при открытии панели Sensors
|
||||
useEffect(() => {
|
||||
if (showSensors && isModelReady) {
|
||||
const timer = setTimeout(() => {
|
||||
console.log('[NavigationPage] Delayed highlightAllSensors to TRUE')
|
||||
setHighlightAllSensors(true)
|
||||
}, 500) // Задержка 500мс для полной инициализации модели
|
||||
|
||||
return () => clearTimeout(timer)
|
||||
}
|
||||
}, [showSensors, isModelReady])
|
||||
|
||||
const urlObjectId = searchParams.get('objectId')
|
||||
const urlObjectTitle = searchParams.get('objectTitle')
|
||||
const urlModelPath = searchParams.get('modelPath')
|
||||
const urlFocusSensorId = searchParams.get('focusSensorId')
|
||||
const objectId = currentObject.id || urlObjectId
|
||||
const objectTitle = currentObject.title || urlObjectTitle
|
||||
const [selectedModelPath, setSelectedModelPath] = useState<string>('')
|
||||
|
||||
|
||||
const handleModelLoaded = useCallback(() => {
|
||||
setIsModelReady(true)
|
||||
setModelError(null)
|
||||
}, [])
|
||||
|
||||
const handleModelError = useCallback((error: string) => {
|
||||
console.error('[NavigationPage] Model loading error:', error)
|
||||
setModelError(error)
|
||||
setIsModelReady(false)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedModelPath) {
|
||||
setIsModelReady(false);
|
||||
setModelError(null);
|
||||
}
|
||||
}, [selectedModelPath]);
|
||||
|
||||
useEffect(() => {
|
||||
if (urlObjectId && (!currentObject.id || currentObject.id !== urlObjectId)) {
|
||||
setCurrentObject(urlObjectId, urlObjectTitle ?? currentObject.title ?? undefined)
|
||||
}
|
||||
}, [urlObjectId, urlObjectTitle, currentObject.id, currentObject.title, setCurrentObject])
|
||||
|
||||
// Восстановление выбранной модели из URL при загрузке страницы (только если переход с focusSensorId)
|
||||
useEffect(() => {
|
||||
// Восстанавливаем modelPath только если есть focusSensorId (переход к конкретному датчику)
|
||||
if (urlModelPath && urlFocusSensorId && !selectedModelPath) {
|
||||
setSelectedModelPath(urlModelPath);
|
||||
}
|
||||
}, [urlModelPath, urlFocusSensorId, selectedModelPath])
|
||||
|
||||
// Автоматическая загрузка модели с order=0 при пустом selectedModelPath
|
||||
useEffect(() => {
|
||||
const loadDefaultModel = async () => {
|
||||
// Если модель уже выбрана или нет objectId - пропускаем
|
||||
if (selectedModelPath || !objectId) return;
|
||||
|
||||
try {
|
||||
console.log('[NavigationPage] Auto-loading model with order=0 for object:', objectId);
|
||||
const response = await fetch(`/api/get-zones?object_id=${objectId}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && Array.isArray(data.data)) {
|
||||
// Сортируем по order и берём первую
|
||||
const sorted = data.data.slice().sort((a: any, b: any) => {
|
||||
const oa = typeof a.order === 'number' ? a.order : 0;
|
||||
const ob = typeof b.order === 'number' ? b.order : 0;
|
||||
return oa - ob;
|
||||
});
|
||||
|
||||
if (sorted.length > 0 && sorted[0].model_path) {
|
||||
console.log('[NavigationPage] Auto-selected model with order=0:', sorted[0].model_path);
|
||||
setSelectedModelPath(sorted[0].model_path);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[NavigationPage] Failed to load default model:', error);
|
||||
}
|
||||
};
|
||||
|
||||
loadDefaultModel();
|
||||
}, [selectedModelPath, objectId])
|
||||
|
||||
useEffect(() => {
|
||||
const loadDetectors = async () => {
|
||||
try {
|
||||
setDetectorsError(null)
|
||||
|
||||
// Если есть modelPath и objectId - фильтруем по зоне
|
||||
let zoneId: string | null = null
|
||||
if (selectedModelPath && objectId) {
|
||||
try {
|
||||
// Получаем зоны для объекта
|
||||
const zonesRes = await fetch(`/api/get-zones?objectId=${objectId}`, { cache: 'no-store' })
|
||||
if (zonesRes.ok) {
|
||||
const zonesResponse = await zonesRes.json()
|
||||
// API возвращает { success: true, data: [...] }
|
||||
const zonesData = zonesResponse?.data || zonesResponse
|
||||
console.log('[NavigationPage] Loaded zones:', { count: Array.isArray(zonesData) ? zonesData.length : 0, zonesData })
|
||||
// Ищем зону по model_path
|
||||
if (Array.isArray(zonesData)) {
|
||||
const zone = zonesData.find((z: any) => z.model_path === selectedModelPath)
|
||||
if (zone) {
|
||||
zoneId = zone.id
|
||||
console.log('[NavigationPage] Found zone for model_path:', { modelPath: selectedModelPath, zoneId })
|
||||
} else {
|
||||
console.log('[NavigationPage] No zone found for model_path:', selectedModelPath)
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('[NavigationPage] Failed to load zones for filtering:', e)
|
||||
}
|
||||
}
|
||||
|
||||
// Загружаем датчики (с фильтром по зоне если найдена)
|
||||
const detectorsUrl = zoneId
|
||||
? `/api/get-detectors?zone_id=${zoneId}`
|
||||
: '/api/get-detectors'
|
||||
console.log('[NavigationPage] Loading detectors from:', detectorsUrl)
|
||||
|
||||
const res = await fetch(detectorsUrl, { cache: 'no-store' })
|
||||
const text = await res.text()
|
||||
let payload: any
|
||||
try { payload = JSON.parse(text) } catch { payload = text }
|
||||
console.log('[NavigationPage] GET /api/get-detectors', { status: res.status, payload })
|
||||
if (!res.ok) throw new Error(typeof payload === 'string' ? payload : (payload?.error || 'Не удалось получить детекторов'))
|
||||
const data = payload?.data ?? payload
|
||||
const detectors = (data?.detectors ?? {}) as Record<string, DetectorType>
|
||||
console.log('[NavigationPage] Received detectors count:', Object.keys(detectors).length)
|
||||
console.log('[NavigationPage] Sample detector keys:', Object.keys(detectors).slice(0, 5))
|
||||
setDetectorsData({ detectors })
|
||||
} catch (e: any) {
|
||||
console.error('Ошибка загрузки детекторов:', e)
|
||||
setDetectorsError(e?.message || 'Ошибка при загрузке детекторов')
|
||||
}
|
||||
}
|
||||
loadDetectors()
|
||||
}, [selectedModelPath, objectId])
|
||||
|
||||
const handleBackClick = () => {
|
||||
router.push('/dashboard')
|
||||
}
|
||||
|
||||
const handleDetectorMenuClick = (detector: DetectorType) => {
|
||||
// Для тестов. Выбор детектора.
|
||||
console.log('[NavigationPage] Selected detector click:', {
|
||||
detector_id: detector.detector_id,
|
||||
name: detector.name,
|
||||
serial_number: detector.serial_number,
|
||||
})
|
||||
|
||||
// Проверяем, что детектор имеет необходимые данные
|
||||
if (!detector || !detector.detector_id || !detector.serial_number) {
|
||||
console.warn('[NavigationPage] Invalid detector data, skipping menu display:', detector)
|
||||
return
|
||||
}
|
||||
|
||||
if (selectedDetector?.serial_number === detector.serial_number && showDetectorMenu) {
|
||||
closeDetectorMenu()
|
||||
} else {
|
||||
setSelectedDetector(detector)
|
||||
setShowDetectorMenu(true)
|
||||
setFocusedSensorId(detector.serial_number)
|
||||
setShowAlertMenu(false)
|
||||
setSelectedAlert(null)
|
||||
// При открытии меню детектора - сбрасываем множественное выделение
|
||||
setHighlightAllSensors(false)
|
||||
}
|
||||
}
|
||||
|
||||
const closeDetectorMenu = () => {
|
||||
setShowDetectorMenu(false)
|
||||
setSelectedDetector(null)
|
||||
setFocusedSensorId(null)
|
||||
setSelectedAlert(null)
|
||||
// При закрытии меню детектора - выделяем все сенсоры снова
|
||||
setHighlightAllSensors(true)
|
||||
}
|
||||
|
||||
const handleNotificationClick = (notification: NotificationType) => {
|
||||
if (selectedNotification?.id === notification.id && showNotificationDetectorInfo) {
|
||||
setShowNotificationDetectorInfo(false)
|
||||
setSelectedNotification(null)
|
||||
} else {
|
||||
setSelectedNotification(notification)
|
||||
setShowNotificationDetectorInfo(true)
|
||||
}
|
||||
}
|
||||
|
||||
const closeNotificationDetectorInfo = () => {
|
||||
setShowNotificationDetectorInfo(false)
|
||||
setSelectedNotification(null)
|
||||
}
|
||||
|
||||
const closeAlertMenu = () => {
|
||||
setShowAlertMenu(false)
|
||||
setSelectedAlert(null)
|
||||
setFocusedSensorId(null)
|
||||
setSelectedDetector(null)
|
||||
// При закрытии меню алерта - выделяем все сенсоры снова
|
||||
setHighlightAllSensors(true)
|
||||
}
|
||||
|
||||
const handleAlertClick = (alert: AlertType) => {
|
||||
console.log('[NavigationPage] Alert clicked, focusing on detector in 3D scene:', alert)
|
||||
|
||||
const detector = Object.values(detectorsData.detectors).find(
|
||||
d => d.detector_id === alert.detector_id
|
||||
)
|
||||
|
||||
if (detector) {
|
||||
if (selectedAlert?.id === alert.id && showAlertMenu) {
|
||||
closeAlertMenu()
|
||||
} else {
|
||||
setSelectedAlert(alert)
|
||||
setShowAlertMenu(true)
|
||||
setFocusedSensorId(detector.serial_number)
|
||||
setShowDetectorMenu(false)
|
||||
setSelectedDetector(null)
|
||||
// При открытии меню алерта - сбрасываем множественное выделение
|
||||
setHighlightAllSensors(false)
|
||||
console.log('[NavigationPage] Showing AlertMenu for alert:', alert.detector_name)
|
||||
}
|
||||
} else {
|
||||
console.warn('[NavigationPage] Could not find detector for alert:', alert.detector_id)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSensorSelection = (serialNumber: string | null) => {
|
||||
if (serialNumber === null) {
|
||||
setFocusedSensorId(null);
|
||||
closeDetectorMenu();
|
||||
closeAlertMenu();
|
||||
// If we're in Sensors menu and no sensor is selected, highlight all sensors
|
||||
if (showSensors) {
|
||||
setHighlightAllSensors(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (focusedSensorId === serialNumber) {
|
||||
setFocusedSensorId(null);
|
||||
closeDetectorMenu();
|
||||
closeAlertMenu();
|
||||
// If we're in Sensors menu and deselected the current sensor, highlight all sensors
|
||||
if (showSensors) {
|
||||
setHighlightAllSensors(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// При выборе конкретного сенсора - сбрасываем множественное выделение
|
||||
setHighlightAllSensors(false)
|
||||
|
||||
const detector = Object.values(detectorsData?.detectors || {}).find(
|
||||
(d) => d.serial_number === serialNumber
|
||||
);
|
||||
|
||||
if (detector) {
|
||||
// Всегда показываем меню детектора для всех датчиков
|
||||
handleDetectorMenuClick(detector);
|
||||
} else {
|
||||
setFocusedSensorId(null);
|
||||
closeDetectorMenu();
|
||||
closeAlertMenu();
|
||||
// If we're in Sensors menu and no valid detector found, highlight all sensors
|
||||
if (showSensors) {
|
||||
setHighlightAllSensors(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Обработка focusSensorId из URL (при переходе из таблиц событий)
|
||||
useEffect(() => {
|
||||
if (urlFocusSensorId && isModelReady && detectorsData) {
|
||||
console.log('[NavigationPage] Setting focusSensorId from URL:', urlFocusSensorId)
|
||||
setFocusedSensorId(urlFocusSensorId)
|
||||
setHighlightAllSensors(false)
|
||||
|
||||
// Автоматически открываем тултип датчика
|
||||
setTimeout(() => {
|
||||
handleSensorSelection(urlFocusSensorId)
|
||||
}, 500) // Задержка для полной инициализации
|
||||
|
||||
// Очищаем URL от параметра после применения
|
||||
const newUrl = new URL(window.location.href)
|
||||
newUrl.searchParams.delete('focusSensorId')
|
||||
window.history.replaceState({}, '', newUrl.toString())
|
||||
}
|
||||
}, [urlFocusSensorId, isModelReady, detectorsData])
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
const s = (status || '').toLowerCase()
|
||||
switch (s) {
|
||||
case statusColors.STATUS_COLOR_CRITICAL:
|
||||
case 'critical':
|
||||
return 'Критический'
|
||||
case statusColors.STATUS_COLOR_WARNING:
|
||||
case 'warning':
|
||||
return 'Предупреждение'
|
||||
case statusColors.STATUS_COLOR_NORMAL:
|
||||
case 'normal':
|
||||
return 'Норма'
|
||||
default:
|
||||
return 'Неизвестно'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative flex h-screen bg-[#0e111a] overflow-hidden">
|
||||
<AnimatedBackground />
|
||||
<div className="relative z-20">
|
||||
<Sidebar
|
||||
activeItem={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex-1 flex flex-col">
|
||||
|
||||
{showMonitoring && (
|
||||
<div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<Monitoring
|
||||
onClose={closeMonitoring}
|
||||
onSelectModel={(path) => {
|
||||
console.log('[NavigationPage] Model selected:', path);
|
||||
setSelectedModelPath(path)
|
||||
setModelError(null)
|
||||
setIsModelReady(false)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showFloorNavigation && (
|
||||
<div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<FloorNavigation
|
||||
objectId={objectId || undefined}
|
||||
detectorsData={detectorsData}
|
||||
onDetectorMenuClick={handleDetectorMenuClick}
|
||||
onClose={closeFloorNavigation}
|
||||
is3DReady={isModelReady && !modelError}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showNotifications && (
|
||||
<div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<Notifications
|
||||
objectId={objectId || undefined}
|
||||
detectorsData={detectorsData}
|
||||
onNotificationClick={handleNotificationClick}
|
||||
onClose={closeNotifications}
|
||||
/>
|
||||
{detectorsError && (
|
||||
<div className="mt-2 text-sm text-red-400">{detectorsError}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showListOfDetectors && (
|
||||
<div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<ListOfDetectors
|
||||
objectId={objectId || undefined}
|
||||
detectorsData={detectorsData}
|
||||
onDetectorMenuClick={handleDetectorMenuClick}
|
||||
onClose={closeListOfDetectors}
|
||||
is3DReady={selectedModelPath ? !modelError : false}
|
||||
/>
|
||||
{detectorsError && (
|
||||
<div className="mt-2 text-sm text-red-400">{detectorsError}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showSensors && (
|
||||
<div className="absolute left-0 top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<Sensors
|
||||
objectId={objectId || undefined}
|
||||
detectorsData={detectorsData}
|
||||
onAlertClick={handleAlertClick}
|
||||
onClose={closeSensors}
|
||||
is3DReady={selectedModelPath ? !modelError : false}
|
||||
/>
|
||||
{detectorsError && (
|
||||
<div className="mt-2 text-sm text-red-400">{detectorsError}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showNotifications && showNotificationDetectorInfo && selectedNotification && (() => {
|
||||
const detectorData = Object.values(detectorsData.detectors).find(
|
||||
detector => detector.detector_id === selectedNotification.detector_id
|
||||
);
|
||||
return detectorData ? (
|
||||
<div className="absolute left-[500px] top-[73px] bottom-0 bg-[#161824] border-r border-gray-700 z-30 w-[454px]">
|
||||
<div className="h-full overflow-auto p-4">
|
||||
<NotificationDetectorInfo
|
||||
detectorData={detectorData}
|
||||
onClose={closeNotificationDetectorInfo}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
})()}
|
||||
|
||||
{showFloorNavigation && showDetectorMenu && selectedDetector && (
|
||||
null
|
||||
)}
|
||||
|
||||
<header className="bg-[#161824] border-b border-gray-700 px-6 h-[73px] flex items-center">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={handleBackClick}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
aria-label="Назад к дашборду"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
<nav className="flex items-center gap-2 text-sm">
|
||||
<span className="text-gray-400">Дашборд</span>
|
||||
<span className="text-gray-600">{'/'}</span>
|
||||
<span className="text-white">{objectTitle || 'Объект'}</span>
|
||||
<span className="text-gray-600">{'/'}</span>
|
||||
<span className="text-white">Навигация</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<div className="h-full">
|
||||
{modelError ? (
|
||||
<>
|
||||
{console.log('[NavigationPage] Rendering error message, modelError:', modelError)}
|
||||
<div className="h-full flex items-center justify-center bg-[#0e111a]">
|
||||
<div className="text-center p-8 bg-[#161824] rounded-lg border border-gray-700 max-w-md">
|
||||
<div className="text-red-400 text-lg font-semibold mb-4">
|
||||
Ошибка загрузки 3D модели
|
||||
</div>
|
||||
<div className="text-gray-300 mb-4">
|
||||
{modelError}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
Используйте навигацию по этажам для просмотра детекторов
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : !selectedModelPath ? (
|
||||
<div className="h-full flex items-center justify-center bg-[#0e111a]">
|
||||
<div className="text-center p-8 flex flex-col items-center">
|
||||
<Image
|
||||
src="/icons/logo.png"
|
||||
alt="AerBIM HT Monitor"
|
||||
width={300}
|
||||
height={41}
|
||||
className="mb-6"
|
||||
/>
|
||||
<div className="text-gray-300 text-lg">
|
||||
Выберите модель для отображения
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<ModelViewer
|
||||
key={selectedModelPath || 'no-model'}
|
||||
modelPath={selectedModelPath}
|
||||
onSelectModel={(path) => {
|
||||
console.log('[NavigationPage] Model selected:', path);
|
||||
setSelectedModelPath(path)
|
||||
setModelError(null)
|
||||
setIsModelReady(false)
|
||||
}}
|
||||
onModelLoaded={handleModelLoaded}
|
||||
onError={handleModelError}
|
||||
activeMenu={showSensors ? 'sensors' : showFloorNavigation ? 'floor' : showListOfDetectors ? 'detectors' : null}
|
||||
focusSensorId={focusedSensorId}
|
||||
highlightAllSensors={showSensorHighlights && highlightAllSensors}
|
||||
sensorStatusMap={sensorStatusMap}
|
||||
isSensorSelectionEnabled={showSensors || showFloorNavigation || showListOfDetectors}
|
||||
onSensorPick={handleSensorSelection}
|
||||
renderOverlay={({ anchor }) => (
|
||||
<>
|
||||
{selectedAlert && showAlertMenu && anchor ? (
|
||||
<AlertMenu
|
||||
alert={selectedAlert}
|
||||
isOpen={true}
|
||||
onClose={closeAlertMenu}
|
||||
getStatusText={getStatusText}
|
||||
compact={true}
|
||||
anchor={anchor}
|
||||
/>
|
||||
) : selectedDetector && showDetectorMenu && anchor ? (
|
||||
<DetectorMenu
|
||||
detector={selectedDetector}
|
||||
isOpen={true}
|
||||
onClose={closeDetectorMenu}
|
||||
getStatusText={getStatusText}
|
||||
compact={true}
|
||||
anchor={anchor}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavigationPage
|
||||
Reference in New Issue
Block a user