260 lines
12 KiB
TypeScript
260 lines
12 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
import Sidebar from '../ui/Sidebar'
|
||
import useNavigationStore from '../../app/store/navigationStore'
|
||
import ChartCard from './ChartCard'
|
||
import AreaChart from './AreaChart'
|
||
import BarChart from './BarChart'
|
||
import DetectorChart from './DetectorChart'
|
||
import detectorsData from '../../data/detectors.json'
|
||
|
||
const Dashboard: React.FC = () => {
|
||
const router = useRouter()
|
||
const { currentObject, setCurrentSubmenu, closeMonitoring, closeFloorNavigation, closeNotifications } = useNavigationStore()
|
||
const objectId = currentObject?.id
|
||
const objectTitle = currentObject?.title
|
||
|
||
const handleBackClick = () => {
|
||
router.push('/objects')
|
||
}
|
||
|
||
interface DetectorData {
|
||
detector_id: number
|
||
name: string
|
||
object: string
|
||
status: string
|
||
type: string
|
||
location: string
|
||
floor: number
|
||
checked?: boolean
|
||
notifications: Array<{
|
||
id: number
|
||
type: string
|
||
message: string
|
||
timestamp: string
|
||
acknowledged: boolean
|
||
priority: string
|
||
}>
|
||
}
|
||
|
||
const detectorsArray = Object.values(detectorsData.detectors).filter(
|
||
(detector: DetectorData) => objectId ? detector.object === objectId : true
|
||
)
|
||
|
||
// Статусы
|
||
const statusCounts = detectorsArray.reduce((acc: { critical: number; warning: number; normal: number }, detector: DetectorData) => {
|
||
if (detector.status === '#b3261e') acc.critical++
|
||
else if (detector.status === '#fd7c22') acc.warning++
|
||
else if (detector.status === '#00ff00') acc.normal++
|
||
return acc
|
||
}, { critical: 0, warning: 0, normal: 0 })
|
||
|
||
const handleNavigationClick = () => {
|
||
closeMonitoring()
|
||
closeFloorNavigation()
|
||
closeNotifications()
|
||
setCurrentSubmenu(null)
|
||
router.push('/navigation')
|
||
}
|
||
|
||
return (
|
||
<div className="flex h-screen bg-[#0e111a]">
|
||
<Sidebar
|
||
activeItem={1} // Dashboard
|
||
/>
|
||
|
||
<div className="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 className="text-white text-2xl font-semibold mb-6">Объект {objectId?.replace('object_', '')}</h1>
|
||
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<button
|
||
className="flex items-center gap-6 rounded-[10px] px-4 py-[18px] bg-[rgb(22,24,36)] text-white"
|
||
>
|
||
<span className="text-sm font-medium">Датчики : все</span>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
|
||
<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="flex items-center gap-2 bg-[rgb(22,24,36)] rounded-lg px-3 py-2">
|
||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||
</svg>
|
||
<span className="text-white text-sm font-medium">Период</span>
|
||
<div className="w-2 h-2 bg-white rounded-full"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Карты-графики */}
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[18px]">
|
||
<ChartCard
|
||
title="Показатель"
|
||
subtitle="За последние 6 месяцев"
|
||
>
|
||
<AreaChart />
|
||
</ChartCard>
|
||
|
||
<ChartCard
|
||
title="Статистика"
|
||
subtitle="Данные за период"
|
||
>
|
||
<BarChart />
|
||
</ChartCard>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Список детекторов */}
|
||
<div>
|
||
<div>
|
||
<div className="flex items-center justify-between mb-6">
|
||
<h2 className="text-white text-2xl font-semibold">Тренды</h2>
|
||
<div className="bg-[#161824] rounded-lg px-3 py-2 flex items-center gap-2">
|
||
<svg className="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clipRule="evenodd" />
|
||
</svg>
|
||
<span className="text-white text-sm font-medium">Месяц</span>
|
||
<svg className="w-4 h-4 text-gray-400" 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 className="text-left text-white font-medium py-3">Детектор</th>
|
||
<th className="text-left text-white font-medium py-3">Статус</th>
|
||
<th className="text-left text-white font-medium py-3">Местоположение</th>
|
||
<th className="text-left text-white font-medium py-3">Проверен</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{detectorsArray.map((detector: DetectorData) => (
|
||
<tr key={detector.detector_id} className="border-b border-gray-800">
|
||
<td className="py-3 text-white text-sm">{detector.name}</td>
|
||
<td className="py-3">
|
||
<div className="flex items-center gap-2">
|
||
<div
|
||
className={`w-3 h-3 rounded-full`}
|
||
style={{ backgroundColor: detector.status }}
|
||
></div>
|
||
<span className="text-sm text-gray-300">
|
||
{detector.status === '#b3261e' ? 'Критическое' :
|
||
detector.status === '#fd7c22' ? 'Предупреждение' : 'Норма'}
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td className="py-3 text-gray-400 text-sm">{detector.location}</td>
|
||
<td className="py-3">
|
||
{detector.checked ? (
|
||
<div className="flex items-center gap-1">
|
||
<svg className="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||
</svg>
|
||
<span className="text-sm text-green-500">Да</span>
|
||
</div>
|
||
) : (
|
||
<span className="text-sm text-gray-500">Нет</span>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{/* Статы */}
|
||
<div className="mt-6 grid grid-cols-4 gap-4">
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-white">{detectorsArray.length}</div>
|
||
<div className="text-sm text-gray-400">Всего</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-green-500">{statusCounts.normal}</div>
|
||
<div className="text-sm text-gray-400">Норма</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-orange-500">{statusCounts.warning}</div>
|
||
<div className="text-sm text-gray-400">Предупреждения</div>
|
||
</div>
|
||
<div className="text-center">
|
||
<div className="text-2xl font-bold text-red-500">{statusCounts.critical}</div>
|
||
<div className="text-sm text-gray-400">Критические</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Графики с аналитикой */}
|
||
<div className="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-[18px]">
|
||
<ChartCard
|
||
title="Тренды детекторов"
|
||
subtitle="За последний месяц"
|
||
>
|
||
<DetectorChart type="line" />
|
||
</ChartCard>
|
||
|
||
<ChartCard
|
||
title="Статистика по месяцам"
|
||
subtitle="Активность детекторов"
|
||
>
|
||
<DetectorChart type="bar" />
|
||
</ChartCard>
|
||
|
||
<ChartCard
|
||
title="Анализ производительности"
|
||
subtitle="Эффективность работы"
|
||
>
|
||
<DetectorChart type="line" />
|
||
</ChartCard>
|
||
|
||
<ChartCard
|
||
title="Сводка по статусам"
|
||
subtitle="Распределение состояний"
|
||
>
|
||
<DetectorChart type="bar" />
|
||
</ChartCard>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default Dashboard |