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 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,12 +105,40 @@
</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({
@ -118,6 +146,8 @@ export default defineComponent({
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>

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

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

View File

@ -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">