обновление бизнес логики
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user