325 lines
15 KiB
TypeScript
325 lines
15 KiB
TypeScript
'use client'
|
||
|
||
import React, { useEffect, useState, useMemo } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
import Sidebar from '../ui/Sidebar'
|
||
import AnimatedBackground from '../ui/AnimatedBackground'
|
||
import useNavigationStore from '../../app/store/navigationStore'
|
||
import ChartCard from './ChartCard'
|
||
import AreaChart from './AreaChart'
|
||
import BarChart from './BarChart'
|
||
import { aggregateChartDataByDays } from '../../lib/chartDataAggregator'
|
||
|
||
const Dashboard: React.FC = () => {
|
||
const router = useRouter()
|
||
const { currentObject, setCurrentSubmenu, closeMonitoring, closeFloorNavigation, closeNotifications } = useNavigationStore()
|
||
const objectTitle = currentObject?.title
|
||
|
||
const [dashboardAlerts, setDashboardAlerts] = useState<any[]>([])
|
||
const [rawChartData, setRawChartData] = useState<{ timestamp: string; value: number }[]>([])
|
||
const [sensorTypes] = useState<Array<{code: string, name: string}>>([
|
||
{ code: '', name: 'Все датчики' },
|
||
{ code: 'GA', name: 'Инклинометр' },
|
||
{ code: 'PE', name: 'Танзометр' },
|
||
{ code: 'GLE', name: 'Гидроуровень' }
|
||
])
|
||
const [selectedSensorType, setSelectedSensorType] = useState<string>('')
|
||
const [selectedChartPeriod, setSelectedChartPeriod] = useState<string>('168')
|
||
const [selectedTablePeriod, setSelectedTablePeriod] = useState<string>('168')
|
||
|
||
useEffect(() => {
|
||
const loadDashboard = async () => {
|
||
try {
|
||
const params = new URLSearchParams()
|
||
params.append('time_period', selectedChartPeriod)
|
||
|
||
const res = await fetch(`/api/get-dashboard?${params.toString()}`, { cache: 'no-store' })
|
||
if (!res.ok) return
|
||
const payload = await res.json()
|
||
console.log('[Dashboard] GET /api/get-dashboard', { status: res.status, payload })
|
||
|
||
let tableData = payload?.data?.table_data ?? []
|
||
tableData = Array.isArray(tableData) ? tableData : []
|
||
|
||
if (objectTitle) {
|
||
tableData = tableData.filter((a: any) => a.object === objectTitle)
|
||
}
|
||
|
||
if (selectedSensorType && selectedSensorType !== '') {
|
||
tableData = tableData.filter((a: any) => {
|
||
return a.detector_type?.toLowerCase() === selectedSensorType.toLowerCase()
|
||
})
|
||
}
|
||
|
||
setDashboardAlerts(tableData as any[])
|
||
|
||
const cd = Array.isArray(payload?.data?.chart_data) ? payload.data.chart_data : []
|
||
setRawChartData(cd as any[])
|
||
} catch (e) {
|
||
console.error('Failed to load dashboard:', e)
|
||
}
|
||
}
|
||
loadDashboard()
|
||
}, [objectTitle, selectedChartPeriod, selectedSensorType])
|
||
|
||
// Отдельный эффект для загрузки таблицы по выбранному периоду
|
||
useEffect(() => {
|
||
const loadTableData = async () => {
|
||
try {
|
||
const params = new URLSearchParams()
|
||
params.append('time_period', selectedTablePeriod)
|
||
|
||
const res = await fetch(`/api/get-dashboard?${params.toString()}`, { cache: 'no-store' })
|
||
if (!res.ok) return
|
||
const payload = await res.json()
|
||
console.log('[Dashboard] GET /api/get-dashboard (table)', { status: res.status, payload })
|
||
|
||
let tableData = payload?.data?.table_data ?? []
|
||
tableData = Array.isArray(tableData) ? tableData : []
|
||
|
||
if (objectTitle) {
|
||
tableData = tableData.filter((a: any) => a.object === objectTitle)
|
||
}
|
||
|
||
if (selectedSensorType && selectedSensorType !== '') {
|
||
tableData = tableData.filter((a: any) => {
|
||
return a.detector_type?.toLowerCase() === selectedSensorType.toLowerCase()
|
||
})
|
||
}
|
||
|
||
setDashboardAlerts(tableData as any[])
|
||
} catch (e) {
|
||
console.error('Failed to load table data:', e)
|
||
}
|
||
}
|
||
loadTableData()
|
||
}, [objectTitle, selectedTablePeriod, selectedSensorType])
|
||
|
||
const handleBackClick = () => {
|
||
router.push('/objects')
|
||
}
|
||
|
||
const filteredAlerts = dashboardAlerts.filter((alert: any) => {
|
||
if (selectedSensorType === '') return true
|
||
return alert.detector_type?.toLowerCase() === selectedSensorType.toLowerCase()
|
||
})
|
||
|
||
// Статусы
|
||
const statusCounts = filteredAlerts.reduce((acc: { critical: number; warning: number; normal: number }, a: any) => {
|
||
if (a.severity === 'critical') acc.critical++
|
||
else if (a.severity === 'warning') acc.warning++
|
||
else acc.normal++
|
||
return acc
|
||
}, { critical: 0, warning: 0, normal: 0 })
|
||
|
||
const handleNavigationClick = () => {
|
||
closeMonitoring()
|
||
closeFloorNavigation()
|
||
closeNotifications()
|
||
setCurrentSubmenu(null)
|
||
router.push('/navigation')
|
||
}
|
||
|
||
const handleSensorTypeChange = (sensorType: string) => {
|
||
setSelectedSensorType(sensorType)
|
||
}
|
||
|
||
const handleChartPeriodChange = (period: string) => {
|
||
setSelectedChartPeriod(period)
|
||
}
|
||
|
||
const handleTablePeriodChange = (period: string) => {
|
||
setSelectedTablePeriod(period)
|
||
}
|
||
|
||
// Агрегируем данные графика в зависимости от периода
|
||
const chartData = useMemo(() => {
|
||
return aggregateChartDataByDays(rawChartData, selectedChartPeriod)
|
||
}, [rawChartData, selectedChartPeriod])
|
||
|
||
const interSemiboldStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 600 }
|
||
const interRegularStyle = { fontFamily: 'Inter, sans-serif', fontWeight: 400 }
|
||
|
||
return (
|
||
<div className="relative flex h-screen bg-[#0e111a] overflow-hidden">
|
||
<AnimatedBackground />
|
||
<div className="relative z-20">
|
||
<Sidebar
|
||
activeItem={1} // Dashboard
|
||
/>
|
||
</div>
|
||
|
||
<div className="relative z-10 flex-1 flex flex-col">
|
||
<header className="bg-[#161824] border-b border-gray-700 px-6 py-4">
|
||
<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>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<div className="flex-1 p-6 overflow-auto">
|
||
<div className="mb-6">
|
||
<h1 style={interSemiboldStyle} className="text-white text-2xl mb-6">{objectTitle || 'Объект'}</h1>
|
||
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="relative">
|
||
<select
|
||
value={selectedSensorType}
|
||
onChange={(e) => handleSensorTypeChange(e.target.value)}
|
||
className="flex items-center gap-6 rounded-[10px] px-4 py-[18px] bg-[rgb(22,24,36)] text-white appearance-none pr-8"
|
||
>
|
||
{sensorTypes.map((type) => (
|
||
<option key={type.code} value={type.code}>
|
||
{type.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
<svg className="w-4 h-4 absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 ml-auto">
|
||
<button
|
||
onClick={handleNavigationClick}
|
||
className="rounded-[10px] px-4 py-[18px] bg-gray-600 text-gray-300 hover:bg-[rgb(22,24,36)] hover:text-white transition-colors"
|
||
>
|
||
<span className="text-sm font-medium">Навигация</span>
|
||
</button>
|
||
|
||
<div className="relative">
|
||
<select
|
||
value={selectedChartPeriod}
|
||
onChange={(e) => handleChartPeriodChange(e.target.value)}
|
||
className="flex items-center gap-2 bg-[rgb(22,24,36)] rounded-lg px-3 py-2 text-white appearance-none pr-8"
|
||
>
|
||
<option value="24">День</option>
|
||
<option value="72">3 дня</option>
|
||
<option value="168">Неделя</option>
|
||
<option value="720">Месяц</option>
|
||
</select>
|
||
<svg className="w-4 h-4 absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Карты-графики */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[18px]">
|
||
<ChartCard
|
||
title="Показатель"
|
||
>
|
||
<AreaChart data={chartData} />
|
||
</ChartCard>
|
||
|
||
<ChartCard
|
||
title="Статистика"
|
||
>
|
||
<BarChart data={chartData?.map((d: any) => ({ value: d.value, label: d.label }))} />
|
||
</ChartCard>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Список детекторов */}
|
||
<div>
|
||
<div>
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h2 style={interSemiboldStyle} className="text-white text-2xl">Тренды</h2>
|
||
<div className="relative">
|
||
<select
|
||
value={selectedTablePeriod}
|
||
onChange={(e) => handleTablePeriodChange(e.target.value)}
|
||
className="bg-[#161824] rounded-lg px-3 py-2 flex items-center gap-2 text-white appearance-none pr-8"
|
||
>
|
||
<option value="24">День</option>
|
||
<option value="72">3 дня</option>
|
||
<option value="168">Неделя</option>
|
||
<option value="720">Месяц</option>
|
||
</select>
|
||
<svg className="w-4 h-4 absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Таблица */}
|
||
<div className="bg-[#161824] rounded-[20px] p-6">
|
||
<div className="overflow-x-auto">
|
||
<table className="w-full">
|
||
<thead>
|
||
<tr className="border-b border-gray-700">
|
||
<th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Детектор</th>
|
||
<th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Сообщение</th>
|
||
<th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Серьезность</th>
|
||
<th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Дата</th>
|
||
<th style={interSemiboldStyle} className="text-left text-white text-sm py-3">Решен</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{filteredAlerts.map((alert: any) => (
|
||
<tr key={alert.id} className="border-b border-gray-800">
|
||
<td style={interRegularStyle} className="py-3 text-white text-sm">{alert.name}</td>
|
||
<td style={interRegularStyle} className="py-3 text-gray-300 text-sm">{alert.message}</td>
|
||
<td className="py-3">
|
||
<span style={interRegularStyle} className={`text-sm ${alert.severity === 'critical' ? 'text-red-500' : alert.severity === 'warning' ? 'text-orange-500' : 'text-green-500'}`}>
|
||
{alert.severity === 'critical' ? 'Критическое' : alert.severity === 'warning' ? 'Предупреждение' : 'Норма'}
|
||
</span>
|
||
</td>
|
||
<td style={interRegularStyle} className="py-3 text-gray-400 text-sm">{new Date(alert.created_at).toLocaleString()}</td>
|
||
<td className="py-3">
|
||
{alert.resolved ? (
|
||
<span style={interRegularStyle} className="text-sm text-green-500">Да</span>
|
||
) : (
|
||
<span style={interRegularStyle} className="text-sm text-gray-500">Нет</span>
|
||
)
|
||
}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Статистика */}
|
||
<div className="mt-6 grid grid-cols-4 gap-4">
|
||
<div className="text-center">
|
||
<div style={interSemiboldStyle} className="text-2xl text-white">{filteredAlerts.length}</div>
|
||
<div style={interRegularStyle} className="text-sm text-gray-400">Всего</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div style={interSemiboldStyle} className="text-2xl text-green-500">{statusCounts.normal}</div>
|
||
<div style={interRegularStyle} className="text-sm text-gray-400">Норма</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div style={interSemiboldStyle} className="text-2xl text-orange-500">{statusCounts.warning}</div>
|
||
<div style={interRegularStyle} className="text-sm text-gray-400">Предупреждения</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div style={interSemiboldStyle} className="text-2xl text-red-500">{statusCounts.critical}</div>
|
||
<div style={interRegularStyle} className="text-sm text-gray-400">Критические</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Dashboard
|