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;
}
function render(data){
if(!data)return;
function render(data){
if(!data) return;
elRange.value = data.range || 'day';
elDate.value = data.date || '';
elRange.value = data.range || 'day';
elDate.value = data.date || '';
elDate.disabled = data.range==='total';
elDate.disabled = (data.range === 'total');
if(data.tStart && data.tEnd){
const s=new Date(data.tStart*1000);
const e=new Date(data.tEnd*1000-1000);
// 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')
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='Zeitraum: Gesamt';
}
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 = '';
}
if(data.hasData===false){
elHint.innerHTML=`<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
elGrid.innerHTML='';
return;
}
// Keine Daten
if(data.hasData === false){
elHint.innerHTML = `<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
elGrid.innerHTML = '';
return;
}
const v=data.values||{};
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>
`;
// Werte
const v = data.values || {};
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>
`;
const donut = (t, p, c) => {
const r = 56;
const C = 2 * Math.PI * r; // Umfang
const dash = (Math.max(0, Math.min(100, p)) / 100) * C;
const donut = (t, p, c) => {
const r = 56;
const C = 2 * Math.PI * r;
const dash = (Math.max(0, Math.min(100, 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>
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="position:relative;width:160px;height:160px;">
<svg width="160" height="160" viewBox="0 0 160 160">
<!-- Rest-Kreis -->
<circle cx="80" cy="80" r="${r}"
stroke="rgba(255,255,255,0.18)"
stroke-width="18"
fill="none" />
<div style="position:relative;width:160px;height:160px;">
<svg width="160" height="160" viewBox="0 0 160 160">
<circle cx="80" cy="80" r="${r}"
stroke="rgba(255,255,255,0.18)"
stroke-width="18"
fill="none" />
<!-- Anteil -->
<circle cx="80" cy="80" r="${r}"
stroke="${c}"
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});" />
</svg>
<circle cx="80" cy="80" r="${r}"
stroke="${c}"
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});" />
</svg>
<!-- Prozent IN der Mitte -->
<div style="position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
font-size:24px;font-weight:900;">
${p.toFixed(1)}%
<div style="position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
font-size:24px;font-weight:900;">
${Number(p).toFixed(1)}%
</div>
</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);
const prod = v.Produktion || 0;
const cons = v.Hausverbrauch || 0;
const grid = v.Netz || 0;
const eigen = Math.max(cons - grid, 0);
elGrid.innerHTML=
donut('Eigenverbrauchsquote',prod?eigen/prod*100:0,'#63B3FF')+
donut('Autarkiegrad',cons?eigen/cons*100:0,'#A855F7');
}
elGrid.innerHTML =
donut('Eigenverbrauchsquote', prod ? (eigen / prod * 100) : 0, '#63B3FF') +
donut('Autarkiegrad', cons ? (eigen / cons * 100) : 0, '#A855F7');
}
window.handleMessage = d=>{
try{if(typeof d==='string')d=JSON.parse(d)}catch{}