add chart range slider

src/pages/store/component/StoreEventStructureChart.vue

@@ -6,6 +6,14 @@
 			class="chart"
 			:style="chartStyle"
 		/>
+		<chart-range-slider
+			v-if="showSlider"
+			:model-value="sliderValue"
+			:max="maxSliderValue"
+			:min-range="5"
+			:label="rangeText"
+			@change="handleSliderChange"
+		/>
 	</section>
 </template>
 
@@ -13,9 +21,10 @@
 import { Time } from "timi-web";
 import type { EChartsOption } from "echarts";
 import StoreChartAPI from "@/api/StoreChartAPI";
+import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
 import type { EventItem } from "@/types/EventItem";
 import type { StoreEventRecordDailyStatView } from "@/types/Store";
-import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
+import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
 
 const chartColorList = ["#2563eb", "#0f766e", "#d97706", "#db2777", "#7c3aed"];
 
@@ -32,6 +41,16 @@ let statRequestId = 0;
 // ---------- 图表窗口 ----------
 
 const chartWidth = ref(window.innerWidth);
+const dateTextList = computed(() => props.dateTextList);
+const {
+	rangeText,
+	showSlider,
+	sliderValue,
+	maxSliderValue,
+	visibleDateTextList,
+	handleSliderChange
+} = useStoreChartWindow(dateTextList);
+const visibleDateValueSet = computed(() => new Set(visibleDateTextList.value.map(getDateValue)));
 const shouldRotateAxisLabel = computed(() => eventList.value.length > 4 || eventList.value.some(item => 6 < getEventName(item).length));
 const legendRowCount = computed(() => countLegendRows(eventList.value.map(getEventName)));
 const chartHeight = computed(() => `${16 + Math.max(0, legendRowCount.value - 1) * 1.5}rem`);
@@ -137,7 +156,9 @@ async function loadDailyStat(): Promise<void> {
 }
 
 function countRecordByEvent(eventId: string): number {
-	return (statMap.value[eventId] || []).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
+	return (statMap.value[eventId] || []).reduce((sum, item) => {
+		return visibleDateValueSet.value.has(item.dateValue || 0) ? sum + (item.dailyCount || 0) : sum;
+	}, 0);
 }
 
 function getEventColor(event: EventItem): string | undefined {
@@ -205,6 +226,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">