<script lang="ts" setup>
|
import type { EchartsUIType } from '@vben/plugins/echarts';
|
|
import { ref, watch } from 'vue';
|
|
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
|
import { Card } from 'ant-design-vue';
|
|
import { getTraceConsumerScanTrend } from '#/api/mes/trace-consumer-scan';
|
|
import { getScanTrendChartOptions } from '../chart-options';
|
|
defineOptions({ name: 'MesTraceConsumerScanTrendChart' });
|
|
const props = defineProps<{
|
startTime?: string;
|
endTime?: string;
|
}>();
|
|
const chartRef = ref<EchartsUIType>();
|
const { renderEcharts } = useEcharts(chartRef);
|
|
/** 加载趋势数据并渲染折线图 */
|
async function loadData() {
|
const data = await getTraceConsumerScanTrend(props.startTime, props.endTime);
|
const dates = data.map((d) => d.date.slice(5)); // yyyy-MM-dd -> MM-dd
|
const totals = data.map((d) => d.total);
|
const success = data.map((d) => d.success);
|
const failed = data.map((d) => d.failed);
|
await renderEcharts(getScanTrendChartOptions(dates, totals, success, failed));
|
}
|
|
watch(
|
() => [props.startTime, props.endTime],
|
() => {
|
loadData();
|
},
|
{ immediate: true },
|
);
|
</script>
|
|
<template>
|
<Card title="扫码访问趋势" class="h-full">
|
<EchartsUI ref="chartRef" class="h-[320px] w-full" />
|
</Card>
|
</template>
|
