update charts

src/pages/store/component/StoreEventStructureChart.vue

@@ -6,17 +6,24 @@
 </template>
 
 <script setup lang="ts">
+import { Time } from "timi-web";
 import type { EChartsOption } from "echarts";
+import EventAPI from "@/api/EventAPI";
+import StoreChartAPI from "@/api/StoreChartAPI";
 import type { EventItem } from "@/types/EventItem";
 import type { StoreEventRecordDailyStatView } from "@/types/Store";
 import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
 
 const props = defineProps<{
 	dateTextList: string[];
-	eventList: EventItem[];
-	statMap: Record<string, StoreEventRecordDailyStatView[]>;
 }>();
 
+// ---------- 图表数据 ----------
+
+const eventList = ref<EventItem[]>([]);
+const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
+let statRequestId = 0;
+
 const chartOption = computed<EChartsOption>(() => ({
 	...buildStoreBaseChartOption(props.dateTextList),
 	legend: {
@@ -24,7 +31,7 @@ const chartOption = computed<EChartsOption>(() => ({
 	},
 	xAxis: {
 		type: "category",
-		data: props.eventList.map(item => item.name || "未命名事件"),
+		data: eventList.value.map(item => item.name || "未命名事件"),
 		axisTick: {
 			show: false
 		},
@@ -35,7 +42,7 @@ const chartOption = computed<EChartsOption>(() => ({
 	series: [{
 		name: "登记次数",
 		type: "bar",
-		data: props.eventList.map(item => ({
+		data: eventList.value.map(item => ({
 			value: countRecordByEvent(item.id || ""),
 			itemStyle: getEventColor(item) ? {
 				color: getEventColor(item)
@@ -46,13 +53,81 @@ const chartOption = computed<EChartsOption>(() => ({
 
 const { chartElement } = useStoreChart(chartOption);
 
+watch(() => props.dateTextList, 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.dateTextList.length) {
+		statMap.value = {};
+		return;
+	}
+
+	const eventIdList = getEventIdList();
+	if (!eventIdList.length) {
+		statMap.value = {};
+		return;
+	}
+
+	const requestId = ++statRequestId;
+	const dailyStatList = await StoreChartAPI.eventRecordDailyStat({
+		beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
+		endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1])),
+		eventIdList
+	});
+	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 getEventIdList(): string[] {
+	return eventList.value.map(item => item.id).filter((id): id is string => Boolean(id));
+}
+
+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">