64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<el-card shadow="never" class="kpi-card" :class="{ link: !!to }" @click="onClick">
|
||
|
|
<div class="kpi-label">{{ label }}</div>
|
||
|
|
<div class="kpi-value" :class="{ danger }">
|
||
|
|
{{ valueText }}<span v-if="unit && value !== null" class="kpi-unit">{{ unit }}</span>
|
||
|
|
</div>
|
||
|
|
<div v-if="hint" class="kpi-hint">{{ hint }}</div>
|
||
|
|
</el-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
// 经营管理 KPI 卡:label 上小灰字 + 主值大号字(千分位/unit 后缀/danger 红)
|
||
|
|
// + hint 下小灰字。to 存在时整卡可点(hover 手型)跳转——纯展示+导航,
|
||
|
|
// 不取数。null 值语义(无样本)显 `--`,由父级决定传 null。
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { useRouter } from 'vue-router'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
label: string
|
||
|
|
value: number | null
|
||
|
|
unit?: string
|
||
|
|
hint?: string
|
||
|
|
to?: string
|
||
|
|
danger?: boolean
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
const valueText = computed(() => (props.value === null ? '--' : props.value.toLocaleString()))
|
||
|
|
|
||
|
|
function onClick(): void {
|
||
|
|
if (props.to) router.push(props.to)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.kpi-card.link {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.kpi-label {
|
||
|
|
color: var(--el-text-color-secondary);
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.kpi-value {
|
||
|
|
font-size: 26px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin: 6px 0 2px;
|
||
|
|
color: var(--el-text-color-primary);
|
||
|
|
}
|
||
|
|
.kpi-value.danger {
|
||
|
|
color: var(--el-color-danger);
|
||
|
|
}
|
||
|
|
.kpi-unit {
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: var(--el-text-color-secondary);
|
||
|
|
margin-left: 2px;
|
||
|
|
}
|
||
|
|
.kpi-hint {
|
||
|
|
font-size: 11px;
|
||
|
|
color: var(--el-text-color-secondary);
|
||
|
|
}
|
||
|
|
</style>
|