add closed tag

src/pages/store/component/StoreEventRecordTrendChart.vue

@@ -19,12 +19,14 @@
 
 <script setup lang="ts">
 import { Time } from "timi-web";
-import type { EChartsOption } from "echarts";
+import type { EChartsOption, MarkAreaComponentOption } from "echarts";
 import EventAPI from "@/api/EventAPI";
+import StoreAPI from "@/api/StoreAPI";
 import StoreChartAPI from "@/api/StoreChartAPI";
 import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import type { EventItem } from "@/types/EventItem";
-import type { StoreEventRecordDailyStatView } from "@/types/Store";
+import type { StoreBusinessDay, StoreEventRecordDailyStatView } from "@/types/Store";
+import { getCurrentStoreId } from "@/utils/store";
 import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
 
 const props = defineProps<{
@@ -35,7 +37,9 @@ const props = defineProps<{
 
 const eventList = ref<EventItem[]>([]);
 const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
+const restDaySet = ref<Set<number>>(new Set());
 let statRequestId = 0;
+let restDayRequestId = 0;
 
 // ---------- 图表窗口 ----------
 
@@ -64,14 +68,15 @@ const chartOption = computed<EChartsOption>(() => ({
 		bottom: 0,
 		containLabel: true
 	},
-	series: eventList.value.map(event => ({
+	series: eventList.value.map((event, index) => ({
 		name: event.name || "未命名事件",
 		type: "bar",
 		stack: "record",
+		markArea: index < 1 ? buildRestDayMarkArea() : undefined,
 		itemStyle: getEventColor(event) ? {
 			color: getEventColor(event)
 		} : undefined,
-		data: visibleDateTextList.value.map(dateText => countRecordByEventAndDate(event.id || "", dateText))
+		data: visibleDateTextList.value.map(dateText => getRecordData(event.id || "", dateText))
 	}))
 }));
 
@@ -79,7 +84,10 @@ const { chartElement } = useStoreChart(chartOption);
 let resizeObserver: ResizeObserver | undefined;
 
 watch(() => props.dateTextList, async () => {
-	await loadDailyStat();
+	await Promise.all([
+		loadDailyStat(),
+		loadRestDays()
+	]);
 }, {
 	deep: true
 });
@@ -91,7 +99,10 @@ onMounted(async () => {
 		updateChartWidth();
 	}
 	await loadEvents();
-	await loadDailyStat();
+	await Promise.all([
+		loadDailyStat(),
+		loadRestDays()
+	]);
 });
 
 onBeforeUnmount(() => {
@@ -131,6 +142,64 @@ function countRecordByEventAndDate(eventId: string, dateText: string): number {
 	return statMap.value[eventId]?.find(item => item.dateValue === dateValue)?.dailyCount || 0;
 }
 
+function getRecordData(eventId: string, dateText: string): number | null {
+	return restDaySet.value.has(getDateValue(dateText)) ? null : countRecordByEventAndDate(eventId, dateText);
+}
+
+function buildRestDayMarkArea(): MarkAreaComponentOption | undefined {
+	const data: NonNullable<MarkAreaComponentOption["data"]> = [];
+	for (const dateText of visibleDateTextList.value) {
+		if (restDaySet.value.has(getDateValue(dateText))) {
+			data.push([{ name: "休", xAxis: dateText.slice(5) }, { xAxis: dateText.slice(5) }]);
+		}
+	}
+	if (!data.length) {
+		return undefined;
+	}
+
+	return {
+		silent: true,
+		itemStyle: {
+			color: "rgba(148, 163, 184, .12)"
+		},
+		label: {
+			color: "#64748b",
+			fontSize: 12,
+			formatter: "休",
+			position: "insideBottom",
+			show: true
+		},
+		data
+	};
+}
+
+async function loadRestDays(): Promise<void> {
+	const requestId = ++restDayRequestId;
+	const dateList = props.dateTextList;
+	const storeId = getCurrentStoreId();
+	if (!storeId || !dateList.length) {
+		restDaySet.value = new Set();
+		return;
+	}
+
+	try {
+		const list = await StoreAPI.businessDayCalendar(storeId, getDateValue(dateList[0]), getDateValue(dateList[dateList.length - 1]));
+		if (requestId === restDayRequestId) {
+			restDaySet.value = new Set(getRestDayList(list));
+		}
+	} catch {
+		if (requestId === restDayRequestId) {
+			restDaySet.value = new Set();
+		}
+	}
+}
+
+function getRestDayList(list: StoreBusinessDay[]): number[] {
+	return list
+		.filter(item => item.status === "CLOSED" && item.dateValue)
+		.map(item => item.dateValue as number);
+}
+
 function getEventColor(event: EventItem): string | undefined {
 	return event.color || undefined;
 }
@@ -188,6 +257,10 @@ 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 getDateValue(dateText: string): number {
+	return Number(dateText.replaceAll("-", ""));
+}
 </script>
 
 <style scoped lang="less">

src/pages/store/component/useStoreChart.ts

@@ -1,6 +1,6 @@
 import type { ECharts, EChartsOption } from "echarts";
 import { BarChart, LineChart, PieChart } from "echarts/charts";
-import { GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
+import { GridComponent, LegendComponent, MarkAreaComponent, TooltipComponent } from "echarts/components";
 import { init, use } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import type { ComputedRef, Ref } from "vue";
@@ -11,6 +11,7 @@ use([
 	PieChart,
 	GridComponent,
 	LegendComponent,
+	MarkAreaComponent,
 	TooltipComponent,
 	CanvasRenderer
 ]);