<script lang="ts" setup>
|
import { computed } from 'vue';
|
|
import { IconifyIcon } from '../../../../packages/icons/src';
|
|
import { Card, Tag } from 'ant-design-vue';
|
|
/** 交易对照卡片 */
|
defineOptions({ name: 'ComparisonCard' });
|
|
const props = withDefaults(defineProps<Props>(), {
|
title: '',
|
tag: '',
|
prefix: '',
|
value: 0,
|
reference: 0,
|
decimals: 0,
|
});
|
|
interface Props {
|
title?: string;
|
tag?: string;
|
prefix?: string;
|
value?: number | string;
|
reference?: number | string;
|
decimals?: number;
|
}
|
|
/** 计算环比百分比 */
|
const percent = computed(() => {
|
const refValue = Number(props.reference);
|
const curValue = Number(props.value);
|
if (!refValue || refValue === 0) return 0;
|
return ((curValue - refValue) / refValue) * 100;
|
});
|
|
/** 格式化今日数据 */
|
const formattedValue = computed(() => {
|
const numValue = Number(props.value);
|
return numValue.toFixed(props.decimals);
|
});
|
|
/** 格式化昨日数据 */
|
const formattedReference = computed(() => {
|
const numValue = Number(props.reference);
|
return numValue.toFixed(props.decimals);
|
});
|
</script>
|
|
<template>
|
<Card :bordered="false" class="h-full">
|
<div class="flex flex-col gap-2">
|
<div class="flex items-center justify-between text-gray-500">
|
<span>{{ title }}</span>
|
<Tag v-if="tag">{{ tag }}</Tag>
|
</div>
|
<div class="flex items-baseline justify-between">
|
<div class="text-3xl">{{ prefix }}{{ formattedValue }}</div>
|
<span
|
:class="percent > 0 ? 'text-red-500' : 'text-green-500'"
|
class="flex items-center gap-0.5"
|
>
|
{{ Math.abs(percent).toFixed(2) }}%
|
<IconifyIcon
|
:icon="percent > 0 ? 'ep:caret-top' : 'ep:caret-bottom'"
|
class="text-sm"
|
/>
|
</span>
|
</div>
|
<div class="mt-2 border-t border-gray-200 pt-2">
|
<div class="flex items-center justify-between text-sm">
|
<span class="text-gray-500">昨日数据</span>
|
<span>{{ prefix }}{{ formattedReference }}</span>
|
</div>
|
</div>
|
</div>
|
</Card>
|
</template>
|
