Добавлена иконка на боковой тултип для отображения/скрытия подсветки датчиков на модели
This commit is contained in:
@@ -103,7 +103,9 @@ const NavigationPage: React.FC = () => {
|
|||||||
setSelectedNotification,
|
setSelectedNotification,
|
||||||
setShowNotificationDetectorInfo,
|
setShowNotificationDetectorInfo,
|
||||||
setSelectedAlert,
|
setSelectedAlert,
|
||||||
setShowAlertMenu
|
setShowAlertMenu,
|
||||||
|
showSensorHighlights,
|
||||||
|
toggleSensorHighlights
|
||||||
} = useNavigationStore()
|
} = useNavigationStore()
|
||||||
|
|
||||||
const [detectorsData, setDetectorsData] = useState<{ detectors: Record<string, DetectorType> }>({ detectors: {} })
|
const [detectorsData, setDetectorsData] = useState<{ detectors: Record<string, DetectorType> }>({ detectors: {} })
|
||||||
@@ -574,7 +576,7 @@ const NavigationPage: React.FC = () => {
|
|||||||
onError={handleModelError}
|
onError={handleModelError}
|
||||||
activeMenu={showSensors ? 'sensors' : showFloorNavigation ? 'floor' : showListOfDetectors ? 'detectors' : null}
|
activeMenu={showSensors ? 'sensors' : showFloorNavigation ? 'floor' : showListOfDetectors ? 'detectors' : null}
|
||||||
focusSensorId={focusedSensorId}
|
focusSensorId={focusedSensorId}
|
||||||
highlightAllSensors={highlightAllSensors}
|
highlightAllSensors={showSensorHighlights && highlightAllSensors}
|
||||||
sensorStatusMap={sensorStatusMap}
|
sensorStatusMap={sensorStatusMap}
|
||||||
isSensorSelectionEnabled={showSensors || showFloorNavigation || showListOfDetectors}
|
isSensorSelectionEnabled={showSensors || showFloorNavigation || showListOfDetectors}
|
||||||
onSensorPick={handleSensorSelection}
|
onSensorPick={handleSensorSelection}
|
||||||
|
|||||||
613
frontend/app/(protected)/navigation/page.tsx — копия 2
Normal file
613
frontend/app/(protected)/navigation/page.tsx — копия 2
Normal file
@@ -0,0 +1,613 @@
|
|||||||
|
'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
|
||||||
|
} = 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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
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 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)
|
||||||
|
const res = await fetch('/api/get-detectors', { 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()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
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) {
|
||||||
|
if (showFloorNavigation || showListOfDetectors) {
|
||||||
|
handleDetectorMenuClick(detector);
|
||||||
|
} else if (detector.notifications && detector.notifications.length > 0) {
|
||||||
|
const sortedNotifications = [...detector.notifications].sort((a, b) => {
|
||||||
|
const priorityOrder: { [key: string]: number } = { critical: 0, warning: 1, info: 2 };
|
||||||
|
return priorityOrder[a.priority.toLowerCase()] - priorityOrder[b.priority.toLowerCase()];
|
||||||
|
});
|
||||||
|
const notification = sortedNotifications[0];
|
||||||
|
const alert: AlertType = {
|
||||||
|
...notification,
|
||||||
|
detector_id: detector.detector_id,
|
||||||
|
detector_name: detector.name,
|
||||||
|
location: detector.location,
|
||||||
|
object: detector.object,
|
||||||
|
status: detector.status,
|
||||||
|
type: notification.type || 'info',
|
||||||
|
};
|
||||||
|
handleAlertClick(alert);
|
||||||
|
} else {
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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={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
|
||||||
@@ -68,6 +68,7 @@ export interface NavigationStore {
|
|||||||
showNotifications: boolean
|
showNotifications: boolean
|
||||||
showListOfDetectors: boolean
|
showListOfDetectors: boolean
|
||||||
showSensors: boolean
|
showSensors: boolean
|
||||||
|
showSensorHighlights: boolean
|
||||||
|
|
||||||
selectedDetector: DetectorType | null
|
selectedDetector: DetectorType | null
|
||||||
showDetectorMenu: boolean
|
showDetectorMenu: boolean
|
||||||
@@ -100,6 +101,8 @@ export interface NavigationStore {
|
|||||||
closeListOfDetectors: () => void
|
closeListOfDetectors: () => void
|
||||||
openSensors: () => void
|
openSensors: () => void
|
||||||
closeSensors: () => void
|
closeSensors: () => void
|
||||||
|
toggleSensorHighlights: () => void
|
||||||
|
setSensorHighlights: (show: boolean) => void
|
||||||
|
|
||||||
closeAllMenus: () => void
|
closeAllMenus: () => void
|
||||||
clearSelections: () => void
|
clearSelections: () => void
|
||||||
@@ -137,6 +140,7 @@ const useNavigationStore = create<NavigationStore>()(
|
|||||||
showNotifications: false,
|
showNotifications: false,
|
||||||
showListOfDetectors: false,
|
showListOfDetectors: false,
|
||||||
showSensors: false,
|
showSensors: false,
|
||||||
|
showSensorHighlights: true,
|
||||||
|
|
||||||
selectedDetector: null,
|
selectedDetector: null,
|
||||||
showDetectorMenu: false,
|
showDetectorMenu: false,
|
||||||
@@ -316,6 +320,9 @@ const useNavigationStore = create<NavigationStore>()(
|
|||||||
currentSubmenu: null
|
currentSubmenu: null
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
toggleSensorHighlights: () => set((state) => ({ showSensorHighlights: !state.showSensorHighlights })),
|
||||||
|
setSensorHighlights: (show: boolean) => set({ showSensorHighlights: show }),
|
||||||
|
|
||||||
closeAllMenus: () => {
|
closeAllMenus: () => {
|
||||||
set({
|
set({
|
||||||
showMonitoring: false,
|
showMonitoring: false,
|
||||||
|
|||||||
373
frontend/app/store/navigationStore — копия.ts
Normal file
373
frontend/app/store/navigationStore — копия.ts
Normal file
@@ -0,0 +1,373 @@
|
|||||||
|
import { create } from 'zustand'
|
||||||
|
import { persist } from 'zustand/middleware'
|
||||||
|
import type { Zone } from '@/app/types'
|
||||||
|
|
||||||
|
export interface DetectorType {
|
||||||
|
detector_id: number
|
||||||
|
name: string
|
||||||
|
serial_number: string
|
||||||
|
object: string
|
||||||
|
status: string
|
||||||
|
type: string
|
||||||
|
detector_type: string
|
||||||
|
location: string
|
||||||
|
floor: number
|
||||||
|
checked: boolean
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NavigationStore {
|
||||||
|
currentObject: { id: string | undefined; title: string | undefined }
|
||||||
|
navigationHistory: string[]
|
||||||
|
currentSubmenu: string | null
|
||||||
|
currentModelPath: string | null
|
||||||
|
|
||||||
|
// Состояния Зон
|
||||||
|
currentZones: Zone[]
|
||||||
|
zonesCache: Record<string, Zone[]>
|
||||||
|
zonesLoading: boolean
|
||||||
|
zonesError: string | null
|
||||||
|
|
||||||
|
showMonitoring: boolean
|
||||||
|
showFloorNavigation: boolean
|
||||||
|
showNotifications: boolean
|
||||||
|
showListOfDetectors: boolean
|
||||||
|
showSensors: boolean
|
||||||
|
|
||||||
|
selectedDetector: DetectorType | null
|
||||||
|
showDetectorMenu: boolean
|
||||||
|
selectedNotification: NotificationType | null
|
||||||
|
showNotificationDetectorInfo: boolean
|
||||||
|
selectedAlert: AlertType | null
|
||||||
|
showAlertMenu: boolean
|
||||||
|
|
||||||
|
setCurrentObject: (id: string | undefined, title: string | undefined) => void
|
||||||
|
clearCurrentObject: () => void
|
||||||
|
addToHistory: (path: string) => void
|
||||||
|
goBack: () => string | null
|
||||||
|
setCurrentModelPath: (path: string) => void
|
||||||
|
|
||||||
|
setCurrentSubmenu: (submenu: string | null) => void
|
||||||
|
clearSubmenu: () => void
|
||||||
|
|
||||||
|
// Действия с зонами
|
||||||
|
loadZones: (objectId: string) => Promise<void>
|
||||||
|
setZones: (zones: Zone[]) => void
|
||||||
|
clearZones: () => void
|
||||||
|
|
||||||
|
openMonitoring: () => void
|
||||||
|
closeMonitoring: () => void
|
||||||
|
openFloorNavigation: () => void
|
||||||
|
closeFloorNavigation: () => void
|
||||||
|
openNotifications: () => void
|
||||||
|
closeNotifications: () => void
|
||||||
|
openListOfDetectors: () => void
|
||||||
|
closeListOfDetectors: () => void
|
||||||
|
openSensors: () => void
|
||||||
|
closeSensors: () => void
|
||||||
|
|
||||||
|
closeAllMenus: () => void
|
||||||
|
clearSelections: () => void
|
||||||
|
|
||||||
|
setSelectedDetector: (detector: DetectorType | null) => void
|
||||||
|
setShowDetectorMenu: (show: boolean) => void
|
||||||
|
setSelectedNotification: (notification: NotificationType | null) => void
|
||||||
|
setShowNotificationDetectorInfo: (show: boolean) => void
|
||||||
|
setSelectedAlert: (alert: AlertType | null) => void
|
||||||
|
setShowAlertMenu: (show: boolean) => void
|
||||||
|
|
||||||
|
isOnNavigationPage: () => boolean
|
||||||
|
getCurrentRoute: () => string | null
|
||||||
|
getActiveSidebarItem: () => number
|
||||||
|
}
|
||||||
|
|
||||||
|
const useNavigationStore = create<NavigationStore>()(
|
||||||
|
persist(
|
||||||
|
(set, get) => ({
|
||||||
|
currentObject: {
|
||||||
|
id: undefined,
|
||||||
|
title: undefined,
|
||||||
|
},
|
||||||
|
navigationHistory: [],
|
||||||
|
currentSubmenu: null,
|
||||||
|
currentModelPath: null,
|
||||||
|
|
||||||
|
currentZones: [],
|
||||||
|
zonesCache: {},
|
||||||
|
zonesLoading: false,
|
||||||
|
zonesError: null,
|
||||||
|
|
||||||
|
showMonitoring: false,
|
||||||
|
showFloorNavigation: false,
|
||||||
|
showNotifications: false,
|
||||||
|
showListOfDetectors: false,
|
||||||
|
showSensors: false,
|
||||||
|
|
||||||
|
selectedDetector: null,
|
||||||
|
showDetectorMenu: false,
|
||||||
|
selectedNotification: null,
|
||||||
|
showNotificationDetectorInfo: false,
|
||||||
|
selectedAlert: null,
|
||||||
|
showAlertMenu: false,
|
||||||
|
|
||||||
|
setCurrentObject: (id: string | undefined, title: string | undefined) =>
|
||||||
|
set({ currentObject: { id, title } }),
|
||||||
|
|
||||||
|
clearCurrentObject: () =>
|
||||||
|
set({ currentObject: { id: undefined, title: undefined } }),
|
||||||
|
|
||||||
|
setCurrentModelPath: (path: string) => set({ currentModelPath: path }),
|
||||||
|
|
||||||
|
addToHistory: (path: string) => {
|
||||||
|
const { navigationHistory } = get()
|
||||||
|
const newHistory = [...navigationHistory, path]
|
||||||
|
if (newHistory.length > 10) {
|
||||||
|
newHistory.shift()
|
||||||
|
}
|
||||||
|
set({ navigationHistory: newHistory })
|
||||||
|
},
|
||||||
|
|
||||||
|
goBack: () => {
|
||||||
|
const { navigationHistory } = get()
|
||||||
|
if (navigationHistory.length > 1) {
|
||||||
|
const newHistory = [...navigationHistory]
|
||||||
|
newHistory.pop()
|
||||||
|
const previousPage = newHistory.pop()
|
||||||
|
set({ navigationHistory: newHistory })
|
||||||
|
return previousPage || null
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
|
||||||
|
setCurrentSubmenu: (submenu: string | null) =>
|
||||||
|
set({ currentSubmenu: submenu }),
|
||||||
|
|
||||||
|
clearSubmenu: () =>
|
||||||
|
set({ currentSubmenu: null }),
|
||||||
|
|
||||||
|
loadZones: async (objectId: string) => {
|
||||||
|
const cache = get().zonesCache
|
||||||
|
const cached = cache[objectId]
|
||||||
|
const hasCached = Array.isArray(cached) && cached.length > 0
|
||||||
|
if (hasCached) {
|
||||||
|
// Показываем кэшированные зоны сразу, но обновляем в фоне
|
||||||
|
set({ currentZones: cached, zonesLoading: true, zonesError: null })
|
||||||
|
} else {
|
||||||
|
set({ zonesLoading: true, zonesError: null })
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/get-zones?objectId=${encodeURIComponent(objectId)}`, { cache: 'no-store' })
|
||||||
|
const text = await res.text()
|
||||||
|
let payload: string | Record<string, unknown>
|
||||||
|
try { payload = JSON.parse(text) } catch { payload = text }
|
||||||
|
if (!res.ok) throw new Error(typeof payload === 'string' ? payload : (payload?.error as string || 'Не удалось получить зоны'))
|
||||||
|
const zones: Zone[] = typeof payload === 'string' ? [] :
|
||||||
|
Array.isArray(payload?.data) ? payload.data as Zone[] :
|
||||||
|
(payload?.data && typeof payload.data === 'object' && 'zones' in payload.data ? (payload.data as { zones?: Zone[] }).zones :
|
||||||
|
payload?.zones ? payload.zones as Zone[] : []) || []
|
||||||
|
const normalized = zones.map((z) => ({
|
||||||
|
...z,
|
||||||
|
image_path: z.image_path ?? null,
|
||||||
|
}))
|
||||||
|
set((state) => ({
|
||||||
|
currentZones: normalized,
|
||||||
|
zonesCache: { ...state.zonesCache, [objectId]: normalized },
|
||||||
|
zonesLoading: false,
|
||||||
|
zonesError: null,
|
||||||
|
}))
|
||||||
|
} catch (e: unknown) {
|
||||||
|
set({ zonesLoading: false, zonesError: (e as Error)?.message || 'Ошибка при загрузке зон' })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setZones: (zones: Zone[]) => set({ currentZones: zones }),
|
||||||
|
clearZones: () => set({ currentZones: [] }),
|
||||||
|
|
||||||
|
openMonitoring: () => {
|
||||||
|
set({
|
||||||
|
showMonitoring: true,
|
||||||
|
showFloorNavigation: false,
|
||||||
|
showNotifications: false,
|
||||||
|
showListOfDetectors: false,
|
||||||
|
currentSubmenu: 'monitoring',
|
||||||
|
showDetectorMenu: false,
|
||||||
|
selectedDetector: null,
|
||||||
|
showNotificationDetectorInfo: false,
|
||||||
|
selectedNotification: null,
|
||||||
|
zonesError: null // Очищаем ошибку зон при открытии мониторинга
|
||||||
|
})
|
||||||
|
const objId = get().currentObject.id
|
||||||
|
if (objId) {
|
||||||
|
// Вызываем загрузку зон сразу, но обновляем в фоне
|
||||||
|
get().loadZones(objId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
closeMonitoring: () => set({
|
||||||
|
showMonitoring: false,
|
||||||
|
currentSubmenu: null
|
||||||
|
}),
|
||||||
|
|
||||||
|
openFloorNavigation: () => set({
|
||||||
|
showFloorNavigation: true,
|
||||||
|
showMonitoring: false,
|
||||||
|
showNotifications: false,
|
||||||
|
showListOfDetectors: false,
|
||||||
|
currentSubmenu: 'floors',
|
||||||
|
showNotificationDetectorInfo: false,
|
||||||
|
selectedNotification: null
|
||||||
|
}),
|
||||||
|
|
||||||
|
closeFloorNavigation: () => set({
|
||||||
|
showFloorNavigation: false,
|
||||||
|
showDetectorMenu: false,
|
||||||
|
selectedDetector: null,
|
||||||
|
currentSubmenu: null
|
||||||
|
}),
|
||||||
|
|
||||||
|
openNotifications: () => set({
|
||||||
|
showNotifications: true,
|
||||||
|
showMonitoring: false,
|
||||||
|
showFloorNavigation: false,
|
||||||
|
showListOfDetectors: false,
|
||||||
|
currentSubmenu: 'notifications',
|
||||||
|
showDetectorMenu: false,
|
||||||
|
selectedDetector: null
|
||||||
|
}),
|
||||||
|
|
||||||
|
closeNotifications: () => set({
|
||||||
|
showNotifications: false,
|
||||||
|
showNotificationDetectorInfo: false,
|
||||||
|
selectedNotification: null,
|
||||||
|
currentSubmenu: null
|
||||||
|
}),
|
||||||
|
|
||||||
|
openListOfDetectors: () => set({
|
||||||
|
showListOfDetectors: true,
|
||||||
|
showMonitoring: false,
|
||||||
|
showFloorNavigation: false,
|
||||||
|
showNotifications: false,
|
||||||
|
currentSubmenu: 'detectors',
|
||||||
|
showDetectorMenu: false,
|
||||||
|
selectedDetector: null,
|
||||||
|
showNotificationDetectorInfo: false,
|
||||||
|
selectedNotification: null
|
||||||
|
}),
|
||||||
|
|
||||||
|
closeListOfDetectors: () => set({
|
||||||
|
showListOfDetectors: false,
|
||||||
|
showDetectorMenu: false,
|
||||||
|
selectedDetector: null,
|
||||||
|
currentSubmenu: null
|
||||||
|
}),
|
||||||
|
|
||||||
|
openSensors: () => set({
|
||||||
|
showSensors: true,
|
||||||
|
showMonitoring: false,
|
||||||
|
showFloorNavigation: false,
|
||||||
|
showNotifications: false,
|
||||||
|
showListOfDetectors: false,
|
||||||
|
currentSubmenu: 'sensors',
|
||||||
|
showDetectorMenu: false,
|
||||||
|
selectedDetector: null,
|
||||||
|
showNotificationDetectorInfo: false,
|
||||||
|
selectedNotification: null
|
||||||
|
}),
|
||||||
|
|
||||||
|
closeSensors: () => set({
|
||||||
|
showSensors: false,
|
||||||
|
showDetectorMenu: false,
|
||||||
|
selectedDetector: null,
|
||||||
|
currentSubmenu: null
|
||||||
|
}),
|
||||||
|
|
||||||
|
closeAllMenus: () => {
|
||||||
|
set({
|
||||||
|
showMonitoring: false,
|
||||||
|
showFloorNavigation: false,
|
||||||
|
showNotifications: false,
|
||||||
|
showListOfDetectors: false,
|
||||||
|
showSensors: false,
|
||||||
|
currentSubmenu: null,
|
||||||
|
});
|
||||||
|
get().clearSelections();
|
||||||
|
},
|
||||||
|
|
||||||
|
clearSelections: () => set({
|
||||||
|
selectedDetector: null,
|
||||||
|
showDetectorMenu: false,
|
||||||
|
selectedAlert: null,
|
||||||
|
showAlertMenu: false,
|
||||||
|
}),
|
||||||
|
|
||||||
|
setSelectedDetector: (detector: DetectorType | null) => set({ selectedDetector: detector }),
|
||||||
|
setShowDetectorMenu: (show: boolean) => set({ showDetectorMenu: show }),
|
||||||
|
setSelectedNotification: (notification: NotificationType | null) => set({ selectedNotification: notification }),
|
||||||
|
setShowNotificationDetectorInfo: (show: boolean) => set({ showNotificationDetectorInfo: show }),
|
||||||
|
setSelectedAlert: (alert: AlertType | null) => set({ selectedAlert: alert }),
|
||||||
|
setShowAlertMenu: (show: boolean) => set({ showAlertMenu: show }),
|
||||||
|
|
||||||
|
isOnNavigationPage: () => {
|
||||||
|
const { navigationHistory } = get()
|
||||||
|
const currentRoute = navigationHistory[navigationHistory.length - 1]
|
||||||
|
return currentRoute === '/navigation'
|
||||||
|
},
|
||||||
|
|
||||||
|
getCurrentRoute: () => {
|
||||||
|
const { navigationHistory } = get()
|
||||||
|
return navigationHistory[navigationHistory.length - 1] || null
|
||||||
|
},
|
||||||
|
|
||||||
|
getActiveSidebarItem: () => {
|
||||||
|
const { showMonitoring, showFloorNavigation, showNotifications, showListOfDetectors, showSensors } = get()
|
||||||
|
if (showMonitoring) return 3 // Зоны Мониторинга
|
||||||
|
if (showFloorNavigation) return 4 // Навигация по этажам
|
||||||
|
if (showNotifications) return 5 // Уведомления
|
||||||
|
if (showListOfDetectors) return 7 // Список датчиков
|
||||||
|
if (showSensors) return 8 // Сенсоры
|
||||||
|
return 2 // Навигация (базовая)
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
name: 'navigation-store',
|
||||||
|
}
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
export default useNavigationStore
|
||||||
|
|
||||||
@@ -25,6 +25,7 @@ import '@babylonjs/loaders'
|
|||||||
|
|
||||||
import SceneToolbar from './SceneToolbar';
|
import SceneToolbar from './SceneToolbar';
|
||||||
import LoadingSpinner from '../ui/LoadingSpinner'
|
import LoadingSpinner from '../ui/LoadingSpinner'
|
||||||
|
import useNavigationStore from '@/app/store/navigationStore'
|
||||||
import {
|
import {
|
||||||
getSensorIdFromMesh,
|
getSensorIdFromMesh,
|
||||||
collectSensorMeshes,
|
collectSensorMeshes,
|
||||||
@@ -862,6 +863,8 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
|
|||||||
onPan={handlePan}
|
onPan={handlePan}
|
||||||
onSelectModel={onSelectModel}
|
onSelectModel={onSelectModel}
|
||||||
panActive={panActive}
|
panActive={panActive}
|
||||||
|
onToggleSensorHighlights={useNavigationStore.getState().toggleSensorHighlights}
|
||||||
|
sensorHighlightsActive={useNavigationStore.getState().showSensorHighlights}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
911
frontend/components/model/ModelViewer.tsx — копия 2
Normal file
911
frontend/components/model/ModelViewer.tsx — копия 2
Normal file
@@ -0,0 +1,911 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
|
|
||||||
|
import {
|
||||||
|
Engine,
|
||||||
|
Scene,
|
||||||
|
Vector3,
|
||||||
|
HemisphericLight,
|
||||||
|
ArcRotateCamera,
|
||||||
|
Color3,
|
||||||
|
Color4,
|
||||||
|
AbstractMesh,
|
||||||
|
Nullable,
|
||||||
|
HighlightLayer,
|
||||||
|
Animation,
|
||||||
|
CubicEase,
|
||||||
|
EasingFunction,
|
||||||
|
ImportMeshAsync,
|
||||||
|
PointerEventTypes,
|
||||||
|
PointerInfo,
|
||||||
|
Matrix,
|
||||||
|
} from '@babylonjs/core'
|
||||||
|
import '@babylonjs/loaders'
|
||||||
|
|
||||||
|
import SceneToolbar from './SceneToolbar';
|
||||||
|
import LoadingSpinner from '../ui/LoadingSpinner'
|
||||||
|
import {
|
||||||
|
getSensorIdFromMesh,
|
||||||
|
collectSensorMeshes,
|
||||||
|
applyHighlightToMeshes,
|
||||||
|
statusToColor3,
|
||||||
|
} from './sensorHighlight'
|
||||||
|
import {
|
||||||
|
computeSensorOverlayCircles,
|
||||||
|
hexWithAlpha,
|
||||||
|
} from './sensorHighlightOverlay'
|
||||||
|
|
||||||
|
export interface ModelViewerProps {
|
||||||
|
modelPath: string
|
||||||
|
onSelectModel: (path: string) => void;
|
||||||
|
onModelLoaded?: (modelData: {
|
||||||
|
meshes: AbstractMesh[]
|
||||||
|
boundingBox: {
|
||||||
|
min: { x: number; y: number; z: number }
|
||||||
|
max: { x: number; y: number; z: number }
|
||||||
|
}
|
||||||
|
}) => void
|
||||||
|
onError?: (error: string) => void
|
||||||
|
activeMenu?: string | null
|
||||||
|
focusSensorId?: string | null
|
||||||
|
renderOverlay?: (params: { anchor: { left: number; top: number } | null; info?: { name?: string; sensorId?: string } | null }) => React.ReactNode
|
||||||
|
isSensorSelectionEnabled?: boolean
|
||||||
|
onSensorPick?: (sensorId: string | null) => void
|
||||||
|
highlightAllSensors?: boolean
|
||||||
|
sensorStatusMap?: Record<string, string>
|
||||||
|
}
|
||||||
|
|
||||||
|
const ModelViewer: React.FC<ModelViewerProps> = ({
|
||||||
|
modelPath,
|
||||||
|
onSelectModel,
|
||||||
|
onModelLoaded,
|
||||||
|
onError,
|
||||||
|
focusSensorId,
|
||||||
|
renderOverlay,
|
||||||
|
isSensorSelectionEnabled,
|
||||||
|
onSensorPick,
|
||||||
|
highlightAllSensors,
|
||||||
|
sensorStatusMap,
|
||||||
|
}) => {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||||
|
const engineRef = useRef<Nullable<Engine>>(null)
|
||||||
|
const sceneRef = useRef<Nullable<Scene>>(null)
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
const [loadingProgress, setLoadingProgress] = useState(0)
|
||||||
|
const [showModel, setShowModel] = useState(false)
|
||||||
|
const isInitializedRef = useRef(false)
|
||||||
|
const isDisposedRef = useRef(false)
|
||||||
|
const importedMeshesRef = useRef<AbstractMesh[]>([])
|
||||||
|
const highlightLayerRef = useRef<HighlightLayer | null>(null)
|
||||||
|
const highlightedMeshesRef = useRef<AbstractMesh[]>([])
|
||||||
|
const chosenMeshRef = useRef<AbstractMesh | null>(null)
|
||||||
|
const [overlayPos, setOverlayPos] = useState<{ left: number; top: number } | null>(null)
|
||||||
|
const [overlayData, setOverlayData] = useState<{ name?: string; sensorId?: string } | null>(null)
|
||||||
|
const [modelReady, setModelReady] = useState(false)
|
||||||
|
const [panActive, setPanActive] = useState(false);
|
||||||
|
const [webglError, setWebglError] = useState<string | null>(null)
|
||||||
|
const [allSensorsOverlayCircles, setAllSensorsOverlayCircles] = useState<
|
||||||
|
{ sensorId: string; left: number; top: number; colorHex: string }[]
|
||||||
|
>([])
|
||||||
|
// NEW: State for tracking hovered sensor in overlay circles
|
||||||
|
const [hoveredSensorId, setHoveredSensorId] = useState<string | null>(null)
|
||||||
|
|
||||||
|
const handlePan = () => setPanActive(!panActive);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const scene = sceneRef.current;
|
||||||
|
const camera = scene?.activeCamera as ArcRotateCamera;
|
||||||
|
const canvas = canvasRef.current;
|
||||||
|
|
||||||
|
if (!scene || !camera || !canvas) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let observer: any = null;
|
||||||
|
|
||||||
|
if (panActive) {
|
||||||
|
camera.detachControl();
|
||||||
|
|
||||||
|
observer = scene.onPointerObservable.add((pointerInfo: PointerInfo) => {
|
||||||
|
const evt = pointerInfo.event;
|
||||||
|
|
||||||
|
if (evt.buttons === 1) {
|
||||||
|
camera.inertialPanningX -= evt.movementX / camera.panningSensibility;
|
||||||
|
camera.inertialPanningY += evt.movementY / camera.panningSensibility;
|
||||||
|
}
|
||||||
|
else if (evt.buttons === 2) {
|
||||||
|
camera.inertialAlphaOffset -= evt.movementX / camera.angularSensibilityX;
|
||||||
|
camera.inertialBetaOffset -= evt.movementY / camera.angularSensibilityY;
|
||||||
|
}
|
||||||
|
}, PointerEventTypes.POINTERMOVE);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
camera.detachControl();
|
||||||
|
camera.attachControl(canvas, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (observer) {
|
||||||
|
scene.onPointerObservable.remove(observer);
|
||||||
|
}
|
||||||
|
if (!camera.isDisposed() && !camera.inputs.attachedToElement) {
|
||||||
|
camera.attachControl(canvas, true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [panActive, sceneRef, canvasRef]);
|
||||||
|
|
||||||
|
const handleZoomIn = () => {
|
||||||
|
const camera = sceneRef.current?.activeCamera as ArcRotateCamera
|
||||||
|
if (camera) {
|
||||||
|
sceneRef.current?.stopAnimation(camera)
|
||||||
|
const ease = new CubicEase()
|
||||||
|
ease.setEasingMode(EasingFunction.EASINGMODE_EASEOUT)
|
||||||
|
|
||||||
|
const frameRate = 60
|
||||||
|
const durationMs = 300
|
||||||
|
const totalFrames = Math.round((durationMs / 1000) * frameRate)
|
||||||
|
|
||||||
|
const currentRadius = camera.radius
|
||||||
|
const targetRadius = Math.max(camera.lowerRadiusLimit ?? 0.1, currentRadius * 0.8)
|
||||||
|
|
||||||
|
Animation.CreateAndStartAnimation(
|
||||||
|
'zoomIn',
|
||||||
|
camera,
|
||||||
|
'radius',
|
||||||
|
frameRate,
|
||||||
|
totalFrames,
|
||||||
|
currentRadius,
|
||||||
|
targetRadius,
|
||||||
|
Animation.ANIMATIONLOOPMODE_CONSTANT,
|
||||||
|
ease
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleZoomOut = () => {
|
||||||
|
const camera = sceneRef.current?.activeCamera as ArcRotateCamera
|
||||||
|
if (camera) {
|
||||||
|
sceneRef.current?.stopAnimation(camera)
|
||||||
|
const ease = new CubicEase()
|
||||||
|
ease.setEasingMode(EasingFunction.EASINGMODE_EASEOUT)
|
||||||
|
|
||||||
|
const frameRate = 60
|
||||||
|
const durationMs = 300
|
||||||
|
const totalFrames = Math.round((durationMs / 1000) * frameRate)
|
||||||
|
|
||||||
|
const currentRadius = camera.radius
|
||||||
|
const targetRadius = Math.min(camera.upperRadiusLimit ?? Infinity, currentRadius * 1.2)
|
||||||
|
|
||||||
|
Animation.CreateAndStartAnimation(
|
||||||
|
'zoomOut',
|
||||||
|
camera,
|
||||||
|
'radius',
|
||||||
|
frameRate,
|
||||||
|
totalFrames,
|
||||||
|
currentRadius,
|
||||||
|
targetRadius,
|
||||||
|
Animation.ANIMATIONLOOPMODE_CONSTANT,
|
||||||
|
ease
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleTopView = () => {
|
||||||
|
const camera = sceneRef.current?.activeCamera as ArcRotateCamera;
|
||||||
|
if (camera) {
|
||||||
|
sceneRef.current?.stopAnimation(camera);
|
||||||
|
const ease = new CubicEase();
|
||||||
|
ease.setEasingMode(EasingFunction.EASINGMODE_EASEOUT);
|
||||||
|
|
||||||
|
const frameRate = 60;
|
||||||
|
const durationMs = 500;
|
||||||
|
const totalFrames = Math.round((durationMs / 1000) * frameRate);
|
||||||
|
|
||||||
|
Animation.CreateAndStartAnimation(
|
||||||
|
'topViewAlpha',
|
||||||
|
camera,
|
||||||
|
'alpha',
|
||||||
|
frameRate,
|
||||||
|
totalFrames,
|
||||||
|
camera.alpha,
|
||||||
|
Math.PI / 2,
|
||||||
|
Animation.ANIMATIONLOOPMODE_CONSTANT,
|
||||||
|
ease
|
||||||
|
);
|
||||||
|
|
||||||
|
Animation.CreateAndStartAnimation(
|
||||||
|
'topViewBeta',
|
||||||
|
camera,
|
||||||
|
'beta',
|
||||||
|
frameRate,
|
||||||
|
totalFrames,
|
||||||
|
camera.beta,
|
||||||
|
0,
|
||||||
|
Animation.ANIMATIONLOOPMODE_CONSTANT,
|
||||||
|
ease
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// NEW: Function to handle overlay circle click
|
||||||
|
const handleOverlayCircleClick = (sensorId: string) => {
|
||||||
|
console.log('[ModelViewer] Overlay circle clicked:', sensorId)
|
||||||
|
|
||||||
|
// Find the mesh for this sensor
|
||||||
|
const allMeshes = importedMeshesRef.current || []
|
||||||
|
const sensorMeshes = collectSensorMeshes(allMeshes)
|
||||||
|
const targetMesh = sensorMeshes.find(m => getSensorIdFromMesh(m) === sensorId)
|
||||||
|
|
||||||
|
if (!targetMesh) {
|
||||||
|
console.warn(`[ModelViewer] Mesh not found for sensor: ${sensorId}`)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const scene = sceneRef.current
|
||||||
|
const camera = scene?.activeCamera as ArcRotateCamera
|
||||||
|
if (!scene || !camera) return
|
||||||
|
|
||||||
|
// Calculate bounding box of the sensor mesh
|
||||||
|
const bbox = (typeof targetMesh.getHierarchyBoundingVectors === 'function')
|
||||||
|
? targetMesh.getHierarchyBoundingVectors()
|
||||||
|
: {
|
||||||
|
min: targetMesh.getBoundingInfo().boundingBox.minimumWorld,
|
||||||
|
max: targetMesh.getBoundingInfo().boundingBox.maximumWorld
|
||||||
|
}
|
||||||
|
|
||||||
|
const center = bbox.min.add(bbox.max).scale(0.5)
|
||||||
|
const size = bbox.max.subtract(bbox.min)
|
||||||
|
const maxDimension = Math.max(size.x, size.y, size.z)
|
||||||
|
|
||||||
|
// Calculate optimal camera distance
|
||||||
|
const targetRadius = Math.max(camera.lowerRadiusLimit ?? 2, maxDimension * 1.5)
|
||||||
|
|
||||||
|
// Stop any current animations
|
||||||
|
scene.stopAnimation(camera)
|
||||||
|
|
||||||
|
// Setup easing
|
||||||
|
const ease = new CubicEase()
|
||||||
|
ease.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT)
|
||||||
|
|
||||||
|
const frameRate = 60
|
||||||
|
const durationMs = 600 // 0.6 seconds for smooth animation
|
||||||
|
const totalFrames = Math.round((durationMs / 1000) * frameRate)
|
||||||
|
|
||||||
|
// Animate camera target position
|
||||||
|
Animation.CreateAndStartAnimation(
|
||||||
|
'camTarget',
|
||||||
|
camera,
|
||||||
|
'target',
|
||||||
|
frameRate,
|
||||||
|
totalFrames,
|
||||||
|
camera.target.clone(),
|
||||||
|
center.clone(),
|
||||||
|
Animation.ANIMATIONLOOPMODE_CONSTANT,
|
||||||
|
ease
|
||||||
|
)
|
||||||
|
|
||||||
|
// Animate camera radius (zoom)
|
||||||
|
Animation.CreateAndStartAnimation(
|
||||||
|
'camRadius',
|
||||||
|
camera,
|
||||||
|
'radius',
|
||||||
|
frameRate,
|
||||||
|
totalFrames,
|
||||||
|
camera.radius,
|
||||||
|
targetRadius,
|
||||||
|
Animation.ANIMATIONLOOPMODE_CONSTANT,
|
||||||
|
ease
|
||||||
|
)
|
||||||
|
|
||||||
|
// Call callback to display tooltip
|
||||||
|
onSensorPick?.(sensorId)
|
||||||
|
|
||||||
|
console.log('[ModelViewer] Camera animation started for sensor:', sensorId)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
isDisposedRef.current = false
|
||||||
|
isInitializedRef.current = false
|
||||||
|
return () => {
|
||||||
|
isDisposedRef.current = true
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!canvasRef.current || isInitializedRef.current) return
|
||||||
|
|
||||||
|
const canvas = canvasRef.current
|
||||||
|
setWebglError(null)
|
||||||
|
|
||||||
|
let hasWebGL = false
|
||||||
|
try {
|
||||||
|
const testCanvas = document.createElement('canvas')
|
||||||
|
const gl =
|
||||||
|
testCanvas.getContext('webgl2') ||
|
||||||
|
testCanvas.getContext('webgl') ||
|
||||||
|
testCanvas.getContext('experimental-webgl')
|
||||||
|
hasWebGL = !!gl
|
||||||
|
} catch {
|
||||||
|
hasWebGL = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!hasWebGL) {
|
||||||
|
const message = 'WebGL не поддерживается в текущем окружении'
|
||||||
|
setWebglError(message)
|
||||||
|
onError?.(message)
|
||||||
|
setIsLoading(false)
|
||||||
|
setModelReady(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
let engine: Engine
|
||||||
|
try {
|
||||||
|
engine = new Engine(canvas, true, { stencil: true })
|
||||||
|
} catch (error) {
|
||||||
|
const errorMessage = error instanceof Error ? error.message : String(error)
|
||||||
|
const message = `WebGL недоступен: ${errorMessage}`
|
||||||
|
setWebglError(message)
|
||||||
|
onError?.(message)
|
||||||
|
setIsLoading(false)
|
||||||
|
setModelReady(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
engineRef.current = engine
|
||||||
|
|
||||||
|
engine.runRenderLoop(() => {
|
||||||
|
if (!isDisposedRef.current && sceneRef.current) {
|
||||||
|
sceneRef.current.render()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const scene = new Scene(engine)
|
||||||
|
sceneRef.current = scene
|
||||||
|
|
||||||
|
scene.clearColor = new Color4(0.1, 0.1, 0.15, 1)
|
||||||
|
|
||||||
|
const camera = new ArcRotateCamera('camera', 0, Math.PI / 3, 20, Vector3.Zero(), scene)
|
||||||
|
camera.attachControl(canvas, true)
|
||||||
|
camera.lowerRadiusLimit = 2
|
||||||
|
camera.upperRadiusLimit = 200
|
||||||
|
camera.wheelDeltaPercentage = 0.01
|
||||||
|
camera.panningSensibility = 50
|
||||||
|
camera.angularSensibilityX = 1000
|
||||||
|
camera.angularSensibilityY = 1000
|
||||||
|
|
||||||
|
const ambientLight = new HemisphericLight('ambientLight', new Vector3(0, 1, 0), scene)
|
||||||
|
ambientLight.intensity = 0.4
|
||||||
|
ambientLight.diffuse = new Color3(0.7, 0.7, 0.8)
|
||||||
|
ambientLight.specular = new Color3(0.2, 0.2, 0.3)
|
||||||
|
ambientLight.groundColor = new Color3(0.3, 0.3, 0.4)
|
||||||
|
|
||||||
|
const keyLight = new HemisphericLight('keyLight', new Vector3(1, 1, 0), scene)
|
||||||
|
keyLight.intensity = 0.6
|
||||||
|
keyLight.diffuse = new Color3(1, 1, 0.9)
|
||||||
|
keyLight.specular = new Color3(1, 1, 0.9)
|
||||||
|
|
||||||
|
const fillLight = new HemisphericLight('fillLight', new Vector3(-1, 0.5, -1), scene)
|
||||||
|
fillLight.intensity = 0.3
|
||||||
|
fillLight.diffuse = new Color3(0.8, 0.8, 1)
|
||||||
|
|
||||||
|
const hl = new HighlightLayer('highlight-layer', scene, {
|
||||||
|
mainTextureRatio: 1,
|
||||||
|
blurTextureSizeRatio: 1,
|
||||||
|
})
|
||||||
|
hl.innerGlow = false
|
||||||
|
hl.outerGlow = true
|
||||||
|
hl.blurHorizontalSize = 2
|
||||||
|
hl.blurVerticalSize = 2
|
||||||
|
highlightLayerRef.current = hl
|
||||||
|
|
||||||
|
const handleResize = () => {
|
||||||
|
if (!isDisposedRef.current) {
|
||||||
|
engine.resize()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', handleResize)
|
||||||
|
|
||||||
|
isInitializedRef.current = true
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
isDisposedRef.current = true
|
||||||
|
isInitializedRef.current = false
|
||||||
|
window.removeEventListener('resize', handleResize)
|
||||||
|
|
||||||
|
highlightLayerRef.current?.dispose()
|
||||||
|
highlightLayerRef.current = null
|
||||||
|
if (engineRef.current) {
|
||||||
|
engineRef.current.dispose()
|
||||||
|
engineRef.current = null
|
||||||
|
}
|
||||||
|
sceneRef.current = null
|
||||||
|
}
|
||||||
|
}, [onError])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!modelPath || !sceneRef.current || !engineRef.current) return
|
||||||
|
|
||||||
|
const scene = sceneRef.current
|
||||||
|
|
||||||
|
setIsLoading(true)
|
||||||
|
setLoadingProgress(0)
|
||||||
|
setShowModel(false)
|
||||||
|
setModelReady(false)
|
||||||
|
|
||||||
|
const loadModel = async () => {
|
||||||
|
try {
|
||||||
|
console.log('[ModelViewer] Starting to load model:', modelPath)
|
||||||
|
|
||||||
|
// UI элемент загрузчика (есть эффект замедленности)
|
||||||
|
const progressInterval = setInterval(() => {
|
||||||
|
setLoadingProgress(prev => {
|
||||||
|
if (prev >= 90) {
|
||||||
|
clearInterval(progressInterval)
|
||||||
|
return 90
|
||||||
|
}
|
||||||
|
return prev + Math.random() * 15
|
||||||
|
})
|
||||||
|
}, 100)
|
||||||
|
|
||||||
|
// Use the correct ImportMeshAsync signature: (url, scene, onProgress)
|
||||||
|
const result = await ImportMeshAsync(modelPath, scene, (evt) => {
|
||||||
|
if (evt.lengthComputable) {
|
||||||
|
const progress = (evt.loaded / evt.total) * 100
|
||||||
|
setLoadingProgress(progress)
|
||||||
|
console.log('[ModelViewer] Loading progress:', progress)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
clearInterval(progressInterval)
|
||||||
|
|
||||||
|
if (isDisposedRef.current) {
|
||||||
|
console.log('[ModelViewer] Component disposed during load')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('[ModelViewer] Model loaded successfully:', {
|
||||||
|
meshesCount: result.meshes.length,
|
||||||
|
particleSystemsCount: result.particleSystems.length,
|
||||||
|
skeletonsCount: result.skeletons.length,
|
||||||
|
animationGroupsCount: result.animationGroups.length
|
||||||
|
})
|
||||||
|
|
||||||
|
importedMeshesRef.current = result.meshes
|
||||||
|
|
||||||
|
if (result.meshes.length > 0) {
|
||||||
|
const boundingBox = result.meshes[0].getHierarchyBoundingVectors()
|
||||||
|
|
||||||
|
onModelLoaded?.({
|
||||||
|
meshes: result.meshes,
|
||||||
|
boundingBox: {
|
||||||
|
min: { x: boundingBox.min.x, y: boundingBox.min.y, z: boundingBox.min.z },
|
||||||
|
max: { x: boundingBox.max.x, y: boundingBox.max.y, z: boundingBox.max.z },
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Автоматическое кадрирование камеры для отображения всей модели
|
||||||
|
const camera = scene.activeCamera as ArcRotateCamera
|
||||||
|
if (camera) {
|
||||||
|
const center = boundingBox.min.add(boundingBox.max).scale(0.5)
|
||||||
|
const size = boundingBox.max.subtract(boundingBox.min)
|
||||||
|
const maxDimension = Math.max(size.x, size.y, size.z)
|
||||||
|
|
||||||
|
// Устанавливаем оптимальное расстояние камеры
|
||||||
|
const targetRadius = maxDimension * 2.5 // Множитель для комфортного отступа
|
||||||
|
|
||||||
|
// Плавная анимация камеры к центру модели
|
||||||
|
scene.stopAnimation(camera)
|
||||||
|
|
||||||
|
const ease = new CubicEase()
|
||||||
|
ease.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT)
|
||||||
|
|
||||||
|
const frameRate = 60
|
||||||
|
const durationMs = 800 // 0.8 секунды
|
||||||
|
const totalFrames = Math.round((durationMs / 1000) * frameRate)
|
||||||
|
|
||||||
|
// Анимация позиции камеры
|
||||||
|
Animation.CreateAndStartAnimation(
|
||||||
|
'frameCameraTarget',
|
||||||
|
camera,
|
||||||
|
'target',
|
||||||
|
frameRate,
|
||||||
|
totalFrames,
|
||||||
|
camera.target.clone(),
|
||||||
|
center.clone(),
|
||||||
|
Animation.ANIMATIONLOOPMODE_CONSTANT,
|
||||||
|
ease
|
||||||
|
)
|
||||||
|
|
||||||
|
// Анимация зума
|
||||||
|
Animation.CreateAndStartAnimation(
|
||||||
|
'frameCameraRadius',
|
||||||
|
camera,
|
||||||
|
'radius',
|
||||||
|
frameRate,
|
||||||
|
totalFrames,
|
||||||
|
camera.radius,
|
||||||
|
targetRadius,
|
||||||
|
Animation.ANIMATIONLOOPMODE_CONSTANT,
|
||||||
|
ease
|
||||||
|
)
|
||||||
|
|
||||||
|
console.log('[ModelViewer] Camera framed to model:', { center, targetRadius, maxDimension })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoadingProgress(100)
|
||||||
|
setShowModel(true)
|
||||||
|
setModelReady(true)
|
||||||
|
setIsLoading(false)
|
||||||
|
} catch (error) {
|
||||||
|
if (isDisposedRef.current) return
|
||||||
|
const errorMessage = error instanceof Error ? error.message : 'Неизвестная ошибка'
|
||||||
|
console.error('[ModelViewer] Error loading model:', errorMessage)
|
||||||
|
const message = `Ошибка при загрузке модели: ${errorMessage}`
|
||||||
|
onError?.(message)
|
||||||
|
setIsLoading(false)
|
||||||
|
setModelReady(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadModel()
|
||||||
|
}, [modelPath, onModelLoaded, onError])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!highlightAllSensors || focusSensorId || !modelReady) {
|
||||||
|
setAllSensorsOverlayCircles([])
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const scene = sceneRef.current
|
||||||
|
const engine = engineRef.current
|
||||||
|
if (!scene || !engine) {
|
||||||
|
setAllSensorsOverlayCircles([])
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const allMeshes = importedMeshesRef.current || []
|
||||||
|
const sensorMeshes = collectSensorMeshes(allMeshes)
|
||||||
|
if (sensorMeshes.length === 0) {
|
||||||
|
setAllSensorsOverlayCircles([])
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const engineTyped = engine as Engine
|
||||||
|
const updateCircles = () => {
|
||||||
|
const circles = computeSensorOverlayCircles({
|
||||||
|
scene,
|
||||||
|
engine: engineTyped,
|
||||||
|
meshes: sensorMeshes,
|
||||||
|
sensorStatusMap,
|
||||||
|
})
|
||||||
|
setAllSensorsOverlayCircles(circles)
|
||||||
|
}
|
||||||
|
|
||||||
|
updateCircles()
|
||||||
|
const observer = scene.onBeforeRenderObservable.add(updateCircles)
|
||||||
|
return () => {
|
||||||
|
scene.onBeforeRenderObservable.remove(observer)
|
||||||
|
setAllSensorsOverlayCircles([])
|
||||||
|
}
|
||||||
|
}, [highlightAllSensors, focusSensorId, modelReady, sensorStatusMap])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!highlightAllSensors || focusSensorId || !modelReady) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const scene = sceneRef.current
|
||||||
|
if (!scene) return
|
||||||
|
|
||||||
|
const allMeshes = importedMeshesRef.current || []
|
||||||
|
if (allMeshes.length === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const sensorMeshes = collectSensorMeshes(allMeshes)
|
||||||
|
|
||||||
|
console.log('[ModelViewer] Total meshes in model:', allMeshes.length)
|
||||||
|
console.log('[ModelViewer] Sensor meshes found:', sensorMeshes.length)
|
||||||
|
|
||||||
|
// Log first 5 sensor IDs found in meshes
|
||||||
|
const sensorIds = sensorMeshes.map(m => getSensorIdFromMesh(m)).filter(Boolean).slice(0, 5)
|
||||||
|
console.log('[ModelViewer] Sample sensor IDs from meshes:', sensorIds)
|
||||||
|
|
||||||
|
if (sensorMeshes.length === 0) {
|
||||||
|
console.warn('[ModelViewer] No sensor meshes found in 3D model!')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
applyHighlightToMeshes(
|
||||||
|
highlightLayerRef.current,
|
||||||
|
highlightedMeshesRef,
|
||||||
|
sensorMeshes,
|
||||||
|
mesh => {
|
||||||
|
const sid = getSensorIdFromMesh(mesh)
|
||||||
|
const status = sid ? sensorStatusMap?.[sid] : undefined
|
||||||
|
return statusToColor3(status ?? null)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}, [highlightAllSensors, focusSensorId, modelReady, sensorStatusMap])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!focusSensorId || !modelReady) {
|
||||||
|
for (const m of highlightedMeshesRef.current) { m.renderingGroupId = 0 }
|
||||||
|
highlightedMeshesRef.current = []
|
||||||
|
highlightLayerRef.current?.removeAllMeshes()
|
||||||
|
chosenMeshRef.current = null
|
||||||
|
setOverlayPos(null)
|
||||||
|
setOverlayData(null)
|
||||||
|
setAllSensorsOverlayCircles([])
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const sensorId = (focusSensorId ?? '').trim()
|
||||||
|
if (!sensorId) {
|
||||||
|
for (const m of highlightedMeshesRef.current) { m.renderingGroupId = 0 }
|
||||||
|
highlightedMeshesRef.current = []
|
||||||
|
highlightLayerRef.current?.removeAllMeshes()
|
||||||
|
chosenMeshRef.current = null
|
||||||
|
setOverlayPos(null)
|
||||||
|
setOverlayData(null)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const allMeshes = importedMeshesRef.current || []
|
||||||
|
|
||||||
|
if (allMeshes.length === 0) {
|
||||||
|
for (const m of highlightedMeshesRef.current) { m.renderingGroupId = 0 }
|
||||||
|
highlightedMeshesRef.current = []
|
||||||
|
highlightLayerRef.current?.removeAllMeshes()
|
||||||
|
chosenMeshRef.current = null
|
||||||
|
setOverlayPos(null)
|
||||||
|
setOverlayData(null)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const sensorMeshes = collectSensorMeshes(allMeshes)
|
||||||
|
const allSensorIds = sensorMeshes.map(m => getSensorIdFromMesh(m))
|
||||||
|
const chosen = sensorMeshes.find(m => getSensorIdFromMesh(m) === sensorId)
|
||||||
|
|
||||||
|
console.log('[ModelViewer] Sensor focus', {
|
||||||
|
requested: sensorId,
|
||||||
|
totalImportedMeshes: allMeshes.length,
|
||||||
|
totalSensorMeshes: sensorMeshes.length,
|
||||||
|
allSensorIds: allSensorIds,
|
||||||
|
chosen: chosen ? { id: chosen.id, name: chosen.name, uniqueId: chosen.uniqueId, parent: chosen.parent?.name } : null,
|
||||||
|
source: 'result.meshes',
|
||||||
|
})
|
||||||
|
|
||||||
|
const scene = sceneRef.current!
|
||||||
|
|
||||||
|
if (chosen) {
|
||||||
|
try {
|
||||||
|
const camera = scene.activeCamera as ArcRotateCamera
|
||||||
|
const bbox = (typeof chosen.getHierarchyBoundingVectors === 'function')
|
||||||
|
? chosen.getHierarchyBoundingVectors()
|
||||||
|
: { min: chosen.getBoundingInfo().boundingBox.minimumWorld, max: chosen.getBoundingInfo().boundingBox.maximumWorld }
|
||||||
|
const center = bbox.min.add(bbox.max).scale(0.5)
|
||||||
|
const size = bbox.max.subtract(bbox.min)
|
||||||
|
const maxDimension = Math.max(size.x, size.y, size.z)
|
||||||
|
const targetRadius = Math.max(camera.lowerRadiusLimit ?? 2, maxDimension * 1.5)
|
||||||
|
|
||||||
|
scene.stopAnimation(camera)
|
||||||
|
|
||||||
|
const ease = new CubicEase()
|
||||||
|
ease.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT)
|
||||||
|
const frameRate = 60
|
||||||
|
const durationMs = 600
|
||||||
|
const totalFrames = Math.round((durationMs / 1000) * frameRate)
|
||||||
|
|
||||||
|
Animation.CreateAndStartAnimation('camTarget', camera, 'target', frameRate, totalFrames, camera.target.clone(), center.clone(), Animation.ANIMATIONLOOPMODE_CONSTANT, ease)
|
||||||
|
Animation.CreateAndStartAnimation('camRadius', camera, 'radius', frameRate, totalFrames, camera.radius, targetRadius, Animation.ANIMATIONLOOPMODE_CONSTANT, ease)
|
||||||
|
|
||||||
|
applyHighlightToMeshes(
|
||||||
|
highlightLayerRef.current,
|
||||||
|
highlightedMeshesRef,
|
||||||
|
[chosen],
|
||||||
|
mesh => {
|
||||||
|
const sid = getSensorIdFromMesh(mesh)
|
||||||
|
const status = sid ? sensorStatusMap?.[sid] : undefined
|
||||||
|
return statusToColor3(status ?? null)
|
||||||
|
},
|
||||||
|
)
|
||||||
|
chosenMeshRef.current = chosen
|
||||||
|
setOverlayData({ name: chosen.name, sensorId })
|
||||||
|
} catch {
|
||||||
|
for (const m of highlightedMeshesRef.current) { m.renderingGroupId = 0 }
|
||||||
|
highlightedMeshesRef.current = []
|
||||||
|
highlightLayerRef.current?.removeAllMeshes()
|
||||||
|
chosenMeshRef.current = null
|
||||||
|
setOverlayPos(null)
|
||||||
|
setOverlayData(null)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (const m of highlightedMeshesRef.current) { m.renderingGroupId = 0 }
|
||||||
|
highlightedMeshesRef.current = []
|
||||||
|
highlightLayerRef.current?.removeAllMeshes()
|
||||||
|
chosenMeshRef.current = null
|
||||||
|
setOverlayPos(null)
|
||||||
|
setOverlayData(null)
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [focusSensorId, modelReady, highlightAllSensors])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const scene = sceneRef.current
|
||||||
|
if (!scene || !modelReady || !isSensorSelectionEnabled) return
|
||||||
|
|
||||||
|
const pickObserver = scene.onPointerObservable.add((pointerInfo: PointerInfo) => {
|
||||||
|
if (pointerInfo.type !== PointerEventTypes.POINTERPICK) return
|
||||||
|
const pick = pointerInfo.pickInfo
|
||||||
|
if (!pick || !pick.hit) {
|
||||||
|
onSensorPick?.(null)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const pickedMesh = pick.pickedMesh
|
||||||
|
const sensorId = getSensorIdFromMesh(pickedMesh)
|
||||||
|
|
||||||
|
if (sensorId) {
|
||||||
|
onSensorPick?.(sensorId)
|
||||||
|
} else {
|
||||||
|
onSensorPick?.(null)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
scene.onPointerObservable.remove(pickObserver)
|
||||||
|
}
|
||||||
|
}, [modelReady, isSensorSelectionEnabled, onSensorPick])
|
||||||
|
|
||||||
|
const computeOverlayPosition = React.useCallback((mesh: AbstractMesh | null) => {
|
||||||
|
if (!sceneRef.current || !mesh) return null
|
||||||
|
const scene = sceneRef.current
|
||||||
|
try {
|
||||||
|
const bbox = (typeof mesh.getHierarchyBoundingVectors === 'function')
|
||||||
|
? mesh.getHierarchyBoundingVectors()
|
||||||
|
: { min: mesh.getBoundingInfo().boundingBox.minimumWorld, max: mesh.getBoundingInfo().boundingBox.maximumWorld }
|
||||||
|
const center = bbox.min.add(bbox.max).scale(0.5)
|
||||||
|
|
||||||
|
const viewport = scene.activeCamera?.viewport.toGlobal(engineRef.current!.getRenderWidth(), engineRef.current!.getRenderHeight())
|
||||||
|
if (!viewport) return null
|
||||||
|
|
||||||
|
const projected = Vector3.Project(center, Matrix.Identity(), scene.getTransformMatrix(), viewport)
|
||||||
|
if (!projected) return null
|
||||||
|
|
||||||
|
return { left: projected.x, top: projected.y }
|
||||||
|
} catch (error) {
|
||||||
|
console.error('[ModelViewer] Error computing overlay position:', error)
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!chosenMeshRef.current || !overlayData) return
|
||||||
|
const pos = computeOverlayPosition(chosenMeshRef.current)
|
||||||
|
setOverlayPos(pos)
|
||||||
|
}, [overlayData, computeOverlayPosition])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!sceneRef.current || !chosenMeshRef.current || !overlayData) return
|
||||||
|
const scene = sceneRef.current
|
||||||
|
|
||||||
|
const updateOverlayPosition = () => {
|
||||||
|
const pos = computeOverlayPosition(chosenMeshRef.current)
|
||||||
|
setOverlayPos(pos)
|
||||||
|
}
|
||||||
|
scene.registerBeforeRender(updateOverlayPosition)
|
||||||
|
return () => scene.unregisterBeforeRender(updateOverlayPosition)
|
||||||
|
}, [overlayData, computeOverlayPosition])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full h-screen relative bg-gray-900 overflow-hidden">
|
||||||
|
{!modelPath ? (
|
||||||
|
<div className="h-full flex items-center justify-center">
|
||||||
|
<div className="text-center p-8 bg-[#161824] rounded-lg border border-gray-700 max-w-md shadow-xl">
|
||||||
|
<div className="text-amber-400 text-lg font-semibold mb-2">
|
||||||
|
3D модель не выбрана
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-300 mb-4">
|
||||||
|
Выберите модель в панели «Зоны мониторинга», чтобы начать просмотр
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-400">
|
||||||
|
Если список пуст, добавьте файлы в каталог assets/big-models или проверьте API
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
className={`w-full h-full outline-none block transition-opacity duration-500 ${
|
||||||
|
showModel && !webglError ? 'opacity-100' : 'opacity-0'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
{webglError ? (
|
||||||
|
<div className="absolute inset-0 bg-gray-900 flex items-center justify-center z-50">
|
||||||
|
<div className="text-center p-8 bg-[#161824] rounded-lg border border-gray-700 max-w-md shadow-xl">
|
||||||
|
<div className="text-red-400 text-lg font-semibold mb-2">
|
||||||
|
3D просмотр недоступен
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-300 mb-4">
|
||||||
|
{webglError}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-400">
|
||||||
|
Включите аппаратное ускорение в браузере или откройте страницу в другом браузере/устройстве
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : isLoading ? (
|
||||||
|
<div className="absolute inset-0 bg-gray-900 flex items-center justify-center z-50">
|
||||||
|
<LoadingSpinner
|
||||||
|
progress={loadingProgress}
|
||||||
|
size={120}
|
||||||
|
strokeWidth={8}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : !modelReady ? (
|
||||||
|
<div className="absolute inset-0 bg-gray-900 flex items-center justify-center z-40">
|
||||||
|
<div className="text-center p-8 bg-[#161824] rounded-lg border border-gray-700 max-w-md">
|
||||||
|
<div className="text-gray-400 text-lg font-semibold mb-4">
|
||||||
|
3D модель не загружена
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-400">
|
||||||
|
Модель не готова к отображению
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<SceneToolbar
|
||||||
|
onZoomIn={handleZoomIn}
|
||||||
|
onZoomOut={handleZoomOut}
|
||||||
|
onTopView={handleTopView}
|
||||||
|
onPan={handlePan}
|
||||||
|
onSelectModel={onSelectModel}
|
||||||
|
panActive={panActive}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{/* UPDATED: Interactive overlay circles with hover effects */}
|
||||||
|
{allSensorsOverlayCircles.map(circle => {
|
||||||
|
const size = 36
|
||||||
|
const radius = size / 2
|
||||||
|
const fill = hexWithAlpha(circle.colorHex, 0.2)
|
||||||
|
const isHovered = hoveredSensorId === circle.sensorId
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`${circle.sensorId}-${Math.round(circle.left)}-${Math.round(circle.top)}`}
|
||||||
|
onClick={() => handleOverlayCircleClick(circle.sensorId)}
|
||||||
|
onMouseEnter={() => setHoveredSensorId(circle.sensorId)}
|
||||||
|
onMouseLeave={() => setHoveredSensorId(null)}
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
left: circle.left - radius,
|
||||||
|
top: circle.top - radius,
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
borderRadius: '9999px',
|
||||||
|
border: `2px solid ${circle.colorHex}`,
|
||||||
|
backgroundColor: fill,
|
||||||
|
pointerEvents: 'auto',
|
||||||
|
cursor: 'pointer',
|
||||||
|
transition: 'all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)',
|
||||||
|
transform: isHovered ? 'scale(1.4)' : 'scale(1)',
|
||||||
|
boxShadow: isHovered
|
||||||
|
? `0 0 25px ${circle.colorHex}, inset 0 0 10px ${circle.colorHex}`
|
||||||
|
: `0 0 8px ${circle.colorHex}`,
|
||||||
|
zIndex: isHovered ? 50 : 10,
|
||||||
|
}}
|
||||||
|
title={`Датчик: ${circle.sensorId}`}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
{renderOverlay && overlayPos && overlayData
|
||||||
|
? renderOverlay({ anchor: overlayPos, info: overlayData })
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ModelViewer
|
||||||
@@ -21,6 +21,8 @@ interface SceneToolbarProps {
|
|||||||
onSelectModel?: (modelPath: string) => void;
|
onSelectModel?: (modelPath: string) => void;
|
||||||
panActive?: boolean;
|
panActive?: boolean;
|
||||||
navMenuActive?: boolean;
|
navMenuActive?: boolean;
|
||||||
|
onToggleSensorHighlights?: () => void;
|
||||||
|
sensorHighlightsActive?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const SceneToolbar: React.FC<SceneToolbarProps> = ({
|
const SceneToolbar: React.FC<SceneToolbarProps> = ({
|
||||||
@@ -31,6 +33,8 @@ const SceneToolbar: React.FC<SceneToolbarProps> = ({
|
|||||||
onSelectModel,
|
onSelectModel,
|
||||||
panActive = false,
|
panActive = false,
|
||||||
navMenuActive = false,
|
navMenuActive = false,
|
||||||
|
onToggleSensorHighlights,
|
||||||
|
sensorHighlightsActive = true,
|
||||||
}) => {
|
}) => {
|
||||||
const [isZoomOpen, setIsZoomOpen] = useState(false);
|
const [isZoomOpen, setIsZoomOpen] = useState(false);
|
||||||
const { showMonitoring, openMonitoring, closeMonitoring, currentZones, loadZones, currentObject } = useNavigationStore();
|
const { showMonitoring, openMonitoring, closeMonitoring, currentZones, loadZones, currentObject } = useNavigationStore();
|
||||||
@@ -90,41 +94,47 @@ const SceneToolbar: React.FC<SceneToolbarProps> = ({
|
|||||||
const defaultButtons: ToolbarButton[] = [
|
const defaultButtons: ToolbarButton[] = [
|
||||||
{
|
{
|
||||||
icon: '/icons/Zoom.png',
|
icon: '/icons/Zoom.png',
|
||||||
label: 'Zoom',
|
label: 'Масштаб',
|
||||||
onClick: () => setIsZoomOpen(!isZoomOpen),
|
onClick: () => setIsZoomOpen(!isZoomOpen),
|
||||||
active: isZoomOpen,
|
active: isZoomOpen,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
icon: '/icons/plus.svg',
|
icon: '/icons/plus.svg',
|
||||||
label: 'Zoom In',
|
label: 'Приблизить',
|
||||||
onClick: onZoomIn || (() => {}),
|
onClick: onZoomIn || (() => {}),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: '/icons/minus.svg',
|
icon: '/icons/minus.svg',
|
||||||
label: 'Zoom Out',
|
label: 'Отдалить',
|
||||||
onClick: onZoomOut || (() => {}),
|
onClick: onZoomOut || (() => {}),
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: '/icons/Video.png',
|
icon: '/icons/Video.png',
|
||||||
label: "Top View",
|
label: 'Вид сверху',
|
||||||
onClick: onTopView || (() => console.log('Top View')),
|
onClick: onTopView || (() => console.log('Top View')),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: '/icons/Pointer.png',
|
icon: '/icons/Pointer.png',
|
||||||
label: 'Pan',
|
label: 'Панорамирование',
|
||||||
onClick: onPan || (() => console.log('Pan')),
|
onClick: onPan || (() => console.log('Pan')),
|
||||||
active: panActive,
|
active: panActive,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
icon: '/icons/Eye.png',
|
||||||
|
label: 'Подсветка датчиков',
|
||||||
|
onClick: onToggleSensorHighlights || (() => console.log('Toggle Sensor Highlights')),
|
||||||
|
active: sensorHighlightsActive,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
icon: '/icons/Warehouse.png',
|
icon: '/icons/Warehouse.png',
|
||||||
label: 'Home',
|
label: 'Домой',
|
||||||
onClick: handleHomeClick,
|
onClick: handleHomeClick,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: '/icons/Layers.png',
|
icon: '/icons/Layers.png',
|
||||||
label: 'Levels',
|
label: 'Уровни',
|
||||||
onClick: handleToggleNavMenu,
|
onClick: handleToggleNavMenu,
|
||||||
active: navMenuActive,
|
active: navMenuActive,
|
||||||
},
|
},
|
||||||
|
|||||||
207
frontend/components/model/SceneToolbar.tsx — копия
Normal file
207
frontend/components/model/SceneToolbar.tsx — копия
Normal file
@@ -0,0 +1,207 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import useNavigationStore from '@/app/store/navigationStore';
|
||||||
|
import type { Zone } from '@/app/types';
|
||||||
|
|
||||||
|
interface ToolbarButton {
|
||||||
|
icon: string;
|
||||||
|
label: string;
|
||||||
|
onClick: () => void;
|
||||||
|
onMouseDown?: () => void;
|
||||||
|
onMouseUp?: () => void;
|
||||||
|
active?: boolean;
|
||||||
|
children?: ToolbarButton[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SceneToolbarProps {
|
||||||
|
onZoomIn?: () => void;
|
||||||
|
onZoomOut?: () => void;
|
||||||
|
onTopView?: () => void;
|
||||||
|
onPan?: () => void;
|
||||||
|
onSelectModel?: (modelPath: string) => void;
|
||||||
|
panActive?: boolean;
|
||||||
|
navMenuActive?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SceneToolbar: React.FC<SceneToolbarProps> = ({
|
||||||
|
onZoomIn,
|
||||||
|
onZoomOut,
|
||||||
|
onTopView,
|
||||||
|
onPan,
|
||||||
|
onSelectModel,
|
||||||
|
panActive = false,
|
||||||
|
navMenuActive = false,
|
||||||
|
}) => {
|
||||||
|
const [isZoomOpen, setIsZoomOpen] = useState(false);
|
||||||
|
const { showMonitoring, openMonitoring, closeMonitoring, currentZones, loadZones, currentObject } = useNavigationStore();
|
||||||
|
|
||||||
|
const handleToggleNavMenu = () => {
|
||||||
|
if (showMonitoring) {
|
||||||
|
closeMonitoring();
|
||||||
|
} else {
|
||||||
|
openMonitoring();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleHomeClick = async () => {
|
||||||
|
if (!onSelectModel) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
let zones: Zone[] = Array.isArray(currentZones) ? currentZones : [];
|
||||||
|
|
||||||
|
// Если зоны ещё не загружены, откройте Monitoring и загрузите зоны для текущего объекта
|
||||||
|
if ((!zones || zones.length === 0) && currentObject?.id) {
|
||||||
|
if (!showMonitoring) {
|
||||||
|
openMonitoring();
|
||||||
|
}
|
||||||
|
await loadZones(currentObject.id);
|
||||||
|
zones = useNavigationStore.getState().currentZones || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Array.isArray(zones) || zones.length === 0) {
|
||||||
|
console.warn('No zones available to select a model from.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sorted = zones.slice().sort((a: Zone, b: Zone) => {
|
||||||
|
const oa = typeof a.order === 'number' ? a.order : 0;
|
||||||
|
const ob = typeof b.order === 'number' ? b.order : 0;
|
||||||
|
if (oa !== ob) return oa - ob;
|
||||||
|
return (a.name || '').localeCompare(b.name || '');
|
||||||
|
});
|
||||||
|
|
||||||
|
const top = sorted[0];
|
||||||
|
let chosenPath: string | null = top?.model_path && String(top.model_path).trim() ? top.model_path! : null;
|
||||||
|
if (!chosenPath) {
|
||||||
|
const nextWithModel = sorted.find((z) => z.model_path && String(z.model_path).trim());
|
||||||
|
chosenPath = nextWithModel?.model_path ?? null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (chosenPath) {
|
||||||
|
onSelectModel(chosenPath);
|
||||||
|
} else {
|
||||||
|
console.warn('No zone has a valid model_path to open.');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error selecting top zone model:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultButtons: ToolbarButton[] = [
|
||||||
|
{
|
||||||
|
icon: '/icons/Zoom.png',
|
||||||
|
label: 'Zoom',
|
||||||
|
onClick: () => setIsZoomOpen(!isZoomOpen),
|
||||||
|
active: isZoomOpen,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
icon: '/icons/plus.svg',
|
||||||
|
label: 'Zoom In',
|
||||||
|
onClick: onZoomIn || (() => {}),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '/icons/minus.svg',
|
||||||
|
label: 'Zoom Out',
|
||||||
|
onClick: onZoomOut || (() => {}),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '/icons/Video.png',
|
||||||
|
label: "Top View",
|
||||||
|
onClick: onTopView || (() => console.log('Top View')),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '/icons/Pointer.png',
|
||||||
|
label: 'Pan',
|
||||||
|
onClick: onPan || (() => console.log('Pan')),
|
||||||
|
active: panActive,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '/icons/Warehouse.png',
|
||||||
|
label: 'Home',
|
||||||
|
onClick: handleHomeClick,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: '/icons/Layers.png',
|
||||||
|
label: 'Levels',
|
||||||
|
onClick: handleToggleNavMenu,
|
||||||
|
active: navMenuActive,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed right-5 top-1/2 transform -translate-y-1/2 z-50">
|
||||||
|
<div className="flex flex-col gap-0">
|
||||||
|
<div
|
||||||
|
className="flex flex-col items-center gap-2 py-4 bg-[#161824] rounded-[15px] border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.3)]"
|
||||||
|
style={{ minHeight: '320px' }}
|
||||||
|
>
|
||||||
|
{defaultButtons.map((button, index) => (
|
||||||
|
<div key={index} className="flex flex-col items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={button.onClick}
|
||||||
|
className={`
|
||||||
|
relative group flex items-center justify-center w-16 h-12 rounded-lg transition-all duration-200
|
||||||
|
hover:bg-blue-600/20 hover:scale-110 hover:shadow-lg
|
||||||
|
focus:outline-none focus:ring-2 focus:ring-blue-500/50
|
||||||
|
${button.active
|
||||||
|
? 'bg-blue-600/30 text-blue-400 shadow-md'
|
||||||
|
: 'bg-transparent text-gray-300 hover:text-blue-400'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
title={button.label}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={button.icon}
|
||||||
|
alt={button.label}
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className="w-5 h-5 transition-transform duration-200 group-hover:scale-110"
|
||||||
|
/>
|
||||||
|
<div className="absolute right-full mr-3 top-1/2 transform -translate-y-1/2
|
||||||
|
opacity-0 group-hover:opacity-100 transition-opacity duration-200
|
||||||
|
pointer-events-none z-60">
|
||||||
|
<div className="bg-gray-900 text-white text-xs px-2 py-1 rounded
|
||||||
|
whitespace-nowrap shadow-lg border border-gray-700">
|
||||||
|
{button.label}
|
||||||
|
</div>
|
||||||
|
<div className="absolute left-full top-1/2 transform -translate-y-1/2
|
||||||
|
w-0 h-0 border-t-4 border-t-transparent
|
||||||
|
border-b-4 border-b-transparent
|
||||||
|
border-l-4 border-l-gray-900">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
{button.active && button.children && (
|
||||||
|
<div className="flex flex-col gap-2 mt-2">
|
||||||
|
{button.children.map((childButton, childIndex) => (
|
||||||
|
<button
|
||||||
|
key={childIndex}
|
||||||
|
onClick={childButton.onClick}
|
||||||
|
onMouseDown={childButton.onMouseDown}
|
||||||
|
onMouseUp={childButton.onMouseUp}
|
||||||
|
className="relative group flex items-center justify-center w-12 h-10 bg-gray-800/50 rounded-md transition-all duration-200 hover:bg-blue-600/30"
|
||||||
|
title={childButton.label}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={childButton.icon}
|
||||||
|
alt={childButton.label}
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
className="w-4 h-4"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SceneToolbar;
|
||||||
BIN
frontend/public/icons/Eye.png
Normal file
BIN
frontend/public/icons/Eye.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Reference in New Issue
Block a user