update charts

src/pages/customer/component/CustomerEventStructureChart.vue

@@ -6,20 +6,28 @@
 </template>
 
 <script setup lang="ts">
+import { Time } from "timi-web";
 import type { EChartsOption } from "echarts";
+import CustomerChartAPI from "@/api/CustomerChartAPI";
+import EventAPI from "@/api/EventAPI";
 import type { EventItem } from "@/types/EventItem";
 import type { StoreEventRecordDailyStatView } from "@/types/Store";
 import { buildCustomerBaseChartOption, useCustomerChart } from "@/pages/customer/component/useCustomerChart";
 
 const props = defineProps<{
+	customerId: string;
 	dateTextList: string[];
-	eventList: EventItem[];
 	selectedEventIdList: string[];
-	statMap: Record<string, StoreEventRecordDailyStatView[]>;
 }>();
 
+// ---------- 图表数据 ----------
+
+const eventList = ref<EventItem[]>([]);
+const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
+let statRequestId = 0;
+
 const selectedEventIdSet = computed(() => new Set(props.selectedEventIdList));
-const visibleEventList = computed(() => props.eventList.filter(item => item.id && selectedEventIdSet.value.has(item.id)));
+const visibleEventList = computed(() => eventList.value.filter(item => item.id && selectedEventIdSet.value.has(item.id)));
 const chartOption = computed<EChartsOption>(() => ({
 	...buildCustomerBaseChartOption(props.dateTextList),
 	xAxis: {
@@ -48,13 +56,76 @@ const chartOption = computed<EChartsOption>(() => ({
 
 const { chartElement } = useCustomerChart(chartOption);
 
+watch([
+	() => props.customerId,
+	() => props.dateTextList,
+	() => props.selectedEventIdList
+], async () => {
+	await loadDailyStat();
+}, {
+	deep: true
+});
+
+onMounted(async () => {
+	await loadEvents();
+	await loadDailyStat();
+});
+
+async function loadEvents(): Promise<void> {
+	eventList.value = await EventAPI.listValid();
+}
+
+async function loadDailyStat(): Promise<void> {
+	if (!props.customerId || !props.dateTextList.length || !props.selectedEventIdList.length) {
+		statMap.value = {};
+		return;
+	}
+
+	const requestId = ++statRequestId;
+	const dailyStatList = await CustomerChartAPI.eventRecordDailyStat({
+		customerId: props.customerId,
+		beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
+		endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1])),
+		eventIdList: props.selectedEventIdList
+	});
+	if (requestId === statRequestId) {
+		statMap.value = groupRecordDailyStatByEventId(dailyStatList);
+	}
+}
+
 function countRecordByEvent(eventId: string): number {
-	return (props.statMap[eventId] || []).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
+	return (statMap.value[eventId] || []).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
 }
 
 function getEventColor(event: EventItem): string | undefined {
 	return event.color || undefined;
 }
+
+function groupRecordDailyStatByEventId(list: StoreEventRecordDailyStatView[]): Record<string, StoreEventRecordDailyStatView[]> {
+	const map: Record<string, StoreEventRecordDailyStatView[]> = {};
+	for (const item of list) {
+		if (!item.eventId) {
+			continue;
+		}
+		if (!map[item.eventId]) {
+			map[item.eventId] = [];
+		}
+		map[item.eventId].push(item);
+	}
+	return map;
+}
+
+// ---------- 日期 ----------
+
+function getDateStart(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 0, 0, 0, 0);
+}
+
+function getDateEnd(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 23, 59, 59, 999);
+}
 </script>
 
 <style scoped lang="less">