/* CSS spezifisch für den Simulator, um Konflikte mit Avada zu vermeiden */ .ev-sim-container { font-family: inherit; /* Übernimmt die Schriftart deines Avada-Themes */ max-width: 800px; margin: 0 auto; padding: 20px; background: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); color: #333; } .ev-sim-container h3 { text-align: center; margin-top: 0; margin-bottom: 20px; color: #2c3e50; } .ev-sim-chart-wrapper { position: relative; height: 350px; width: 100%; margin-bottom: 30px; } .ev-sim-controls { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; padding: 20px; background: #f8f9fa; border-radius: 8px; } @media (min-width: 600px) { .ev-sim-controls { grid-template-columns: 1fr 1fr; } } .ev-sim-control-group { display: flex; flex-direction: column; } .ev-sim-control-group label { font-weight: 600; margin-bottom: 8px; font-size: 14px; display: flex; justify-content: space-between; } .ev-sim-control-group input[type="range"] { width: 100%; accent-color: #3498db; /* Avada primäre Farbe anpassen, falls gewünscht */ } .ev-sim-metrics { display: flex; justify-content: space-around; padding: 15px; background: #eef2f5; border-radius: 8px; text-align: center; } .ev-sim-metric-box { display: flex; flex-direction: column; } .ev-sim-metric-value { font-size: 24px; font-weight: bold; color: #2c3e50; } .ev-sim-metric-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #7f8c8d; } .ev-sim-alert { color: #e74c3c; font-weight: bold; margin-top: 10px; text-align: center; min-height: 24px; }

Stromnetz-Simulator: E-Auto-Ladelast

document.addEventListener("DOMContentLoaded", function() { const ctx = document.getElementById('evSimChart').getContext('2d'); // Basisdaten: 24 Stunden const labels = Array.from({length: 24}, (_, i) => `${i}:00`); // Typische Grundlast (vereinfacht, z.B. in Gigawatt oder Prozent) const baseLoad = [ 40, 38, 36, 35, 37, 42, 55, 65, 70, 72, 70, 68, 65, 63, 62, 60, 65, 75, 80, 78, 70, 60, 50, 45 ]; const maxGridCapacity = 100; // Maximale Kapazitätslinie // Initialisiere Chart.js let evChart = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [ { label: 'Gesamtlast', data: [], borderColor: '#e74c3c', backgroundColor: 'rgba(231, 76, 60, 0.2)', borderWidth: 3, fill: true, tension: 0.4, order: 1 }, { label: 'Grundlast (ohne E-Autos)', data: baseLoad, borderColor: '#95a5a6', borderWidth: 2, borderDash: [5, 5], fill: false, tension: 0.4, order: 2 }, { label: 'Netzkapazität', data: Array(24).fill(maxGridCapacity), borderColor: '#c0392b', borderWidth: 2, fill: false, pointRadius: 0, order: 0 } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' }, tooltip: { mode: 'index', intersect: false } }, scales: { y: { beginAtZero: true, max: 120, // Puffer über der Kapazität title: { display: true, text: 'Auslastung (%)' } }, x: { title: { display: true, text: 'Uhrzeit' } } } } }); // Referenzen zu UI-Elementen const behaviorSlider = document.getElementById('chargingBehavior'); const renewablesSlider = document.getElementById('renewablesShare'); const behaviorLabel = document.getElementById('behaviorLabel'); const renewablesLabel = document.getElementById('renewablesLabel'); const peakLoadValue = document.getElementById('peakLoadValue'); const co2Value = document.getElementById('co2Value'); const gridAlert = document.getElementById('gridAlert'); // Funktion zur Berechnung der E-Auto-Lastverteilung function calculateEVLoad(behavior) { const totalEvEnergy = 120; // Gesamte benötigte Energie der E-Autos let evLoad = Array(24).fill(0); // behavior = 0 (Abendspitze) bis 100 (Smart Charging Nachts) const smartFactor = behavior / 100; for (let i = 0; i = 23 || i a + b, 0); const scale = totalEvEnergy / currentTotal; return evLoad.map(val => val * scale); } // Haupt-Update-Funktion function updateSimulator() { const behavior = parseInt(behaviorSlider.value); const renewables = parseInt(renewablesSlider.value); // Labels aktualisieren if (behavior < 33) behaviorLabel.innerText = "Abendspitze (Unreguliert)"; else if (behavior base + evLoad[index]); // Max Auslastung ermitteln const maxLoad = Math.max(...totalLoad); peakLoadValue.innerText = Math.round(maxLoad) + "%"; // Warnungen anzeigen if (maxLoad > maxGridCapacity) { gridAlert.innerText = "⚠️ KRITISCH: Stromnetz überlastet! Blackout-Gefahr."; peakLoadValue.style.color = "#e74c3c"; evChart.data.datasets[0].backgroundColor = 'rgba(231, 76, 60, 0.4)'; evChart.data.datasets[0].borderColor = '#c0392b'; } else if (maxLoad > 90) { gridAlert.innerText = "⚠️ WARNUNG: Netz nahe der Belastungsgrenze."; peakLoadValue.style.color = "#f39c12"; evChart.data.datasets[0].backgroundColor = 'rgba(243, 156, 18, 0.4)'; evChart.data.datasets[0].borderColor = '#f39c12'; } else { gridAlert.innerText = "✅ Stromnetz stabil."; peakLoadValue.style.color = "#27ae60"; evChart.data.datasets[0].backgroundColor = 'rgba(46, 204, 113, 0.2)'; evChart.data.datasets[0].borderColor = '#27ae60'; } // CO2 Berechnung (stark vereinfacht) // 100% Erneuerbare = 0g, 0% = ca. 800g (Kohle/Gas mix) const baseCo2 = 800 - (renewables * 8); co2Value.innerText = Math.round(baseCo2) + "g"; // Chart aktualisieren evChart.data.datasets[0].data = totalLoad; evChart.update(); } // Event Listener für Slider behaviorSlider.addEventListener('input', updateSimulator); renewablesSlider.addEventListener('input', updateSimulator); // Initiales Update updateSimulator(); });