<script lang="ts" setup>
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
import { computed, ref, watch } from 'vue';
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
import { Card, Empty, Select } from 'ant-design-vue';
|
|
import { getTraceConsumerScanDistribution } from '#/api/mes/trace-consumer-scan';
|
|
import { getScanDistributionChartOptions } from '../chart-options';
|
import { DISTRIBUTION_COLORS, GROUP_BY_OPTIONS, SOURCE_TYPE_LABEL_MAP } from '../data';
|
|
defineOptions({ name: 'MesTraceConsumerScanDistributionChart' });
|
|
const props = defineProps<{
|
startTime?: string;
|
endTime?: string;
|
}>();
|
|
const groupBy = ref('sourceType'); // 当前分组维度
|
const chartRef = ref<EchartsUIType>();
|
const { renderEcharts } = useEcharts(chartRef);
|
|
/** 分布数据是否为空 */
|
const hasData = ref(false);
|
|
/** 将后端原始分组名称转为可读名称 */
|
function displayName(name: string): string {
|
if (groupBy.value === 'sourceType') {
|
return SOURCE_TYPE_LABEL_MAP[name] || name;
|
}
|
return name;
|
}
|
|
/** 加载分布数据并渲染饼图 */
|
async function loadData() {
|
const data = await getTraceConsumerScanDistribution(
|
groupBy.value,
|
props.startTime,
|
props.endTime,
|
);
|
hasData.value = data.length > 0;
|
const chartData = data.map((d, index) => ({
|
itemStyle: {
|
color: DISTRIBUTION_COLORS[index % DISTRIBUTION_COLORS.length] ?? '#409EFF',
|
},
|
name: displayName(d.name),
|
value: d.count,
|
}));
|
await renderEcharts(getScanDistributionChartOptions(chartData));
|
}
|
|
/** 切换分组维度 */
|
function handleGroupByChange() {
|
loadData();
|
}
|
|
watch(
|
() => [props.startTime, props.endTime],
|
() => {
|
loadData();
|
},
|
{ immediate: true },
|
);
|
|
/** 当前分组维度的展示名称 */
|
const groupByLabel = computed(
|
() =>
|
GROUP_BY_OPTIONS.find((opt) => opt.value === groupBy.value)?.label ||
|
'分布',
|
);
|
</script>
|
|
<template>
|
<Card :title="`${groupByLabel}分布`" class="h-full">
|
<template #extra>
|
<Select
|
v-model:value="groupBy"
|
size="small"
|
style="width: 120px"
|
@change="handleGroupByChange"
|
>
|
<Select.Option
|
v-for="opt in GROUP_BY_OPTIONS"
|
:key="opt.value"
|
:value="opt.value"
|
>
|
{{ opt.label }}
|
</Select.Option>
|
</Select>
|
</template>
|
<div v-if="hasData" class="relative">
|
<EchartsUI ref="chartRef" class="h-[320px] w-full" />
|
</div>
|
<Empty v-else description="暂无扫码数据" class="h-[320px]" />
|
</Card>
|
</template>
|
