<script lang="ts" setup>
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
import type { MesBagCodeHomeApi } from '#/api/mes/bag-code-home';
|
|
import { ref, watch } from 'vue';
|
|
import { DICT_TYPE } from '@vben/constants';
|
import { getDictLabel } from '@vben/hooks';
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
import { Card } from 'ant-design-vue';
|
|
import { getStatusChartOptions } from '../chart-options';
|
import { BAG_CODE_STATUS_COLOR_MAP } from '../data';
|
|
defineOptions({ name: 'BagCodeHomeBagCodeStatusChart' });
|
|
const props = defineProps<{
|
list: MesBagCodeHomeApi.StatusItem[];
|
}>();
|
|
const chartRef = ref<EchartsUIType>();
|
const { renderEcharts } = useEcharts(chartRef);
|
|
watch(
|
() => props.list,
|
async (list) => {
|
const data = list.map((item) => ({
|
itemStyle: { color: BAG_CODE_STATUS_COLOR_MAP[item.status] || '#909399' },
|
name: getDictLabel(DICT_TYPE.MES_PRO_BAG_CODE_STATUS, item.status) || `状态${item.status}`,
|
value: item.count,
|
}));
|
await renderEcharts(getStatusChartOptions(data));
|
},
|
{ immediate: true },
|
);
|
</script>
|
|
<template>
|
<Card title="袋码状态分布" class="h-full">
|
<EchartsUI ref="chartRef" class="h-[320px] w-full" />
|
</Card>
|
</template>
|
