easydo-mes-web/src/views/sales/performance/components/statistic.vue

<template>
    <el-statistic :style="{ '--el-statistic-content-color': color }" :title="title" :value="formatValue">
        <template #suffix>{{ formatSuffix }}</template>
    </el-statistic>
</template>

<script setup>
import XEUtils from "xe-utils";

const props = defineProps({
    title: { type: String, default: "" },
    value: { type: Number, default: 0 },
    color: { type: String, default: "var(--el-color-primary)" },
});

const formatValue = computed(() => props.value >= 10000 ? XEUtils.round(XEUtils.divide(props.value, 10000)) : XEUtils.round(props.value));
const formatSuffix = computed(() => props.value >= 10000 ? "万元" : "元");
</script>

<style scoped>
.el-statistic :deep(.el-statistic__head) {margin-bottom: 10px;font-size: 15px;font-weight: 500;color: #555;}
.el-statistic :deep(.el-statistic__number) {font-size: 22px;}
.el-statistic :deep(.el-statistic__suffix) {font-size: 12px;color: #999;}
</style>