<script lang="ts" setup>
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
import { onMounted, ref } from 'vue';
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
import { Card, RadioButton, RadioGroup } from 'ant-design-vue';
|
|
import { getManagementCockpitProductionTrend } from '#/api/mes/management-cockpit';
|
|
import { getProductionTrendChartOptions } from '../chart-options';
|
|
defineOptions({ name: 'ManagementCockpitProductionTrend' });
|
|
const trendDays = ref(30); // 当前天数范围
|
const chartRef = ref<EchartsUIType>();
|
const { renderEcharts } = useEcharts(chartRef);
|
|
/** 加载生产趋势数据并渲染 */
|
async function loadData() {
|
const data = await getManagementCockpitProductionTrend(trendDays.value);
|
const dates = data.map((d) => d.date.slice(5));
|
await renderEcharts(
|
getProductionTrendChartOptions(
|
dates,
|
data.map((d) => d.batchCount),
|
data.map((d) => d.bagCodeCount),
|
data.map((d) => d.palletCount),
|
data.map((d) => Number(d.inboundBagQuantity ?? 0)),
|
),
|
);
|
}
|
|
/** 切换天数范围 */
|
function handleDaysChange() {
|
loadData();
|
}
|
|
onMounted(() => {
|
loadData();
|
});
|
</script>
|
|
<template>
|
<Card title="生产趋势（近 N 天）" class="h-full">
|
<template #extra>
|
<RadioGroup v-model:value="trendDays" size="small" @change="handleDaysChange">
|
<RadioButton :value="7">近 7 天</RadioButton>
|
<RadioButton :value="30">近 30 天</RadioButton>
|
<RadioButton :value="90">近 90 天</RadioButton>
|
</RadioGroup>
|
</template>
|
<EchartsUI ref="chartRef" class="h-[320px] w-full" />
|
</Card>
|
</template>
|
