<script lang="ts" setup>
|
import { onMounted, ref } from 'vue';
|
|
import { Page } from '@vben/common-ui';
|
|
import { Spin, Tag } from 'ant-design-vue';
|
|
import { getKpiOverview } from '#/api/bi/decision/kpi';
|
import type { DecisionKpiApi } from '#/api/bi/decision/kpi';
|
|
defineOptions({ name: 'DecisionKpiDashboard' });
|
|
const loading = ref(true);
|
const overview = ref<DecisionKpiApi.KpiOverview>({ kpis: [], total: 0 });
|
|
async function loadData() {
|
loading.value = true;
|
try {
|
overview.value = await getKpiOverview();
|
} catch {
|
// ignore
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
const CATEGORY_MAP: Record<string, string> = {
|
power_supply: '供电量',
|
device_operation: '设备运行',
|
production: '生产',
|
quality: '质量',
|
procurement: '采购',
|
safety: '安全',
|
};
|
|
const CATEGORY_COLORS: Record<string, string> = {
|
power_supply: '#1677ff',
|
device_operation: '#722ed1',
|
production: '#13c2c2',
|
quality: '#52c41a',
|
procurement: '#fa8c16',
|
safety: '#ff4d4f',
|
};
|
|
function alertStatusColor(status: string): string {
|
if (status === 'critical') return 'red';
|
if (status === 'warn') return 'orange';
|
return 'green';
|
}
|
|
function alertStatusText(status: string): string {
|
if (status === 'critical') return '严重';
|
if (status === 'warn') return '警告';
|
return '正常';
|
}
|
|
onMounted(loadData);
|
</script>
|
|
<template>
|
<Page :auto-content-height="true">
|
<Spin :spinning="loading">
|
<div class="p-4">
|
<h2 class="mb-4 text-lg font-bold">电力 KPI 看板</h2>
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
<div
|
v-for="kpi in overview.kpis"
|
:key="kpi.code"
|
class="rounded-lg border p-4 shadow-sm transition-shadow hover:shadow-md"
|
:style="{ borderTop: `3px solid ${CATEGORY_COLORS[kpi.category] || '#1677ff'}` }"
|
>
|
<div class="mb-1 flex items-center justify-between">
|
<span class="text-xs text-gray-500">{{ CATEGORY_MAP[kpi.category] || kpi.category }}</span>
|
<Tag :color="alertStatusColor(kpi.alertStatus)">
|
{{ alertStatusText(kpi.alertStatus) }}
|
</Tag>
|
</div>
|
<div class="mb-1 text-2xl font-bold">
|
{{ kpi.value ?? '-' }}
|
</div>
|
<div class="flex items-center justify-between">
|
<span class="text-sm font-medium">{{ kpi.name }}</span>
|
<span class="text-xs text-gray-400">{{ kpi.unit || '' }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</Spin>
|
</Page>
|
</template>
|
