51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
|
|
import { VbenIcon } from '@vben/common-ui';
|
|
|
|
defineOptions({
|
|
name: 'StatisticsReconciliation',
|
|
});
|
|
|
|
const props = defineProps({
|
|
statistics: {
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const formattedValue = (value: number | string, unit?: string) => {
|
|
if (typeof value === 'number') {
|
|
const numberValue = value.toLocaleString(undefined, {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
});
|
|
return unit ? `${unit}${numberValue}` : numberValue;
|
|
}
|
|
return value;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-4 gap-4 p-4 md:grid-cols-6 lg:grid-cols-8">
|
|
<div
|
|
v-for="(item, index) in props.statistics"
|
|
:key="index"
|
|
class="rounded-lg border p-4 shadow-sm"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
:class="`rounded-lg p-2 ${item.color} bg-opacity-10`"
|
|
aria-hidden="true"
|
|
>
|
|
<VbenIcon :icon="item.icon" class="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-500">{{ item.title }}</p>
|
|
<p class="mt-1 text-lg font-semibold">
|
|
{{ formattedValue(item.value, item.unit) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|