'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ----------------------------------------------------------------------------- // Constants & Config // ----------------------------------------------------------------------------- const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const NUM_SUPPORTS = 20; // 液压支架数量 const SUPPORT_WIDTH = 40; const SUPPORT_GAP = 10; const TOTAL_FACE_WIDTH = NUM_SUPPORTS * (SUPPORT_WIDTH + SUPPORT_GAP); const SHEARER_SPEED = 1.5; // 采煤机速度 const ANIMATION_TICK_MS = 16; // ~60fps // Colors const COLOR_BG = '#0f172a'; const COLOR_COAL = '#1e293b'; const COLOR_COAL_FACE = '#0f172a'; // Deep cut const COLOR_SHEARER = '#06b6d4'; // Cyan-500 const COLOR_SHEARER_DRUM = '#ef4444'; // Red-500 const COLOR_SUPPORT_BODY = '#475569'; // Slate-600 const COLOR_SUPPORT_ACTIVE = '#22c55e'; // Green-500 (Locked/Supporting) const COLOR_SUPPORT_MOVING = '#eab308'; // Yellow-500 (Advancing) const COLOR_CONVEYOR = '#94a3b8'; // Slate-400 const COLOR_HUD_TEXT = '#38bdf8'; // Sky-400 // ----------------------------------------------------------------------------- // Helper Functions // ----------------------------------------------------------------------------- const generateSparks = (x: number, y: number, count: number) => { return Array.from({ length: count }).map((_, i) => ({ id: Math.random(), x, y, vx: (Math.random() - 0.5) * 10, vy: (Math.random() - 0.5) * 10, life: 1.0, color: Math.random() > 0.5 ? '#fbbf24' : '#ffffff', })); }; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export default function CoalMiningAnimation() { // --- State --- const [shearerPos, setShearerPos] = useState(0); // 0 to TOTAL_FACE_WIDTH const [direction, setDirection] = useState(1); // 1 = Right, -1 = Left // Support states: Each support has a current extension (Y offset) and a status // offset 0 = fully back (initial), offset 40 = advanced (pushed forward) const [supports, setSupports] = useState(() => Array.from({ length: NUM_SUPPORTS }).map((_, i) => ({ id: i, x: i * (SUPPORT_WIDTH + SUPPORT_GAP) + 100, // Start with some padding offset: 0, targetOffset: 0, pressure: 30 + Math.random() * 5, // MPa status: 'LOCKED' as 'LOCKED' | 'UNLOADING' | 'ADVANCING' | 'PUSHING', })) ); const [particles, setParticles] = useState([]); const [time, setTime] = useState(0); // Refs for animation loop logic to avoid closure staleness const stateRef = useRef({ shearerPos, direction, supports, }); // Sync ref with state useEffect(() => { stateRef.current = { shearerPos, direction, supports }; }, [shearerPos, direction, supports]); // --- Animation Loop --- useEffect(() => { let animationFrameId: number; const loop = () => { const { shearerPos, direction, supports } = stateRef.current; // 1. Move Shearer let newShearerPos = shearerPos + direction * SHEARER_SPEED; let newDirection = direction; // Boundary check & Turn around if (newShearerPos > TOTAL_FACE_WIDTH - 50) { newDirection = -1; // When turning around, reset supports conceptually for the loop (in reality continuous) // For this demo, we'll keep the snake motion logic continuous } else if (newShearerPos < 0) { newDirection = 1; } // 2. Logic: Coordinated Control (The "Snake") // Logic: As shearer passes support[i], support[i] waits X distance, then pushes conveyor, then pulls self. // Simplify: If shearer is > 150px away in the direction of travel, the support should be at "target". // But since we want to show the "cut", let's say: // - Area ahead of shearer: Old position (Offset 0) // - Area immediately behind shearer: Pushing Conveyor (Snake) // - Area further behind: Advancing Support const updatedSupports = supports.map((s) => { let newS = { ...s }; const distToShearer = newShearerPos - s.x; // Define zones relative to shearer const IS_BEHIND = direction === 1 ? distToShearer > 100 : distToShearer < -100; const IS_FAR_BEHIND = direction === 1 ? distToShearer > 250 : distToShearer < -250; const IS_AHEAD = direction === 1 ? distToShearer < 0 : distToShearer > 0; // Reset Logic for loop: If shearer is far away and we switched direction, reset slowly // For the visual demo, we toggle between offset 0 and 60 based on shearer pass let desiredOffset = newS.targetOffset; // Simple State Machine for Visuals if (IS_BEHIND && !IS_FAR_BEHIND) { // Snake zone (Conveyor pushes out) desiredOffset = 30; newS.status = 'PUSHING'; newS.pressure = 25; // Lower pressure while moving parts } else if (IS_FAR_BEHIND) { // Support advances to meet conveyor desiredOffset = 60; newS.status = 'ADVANCING'; // Once fully advanced, it locks if (Math.abs(s.offset - 60) < 1) { newS.status = 'LOCKED'; newS.pressure = 38 + Math.sin(Date.now() / 1000 + s.id) * 2; // High pressure } } else if (IS_AHEAD) { // Ahead of shearer, waiting desiredOffset = 0; newS.status = 'LOCKED'; newS.pressure = 40; } // Smooth interpolation of offset (Hydraulic movement is slow) const diff = desiredOffset - newS.offset; newS.offset += diff * 0.05; return newS; }); // 3. Particles (Coal dust/Sparks) let newParticles = particles .map(p => ({ ...p, x: p.x + p.vx, y: p.y + p.vy, life: p.life - 0.05 })) .filter(p => p.life > 0); // Add new particles at shearer drums if (Math.random() > 0.5) { const drumY = 300; // Base Y // Interpolate Y based on where the shearer is (tracking the conveyor curve) // For simplicity, sparks emit from the shearer visual center newParticles = [...newParticles, ...generateSparks(newShearerPos + 100, 300, 2)]; } // Update State setShearerPos(newShearerPos); setDirection(newDirection); setSupports(updatedSupports); setParticles(newParticles); setTime(prev => prev + 1); animationFrameId = requestAnimationFrame(loop); }; animationFrameId = requestAnimationFrame(loop); return () => cancelAnimationFrame(animationFrameId); }, [particles]); // Dependency on particles to trigger re-render, though refs handle logic // --- Render Helpers --- // Calculate Conveyor Path (Smooth curve connecting support heads) const conveyorPath = useMemo(() => { if (supports.length === 0) return ''; // The conveyor sits at the tip of the supports extension // Base Y is around 300. Offset subtracts Y (moves up towards coal wall) let d = `M ${supports[0].x} ${300 - supports[0].offset}`; for (let i = 1; i < supports.length; i++) { // Bezier curve for smoother snake const prev = supports[i-1]; const curr = supports[i]; const midX = (prev.x + curr.x) / 2; d += ` L ${curr.x} ${300 - curr.offset}`; } return d; }, [supports]); // Determine shearer Y based on interpolation of supports at current X const getShearerY = () => { // Find index const index = Math.floor((shearerPos - 100) / (SUPPORT_WIDTH + SUPPORT_GAP)); const safeIndex = Math.max(0, Math.min(index, NUM_SUPPORTS - 1)); const nextIndex = Math.min(safeIndex + 1, NUM_SUPPORTS - 1); const s1 = supports[safeIndex]; const s2 = supports[nextIndex]; if (!s1 || !s2) return 300; const ratio = (shearerPos - s1.x) / ((SUPPORT_WIDTH + SUPPORT_GAP)); const y1 = 300 - s1.offset; const y2 = 300 - s2.offset; return y1 + (y2 - y1) * ratio; }; const shearerY = getShearerY(); return (

); }