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

145
Energy_Pie/module.html
View File

@@ -109,91 +109,96 @@
return Math.ceil((((d-s)/86400000)+1)/7)+" "+y; return Math.ceil((((d-s)/86400000)+1)/7)+" "+y;
} }
function render(data){ function render(data){
if(!data)return; if(!data) return;
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
const s=new Date(data.tStart*1000); if (data.range === 'total') {
const e=new Date(data.tEnd*1000-1000); // ✅ 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') if (data.range === 'day')
elPeriod.textContent=`Zeitraum: ${fmt(s)}`; elPeriod.textContent = `Zeitraum: ${fmt(s)}`;
else if(data.range==='week') else if (data.range === 'week')
elPeriod.textContent=`Zeitraum: Woche ${isoWeek(s)}`; elPeriod.textContent = `Zeitraum: Woche ${isoWeek(s)}`;
else if(data.range==='month') else if (data.range === 'month')
elPeriod.textContent=`Zeitraum: ${monthName(s.getMonth())} ${s.getFullYear()}`; elPeriod.textContent = `Zeitraum: ${monthName(s.getMonth())} ${s.getFullYear()}`;
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 = '';
}
if(data.hasData===false){ // Keine Daten
elHint.innerHTML=`<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`; if(data.hasData === false){
elGrid.innerHTML=''; elHint.innerHTML = `<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
return; elGrid.innerHTML = '';
} return;
}
const v=data.values||{}; // Werte
elHint.innerHTML=` const v = data.values || {};
<span class="kv"><b>Produktion:</b> ${v.Produktion?.toFixed(2)||0} kWh</span> elHint.innerHTML = `
<span class="kv"><b>Verbrauch:</b> ${v.Hausverbrauch?.toFixed(2)||0} kWh</span> <span class="kv"><b>Produktion:</b> ${v.Produktion?.toFixed(2) || 0} kWh</span>
<span class="kv"><b>Netzbezug:</b> ${v.Netz?.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>
`;
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 `
<div style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;"> <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">${t}</div>
<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" fill="none"
fill="none" stroke-linecap="butt"
stroke-linecap="butt" stroke-dasharray="${dash} ${C}"
stroke-dasharray="${dash} ${C}" transform="rotate(-90 80 80)"
transform="rotate(-90 80 80)" 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;"> ${Number(p).toFixed(1)}%
${p.toFixed(1)}% </div>
</div> </div>
</div> </div>
</div> `;
`; };
};
const prod=v.Produktion||0; const prod = v.Produktion || 0;
const cons=v.Hausverbrauch||0; const cons = v.Hausverbrauch || 0;
const grid=v.Netz||0; const grid = v.Netz || 0;
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=>{
try{if(typeof d==='string')d=JSON.parse(d)}catch{} try{if(typeof d==='string')d=JSON.parse(d)}catch{}