<script lang="ts" setup>
|
import { onMounted, ref } from 'vue';
|
|
import { Page } from '@vben/common-ui';
|
|
import { Select, Spin, Table } from 'ant-design-vue';
|
|
import { getKpiOverview } from '#/api/bi/decision/kpi';
|
|
defineOptions({ name: 'DecisionTrendAnalysis' });
|
|
const loading = ref(false);
|
const trendData = ref<any[]>([]);
|
const selectedCategory = ref<string>('');
|
|
const CATEGORY_OPTIONS = [
|
{ label: '全部', value: '' },
|
{ label: '供电量', value: 'power_supply' },
|
{ label: '设备运行', value: 'device_operation' },
|
{ label: '生产', value: 'production' },
|
{ label: '质量', value: 'quality' },
|
{ label: '采购', value: 'procurement' },
|
{ label: '安全', value: 'safety' },
|
];
|
|
const columns = [
|
{ title: 'KPI名称', dataIndex: 'name', key: 'name', width: 150 },
|
{ title: '分类', dataIndex: 'category', key: 'category', width: 100 },
|
{ title: '当前值', dataIndex: 'value', key: 'value', width: 120 },
|
{ title: '单位', dataIndex: 'unit', key: 'unit', width: 80 },
|
{ title: '预警状态', dataIndex: 'alertStatus', key: 'alertStatus', width: 100 },
|
];
|
|
async function loadData() {
|
loading.value = true;
|
try {
|
const overview = await getKpiOverview();
|
let list = overview.kpis || [];
|
if (selectedCategory.value) {
|
list = list.filter((k) => k.category === selectedCategory.value);
|
}
|
trendData.value = list;
|
} catch {
|
trendData.value = [];
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(loadData);
|
</script>
|
|
<template>
|
<Page :auto-content-height="true">
|
<div class="p-4">
|
<div class="mb-4 flex items-center gap-4">
|
<h2 class="text-lg font-bold">趋势分析</h2>
|
<Select
|
v-model:value="selectedCategory"
|
:options="CATEGORY_OPTIONS"
|
style="width: 160px"
|
allow-clear
|
@change="loadData"
|
/>
|
</div>
|
|
<Spin :spinning="loading">
|
<Table
|
:columns="columns"
|
:data-source="trendData"
|
:pagination="{ pageSize: 20 }"
|
row-key="code"
|
bordered
|
size="middle"
|
>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'alertStatus'">
|
<span v-if="record.alertStatus === 'critical'" class="text-red-500">严重</span>
|
<span v-else-if="record.alertStatus === 'warn'" class="text-orange-500">警告</span>
|
<span v-else class="text-green-500">正常</span>
|
</template>
|
</template>
|
</Table>
|
</Spin>
|
</div>
|
</Page>
|
</template>
|
