<script lang="ts" setup>
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
import { onMounted, ref } from 'vue';
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
import { Card, Col, Row, Spin } from 'ant-design-vue';
|
|
import { getManagementCockpitQuality } from '#/api/mes/management-cockpit';
|
|
import { getPieChartOptions, getQualityIndicatorChartOptions } from '../chart-options';
|
|
defineOptions({ name: 'ManagementCockpitQualityChart' });
|
|
const loading = ref(false);
|
const resultChartRef = ref<EchartsUIType>();
|
const indicatorChartRef = ref<EchartsUIType>();
|
const { renderEcharts: renderResult } = useEcharts(resultChartRef);
|
const { renderEcharts: renderIndicator } = useEcharts(indicatorChartRef);
|
|
/** 加载质检统计并渲染 */
|
async function loadData() {
|
loading.value = true;
|
try {
|
const data = await getManagementCockpitQuality();
|
// 1. 检验结果分布环形图
|
const pieData = (data.resultDistribution || []).map((item) => ({
|
name: item.name,
|
value: item.count,
|
}));
|
await renderResult(getPieChartOptions(pieData));
|
// 2. 四项指标均值 + 合格率柱状图
|
const indicators = data.indicatorList || [];
|
await renderIndicator(
|
getQualityIndicatorChartOptions(
|
indicators.map((i) => i.indicatorName || i.indicatorCode),
|
indicators.map((i) => Number(i.averageValue ?? 0)),
|
indicators.map((i) => Number(i.passRate ?? 0)),
|
),
|
);
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(() => {
|
loadData();
|
});
|
</script>
|
|
<template>
|
<Card title="质检维度统计" class="h-full">
|
<Spin :spinning="loading">
|
<Row :gutter="16">
|
<Col :lg="10" :md="24" :sm="24" :xs="24">
|
<div class="mb-1 text-sm text-gray-500">检验结果分布</div>
|
<EchartsUI ref="resultChartRef" class="h-[280px] w-full" />
|
</Col>
|
<Col :lg="14" :md="24" :sm="24" :xs="24">
|
<div class="mb-1 text-sm text-gray-500">四项指标均值与合格率</div>
|
<EchartsUI ref="indicatorChartRef" class="h-[280px] w-full" />
|
</Col>
|
</Row>
|
</Spin>
|
</Card>
|
</template>
|
