58 lines
1.9 KiB
Vue
58 lines
1.9 KiB
Vue
<!-- 首页工单状态分布饼图 -->
|
|
<template>
|
|
<el-card shadow="hover">
|
|
<template #header>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-16px font-600">工单状态分布</span>
|
|
</div>
|
|
</template>
|
|
<Echart :options="workOrderChartOptions" :height="280" />
|
|
</el-card>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { EChartsOption } from 'echarts'
|
|
import { MesHomeStatisticsApi, MesHomeWorkOrderStatusVO } from '@/api/mes/home'
|
|
import { MesProWorkOrderStatusEnum } from '@/views/mes/utils/constants'
|
|
|
|
defineOptions({ name: 'HomeWorkOrderChart' })
|
|
|
|
const statusColorMap: Record<number, string> = {
|
|
[MesProWorkOrderStatusEnum.PREPARE]: '#909399', // 草稿
|
|
[MesProWorkOrderStatusEnum.CONFIRMED]: '#409EFF', // 已确认
|
|
[MesProWorkOrderStatusEnum.FINISHED]: '#67C23A', // 已完成
|
|
[MesProWorkOrderStatusEnum.CANCELED]: '#F56C6C' // 已取消
|
|
} // 工单状态对应的颜色映射
|
|
const workOrderChartOptions = reactive<EChartsOption>({
|
|
tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
|
|
legend: { bottom: 0, type: 'scroll' },
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
radius: ['40%', '70%'],
|
|
avoidLabelOverlap: true,
|
|
itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
|
|
label: { show: true, formatter: '{b}\n{c}' },
|
|
emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
|
|
data: []
|
|
}
|
|
]
|
|
}) as EChartsOption // ECharts 饼图配置
|
|
|
|
/** 加载工单状态分布数据并更新饼图 */
|
|
const loadData = async () => {
|
|
const data: MesHomeWorkOrderStatusVO[] =
|
|
await MesHomeStatisticsApi.getWorkOrderStatusDistribution()
|
|
;(workOrderChartOptions as any).series[0].data = data.map((d) => ({
|
|
name: d.statusName,
|
|
value: d.count,
|
|
itemStyle: { color: statusColorMap[d.status] || '#409EFF' }
|
|
}))
|
|
}
|
|
|
|
/** 组件挂载时自动加载数据 */
|
|
onMounted(() => {
|
|
loadData()
|
|
})
|
|
</script>
|