<script lang="ts" setup>
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
import { Card } from 'ant-design-vue';
|
|
import { getWorkOrderStatusDistribution } from '#/api/mes/home';
|
|
import { useHomeAccess } from '#/utils/use-home-access';
|
|
import { getWorkOrderStatusChartOptions } from '../chart-options';
|
import { HOME_BLOCK_MENUS, WORK_ORDER_STATUS_COLOR_MAP } from '../data';
|
|
defineOptions({ name: 'MesHomeWorkOrderChart' });
|
|
const chartRef = ref<EchartsUIType>();
|
const { renderEcharts } = useEcharts(chartRef);
|
const { canSeeMenu } = useHomeAccess();
|
|
/** 菜单没开就不展示、不请求 */
|
const showChart = computed(() => canSeeMenu(HOME_BLOCK_MENUS.workOrder));
|
|
/** 加载订单状态分布数据并渲染饼图 */
|
async function loadData() {
|
if (!showChart.value) return;
|
const data = await getWorkOrderStatusDistribution();
|
const chartData = data.map((d) => ({
|
itemStyle: { color: WORK_ORDER_STATUS_COLOR_MAP[d.status] || '#409EFF' },
|
name: d.statusName,
|
value: d.count,
|
}));
|
await renderEcharts(getWorkOrderStatusChartOptions(chartData));
|
}
|
|
onMounted(() => {
|
loadData();
|
});
|
</script>
|
|
<template>
|
<Card v-if="showChart" title="订单状态分布" class="h-full">
|
<EchartsUI ref="chartRef" class="h-[280px] w-full" />
|
</Card>
|
</template>
|
