dh/Symcon_Belevo_Energiemanagement_testing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
belevo\mh
2025-12-18 11:40:52 +01:00
parent 7ac31ef2a2
commit a86c8dba66
1 changed files with 75 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
Energy_Pie/module.html
View File

@@ -115,9 +115,13 @@
elRange.value = data.range || 'day'; elRange.value = data.range || 'day';
elDate.value = data.date || ''; elDate.value = data.date || '';
elDate.disabled = data.range==='total'; elDate.disabled = (data.range === 'total');
if(data.tStart && data.tEnd){ // Zeitraum-Anzeige
if (data.range === 'total') {
// ✅ Wunsch: bei Gesamt nix anzeigen
elPeriod.textContent = '';
} else if (data.tStart && data.tEnd) {
const s = new Date(data.tStart * 1000); const s = new Date(data.tStart * 1000);
const e = new Date(data.tEnd * 1000 - 1000); const e = new Date(data.tEnd * 1000 - 1000);
@@ -130,15 +134,19 @@
else if (data.range === 'year') else if (data.range === 'year')
elPeriod.textContent = `Zeitraum: ${s.getFullYear()}`; elPeriod.textContent = `Zeitraum: ${s.getFullYear()}`;
else else
elPeriod.textContent='Zeitraum: Gesamt'; elPeriod.textContent = ''; // fallback: lieber leer als falsch
} else {
elPeriod.textContent = '';
} }
// Keine Daten
if(data.hasData === false){ if(data.hasData === false){
elHint.innerHTML = `<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`; elHint.innerHTML = `<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
elGrid.innerHTML = ''; elGrid.innerHTML = '';
return; return;
} }
// Werte
const v = data.values || {}; const v = data.values || {};
elHint.innerHTML = ` elHint.innerHTML = `
<span class="kv"><b>Produktion:</b> ${v.Produktion?.toFixed(2) || 0} kWh</span> <span class="kv"><b>Produktion:</b> ${v.Produktion?.toFixed(2) || 0} kWh</span>
@@ -148,7 +156,7 @@
const donut = (t, p, c) => { const donut = (t, p, c) => {
const r = 56; const r = 56;
const C = 2 * Math.PI * r; // Umfang const C = 2 * Math.PI * r;
const dash = (Math.max(0, Math.min(100, p)) / 100) * C; const dash = (Math.max(0, Math.min(100, p)) / 100) * C;
return ` return `
@@ -157,13 +165,11 @@ const donut = (t, p, c) => {
<div style="position:relative;width:160px;height:160px;"> <div style="position:relative;width:160px;height:160px;">
<svg width="160" height="160" viewBox="0 0 160 160"> <svg width="160" height="160" viewBox="0 0 160 160">
<!-- Rest-Kreis -->
<circle cx="80" cy="80" r="${r}" <circle cx="80" cy="80" r="${r}"
stroke="rgba(255,255,255,0.18)" stroke="rgba(255,255,255,0.18)"
stroke-width="18" stroke-width="18"
fill="none" /> fill="none" />
<!-- Anteil -->
<circle cx="80" cy="80" r="${r}" <circle cx="80" cy="80" r="${r}"
stroke="${c}" stroke="${c}"
stroke-width="18" stroke-width="18"
@@ -174,11 +180,10 @@ const donut = (t, p, c) => {
style="filter: drop-shadow(0 0 12px ${c});" /> style="filter: drop-shadow(0 0 12px ${c});" />
</svg> </svg>
<!-- Prozent IN der Mitte -->
<div style="position:absolute;inset:0; <div style="position:absolute;inset:0;
display:flex;align-items:center;justify-content:center; display:flex;align-items:center;justify-content:center;
font-size:24px;font-weight:900;"> font-size:24px;font-weight:900;">
${p.toFixed(1)}% ${Number(p).toFixed(1)}%
</div> </div>
</div> </div>
</div> </div>
@@ -191,8 +196,8 @@ const donut = (t, p, c) => {
const eigen = Math.max(cons - grid, 0); const eigen = Math.max(cons - grid, 0);
elGrid.innerHTML = elGrid.innerHTML =
donut('Eigenverbrauchsquote',prod?eigen/prod*100:0,'#63B3FF')+ donut('Eigenverbrauchsquote', prod ? (eigen / prod * 100) : 0, '#63B3FF') +
donut('Autarkiegrad',cons?eigen/cons*100:0,'#A855F7'); donut('Autarkiegrad', cons ? (eigen / cons * 100) : 0, '#A855F7');
} }
window.handleMessage = d=>{ window.handleMessage = d=>{