обновление бизнес логики
This commit is contained in:
@@ -21,6 +21,8 @@ interface SceneToolbarProps {
|
||||
onSelectModel?: (modelPath: string) => void;
|
||||
panActive?: boolean;
|
||||
navMenuActive?: boolean;
|
||||
onToggleSensorHighlights?: () => void;
|
||||
sensorHighlightsActive?: boolean;
|
||||
}
|
||||
|
||||
const SceneToolbar: React.FC<SceneToolbarProps> = ({
|
||||
@@ -31,6 +33,8 @@ const SceneToolbar: React.FC<SceneToolbarProps> = ({
|
||||
onSelectModel,
|
||||
panActive = false,
|
||||
navMenuActive = false,
|
||||
onToggleSensorHighlights,
|
||||
sensorHighlightsActive = true,
|
||||
}) => {
|
||||
const [isZoomOpen, setIsZoomOpen] = useState(false);
|
||||
const { showMonitoring, openMonitoring, closeMonitoring, currentZones, loadZones, currentObject } = useNavigationStore();
|
||||
@@ -43,88 +47,45 @@ const SceneToolbar: React.FC<SceneToolbarProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
const handleHomeClick = async () => {
|
||||
if (!onSelectModel) return;
|
||||
|
||||
try {
|
||||
let zones: Zone[] = Array.isArray(currentZones) ? currentZones : [];
|
||||
|
||||
// Если зоны ещё не загружены, откройте Monitoring и загрузите зоны для текущего объекта
|
||||
if ((!zones || zones.length === 0) && currentObject?.id) {
|
||||
if (!showMonitoring) {
|
||||
openMonitoring();
|
||||
}
|
||||
await loadZones(currentObject.id);
|
||||
zones = useNavigationStore.getState().currentZones || [];
|
||||
}
|
||||
|
||||
if (!Array.isArray(zones) || zones.length === 0) {
|
||||
console.warn('No zones available to select a model from.');
|
||||
return;
|
||||
}
|
||||
|
||||
const sorted = zones.slice().sort((a: Zone, b: Zone) => {
|
||||
const oa = typeof a.order === 'number' ? a.order : 0;
|
||||
const ob = typeof b.order === 'number' ? b.order : 0;
|
||||
if (oa !== ob) return oa - ob;
|
||||
return (a.name || '').localeCompare(b.name || '');
|
||||
});
|
||||
|
||||
const top = sorted[0];
|
||||
let chosenPath: string | null = top?.model_path && String(top.model_path).trim() ? top.model_path! : null;
|
||||
if (!chosenPath) {
|
||||
const nextWithModel = sorted.find((z) => z.model_path && String(z.model_path).trim());
|
||||
chosenPath = nextWithModel?.model_path ?? null;
|
||||
}
|
||||
|
||||
if (chosenPath) {
|
||||
onSelectModel(chosenPath);
|
||||
} else {
|
||||
console.warn('No zone has a valid model_path to open.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error selecting top zone model:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const defaultButtons: ToolbarButton[] = [
|
||||
{
|
||||
icon: '/icons/Zoom.png',
|
||||
label: 'Zoom',
|
||||
label: 'Масштаб',
|
||||
onClick: () => setIsZoomOpen(!isZoomOpen),
|
||||
active: isZoomOpen,
|
||||
children: [
|
||||
{
|
||||
icon: '/icons/plus.svg',
|
||||
label: 'Zoom In',
|
||||
label: 'Приблизить',
|
||||
onClick: onZoomIn || (() => {}),
|
||||
},
|
||||
{
|
||||
icon: '/icons/minus.svg',
|
||||
label: 'Zoom Out',
|
||||
label: 'Отдалить',
|
||||
onClick: onZoomOut || (() => {}),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '/icons/Video.png',
|
||||
label: "Top View",
|
||||
label: 'Вид сверху',
|
||||
onClick: onTopView || (() => console.log('Top View')),
|
||||
},
|
||||
{
|
||||
icon: '/icons/Pointer.png',
|
||||
label: 'Pan',
|
||||
label: 'Панорамирование',
|
||||
onClick: onPan || (() => console.log('Pan')),
|
||||
active: panActive,
|
||||
},
|
||||
{
|
||||
icon: '/icons/Warehouse.png',
|
||||
label: 'Home',
|
||||
onClick: handleHomeClick,
|
||||
icon: '/icons/Eye.png',
|
||||
label: 'Подсветка датчиков',
|
||||
onClick: onToggleSensorHighlights || (() => console.log('Toggle Sensor Highlights')),
|
||||
active: sensorHighlightsActive,
|
||||
},
|
||||
{
|
||||
icon: '/icons/Layers.png',
|
||||
label: 'Levels',
|
||||
label: 'Общий вид',
|
||||
onClick: handleToggleNavMenu,
|
||||
active: navMenuActive,
|
||||
},
|
||||
|
||||
@@ -1,217 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import useNavigationStore from '@/app/store/navigationStore';
|
||||
import type { Zone } from '@/app/types';
|
||||
|
||||
interface ToolbarButton {
|
||||
icon: string;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
onMouseDown?: () => void;
|
||||
onMouseUp?: () => void;
|
||||
active?: boolean;
|
||||
children?: ToolbarButton[];
|
||||
}
|
||||
|
||||
interface SceneToolbarProps {
|
||||
onZoomIn?: () => void;
|
||||
onZoomOut?: () => void;
|
||||
onTopView?: () => void;
|
||||
onPan?: () => void;
|
||||
onSelectModel?: (modelPath: string) => void;
|
||||
panActive?: boolean;
|
||||
navMenuActive?: boolean;
|
||||
onToggleSensorHighlights?: () => void;
|
||||
sensorHighlightsActive?: boolean;
|
||||
}
|
||||
|
||||
const SceneToolbar: React.FC<SceneToolbarProps> = ({
|
||||
onZoomIn,
|
||||
onZoomOut,
|
||||
onTopView,
|
||||
onPan,
|
||||
onSelectModel,
|
||||
panActive = false,
|
||||
navMenuActive = false,
|
||||
onToggleSensorHighlights,
|
||||
sensorHighlightsActive = true,
|
||||
}) => {
|
||||
const [isZoomOpen, setIsZoomOpen] = useState(false);
|
||||
const { showMonitoring, openMonitoring, closeMonitoring, currentZones, loadZones, currentObject } = useNavigationStore();
|
||||
|
||||
const handleToggleNavMenu = () => {
|
||||
if (showMonitoring) {
|
||||
closeMonitoring();
|
||||
} else {
|
||||
openMonitoring();
|
||||
}
|
||||
};
|
||||
|
||||
const handleHomeClick = async () => {
|
||||
if (!onSelectModel) return;
|
||||
|
||||
try {
|
||||
let zones: Zone[] = Array.isArray(currentZones) ? currentZones : [];
|
||||
|
||||
// Если зоны ещё не загружены, откройте Monitoring и загрузите зоны для текущего объекта
|
||||
if ((!zones || zones.length === 0) && currentObject?.id) {
|
||||
if (!showMonitoring) {
|
||||
openMonitoring();
|
||||
}
|
||||
await loadZones(currentObject.id);
|
||||
zones = useNavigationStore.getState().currentZones || [];
|
||||
}
|
||||
|
||||
if (!Array.isArray(zones) || zones.length === 0) {
|
||||
console.warn('No zones available to select a model from.');
|
||||
return;
|
||||
}
|
||||
|
||||
const sorted = zones.slice().sort((a: Zone, b: Zone) => {
|
||||
const oa = typeof a.order === 'number' ? a.order : 0;
|
||||
const ob = typeof b.order === 'number' ? b.order : 0;
|
||||
if (oa !== ob) return oa - ob;
|
||||
return (a.name || '').localeCompare(b.name || '');
|
||||
});
|
||||
|
||||
const top = sorted[0];
|
||||
let chosenPath: string | null = top?.model_path && String(top.model_path).trim() ? top.model_path! : null;
|
||||
if (!chosenPath) {
|
||||
const nextWithModel = sorted.find((z) => z.model_path && String(z.model_path).trim());
|
||||
chosenPath = nextWithModel?.model_path ?? null;
|
||||
}
|
||||
|
||||
if (chosenPath) {
|
||||
onSelectModel(chosenPath);
|
||||
} else {
|
||||
console.warn('No zone has a valid model_path to open.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error selecting top zone model:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const defaultButtons: ToolbarButton[] = [
|
||||
{
|
||||
icon: '/icons/Zoom.png',
|
||||
label: 'Масштаб',
|
||||
onClick: () => setIsZoomOpen(!isZoomOpen),
|
||||
active: isZoomOpen,
|
||||
children: [
|
||||
{
|
||||
icon: '/icons/plus.svg',
|
||||
label: 'Приблизить',
|
||||
onClick: onZoomIn || (() => {}),
|
||||
},
|
||||
{
|
||||
icon: '/icons/minus.svg',
|
||||
label: 'Отдалить',
|
||||
onClick: onZoomOut || (() => {}),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '/icons/Video.png',
|
||||
label: 'Вид сверху',
|
||||
onClick: onTopView || (() => console.log('Top View')),
|
||||
},
|
||||
{
|
||||
icon: '/icons/Pointer.png',
|
||||
label: 'Панорамирование',
|
||||
onClick: onPan || (() => console.log('Pan')),
|
||||
active: panActive,
|
||||
},
|
||||
{
|
||||
icon: '/icons/Eye.png',
|
||||
label: 'Подсветка датчиков',
|
||||
onClick: onToggleSensorHighlights || (() => console.log('Toggle Sensor Highlights')),
|
||||
active: sensorHighlightsActive,
|
||||
},
|
||||
{
|
||||
icon: '/icons/Warehouse.png',
|
||||
label: 'Домой',
|
||||
onClick: handleHomeClick,
|
||||
},
|
||||
{
|
||||
icon: '/icons/Layers.png',
|
||||
label: 'Уровни',
|
||||
onClick: handleToggleNavMenu,
|
||||
active: navMenuActive,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div className="fixed right-5 top-1/2 transform -translate-y-1/2 z-50">
|
||||
<div className="flex flex-col gap-0">
|
||||
<div
|
||||
className="flex flex-col items-center gap-2 py-4 bg-[#161824] rounded-[15px] border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.3)]"
|
||||
style={{ minHeight: '320px' }}
|
||||
>
|
||||
{defaultButtons.map((button, index) => (
|
||||
<div key={index} className="flex flex-col items-center gap-2">
|
||||
<button
|
||||
onClick={button.onClick}
|
||||
className={`
|
||||
relative group flex items-center justify-center w-16 h-12 rounded-lg transition-all duration-200
|
||||
hover:bg-blue-600/20 hover:scale-110 hover:shadow-lg
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500/50
|
||||
${button.active
|
||||
? 'bg-blue-600/30 text-blue-400 shadow-md'
|
||||
: 'bg-transparent text-gray-300 hover:text-blue-400'
|
||||
}
|
||||
`}
|
||||
title={button.label}
|
||||
>
|
||||
<Image
|
||||
src={button.icon}
|
||||
alt={button.label}
|
||||
width={20}
|
||||
height={20}
|
||||
className="w-5 h-5 transition-transform duration-200 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute right-full mr-3 top-1/2 transform -translate-y-1/2
|
||||
opacity-0 group-hover:opacity-100 transition-opacity duration-200
|
||||
pointer-events-none z-60">
|
||||
<div className="bg-gray-900 text-white text-xs px-2 py-1 rounded
|
||||
whitespace-nowrap shadow-lg border border-gray-700">
|
||||
{button.label}
|
||||
</div>
|
||||
<div className="absolute left-full top-1/2 transform -translate-y-1/2
|
||||
w-0 h-0 border-t-4 border-t-transparent
|
||||
border-b-4 border-b-transparent
|
||||
border-l-4 border-l-gray-900">
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{button.active && button.children && (
|
||||
<div className="flex flex-col gap-2 mt-2">
|
||||
{button.children.map((childButton, childIndex) => (
|
||||
<button
|
||||
key={childIndex}
|
||||
onClick={childButton.onClick}
|
||||
onMouseDown={childButton.onMouseDown}
|
||||
onMouseUp={childButton.onMouseUp}
|
||||
className="relative group flex items-center justify-center w-12 h-10 bg-gray-800/50 rounded-md transition-all duration-200 hover:bg-blue-600/30"
|
||||
title={childButton.label}
|
||||
>
|
||||
<Image
|
||||
src={childButton.icon}
|
||||
alt={childButton.label}
|
||||
width={16}
|
||||
height={16}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SceneToolbar;
|
||||
@@ -1,168 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import useNavigationStore from '@/app/store/navigationStore';
|
||||
import type { Zone } from '@/app/types';
|
||||
|
||||
interface ToolbarButton {
|
||||
icon: string;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
onMouseDown?: () => void;
|
||||
onMouseUp?: () => void;
|
||||
active?: boolean;
|
||||
children?: ToolbarButton[];
|
||||
}
|
||||
|
||||
interface SceneToolbarProps {
|
||||
onZoomIn?: () => void;
|
||||
onZoomOut?: () => void;
|
||||
onTopView?: () => void;
|
||||
onPan?: () => void;
|
||||
onSelectModel?: (modelPath: string) => void;
|
||||
panActive?: boolean;
|
||||
navMenuActive?: boolean;
|
||||
onToggleSensorHighlights?: () => void;
|
||||
sensorHighlightsActive?: boolean;
|
||||
}
|
||||
|
||||
const SceneToolbar: React.FC<SceneToolbarProps> = ({
|
||||
onZoomIn,
|
||||
onZoomOut,
|
||||
onTopView,
|
||||
onPan,
|
||||
onSelectModel,
|
||||
panActive = false,
|
||||
navMenuActive = false,
|
||||
onToggleSensorHighlights,
|
||||
sensorHighlightsActive = true,
|
||||
}) => {
|
||||
const [isZoomOpen, setIsZoomOpen] = useState(false);
|
||||
const { showMonitoring, openMonitoring, closeMonitoring, currentZones, loadZones, currentObject } = useNavigationStore();
|
||||
|
||||
const handleToggleNavMenu = () => {
|
||||
if (showMonitoring) {
|
||||
closeMonitoring();
|
||||
} else {
|
||||
openMonitoring();
|
||||
}
|
||||
};
|
||||
|
||||
const defaultButtons: ToolbarButton[] = [
|
||||
{
|
||||
icon: '/icons/Zoom.png',
|
||||
label: 'Масштаб',
|
||||
onClick: () => setIsZoomOpen(!isZoomOpen),
|
||||
active: isZoomOpen,
|
||||
children: [
|
||||
{
|
||||
icon: '/icons/plus.svg',
|
||||
label: 'Приблизить',
|
||||
onClick: onZoomIn || (() => {}),
|
||||
},
|
||||
{
|
||||
icon: '/icons/minus.svg',
|
||||
label: 'Отдалить',
|
||||
onClick: onZoomOut || (() => {}),
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: '/icons/Video.png',
|
||||
label: 'Вид сверху',
|
||||
onClick: onTopView || (() => console.log('Top View')),
|
||||
},
|
||||
{
|
||||
icon: '/icons/Pointer.png',
|
||||
label: 'Панорамирование',
|
||||
onClick: onPan || (() => console.log('Pan')),
|
||||
active: panActive,
|
||||
},
|
||||
{
|
||||
icon: '/icons/Eye.png',
|
||||
label: 'Подсветка датчиков',
|
||||
onClick: onToggleSensorHighlights || (() => console.log('Toggle Sensor Highlights')),
|
||||
active: sensorHighlightsActive,
|
||||
},
|
||||
{
|
||||
icon: '/icons/Layers.png',
|
||||
label: 'Общий вид',
|
||||
onClick: handleToggleNavMenu,
|
||||
active: navMenuActive,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
return (
|
||||
<div className="fixed right-5 top-1/2 transform -translate-y-1/2 z-50">
|
||||
<div className="flex flex-col gap-0">
|
||||
<div
|
||||
className="flex flex-col items-center gap-2 py-4 bg-[#161824] rounded-[15px] border border-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.3)]"
|
||||
style={{ minHeight: '320px' }}
|
||||
>
|
||||
{defaultButtons.map((button, index) => (
|
||||
<div key={index} className="flex flex-col items-center gap-2">
|
||||
<button
|
||||
onClick={button.onClick}
|
||||
className={`
|
||||
relative group flex items-center justify-center w-16 h-12 rounded-lg transition-all duration-200
|
||||
hover:bg-blue-600/20 hover:scale-110 hover:shadow-lg
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-500/50
|
||||
${button.active
|
||||
? 'bg-blue-600/30 text-blue-400 shadow-md'
|
||||
: 'bg-transparent text-gray-300 hover:text-blue-400'
|
||||
}
|
||||
`}
|
||||
title={button.label}
|
||||
>
|
||||
<Image
|
||||
src={button.icon}
|
||||
alt={button.label}
|
||||
width={20}
|
||||
height={20}
|
||||
className="w-5 h-5 transition-transform duration-200 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute right-full mr-3 top-1/2 transform -translate-y-1/2
|
||||
opacity-0 group-hover:opacity-100 transition-opacity duration-200
|
||||
pointer-events-none z-60">
|
||||
<div className="bg-gray-900 text-white text-xs px-2 py-1 rounded
|
||||
whitespace-nowrap shadow-lg border border-gray-700">
|
||||
{button.label}
|
||||
</div>
|
||||
<div className="absolute left-full top-1/2 transform -translate-y-1/2
|
||||
w-0 h-0 border-t-4 border-t-transparent
|
||||
border-b-4 border-b-transparent
|
||||
border-l-4 border-l-gray-900">
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{button.active && button.children && (
|
||||
<div className="flex flex-col gap-2 mt-2">
|
||||
{button.children.map((childButton, childIndex) => (
|
||||
<button
|
||||
key={childIndex}
|
||||
onClick={childButton.onClick}
|
||||
onMouseDown={childButton.onMouseDown}
|
||||
onMouseUp={childButton.onMouseUp}
|
||||
className="relative group flex items-center justify-center w-12 h-10 bg-gray-800/50 rounded-md transition-all duration-200 hover:bg-blue-600/30"
|
||||
title={childButton.label}
|
||||
>
|
||||
<Image
|
||||
src={childButton.icon}
|
||||
alt={childButton.label}
|
||||
width={16}
|
||||
height={16}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SceneToolbar;
|
||||
@@ -60,20 +60,12 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
|
||||
loadZones(objId);
|
||||
}, [currentObject?.id, loadZones]);
|
||||
|
||||
// Автоматический выбор модели, если currentModelPath установлен (переход из таблицы)
|
||||
useEffect(() => {
|
||||
if (!currentModelPath || autoSelectedRef || !onSelectModel) return;
|
||||
|
||||
console.log('[Monitoring] Auto-selecting model from currentModelPath:', currentModelPath);
|
||||
setAutoSelectedRef(true);
|
||||
onSelectModel(currentModelPath);
|
||||
}, [currentModelPath, autoSelectedRef, onSelectModel]);
|
||||
|
||||
// Сброс флага при изменении объекта
|
||||
useEffect(() => {
|
||||
setAutoSelectedRef(false);
|
||||
}, [currentObject?.id])
|
||||
|
||||
// Сортировка зон по order
|
||||
const sortedZones: Zone[] = React.useMemo(() => {
|
||||
const sorted = (currentZones || []).slice().sort((a: Zone, b: Zone) => {
|
||||
const oa = typeof a.order === 'number' ? a.order : 0;
|
||||
@@ -85,6 +77,19 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
|
||||
return sorted;
|
||||
}, [currentZones]);
|
||||
|
||||
// Автоматический выбор модели с order=0 при загрузке зон
|
||||
useEffect(() => {
|
||||
// Если уже был автовыбор - пропускаем
|
||||
if (autoSelectedRef || !onSelectModel) return;
|
||||
|
||||
// Если есть зоны и первая зона (order=0) имеет model_path
|
||||
if (sortedZones.length > 0 && sortedZones[0]?.model_path) {
|
||||
console.log('[Monitoring] Auto-selecting model with order=0:', sortedZones[0].model_path);
|
||||
setAutoSelectedRef(true);
|
||||
onSelectModel(sortedZones[0].model_path);
|
||||
}
|
||||
}, [sortedZones, autoSelectedRef, onSelectModel])
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="bg-[rgb(22,24,36)] rounded-[12px] p-4 space-y-4">
|
||||
|
||||
@@ -35,17 +35,22 @@ interface MonitoringProps {
|
||||
}
|
||||
|
||||
const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
|
||||
const { currentObject, currentZones, zonesLoading, zonesError, loadZones } = useNavigationStore();
|
||||
const [userSelectedModel, setUserSelectedModel] = useState(false);
|
||||
const { currentObject, currentZones, zonesLoading, zonesError, loadZones, currentModelPath } = useNavigationStore();
|
||||
const [autoSelectedRef, setAutoSelectedRef] = React.useState(false);
|
||||
|
||||
const handleSelectModel = useCallback((modelPath: string, isUserClick = false) => {
|
||||
console.log(`[Monitoring] Model selected: ${modelPath}, isUserClick: ${isUserClick}`);
|
||||
const handleSelectModel = useCallback((modelPath: string) => {
|
||||
console.log(`[Monitoring] Model selected: ${modelPath}`);
|
||||
console.log(`[Monitoring] onSelectModel callback:`, onSelectModel);
|
||||
if (isUserClick) {
|
||||
setUserSelectedModel(true);
|
||||
}
|
||||
onSelectModel?.(modelPath);
|
||||
}, [onSelectModel]);
|
||||
|
||||
// Автоматически закрываем панель после выбора модели
|
||||
if (onClose) {
|
||||
setTimeout(() => {
|
||||
console.log('[Monitoring] Auto-closing after model selection');
|
||||
onClose();
|
||||
}, 100);
|
||||
}
|
||||
}, [onSelectModel, onClose]);
|
||||
|
||||
// Загрузка зон при изменении объекта
|
||||
useEffect(() => {
|
||||
@@ -55,25 +60,19 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
|
||||
loadZones(objId);
|
||||
}, [currentObject?.id, loadZones]);
|
||||
|
||||
// Автоматический выбор первой зоны при загрузке (только если пользователь не выбрал вручную)
|
||||
// Автоматический выбор модели, если currentModelPath установлен (переход из таблицы)
|
||||
useEffect(() => {
|
||||
if (userSelectedModel) {
|
||||
console.log('[Monitoring] User already selected model, skipping auto-selection');
|
||||
return;
|
||||
}
|
||||
|
||||
const sortedZones: Zone[] = (currentZones || []).slice().sort((a: Zone, b: Zone) => {
|
||||
const oa = typeof a.order === 'number' ? a.order : 0;
|
||||
const ob = typeof b.order === 'number' ? b.order : 0;
|
||||
if (oa !== ob) return oa - ob;
|
||||
return (a.name || '').localeCompare(b.name || '');
|
||||
});
|
||||
|
||||
if (sortedZones.length > 0 && sortedZones[0].model_path && !zonesLoading) {
|
||||
console.log('[Monitoring] Auto-selecting first zone model');
|
||||
handleSelectModel(sortedZones[0].model_path, false);
|
||||
}
|
||||
}, [currentZones, zonesLoading, handleSelectModel, userSelectedModel]);
|
||||
if (!currentModelPath || autoSelectedRef || !onSelectModel) return;
|
||||
|
||||
console.log('[Monitoring] Auto-selecting model from currentModelPath:', currentModelPath);
|
||||
setAutoSelectedRef(true);
|
||||
onSelectModel(currentModelPath);
|
||||
}, [currentModelPath, autoSelectedRef, onSelectModel]);
|
||||
|
||||
// Сброс флага при изменении объекта
|
||||
useEffect(() => {
|
||||
setAutoSelectedRef(false);
|
||||
}, [currentObject?.id])
|
||||
|
||||
const sortedZones: Zone[] = React.useMemo(() => {
|
||||
const sorted = (currentZones || []).slice().sort((a: Zone, b: Zone) => {
|
||||
@@ -119,26 +118,30 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
|
||||
<button
|
||||
key={`zone-${sortedZones[0].id}-panorama`}
|
||||
type="button"
|
||||
onClick={() => sortedZones[0].model_path ? handleSelectModel(sortedZones[0].model_path, true) : null}
|
||||
className="w-full bg-gray-300 rounded-lg h-[200px] flex items-center justify-center hover:bg-gray-400 transition-colors mb-4"
|
||||
onClick={() => sortedZones[0].model_path ? handleSelectModel(sortedZones[0].model_path) : null}
|
||||
className="group w-full bg-gradient-to-br from-cyan-600/20 via-blue-600/20 to-purple-600/20 rounded-xl h-[220px] flex items-center justify-center hover:from-cyan-500/30 hover:via-blue-500/30 hover:to-purple-500/30 transition-all duration-300 mb-4 border border-cyan-400/30 hover:border-cyan-400/60 shadow-lg shadow-cyan-500/10 hover:shadow-cyan-500/30 overflow-hidden relative backdrop-blur-sm"
|
||||
title={sortedZones[0].model_path ? `Открыть 3D модель зоны: ${sortedZones[0].name}` : 'Модель зоны отсутствует'}
|
||||
disabled={!sortedZones[0].model_path}
|
||||
>
|
||||
<div className="w-full h-full bg-gray-200 rounded flex flex-col items-center justify-center relative">
|
||||
{/* Всегда рендерим с разрешённой заглушкой */}
|
||||
{/* Градиентный фон при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-400/10 via-blue-400/10 to-purple-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
{/* Анимированный градиент по краям */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-400/5 to-transparent animate-pulse"></div>
|
||||
|
||||
<div className="w-full h-full rounded-lg flex flex-col items-center justify-center relative">
|
||||
<Image
|
||||
src={resolveImageSrc(sortedZones[0].image_path)}
|
||||
alt={sortedZones[0].name || 'Зона'}
|
||||
width={200}
|
||||
height={200}
|
||||
className="max-w-full max-h-full object-contain opacity-50"
|
||||
className="max-w-full max-h-full object-contain opacity-60 group-hover:opacity-80 transition-opacity duration-300"
|
||||
style={{ height: 'auto' }}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.src = '/images/test_image.png';
|
||||
}}
|
||||
/>
|
||||
<div className="absolute bottom-2 left-2 right-2 text-sm text-gray-700 bg-white/80 rounded px-3 py-1 truncate">
|
||||
<div className="absolute bottom-3 left-3 right-3 text-sm font-medium text-white bg-gradient-to-r from-cyan-600/80 via-blue-600/80 to-purple-600/80 backdrop-blur-md rounded-lg px-4 py-2 truncate border border-cyan-400/40 shadow-lg shadow-cyan-500/20">
|
||||
{sortedZones[0].name}
|
||||
</div>
|
||||
</div>
|
||||
@@ -150,25 +153,30 @@ const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
|
||||
<button
|
||||
key={`zone-${zone.id}-${idx}`}
|
||||
type="button"
|
||||
onClick={() => zone.model_path ? handleSelectModel(zone.model_path, true) : null}
|
||||
className="relative flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center hover:bg-gray-400 transition-colors"
|
||||
onClick={() => zone.model_path ? handleSelectModel(zone.model_path) : null}
|
||||
className="group relative flex-1 bg-gradient-to-br from-emerald-600/20 via-teal-600/20 to-cyan-600/20 rounded-xl h-[140px] flex items-center justify-center hover:from-emerald-500/30 hover:via-teal-500/30 hover:to-cyan-500/30 transition-all duration-300 border border-emerald-400/30 hover:border-emerald-400/60 shadow-lg shadow-emerald-500/10 hover:shadow-emerald-500/30 overflow-hidden backdrop-blur-sm"
|
||||
title={zone.model_path ? `Открыть 3D модель зоны: ${zone.name}` : 'Модель зоны отсутствует'}
|
||||
disabled={!zone.model_path}
|
||||
>
|
||||
<div className="w-full h-full bg-gray-200 rounded flex flex-col items-center justify-center relative">
|
||||
{/* Градиентный фон при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-emerald-400/10 via-teal-400/10 to-cyan-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
{/* Анимированный градиент по краям */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-emerald-400/5 to-transparent animate-pulse"></div>
|
||||
|
||||
<div className="w-full h-full rounded-lg flex flex-col items-center justify-center relative">
|
||||
<Image
|
||||
src={resolveImageSrc(zone.image_path)}
|
||||
alt={zone.name || 'Зона'}
|
||||
width={120}
|
||||
height={120}
|
||||
className="max-w-full max-h-full object-contain opacity-50"
|
||||
className="max-w-full max-h-full object-contain opacity-60 group-hover:opacity-80 transition-opacity duration-300"
|
||||
style={{ height: 'auto' }}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.src = '/images/test_image.png';
|
||||
}}
|
||||
/>
|
||||
<div className="absolute bottom-1 left-1 right-1 text-[10px] text-gray-700 bg-white/70 rounded px-2 py-0.5 truncate">
|
||||
<div className="absolute bottom-2 left-2 right-2 text-[11px] font-medium text-white bg-gradient-to-r from-emerald-600/80 via-teal-600/80 to-cyan-600/80 backdrop-blur-md rounded-md px-2 py-1 truncate border border-emerald-400/40 shadow-md shadow-emerald-500/20">
|
||||
{zone.name}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,171 +0,0 @@
|
||||
import React, { useEffect, useCallback, useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import useNavigationStore from '@/app/store/navigationStore';
|
||||
import type { Zone } from '@/app/types';
|
||||
|
||||
// Безопасный резолвер src изображения, чтобы избежать ошибок Invalid URL в next/image
|
||||
const resolveImageSrc = (src?: string | null): string => {
|
||||
if (!src || typeof src !== 'string') return '/images/test_image.png';
|
||||
let s = src.trim();
|
||||
if (!s) return '/images/test_image.png';
|
||||
s = s.replace(/\\/g, '/');
|
||||
const lower = s.toLowerCase();
|
||||
// Явный плейсхолдер test_image.png маппим на наш статический ресурс
|
||||
if (lower === 'test_image.png' || lower.endsWith('/test_image.png') || lower.includes('/public/images/test_image.png')) {
|
||||
return '/images/test_image.png';
|
||||
}
|
||||
// Если путь содержит public/images (даже абсолютный путь ФС), переводим в относительный путь сайта
|
||||
if (/\/public\/images\//i.test(s)) {
|
||||
const parts = s.split(/\/public\/images\//i);
|
||||
const rel = parts[1] || '';
|
||||
return `/images/${rel}`;
|
||||
}
|
||||
// Абсолютные URL и пути, относительные к сайту
|
||||
if (s.startsWith('http://') || s.startsWith('https://')) return s;
|
||||
if (s.startsWith('/')) return s;
|
||||
// Нормализуем относительные имена ресурсов до путей сайта под /images
|
||||
// Убираем ведущий 'public/', если он присутствует
|
||||
s = s.replace(/^public\//i, '');
|
||||
return s.startsWith('images/') ? `/${s}` : `/images/${s}`;
|
||||
}
|
||||
|
||||
interface MonitoringProps {
|
||||
onClose?: () => void;
|
||||
onSelectModel?: (modelPath: string) => void;
|
||||
}
|
||||
|
||||
const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
|
||||
const { currentObject, currentZones, zonesLoading, zonesError, loadZones } = useNavigationStore();
|
||||
|
||||
const handleSelectModel = useCallback((modelPath: string) => {
|
||||
console.log(`[Monitoring] Model selected: ${modelPath}`);
|
||||
console.log(`[Monitoring] onSelectModel callback:`, onSelectModel);
|
||||
onSelectModel?.(modelPath);
|
||||
}, [onSelectModel]);
|
||||
|
||||
// Загрузка зон при изменении объекта
|
||||
useEffect(() => {
|
||||
const objId = currentObject?.id;
|
||||
if (!objId) return;
|
||||
console.log(`[Monitoring] Loading zones for object ID: ${objId}`);
|
||||
loadZones(objId);
|
||||
}, [currentObject?.id, loadZones]);
|
||||
|
||||
// Автоматический выбор первой зоны ОТКЛЮЧЕН - пользователь должен выбрать модель вручную
|
||||
|
||||
const sortedZones: Zone[] = React.useMemo(() => {
|
||||
const sorted = (currentZones || []).slice().sort((a: Zone, b: Zone) => {
|
||||
const oa = typeof a.order === 'number' ? a.order : 0;
|
||||
const ob = typeof b.order === 'number' ? b.order : 0;
|
||||
if (oa !== ob) return oa - ob;
|
||||
return (a.name || '').localeCompare(b.name || '');
|
||||
});
|
||||
console.log(`[Monitoring] Sorted zones:`, sorted.map(z => ({ id: z.id, name: z.name, model_path: z.model_path })));
|
||||
return sorted;
|
||||
}, [currentZones]);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="bg-[rgb(22,24,36)] rounded-[12px] p-4 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-white text-2xl font-semibold">Зоны мониторинга</h2>
|
||||
{onClose && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-white hover:text-gray-300 transition-colors"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{/* UI зон */}
|
||||
{zonesError && (
|
||||
<div className="rounded-lg bg-red-600/20 border border-red-600/40 text-red-200 text-xs px-3 py-2">
|
||||
Ошибка загрузки зон: {zonesError}
|
||||
</div>
|
||||
)}
|
||||
{zonesLoading && (
|
||||
<div className="rounded-lg bg-gray-200 text-gray-700 text-xs px-3 py-2 border border-gray-300">
|
||||
Загрузка зон...
|
||||
</div>
|
||||
)}
|
||||
{sortedZones.length > 0 && (
|
||||
<>
|
||||
{sortedZones[0] && (
|
||||
<button
|
||||
key={`zone-${sortedZones[0].id}-panorama`}
|
||||
type="button"
|
||||
onClick={() => sortedZones[0].model_path ? handleSelectModel(sortedZones[0].model_path) : null}
|
||||
className="w-full bg-gray-300 rounded-lg h-[200px] flex items-center justify-center hover:bg-gray-400 transition-colors mb-4"
|
||||
title={sortedZones[0].model_path ? `Открыть 3D модель зоны: ${sortedZones[0].name}` : 'Модель зоны отсутствует'}
|
||||
disabled={!sortedZones[0].model_path}
|
||||
>
|
||||
<div className="w-full h-full bg-gray-200 rounded flex flex-col items-center justify-center relative">
|
||||
{/* Всегда рендерим с разрешённой заглушкой */}
|
||||
<Image
|
||||
src={resolveImageSrc(sortedZones[0].image_path)}
|
||||
alt={sortedZones[0].name || 'Зона'}
|
||||
width={200}
|
||||
height={200}
|
||||
className="max-w-full max-h-full object-contain opacity-50"
|
||||
style={{ height: 'auto' }}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.src = '/images/test_image.png';
|
||||
}}
|
||||
/>
|
||||
<div className="absolute bottom-2 left-2 right-2 text-sm text-gray-700 bg-white/80 rounded px-3 py-1 truncate">
|
||||
{sortedZones[0].name}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
{sortedZones.length > 1 && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{sortedZones.slice(1).map((zone: Zone, idx: number) => (
|
||||
<button
|
||||
key={`zone-${zone.id}-${idx}`}
|
||||
type="button"
|
||||
onClick={() => zone.model_path ? handleSelectModel(zone.model_path) : null}
|
||||
className="relative flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center hover:bg-gray-400 transition-colors"
|
||||
title={zone.model_path ? `Открыть 3D модель зоны: ${zone.name}` : 'Модель зоны отсутствует'}
|
||||
disabled={!zone.model_path}
|
||||
>
|
||||
<div className="w-full h-full bg-gray-200 rounded flex flex-col items-center justify-center relative">
|
||||
<Image
|
||||
src={resolveImageSrc(zone.image_path)}
|
||||
alt={zone.name || 'Зона'}
|
||||
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.src = '/images/test_image.png';
|
||||
}}
|
||||
/>
|
||||
<div className="absolute bottom-1 left-1 right-1 text-[10px] text-gray-700 bg-white/70 rounded px-2 py-0.5 truncate">
|
||||
{zone.name}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{sortedZones.length === 0 && !zonesError && !zonesLoading && (
|
||||
<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">
|
||||
Зоны не найдены для выбранного объекта. Проверьте параметр objectId в API /api/get-zones.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Monitoring;
|
||||
@@ -1,201 +0,0 @@
|
||||
import React, { useEffect, useCallback, useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import useNavigationStore from '@/app/store/navigationStore';
|
||||
import type { Zone } from '@/app/types';
|
||||
|
||||
// Безопасный резолвер src изображения, чтобы избежать ошибок Invalid URL в next/image
|
||||
const resolveImageSrc = (src?: string | null): string => {
|
||||
if (!src || typeof src !== 'string') return '/images/test_image.png';
|
||||
let s = src.trim();
|
||||
if (!s) return '/images/test_image.png';
|
||||
s = s.replace(/\\/g, '/');
|
||||
const lower = s.toLowerCase();
|
||||
// Явный плейсхолдер test_image.png маппим на наш статический ресурс
|
||||
if (lower === 'test_image.png' || lower.endsWith('/test_image.png') || lower.includes('/public/images/test_image.png')) {
|
||||
return '/images/test_image.png';
|
||||
}
|
||||
// Если путь содержит public/images (даже абсолютный путь ФС), переводим в относительный путь сайта
|
||||
if (/\/public\/images\//i.test(s)) {
|
||||
const parts = s.split(/\/public\/images\//i);
|
||||
const rel = parts[1] || '';
|
||||
return `/images/${rel}`;
|
||||
}
|
||||
// Абсолютные URL и пути, относительные к сайту
|
||||
if (s.startsWith('http://') || s.startsWith('https://')) return s;
|
||||
if (s.startsWith('/')) return s;
|
||||
// Нормализуем относительные имена ресурсов до путей сайта под /images
|
||||
// Убираем ведущий 'public/', если он присутствует
|
||||
s = s.replace(/^public\//i, '');
|
||||
return s.startsWith('images/') ? `/${s}` : `/images/${s}`;
|
||||
}
|
||||
|
||||
interface MonitoringProps {
|
||||
onClose?: () => void;
|
||||
onSelectModel?: (modelPath: string) => void;
|
||||
}
|
||||
|
||||
const Monitoring: React.FC<MonitoringProps> = ({ onClose, onSelectModel }) => {
|
||||
const { currentObject, currentZones, zonesLoading, zonesError, loadZones, currentModelPath } = useNavigationStore();
|
||||
const [autoSelectedRef, setAutoSelectedRef] = React.useState(false);
|
||||
|
||||
const handleSelectModel = useCallback((modelPath: string) => {
|
||||
console.log(`[Monitoring] Model selected: ${modelPath}`);
|
||||
console.log(`[Monitoring] onSelectModel callback:`, onSelectModel);
|
||||
onSelectModel?.(modelPath);
|
||||
|
||||
// Автоматически закрываем панель после выбора модели
|
||||
if (onClose) {
|
||||
setTimeout(() => {
|
||||
console.log('[Monitoring] Auto-closing after model selection');
|
||||
onClose();
|
||||
}, 100);
|
||||
}
|
||||
}, [onSelectModel, onClose]);
|
||||
|
||||
// Загрузка зон при изменении объекта
|
||||
useEffect(() => {
|
||||
const objId = currentObject?.id;
|
||||
if (!objId) return;
|
||||
console.log(`[Monitoring] Loading zones for object ID: ${objId}`);
|
||||
loadZones(objId);
|
||||
}, [currentObject?.id, loadZones]);
|
||||
|
||||
// Автоматический выбор модели, если currentModelPath установлен (переход из таблицы)
|
||||
useEffect(() => {
|
||||
if (!currentModelPath || autoSelectedRef || !onSelectModel) return;
|
||||
|
||||
console.log('[Monitoring] Auto-selecting model from currentModelPath:', currentModelPath);
|
||||
setAutoSelectedRef(true);
|
||||
onSelectModel(currentModelPath);
|
||||
}, [currentModelPath, autoSelectedRef, onSelectModel]);
|
||||
|
||||
// Сброс флага при изменении объекта
|
||||
useEffect(() => {
|
||||
setAutoSelectedRef(false);
|
||||
}, [currentObject?.id])
|
||||
|
||||
const sortedZones: Zone[] = React.useMemo(() => {
|
||||
const sorted = (currentZones || []).slice().sort((a: Zone, b: Zone) => {
|
||||
const oa = typeof a.order === 'number' ? a.order : 0;
|
||||
const ob = typeof b.order === 'number' ? b.order : 0;
|
||||
if (oa !== ob) return oa - ob;
|
||||
return (a.name || '').localeCompare(b.name || '');
|
||||
});
|
||||
console.log(`[Monitoring] Sorted zones:`, sorted.map(z => ({ id: z.id, name: z.name, model_path: z.model_path })));
|
||||
return sorted;
|
||||
}, [currentZones]);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="bg-[rgb(22,24,36)] rounded-[12px] p-4 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-white text-2xl font-semibold">Зоны мониторинга</h2>
|
||||
{onClose && (
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-white hover:text-gray-300 transition-colors"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{/* UI зон */}
|
||||
{zonesError && (
|
||||
<div className="rounded-lg bg-red-600/20 border border-red-600/40 text-red-200 text-xs px-3 py-2">
|
||||
Ошибка загрузки зон: {zonesError}
|
||||
</div>
|
||||
)}
|
||||
{zonesLoading && (
|
||||
<div className="rounded-lg bg-gray-200 text-gray-700 text-xs px-3 py-2 border border-gray-300">
|
||||
Загрузка зон...
|
||||
</div>
|
||||
)}
|
||||
{sortedZones.length > 0 && (
|
||||
<>
|
||||
{sortedZones[0] && (
|
||||
<button
|
||||
key={`zone-${sortedZones[0].id}-panorama`}
|
||||
type="button"
|
||||
onClick={() => sortedZones[0].model_path ? handleSelectModel(sortedZones[0].model_path) : null}
|
||||
className="group w-full bg-gradient-to-br from-cyan-600/20 via-blue-600/20 to-purple-600/20 rounded-xl h-[220px] flex items-center justify-center hover:from-cyan-500/30 hover:via-blue-500/30 hover:to-purple-500/30 transition-all duration-300 mb-4 border border-cyan-400/30 hover:border-cyan-400/60 shadow-lg shadow-cyan-500/10 hover:shadow-cyan-500/30 overflow-hidden relative backdrop-blur-sm"
|
||||
title={sortedZones[0].model_path ? `Открыть 3D модель зоны: ${sortedZones[0].name}` : 'Модель зоны отсутствует'}
|
||||
disabled={!sortedZones[0].model_path}
|
||||
>
|
||||
{/* Градиентный фон при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-cyan-400/10 via-blue-400/10 to-purple-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
{/* Анимированный градиент по краям */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-400/5 to-transparent animate-pulse"></div>
|
||||
|
||||
<div className="w-full h-full rounded-lg flex flex-col items-center justify-center relative">
|
||||
<Image
|
||||
src={resolveImageSrc(sortedZones[0].image_path)}
|
||||
alt={sortedZones[0].name || 'Зона'}
|
||||
width={200}
|
||||
height={200}
|
||||
className="max-w-full max-h-full object-contain opacity-60 group-hover:opacity-80 transition-opacity duration-300"
|
||||
style={{ height: 'auto' }}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.src = '/images/test_image.png';
|
||||
}}
|
||||
/>
|
||||
<div className="absolute bottom-3 left-3 right-3 text-sm font-medium text-white bg-gradient-to-r from-cyan-600/80 via-blue-600/80 to-purple-600/80 backdrop-blur-md rounded-lg px-4 py-2 truncate border border-cyan-400/40 shadow-lg shadow-cyan-500/20">
|
||||
{sortedZones[0].name}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
{sortedZones.length > 1 && (
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{sortedZones.slice(1).map((zone: Zone, idx: number) => (
|
||||
<button
|
||||
key={`zone-${zone.id}-${idx}`}
|
||||
type="button"
|
||||
onClick={() => zone.model_path ? handleSelectModel(zone.model_path) : null}
|
||||
className="group relative flex-1 bg-gradient-to-br from-emerald-600/20 via-teal-600/20 to-cyan-600/20 rounded-xl h-[140px] flex items-center justify-center hover:from-emerald-500/30 hover:via-teal-500/30 hover:to-cyan-500/30 transition-all duration-300 border border-emerald-400/30 hover:border-emerald-400/60 shadow-lg shadow-emerald-500/10 hover:shadow-emerald-500/30 overflow-hidden backdrop-blur-sm"
|
||||
title={zone.model_path ? `Открыть 3D модель зоны: ${zone.name}` : 'Модель зоны отсутствует'}
|
||||
disabled={!zone.model_path}
|
||||
>
|
||||
{/* Градиентный фон при наведении */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-emerald-400/10 via-teal-400/10 to-cyan-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
{/* Анимированный градиент по краям */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-emerald-400/5 to-transparent animate-pulse"></div>
|
||||
|
||||
<div className="w-full h-full rounded-lg flex flex-col items-center justify-center relative">
|
||||
<Image
|
||||
src={resolveImageSrc(zone.image_path)}
|
||||
alt={zone.name || 'Зона'}
|
||||
width={120}
|
||||
height={120}
|
||||
className="max-w-full max-h-full object-contain opacity-60 group-hover:opacity-80 transition-opacity duration-300"
|
||||
style={{ height: 'auto' }}
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.src = '/images/test_image.png';
|
||||
}}
|
||||
/>
|
||||
<div className="absolute bottom-2 left-2 right-2 text-[11px] font-medium text-white bg-gradient-to-r from-emerald-600/80 via-teal-600/80 to-cyan-600/80 backdrop-blur-md rounded-md px-2 py-1 truncate border border-emerald-400/40 shadow-md shadow-emerald-500/20">
|
||||
{zone.name}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{sortedZones.length === 0 && !zonesError && !zonesLoading && (
|
||||
<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">
|
||||
Зоны не найдены для выбранного объекта. Проверьте параметр objectId в API /api/get-zones.
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Monitoring;
|
||||
Reference in New Issue
Block a user