AEB-71: Added 3D navigation in monitoring zones
This commit is contained in:
@@ -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()
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
});
|
||||
}
|
||||
47
frontend/app/api/big-models/list/route.ts
Normal file
47
frontend/app/api/big-models/list/route.ts
Normal 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' },
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -89,16 +89,21 @@ export async function GET(req: NextRequest) {
|
||||
return true
|
||||
}) : list
|
||||
|
||||
const transformed = filtered.map((a) => ({
|
||||
id: a.id,
|
||||
detector_name: a.name,
|
||||
message: a.message,
|
||||
type: a.severity,
|
||||
location: a.object,
|
||||
priority: a.severity,
|
||||
acknowledged: a.resolved,
|
||||
timestamp: a.created_at,
|
||||
}))
|
||||
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 || a.detector_name,
|
||||
message: a.message,
|
||||
type,
|
||||
location: a.object,
|
||||
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) {
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
}) : []
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {}
|
||||
} catch (error) {
|
||||
console.error('Error during token refresh:', error)
|
||||
}
|
||||
}
|
||||
|
||||
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 })
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ export interface DetectorType {
|
||||
object: string
|
||||
status: string
|
||||
type: string
|
||||
detector_type: string
|
||||
location: string
|
||||
floor: number
|
||||
checked: boolean
|
||||
|
||||
@@ -18,6 +18,7 @@ interface RawDetector {
|
||||
object: string
|
||||
status: string
|
||||
type: string
|
||||
detector_type: string
|
||||
location: string
|
||||
floor: number
|
||||
notifications: Array<{
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
<span className="text-sm font-medium">Датчики : все</span>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -22,6 +22,7 @@ interface DetectorType {
|
||||
status: string
|
||||
checked: boolean
|
||||
type: string
|
||||
detector_type: string
|
||||
location: string
|
||||
floor: number
|
||||
notifications: Array<{
|
||||
|
||||
@@ -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,25 +89,48 @@ 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">
|
||||
<div className="w-full h-full bg-gray-200 rounded flex items-center justify-center">
|
||||
<Image
|
||||
src="/images/test_image.png"
|
||||
alt={`Зона ${zone}`}
|
||||
width={120}
|
||||
height={120}
|
||||
className="max-w-full max-h-full object-contain opacity-50"
|
||||
style={{ height: 'auto' }}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
{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={model.title}
|
||||
width={120}
|
||||
height={120}
|
||||
className="max-w-full max-h-full object-contain opacity-50"
|
||||
style={{ height: 'auto' }}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
|
||||
@@ -8,6 +8,7 @@ interface DetectorInfoType {
|
||||
object: string
|
||||
status: string
|
||||
type: string
|
||||
detector_type: string
|
||||
location: string
|
||||
floor: number
|
||||
checked: boolean
|
||||
|
||||
@@ -24,6 +24,7 @@ interface DetectorType {
|
||||
object: string
|
||||
status: string
|
||||
type: string
|
||||
detector_type: string
|
||||
location: string
|
||||
floor: number
|
||||
checked: boolean
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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()
|
||||
@@ -173,6 +190,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
|
||||
},
|
||||
|
||||
@@ -6,6 +6,7 @@ export interface DetectorType {
|
||||
status: string
|
||||
checked: boolean
|
||||
type: string
|
||||
detector_type: string
|
||||
location: string
|
||||
floor: number
|
||||
notifications: NotificationType[]
|
||||
|
||||
Reference in New Issue
Block a user