import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; // ----------------------------------------------------------------------------- // Constants & Configuration // ----------------------------------------------------------------------------- const WIDTH = 1200; const HEIGHT = 700; const BG_COLOR = '#0f172a'; // Slate-900 const PRIMARY_COLOR = '#38bdf8'; // Sky-400 const ACCENT_COLOR = '#f472b6'; // Pink-400 const SUCCESS_COLOR = '#4ade80'; // Green-400 const WARNING_COLOR = '#fbbf24'; // Amber-400 // Scenario Definitions based on user requirements const SCENARIOS = [ { id: 'gis', title: 'GIS与电力设备监测', sub: '六氟化硫(SF6)分解物 / 变压器油中气体', targets: ['SO2', 'H2S', 'CO', 'CF4'], color: '#38bdf8', // Blue icon: '⚡' }, { id: 'voc', title: '大气环境与工业安防', sub: '挥发性有机物(VOCs) / 苯系物', targets: ['苯', '甲苯', '二甲苯', '丙酮'], color: '#fbbf24', // Amber icon: '🏭' }, { id: 'water_food', title: '水质安全与食品检测', sub: '有机污染物 / 农残 / 添加剂', targets: ['有机磷', '氨基甲酸酯', '抗生素', '塑化剂'], color: '#4ade80', // Green icon: '💧' }, { id: 'bio_security', title: '刑侦防化与临床生化', sub: '毒品爆炸物 / 肿瘤标志物', targets: ['甲基苯丙胺', 'TNT', '生物碱', '代谢物'], color: '#f472b6', // Pink icon: '🧬' } ]; // Particle States const P_STATE_INLET = 0; // Moving from inlet to trap const P_STATE_TRAP = 1; // Oscillating in the ion trap const P_STATE_EJECT = 2; // Moving to detector const P_STATE_DETECTED = 3; // Hit detector, triggering signal // ----------------------------------------------------------------------------- // Helper Functions // ----------------------------------------------------------------------------- const randomRange = (min, max) => Math.random() * (max - min) + min; // Generate a smooth random path for the spectrum graph const generateSpectrum = (t, activeTargets) => { const points = []; const baseline = 600; const numPoints = 100; const step = 400 / numPoints; // Width 400px for (let i = 0; i < numPoints; i++) { let y = baseline; // Add noise y -= Math.sin(i * 0.5 + t * 0.1) * 2; y -= Math.random() * 2; // Create peaks based on active targets (simulated) // We create fixed peaks at specific positions to simulate mass spectrum const peaks = [20, 45, 70, 85]; peaks.forEach((p, idx) => { // If we are "detecting", make peaks jump const dist = Math.abs(i - p); if (dist < 5) { const height = 80 * Math.exp(-dist * dist / 5); // Pulse effect const pulse = Math.sin(t * 0.2 + idx) > 0 ? 1 : 0.5; y -= height * pulse; } }); points.push(`${800 + i * step},${y}`); // Right side panel coordinates } return points.join(' '); }; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export default function IonTrapMonitor() { // --------------------------------------------------------------------------- // State & Refs // --------------------------------------------------------------------------- // We use a ref for the animation loop state to avoid closure staleness issues const stateRef = useRef({ particles: [], scenarioIndex: 0, scenarioTimer: 0, detectedList: [], frame: 0, ppbValue: 0.1, }); // This state is used ONLY to trigger re-renders. // We don't read from it for logic, we read from stateRef. const [, setTick] = useState(0); // --------------------------------------------------------------------------- // Animation Logic // --------------------------------------------------------------------------- useEffect(() => { let rafId; const MAX_PARTICLES = 40; const animate = () => { const state = stateRef.current; state.frame++; state.scenarioTimer++; // 1. Scenario Management (Switch every 400 frames ~ 6-7 seconds) if (state.scenarioTimer > 400) { state.scenarioTimer = 0; state.scenarioIndex = (state.scenarioIndex + 1) % SCENARIOS.length; state.detectedList = []; // Clear list for new scenario } const currentScenario = SCENARIOS[state.scenarioIndex]; // 2. Spawn Particles // Spawn more frequently at the start of a scenario if (state.particles.length < MAX_PARTICLES && state.frame % 10 === 0) { // Pick a target molecule randomly from the current scenario const targetName = currentScenario.targets[Math.floor(Math.random() * currentScenario.targets.length)]; state.particles.push({ id: Math.random().toString(36).substr(2, 9), x: 50, // Start at left inlet y: 350 + randomRange(-20, 20), vx: randomRange(3, 5), vy: 0, state: P_STATE_INLET, color: currentScenario.color, targetName: targetName, trapTime: 0, maxTrapTime: randomRange(60, 120), // How long to stay in trap phase: Math.random() * Math.PI * 2 }); } // 3. Update Particles // Center of Trap is approx (450, 350) const TRAP_CX = 450; const TRAP_CY = 350; for (let i = state.particles.length - 1; i >= 0; i--) { const p = state.particles[i]; if (p.state === P_STATE_INLET) { // Move towards trap const dx = TRAP_CX - p.x; const dy = TRAP_CY - p.y; const dist = Math.sqrt(dx*dx + dy*dy); if (dist < 40) { p.state = P_STATE_TRAP; } else { // Easing towards center p.x += p.vx; p.y += (TRAP_CY - p.y) * 0.05; } } else if (p.state === P_STATE_TRAP) { // Oscillate in trap (Lissajous figure simulation for Ion Trap) p.trapTime++; p.phase += 0.15; // Spiral radius tightens then expands slightly const radius = 30 * Math.sin(p.trapTime * 0.05) + 10; p.x = TRAP_CX + Math.cos(p.phase) * radius * 1.5; // Wider horizontally p.y = TRAP_CY + Math.sin(p.phase * 1.3) * radius; // 3D effect tilt if (p.trapTime > p.maxTrapTime) { p.state = P_STATE_EJECT; } } else if (p.state === P_STATE_EJECT) { // Shoot towards detector (Right side: x=750) p.x += 12; // Fast eject // Add some wave motion p.y = TRAP_CY + Math.sin(p.x * 0.05) * 10; if (p.x > 750) { p.state = P_STATE_DETECTED; } } else if (p.state === P_STATE_DETECTED) { // Trigger detection UI logic if (state.detectedList.length < 6) { // Add to list if not full, ensure unique-ish visual update const exists = state.detectedList.find(d => d.name === p.targetName); if (!exists || Math.random() > 0.7) { state.detectedList.unshift({ name: p.targetName, time: new Date().toLocaleTimeString(), conc: (Math.random() * 0.9 + 0.1).toFixed(2) // 0.1 - 1.0 ppb }); if (state.detectedList.length > 5) state.detectedList.pop(); } } // Remove particle state.particles.splice(i, 1); } } // 4. Update Global PPB Simulation // Smoothly interpolate between 0.1 and 1.0 const targetPPB = 0.1 + (Math.sin(state.frame * 0.01) + 1) * 0.45; state.ppbValue = targetPPB; setTick(prev => prev + 1); // Trigger React Render rafId = requestAnimationFrame(animate); }; rafId = requestAnimationFrame(animate); return () => { cancelAnimationFrame(rafId); }; }, []); // --------------------------------------------------------------------------- // Render Helpers // --------------------------------------------------------------------------- const { particles, scenarioIndex, detectedList, frame, ppbValue } = stateRef.current; const currentScenario = SCENARIOS[scenarioIndex]; // Dynamic Spectrum Path const spectrumPath = useMemo(() => generateSpectrum(frame, currentScenario.targets), [frame, currentScenario]); // Trap Rings (Visual) const renderTrapRings = () => { return ( {/* Back Electrodes */} {/* Dynamic Field Lines (faint) */} {/* Front Electrodes (Hyperbolic surfaces simplified) */} ); }; return (

); }