Merge branch 'AEB-71/navigation_and_dashboard' into 'main'

AEB-71: Added 3D navigation in monitoring zones

See merge request wedeving/aerbim-www!13
This commit is contained in:
Timofey Syrokvashko
2025-11-11 10:36:07 +03:00
27 changed files with 503 additions and 184 deletions

View File

@@ -8,11 +8,11 @@ class AlertSerializer(serializers.ModelSerializer):
name = serializers.SerializerMethodField()
object = serializers.SerializerMethodField()
metric_value = serializers.SerializerMethodField()
sensor_type_name = serializers.SerializerMethodField()
detector_type = serializers.SerializerMethodField()
class Meta:
model = Alert
fields = ('id', 'name', 'object', 'metric_value', 'sensor_type_name', 'message', 'severity', 'created_at', 'resolved')
fields = ('id', 'name', 'object', 'metric_value', 'detector_type', 'message', 'severity', 'created_at', 'resolved')
@extend_schema_field(OpenApiTypes.STR)
def get_name(self, obj) -> str:
@@ -22,14 +22,17 @@ class AlertSerializer(serializers.ModelSerializer):
def get_object(self, obj) -> Optional[str]:
zone = obj.sensor.zones.first()
return zone.object.title if zone else None
@extend_schema_field(OpenApiTypes.STR)
def get_metric_value(self, obj) -> str:
if obj.metric.value is not None:
unit = obj.sensor.signal_format.unit if obj.sensor.signal_format else ''
return f"{obj.metric.value} {unit}".strip()
return obj.metric.raw_value
@extend_schema_field(OpenApiTypes.STR)
def get_sensor_type_name(self, obj) -> str:
return obj.sensor_type.name
def get_detector_type(self, obj) -> str:
sensor_type = getattr(obj, 'sensor_type', None)
if sensor_type is None and hasattr(obj, 'sensor') and obj.sensor:
sensor_type = getattr(obj.sensor, 'sensor_type', None)
if sensor_type is None:
return ''
return (getattr(sensor_type, 'code', '') or '').upper()

View File

@@ -23,6 +23,7 @@ class NotificationSerializer(serializers.ModelSerializer):
class DetectorSerializer(serializers.ModelSerializer):
detector_id = serializers.SerializerMethodField()
type = serializers.SerializerMethodField()
detector_type = serializers.SerializerMethodField()
name = serializers.SerializerMethodField()
object = serializers.SerializerMethodField()
status = serializers.SerializerMethodField()
@@ -32,22 +33,28 @@ class DetectorSerializer(serializers.ModelSerializer):
class Meta:
model = Sensor
fields = ('detector_id', 'type', 'serial_number', 'name', 'object', 'status', 'zone', 'floor', 'notifications')
fields = ('detector_id', 'type', 'detector_type', 'serial_number', 'name', 'object', 'status', 'zone', 'floor', 'notifications')
def get_detector_id(self, obj):
return obj.name or f"{obj.sensor_type.code}-{obj.id}"
def get_type(self, obj):
# маппинг типов сенсоров на нужные значения
sensor_type_mapping = {
'GA': 'fire_detector',
'PE': 'pressure_sensor',
'GLE': 'gas_detector'
'GA': 'Инклинометр',
'PE': 'Тензометр',
'GLE': 'Гидроуровень',
}
return sensor_type_mapping.get(obj.sensor_type.code, 'unknown')
code = (getattr(obj.sensor_type, 'code', '') or '').upper()
return sensor_type_mapping.get(code, (getattr(obj.sensor_type, 'name', '') or ''))
def get_detector_type(self, obj):
return (getattr(obj.sensor_type, 'code', '') or '').upper()
def get_name(self, obj):
return f"{obj.sensor_type.name} {obj.serial_number}"
sensor_type = getattr(obj, 'sensor_type', None) or getattr(obj, 'sensor_type', None)
serial = getattr(obj, 'serial_number', '') or ''
base_name = getattr(obj, 'name', '') or ''
return base_name or f"{getattr(obj.sensor_type, 'code', '')}-{serial}".strip('-')
def get_object(self, obj):
# получаем первую зону датчика и её объект
@@ -64,17 +71,12 @@ class DetectorSerializer(serializers.ModelSerializer):
return 'normal'
def get_zone(self, obj):
zone = obj.zones.first()
if zone:
return zone.name
return None
first_zone = obj.zones.first()
return first_zone.name if first_zone else None
def get_floor(self, obj):
# получаем этаж из зоны
zone = obj.zones.first()
if zone:
return zone.floor
return None # если датчик не привязали к зоне
first_zone = obj.zones.first()
return getattr(first_zone, 'floor', None)
class DetectorsResponseSerializer(serializers.Serializer):
detectors = serializers.SerializerMethodField()

View File

@@ -234,7 +234,7 @@ const AlertsPage: React.FC = () => {
</td>
<td className="py-4">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
item.acknowledged ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
item.acknowledged ? 'bg-green-600/20 text-green-300 ring-1 ring-green-600/40' : 'bg-red-600/20 text-red-300 ring-1 ring-red-600/40'
}`}>
{item.acknowledged ? 'Да' : 'Нет'}
</span>

View File

@@ -29,6 +29,7 @@ interface DetectorType {
status: string
checked: boolean
type: string
detector_type: string
location: string
floor: number
notifications: Array<{
@@ -86,6 +87,7 @@ const NavigationPage: React.FC = () => {
const urlObjectTitle = searchParams.get('objectTitle')
const objectId = currentObject.id || urlObjectId
const objectTitle = currentObject.title || urlObjectTitle
const [selectedModelPath, setSelectedModelPath] = useState<string>('')
const handleModelLoaded = useCallback(() => {
setIsModelReady(true)
@@ -173,12 +175,19 @@ const NavigationPage: React.FC = () => {
}
const getStatusText = (status: string) => {
switch (status) {
case 'active': return 'Активен'
case 'inactive': return 'Неактивен'
case 'error': return 'Ошибка'
case 'maintenance': return 'Обслуживание'
default: return 'Неизвестно'
const s = (status || '').toLowerCase()
switch (s) {
case '#b3261e':
case 'critical':
return 'Критический'
case '#fd7c22':
case 'warning':
return 'Предупреждение'
case '#00ff00':
case 'normal':
return 'Норма'
default:
return 'Неизвестно'
}
}
@@ -191,18 +200,23 @@ const NavigationPage: React.FC = () => {
<div className="flex-1 flex flex-col relative">
{showMonitoring && (
<div className="absolute left-0 top-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
<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
objectId={objectId || undefined}
onClose={closeMonitoring}
onSelectModel={(path) => {
setSelectedModelPath(path)
setModelError(null)
setIsModelReady(false)
}}
/>
</div>
</div>
)}
{showFloorNavigation && (
<div className="absolute left-0 top-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
<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}
@@ -216,7 +230,7 @@ const NavigationPage: React.FC = () => {
)}
{showNotifications && (
<div className="absolute left-0 top-0 bg-[#161824] border-r border-gray-700 z-20 w-[500px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
<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}
@@ -236,7 +250,7 @@ const NavigationPage: React.FC = () => {
detector => detector.detector_id === selectedNotification.detector_id
);
return detectorData ? (
<div className="absolute left-[500px] top-0 bg-[#161824] border-r border-gray-700 z-30 w-[454px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
<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}
@@ -251,8 +265,8 @@ const NavigationPage: React.FC = () => {
null
)}
<header className="bg-[#161824] border-b border-gray-700 px-6 py-4">
<div className="flex items-center justify-between">
<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}
@@ -292,7 +306,7 @@ const NavigationPage: React.FC = () => {
</div>
) : (
<ModelViewer
modelPath='/static-models/AerBIM_Monitor_ASM_HT_Viewer_Expo2017Astana_Level_+1430_custom_prop.glb'
modelPath={selectedModelPath}
onModelLoaded={handleModelLoaded}
onError={handleModelError}
focusSensorId={selectedDetector?.serial_number ?? null}

View File

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react'
import ObjectGallery from '../../../components/objects/ObjectGallery'
import { ObjectData } from '../../../components/objects/ObjectCard'
import Sidebar from '../../../components/ui/Sidebar'
import { useRouter } from 'next/navigation'
// Универсальная функция для преобразования объекта из бэкенда в ObjectData
const transformRawToObjectData = (raw: any): ObjectData => {
@@ -27,6 +28,7 @@ const ObjectsPage: React.FC = () => {
const [loading, setLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
const [selectedObjectId, setSelectedObjectId] = useState<string | null>(null)
const router = useRouter()
useEffect(() => {
const loadData = async () => {
@@ -41,7 +43,15 @@ const ObjectsPage: React.FC = () => {
console.log('[ObjectsPage] GET /api/get-objects', { status: res.status, payload })
if (!res.ok) {
throw new Error(typeof payload === 'string' ? payload : (payload?.error || 'Не удалось получить данные объектов'))
const errorMessage = typeof payload === 'string' ? payload : (payload?.error || 'Не удалось получить данные объектов')
if (errorMessage.includes('Authentication required') || res.status === 401) {
console.log('[ObjectsPage] Authentication required, redirecting to login')
router.push('/login')
return
}
throw new Error(errorMessage)
}
const data = (payload?.data ?? payload) as any
@@ -66,7 +76,7 @@ const ObjectsPage: React.FC = () => {
}
loadData()
}, [])
}, [router])
const handleObjectSelect = (objectId: string) => {
console.log('Object selected:', objectId)

View File

@@ -18,10 +18,20 @@ export async function GET(
const stat = fs.statSync(filePath);
const stream = fs.createReadStream(filePath);
const ext = path.extname(fileName).toLowerCase();
let contentType = 'application/octet-stream';
if (ext === '.glb') contentType = 'model/gltf-binary';
else if (ext === '.gltf') contentType = 'model/gltf+json';
else if (ext === '.bin') contentType = 'application/octet-stream';
else if (ext === '.png') contentType = 'image/png';
else if (ext === '.jpg' || ext === '.jpeg') contentType = 'image/jpeg';
else if (ext === '.webp') contentType = 'image/webp';
else if (ext === '.ktx2') contentType = 'image/ktx2';
return new Response(stream as unknown as ReadableStream, {
headers: {
'Content-Length': stat.size.toString(),
'Content-Type': 'model/gltf-binary',
'Content-Type': contentType,
},
});
}

View File

@@ -0,0 +1,47 @@
export const dynamic = 'force-static';
import fs from 'fs';
import path from 'path';
export async function GET() {
try {
const dirPath = path.join(process.cwd(), 'assets', 'big-models');
if (!fs.existsSync(dirPath)) {
return new Response(JSON.stringify({ models: [] }), {
status: 200,
headers: { 'Content-Type': 'application/json' },
});
}
const files = fs.readdirSync(dirPath, { withFileTypes: true });
const models = files
.filter((ent) => ent.isFile() && (ent.name.toLowerCase().endsWith('.glb') || ent.name.toLowerCase().endsWith('.gltf')))
.map((ent) => {
const filename = ent.name;
const base = filename.replace(/\.(glb|gltf)$/i, '');
let title = base;
title = title.replace(/^AerBIM-Monitor_ASM-HT-Viewer_/i, '');
title = title.replace(/_/g, ' ');
title = title.replace(/\bLevel\b/gi, 'Уровень');
title = title.replace(/\bcustom\s*prop\b/gi, '');
title = title.replace(/\bcustom\b/gi, '');
title = title.replace(/\bprop\b/gi, '');
title = title.replace(/\s{2,}/g, ' ').trim();
const pathUrl = `/static-models/${filename}`;
return { name: title, path: pathUrl };
});
return new Response(JSON.stringify({ models }), {
status: 200,
headers: { 'Content-Type': 'application/json' },
});
} catch (error) {
console.error('[big-models/list] Error listing models:', error);
const msg = error instanceof Error ? error.message : String(error);
return new Response(JSON.stringify({ error: msg, models: [] }), {
status: 500,
headers: { 'Content-Type': 'application/json' },
});
}
}

View File

@@ -89,16 +89,21 @@ export async function GET(req: NextRequest) {
return true
}) : list
const transformed = filtered.map((a) => ({
const transformed = filtered.map((a) => {
const severity = String(a?.severity || a?.type || '').toLowerCase()
const type = severity === 'critical' ? 'critical' : severity === 'warning' ? 'warning' : 'info'
const priority = severity === 'critical' ? 'high' : severity === 'warning' ? 'medium' : 'low'
return {
id: a.id,
detector_name: a.name,
detector_name: a.name || a.detector_name,
message: a.message,
type: a.severity,
type,
location: a.object,
priority: a.severity,
acknowledged: a.resolved,
timestamp: a.created_at,
}))
priority,
acknowledged: typeof a.acknowledged === 'boolean' ? a.acknowledged : !!a.resolved,
timestamp: a.timestamp || a.created_at,
}
})
return NextResponse.json({ success: true, data: transformed })
} catch (error) {

View File

@@ -38,8 +38,14 @@ export async function GET(req: NextRequest) {
}
const url = new URL(req.url)
const timePeriod = url.searchParams.get('time_period')
const qs = timePeriod ? `?time_period=${encodeURIComponent(timePeriod)}` : ''
const timePeriodRaw = url.searchParams.get('time_period')
const allowedPeriods = new Set([24, 72, 168, 720])
let timePeriodNum = timePeriodRaw ? Number(timePeriodRaw) : undefined
if (Number.isNaN(timePeriodNum)) {
timePeriodNum = undefined
}
const finalTimePeriod = timePeriodNum && allowedPeriods.has(timePeriodNum) ? String(timePeriodNum) : '168'
const qs = `?time_period=${encodeURIComponent(finalTimePeriod)}`
const res = await fetch(`${backendUrl}/account/get-dashboard/${qs}`, {
headers: {

View File

@@ -67,6 +67,20 @@ export async function GET() {
checked: sensor.checked ?? false,
location: sensor.zone ?? '',
serial_number: sensor.serial_number ?? sensor.name ?? '',
detector_type: sensor.detector_type ?? '',
notifications: Array.isArray(sensor.notifications) ? sensor.notifications.map((n: any) => {
const severity = String(n?.severity || n?.type || '').toLowerCase()
const type = severity === 'critical' ? 'critical' : severity === 'warning' ? 'warning' : 'info'
const priority = severity === 'critical' ? 'high' : severity === 'warning' ? 'medium' : 'low'
return {
id: n.id,
type,
message: n.message,
timestamp: n.timestamp || n.created_at,
acknowledged: typeof n.acknowledged === 'boolean' ? n.acknowledged : !!n.resolved,
priority,
}
}) : []
}
}

View File

@@ -23,11 +23,32 @@ export async function GET(req: NextRequest) {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ refresh: refreshToken }),
})
if (refreshRes.ok) {
const refreshed = await refreshRes.json()
accessToken = refreshed.access
} else {
const errorText = await refreshRes.text()
let errorData: { error?: string; detail?: string; code?: string } = {}
try {
errorData = JSON.parse(errorText)
} catch {
errorData = { error: errorText }
}
const errorMessage = (errorData.error as string) || (errorData.detail as string) || ''
if (typeof errorMessage === 'string' &&
(errorMessage.includes('Token is expired') ||
errorMessage.includes('expired') ||
errorData.code === 'token_not_valid')) {
console.warn('Refresh token expired, user needs to re-authenticate')
} else {
console.error('Token refresh failed:', errorData.error || errorData.detail || 'Unknown error')
}
}
} catch (error) {
console.error('Error during token refresh:', error)
}
} catch {}
}
if (!accessToken) {
@@ -53,6 +74,20 @@ export async function GET(req: NextRequest) {
try { payload = JSON.parse(payloadText) } catch { payload = payloadText }
if (!objectsRes.ok) {
if (payload && typeof payload === 'object') {
if (payload.code === 'token_not_valid' ||
(payload.detail && typeof payload.detail === 'string' && (payload.detail.includes('Token is expired') || payload.detail.includes('Given token not valid'))) ||
(payload.messages && Array.isArray(payload.messages) && payload.messages.some((msg: any) =>
msg.message && typeof msg.message === 'string' && msg.message.includes('Token is expired')
))) {
console.warn('Access token expired, user needs to re-authenticate')
return NextResponse.json({
success: false,
error: 'Authentication required - please log in again'
}, { status: 401 })
}
}
const err = typeof payload === 'string' ? payload : JSON.stringify(payload)
return NextResponse.json({ success: false, error: `Backend objects error: ${err}` }, { status: objectsRes.status })
}

View File

@@ -8,6 +8,7 @@ export interface DetectorType {
object: string
status: string
type: string
detector_type: string
location: string
floor: number
checked: boolean

View File

@@ -18,6 +18,7 @@ interface RawDetector {
object: string
status: string
type: string
detector_type: string
location: string
floor: number
notifications: Array<{

View File

@@ -22,15 +22,7 @@ const AreaChart: React.FC<AreaChartProps> = ({ className = '', data }) => {
const safeData = (Array.isArray(data) && data.length > 0)
? data
: [
{ value: 5 },
{ value: 3 },
{ value: 7 },
{ value: 2 },
{ value: 6 },
{ value: 4 },
{ value: 8 }
]
: Array.from({ length: 7 }, () => ({ value: 0 }))
const maxVal = Math.max(...safeData.map(d => d.value || 0), 1)
const stepX = safeData.length > 1 ? width / (safeData.length - 1) : width

View File

@@ -14,24 +14,9 @@ interface BarChartProps {
}
const BarChart: React.FC<BarChartProps> = ({ className = '', data }) => {
const defaultData = [
{ value: 80, color: 'rgb(42, 157, 144)' },
{ value: 65, color: 'rgb(42, 157, 144)' },
{ value: 90, color: 'rgb(42, 157, 144)' },
{ value: 45, color: 'rgb(42, 157, 144)' },
{ value: 75, color: 'rgb(42, 157, 144)' },
{ value: 55, color: 'rgb(42, 157, 144)' },
{ value: 85, color: 'rgb(42, 157, 144)' },
{ value: 70, color: 'rgb(42, 157, 144)' },
{ value: 60, color: 'rgb(42, 157, 144)' },
{ value: 95, color: 'rgb(42, 157, 144)' },
{ value: 40, color: 'rgb(42, 157, 144)' },
{ value: 80, color: 'rgb(42, 157, 144)' }
]
const barData = (Array.isArray(data) && data.length > 0)
? data.map(d => ({ value: d.value, color: d.color || 'rgb(42, 157, 144)' }))
: defaultData
: Array.from({ length: 12 }, () => ({ value: 0, color: 'rgb(42, 157, 144)' }))
const maxVal = Math.max(...barData.map(b => b.value || 0), 1)

View File

@@ -7,28 +7,49 @@ import useNavigationStore from '../../app/store/navigationStore'
import ChartCard from './ChartCard'
import AreaChart from './AreaChart'
import BarChart from './BarChart'
import DetectorChart from './DetectorChart'
const Dashboard: React.FC = () => {
const router = useRouter()
const { currentObject, setCurrentSubmenu, closeMonitoring, closeFloorNavigation, closeNotifications } = useNavigationStore()
const objectId = currentObject?.id
const objectTitle = currentObject?.title
const [dashboardAlerts, setDashboardAlerts] = useState<any[]>([])
const [chartData, setChartData] = 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 res = await fetch('/api/get-dashboard', { cache: 'no-store' })
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 })
const tableData = payload?.data?.table_data ?? []
const arr = (Array.isArray(tableData) ? tableData : [])
.filter((a: any) => (objectTitle ? a.object === objectTitle : true))
setDashboardAlerts(arr as any[])
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 : []
setChartData(cd as any[])
@@ -37,14 +58,52 @@ const Dashboard: React.FC = () => {
}
}
loadDashboard()
}, [objectTitle])
}, [objectTitle, selectedChartPeriod, selectedSensorType])
// Separate effect for table data based on table period
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 = dashboardAlerts.reduce((acc: { critical: number; warning: number; normal: number }, a: any) => {
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++
@@ -59,6 +118,18 @@ const Dashboard: React.FC = () => {
router.push('/navigation')
}
const handleSensorTypeChange = (sensorType: string) => {
setSelectedSensorType(sensorType)
}
const handleChartPeriodChange = (period: string) => {
setSelectedChartPeriod(period)
}
const handleTablePeriodChange = (period: string) => {
setSelectedTablePeriod(period)
}
return (
<div className="flex h-screen bg-[#0e111a]">
<Sidebar
@@ -87,17 +158,25 @@ const Dashboard: React.FC = () => {
<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>
<h1 className="text-white text-2xl font-semibold mb-6">{objectTitle || 'Объект'}</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"
<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"
>
<span className="text-sm font-medium">Датчики : все</span>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{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>
</button>
</div>
<div className="flex items-center gap-3 ml-auto">
<button
@@ -107,12 +186,20 @@ const Dashboard: React.FC = () => {
<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" />
<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>
<span className="text-white text-sm font-medium">Период</span>
<div className="w-2 h-2 bg-white rounded-full"></div>
</div>
</div>
</div>
@@ -121,14 +208,14 @@ const Dashboard: React.FC = () => {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[18px]">
<ChartCard
title="Показатель"
subtitle="За последние 6 месяцев"
// subtitle removed
>
<AreaChart data={chartData} />
</ChartCard>
<ChartCard
title="Статистика"
subtitle="Данные за период"
// subtitle removed
>
<BarChart data={chartData?.map((d: any) => ({ value: d.value }))} />
</ChartCard>
@@ -140,12 +227,18 @@ const Dashboard: React.FC = () => {
<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">
<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>
@@ -165,7 +258,7 @@ const Dashboard: React.FC = () => {
</tr>
</thead>
<tbody>
{dashboardAlerts.map((alert: any) => (
{filteredAlerts.map((alert: any) => (
<tr key={alert.id} className="border-b border-gray-800">
<td className="py-3 text-white text-sm">{alert.name}</td>
<td className="py-3 text-gray-300 text-sm">{alert.message}</td>
@@ -191,7 +284,7 @@ const Dashboard: React.FC = () => {
{/* Статы */}
<div className="mt-6 grid grid-cols-4 gap-4">
<div className="text-center">
<div className="text-2xl font-bold text-white">{dashboardAlerts.length}</div>
<div className="text-2xl font-bold text-white">{filteredAlerts.length}</div>
<div className="text-sm text-gray-400">Всего</div>
</div>
<div className="text-center">
@@ -208,37 +301,6 @@ const Dashboard: React.FC = () => {
</div>
</div>
</div>
{/* Графики с аналитикой */}
<div className="mt-6 grid grid-cols-1 lg:grid-cols-4 gap-[18px]">
<ChartCard
title="Тренды детекторов"
subtitle="За последний месяц"
>
<DetectorChart type="line" data={chartData?.map((d: any) => ({ value: d.value }))} />
</ChartCard>
<ChartCard
title="Статистика по месяцам"
subtitle="Активность детекторов"
>
<DetectorChart type="bar" data={chartData?.map((d: any) => ({ value: d.value }))} />
</ChartCard>
<ChartCard
title="Анализ производительности"
subtitle="Эффективность работы"
>
<DetectorChart type="line" data={chartData?.map((d: any) => ({ value: d.value }))} />
</ChartCard>
<ChartCard
title="Сводка по статусам"
subtitle="Распределение состояний"
>
<DetectorChart type="bar" data={chartData?.map((d: any) => ({ value: d.value }))} />
</ChartCard>
</div>
</div>
</div>
</div>

View File

@@ -249,7 +249,6 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
const allMeshes = importedMeshesRef.current || []
// Safeguard: Check if we have any meshes at all
if (allMeshes.length === 0) {
console.warn('[ModelViewer] No meshes available for sensor matching')
highlightLayerRef.current?.removeAllMeshes()
@@ -378,15 +377,15 @@ const ModelViewer: React.FC<ModelViewerProps> = ({
<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">
<div className="text-amber-400 text-lg font-semibold mb-4">
3D модель недоступна
<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">
Путь к 3D модели не задан
Выберите модель в панели «Зоны мониторинга», чтобы начать просмотр
</div>
<div className="text-sm text-gray-400">
Обратитесь к администратору для настройки модели
Если список пуст, добавьте файлы в каталог assets/big-models или проверьте API
</div>
</div>
</div>

View File

@@ -10,8 +10,17 @@ interface DetectorType {
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 {
@@ -26,6 +35,35 @@ interface DetectorMenuProps {
const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose, getStatusText, compact = false, anchor = null }) => {
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' })
: 'Нет данных'
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 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 ? (
@@ -37,7 +75,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
</div>
<div>
<div className="text-[rgb(113,113,122)] text-[11px]">Тип детектора</div>
<div className="text-white text-xs truncate">{detector.type}</div>
<div className="text-white text-xs truncate">{displayDetectorTypeLabel}</div>
</div>
</div>
<div className="grid grid-cols-2 gap-2">
@@ -53,13 +91,19 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
<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">Сегодня, 14:30</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>
<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>
</>
) : (
<>
@@ -70,7 +114,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
</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.type}</div>
<div className="text-white text-sm">{displayDetectorTypeLabel}</div>
</div>
</div>
<div className="flex border-t border-[rgb(30,31,36)]">
@@ -86,10 +130,11 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
<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">Сегодня, 14:30</div>
<div className="text-white text-sm">{formattedTimestamp}</div>
</div>
<div className="flex-1 p-4">
<div className="text-white text-sm text-right">Вчера</div>
<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>
</>
@@ -121,7 +166,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
</button>
<button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] 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" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4л3 3м6-3а9 9 0 11-18 0 9 9 0 0118 0з" />
</svg>
История
</button>
@@ -133,7 +178,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
}
return (
<div className="absolute left-[500px] top-0 bg-[#161824] border-r border-gray-700 z-30 w-[454px]" style={{height: 'calc(100% - 73px)', top: '73px'}}>
<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">
@@ -142,13 +187,13 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, onClose,
<div className="flex items-center gap-2">
<button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] 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" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6м2 5H7а2 2 0 01-2-2V5а2 2 0 012-2h5.586а1 1 0 01.707.293л5.414 5.414а1 1 0 01.293.707V19а2 2 0 01-2 2з" />
</svg>
Отчет
</button>
<button className="bg-[rgb(27,29,41)] hover:bg-[rgb(37,39,51)] 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" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4л3 3м6-3а9 9 0 11-18 0 9 9 0 0118 0з" />
</svg>
История
</button>
@@ -162,7 +207,7 @@ const DetectorMenu: React.FC<DetectorMenuProps> = ({ detector, isOpen, 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 6l12 12" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6л12 12" />
</svg>
</button>
</div>

View File

@@ -22,6 +22,7 @@ interface DetectorType {
status: string
checked: boolean
type: string
detector_type: string
location: string
floor: number
notifications: Array<{

View File

@@ -1,13 +1,51 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import Image from 'next/image';
interface MonitoringProps {
objectId?: string;
onClose?: () => void;
onSelectModel?: (modelPath: string) => void;
}
const Monitoring: React.FC<MonitoringProps> = ({ onClose }) => {
const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
const [objectImageError, setObjectImageError] = useState(false);
const [models, setModels] = useState<{ title: string; path: string }[]>([]);
const [loadError, setLoadError] = useState<string | null>(null);
// Загружаем список доступных моделей из assets/big-models через API
useEffect(() => {
const fetchModels = async () => {
try {
setLoadError(null);
const res = await fetch('/api/big-models/list');
if (!res.ok) {
const text = await res.text();
throw new Error(text || 'Failed to fetch models list');
}
const data = await res.json();
const items: { name: string; path: string }[] = Array.isArray(data?.models) ? data.models : [];
// Приоритизируем указанную модель, чтобы она была первой карточкой
const preferred = 'AerBIM-Monitor_ASM-HT-Viewer_Expo2017Astana_20250910';
const formatted = items
.map((it) => ({ title: it.name, path: it.path }))
.sort((a, b) => {
const ap = a.path.includes(preferred) ? -1 : 0;
const bp = b.path.includes(preferred) ? -1 : 0;
if (ap !== bp) return ap - bp;
return a.title.localeCompare(b.title);
});
setModels(formatted);
} catch (error) {
console.error('[Monitoring] Error loading models list:', error);
setLoadError(error instanceof Error ? error.message : String(error));
setModels([]);
}
};
fetchModels();
}, []);
return (
<div className="w-full">
@@ -51,13 +89,26 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose }) => {
</div>
</div>
{loadError && (
<div className="rounded-lg bg-red-600/20 border border-red-600/40 text-red-200 text-xs px-3 py-2">
Ошибка загрузки списка моделей: {loadError}
</div>
)}
<div className="grid grid-cols-2 gap-3">
{[1, 2, 3, 4, 5, 6].map((zone) => (
<div key={zone} className="flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center">
{models.length > 0 ? (
models.map((model, idx) => (
<button
key={`${model.path}-${idx}`}
type="button"
onClick={() => onSelectModel?.(model.path)}
className="relative flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center hover:bg-gray-400 transition-colors"
title={`Загрузить модель: ${model.title}`}
>
<div className="w-full h-full bg-gray-200 rounded flex items-center justify-center">
<Image
src="/images/test_image.png"
alt={`Зона ${zone}`}
alt={model.title}
width={120}
height={120}
className="max-w-full max-h-full object-contain opacity-50"
@@ -68,8 +119,18 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose }) => {
}}
/>
</div>
<div className="absolute bottom-1 left-1 right-1 text-[10px] text-gray-700 bg-white/70 rounded px-2 py-0.5 truncate">
{model.title}
</div>
))}
</button>
))
) : (
<div className="col-span-2">
<div className="rounded-lg bg-gray-200 text-gray-700 text-xs px-3 py-2 border border-gray-300">
Список моделей пуст. Добавьте файлы в assets/big-models или проверьте API /api/big-models/list.
</div>
</div>
)}
</div>
</div>
</div>

View File

@@ -8,6 +8,7 @@ interface DetectorInfoType {
object: string
status: string
type: string
detector_type: string
location: string
floor: number
checked: boolean

View File

@@ -24,6 +24,7 @@ interface DetectorType {
object: string
status: string
type: string
detector_type: string
location: string
floor: number
checked: boolean

View File

@@ -22,6 +22,7 @@ interface DetectorType {
object: string
status: string
type: string
detector_type: string
location: string
floor: number
checked: boolean
@@ -231,8 +232,8 @@ const ReportsList: React.FC<ReportsListProps> = ({ detectorsData }) => {
<td className="py-4">
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
detector.acknowledged
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800'
? 'bg-green-600/20 text-green-300 ring-1 ring-green-600/40'
: 'bg-red-600/20 text-red-300 ring-1 ring-red-600/40'
}`}>
{detector.acknowledged ? 'Да' : 'Нет'}
</span>

View File

@@ -456,7 +456,7 @@ const Sidebar: React.FC<SidebarProps> = ({
</div>
<button
className="relative w-4 h-4 aspect-[1] p-1 rounded hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200"
className="!relative !w-8 !h-8 p-1.5 rounded-lg bg-gray-800/60 border border-gray-600/40 shadow-lg hover:shadow-xl hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-200"
aria-label="Logout"
title="Выйти"
type="button"

View File

@@ -60,7 +60,24 @@ async function refreshAccessToken(token: GoogleToken): Promise<GoogleToken> {
} catch {
errorData = { error: errorText }
}
throw new Error(errorData.error || 'Token refresh failed')
const errorMessage = (errorData.error as string) || (errorData.detail as string) || ''
if (typeof errorMessage === 'string' &&
(errorMessage.includes('Token is expired') ||
errorMessage.includes('expired') ||
errorData.code === 'token_not_valid')) {
console.warn('Refresh token expired, user needs to re-authenticate')
return {
...token,
error: 'RefreshTokenExpired',
}
}
console.error('Token refresh failed:', errorData.error || 'Token refresh failed')
return {
...token,
error: 'RefreshAccessTokenError',
}
}
const refreshedTokens = await response.json()
@@ -176,6 +193,11 @@ export const authOptions: NextAuthOptions = {
if (token) {
session.accessToken = token.accessToken as string
session.refreshToken = token.refreshToken as string
if (token.error === 'RefreshTokenExpired') {
session.accessToken = undefined
session.refreshToken = undefined
}
}
return session
},

View File

@@ -6,6 +6,7 @@ export interface DetectorType {
status: string
checked: boolean
type: string
detector_type: string
location: string
floor: number
notifications: NotificationType[]