<script lang="ts" setup>
|
import type { MesDvStatisticsApi } from '#/api/mes/dv/statistics';
|
|
import { onMounted, ref } from 'vue';
|
|
import { Page } from '@vben/common-ui';
|
|
import { Card, Col, Row, Table, Tag } from 'ant-design-vue';
|
|
import { getDvStatisticsSummary } from '#/api/mes/dv/statistics';
|
|
defineOptions({ name: 'MesDvStatistics' });
|
|
const loading = ref(false);
|
const summary = ref<MesDvStatisticsApi.StatisticsSummary>({});
|
|
async function loadSummary() {
|
loading.value = true;
|
try {
|
summary.value = await getDvStatisticsSummary();
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(loadSummary);
|
</script>
|
|
<template>
|
<Page>
|
<Row :gutter="16" class="mb-4">
|
<Col :span="4">
|
<Card :loading="loading">
|
<div class="text-sm text-gray-500">设备总数</div>
|
<div class="mt-2 text-2xl font-bold">
|
{{ summary.totalMachinery ?? 0 }}
|
</div>
|
</Card>
|
</Col>
|
<Col :span="5">
|
<Card :loading="loading">
|
<div class="text-sm text-gray-500">生产中 / 停机 / 维护中</div>
|
<div class="mt-2 text-2xl font-bold">
|
<span class="text-green-600">{{ summary.producingCount ?? 0 }}</span>
|
<span class="mx-1 text-gray-400">/</span>
|
<span class="text-red-600">{{ summary.stoppedCount ?? 0 }}</span>
|
<span class="mx-1 text-gray-400">/</span>
|
<span class="text-orange-600">{{ summary.maintainingCount ?? 0 }}</span>
|
</div>
|
</Card>
|
</Col>
|
<Col :span="5">
|
<Card :loading="loading">
|
<div class="text-sm text-gray-500">设备故障率</div>
|
<div class="mt-2 text-2xl font-bold text-red-600">
|
{{ (summary.faultRate ?? 0).toFixed(1) }}%
|
</div>
|
</Card>
|
</Col>
|
<Col :span="5">
|
<Card :loading="loading">
|
<div class="text-sm text-gray-500">维修单（总数 / 待处理）</div>
|
<div class="mt-2 text-2xl font-bold">
|
{{ summary.totalRepair ?? 0 }}
|
<span class="text-sm text-gray-400">
|
/ {{ summary.processingRepair ?? 0 }}
|
</span>
|
</div>
|
</Card>
|
</Col>
|
<Col :span="5">
|
<Card :loading="loading">
|
<div class="text-sm text-gray-500">保养记录（总数 / 已完成）</div>
|
<div class="mt-2 text-2xl font-bold">
|
{{ summary.totalMainten ?? 0 }}
|
<span class="text-sm text-gray-400">
|
/ {{ summary.finishedMainten ?? 0 }}
|
</span>
|
</div>
|
</Card>
|
</Col>
|
</Row>
|
|
<Card title="按设备类型分布" :loading="loading">
|
<Table
|
row-key="machineryTypeId"
|
:data-source="summary.typeDistribution ?? []"
|
:pagination="false"
|
size="middle"
|
>
|
<Table.Column title="设备类型" data-index="machineryTypeName">
|
<template #default="{ record }">
|
<Tag color="blue">{{ record.machineryTypeName || '未分类' }}</Tag>
|
</template>
|
</Table.Column>
|
<Table.Column title="设备数量" data-index="count" align="right" />
|
<Table.Column title="占比" align="right">
|
<template #default="{ record }">
|
{{
|
summary.totalMachinery
|
? ((record.count / summary.totalMachinery) * 100).toFixed(1)
|
: 0
|
}}%
|
</template>
|
</Table.Column>
|
</Table>
|
</Card>
|
</Page>
|
</template>
|
