rest day in chart

src/pages/product/component/OrderDailyChart.vue

@@ -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))
 			},

src/pages/product/component/ProductFulfillmentTrendChart.vue

@@ -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))
 			},
 			{

src/pages/product/component/ProductSalesTrendChart.vue

@@ -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))
 			},
 			{

src/pages/product/component/ProductStockHealthTable.vue

@@ -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)" />

src/pages/product/component/ProductStockMovementChart.vue

@@ -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)))
 			},
 			{