diff --git a/src/pages/store/component/StoreEventStructureChart.vue b/src/pages/store/component/StoreEventStructureChart.vue index eb4cb1a..eb0bcfe 100644 --- a/src/pages/store/component/StoreEventStructureChart.vue +++ b/src/pages/store/component/StoreEventStructureChart.vue @@ -6,6 +6,14 @@ class="chart" :style="chartStyle" /> + @@ -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 { } 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("-", "")); +}