Webapp update do display power values

This commit is contained in:
MalteSchm 2023-04-22 13:50:30 +02:00 committed by helgeerbe
parent 3861ab89f1
commit 8764809259
6 changed files with 50 additions and 7 deletions

View File

@ -89,9 +89,9 @@
</div> </div>
</div> </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="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">
<div class="card-header text-bg-success">{{ $t('invertertotalinfo.BatterySoc') }}</div> <div class="card-header text-bg-success">{{ $t('invertertotalinfo.BatterySoc') }}</div>
<div class="card-body card-text text-center"> <div class="card-body card-text text-center">
@ -105,12 +105,40 @@
</div> </div>
</div> </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>
</div> </div>
</template> </template>
<script lang="ts"> <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'; import { defineComponent, type PropType } from 'vue';
export default defineComponent({ export default defineComponent({
@ -118,6 +146,8 @@ export default defineComponent({
totalData: { type: Object as PropType<Total>, required: true }, totalData: { type: Object as PropType<Total>, required: true },
totalVeData: { type: Object as PropType<Vedirect>, required: true }, totalVeData: { type: Object as PropType<Vedirect>, required: true },
totalBattData: { type: Object as PropType<Battery>, 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> </script>

View File

@ -338,7 +338,9 @@
"MpptTotalYieldTotal": "MPPT Gesamtertrag Insgesamt", "MpptTotalYieldTotal": "MPPT Gesamtertrag Insgesamt",
"MpptTotalYieldDay": "MPPT Gesamtertrag Heute", "MpptTotalYieldDay": "MPPT Gesamtertrag Heute",
"MpptTotalPower": "MPPT Gesamtleistung", "MpptTotalPower": "MPPT Gesamtleistung",
"BatterySoc": "Ladezustand" "BatterySoc": "Ladezustand",
"HomePower": "Leistung / Netz",
"HuaweiPower": "Huawei AC Leistung"
}, },
"inverterchannelproperty": { "inverterchannelproperty": {
"Power": "Leistung", "Power": "Leistung",

View File

@ -338,7 +338,9 @@
"MpptTotalYieldTotal": "MPPT Total Yield Total", "MpptTotalYieldTotal": "MPPT Total Yield Total",
"MpptTotalYieldDay": "MPPT Total Yield Day", "MpptTotalYieldDay": "MPPT Total Yield Day",
"MpptTotalPower": "MPPT Total Power", "MpptTotalPower": "MPPT Total Power",
"BatterySoc": "State of charge" "BatterySoc": "State of charge",
"HomePower": "Grid Power",
"HuaweiPower": "Huawei AC Power"
}, },
"inverterchannelproperty": { "inverterchannelproperty": {
"Power": "Power", "Power": "Power",

View File

@ -337,7 +337,9 @@
"MpptTotalYieldTotal": "MPPT rendement total", "MpptTotalYieldTotal": "MPPT rendement total",
"MpptTotalYieldDay": "MPPT rendement du jour", "MpptTotalYieldDay": "MPPT rendement du jour",
"MpptTotalPower": "MPPT puissance de l'installation", "MpptTotalPower": "MPPT puissance de l'installation",
"BatterySoc": "State of charge" "BatterySoc": "State of charge",
"HomePower": "Grid Power",
"HuaweiPower": "Huawei AC Power"
}, },
"inverterchannelproperty": { "inverterchannelproperty": {
"Power": "Puissance", "Power": "Puissance",

View File

@ -54,6 +54,7 @@ export interface Vedirect {
export interface Huawei { export interface Huawei {
enabled: boolean; enabled: boolean;
Power: ValueObject;
} }
export interface Battery { export interface Battery {
@ -61,6 +62,11 @@ export interface Battery {
soc: ValueObject; soc: ValueObject;
} }
export interface PowerMeter {
enabled: boolean;
Power: ValueObject;
}
export interface LiveData { export interface LiveData {
inverters: Inverter[]; inverters: Inverter[];
total: Total; total: Total;
@ -68,4 +74,5 @@ export interface LiveData {
vedirect: Vedirect; vedirect: Vedirect;
huawei: Huawei; huawei: Huawei;
battery: Battery; battery: Battery;
power_meter: PowerMeter;
} }

View File

@ -1,7 +1,7 @@
<template> <template>
<BasePage :title="$t('home.LiveData')" :isLoading="dataLoading" :isWideScreen="true"> <BasePage :title="$t('home.LiveData')" :isLoading="dataLoading" :isWideScreen="true">
<HintView :hints="liveData.hints" /> <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="row gy-3">
<div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]"> <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"> <div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">