update charts

src/pages/store/component/StoreChartSummary.vue

@@ -0,0 +1,202 @@
+<template>
+	<section class="summary">
+		<div v-for="item in summaryList" :key="item.label" class="summary-item">
+			<span v-text="item.label" />
+			<strong v-text="item.value" />
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import EventAPI from "@/api/EventAPI";
+import StoreChartAPI from "@/api/StoreChartAPI";
+import type { CustomerDailyStatView } from "@/types/Customer";
+import type { EventItem } from "@/types/EventItem";
+import type { StoreEventRecordDailyStatView } from "@/types/Store";
+
+interface SummaryItem {
+	label: string;
+	value: string;
+}
+
+const props = defineProps<{
+	dateTextList: string[];
+}>();
+
+// ---------- 摘要数据 ----------
+
+const eventList = ref<EventItem[]>([]);
+const customerDailyStatList = ref<CustomerDailyStatView[]>([]);
+const recordDailyStatMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
+const todayDateValue = toDateValue(new Date());
+const weekBeginDateValue = toDateValue(getWeekBeginDate(new Date()));
+let summaryRequestId = 0;
+
+const summaryList = computed<SummaryItem[]>(() => [
+	{
+		label: "当前客户",
+		value: `${getLatestTotalCustomerCount()} 人`
+	},
+	{
+		label: "本周新增",
+		value: `${sumCustomerNewCount()} 人`
+	},
+	{
+		label: "本周登记",
+		value: `${sumActionDailyCount()} 次`
+	}
+]);
+
+watch(() => props.dateTextList, async () => {
+	await loadSummaryData();
+}, {
+	deep: true,
+	immediate: true
+});
+
+async function loadSummaryData(): Promise<void> {
+	if (!props.dateTextList.length) {
+		customerDailyStatList.value = [];
+		recordDailyStatMap.value = {};
+		return;
+	}
+
+	const requestId = ++summaryRequestId;
+	eventList.value = await EventAPI.listValid();
+	const eventIdList = getEventIdList();
+	const [customerStatList, recordDailyStatList] = await Promise.all([
+		StoreChartAPI.customerDailyStat({
+			beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
+			endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1]))
+		}),
+		eventIdList.length ? StoreChartAPI.eventRecordDailyStat({
+			beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
+			endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1])),
+			eventIdList
+		}) : Promise.resolve([])
+	]);
+	if (requestId === summaryRequestId) {
+		customerDailyStatList.value = customerStatList;
+		recordDailyStatMap.value = groupRecordDailyStatByEventId(recordDailyStatList);
+	}
+}
+
+// ---------- 统计 ----------
+
+function getLatestTotalCustomerCount(): number {
+	const latest = customerDailyStatList.value[customerDailyStatList.value.length - 1];
+	return latest?.totalCustomerCount || 0;
+}
+
+function sumCustomerNewCount(): number {
+	return customerDailyStatList.value.filter(isRecentWeekStat).reduce((sum, item) => sum + (item.newCustomerCount || 0), 0);
+}
+
+function sumActionDailyCount(): number {
+	return eventList.value.reduce((sum, item) => sum + countRecentWeekRecordByEvent(item.id || ""), 0);
+}
+
+function countRecentWeekRecordByEvent(eventId: string): number {
+	return (recordDailyStatMap.value[eventId] || []).filter(isRecentWeekStat).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
+}
+
+function isRecentWeekStat(item: { dateValue?: number }): boolean {
+	const dateValue = item.dateValue || 0;
+	return weekBeginDateValue <= dateValue && dateValue <= todayDateValue;
+}
+
+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;
+function getDateStart(date: Date): Date;
+function getDateStart(value: string | Date): Date {
+	if (typeof value !== "string") {
+		return new Date(value.getFullYear(), value.getMonth(), value.getDate(), 0, 0, 0, 0);
+	}
+	const [year, month, day] = value.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);
+}
+
+function getWeekBeginDate(date: Date): Date {
+	const value = getDateStart(date);
+	const day = value.getDay() || 7;
+	value.setDate(value.getDate() - day + 1);
+	return value;
+}
+
+function toDateValue(date: Date): number {
+	return Number(Time.formatDate(date).replaceAll("-", ""));
+}
+</script>
+
+<style scoped lang="less">
+.summary {
+	gap: .75rem;
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+
+	.summary-item {
+		padding: .875rem .625rem;
+		display: flex;
+		min-width: 0;
+		background: rgba(255, 255, 255, .92);
+		box-shadow: var(--td-shadow-1);
+		align-items: center;
+		border-radius: 1rem;
+		flex-direction: column;
+
+		span {
+			color: #52607a;
+			font-size: .75rem;
+		}
+
+		strong {
+			margin-top: .375rem;
+			color: #0f172a;
+			font-size: 1.125rem;
+			font-weight: 700;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.summary {
+		.summary-item {
+			background: rgba(15, 23, 42, .88);
+			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+			span {
+				color: #94a3b8;
+			}
+
+			strong {
+				color: #e2e8f0;
+			}
+		}
+	}
+}
+</style>

src/pages/store/component/StoreCustomerGenderChart.vue

@@ -7,12 +7,12 @@
 
 <script setup lang="ts">
 import type { EChartsOption } from "echarts";
+import StoreChartAPI from "@/api/StoreChartAPI";
 import type { CustomerGenderStatView } from "@/types/Customer";
 import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
 
 const props = defineProps<{
 	dateTextList: string[];
-	statList: CustomerGenderStatView[];
 }>();
 
 const genderColorMap = {
@@ -21,6 +21,10 @@ const genderColorMap = {
 	UNKNOWN: "#64748b"
 } as const;
 
+// ---------- 图表数据 ----------
+
+const statList = ref<CustomerGenderStatView[]>([]);
+
 const chartOption = computed<EChartsOption>(() => ({
 	...buildStoreBaseChartOption(props.dateTextList),
 	tooltip: {
@@ -70,8 +74,16 @@ const chartOption = computed<EChartsOption>(() => ({
 
 const { chartElement } = useStoreChart(chartOption);
 
+onMounted(async () => {
+	await loadCustomerGenderStat();
+});
+
+async function loadCustomerGenderStat(): Promise<void> {
+	statList.value = await StoreChartAPI.customerGenderStat();
+}
+
 function getGenderCount(genderCode: "MALE" | "FEMALE" | "UNKNOWN"): number {
-	return props.statList.find(item => item.genderCode === genderCode)?.count || 0;
+	return statList.value.find(item => item.genderCode === genderCode)?.count || 0;
 }
 </script>
 

src/pages/store/component/StoreCustomerGrowthChart.vue

@@ -14,16 +14,24 @@
 </template>
 
 <script setup lang="ts">
+import { Time } from "timi-web";
 import type { EChartsOption } from "echarts";
+import StoreChartAPI from "@/api/StoreChartAPI";
 import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import type { CustomerDailyStatView } from "@/types/Customer";
 import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
 
 const props = defineProps<{
 	dateTextList: string[];
-	statList: CustomerDailyStatView[];
 }>();
 
+// ---------- 图表数据 ----------
+
+const statList = ref<CustomerDailyStatView[]>([]);
+let statRequestId = 0;
+
+// ---------- 图表窗口 ----------
+
 const dateTextList = computed(() => props.dateTextList);
 const {
 	rangeText,
@@ -52,9 +60,44 @@ const chartOption = computed<EChartsOption>(() => ({
 
 const { chartElement } = useStoreChart(chartOption);
 
+watch(() => props.dateTextList, async () => {
+	await loadCustomerDailyStat();
+}, {
+	deep: true,
+	immediate: true
+});
+
+async function loadCustomerDailyStat(): Promise<void> {
+	if (!props.dateTextList.length) {
+		statList.value = [];
+		return;
+	}
+
+	const requestId = ++statRequestId;
+	const list = await StoreChartAPI.customerDailyStat({
+		beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
+		endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1]))
+	});
+	if (requestId === statRequestId) {
+		statList.value = list;
+	}
+}
+
 function getDailyStat(dateText: string): CustomerDailyStatView | undefined {
 	const dateValue = Number(dateText.replaceAll("-", ""));
-	return props.statList.find(item => item.dateValue === dateValue);
+	return statList.value.find(item => item.dateValue === dateValue);
+}
+
+// ---------- 日期 ----------
+
+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>
 

src/pages/store/component/StoreEventRecordCalendarSection.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script setup lang="ts">
+import EventAPI from "@/api/EventAPI";
 import StoreChartAPI from "@/api/StoreChartAPI";
 import EventRecordCalendar from "@/components/EventRecordCalendar.vue";
 import type { EventItem } from "@/types/EventItem";
@@ -17,10 +18,7 @@ import type { EventRecord } from "@/types/EventRecord";
 import type { StoreEventRecordCalendarView } from "@/types/Store";
 import { Time } from "timi-web";
 
-const props = defineProps<{
-	eventList: EventItem[];
-}>();
-
+const eventList = ref<EventItem[]>([]);
 const selectedEventIdList = ref<string[]>([]);
 const monthRecords = ref<EventRecord[]>([]);
 const isCalendarLoading = ref(false);
@@ -31,13 +29,16 @@ watch(monthCursor, async () => {
 	await loadMonthRecords();
 });
 
-watch(() => props.eventList, async () => {
+onMounted(async () => {
+	await loadEvents();
+	await loadMonthRecords();
+});
+
+async function loadEvents(): Promise<void> {
+	eventList.value = await EventAPI.listValid();
 	const eventIdList = getEventIdList();
 	selectedEventIdList.value = selectedEventIdList.value.length ? selectedEventIdList.value.filter(item => eventIdList.includes(item)) : eventIdList;
-	await loadMonthRecords();
-}, {
-	immediate: true
-});
+}
 
 async function loadMonthRecords(): Promise<void> {
 	const requestId = ++calendarRequestId;
@@ -66,7 +67,7 @@ async function loadMonthRecords(): Promise<void> {
 }
 
 function getEventIdList(): string[] {
-	return props.eventList.map(item => item.id).filter((id): id is string => Boolean(id));
+	return eventList.value.map(item => item.id).filter((id): id is string => Boolean(id));
 }
 
 function buildCalendarRecord(record: StoreEventRecordCalendarView): EventRecord {

src/pages/store/component/StoreEventRecordTrendChart.vue

@@ -14,7 +14,10 @@
 </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 ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import type { EventItem } from "@/types/EventItem";
 import type { StoreEventRecordDailyStatView } from "@/types/Store";
@@ -22,10 +25,16 @@ import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@
 
 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 dateTextList = computed(() => props.dateTextList);
 const {
 	rangeText,
@@ -37,7 +46,7 @@ const {
 } = useStoreChartWindow(dateTextList);
 const chartOption = computed<EChartsOption>(() => ({
 	...buildStoreBaseChartOption(visibleDateTextList.value),
-	series: props.eventList.map(event => ({
+	series: eventList.value.map(event => ({
 		name: event.name || "未命名事件",
 		type: "bar",
 		stack: "record",
@@ -50,14 +59,82 @@ 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 countRecordByEventAndDate(eventId: string, dateText: string): number {
 	const dateValue = Number(dateText.replaceAll("-", ""));
-	return props.statMap[eventId]?.find(item => item.dateValue === dateValue)?.dailyCount || 0;
+	return statMap.value[eventId]?.find(item => item.dateValue === dateValue)?.dailyCount || 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">

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">