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 13:34:05 +01:00
parent a86c8dba66
commit aa01389bf3
1 changed files with 68 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
Energy_Pie/module.html
View File

@@ -33,6 +33,13 @@
gap:14px;">
</div>
<div id="explain"
style="margin-top:10px;
font-size:13px;
opacity:.75;
line-height:1.4;">
</div>
<div id="err" style="margin-top:8px;color:#ffb4b4;font-size:13px;"></div>
</div>
@@ -109,59 +116,69 @@
return Math.ceil((((d-s)/86400000)+1)/7)+" "+y;
}
function render(data){
if(!data) return;
function render(data) {
if (!data) return;
// UI-Status
elRange.value = data.range || 'day';
elDate.value = data.date || '';
elDate.disabled = (data.range === 'total');
// 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 e = new Date(data.tEnd * 1000 - 1000);
if (data.range === 'day')
const pad = n => String(n).padStart(2, '0');
const fmt = d => `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()}`;
if (data.range === 'day') {
elPeriod.textContent = `Zeitraum: ${fmt(s)}`;
else if (data.range === 'week')
elPeriod.textContent = `Zeitraum: Woche ${isoWeek(s)}`;
else if (data.range === 'month')
elPeriod.textContent = `Zeitraum: ${monthName(s.getMonth())} ${s.getFullYear()}`;
else if (data.range === 'year')
elPeriod.textContent = `Zeitraum: ${s.getFullYear()}`;
else
elPeriod.textContent = ''; // fallback: lieber leer als falsch
} else {
elPeriod.textContent = '';
} else if (data.range === 'week') {
elPeriod.textContent = `Zeitraum: ${fmt(s)} – ${fmt(e)}`;
} else if (data.range === 'month') {
elPeriod.textContent = `Zeitraum: ${fmt(s)} – ${fmt(e)}`;
} else if (data.range === 'year') {
elPeriod.textContent = `Zeitraum: ${fmt(s)} – ${fmt(e)}`;
}
}
// Keine Daten
if(data.hasData === false){
elHint.innerHTML = `<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
// Keine Daten vorhanden
if (data.hasData === false) {
elHint.innerHTML = `
<b>Letzter Zeitpunkt</b>
<span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>
`;
elGrid.innerHTML = '';
elExplain.innerHTML = '';
return;
}
// Werte
const v = data.values || {};
const prod = v.Produktion || 0;
const cons = v.Hausverbrauch || 0;
const grid = v.Netz || 0;
const eigen = Math.max(cons - grid, 0);
elHint.innerHTML = `
<span class="kv"><b>Produktion:</b> ${v.Produktion?.toFixed(2) || 0} kWh</span>
<span class="kv"><b>Verbrauch:</b> ${v.Hausverbrauch?.toFixed(2) || 0} kWh</span>
<span class="kv"><b>Netzbezug:</b> ${v.Netz?.toFixed(2) || 0} kWh</span>
<span class="kv"><b>Produktion:</b> ${prod.toFixed(2)} kWh</span>
<span class="kv"><b>Verbrauch:</b> ${cons.toFixed(2)} kWh</span>
<span class="kv"><b>Netzbezug:</b> ${grid.toFixed(2)} kWh</span>
`;
const donut = (t, p, c) => {
// Donut-Renderer
const donut = (title, percent, color) => {
const r = 56;
const C = 2 * Math.PI * r;
const dash = (Math.max(0, Math.min(100, p)) / 100) * C;
const p = Math.max(0, Math.min(100, percent));
const dash = (p / 100) * C;
return `
<div style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;">
<div style="font-weight:900">${t}</div>
<div style="font-weight:900">${title}</div>
<div style="position:relative;width:160px;height:160px;">
<svg width="160" height="160" viewBox="0 0 160 160">
@@ -169,37 +186,55 @@ function render(data){
stroke="rgba(255,255,255,0.18)"
stroke-width="18"
fill="none" />
<circle cx="80" cy="80" r="${r}"
stroke="${c}"
stroke="${color}"
stroke-width="18"
fill="none"
stroke-linecap="butt"
stroke-dasharray="${dash} ${C}"
transform="rotate(-90 80 80)"
style="filter: drop-shadow(0 0 12px ${c});" />
style="filter: drop-shadow(0 0 12px ${color});" />
</svg>
<div style="position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
font-size:24px;font-weight:900;">
${Number(p).toFixed(1)}%
${p.toFixed(1)}%
</div>
</div>
</div>
`;
};
const prod = v.Produktion || 0;
const cons = v.Hausverbrauch || 0;
const grid = v.Netz || 0;
const eigen = Math.max(cons - grid, 0);
// Donuts einsetzen
elGrid.innerHTML =
donut('Eigenverbrauchsquote', prod ? (eigen / prod * 100) : 0, '#63B3FF') +
donut('Autarkiegrad', cons ? (eigen / cons * 100) : 0, '#A855F7');
// Erklärtexte unter den Kreisen
elExplain.innerHTML = `
<div>
<b>Eigenverbrauchsquote:</b>
Anteil des selbst erzeugten Stroms, der direkt im eigenen Haushalt verbraucht wird.
</div>
<div style="margin-top:6px;">
<b>Autarkiegrad:</b>
Anteil des gesamten Stromverbrauchs, der durch eigene Stromerzeugung gedeckt wird.
</div>
`;
}
document.getElementById('explain').innerHTML = `
<div>
<b>Eigenverbrauchsquote:</b>
Anteil des selbst erzeugten Stroms, der direkt im eigenen Haushalt verbraucht wird.
</div>
<div style="margin-top:6px;">
<b>Autarkiegrad:</b>
Anteil des gesamten Stromverbrauchs, der durch eigene Stromerzeugung gedeckt wird.
</div>
`;
window.handleMessage = d=>{
try{if(typeof d==='string')d=JSON.parse(d)}catch{}
render(d);