online-energieausweis/src/components/Tabellen/A7WaermequellenSolareEinstrahlung.svelte

<script lang="ts">
    import { A7A2BerechnungWaermequellenSolareEinstrahlung } from "#lib/Berechnungen/BedarfsausweisWohnen/A7A2BerechnungWaermequellenSolareEinstrahlung.js";

$: result = A7A2BerechnungWaermequellenSolareEinstrahlung();

</script>

<div class="overflow-x-auto mt-16">
    <table class="table-auto border-collapse border border-gray-300 w-full text-sm">
      <!-- Tabellenkopf -->
      <thead>
        <tr class="bg-gray-200 text-left">
          <th colspan="6" class="border border-gray-300 p-2">
            <h2>Tabelle A.7 — Gebäude – Berechnung Wärmequellen durch solare Einstrahlung</h2>
          </th>
        </tr>
        <tr class="bg-gray-200 text-left">
          <th colspan="6" class="border border-gray-300 p-2 text-xl">
            Solare Einstrahlung für transparente Flächen
          </th>
        </tr>
      </thead>
  
      <!-- Tabellenkörper -->
      <thead>
        <tr class="bg-yellow-100 text-left">
          <th class="border border-gray-300 p-2 w-4/12 bg-white">Orientierung</th>
          {#each result.PlanungswerteBauteil as fenster, index}
            <th class="border border-gray-300 p-2 w-1/12 text-center">{fenster.Orientierung}</th>
          {/each}
          <th class="border border-gray-300 p-2 w-2/12 bg-white text-center">Gesamtfläche</th>
        </tr>
      </thead>
  
      <!-- Tabellenkörper -->
      <tbody>
        <tr class="bg-yellow-100">
          <td class="border border-gray-300 p-2 bg-white">Neigung</td>
          {#each result.PlanungswerteBauteil as fenster, index}
            <td class="border border-gray-300 p-2 text-center">{fenster.Neigung}</td>
          {/each}
          <td class="border border-gray-300 p-2 text-center bg-white">[m²]</td>
        </tr>
        <tr class="bg-yellow-100">
          <td class="border border-gray-300 p-2 bg-white">Bauteilfläche A [m²] (1)</td>
          {#each result.PlanungswerteBauteil as fenster, index}
            <td class="border border-gray-300 p-2 text-center">{fenster.Flaeche}</td>
          {/each}
          <td class="border-2 border-gray-600 p-2 text-center bg-white">{Math.round(result.summeFlaeche*100)/100}</td>
        </tr>
        <tr class="bg-yellow-100">
          <td class="border border-gray-300 p-2 bg-white">Gesamtenergiedurchlassgrad g (2)</td>
          {#each result.PlanungswerteBauteil as fenster, index}
            <td class="border border-gray-300 p-2 text-center">{fenster.GesamtEnergieDurchlassGrad}</td>
          {/each}
          <td class="border border-gray-300 p-2 text-center bg-white"></td>
        </tr>
        <tr class="bg-gray-100">
          <td class="border border-gray-300 p-2 bg-white">Abm. Rahmenanteil F<sub>F</sub> (3)</td>
          {#each result.PlanungswerteBauteil as fenster, index}
            <td class="border border-gray-300 p-2 text-center">{fenster.RahmenAnteil}</td>
          {/each}
          <td class="border border-gray-300 p-2 text-center bg-white"></td>
        </tr>
        <tr class="bg-gray-100">
          <td class="border border-gray-300 p-2 bg-white">Abm. Strahlungseinfluss F<sub>w</sub> (4)</td>
          {#each result.PlanungswerteBauteil as fenster, index}
            <td class="border border-gray-300 p-2 text-center">{fenster.StrahlungsEinfluss}</td>
          {/each}
          <td class="border border-gray-300 p-2 text-center bg-white"></td>
        </tr>
        <tr class="bg-gray-100">
          <td class="border border-gray-300 p-2 bg-white ">Abm. Verschattung F<sub>s</sub> (5)</td>
          {#each result.PlanungswerteBauteil as fenster, index}
          <td class="border border-gray-300 p-2 text-center">{fenster.Verschattung}</td>
        {/each}
          <td class="border border-gray-300 p-2 text-center bg-white"></td>
        </tr>
        <tr>
          <td class="border border-gray-300 p-2">wirks. Gesamtenergiedurchlassgrad<br>
            g<sub>eff</sub> = g · F<sub>w</sub> · F<sub>s</sub><br>
            (6) = (2) · (4) · (5)</td>
          {#each result.ErgebnisseWirksamerGesamtEnergieDurchlassGrad as wert, index}
            <td class="border-2 border-gray-600 p-2 text-center">{Math.round(wert * 100) / 100}</td>
          {/each}
          <td class="border border-gray-300 p-2 text-center bg-white"></td>
        </tr>
      </tbody>
    </table>
<br>
      <table class="table-auto border-collapse border border-gray-300 w-full text-sm">
        <!-- Tabelle Kopf -->
        <thead>
          <tr class="text-center">
            <th colspan="2" class="border border-gray-300 p-2 text-left">E<sub>sol</sub> aus Tabelle 17</th>
            <th colspan="3" class="border border-gray-300 p-2 text-left">
              Q<sub>S,tr</sub> = A ⋅ F<sub>F</sub> ⋅ g<sub>eff</sub>
               ⋅ E<sub>sol</sub> </th>
            <th colspan="7" class="border border-gray-300 p-2 text-left"></th> 
          </tr>
          <tr class="text-center">
            <th class="border border-gray-300 p-2">Monat</th>
            {#each result.ErgebnisseMonatsWerteJanuar as wert, index}
            <th class="border border-gray-300 p-2">E<sub>sol</sub><br>[kWh/m²]<br></th>
            <th class="border border-gray-300 p-2">Q<sub>str</sub><br>[kWh]</th>
            {/each}
            <th class="border border-gray-300 p-2">ΣQ<sub>str</sub><br>[kWh]</th>
          </tr>
        </thead>
    
        <!-- Tabelle Körper -->
        <tbody>
            <!-- Monatsdaten -->
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">Januar</td>
            {#each result.ErgebnisseMonatsWerteJanuar as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseJanuar[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseJanuar * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">Februar</td>
            {#each result.ErgebnisseMonatsWerteFebruar as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseFebruar[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseFebruar * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">März</td>
            {#each result.ErgebnisseMonatsWerteMaerz as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseMaerz[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseMaerz * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">April</td>
            {#each result.ErgebnisseMonatsWerteApril as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseApril[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseApril * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">Mai</td>
            {#each result.ErgebnisseMonatsWerteMai as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseMai[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseMai * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">Juni</td>
            {#each result.ErgebnisseMonatsWerteJuni as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseJuni[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseJuni * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">Juli</td>
            {#each result.ErgebnisseMonatsWerteJuli as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseJuli[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseJuli * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">August</td>
            {#each result.ErgebnisseMonatsWerteAugust as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseAugust[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseAugust * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">September</td>
            {#each result.ErgebnisseMonatsWerteSeptember as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseSeptember[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseSeptember * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">Oktober</td>
            {#each result.ErgebnisseMonatsWerteOktober as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseOktober[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseOktober * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">November</td>
            {#each result.ErgebnisseMonatsWerteNovember as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseNovember[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseNovember * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 text-center">Dezember</td>
            {#each result.ErgebnisseMonatsWerteDezember as wert, index}
              <td class="border border-gray-300 p-2 bg-blue-100">{Math.round(wert*100)/100}</td>
              <td class="border-2 border-gray-600 p-2">{Math.round(result.ErgebnisseDezember[index]*100)/100}</td>
            {/each}
            <td class="border-2 border-gray-600 p-2">{Math.round(result.summeErgebnisseDezember * 100) / 100}</td>
            </tr>
            <tr class="text-center">
            <td class="border border-gray-300 p-2 font-bold text-center">Jahressumme</td>
            {#each result.ErgebnisseMonatsWerteDezember as wert, index}
            <td class="border border-gray-300 p-2"></td>
            <td class="border border-gray-300 p-2"></td>
            {/each}
            <td class="border-2 border-gray-600 p-2 font-bold">{Math.round(result.summeErgebnisseJahr * 100) / 100}</td>
          </tr>
        </tbody>
      </table>
    </div>