feat(mes): 迁移 home 首页（优化代码）
YunaiV
parent
7d75ab8d8e
commit
dd4b7e045a
|
|
@ -26,64 +26,3 @@ export const WORK_ORDER_STATUS_COLOR_MAP: Record<number, string> = {
|
|||
[MesProWorkOrderStatusEnum.FINISHED]: '#67C23A', // 已完成
|
||||
[MesProWorkOrderStatusEnum.CANCELED]: '#F56C6C', // 已取消
|
||||
};
|
||||
|
||||
/** 生产趋势折线图配置 */
|
||||
export function getProductionTrendChartOptions(
|
||||
dates: string[],
|
||||
quantities: number[],
|
||||
qualified: number[],
|
||||
unqualified: number[],
|
||||
): any {
|
||||
return {
|
||||
grid: { bottom: 40, left: 50, right: 20, top: 20 },
|
||||
legend: { bottom: 0, data: ['产量', '合格品', '不良品'] },
|
||||
series: [
|
||||
{
|
||||
areaStyle: { color: 'rgba(64,158,255,0.15)' },
|
||||
data: quantities,
|
||||
itemStyle: { color: '#409EFF' },
|
||||
name: '产量',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
data: qualified,
|
||||
itemStyle: { color: '#67C23A' },
|
||||
name: '合格品',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
data: unqualified,
|
||||
itemStyle: { color: '#F56C6C' },
|
||||
name: '不良品',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
},
|
||||
],
|
||||
tooltip: { axisPointer: { type: 'cross' }, trigger: 'axis' },
|
||||
xAxis: { boundaryGap: false, data: dates, type: 'category' },
|
||||
yAxis: { minInterval: 1, type: 'value' },
|
||||
};
|
||||
}
|
||||
|
||||
/** 工单状态分布饼图配置 */
|
||||
export function getWorkOrderStatusChartOptions(
|
||||
data: Array<{ itemStyle: { color: string }; name: string; value: number }>,
|
||||
): any {
|
||||
return {
|
||||
legend: { bottom: 0, type: 'scroll' },
|
||||
series: [
|
||||
{
|
||||
avoidLabelOverlap: true,
|
||||
data,
|
||||
emphasis: { label: { fontSize: 14, fontWeight: 'bold', show: true } },
|
||||
itemStyle: { borderColor: '#fff', borderRadius: 6, borderWidth: 2 },
|
||||
label: { formatter: '{b}\n{c}', show: true },
|
||||
radius: ['40%', '70%'],
|
||||
type: 'pie',
|
||||
},
|
||||
],
|
||||
tooltip: { formatter: '{b}: {c} ({d}%)', trigger: 'item' },
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { Card, RadioButton, RadioGroup } from 'ant-design-vue';
|
|||
|
||||
import { getProductionTrend } from '#/api/mes/home';
|
||||
|
||||
import { getProductionTrendChartOptions } from '../data';
|
||||
import { getProductionTrendChartOptions } from '../chart-options';
|
||||
|
||||
defineOptions({ name: 'MesHomeProductionTrend' });
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ import { Card } from 'ant-design-vue';
|
|||
|
||||
import { getWorkOrderStatusDistribution } from '#/api/mes/home';
|
||||
|
||||
import { getWorkOrderStatusChartOptions, WORK_ORDER_STATUS_COLOR_MAP } from '../data';
|
||||
import { getWorkOrderStatusChartOptions } from '../chart-options';
|
||||
import { WORK_ORDER_STATUS_COLOR_MAP } from '../data';
|
||||
|
||||
defineOptions({ name: 'MesHomeWorkOrderChart' });
|
||||
|
||||
|
|
|
|||
|
|
@ -26,64 +26,3 @@ export const WORK_ORDER_STATUS_COLOR_MAP: Record<number, string> = {
|
|||
[MesProWorkOrderStatusEnum.FINISHED]: '#67C23A', // 已完成
|
||||
[MesProWorkOrderStatusEnum.CANCELED]: '#F56C6C', // 已取消
|
||||
};
|
||||
|
||||
/** 生产趋势折线图配置 */
|
||||
export function getProductionTrendChartOptions(
|
||||
dates: string[],
|
||||
quantities: number[],
|
||||
qualified: number[],
|
||||
unqualified: number[],
|
||||
): any {
|
||||
return {
|
||||
grid: { bottom: 40, left: 50, right: 20, top: 20 },
|
||||
legend: { bottom: 0, data: ['产量', '合格品', '不良品'] },
|
||||
series: [
|
||||
{
|
||||
areaStyle: { color: 'rgba(64,158,255,0.15)' },
|
||||
data: quantities,
|
||||
itemStyle: { color: '#409EFF' },
|
||||
name: '产量',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
data: qualified,
|
||||
itemStyle: { color: '#67C23A' },
|
||||
name: '合格品',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
data: unqualified,
|
||||
itemStyle: { color: '#F56C6C' },
|
||||
name: '不良品',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
},
|
||||
],
|
||||
tooltip: { axisPointer: { type: 'cross' }, trigger: 'axis' },
|
||||
xAxis: { boundaryGap: false, data: dates, type: 'category' },
|
||||
yAxis: { minInterval: 1, type: 'value' },
|
||||
};
|
||||
}
|
||||
|
||||
/** 工单状态分布饼图配置 */
|
||||
export function getWorkOrderStatusChartOptions(
|
||||
data: Array<{ itemStyle: { color: string }; name: string; value: number }>,
|
||||
): any {
|
||||
return {
|
||||
legend: { bottom: 0, type: 'scroll' },
|
||||
series: [
|
||||
{
|
||||
avoidLabelOverlap: true,
|
||||
data,
|
||||
emphasis: { label: { fontSize: 14, fontWeight: 'bold', show: true } },
|
||||
itemStyle: { borderColor: '#fff', borderRadius: 6, borderWidth: 2 },
|
||||
label: { formatter: '{b}\n{c}', show: true },
|
||||
radius: ['40%', '70%'],
|
||||
type: 'pie',
|
||||
},
|
||||
],
|
||||
tooltip: { formatter: '{b}: {c} ({d}%)', trigger: 'item' },
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { ElCard, ElRadioButton, ElRadioGroup } from 'element-plus';
|
|||
|
||||
import { getProductionTrend } from '#/api/mes/home';
|
||||
|
||||
import { getProductionTrendChartOptions } from '../data';
|
||||
import { getProductionTrendChartOptions } from '../chart-options';
|
||||
|
||||
defineOptions({ name: 'MesHomeProductionTrend' });
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@ import { ElCard } from 'element-plus';
|
|||
|
||||
import { getWorkOrderStatusDistribution } from '#/api/mes/home';
|
||||
|
||||
import { getWorkOrderStatusChartOptions, WORK_ORDER_STATUS_COLOR_MAP } from '../data';
|
||||
import { getWorkOrderStatusChartOptions } from '../chart-options';
|
||||
import { WORK_ORDER_STATUS_COLOR_MAP } from '../data';
|
||||
|
||||
defineOptions({ name: 'MesHomeWorkOrderChart' });
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue