Webapp update do display power values

helgeerbe · Apr 23, 2023 · 8764809 · 8764809
1 parent 3861ab8
commit 8764809
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 7 deletions.
diff --git a/webapp/src/components/InverterTotalInfo.vue b/webapp/src/components/InverterTotalInfo.vue
@@ -89,9 +89,9 @@
       </div>
     </div>
   </div>
-  <div v-show="totalBattData.enabled">
+  <div v-show="totalBattData.enabled || powerMeterData.enabled || huaweiData.enabled">
     <div class="row row-cols-1 row-cols-md-3 g-3">
-      <div class="col">
+      <div class="col" v-show="totalBattData.enabled">
         <div class="card">
           <div class="card-header text-bg-success">{{ $t('invertertotalinfo.BatterySoc') }}</div>
           <div class="card-body card-text text-center">
@@ -105,19 +105,49 @@
           </div>
         </div>
       </div>
+      <div class="col" v-show="powerMeterData.enabled">
+        <div class="card">
+          <div class="card-header text-bg-success">{{ $t('invertertotalinfo.HomePower') }}</div>
+          <div class="card-body card-text text-center">
+            <h2>
+              {{ $n(powerMeterData.Power.v, 'decimal', {
+                minimumFractionDigits: powerMeterData.Power.d,
+                maximumFractionDigits: powerMeterData.Power.d
+              }) }}
+              <small class="text-muted">{{ powerMeterData.Power.u }}</small>
+            </h2>
+          </div>
+        </div>
+      </div>
+      <div class="col" v-show="huaweiData.enabled">
+        <div class="card">
+          <div class="card-header text-bg-success">{{ $t('invertertotalinfo.HuaweiPower') }}</div>
+          <div class="card-body card-text text-center">
+            <h2>
+              {{ $n(huaweiData.Power.v, 'decimal', {
+                minimumFractionDigits: huaweiData.Power.d,
+                maximumFractionDigits: huaweiData.Power.d
+              }) }}
+              <small class="text-muted">{{ huaweiData.Power.u }}</small>
+            </h2>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import type { Battery, Total, Vedirect } from '@/types/LiveDataStatus';
+import type { Battery, Total, Vedirect, Huawei, PowerMeter } from '@/types/LiveDataStatus';
 import { defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
   props: {
     totalData: { type: Object as PropType<Total>, required: true },
     totalVeData: { type: Object as PropType<Vedirect>, required: true },
     totalBattData: { type: Object as PropType<Battery>, required: true },
+    powerMeterData: { type: Object as PropType<Huawei>, required: true },
+    huaweiData: { type: Object as PropType<PowerMeter>, required: true },
   },
 });
 </script>
diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
@@ -338,7 +338,9 @@
         "MpptTotalYieldTotal": "MPPT Gesamtertrag Insgesamt",
         "MpptTotalYieldDay": "MPPT Gesamtertrag Heute",
         "MpptTotalPower": "MPPT Gesamtleistung",
-        "BatterySoc": "Ladezustand"
+        "BatterySoc": "Ladezustand",
+        "HomePower": "Leistung / Netz",
+        "HuaweiPower": "Huawei AC Leistung"
     },
     "inverterchannelproperty": {
         "Power": "Leistung",

diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
@@ -338,7 +338,9 @@
         "MpptTotalYieldTotal": "MPPT Total Yield Total",
         "MpptTotalYieldDay": "MPPT Total Yield Day",
         "MpptTotalPower": "MPPT Total Power",
-        "BatterySoc": "State of charge"
+        "BatterySoc": "State of charge",
+        "HomePower": "Grid Power",
+        "HuaweiPower": "Huawei AC Power"
     },
     "inverterchannelproperty": {
         "Power": "Power",

diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
@@ -337,7 +337,9 @@
         "MpptTotalYieldTotal": "MPPT rendement total",
         "MpptTotalYieldDay": "MPPT rendement du jour",
         "MpptTotalPower": "MPPT puissance de l'installation",
-        "BatterySoc": "State of charge"
+        "BatterySoc": "State of charge",
+        "HomePower": "Grid Power",
+        "HuaweiPower": "Huawei AC Power"
     },
     "inverterchannelproperty": {
         "Power": "Puissance",

diff --git a/webapp/src/types/LiveDataStatus.ts b/webapp/src/types/LiveDataStatus.ts
@@ -54,18 +54,25 @@ export interface Vedirect {
 
 export interface Huawei {
   enabled: boolean;
+  Power: ValueObject;
 }
 
 export interface Battery {
   enabled: boolean;
   soc: ValueObject;
 }
 
+export interface PowerMeter {
+  enabled: boolean;
+  Power: ValueObject;
+}
+
 export interface LiveData {
     inverters: Inverter[];
     total: Total;
     hints: Hints;
     vedirect: Vedirect;
     huawei: Huawei;
     battery: Battery;
+    power_meter: PowerMeter;
 }
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <template>
     <BasePage :title="$t('home.LiveData')" :isLoading="dataLoading" :isWideScreen="true">
         <HintView :hints="liveData.hints" />
-        <InverterTotalInfo :totalData="liveData.total" :totalVeData="liveData.vedirect" :totalBattData="liveData.battery"/><br />
+        <InverterTotalInfo :totalData="liveData.total" :totalVeData="liveData.vedirect" :totalBattData="liveData.battery" :powerMeterData="liveData.power_meter" :huaweiData="liveData.huawei"/><br />
         <div class="row gy-3">
             <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]">
                 <div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">