55 lines
1.9 KiB
Vue
55 lines
1.9 KiB
Vue
<template>
|
|
<div class="row row-cols-1 row-cols-md-3 g-3">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header text-bg-success">Total Yield Total</div>
|
|
<div class="card-body">
|
|
<p class="card-text text-center">
|
|
<h2>{{ formatNumber(totalData.YieldTotal.v, totalData.YieldTotal.d) }}
|
|
<small class="text-muted">{{ totalData.YieldTotal.u }}</small>
|
|
</h2>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header text-bg-success">Total Yield Day</div>
|
|
<div class="card-body">
|
|
<p class="card-text text-center">
|
|
<h2>{{ formatNumber(totalData.YieldDay.v, totalData.YieldDay.d) }}
|
|
<small class="text-muted">{{ totalData.YieldDay.u }}</small>
|
|
</h2>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header text-bg-success">Total Power</div>
|
|
<div class="card-body">
|
|
<p class="card-text text-center">
|
|
<h2>{{ formatNumber(totalData.Power.v, totalData.Power.d) }}
|
|
<small class="text-muted">{{ totalData.Power.u }}</small>
|
|
</h2>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, type PropType } from 'vue';
|
|
import type { Total } from '@/types/LiveDataStatus';
|
|
import { formatNumber } from '@/utils';
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
totalData: { type: Object as PropType<Total>, required: true },
|
|
},
|
|
methods: {
|
|
formatNumber,
|
|
},
|
|
});
|
|
</script> |