Изменения в логике получения данных по датчикам из бэкенда, изменение тултипа сенсора для исправления получения данных на реальные
This commit is contained in:
381
frontend/components/navigation/DetectorMenu.tsx — копия 5
Normal file
381
frontend/components/navigation/DetectorMenu.tsx — копия 5
Normal file
@@ -0,0 +1,381 @@
|
||||
'use client'
|
||||
|
||||
import React from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import useNavigationStore from '@/app/store/navigationStore'
|
||||
import AreaChart from '../dashboard/AreaChart'
|
||||
|
||||
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 DetectorMenuProps {
|
||||
detector: DetectorType
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
getStatusText: (status: string) => string
|
||||
compact?: boolean
|
||||
anchor?: { left: number; top: number } | null
|
||||
}
|
||||
|
||||
// Главный компонент меню детектора
|
||||
// Показывает детальную информацию о датчике с возможностью навигации к отчетам и истории
|
||||
const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose, getStatusText, compact = false, anchor = null }) => {
|
||||
const router = useRouter()
|
||||
const { setSelectedDetector, currentObject } = useNavigationStore()
|
||||
if (!isOpen) return null
|
||||
|
||||
// Определение последней временной метки из уведомлений детектора
|
||||
const latestTimestamp = (() => {
|
||||
const list = detector.notifications ?? []
|
||||
if (!Array.isArray(list) || list.length === 0) return null
|
||||
const dates = list.map(n => new Date(n.timestamp)).filter(d => !isNaN(d.getTime()))
|
||||
if (dates.length === 0) return null
|
||||
dates.sort((a, b) => b.getTime() - a.getTime())
|
||||
return dates[0]
|
||||
})()
|
||||
const formattedTimestamp = latestTimestamp
|
||||
? latestTimestamp.toLocaleString('ru-RU', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
|
||||
: 'Нет данных'
|
||||
|
||||
// Данные для графика за последний месяц из реальных notifications
|
||||
const chartData = React.useMemo(() => {
|
||||
const notifications = detector.notifications ?? []
|
||||
const DAYS_COUNT = 30 // Последний месяц
|
||||
|
||||
if (notifications.length === 0) {
|
||||
// Если нет уведомлений, возвращаем пустой график
|
||||
return Array.from({ length: DAYS_COUNT }, (_, i) => ({
|
||||
timestamp: new Date(Date.now() - (DAYS_COUNT - 1 - i) * 24 * 60 * 60 * 1000).toISOString(),
|
||||
critical: 0,
|
||||
warning: 0,
|
||||
}))
|
||||
}
|
||||
|
||||
// Группируем уведомления по дням за последний месяц
|
||||
const now = new Date()
|
||||
const monthAgo = new Date(now.getTime() - DAYS_COUNT * 24 * 60 * 60 * 1000)
|
||||
|
||||
// Создаём карту: дата -> { critical: count, warning: count }
|
||||
const dayMap: Record<string, { critical: number; warning: number }> = {}
|
||||
|
||||
// Инициализируем все дни нулями
|
||||
for (let i = 0; i < DAYS_COUNT; i++) {
|
||||
const date = new Date(monthAgo.getTime() + i * 24 * 60 * 60 * 1000)
|
||||
const dateKey = date.toISOString().split('T')[0]
|
||||
dayMap[dateKey] = { critical: 0, warning: 0 }
|
||||
}
|
||||
|
||||
// Подсчитываем уведомления по дням
|
||||
notifications.forEach(notification => {
|
||||
const notifDate = new Date(notification.timestamp)
|
||||
if (notifDate >= monthAgo && notifDate <= now) {
|
||||
const dateKey = notifDate.toISOString().split('T')[0]
|
||||
if (dayMap[dateKey]) {
|
||||
const notifType = String(notification.type || '').toLowerCase()
|
||||
console.log('[DetectorMenu] Notification type:', notifType, 'for sensor:', detector.serial_number)
|
||||
|
||||
if (notifType === 'critical') {
|
||||
dayMap[dateKey].critical++
|
||||
} else if (notifType === 'warning') {
|
||||
dayMap[dateKey].warning++
|
||||
} else {
|
||||
// Если тип не распознан, логируем
|
||||
console.warn('[DetectorMenu] Unknown notification type:', notification.type, 'notification:', notification)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Преобразуем в массив для графика
|
||||
return Object.keys(dayMap)
|
||||
.sort()
|
||||
.map(dateKey => ({
|
||||
timestamp: dateKey,
|
||||
label: new Date(dateKey).toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' }),
|
||||
critical: dayMap[dateKey].critical,
|
||||
warning: dayMap[dateKey].warning,
|
||||
}))
|
||||
}, [detector.notifications])
|
||||
|
||||
// Определение типа детектора и его отображаемого названия
|
||||
const rawDetectorTypeCode = (detector.detector_type || '').toUpperCase()
|
||||
const deriveCodeFromType = (): string => {
|
||||
const t = (detector.type || '').toLowerCase()
|
||||
if (!t) return ''
|
||||
if (t.includes('инклинометр')) return 'GA'
|
||||
if (t.includes('тензометр')) return 'PE'
|
||||
if (t.includes('гидроуров')) return 'GLE'
|
||||
return ''
|
||||
}
|
||||
const effectiveDetectorTypeCode = rawDetectorTypeCode || deriveCodeFromType()
|
||||
|
||||
// Карта соответствия кодов типов детекторов их русским названиям
|
||||
const detectorTypeLabelMap: Record<string, string> = {
|
||||
GA: 'Инклинометр',
|
||||
PE: 'Тензометр',
|
||||
GLE: 'Гидроуровень',
|
||||
}
|
||||
const displayDetectorTypeLabel = detectorTypeLabelMap[effectiveDetectorTypeCode] || '—'
|
||||
|
||||
// Обработчик клика по кнопке "Отчет" - навигация на страницу отчетов с выбранным детектором
|
||||
const handleReportsClick = () => {
|
||||
const currentUrl = new URL(window.location.href)
|
||||
const objectId = currentUrl.searchParams.get('objectId') || currentObject.id
|
||||
const objectTitle = currentUrl.searchParams.get('objectTitle') || currentObject.title
|
||||
|
||||
const detectorData = {
|
||||
...detector,
|
||||
notifications: detector.notifications || []
|
||||
}
|
||||
setSelectedDetector(detectorData)
|
||||
|
||||
let reportsUrl = '/reports'
|
||||
const params = new URLSearchParams()
|
||||
|
||||
if (objectId) params.set('objectId', objectId)
|
||||
if (objectTitle) params.set('objectTitle', objectTitle)
|
||||
|
||||
if (params.toString()) {
|
||||
reportsUrl += `?${params.toString()}`
|
||||
}
|
||||
|
||||
router.push(reportsUrl)
|
||||
}
|
||||
|
||||
// Обработчик клика по кнопке "История" - навигация на страницу истории тревог с выбранным детектором
|
||||
const handleHistoryClick = () => {
|
||||
const currentUrl = new URL(window.location.href)
|
||||
const objectId = currentUrl.searchParams.get('objectId') || currentObject.id
|
||||
const objectTitle = currentUrl.searchParams.get('objectTitle') || currentObject.title
|
||||
|
||||
const detectorData = {
|
||||
...detector,
|
||||
notifications: detector.notifications || []
|
||||
}
|
||||
setSelectedDetector(detectorData)
|
||||
|
||||
let alertsUrl = '/alerts'
|
||||
const params = new URLSearchParams()
|
||||
|
||||
if (objectId) params.set('objectId', objectId)
|
||||
if (objectTitle) params.set('objectTitle', objectTitle)
|
||||
|
||||
if (params.toString()) {
|
||||
alertsUrl += `?${params.toString()}`
|
||||
}
|
||||
|
||||
router.push(alertsUrl)
|
||||
}
|
||||
|
||||
// Компонент секции деталей детектора
|
||||
// Отображает информацию о датчике в компактном или полном формате
|
||||
const DetailsSection: React.FC<{ compact?: boolean }> = ({ compact = false }) => (
|
||||
<div className={compact ? 'mt-2 space-y-1' : 'space-y-0 border border-[rgb(30,31,36)] rounded-lg overflow-hidden'}>
|
||||
{compact ? (
|
||||
// Компактный режим: 4 строки по 2 колонки с основной информацией
|
||||
<>
|
||||
{/* Строка 1: Маркировка и тип детектора */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<div className="text-[rgb(113,113,122)] text-[11px]">Маркировка по проекту</div>
|
||||
<div className="text-white text-xs truncate">{detector.name}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[rgb(113,113,122)] text-[11px]">Тип детектора</div>
|
||||
<div className="text-white text-xs truncate">{displayDetectorTypeLabel}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Строка 2: Местоположение и статус */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<div className="text-[rgb(113,113,122)] text-[11px]">Местоположение</div>
|
||||
<div className="text-white text-xs truncate">{detector.location}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[rgb(113,113,122)] text-[11px]">Статус</div>
|
||||
<div className="text-white text-xs truncate">{getStatusText(detector.status)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Строка 3: Временная метка и этаж */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<div className="text-[rgb(113,113,122)] text-[11px]">Временная метка</div>
|
||||
<div className="text-white text-xs truncate">{formattedTimestamp}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[rgb(113,113,122)] text-[11px]">Этаж</div>
|
||||
<div className="text-white text-xs truncate">{detector.floor}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Строка 4: Серийный номер */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<div className="text-[rgb(113,113,122)] text-[11px]">Серийный номер</div>
|
||||
<div className="text-white text-xs truncate">{detector.serial_number}</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
// Полный режим: 3 строки по 2 колонки с рамками между элементами
|
||||
<>
|
||||
{/* Строка 1: Маркировка по проекту и тип детектора */}
|
||||
<div className="flex">
|
||||
<div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
|
||||
<div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Маркировка по проекту</div>
|
||||
<div className="text-white text-sm">{detector.name}</div>
|
||||
</div>
|
||||
<div className="flex-1 p-4">
|
||||
<div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Тип детектора</div>
|
||||
<div className="text-white text-sm">{displayDetectorTypeLabel}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Строка 2: Местоположение и статус */}
|
||||
<div className="flex border-t border-[rgb(30,31,36)]">
|
||||
<div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
|
||||
<div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Местоположение</div>
|
||||
<div className="text-white text-sm">{detector.location}</div>
|
||||
</div>
|
||||
<div className="flex-1 p-4">
|
||||
<div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Статус</div>
|
||||
<div className="text-white text-sm">{getStatusText(detector.status)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Строка 3: Временная метка и серийный номер */}
|
||||
<div className="flex border-t border-[rgb(30,31,36)]">
|
||||
<div className="flex-1 p-4 border-r border-[rgb(30,31,36)]">
|
||||
<div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Временная метка</div>
|
||||
<div className="text-white text-sm">{formattedTimestamp}</div>
|
||||
</div>
|
||||
<div className="flex-1 p-4">
|
||||
<div className="text-[rgb(113,113,122)] text-sm font-medium mb-1">Серийный номер</div>
|
||||
<div className="text-white text-sm">{detector.serial_number}</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
// Компактный режим с якорной позицией (всплывающее окно)
|
||||
// Используется для отображения информации при наведении на детектор в списке
|
||||
if (compact && anchor) {
|
||||
// Проверяем границы экрана и корректируем позицию
|
||||
const tooltipHeight = 450 // Примерная высота толтипа с графиком
|
||||
const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 800
|
||||
const bottomOverflow = anchor.top + tooltipHeight - viewportHeight
|
||||
|
||||
// Если толтип выходит за нижнюю границу, сдвигаем вверх
|
||||
const adjustedTop = bottomOverflow > 0 ? anchor.top - bottomOverflow - 20 : anchor.top
|
||||
|
||||
return (
|
||||
<div className="absolute z-40" style={{ left: anchor.left, top: adjustedTop }}>
|
||||
<div className="rounded-[10px] bg-black/80 text-white text-xs px-3 py-2 shadow-xl min-w-[300px] max-w-[400px]">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex-1">
|
||||
<div className="font-semibold truncate">{detector.name}</div>
|
||||
</div>
|
||||
<button onClick={onClose} className="text-gray-300 hover:text-white transition-colors">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-2 grid grid-cols-2 gap-2">
|
||||
<button onClick={handleReportsClick} className="bg-[#3193f5] hover:bg-[#2563eb] text-white px-2 py-1 rounded-[8px] text-xs font-medium transition-colors flex items-center gap-1">
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Отчет
|
||||
</button>
|
||||
<button onClick={handleHistoryClick} className="bg-[#3193f5] hover:bg-[#2563eb] text-white px-2 py-1 rounded-[8px] text-xs font-medium transition-colors flex items-center gap-1">
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
История
|
||||
</button>
|
||||
</div>
|
||||
<DetailsSection compact={true} />
|
||||
|
||||
{/* График за последний месяц */}
|
||||
<div className="mt-3">
|
||||
<div className="text-[rgb(113,113,122)] text-[11px] mb-2">График за месяц</div>
|
||||
<div className="min-h-[100px]">
|
||||
<AreaChart data={chartData} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Полный режим боковой панели (основной режим)
|
||||
// Отображается как правая панель с полной информацией о детекторе
|
||||
return (
|
||||
<div className="absolute left-[500px] top-0 bg-[#161824] border-r border-gray-700 з-30 w-[454px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
|
||||
<div className="h-full overflow-auto p-5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
{/* Заголовок с названием детектора */}
|
||||
<h3 className="text-white text-lg font-medium">
|
||||
{detector.name}
|
||||
</h3>
|
||||
{/* Кнопки действий: Отчет и История */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={handleReportsClick} className="bg-[#3193f5] hover:bg-[#2563eb] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
Отчет
|
||||
</button>
|
||||
<button onClick={handleHistoryClick} className="bg-[#3193f5] hover:bg-[#2563eb] text-white px-3 py-2 rounded-[10px] text-sm font-medium transition-colors flex items-center gap-2">
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
История
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Секция с детальной информацией о детекторе */}
|
||||
<DetailsSection />
|
||||
|
||||
{/* График за последний месяц */}
|
||||
<div className="mt-6">
|
||||
<h4 className="text-white text-base font-medium mb-4">График за последний месяц</h4>
|
||||
<div className="min-h-[200px] bg-[rgb(22,24,36)] rounded-lg p-4">
|
||||
<AreaChart data={chartData} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Кнопка закрытия панели */}
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6л12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DetectorMenu
|
||||
Reference in New Issue
Block a user