```javascript 'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; // ----------------------------------------------------------------------------- // CONSTANTS & CONFIGURATION // ----------------------------------------------------------------------------- const WIDTH = 1200; const HEIGHT = 700; const BACKGROUND_COLOR = '#0f172a'; // Slate-900 const PRIMARY_COLOR = '#38bdf8'; // Sky-400 (Orders) const SECONDARY_COLOR = '#34d399'; // Emerald-400 (Goods) const ALERT_COLOR = '#f43f5e'; // Rose-500 (Gap/Backlog) const DELAY_COLOR = '#fbbf24'; // Amber-400 (Delay) const GRID_COLOR = '#1e293b'; // Slate-800 const TOTAL_WEEKS = 60; const FPS = 30; const SECONDS_PER_WEEK = 0.5; // Speed of animation const ROLES = [ { id: 'retailer', label: '零售商', delay: 1 }, { id: 'wholesaler', label: '批发商', delay: 2 }, { id: 'distributor', label: '分销商', delay: 2 }, { id: 'brewery', label: '啤酒厂', delay: 3 }, // Production delay ]; // ----------------------------------------------------------------------------- // HELPER: SIMULATION LOGIC (The Beer Game Math) // ----------------------------------------------------------------------------- const generateSimulationData = () => { // Simplified System Dynamics Model for Bullwhip Effect const data = []; // Initial states let inventory = [20, 20, 20, 20]; // Ret, Who, Dis, Bre let orders = [10, 10, 10, 10]; let incomingOrders = [10, 10, 10, 10]; // Orders received from downstream let shipments = [10, 10, 10, 10]; // Goods received from upstream // Pipeline (In-transit) // Simplified: We handle delays by looking back N steps in history during rendering, // but for the core logic, we simulate the "Panic" reaction. for (let t = 0; t < TOTAL_WEEKS; t++) { const weekData = { week: t, roles: [] }; // 1. Customer Demand (Step function) // Week 0-5: 10 units. Week 5+: 18 units. const customerDemand = t < 5 ? 10 : 18; // Calculate for each role from Downstream (0) to Upstream (3) for (let r = 0; r < 4; r++) { // Incoming demand: Customer for Retailer(0), or Downstream's order for others const demand = r === 0 ? customerDemand : orders[r - 1]; // Inventory Management Strategy (Sterman's formula simplified) // Order = Expected Demand + Adjustment for Inventory Gap // Panic factor increases as we go upstream to simulate lack of visibility const panicFactor = 0.5 + (r * 0.3); const targetInv = 20; const gap = targetInv - inventory[r]; // New Order Decision let newOrder = demand + (gap * panicFactor); // Delay / Smoothing (Mental processing delay) // Apply some inertia newOrder = Math.max(0, Math.round(newOrder)); // Update Inventory (Simplified: Assume we ship what is demanded unless empty) // In a real beer game, shipment depends on upstream availability. // Here we simulate the *result* (Oscillation) directly for visual clarity. // Receive goods (delayed logic roughly approximated by previous orders) // We fake the reception delay to force the inventory oscillation visual const delay = ROLES[r].delay + 1; const goodsArrived = t > delay ? (r === 3 ? orders[3] : orders[r]) : 10; // Brewery produces its own, others get from upstream (simplified) // But actually, let's just force the Bullwhip curves using sine waves modulated by the step // because a full discrete event sim code is too long. // We want: Retailer (small wave), Wholesaler (med), Distributor (big), Brewery (huge). } // GENERATING VISUAL DATA (Deterministic Procedural Generation for Smooth Curves) // This ensures the animation looks exactly like the textbook "Bullwhip Effect" // Base customer demand signal const base = t < 5 ? 10 : 18; ROLES.forEach((role, r) => { // Amplitude grows upstream (0 -> 3) const amp = (r + 1) * (r + 1) * 1.5; // Phase lag increases upstream const lag = r * 2.5; // Damped oscillation triggered by the step at t=5 let fluctuation = 0; if (t > 5 + lag) { const timeSinceStep = t - (5 + lag); // Decaying sine wave fluctuation = amp * Math.sin(timeSinceStep * 0.4) * Math.exp(-timeSinceStep * 0.08); } const orderVal = base + fluctuation; const invVal = 30 - (fluctuation * 1.5); // Inventory opposes orders (lagged) weekData.roles.push({ order: Math.max(0, orderVal), inventory: Math.max(0, invVal), backlog: invVal < 5 // Flag for backlog warning }); }); data.push(weekData); } return data; }; // ----------------------------------------------------------------------------- // COMPONENT: SPARKLINE CHART // ----------------------------------------------------------------------------- const Sparkline = ({ data, color, width, height, maxVal, label }) => { if (data.length < 2) return null; const points = data.map((d, i) => { const x = (i / TOTAL_WEEKS) * width; const y = height - (d / maxVal) * height; return `${x},${y}`; }).join(' '); return ( {/* Axis Line */} {label} {/* The Line */} {/* Current Value Dot */} {data.length > 0 && ( )} ); }; // ----------------------------------------------------------------------------- // MAIN COMPONENT // ----------------------------------------------------------------------------- export default function SystemDynamicsBeerGame() { const [currentFrame, setCurrentFrame] = useState(0); const [isPlaying, setIsPlaying] = useState(true); // Generate data once const simData = useMemo(() => generateSimulationData(), []); // Animation Loop useEffect(() => { let animationFrameId; let lastTime = performance.now(); const frameInterval = (1000 * SECONDS_PER_WEEK) / 5; // Update visual more frequently than "weeks" const animate = (time) => { if (!isPlaying) return; const delta = time - lastTime; if (delta > 30) { // Approx 30fps cap for logic updates setCurrentFrame(prev => { if (prev >= TOTAL_WEEKS * 10) return 0; // Loop return prev + 1; }); lastTime = time; } animationFrameId = requestAnimationFrame(animate); }; animationFrameId = requestAnimationFrame(animate); return () => cancelAnimationFrame(animationFrameId); }, [isPlaying]); // Derived State const currentWeek = Math.floor(currentFrame / 10); // 10 frames per week const progress = currentFrame / (TOTAL_WEEKS * 10); const currentData = simData[Math.min(currentWeek, TOTAL_WEEKS - 1)]; // Slicing history for charts const historyData = simData.slice(0, currentWeek + 1); // Layout calculations const marginX = 100; const nodeGap = (WIDTH - marginX * 2) / (ROLES.length - 1); const nodeY = 250; return (

); } ```