'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const WATER_LEVEL = 300; const PILE_WIDTH = 120; const PILE_X = VIEW_WIDTH / 2 - PILE_WIDTH / 2; // Utility for random numbers const random = (min, max) => Math.random() * (max - min) + min; export default function ChlorideCorrosionAnimation() { const [frame, setFrame] = useState(0); const [phase, setPhase] = useState('diffusion'); // diffusion, depassivation, expansion, crack const [damageLevel, setDamageLevel] = useState(0); // 0 to 100 // Animation loop useEffect(() => { let animationFrameId; const animate = () => { setFrame(f => f + 1); // Cycle logic const cycleLength = 1200; // frames const currentCycle = frame % cycleLength; if (currentCycle < 400) { setPhase('diffusion'); setDamageLevel((currentCycle / 400) * 30); } else if (currentCycle < 700) { setPhase('depassivation'); setDamageLevel(30 + ((currentCycle - 400) / 300) * 30); } else if (currentCycle < 1000) { setPhase('expansion'); setDamageLevel(60 + ((currentCycle - 700) / 300) * 40); } else { setPhase('reset'); // Fade out/Reset } animationFrameId = requestAnimationFrame(animate); }; animate(); return () => cancelAnimationFrame(animationFrameId); }, [frame]); return ( ); } // --- Sub Components --- const GridBackground = () => ( {Array.from({ length: 20 }).map((_, i) => ( ))} {Array.from({ length: 12 }).map((_, i) => ( ))} ); const SolarPanel = () => { return ( {/* Support Structure */} {/* Panel Tilt */} {/* Cells */} {Array.from({length: 6}).map((_, i) => ( ))} {/* Reflection/Sheen */} {/* Energy Flow Animation */} ); }; const ConcretePile = ({ damageLevel, phase }) => { const isXRay = phase === 'depassivation' || phase === 'expansion'; return ( {/* Pile Body */} {/* Pile Markings */} C80 CONCRETE {/* Internal Rebar (Visible in X-Ray mode or slightly transparent) */} {/* Vertical Rebars */} 30 ? "#ef4444" : "#334155"} strokeWidth="6" strokeDasharray={damageLevel > 30 ? "5 2" : "none"} /> 30 ? "#ef4444" : "#334155"} strokeWidth="6" strokeDasharray={damageLevel > 30 ? "5 2" : "none"} /> {/* Stirrups (Horizontal rings) */} {Array.from({length: 8}).map((_, i) => ( 50 ? "#ef4444" : "#475569"} opacity="0.8" /> ))} {/* Rust Expansion Visuals */} {damageLevel > 40 && ( )} {/* Cracks (Appear in late stage) */} 70 ? (damageLevel - 70) / 30 : 0} stroke="#1e293b" strokeWidth="2" fill="none"> {/* X-Ray Scanner Effect */} {isXRay && ( )} ); }; const Seawater = ({ frame }) => { // Wave animation logic const wavePath = useMemo(() => { let d = `M 0,${WATER_LEVEL} `; for (let x = 0; x <= VIEW_WIDTH; x += 20) { const y = Math.sin((x + frame * 2) * 0.01) * 10 + Math.sin((x - frame) * 0.02) * 5; d += `L ${x},${WATER_LEVEL + y} `; } d += `L ${VIEW_WIDTH},${VIEW_HEIGHT} L 0,${VIEW_HEIGHT} Z`; return d; }, [frame]); return ( SEAWATER LEVEL ); }; const ChlorideIons = ({ frame, phase }) => { // Generate stable random particles const particles = useMemo(() => { return Array.from({ length: 60 }).map(() => ({ x: random(0, VIEW_WIDTH), y: random(WATER_LEVEL + 50, VIEW_HEIGHT - 50), speed: random(0.5, 2), offset: random(0, 100), targetY: random(WATER_LEVEL + 100, VIEW_HEIGHT - 50) })); }, []); return ( {particles.map((p, i) => { // Movement logic let currentX = p.x; let currentY = p.y; // Brownian-ish motion const driftX = Math.sin((frame + p.offset) * 0.05) * 20; const driftY = Math.cos((frame + p.offset) * 0.05) * 20; // Attraction to pile logic based on phase let scale = 1; let opacity = 0.6; let color = "#84cc16"; // Cl- Green if (phase === 'diffusion') { // Move towards center const distToCenter = currentX - (VIEW_WIDTH / 2); if (Math.abs(distToCenter) > 60) { currentX -= (distToCenter / Math.abs(distToCenter)) * (frame % 400) * 0.5 * p.speed; } } else if (phase === 'depassivation' || phase === 'expansion') { // Clumped around pile const distToCenter = currentX - (VIEW_WIDTH / 2); if (Math.abs(distToCenter) > 40) { // Penetrated currentX = (VIEW_WIDTH/2) + (distToCenter > 0 ? 40 : -40) + driftX * 0.1; } else { // Inside concrete currentX = (VIEW_WIDTH/2) + driftX * 0.5; color = "#facc15"; // Warning yellow opacity = 0; // Hide some inside if (i % 3 === 0) opacity = 0.8; // Show some penetrating } } else if (phase === 'reset') { opacity = 0; } // Don't render if too far inside during initial phase if (phase === 'diffusion' && Math.abs(currentX - VIEW_WIDTH/2) < 60) { opacity = 0; } return ( {i % 5 === 0 && opacity > 0 && ( Cl- )} ); })} ); }; const HUD = ({ damageLevel, phase }) => { const getPhaseText = () => { switch(phase) { case 'diffusion': return '阶段一：氯离子扩散 (Diffusion)'; case 'depassivation': return '阶段二：钢筋钝化膜破坏 (Depassivation)'; case 'expansion': return '阶段三：锈蚀膨胀与开裂 (Corrosion & Cracking)'; default: return '系统重置中...'; } }; const getPhaseDesc = () => { switch(phase) { case 'diffusion': return 'Cl- 离子穿透 C80 混凝土保护层'; case 'depassivation': return 'Cl- 浓度达到临界值，引发电化学反应'; case 'expansion': return '铁锈体积膨胀 2-4 倍，导致混凝土保护层胀裂'; default: return ''; } }; return ( {/* Title Block */} 近海光伏 C80 管桩腐蚀监测模拟环境：高盐雾/海水浸泡区 {/* Status Panel - Right Side */} 实时状态监控 {/* Phase Indicator */} {getPhaseText()} {getPhaseDesc()} {/* Health Bar */} 管桩结构健康度 60 ? "#ef4444" : "#10b981"} rx="2" /> 60 ? "#ef4444" : "#10b981"} fontSize="11" textAnchor="end"> {(100 - damageLevel).toFixed(1)}% {/* Chemical Formula Annotations - Dynamic */} {phase === 'depassivation' && ( Fe → Fe²⁺ + 2e⁻ Anodic Reaction )} ); };