rest day in chart

2026-09-23 15:43:31 +08:00
parent 7595df5df9
commit 9f4a7d7b2d
8 changed files with 120 additions and 77 deletions
@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoSalesOrderDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, formatChartYuan, formatQuantity, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";

 defineOptions({
 	name: "OrderDailyChart"
@@ -25,6 +26,9 @@ const props = defineProps<{
 	loading: boolean;
 }>();

+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
 function buildOption(visibleDateTextList: string[]): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
@@ -58,6 +62,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				name: "订单数",
 				type: "bar",
 				yAxisIndex: 0,
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, window.innerWidth - 32),
 				tooltip: { valueFormatter: value => formatQuantity(Number(value)) },
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.orderCount))
 			},
@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductFulfillmentDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";

 defineOptions({
 	name: "ProductFulfillmentTrendChart"
@@ -25,6 +26,9 @@ const props = defineProps<{
 	loading: boolean;
 }>();

+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
 function buildOption(visibleDateTextList: string[]): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
@@ -40,6 +44,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				name: "直接履约",
 				type: "bar",
 				stack: "fulfillment",
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, window.innerWidth - 32),
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directBaseQuantity))
 			},
 			{
@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductSalesDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";

 defineOptions({
 	name: "ProductSalesTrendChart"
@@ -25,6 +26,9 @@ const props = defineProps<{
 	loading: boolean;
 }>();

+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
 function buildOption(visibleDateTextList: string[]): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
@@ -58,6 +62,7 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 				type: "bar",
 				stack: "quantity",
 				yAxisIndex: 0,
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, window.innerWidth - 32),
 				data: visibleDateTextList.map(dateText => getNumber(getDailyItem(props.list, dateText)?.directBaseQuantity))
 			},
 			{
@@ -20,7 +20,7 @@
 				<tbody>
 					<tr v-for="item in sortedList" :key="item.productId">
 						<td>
-							<div class="product-name" v-text="item.productName + '长名称长名称长名称长名称长名称长名称长名称长名称长名称' || '未命名产品'" />
+							<div class="product-name" v-text="item.productName || '未命名产品'" />
 							<div v-if="hasLowStockSku(item)" class="sku-list">
 								<div v-for="sku in getLowStockSkuList(item)" :key="`${sku.skuId}-${sku.skuCode}`" class="sku-item">
 									<span v-text="getSkuName(sku)" />
@@ -14,6 +14,7 @@ import type { EChartsOption } from "echarts";
 import DateRangeChartCard from "@/components/DateRangeChartCard.vue";
 import type { GaoProductStockMovementDailyStatView } from "@/types/GaoChart";
 import { buildAxisChartOption, getDailyItem, getNumber } from "@/pages/product/component/chartUtils";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";

 defineOptions({
 	name: "ProductStockMovementChart"
@@ -25,6 +26,9 @@ const props = defineProps<{
 	loading: boolean;
 }>();

+const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
+
 function buildOption(visibleDateTextList: string[]): EChartsOption {
 	const labelList = visibleDateTextList.map(item => item.slice(5));
 	return {
@@ -40,11 +44,14 @@ function buildOption(visibleDateTextList: string[]): EChartsOption {
 			{
 				name: "入库",
 				type: "bar",
+				stack: "stock-movement",
+				markArea: buildRestDayMarkArea(visibleDateTextList, restDaySet.value, window.innerWidth - 32),
 				data: visibleDateTextList.map(dateText => Math.abs(getNumber(getDailyItem(props.list, dateText)?.inQuantity)))
 			},
 			{
 				name: "出库",
 				type: "bar",
+				stack: "stock-movement",
 				data: visibleDateTextList.map(dateText => -Math.abs(getNumber(getDailyItem(props.list, dateText)?.outQuantity)))
 			},
 			{
@@ -20,6 +20,7 @@ import StoreChartAPI from "@/api/StoreChartAPI";
 import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import type { CustomerDailyStatCustomerView, CustomerDailyStatView } from "@/types/Customer";
 import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";

 const props = defineProps<{
 	dateTextList: string[];
@@ -43,6 +44,7 @@ const {
 	visibleDateTextList,
 	handleSliderChange
 } = useStoreChartWindow(dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
 const chartOption = computed<EChartsOption>(() => ({
 	...buildStoreBaseChartOption(visibleDateTextList.value),
 	grid: {
@@ -82,6 +84,7 @@ const chartOption = computed<EChartsOption>(() => ({
 			name: "客户总量",
 			type: "line",
 			yAxisIndex: 0,
+			markArea: buildRestDayMarkArea(visibleDateTextList.value, restDaySet.value, window.innerWidth - 32),
 			smooth: true,
 			showSymbol: false,
 			data: visibleDateTextList.value.map(dateText => getDailyStat(dateText)?.totalCustomerCount || 0)
@@ -19,13 +19,13 @@

 <script setup lang="ts">
 import { Time } from "timi-web";
-import type { EChartsOption, MarkAreaComponentOption } from "echarts";
+import type { EChartsOption } from "echarts";
 import StoreChartAPI from "@/api/StoreChartAPI";
 import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import type { EventItem } from "@/types/EventItem";
-import type { StoreBusinessDay, StoreEventRecordDailyStatView } from "@/types/Store";
-import { getCurrentStoreId } from "@/utils/store";
+import type { StoreEventRecordDailyStatView } from "@/types/Store";
 import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";

 const props = defineProps<{
 	dateTextList: string[];
@@ -35,14 +35,13 @@ 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;

 // ---------- 图表窗口 ----------

 const chartWidth = ref(window.innerWidth);
 const dateTextList = computed(() => props.dateTextList);
+const { restDaySet } = useRestDayCalendar(dateTextList);
 const {
 	rangeText,
 	showSlider,
@@ -54,14 +53,6 @@ const {
 const legendRowCount = computed(() => countLegendRows(eventList.value.map(event => event.name || "未命名事件")));
 const chartHeight = computed(() => `${16 + Math.max(0, legendRowCount.value - 1) * 1.5}rem`);
 const legendBottom = computed(() => 20 + legendRowCount.value * 24);
-const showRestDayLabel = computed(() => {
-	const dateCount = visibleDateTextList.value.length;
-	if (!dateCount) {
-		return false;
-	}
-	const gridWidth = Math.max(0, chartWidth.value - 24);
-	return 24 <= gridWidth / dateCount;
-});
 const chartStyle = computed(() => ({
 	height: chartHeight.value
 }));
@@ -90,7 +81,7 @@ const chartOption = computed<EChartsOption>(() => ({
 		name: event.name || "未命名事件",
 		type: "bar",
 		stack: "record",
-		markArea: index < 1 ? buildRestDayMarkArea() : undefined,
+		markArea: index < 1 ? buildRestDayMarkArea(visibleDateTextList.value, restDaySet.value, chartWidth.value) : undefined,
 		itemStyle: getEventColor(event) ? {
 			color: getEventColor(event)
 		} : undefined,
@@ -102,10 +93,7 @@ const { chartElement } = useStoreChart(chartOption);
 let resizeObserver: ResizeObserver | undefined;

 watch(() => props.dateTextList, async () => {
-	await Promise.all([
-		loadDailyStat(),
-		loadRestDays()
-	]);
+	await loadDailyStat();
 }, {
 	deep: true
 });
@@ -117,10 +105,7 @@ onMounted(async () => {
 		updateChartWidth();
 	}
 	await loadEvents();
-	await Promise.all([
-		loadDailyStat(),
-		loadRestDays()
-	]);
+	await loadDailyStat();
 });

 onBeforeUnmount(() => {
@@ -164,60 +149,6 @@ 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 (let dateIndex = 0; dateIndex < visibleDateTextList.value.length; dateIndex++) {
-		const dateText = visibleDateTextList.value[dateIndex];
-		if (restDaySet.value.has(getDateValue(dateText))) {
-			data.push([{ name: "休", xAxis: dateIndex }, { xAxis: dateIndex }]);
-		}
-	}
-	if (!data.length) {
-		return undefined;
-	}
-	return {
-		silent: true,
-		itemStyle: {
-			color: "rgba(148, 163, 184, .12)"
-		},
-		label: {
-			color: "#64748b",
-			fontSize: 12,
-			formatter: "休",
-			position: "insideBottom",
-			show: showRestDayLabel.value
-		},
-		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 StoreChartAPI.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;
 }
@@ -0,0 +1,87 @@
+import type { ComputedRef } from "vue";
+import type { MarkAreaComponentOption } from "echarts";
+import StoreChartAPI from "@/api/StoreChartAPI";
+import type { StoreBusinessDay } from "@/types/Store";
+import { getCurrentStoreId } from "@/utils/store";
+
+export function useRestDayCalendar(dateTextList: ComputedRef<string[]>) {
+	const restDaySet = ref<Set<number>>(new Set());
+	let requestId = 0;
+
+	watch(dateTextList, async () => {
+		await loadRestDays();
+	}, {
+		deep: true,
+		immediate: true
+	});
+
+	async function loadRestDays(): Promise<void> {
+		const currentRequestId = ++requestId;
+		const dateList = dateTextList.value;
+		const storeId = getCurrentStoreId();
+		if (!storeId || !dateList.length) {
+			restDaySet.value = new Set();
+			return;
+		}
+
+		try {
+			const businessDayList = await StoreChartAPI.businessDayCalendar(
+				storeId,
+				getDateValue(dateList[0]),
+				getDateValue(dateList[dateList.length - 1])
+			);
+			if (currentRequestId === requestId) {
+				restDaySet.value = new Set(getRestDayList(businessDayList));
+			}
+		} catch {
+			if (currentRequestId === requestId) {
+				restDaySet.value = new Set();
+			}
+		}
+	}
+
+	return {
+		restDaySet
+	};
+}
+
+export function buildRestDayMarkArea(
+	dateTextList: string[],
+	restDaySet: ReadonlySet<number>,
+	chartWidth: number
+): MarkAreaComponentOption | undefined {
+	const data: NonNullable<MarkAreaComponentOption["data"]> = [];
+	for (let dateIndex = 0; dateIndex < dateTextList.length; dateIndex++) {
+		const dateText = dateTextList[dateIndex];
+		if (dateText && restDaySet.has(getDateValue(dateText))) {
+			data.push([{ name: "休", xAxis: dateIndex }, { xAxis: dateIndex }]);
+		}
+	}
+	if (!data.length) {
+		return undefined;
+	}
+	return {
+		silent: true,
+		itemStyle: {
+			color: "rgba(148, 163, 184, .12)"
+		},
+		label: {
+			color: "#64748b",
+			fontSize: 12,
+			formatter: "休",
+			position: "insideBottom",
+			show: 0 < dateTextList.length && 24 <= Math.max(0, chartWidth - 24) / dateTextList.length
+		},
+		data
+	};
+}
+
+function getRestDayList(list: StoreBusinessDay[]): number[] {
+	return list
+		.filter(item => item.status === "CLOSED" && item.dateValue)
+		.map(item => item.dateValue as number);
+}
+
+function getDateValue(dateText: string): number {
+	return Number(dateText.replaceAll("-", ""));
+}