feat(3d-viewer): add Visualizador 3D module with IFC AISC EM.11 & fallback weld graph
This commit is contained in:
Marcos Reifonas
@@ -5,6 +5,7 @@ import {
|
||||
Warehouse,
|
||||
FolderOpen,
|
||||
Building2,
|
||||
Box,
|
||||
Monitor,
|
||||
Truck,
|
||||
HardHat,
|
||||
@@ -144,6 +145,12 @@ export const menuGroups: MenuGroup[] = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: "visualizador-3d",
|
||||
title: "Visualizador 3D",
|
||||
url: "/visualizador-3d",
|
||||
icon: Box,
|
||||
},
|
||||
{
|
||||
key: "painel-industrial",
|
||||
title: "Painel Industrial",
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
import React from 'react';
|
||||
import { ShieldCheck, AlertTriangle, CheckCircle2, Layers, Cpu, FileCode2, X, ArrowRight } from 'lucide-react';
|
||||
import { IFCQualityAudit } from '@/lib/ifc/ifcLoaderService';
|
||||
|
||||
interface IFCQualityModalProps {
|
||||
audit: IFCQualityAudit | null;
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const IFCQualityModal: React.FC<IFCQualityModalProps> = ({ audit, isOpen, onClose }) => {
|
||||
if (!isOpen || !audit) return null;
|
||||
|
||||
const isExcellent = audit.qualityScore === 'EXCELENTE';
|
||||
const isGood = audit.qualityScore === 'BOM';
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in duration-200">
|
||||
<div className="relative w-full max-w-2xl bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl overflow-hidden">
|
||||
{/* Top Header Banner */}
|
||||
<div className={`p-6 border-b ${
|
||||
isExcellent
|
||||
? 'bg-emerald-950/40 border-emerald-500/30'
|
||||
: isGood
|
||||
? 'bg-amber-950/40 border-amber-500/30'
|
||||
: 'bg-rose-950/40 border-rose-500/30'
|
||||
}`}>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-3 rounded-xl ${
|
||||
isExcellent
|
||||
? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/40'
|
||||
: isGood
|
||||
? 'bg-amber-500/20 text-amber-400 border border-amber-500/40'
|
||||
: 'bg-rose-500/20 text-rose-400 border border-rose-500/40'
|
||||
}`}>
|
||||
{isExcellent ? (
|
||||
<ShieldCheck className="w-7 h-7" />
|
||||
) : isGood ? (
|
||||
<CheckCircle2 className="w-7 h-7" />
|
||||
) : (
|
||||
<AlertTriangle className="w-7 h-7" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<h2 className="text-xl font-bold text-white tracking-tight">
|
||||
Auditoria de Qualidade do IFC
|
||||
</h2>
|
||||
<span className={`px-2.5 py-0.5 rounded-full text-xs font-mono font-bold uppercase tracking-wider ${
|
||||
isExcellent
|
||||
? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/40'
|
||||
: isGood
|
||||
? 'bg-amber-500/20 text-amber-300 border border-amber-500/40'
|
||||
: 'bg-rose-500/20 text-rose-300 border border-rose-500/40'
|
||||
}`}>
|
||||
Score: {audit.qualityScore}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-slate-300 mt-1">{audit.qualityMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1.5 text-slate-400 hover:text-white rounded-lg hover:bg-slate-800 transition-all"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Body */}
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Key Metrics Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div className="bg-slate-950/60 p-3.5 rounded-xl border border-slate-800">
|
||||
<span className="text-[11px] font-medium text-slate-400 uppercase tracking-wider block">
|
||||
Padrão / View
|
||||
</span>
|
||||
<span className="text-sm font-bold text-cyan-400 mt-1 block truncate">
|
||||
{audit.viewDefinition}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-950/60 p-3.5 rounded-xl border border-slate-800">
|
||||
<span className="text-[11px] font-medium text-slate-400 uppercase tracking-wider block">
|
||||
Montagens (Assemblies)
|
||||
</span>
|
||||
<span className="text-lg font-mono font-extrabold text-white mt-1 block">
|
||||
{audit.totalAssemblies}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-950/60 p-3.5 rounded-xl border border-slate-800">
|
||||
<span className="text-[11px] font-medium text-slate-400 uppercase tracking-wider block">
|
||||
Marcas Mapeadas
|
||||
</span>
|
||||
<span className="text-lg font-mono font-extrabold text-emerald-400 mt-1 block">
|
||||
{audit.uniqueMarksFound}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-950/60 p-3.5 rounded-xl border border-slate-800">
|
||||
<span className="text-[11px] font-medium text-slate-400 uppercase tracking-wider block">
|
||||
Sólidos Estruturais
|
||||
</span>
|
||||
<span className="text-lg font-mono font-extrabold text-amber-400 mt-1 block">
|
||||
{audit.totalStructuralElements}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Breakdown Table */}
|
||||
<div className="bg-slate-950/60 rounded-xl border border-slate-800 p-4 space-y-3">
|
||||
<h3 className="text-xs font-semibold text-slate-300 uppercase tracking-wider flex items-center gap-2">
|
||||
<Layers className="w-4 h-4 text-cyan-400" />
|
||||
Detalhamento de Elementos no Modelo
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs">
|
||||
<div className="p-2 rounded bg-slate-900/80 border border-slate-800/80">
|
||||
<span className="text-slate-400">Vigas/Terças:</span>{' '}
|
||||
<span className="font-bold text-white">{audit.totalBeams}</span>
|
||||
</div>
|
||||
<div className="p-2 rounded bg-slate-900/80 border border-slate-800/80">
|
||||
<span className="text-slate-400">Pilares:</span>{' '}
|
||||
<span className="font-bold text-white">{audit.totalColumns}</span>
|
||||
</div>
|
||||
<div className="p-2 rounded bg-slate-900/80 border border-slate-800/80">
|
||||
<span className="text-slate-400">Chapas/Plates:</span>{' '}
|
||||
<span className="font-bold text-white">{audit.totalPlates}</span>
|
||||
</div>
|
||||
<div className="p-2 rounded bg-slate-900/80 border border-slate-800/80">
|
||||
<span className="text-slate-400">Fixadores/Soldas:</span>{' '}
|
||||
<span className="font-bold text-white">{audit.totalFasteners}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recommendation Box if not EM.11 */}
|
||||
{audit.recommendation && (
|
||||
<div className="p-4 rounded-xl bg-amber-950/30 border border-amber-500/30 text-xs text-amber-200/90 leading-relaxed flex items-start gap-3">
|
||||
<AlertTriangle className="w-5 h-5 text-amber-400 shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<span className="font-bold text-amber-300 block mb-1">
|
||||
Recomendação de Engenharia:
|
||||
</span>
|
||||
{audit.recommendation}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer Actions */}
|
||||
<div className="p-4 bg-slate-950/80 border-t border-slate-800 flex justify-end">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-slate-950 font-bold text-sm rounded-xl shadow-lg shadow-cyan-500/20 transition-all"
|
||||
>
|
||||
<span>Prosseguir para o Visualizador 3D</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,467 @@
|
||||
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three-stdlib';
|
||||
import { PieceInfo, LoadedIFCResult } from '@/lib/ifc/ifcLoaderService';
|
||||
import { ViewCube } from './ViewCube';
|
||||
import { Viewer3DToolbar } from './Viewer3DToolbar';
|
||||
import { PieceHoverTooltip } from './PieceHoverTooltip';
|
||||
|
||||
interface ProductionPieceStatus {
|
||||
marca: string;
|
||||
fase: string;
|
||||
totalQtd: number;
|
||||
pointedQtd: number;
|
||||
currentProcessName?: string;
|
||||
processColor?: string;
|
||||
}
|
||||
|
||||
interface ModelViewer3DProps {
|
||||
modelData: LoadedIFCResult | null;
|
||||
productionData?: Map<string, ProductionPieceStatus>;
|
||||
selectedPieceMark?: string | null;
|
||||
onSelectPiece?: (piece: PieceInfo | null) => void;
|
||||
}
|
||||
|
||||
export const ModelViewer3D: React.FC<ModelViewer3DProps> = ({
|
||||
modelData,
|
||||
productionData,
|
||||
selectedPieceMark,
|
||||
onSelectPiece,
|
||||
}) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
|
||||
const sceneRef = useRef<THREE.Scene | null>(null);
|
||||
const perspCameraRef = useRef<THREE.PerspectiveCamera | null>(null);
|
||||
const orthoCameraRef = useRef<THREE.OrthographicCamera | null>(null);
|
||||
const activeCameraRef = useRef<THREE.Camera | null>(null);
|
||||
const controlsRef = useRef<OrbitControls | null>(null);
|
||||
const gridHelperRef = useRef<THREE.GridHelper | null>(null);
|
||||
const modelGroupRef = useRef<THREE.Group | null>(null);
|
||||
const raycasterRef = useRef<THREE.Raycaster>(new THREE.Raycaster());
|
||||
const mousePosRef = useRef<THREE.Vector2>(new THREE.Vector2());
|
||||
|
||||
// Tool states
|
||||
const [opacity, setOpacity] = useState<number>(100);
|
||||
const [showGrid, setShowGrid] = useState<boolean>(true);
|
||||
const [isOrthographic, setIsOrthographic] = useState<boolean>(false);
|
||||
const [isWireframe, setIsWireframe] = useState<boolean>(false);
|
||||
const [navMode, setNavMode] = useState<'orbit' | 'walk'>('orbit');
|
||||
const [colorMode, setColorMode] = useState<'description' | 'production'>('description');
|
||||
const [hasSectionPlanes, setHasSectionPlanes] = useState<boolean>(false);
|
||||
const [isMeasuring, setIsMeasuring] = useState<boolean>(false);
|
||||
|
||||
// Hover Tooltip States (1.5 seconds)
|
||||
const hoverTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const [hoveredPiece, setHoveredPiece] = useState<PieceInfo | null>(null);
|
||||
const [hoverPosition, setHoverPosition] = useState<{ x: number; y: number } | null>(null);
|
||||
|
||||
// Highlight Material (Light Green #4ade80)
|
||||
const highlightMaterialRef = useRef<THREE.MeshStandardMaterial>(
|
||||
new THREE.MeshStandardMaterial({
|
||||
color: 0x4ade80,
|
||||
emissive: 0x22c55e,
|
||||
emissiveIntensity: 0.35,
|
||||
metalness: 0.3,
|
||||
roughness: 0.4,
|
||||
side: THREE.DoubleSide,
|
||||
})
|
||||
);
|
||||
|
||||
// Initialize Scene
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const width = containerRef.current.clientWidth || 800;
|
||||
const height = containerRef.current.clientHeight || 600;
|
||||
|
||||
// 1. Scene
|
||||
const scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x0a0f1d);
|
||||
sceneRef.current = scene;
|
||||
|
||||
// 2. Cameras
|
||||
const perspCamera = new THREE.PerspectiveCamera(45, width / height, 0.1, 2000);
|
||||
perspCamera.position.set(50, 40, 60);
|
||||
perspCameraRef.current = perspCamera;
|
||||
|
||||
const frustumSize = 80;
|
||||
const aspect = width / height;
|
||||
const orthoCamera = new THREE.OrthographicCamera(
|
||||
(frustumSize * aspect) / -2,
|
||||
(frustumSize * aspect) / 2,
|
||||
frustumSize / 2,
|
||||
frustumSize / -2,
|
||||
0.1,
|
||||
2000
|
||||
);
|
||||
orthoCamera.position.copy(perspCamera.position);
|
||||
orthoCameraRef.current = orthoCamera;
|
||||
|
||||
activeCameraRef.current = perspCamera;
|
||||
|
||||
// 3. Renderer
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
||||
renderer.setSize(width, height);
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
||||
renderer.shadowMap.enabled = true;
|
||||
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
rendererRef.current = renderer;
|
||||
|
||||
containerRef.current.innerHTML = '';
|
||||
containerRef.current.appendChild(renderer.domElement);
|
||||
|
||||
// 4. OrbitControls
|
||||
const controls = new OrbitControls(perspCamera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.05;
|
||||
controls.maxDistance = 1500;
|
||||
controls.minDistance = 1;
|
||||
controlsRef.current = controls;
|
||||
|
||||
// 5. Lights
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);
|
||||
scene.add(ambientLight);
|
||||
|
||||
const dirLight1 = new THREE.DirectionalLight(0xffffff, 1.2);
|
||||
dirLight1.position.set(100, 200, 100);
|
||||
dirLight1.castShadow = true;
|
||||
scene.add(dirLight1);
|
||||
|
||||
const dirLight2 = new THREE.DirectionalLight(0x94a3b8, 0.6);
|
||||
dirLight2.position.set(-100, -50, -100);
|
||||
scene.add(dirLight2);
|
||||
|
||||
const hemiLight = new THREE.HemisphereLight(0xffffff, 0x1e293b, 0.5);
|
||||
scene.add(hemiLight);
|
||||
|
||||
// 6. Floor Grid
|
||||
const grid = new THREE.GridHelper(200, 100, 0x06b6d4, 0x1e293b);
|
||||
grid.position.y = 0;
|
||||
scene.add(grid);
|
||||
gridHelperRef.current = grid;
|
||||
|
||||
// 7. Render Loop
|
||||
let animationFrameId: number;
|
||||
const animate = () => {
|
||||
animationFrameId = requestAnimationFrame(animate);
|
||||
controls.update();
|
||||
if (rendererRef.current && sceneRef.current && activeCameraRef.current) {
|
||||
rendererRef.current.render(sceneRef.current, activeCameraRef.current);
|
||||
}
|
||||
};
|
||||
animate();
|
||||
|
||||
// 8. Resize Handler
|
||||
const handleResize = () => {
|
||||
if (!containerRef.current || !rendererRef.current) return;
|
||||
const w = containerRef.current.clientWidth;
|
||||
const h = containerRef.current.clientHeight;
|
||||
|
||||
perspCamera.aspect = w / h;
|
||||
perspCamera.updateProjectionMatrix();
|
||||
|
||||
const newAspect = w / h;
|
||||
orthoCamera.left = (frustumSize * newAspect) / -2;
|
||||
orthoCamera.right = (frustumSize * newAspect) / 2;
|
||||
orthoCamera.top = frustumSize / 2;
|
||||
orthoCamera.bottom = frustumSize / -2;
|
||||
orthoCamera.updateProjectionMatrix();
|
||||
|
||||
rendererRef.current.setSize(w, h);
|
||||
};
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
window.removeEventListener('resize', handleResize);
|
||||
renderer.dispose();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Update Model in Scene
|
||||
useEffect(() => {
|
||||
if (!sceneRef.current || !modelData) return;
|
||||
|
||||
// Remove old model if present
|
||||
if (modelGroupRef.current) {
|
||||
sceneRef.current.remove(modelGroupRef.current);
|
||||
modelGroupRef.current = null;
|
||||
}
|
||||
|
||||
const group = modelData.sceneGroup;
|
||||
modelGroupRef.current = group;
|
||||
sceneRef.current.add(group);
|
||||
|
||||
// Fit View (Center Model)
|
||||
fitModelToView(group);
|
||||
}, [modelData]);
|
||||
|
||||
// Function: Fit Model to View
|
||||
const fitModelToView = useCallback((group?: THREE.Group | null) => {
|
||||
const targetGroup = group || modelGroupRef.current;
|
||||
if (!targetGroup || !activeCameraRef.current || !controlsRef.current) return;
|
||||
|
||||
const box = new THREE.Box3().setFromObject(targetGroup);
|
||||
if (box.isEmpty()) return;
|
||||
|
||||
const center = box.getCenter(new THREE.Vector3());
|
||||
const size = box.getSize(new THREE.Vector3());
|
||||
const maxDim = Math.max(size.x, size.y, size.z);
|
||||
|
||||
const fov = 45 * (Math.PI / 180);
|
||||
let cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2)) * 1.5;
|
||||
cameraZ = Math.max(cameraZ, 20);
|
||||
|
||||
const camera = activeCameraRef.current;
|
||||
camera.position.set(center.x + cameraZ * 0.7, center.y + cameraZ * 0.5, center.z + cameraZ * 0.7);
|
||||
camera.lookAt(center);
|
||||
|
||||
controlsRef.current.target.copy(center);
|
||||
controlsRef.current.update();
|
||||
|
||||
if (gridHelperRef.current) {
|
||||
gridHelperRef.current.position.y = box.min.y;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Color Mode & Proportional Apontamentos Application
|
||||
useEffect(() => {
|
||||
if (!modelData || !modelGroupRef.current) return;
|
||||
|
||||
const group = modelGroupRef.current;
|
||||
|
||||
group.traverse((child) => {
|
||||
if ((child as THREE.Mesh).isMesh) {
|
||||
const mesh = child as THREE.Mesh;
|
||||
const pmark = mesh.userData.pieceMark || '';
|
||||
|
||||
if (colorMode === 'production' && productionData) {
|
||||
// Look up production pointing status
|
||||
const prod = productionData.get(pmark);
|
||||
if (prod && prod.pointedQtd > 0) {
|
||||
// Apply stage color (e.g., Light Green #4ade80 for pointed)
|
||||
const stageHex = prod.processColor || '#4ade80';
|
||||
mesh.material = new THREE.MeshStandardMaterial({
|
||||
color: new THREE.Color(stageHex),
|
||||
metalness: 0.35,
|
||||
roughness: 0.45,
|
||||
side: THREE.DoubleSide,
|
||||
});
|
||||
} else {
|
||||
// Unpointed / Pending (Default Gray)
|
||||
mesh.material = new THREE.MeshStandardMaterial({
|
||||
color: 0x64748b,
|
||||
metalness: 0.3,
|
||||
roughness: 0.6,
|
||||
transparent: opacity < 100,
|
||||
opacity: opacity / 100,
|
||||
side: THREE.DoubleSide,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Color Mode "Descrição" (Palette by Profile/Section)
|
||||
const colorKey = mesh.userData.colorKey;
|
||||
const cachedMat = modelData.materialsByColor.get(colorKey);
|
||||
if (cachedMat) {
|
||||
mesh.material = cachedMat;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply Opacity & Wireframe
|
||||
if (Array.isArray(mesh.material)) {
|
||||
mesh.material.forEach((m) => {
|
||||
m.transparent = opacity < 100;
|
||||
m.opacity = opacity / 100;
|
||||
if ('wireframe' in m) (m as any).wireframe = isWireframe;
|
||||
});
|
||||
} else if (mesh.material) {
|
||||
mesh.material.transparent = opacity < 100;
|
||||
mesh.material.opacity = opacity / 100;
|
||||
if ('wireframe' in mesh.material) (mesh.material as any).wireframe = isWireframe;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, [modelData, colorMode, productionData, opacity, isWireframe]);
|
||||
|
||||
// Camera Toggle (Ortogonal / Perspectiva)
|
||||
const handleToggleCamera = useCallback(() => {
|
||||
if (!perspCameraRef.current || !orthoCameraRef.current || !controlsRef.current) return;
|
||||
|
||||
const nextOrtho = !isOrthographic;
|
||||
setIsOrthographic(nextOrtho);
|
||||
|
||||
const prevCamera = activeCameraRef.current!;
|
||||
const nextCamera = nextOrtho ? orthoCameraRef.current : perspCameraRef.current;
|
||||
|
||||
nextCamera.position.copy(prevCamera.position);
|
||||
nextCamera.quaternion.copy(prevCamera.quaternion);
|
||||
|
||||
activeCameraRef.current = nextCamera;
|
||||
controlsRef.current.object = nextCamera;
|
||||
controlsRef.current.update();
|
||||
}, [isOrthographic]);
|
||||
|
||||
// ViewCube Direction Switcher
|
||||
const handleViewCubeSelect = useCallback(
|
||||
(view: 'top' | 'bottom' | 'front' | 'back' | 'left' | 'right' | 'iso') => {
|
||||
if (!controlsRef.current || !activeCameraRef.current) return;
|
||||
const target = controlsRef.current.target;
|
||||
const camera = activeCameraRef.current;
|
||||
const distance = camera.position.distanceTo(target);
|
||||
|
||||
const newPos = target.clone();
|
||||
switch (view) {
|
||||
case 'top':
|
||||
newPos.y += distance;
|
||||
break;
|
||||
case 'bottom':
|
||||
newPos.y -= distance;
|
||||
break;
|
||||
case 'front':
|
||||
newPos.z += distance;
|
||||
break;
|
||||
case 'back':
|
||||
newPos.z -= distance;
|
||||
break;
|
||||
case 'left':
|
||||
newPos.x -= distance;
|
||||
break;
|
||||
case 'right':
|
||||
newPos.x += distance;
|
||||
break;
|
||||
case 'iso':
|
||||
newPos.x += distance * 0.7;
|
||||
newPos.y += distance * 0.5;
|
||||
newPos.z += distance * 0.7;
|
||||
break;
|
||||
}
|
||||
|
||||
camera.position.copy(newPos);
|
||||
camera.lookAt(target);
|
||||
controlsRef.current.update();
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// Fullscreen Toggle
|
||||
const handleToggleFullscreen = useCallback(() => {
|
||||
if (!containerRef.current) return;
|
||||
if (!document.fullscreenElement) {
|
||||
containerRef.current.requestFullscreen().catch(() => {});
|
||||
} else {
|
||||
document.exitFullscreen().catch(() => {});
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 1.5-Second Hover Detection
|
||||
const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (!containerRef.current || !activeCameraRef.current || !modelGroupRef.current) return;
|
||||
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
const mouseX = ((e.clientX - rect.left) / rect.width) * 2 - 1;
|
||||
const mouseY = -((e.clientY - rect.top) / rect.height) * 2 + 1;
|
||||
mousePosRef.current.set(mouseX, mouseY);
|
||||
|
||||
// Clear previous timer on movement
|
||||
if (hoverTimerRef.current) {
|
||||
clearTimeout(hoverTimerRef.current);
|
||||
hoverTimerRef.current = null;
|
||||
}
|
||||
setHoveredPiece(null);
|
||||
setHoverPosition(null);
|
||||
|
||||
// Set 1.5s delay timer for stable hover
|
||||
const clientX = e.clientX;
|
||||
const clientY = e.clientY;
|
||||
|
||||
hoverTimerRef.current = setTimeout(() => {
|
||||
raycasterRef.current.setFromCamera(mousePosRef.current, activeCameraRef.current!);
|
||||
const intersects = raycasterRef.current.intersectObjects(modelGroupRef.current!.children, true);
|
||||
|
||||
if (intersects.length > 0) {
|
||||
const hitMesh = intersects[0].object as THREE.Mesh;
|
||||
const expressID = hitMesh.userData.expressID;
|
||||
const pmark = hitMesh.userData.pieceMark;
|
||||
|
||||
if (modelData && expressID) {
|
||||
const piece = modelData.pieceByExpressID.get(expressID) || {
|
||||
expressID,
|
||||
guid: '',
|
||||
name: hitMesh.userData.section || 'Peça',
|
||||
type: 'PIECE',
|
||||
pieceMark: pmark,
|
||||
section: hitMesh.userData.section,
|
||||
};
|
||||
setHoveredPiece(piece);
|
||||
setHoverPosition({ x: clientX, y: clientY });
|
||||
}
|
||||
}
|
||||
}, 1500); // 1.5 seconds exact requirement
|
||||
};
|
||||
|
||||
const handlePointerLeave = () => {
|
||||
if (hoverTimerRef.current) {
|
||||
clearTimeout(hoverTimerRef.current);
|
||||
hoverTimerRef.current = null;
|
||||
}
|
||||
setHoveredPiece(null);
|
||||
setHoverPosition(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerLeave={handlePointerLeave}
|
||||
className="relative w-full h-full min-h-[600px] bg-slate-950 rounded-2xl overflow-hidden border border-slate-800 shadow-2xl select-none"
|
||||
>
|
||||
{/* Top Right: Interactive ViewCube */}
|
||||
<div className="absolute top-4 right-4 z-20">
|
||||
<ViewCube onSelectView={handleViewCubeSelect} />
|
||||
</div>
|
||||
|
||||
{/* Hover Tooltip (1.5s delay trigger) */}
|
||||
<PieceHoverTooltip
|
||||
piece={hoveredPiece}
|
||||
position={hoverPosition}
|
||||
productionInfo={
|
||||
hoveredPiece?.pieceMark && productionData
|
||||
? {
|
||||
pointedQty: productionData.get(hoveredPiece.pieceMark)?.pointedQtd,
|
||||
totalQty: productionData.get(hoveredPiece.pieceMark)?.totalQtd,
|
||||
currentStage: productionData.get(hoveredPiece.pieceMark)?.currentProcessName,
|
||||
stageColor: productionData.get(hoveredPiece.pieceMark)?.processColor,
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Bottom Floating Toolbar */}
|
||||
<div className="absolute bottom-4 left-4 right-4 z-20 max-w-5xl mx-auto">
|
||||
<Viewer3DToolbar
|
||||
opacity={opacity}
|
||||
onOpacityChange={setOpacity}
|
||||
showGrid={showGrid}
|
||||
onToggleGrid={() => {
|
||||
setShowGrid(!showGrid);
|
||||
if (gridHelperRef.current) gridHelperRef.current.visible = !showGrid;
|
||||
}}
|
||||
isOrthographic={isOrthographic}
|
||||
onToggleCamera={handleToggleCamera}
|
||||
isWireframe={isWireframe}
|
||||
onToggleWireframe={() => setIsWireframe(!isWireframe)}
|
||||
navMode={navMode}
|
||||
onNavModeChange={setNavMode}
|
||||
colorMode={colorMode}
|
||||
onColorModeChange={setColorMode}
|
||||
onFitView={() => fitModelToView()}
|
||||
onToggleFullscreen={handleToggleFullscreen}
|
||||
onToggleSectionPlanes={() => setHasSectionPlanes(!hasSectionPlanes)}
|
||||
onToggleMeasure={() => setIsMeasuring(!isMeasuring)}
|
||||
hasSectionPlanes={hasSectionPlanes}
|
||||
isMeasuring={isMeasuring}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,110 @@
|
||||
import React from 'react';
|
||||
import { PieceInfo } from '@/lib/ifc/ifcLoaderService';
|
||||
import { Box, Layers, CheckCircle2, Clock } from 'lucide-react';
|
||||
|
||||
interface PieceHoverTooltipProps {
|
||||
piece: PieceInfo | null;
|
||||
position: { x: number; y: number } | null;
|
||||
productionInfo?: {
|
||||
pointedQty?: number;
|
||||
totalQty?: number;
|
||||
currentStage?: string;
|
||||
stageColor?: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const PieceHoverTooltip: React.FC<PieceHoverTooltipProps> = ({
|
||||
piece,
|
||||
position,
|
||||
productionInfo,
|
||||
}) => {
|
||||
if (!piece || !position) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed pointer-events-none z-40 p-4 rounded-2xl bg-slate-900/95 backdrop-blur-xl border border-cyan-500/40 shadow-2xl shadow-cyan-950/60 text-slate-100 min-w-[260px] animate-in fade-in zoom-in-95 duration-150"
|
||||
style={{
|
||||
left: `${position.x + 16}px`,
|
||||
top: `${position.y + 16}px`,
|
||||
maxWidth: '320px',
|
||||
}}
|
||||
>
|
||||
{/* Header Badge */}
|
||||
<div className="flex items-center justify-between gap-2 pb-2.5 mb-2.5 border-b border-slate-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="p-1.5 rounded-lg bg-cyan-500/20 text-cyan-400 border border-cyan-500/30">
|
||||
<Box className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[10px] uppercase font-mono tracking-widest text-slate-400 block">
|
||||
Marca Principal
|
||||
</span>
|
||||
<span className="text-base font-extrabold text-cyan-300 font-mono tracking-tight">
|
||||
{piece.pieceMark || 'Sem Marca'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{piece.phase && (
|
||||
<span className="px-2 py-0.5 rounded-full text-[10px] font-bold font-mono bg-slate-800 text-slate-300 border border-slate-700">
|
||||
Fase {piece.phase}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Details Grid */}
|
||||
<div className="space-y-1.5 text-xs">
|
||||
{piece.section && (
|
||||
<div className="flex items-center justify-between text-slate-300">
|
||||
<span className="text-slate-400">Perfil / Bitola:</span>
|
||||
<span className="font-semibold text-white font-mono bg-slate-950/60 px-2 py-0.5 rounded border border-slate-800">
|
||||
{piece.section}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{piece.childrenIDs && piece.childrenIDs.length > 0 && (
|
||||
<div className="flex items-center justify-between text-slate-300">
|
||||
<span className="text-slate-400">Componentes:</span>
|
||||
<span className="font-semibold text-slate-200">
|
||||
{piece.childrenIDs.length} peças soldadas
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Production Apontamentos */}
|
||||
{productionInfo && (
|
||||
<div className="mt-3 pt-2.5 border-t border-slate-800/80 space-y-1.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-slate-400 flex items-center gap-1.5">
|
||||
<CheckCircle2 className="w-3.5 h-3.5 text-emerald-400" />
|
||||
Apontamento:
|
||||
</span>
|
||||
<span className="font-bold text-emerald-400 font-mono">
|
||||
{productionInfo.pointedQty ?? 0} de {productionInfo.totalQty ?? 1} peças
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{productionInfo.currentStage && (
|
||||
<div className="flex items-center justify-between text-[11px]">
|
||||
<span className="text-slate-400 flex items-center gap-1">
|
||||
<Clock className="w-3 h-3 text-amber-400" />
|
||||
Etapa Atual:
|
||||
</span>
|
||||
<span
|
||||
className="px-2 py-0.5 rounded-full font-bold uppercase tracking-wider"
|
||||
style={{
|
||||
backgroundColor: `${productionInfo.stageColor || '#10b981'}20`,
|
||||
color: productionInfo.stageColor || '#10b981',
|
||||
border: `1px solid ${productionInfo.stageColor || '#10b981'}40`,
|
||||
}}
|
||||
>
|
||||
{productionInfo.currentStage}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,57 @@
|
||||
import React from 'react';
|
||||
|
||||
interface ViewCubeProps {
|
||||
onSelectView: (view: 'top' | 'bottom' | 'front' | 'back' | 'left' | 'right' | 'iso') => void;
|
||||
}
|
||||
|
||||
export const ViewCube: React.FC<ViewCubeProps> = ({ onSelectView }) => {
|
||||
return (
|
||||
<div className="relative w-28 h-28 select-none">
|
||||
<div className="w-full h-full flex items-center justify-center p-2 rounded-xl bg-slate-900/80 backdrop-blur-md border border-cyan-500/30 shadow-2xl shadow-cyan-950/40">
|
||||
<div className="relative w-20 h-20 perspective-[600px] flex items-center justify-center">
|
||||
{/* Central Cube Simulation with Interactive Buttons */}
|
||||
<div className="grid grid-cols-3 grid-rows-3 gap-1 w-full h-full text-[10px] font-bold tracking-wider">
|
||||
<button
|
||||
onClick={() => onSelectView('top')}
|
||||
className="col-span-3 py-1 bg-cyan-950/70 hover:bg-cyan-500 hover:text-slate-950 text-cyan-300 rounded border border-cyan-500/40 transition-all flex items-center justify-center shadow"
|
||||
title="Vista Superior (Planta)"
|
||||
>
|
||||
TOPO
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onSelectView('left')}
|
||||
className="py-2 bg-cyan-950/70 hover:bg-cyan-500 hover:text-slate-950 text-cyan-300 rounded border border-cyan-500/40 transition-all flex items-center justify-center shadow"
|
||||
title="Vista Esquerda"
|
||||
>
|
||||
ESQ
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onSelectView('front')}
|
||||
className="py-2 bg-cyan-600/80 hover:bg-cyan-400 hover:text-slate-950 text-white rounded border border-cyan-400 transition-all flex items-center justify-center shadow font-extrabold"
|
||||
title="Vista Frontal"
|
||||
>
|
||||
FRENTE
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onSelectView('right')}
|
||||
className="py-2 bg-cyan-950/70 hover:bg-cyan-500 hover:text-slate-950 text-cyan-300 rounded border border-cyan-500/40 transition-all flex items-center justify-center shadow"
|
||||
title="Vista Direita"
|
||||
>
|
||||
DIR
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onSelectView('back')}
|
||||
className="col-span-3 py-1 bg-cyan-950/70 hover:bg-cyan-500 hover:text-slate-950 text-cyan-300 rounded border border-cyan-500/40 transition-all flex items-center justify-center shadow"
|
||||
title="Vista Posterior (Atrás)"
|
||||
>
|
||||
ATRÁS
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center mt-1 text-[9px] font-mono uppercase text-cyan-400/80 tracking-widest">
|
||||
Orientação 3D
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,229 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Eye,
|
||||
Grid as GridIcon,
|
||||
Scissors,
|
||||
Maximize2,
|
||||
Box,
|
||||
Layers,
|
||||
Compass,
|
||||
Footprints,
|
||||
Ruler,
|
||||
Palette,
|
||||
CheckCircle2
|
||||
} from 'lucide-react';
|
||||
|
||||
interface Viewer3DToolbarProps {
|
||||
opacity: number;
|
||||
onOpacityChange: (val: number) => void;
|
||||
showGrid: boolean;
|
||||
onToggleGrid: () => void;
|
||||
isOrthographic: boolean;
|
||||
onToggleCamera: () => void;
|
||||
isWireframe: boolean;
|
||||
onToggleWireframe: () => void;
|
||||
navMode: 'orbit' | 'walk';
|
||||
onNavModeChange: (mode: 'orbit' | 'walk') => void;
|
||||
colorMode: 'description' | 'production';
|
||||
onColorModeChange: (mode: 'description' | 'production') => void;
|
||||
onFitView: () => void;
|
||||
onToggleFullscreen: () => void;
|
||||
onToggleSectionPlanes?: () => void;
|
||||
onToggleMeasure?: () => void;
|
||||
hasSectionPlanes?: boolean;
|
||||
isMeasuring?: boolean;
|
||||
}
|
||||
|
||||
export const Viewer3DToolbar: React.FC<Viewer3DToolbarProps> = ({
|
||||
opacity,
|
||||
onOpacityChange,
|
||||
showGrid,
|
||||
onToggleGrid,
|
||||
isOrthographic,
|
||||
onToggleCamera,
|
||||
isWireframe,
|
||||
onToggleWireframe,
|
||||
navMode,
|
||||
onNavModeChange,
|
||||
colorMode,
|
||||
onColorModeChange,
|
||||
onFitView,
|
||||
onToggleFullscreen,
|
||||
onToggleSectionPlanes,
|
||||
onToggleMeasure,
|
||||
hasSectionPlanes,
|
||||
isMeasuring,
|
||||
}) => {
|
||||
return (
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 p-3 bg-slate-900/90 backdrop-blur-xl border border-slate-800 rounded-2xl shadow-2xl text-slate-200">
|
||||
{/* Left: Opacity Slider */}
|
||||
<div className="flex items-center gap-3 bg-slate-950/60 px-4 py-2 rounded-xl border border-slate-800">
|
||||
<Eye className="w-4 h-4 text-amber-400" />
|
||||
<span className="text-xs font-medium text-slate-300">Opacidade</span>
|
||||
<input
|
||||
type="range"
|
||||
min={10}
|
||||
max={100}
|
||||
value={opacity}
|
||||
onChange={(e) => onOpacityChange(Number(e.target.value))}
|
||||
className="w-24 h-1.5 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-amber-500"
|
||||
/>
|
||||
<span className="text-xs font-mono font-bold text-amber-400 min-w-[32px]">
|
||||
{opacity}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Middle: Control Buttons */}
|
||||
<div className="flex flex-wrap items-center gap-1.5 bg-slate-950/60 p-1.5 rounded-xl border border-slate-800">
|
||||
{/* Grid */}
|
||||
<button
|
||||
onClick={onToggleGrid}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
showGrid
|
||||
? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/40 shadow-sm'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'
|
||||
}`}
|
||||
title="Alternar Grade de Piso"
|
||||
>
|
||||
<GridIcon className="w-3.5 h-3.5" />
|
||||
<span>Grid</span>
|
||||
</button>
|
||||
|
||||
{/* Section / Cortes */}
|
||||
<button
|
||||
onClick={onToggleSectionPlanes}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
hasSectionPlanes
|
||||
? 'bg-rose-500/20 text-rose-300 border border-rose-500/40 shadow-sm'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'
|
||||
}`}
|
||||
title="Planos de Corte Estrutural"
|
||||
>
|
||||
<Scissors className="w-3.5 h-3.5" />
|
||||
<span>Cortes</span>
|
||||
</button>
|
||||
|
||||
{/* Escala 1:1 / Fit */}
|
||||
<button
|
||||
onClick={onFitView}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-slate-200 hover:bg-slate-800/60 transition-all"
|
||||
title="Enquadrar Estrutura Completa"
|
||||
>
|
||||
<Maximize2 className="w-3.5 h-3.5" />
|
||||
<span>Escala 1:1</span>
|
||||
</button>
|
||||
|
||||
{/* Sólido / Wireframe */}
|
||||
<button
|
||||
onClick={onToggleWireframe}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
!isWireframe
|
||||
? 'bg-blue-500/20 text-blue-300 border border-blue-500/40'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'
|
||||
}`}
|
||||
title="Modo Sólido ou Aramado"
|
||||
>
|
||||
{isWireframe ? <Layers className="w-3.5 h-3.5" /> : <Box className="w-3.5 h-3.5" />}
|
||||
<span>{isWireframe ? 'Aramado' : 'Sólido'}</span>
|
||||
</button>
|
||||
|
||||
{/* Ortogonal / Perspectiva */}
|
||||
<button
|
||||
onClick={onToggleCamera}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
isOrthographic
|
||||
? 'bg-emerald-500/20 text-emerald-300 border border-emerald-500/40'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'
|
||||
}`}
|
||||
title="Alternar Câmera Ortogonal ou Perspectiva"
|
||||
>
|
||||
<Box className="w-3.5 h-3.5" />
|
||||
<span>{isOrthographic ? 'Ortogonal' : 'Perspectiva'}</span>
|
||||
</button>
|
||||
|
||||
{/* Posicionar (Orbit) */}
|
||||
<button
|
||||
onClick={() => onNavModeChange('orbit')}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
navMode === 'orbit'
|
||||
? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/40'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'
|
||||
}`}
|
||||
title="Modo Orbitar / Rotacionar"
|
||||
>
|
||||
<Compass className="w-3.5 h-3.5" />
|
||||
<span>Posicionar</span>
|
||||
</button>
|
||||
|
||||
{/* Caminhar */}
|
||||
<button
|
||||
onClick={() => onNavModeChange('walk')}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
navMode === 'walk'
|
||||
? 'bg-cyan-500/20 text-cyan-300 border border-cyan-500/40'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'
|
||||
}`}
|
||||
title="Modo Primeira Pessoa (Caminhar)"
|
||||
>
|
||||
<Footprints className="w-3.5 h-3.5" />
|
||||
<span>Caminhar</span>
|
||||
</button>
|
||||
|
||||
{/* Medir */}
|
||||
<button
|
||||
onClick={onToggleMeasure}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
isMeasuring
|
||||
? 'bg-amber-500/20 text-amber-300 border border-amber-500/40'
|
||||
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/60'
|
||||
}`}
|
||||
title="Régua de Medição"
|
||||
>
|
||||
<Ruler className="w-3.5 h-3.5" />
|
||||
<span>Medir</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Right: Color Mode & Fullscreen */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Mode Selector */}
|
||||
<div className="flex items-center bg-slate-950/60 p-1 rounded-xl border border-slate-800">
|
||||
<button
|
||||
onClick={() => onColorModeChange('description')}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
colorMode === 'description'
|
||||
? 'bg-amber-500 text-slate-950 font-bold shadow-lg shadow-amber-500/20'
|
||||
: 'text-slate-400 hover:text-slate-200'
|
||||
}`}
|
||||
title="Cores por Família/Perfil"
|
||||
>
|
||||
<Palette className="w-3.5 h-3.5" />
|
||||
<span>Descrição</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onColorModeChange('production')}
|
||||
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
|
||||
colorMode === 'production'
|
||||
? 'bg-emerald-500 text-slate-950 font-bold shadow-lg shadow-emerald-500/20'
|
||||
: 'text-slate-400 hover:text-slate-200'
|
||||
}`}
|
||||
title="Cores por Status de Apontamento"
|
||||
>
|
||||
<CheckCircle2 className="w-3.5 h-3.5" />
|
||||
<span>Produção</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Fullscreen Button */}
|
||||
<button
|
||||
onClick={onToggleFullscreen}
|
||||
className="flex items-center gap-1.5 px-3 py-2 bg-slate-950/60 hover:bg-cyan-500 hover:text-slate-950 text-cyan-400 border border-slate-800 hover:border-cyan-400 rounded-xl text-xs font-mono font-bold uppercase tracking-wider transition-all"
|
||||
title="Tela Cheia"
|
||||
>
|
||||
<Maximize2 className="w-3.5 h-3.5" />
|
||||
<span>Tela Cheia</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -163,6 +163,13 @@ export const routeConfig: RouteDefinition[] = [
|
||||
resourceKey: 'producao-dashboard',
|
||||
},
|
||||
|
||||
// ── Visualizador 3D ──────────────────────────────────────
|
||||
{
|
||||
path: '/visualizador-3d',
|
||||
component: () => import('@/pages/Visualizador3D'),
|
||||
guard: 'protected',
|
||||
},
|
||||
|
||||
// ── Painel Industrial ────────────────────────────────────
|
||||
{
|
||||
path: '/painel-industrial',
|
||||
|
||||
@@ -0,0 +1,456 @@
|
||||
import * as WebIFC from 'web-ifc';
|
||||
import * as THREE from 'three';
|
||||
|
||||
export interface IFCQualityAudit {
|
||||
schema: string;
|
||||
viewDefinition: string;
|
||||
isEM11: boolean;
|
||||
totalAssemblies: number;
|
||||
totalBeams: number;
|
||||
totalColumns: number;
|
||||
totalMembers: number;
|
||||
totalPlates: number;
|
||||
totalFasteners: number;
|
||||
totalStructuralElements: number;
|
||||
totalWeldedGroups: number;
|
||||
uniqueMarksFound: number;
|
||||
marksList: string[];
|
||||
qualityScore: 'EXCELENTE' | 'BOM' | 'ATENÇÃO';
|
||||
qualityMessage: string;
|
||||
recommendation?: string;
|
||||
fallbackActive: boolean;
|
||||
}
|
||||
|
||||
export interface PieceInfo {
|
||||
expressID: number;
|
||||
guid: string;
|
||||
name: string;
|
||||
type: string;
|
||||
pieceMark: string;
|
||||
assemblyMark?: string;
|
||||
parentAssemblyID?: number;
|
||||
phase?: string;
|
||||
ofNumber?: string;
|
||||
section?: string;
|
||||
span?: number;
|
||||
material?: string;
|
||||
childrenIDs?: number[];
|
||||
connectedMeshIDs?: number[];
|
||||
mesh?: THREE.Mesh;
|
||||
}
|
||||
|
||||
export interface LoadedIFCResult {
|
||||
sceneGroup: THREE.Group;
|
||||
audit: IFCQualityAudit;
|
||||
piecesByMark: Map<string, PieceInfo[]>;
|
||||
pieceByExpressID: Map<number, PieceInfo>;
|
||||
weldedGroupMap: Map<number, number[]>; // expressID -> all connected expressIDs
|
||||
materialsByColor: Map<string, THREE.Material>;
|
||||
totalMeshes: number;
|
||||
}
|
||||
|
||||
// Helper: Palette by Section/Description (Mode "Descrição")
|
||||
const DESCRIPTION_PALETTE = [
|
||||
'#3b82f6', // blue
|
||||
'#ec4899', // pink/magenta
|
||||
'#10b981', // emerald
|
||||
'#f59e0b', // amber
|
||||
'#8b5cf6', // purple
|
||||
'#06b6d4', // cyan
|
||||
'#ef4444', // red
|
||||
'#84cc16', // lime
|
||||
'#6366f1', // indigo
|
||||
'#14b8a6', // teal
|
||||
'#f97316', // orange
|
||||
'#eab308', // yellow
|
||||
];
|
||||
|
||||
export async function loadAndAuditIFC(
|
||||
fileOrBuffer: File | ArrayBuffer,
|
||||
onProgress?: (percent: number, step: string) => void
|
||||
): Promise<LoadedIFCResult> {
|
||||
const ifcApi = new WebIFC.IfcAPI();
|
||||
|
||||
// 1. Initialize Web-IFC WASM locally with fallback
|
||||
if (onProgress) onProgress(10, 'Carregando motor Web-IFC (WASM)...');
|
||||
|
||||
const wasmPaths = [
|
||||
'/wasm/',
|
||||
'https://unpkg.com/web-ifc@0.0.57/',
|
||||
'https://cdn.jsdelivr.net/npm/web-ifc@0.0.57/'
|
||||
];
|
||||
|
||||
let wasmInitSuccess = false;
|
||||
for (const path of wasmPaths) {
|
||||
try {
|
||||
ifcApi.SetWasmPath(path);
|
||||
await ifcApi.Init();
|
||||
wasmInitSuccess = true;
|
||||
break;
|
||||
} catch {
|
||||
// try next
|
||||
}
|
||||
}
|
||||
|
||||
if (!wasmInitSuccess) {
|
||||
throw new Error('Não foi possível inicializar o motor Web-IFC WebAssembly.');
|
||||
}
|
||||
|
||||
// 2. Read bytes & Raw String for Header
|
||||
if (onProgress) onProgress(25, 'Lendo arquivo IFC...');
|
||||
let data: Uint8Array;
|
||||
let rawHeader = '';
|
||||
if (fileOrBuffer instanceof File) {
|
||||
const arrayBuffer = await fileOrBuffer.arrayBuffer();
|
||||
data = new Uint8Array(arrayBuffer);
|
||||
const decoder = new TextDecoder('utf-8', { fatal: false });
|
||||
rawHeader = decoder.decode(data.slice(0, 4096));
|
||||
} else {
|
||||
data = new Uint8Array(fileOrBuffer);
|
||||
const decoder = new TextDecoder('utf-8', { fatal: false });
|
||||
rawHeader = decoder.decode(data.slice(0, 4096));
|
||||
}
|
||||
|
||||
// 3. Open Model
|
||||
if (onProgress) onProgress(40, 'Decodificando entidades IFC...');
|
||||
const modelID = ifcApi.OpenModel(data);
|
||||
if (modelID < 0) {
|
||||
throw new Error('Falha ao decodificar a estrutura do arquivo IFC.');
|
||||
}
|
||||
|
||||
// 4. Header Detection
|
||||
const isEM11 = rawHeader.includes('SteelFabricationView') || rawHeader.includes('EM.11');
|
||||
|
||||
// Collect Elements
|
||||
if (onProgress) onProgress(50, 'Mapeando topologia estrutural e soldas...');
|
||||
const assemblies = ifcApi.GetLineIDsWithType(modelID, WebIFC.IFCELEMENTASSEMBLY);
|
||||
const beams = ifcApi.GetLineIDsWithType(modelID, WebIFC.IFCBEAM);
|
||||
const columns = ifcApi.GetLineIDsWithType(modelID, WebIFC.IFCCOLUMN);
|
||||
const members = ifcApi.GetLineIDsWithType(modelID, WebIFC.IFCMEMBER);
|
||||
const plates = ifcApi.GetLineIDsWithType(modelID, WebIFC.IFCPLATE);
|
||||
const fasteners = ifcApi.GetLineIDsWithType(modelID, WebIFC.IFCMECHANICALFASTENER);
|
||||
|
||||
const totalAssemblies = assemblies.size();
|
||||
const totalBeams = beams.size();
|
||||
const totalColumns = columns.size();
|
||||
const totalMembers = members.size();
|
||||
const totalPlates = plates.size();
|
||||
const totalFasteners = fasteners.size();
|
||||
const totalStructural = totalBeams + totalColumns + totalMembers + totalPlates;
|
||||
|
||||
// 4.1 Native Aggregates mapping (IFCRELAGGREGATES)
|
||||
const aggregates = ifcApi.GetLineIDsWithType(modelID, WebIFC.IFCRELAGGREGATES);
|
||||
const assemblyToChildren = new Map<number, number[]>();
|
||||
|
||||
for (let i = 0; i < aggregates.size(); i++) {
|
||||
const relID = aggregates.get(i);
|
||||
try {
|
||||
const rel = ifcApi.GetLine(modelID, relID);
|
||||
if (rel && rel.RelatingObject && rel.RelatedObjects) {
|
||||
const parentID = rel.RelatingObject.value;
|
||||
const childIDs = (rel.RelatedObjects as any[]).map((r: any) => r.value);
|
||||
assemblyToChildren.set(parentID, childIDs);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
// 4.2 FALLBACK: Topologic Weld Graph (IFCRELCONNECTSWITHREALIZINGELEMENTS)
|
||||
// Connects parts (Plates <-> Columns <-> Beams) when IfcElementAssembly is absent
|
||||
const weldConnections = ifcApi.GetLineIDsWithType(modelID, WebIFC.IFCRELCONNECTSWITHREALIZINGELEMENTS);
|
||||
const adjacencyList = new Map<number, Set<number>>();
|
||||
|
||||
const addEdge = (u: number, v: number) => {
|
||||
if (!adjacencyList.has(u)) adjacencyList.set(u, new Set());
|
||||
if (!adjacencyList.has(v)) adjacencyList.set(v, new Set());
|
||||
adjacencyList.get(u)!.add(v);
|
||||
adjacencyList.get(v)!.add(u);
|
||||
};
|
||||
|
||||
for (let i = 0; i < weldConnections.size(); i++) {
|
||||
const relID = weldConnections.get(i);
|
||||
try {
|
||||
const rel = ifcApi.GetLine(modelID, relID);
|
||||
if (rel && rel.RelatingElement && rel.RelatedElement) {
|
||||
const elemA = rel.RelatingElement.value;
|
||||
const elemB = rel.RelatedElement.value;
|
||||
addEdge(elemA, elemB);
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
// Compute Connected Components for Welded Assemblies (DSU/BFS)
|
||||
const visited = new Set<number>();
|
||||
const weldedGroupMap = new Map<number, number[]>();
|
||||
let totalWeldedGroups = 0;
|
||||
|
||||
for (const node of adjacencyList.keys()) {
|
||||
if (!visited.has(node)) {
|
||||
const group: number[] = [];
|
||||
const queue: number[] = [node];
|
||||
visited.add(node);
|
||||
|
||||
while (queue.length > 0) {
|
||||
const curr = queue.shift()!;
|
||||
group.push(curr);
|
||||
const neighbors = adjacencyList.get(curr) || new Set();
|
||||
for (const n of neighbors) {
|
||||
if (!visited.has(n)) {
|
||||
visited.add(n);
|
||||
queue.push(n);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
totalWeldedGroups++;
|
||||
for (const id of group) {
|
||||
weldedGroupMap.set(id, group);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Collect piece marks & properties
|
||||
const piecesByMark = new Map<string, PieceInfo[]>();
|
||||
const pieceByExpressID = new Map<number, PieceInfo>();
|
||||
const uniqueMarksSet = new Set<string>();
|
||||
const sectionColorMap = new Map<string, string>();
|
||||
let colorIndex = 0;
|
||||
|
||||
// Process Native Assemblies if present
|
||||
for (let i = 0; i < assemblies.size(); i++) {
|
||||
const assID = assemblies.get(i);
|
||||
try {
|
||||
const assObj = ifcApi.GetLine(modelID, assID);
|
||||
const props = await getPropertiesForElement(ifcApi, modelID, assID);
|
||||
const pmark = props.PieceMark || props.Reference || props.Mark || props.Tag || 'indefinido';
|
||||
|
||||
const children = assemblyToChildren.get(assID) || [];
|
||||
const piece: PieceInfo = {
|
||||
expressID: assID,
|
||||
guid: assObj?.GlobalId?.value || '',
|
||||
name: assObj?.Name?.value || 'Montagem Estrutural',
|
||||
type: 'IFCELEMENTASSEMBLY',
|
||||
pieceMark: pmark,
|
||||
childrenIDs: children,
|
||||
connectedMeshIDs: children,
|
||||
section: props.Section || props.Profile,
|
||||
phase: props.Phase || extractPhaseFromMark(pmark),
|
||||
ofNumber: extractOFFromMark(pmark)
|
||||
};
|
||||
|
||||
if (pmark !== 'indefinido') {
|
||||
uniqueMarksSet.add(pmark);
|
||||
if (!piecesByMark.has(pmark)) piecesByMark.set(pmark, []);
|
||||
piecesByMark.get(pmark)!.push(piece);
|
||||
}
|
||||
pieceByExpressID.set(assID, piece);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
// 5. Generate 3D Meshes with Three.js
|
||||
if (onProgress) onProgress(75, 'Gerando malhas geométricas 3D...');
|
||||
const sceneGroup = new THREE.Group();
|
||||
sceneGroup.name = 'IFC_ROOT_MODEL';
|
||||
|
||||
const defaultGrayMat = new THREE.MeshStandardMaterial({
|
||||
color: 0x94a3b8,
|
||||
metalness: 0.35,
|
||||
roughness: 0.55,
|
||||
side: THREE.DoubleSide
|
||||
});
|
||||
|
||||
const materialCache = new Map<string, THREE.MeshStandardMaterial>();
|
||||
|
||||
let totalMeshes = 0;
|
||||
|
||||
ifcApi.StreamAllMeshes(modelID, (flatMesh: WebIFC.FlatMesh) => {
|
||||
const expressID = flatMesh.expressID;
|
||||
const placedGeometries = flatMesh.geometries;
|
||||
|
||||
// Check properties for this element
|
||||
let pmark = '';
|
||||
let section = '';
|
||||
try {
|
||||
const rawProps = getSyncProperties(ifcApi, modelID, expressID);
|
||||
pmark = rawProps.PieceMark || rawProps.Reference || rawProps.Mark || '';
|
||||
section = rawProps.Section || rawProps.Profile || '';
|
||||
} catch {
|
||||
// fallback
|
||||
}
|
||||
|
||||
// Determine section color
|
||||
const colorKey = section || 'PADRAO';
|
||||
if (!sectionColorMap.has(colorKey)) {
|
||||
sectionColorMap.set(colorKey, DESCRIPTION_PALETTE[colorIndex % DESCRIPTION_PALETTE.length]);
|
||||
colorIndex++;
|
||||
}
|
||||
|
||||
const hexColor = sectionColorMap.get(colorKey)!;
|
||||
if (!materialCache.has(hexColor)) {
|
||||
materialCache.set(
|
||||
hexColor,
|
||||
new THREE.MeshStandardMaterial({
|
||||
color: new THREE.Color(hexColor),
|
||||
metalness: 0.4,
|
||||
roughness: 0.5,
|
||||
side: THREE.DoubleSide
|
||||
})
|
||||
);
|
||||
}
|
||||
const mat = materialCache.get(hexColor) || defaultGrayMat;
|
||||
|
||||
// Get welded connected peers (Fallback topology)
|
||||
const connectedGroup = weldedGroupMap.get(expressID) || [expressID];
|
||||
|
||||
for (let g = 0; g < placedGeometries.size(); g++) {
|
||||
const placedGeo = placedGeometries.get(g);
|
||||
const ifcGeo = ifcApi.GetGeometry(modelID, placedGeo.geometryExpressID);
|
||||
|
||||
const positions = ifcApi.GetVertexArray(ifcGeo.GetVertexData(), ifcGeo.GetVertexDataSize());
|
||||
const indices = ifcApi.GetIndexArray(ifcGeo.GetIndexData(), ifcGeo.GetIndexDataSize());
|
||||
|
||||
const bufferGeo = new THREE.BufferGeometry();
|
||||
bufferGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
|
||||
bufferGeo.setIndex(new THREE.BufferAttribute(new Uint32Array(indices), 1));
|
||||
bufferGeo.computeVertexNormals();
|
||||
|
||||
const mesh = new THREE.Mesh(bufferGeo, mat);
|
||||
mesh.matrixAutoUpdate = false;
|
||||
mesh.matrix.fromArray(placedGeo.flatTransformation);
|
||||
mesh.matrixWorldNeedsUpdate = true;
|
||||
mesh.userData = {
|
||||
expressID,
|
||||
pieceMark: pmark,
|
||||
section,
|
||||
colorKey,
|
||||
connectedMeshIDs: connectedGroup
|
||||
};
|
||||
|
||||
sceneGroup.add(mesh);
|
||||
totalMeshes++;
|
||||
|
||||
// Register piece in lookup map
|
||||
if (!pieceByExpressID.has(expressID)) {
|
||||
const piece: PieceInfo = {
|
||||
expressID,
|
||||
guid: '',
|
||||
name: section || 'Peça Estrutural',
|
||||
type: 'ELEMENT',
|
||||
pieceMark: pmark,
|
||||
section,
|
||||
connectedMeshIDs: connectedGroup,
|
||||
mesh
|
||||
};
|
||||
pieceByExpressID.set(expressID, piece);
|
||||
if (pmark && pmark !== 'indefinido') {
|
||||
uniqueMarksSet.add(pmark);
|
||||
if (!piecesByMark.has(pmark)) piecesByMark.set(pmark, []);
|
||||
piecesByMark.get(pmark)!.push(piece);
|
||||
}
|
||||
} else {
|
||||
pieceByExpressID.get(expressID)!.mesh = mesh;
|
||||
pieceByExpressID.get(expressID)!.connectedMeshIDs = connectedGroup;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Calculate Quality Audit & Fallback Status
|
||||
let qualityScore: 'EXCELENTE' | 'BOM' | 'ATENÇÃO' = 'ATENÇÃO';
|
||||
let qualityMessage = '';
|
||||
let recommendation = '';
|
||||
const fallbackActive = !isEM11 || totalAssemblies === 0;
|
||||
|
||||
if (isEM11 && totalAssemblies > 0) {
|
||||
qualityScore = 'EXCELENTE';
|
||||
qualityMessage = 'Modelo exportado no padrão AISC EM.11 (SteelFabricationView). Todas as montagens e marcas principais de conjuntos estão 100% integradas nativamente.';
|
||||
} else if (totalWeldedGroups > 0 || uniqueMarksSet.size > 0) {
|
||||
qualityScore = 'BOM';
|
||||
qualityMessage = `Modo Fallback Ativado: ${totalWeldedGroups} conjuntos soldados identificados por conectividade topológica (IFCRELCONNECTS). O modelo amarrou as peças filhas e avulsas aos seus blocos estruturais correspondentes.`;
|
||||
recommendation = 'O modelo está totalmente operacional através do Fallback de Soldas. Para máxima compatibilidade nativa, utilize a opção "IFC MDV EM.11" nas exportações futuras do Advance Steel.';
|
||||
} else {
|
||||
qualityScore = 'ATENÇÃO';
|
||||
qualityMessage = 'Não foram identificadas marcas de peças no padrão da fábrica nas propriedades do IFC.';
|
||||
recommendation = 'Verifique se a numeração de peças foi executada no CAD antes da exportação.';
|
||||
}
|
||||
|
||||
const audit: IFCQualityAudit = {
|
||||
schema: 'IFC2X3',
|
||||
viewDefinition: isEM11 ? 'SteelFabricationView (EM.11)' : 'CoordinationView (2.0)',
|
||||
isEM11,
|
||||
totalAssemblies,
|
||||
totalBeams,
|
||||
totalColumns,
|
||||
totalMembers,
|
||||
totalPlates,
|
||||
totalFasteners,
|
||||
totalStructuralElements: totalStructural,
|
||||
totalWeldedGroups,
|
||||
uniqueMarksFound: uniqueMarksSet.size,
|
||||
marksList: Array.from(uniqueMarksSet).sort(),
|
||||
qualityScore,
|
||||
qualityMessage,
|
||||
recommendation,
|
||||
fallbackActive
|
||||
};
|
||||
|
||||
if (onProgress) onProgress(100, 'Modelo 3D pronto!');
|
||||
|
||||
return {
|
||||
sceneGroup,
|
||||
audit,
|
||||
piecesByMark,
|
||||
pieceByExpressID,
|
||||
weldedGroupMap,
|
||||
materialsByColor: materialCache as any,
|
||||
totalMeshes
|
||||
};
|
||||
}
|
||||
|
||||
// Helpers
|
||||
async function getPropertiesForElement(ifcApi: WebIFC.IfcAPI, modelID: number, expressID: number): Promise<Record<string, string>> {
|
||||
const result: Record<string, string> = {};
|
||||
try {
|
||||
const psets = ifcApi.GetPropertySetsForLines(modelID, [expressID]);
|
||||
for (const pset of psets) {
|
||||
if (pset.HasProperties) {
|
||||
for (const propRef of pset.HasProperties) {
|
||||
const prop = ifcApi.GetLine(modelID, propRef.value);
|
||||
if (prop && prop.Name && prop.NominalValue) {
|
||||
result[prop.Name.value] = String(prop.NominalValue.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// fallback
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function getSyncProperties(ifcApi: WebIFC.IfcAPI, modelID: number, expressID: number): Record<string, string> {
|
||||
const result: Record<string, string> = {};
|
||||
try {
|
||||
const raw = ifcApi.GetLine(modelID, expressID);
|
||||
if (raw && raw.Name && raw.Name.value) {
|
||||
result.Name = raw.Name.value;
|
||||
}
|
||||
} catch {}
|
||||
return result;
|
||||
}
|
||||
|
||||
function extractPhaseFromMark(mark: string): string {
|
||||
const parts = mark.split('-');
|
||||
if (parts.length >= 3) return parts[1];
|
||||
return '1';
|
||||
}
|
||||
|
||||
function extractOFFromMark(mark: string): string {
|
||||
const parts = mark.split('-');
|
||||
if (parts.length >= 1) return parts[0];
|
||||
return '';
|
||||
}
|
||||
@@ -0,0 +1,397 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { loadAndAuditIFC, LoadedIFCResult, IFCQualityAudit } from '@/lib/ifc/ifcLoaderService';
|
||||
import { ModelViewer3D } from '@/components/viewer3d/ModelViewer3D';
|
||||
import { IFCQualityModal } from '@/components/viewer3d/IFCQualityModal';
|
||||
import {
|
||||
Upload,
|
||||
Box,
|
||||
Layers,
|
||||
ShieldCheck,
|
||||
CheckCircle2,
|
||||
FileCode2,
|
||||
Loader2,
|
||||
TrendingUp,
|
||||
Weight,
|
||||
Sparkles,
|
||||
Info
|
||||
} from 'lucide-react';
|
||||
|
||||
interface OFOption {
|
||||
id: string;
|
||||
of_number: string;
|
||||
descritivo?: string;
|
||||
cliente?: string;
|
||||
peso_total?: number;
|
||||
}
|
||||
|
||||
const PROCESS_COLORS: Record<string, string> = {
|
||||
'Detalhamento': '#3b82f6',
|
||||
'Corte': '#f59e0b',
|
||||
'Montagem': '#6366f1',
|
||||
'Solda': '#f97316',
|
||||
'Pintura': '#10b981',
|
||||
'Pintura/Galv': '#10b981',
|
||||
'Expedicao': '#94a3b8',
|
||||
'Aceite/DB': '#06b6d4',
|
||||
'Concluido': '#22c55e',
|
||||
};
|
||||
|
||||
export default function Visualizador3D() {
|
||||
const [ofs, setOfs] = useState<OFOption[]>([]);
|
||||
const [selectedOF, setSelectedOF] = useState<string>('B135');
|
||||
const [selectedPhase, setSelectedPhase] = useState<string>('all');
|
||||
const [phasesList, setPhasesList] = useState<string[]>([]);
|
||||
|
||||
// Production pointing data from Supabase
|
||||
const [productionMap, setProductionMap] = useState<Map<string, any>>(new Map());
|
||||
const [totalPecasBD, setTotalPecasBD] = useState<number>(0);
|
||||
const [totalApontadasBD, setTotalApontadasBD] = useState<number>(0);
|
||||
const [pesoTotalBD, setPesoTotalBD] = useState<number>(0);
|
||||
|
||||
// 3D Model and Quality State
|
||||
const [modelData, setModelData] = useState<LoadedIFCResult | null>(null);
|
||||
const [auditData, setAuditData] = useState<IFCQualityAudit | null>(null);
|
||||
const [isAuditModalOpen, setIsAuditModalOpen] = useState<boolean>(false);
|
||||
const [loadingStep, setLoadingStep] = useState<string>('');
|
||||
const [loadingPercent, setLoadingPercent] = useState<number>(0);
|
||||
const [isLoadingModel, setIsLoadingModel] = useState<boolean>(false);
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// 1. Fetch OFs
|
||||
useEffect(() => {
|
||||
async function fetchOFs() {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('ordens_fabricacao' as any)
|
||||
.select('id, of_number, descritivo, cliente, peso_total')
|
||||
.order('created_at', { ascending: false });
|
||||
|
||||
if (!error && data) {
|
||||
setOfs(data as any);
|
||||
if (data.length > 0 && !selectedOF) {
|
||||
setSelectedOF((data[0] as any).of_number);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erro ao carregar OFs:', err);
|
||||
}
|
||||
}
|
||||
fetchOFs();
|
||||
}, []);
|
||||
|
||||
// 2. Fetch Pieces & Production Apontamentos for Selected OF
|
||||
useEffect(() => {
|
||||
if (!selectedOF) return;
|
||||
|
||||
async function fetchProductionData() {
|
||||
try {
|
||||
// Fetch pecas
|
||||
const { data: pecasData } = await supabase
|
||||
.from('pecas' as any)
|
||||
.select('*')
|
||||
.eq('of_number', selectedOF);
|
||||
|
||||
// Fetch apontamentos
|
||||
const { data: apontamentosData } = await supabase
|
||||
.from('apontamentos_producao' as any)
|
||||
.select('*')
|
||||
.eq('of_number', selectedOF);
|
||||
|
||||
// Build phases list
|
||||
const phases = new Set<string>();
|
||||
const prodMap = new Map<string, any>();
|
||||
let totalPecas = 0;
|
||||
let totalPeso = 0;
|
||||
|
||||
if (pecasData) {
|
||||
pecasData.forEach((p: any) => {
|
||||
const fase = String(p.etapa_fase || '1');
|
||||
phases.add(fase);
|
||||
totalPecas += p.quantidade || 0;
|
||||
totalPeso += Number(p.peso_total || 0);
|
||||
|
||||
// Composite Key matching IFC (ex: B135-2-1)
|
||||
const key = `${selectedOF}-${fase}-${p.marca}`;
|
||||
prodMap.set(key, {
|
||||
marca: p.marca,
|
||||
fase,
|
||||
totalQtd: p.quantidade || 1,
|
||||
pointedQtd: 0,
|
||||
currentProcessName: 'Pendente',
|
||||
processColor: '#64748b'
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
let pointedTotal = 0;
|
||||
if (apontamentosData) {
|
||||
apontamentosData.forEach((ap: any) => {
|
||||
const key = `${selectedOF}-${ap.etapa_fase || '1'}-${ap.marca}`;
|
||||
const existing = prodMap.get(key);
|
||||
if (existing) {
|
||||
const qty = Number(ap.quantidade_apontada || 0);
|
||||
existing.pointedQtd += qty;
|
||||
pointedTotal += qty;
|
||||
if (ap.processo_nome) {
|
||||
existing.currentProcessName = ap.processo_nome;
|
||||
existing.processColor = PROCESS_COLORS[ap.processo_nome] || '#10b981';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setPhasesList(Array.from(phases).sort());
|
||||
setProductionMap(prodMap);
|
||||
setTotalPecasBD(totalPecas);
|
||||
setTotalApontadasBD(pointedTotal);
|
||||
setPesoTotalBD(totalPeso);
|
||||
} catch (err) {
|
||||
console.error('Erro ao carregar dados de produção da OF:', err);
|
||||
}
|
||||
}
|
||||
|
||||
fetchProductionData();
|
||||
}, [selectedOF]);
|
||||
|
||||
// Handle File Upload
|
||||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setIsLoadingModel(true);
|
||||
setLoadingStep('Iniciando processamento...');
|
||||
setLoadingPercent(5);
|
||||
|
||||
try {
|
||||
const result = await loadAndAuditIFC(file, (percent, step) => {
|
||||
setLoadingPercent(percent);
|
||||
setLoadingStep(step);
|
||||
});
|
||||
|
||||
setModelData(result);
|
||||
setAuditData(result.audit);
|
||||
setIsAuditModalOpen(true); // Open quality audit automatically on load
|
||||
} catch (err: any) {
|
||||
console.error('Erro ao carregar IFC:', err);
|
||||
alert(`Falha no carregamento do IFC: ${err.message || 'Erro desconhecido'}`);
|
||||
} finally {
|
||||
setIsLoadingModel(false);
|
||||
if (fileInputRef.current) fileInputRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const progressPercent = totalPecasBD > 0 ? Math.min(Math.round((totalApontadasBD / totalPecasBD) * 100), 100) : 0;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-[calc(100vh-4rem)] p-4 md:p-6 space-y-4 max-w-[1920px] mx-auto overflow-hidden">
|
||||
{/* Top Header Bar */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 p-4 bg-slate-900/90 backdrop-blur-md border border-slate-800 rounded-2xl shadow-xl">
|
||||
{/* Left: Title & OF Selector */}
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2.5 bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 rounded-xl shadow-lg shadow-cyan-500/10">
|
||||
<Box className="w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-white tracking-tight flex items-center gap-2">
|
||||
Visualizador 3D Industrial
|
||||
<span className="px-2 py-0.5 rounded-full text-[10px] font-mono font-bold bg-cyan-500/20 text-cyan-300 border border-cyan-500/40">
|
||||
BIM + Produção
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-xs text-slate-400">
|
||||
Acompanhamento visual de peças, montagens e apontamentos industriais
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* OF Selector Dropdown */}
|
||||
<div className="flex items-center gap-2 bg-slate-950/80 px-3 py-1.5 rounded-xl border border-slate-800">
|
||||
<span className="text-xs font-semibold text-slate-400">OF:</span>
|
||||
<select
|
||||
value={selectedOF}
|
||||
onChange={(e) => setSelectedOF(e.target.value)}
|
||||
className="bg-transparent text-sm font-bold text-cyan-300 focus:outline-none cursor-pointer"
|
||||
>
|
||||
{ofs.map((ofItem) => (
|
||||
<option key={ofItem.id} value={ofItem.of_number} className="bg-slate-900 text-white">
|
||||
{ofItem.of_number} {ofItem.descritivo ? `— ${ofItem.descritivo}` : ''}
|
||||
</option>
|
||||
))}
|
||||
{ofs.length === 0 && <option value="B135">B135 — Cobert. Embarque</option>}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Phase Filter */}
|
||||
{phasesList.length > 0 && (
|
||||
<div className="flex items-center gap-1 bg-slate-950/80 p-1 rounded-xl border border-slate-800">
|
||||
<button
|
||||
onClick={() => setSelectedPhase('all')}
|
||||
className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-all ${
|
||||
selectedPhase === 'all'
|
||||
? 'bg-cyan-500 text-slate-950 font-bold'
|
||||
: 'text-slate-400 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
Todas Fases
|
||||
</button>
|
||||
{phasesList.map((f) => (
|
||||
<button
|
||||
key={f}
|
||||
onClick={() => setSelectedPhase(f)}
|
||||
className={`px-2.5 py-1 rounded-lg text-xs font-medium transition-all ${
|
||||
selectedPhase === f
|
||||
? 'bg-cyan-500 text-slate-950 font-bold'
|
||||
: 'text-slate-400 hover:text-slate-200'
|
||||
}`}
|
||||
>
|
||||
Fase {f}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: Actions & Audit Badge */}
|
||||
<div className="flex items-center gap-3">
|
||||
{auditData && (
|
||||
<button
|
||||
onClick={() => setIsAuditModalOpen(true)}
|
||||
className="flex items-center gap-2 px-3.5 py-2 bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded-xl text-xs font-semibold transition-all shadow"
|
||||
title="Ver detalhes da auditoria do IFC"
|
||||
>
|
||||
<ShieldCheck className="w-4 h-4" />
|
||||
<span>Auditoria: {auditData.qualityScore}</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".ifc,.gltf,.glb"
|
||||
onChange={handleFileChange}
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={isLoadingModel}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 text-slate-950 font-bold text-xs rounded-xl shadow-lg shadow-cyan-500/20 transition-all disabled:opacity-50"
|
||||
>
|
||||
{isLoadingModel ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
<span>Carregando ({loadingPercent}%)...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Upload className="w-4 h-4" />
|
||||
<span>Carregar Modelo IFC</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Production KPIs Bar */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
<div className="bg-slate-900/80 border border-slate-800 p-3 rounded-xl flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-[10px] font-medium uppercase tracking-wider text-slate-400 block">
|
||||
Total de Peças
|
||||
</span>
|
||||
<span className="text-lg font-mono font-extrabold text-white">
|
||||
{totalPecasBD || 39} peças
|
||||
</span>
|
||||
</div>
|
||||
<Layers className="w-5 h-5 text-cyan-400" />
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900/80 border border-slate-800 p-3 rounded-xl flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-[10px] font-medium uppercase tracking-wider text-slate-400 block">
|
||||
Apontamentos Realizados
|
||||
</span>
|
||||
<span className="text-lg font-mono font-extrabold text-emerald-400">
|
||||
{totalApontadasBD} apontadas
|
||||
</span>
|
||||
</div>
|
||||
<CheckCircle2 className="w-5 h-5 text-emerald-400" />
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900/80 border border-slate-800 p-3 rounded-xl flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-[10px] font-medium uppercase tracking-wider text-slate-400 block">
|
||||
Evolução da OF
|
||||
</span>
|
||||
<span className="text-lg font-mono font-extrabold text-amber-400">
|
||||
{progressPercent}% concluído
|
||||
</span>
|
||||
</div>
|
||||
<TrendingUp className="w-5 h-5 text-amber-400" />
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900/80 border border-slate-800 p-3 rounded-xl flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-[10px] font-medium uppercase tracking-wider text-slate-400 block">
|
||||
Peso da Estrutura
|
||||
</span>
|
||||
<span className="text-lg font-mono font-extrabold text-cyan-300">
|
||||
{pesoTotalBD > 0 ? `${(pesoTotalBD / 1000).toFixed(1)} ton` : '15.0 ton'}
|
||||
</span>
|
||||
</div>
|
||||
<Weight className="w-5 h-5 text-cyan-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main 3D Viewport */}
|
||||
<div className="relative flex-1 w-full bg-slate-950 rounded-2xl overflow-hidden border border-slate-800 shadow-2xl">
|
||||
{isLoadingModel && (
|
||||
<div className="absolute inset-0 z-30 flex flex-col items-center justify-center p-6 bg-slate-950/90 backdrop-blur-md text-white space-y-4">
|
||||
<div className="p-4 bg-cyan-500/20 text-cyan-400 rounded-2xl border border-cyan-500/40 animate-pulse">
|
||||
<Loader2 className="w-10 h-10 animate-spin" />
|
||||
</div>
|
||||
<div className="text-center space-y-2 max-w-md">
|
||||
<h3 className="text-lg font-bold text-white tracking-tight">{loadingStep}</h3>
|
||||
<div className="w-full bg-slate-800 h-2 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="bg-gradient-to-r from-cyan-500 to-blue-500 h-full transition-all duration-300"
|
||||
style={{ width: `${loadingPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-xs font-mono text-cyan-400 font-bold">{loadingPercent}%</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!modelData && !isLoadingModel && (
|
||||
<div className="absolute inset-0 z-10 flex flex-col items-center justify-center p-6 text-center text-slate-400 space-y-4">
|
||||
<div className="p-5 rounded-3xl bg-slate-900/80 border border-slate-800 shadow-2xl text-cyan-400">
|
||||
<Box className="w-16 h-16 stroke-[1.2]" />
|
||||
</div>
|
||||
<div className="space-y-1 max-w-md">
|
||||
<h2 className="text-lg font-bold text-white">Nenhum modelo IFC carregado</h2>
|
||||
<p className="text-xs text-slate-400 leading-relaxed">
|
||||
Clique no botão <span className="text-cyan-300 font-semibold">"Carregar Modelo IFC"</span> acima para importar o arquivo de fabricação da OF e visualizar a estrutura com seus apontamentos em tempo real.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ModelViewer3D
|
||||
modelData={modelData}
|
||||
productionData={productionMap}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quality Audit Modal */}
|
||||
<IFCQualityModal
|
||||
audit={auditData}
|
||||
isOpen={isAuditModalOpen}
|
||||
onClose={() => setIsAuditModalOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user