add point chart

2026-09-23 21:54:19 +08:00
parent f8574c387d
commit 3a9dbbb60b
14 changed files with 462 additions and 93 deletions
@@ -0,0 +1,225 @@
+<template>
+	<section class="chart-section">
+		<div class="title">
+			<h2>每日积分变动趋势</h2>
+		</div>
+		<div ref="chartElement" class="chart" />
+		<div v-if="loading" class="center-tips">
+			<t-loading size="1.5rem" text="加载中" />
+		</div>
+		<chart-range-slider
+			v-if="showSlider"
+			:model-value="sliderValue"
+			:max="maxSliderValue"
+			:min-range="5"
+			:label="rangeText"
+			@change="handleSliderChange"
+		/>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import type { EChartsOption } from "echarts";
+import GaoPointChartAPI from "@/api/GaoPointChartAPI";
+import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
+import type { GaoPointDailyStatView } from "@/types/GaoChart";
+import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
+import { buildRestDayMarkArea, useRestDayCalendar } from "@/pages/store/component/useRestDayCalendar";
+
+defineOptions({
+	name: "StorePointDailyTrendChart"
+});
+
+const props = defineProps<{
+	dateTextList: string[];
+}>();
+
+const dateTextList = computed(() => props.dateTextList);
+const chartWidth = ref(window.innerWidth);
+const statList = ref<GaoPointDailyStatView[]>([]);
+const loading = ref(false);
+let statRequestId = 0;
+const { restDaySet } = useRestDayCalendar(dateTextList);
+const {
+	rangeText,
+	showSlider,
+	sliderValue,
+	maxSliderValue,
+	visibleDateTextList,
+	handleSliderChange
+} = useStoreChartWindow(dateTextList);
+const chartOption = computed<EChartsOption>(() => {
+	const labelList = visibleDateTextList.value.map(item => item.slice(5));
+	return {
+		...buildStoreBaseChartOption(visibleDateTextList.value),
+		grid: {
+			top: 32,
+			left: 0,
+			right: 0,
+			bottom: 0,
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			data: labelList,
+			axisLine: { onZero: true },
+			axisTick: { show: true, length: 0, interval: 0 },
+			axisLabel: { color: "#52607a", interval: "auto", hideOverlap: true }
+		},
+		series: [
+			{
+				name: "获得积分",
+				type: "bar",
+				stack: "stock-movement",
+				markArea: buildRestDayMarkArea(visibleDateTextList.value, restDaySet.value, chartWidth.value),
+				data: visibleDateTextList.value.map(dateText => Math.abs(getNumber(getDailyItem(dateText)?.earnedPoints)))
+			},
+			{
+				name: "消耗积分",
+				type: "bar",
+				stack: "stock-movement",
+				data: visibleDateTextList.value.map(dateText => -Math.abs(getNumber(getDailyItem(dateText)?.consumedPoints)))
+			},
+			{
+				name: "获得与消耗差值",
+				type: "line",
+				smooth: true,
+				data: visibleDateTextList.value.map(dateText => getNumber(getDailyItem(dateText)?.netChangePoints))
+			}
+		]
+	};
+});
+const { chartElement } = useStoreChart(chartOption);
+let resizeObserver: ResizeObserver | undefined;
+
+watch(() => props.dateTextList, async () => {
+	await loadDailyStat();
+}, {
+	deep: true,
+	immediate: true
+});
+
+onMounted(() => {
+	resizeObserver = new window.ResizeObserver(updateChartWidth);
+	if (chartElement.value) {
+		resizeObserver.observe(chartElement.value);
+		updateChartWidth();
+	}
+});
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect();
+	resizeObserver = undefined;
+});
+
+async function loadDailyStat(): Promise<void> {
+	if (!props.dateTextList.length) {
+		statRequestId++;
+		statList.value = [];
+		loading.value = false;
+		return;
+	}
+
+	const requestId = ++statRequestId;
+	loading.value = true;
+	try {
+		const list = await GaoPointChartAPI.dailyTrend({
+			beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
+			endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1]))
+		});
+		if (requestId === statRequestId) {
+			statList.value = list;
+		}
+	} finally {
+		if (requestId === statRequestId) {
+			loading.value = false;
+		}
+	}
+}
+
+function getDailyItem(dateText: string): GaoPointDailyStatView | undefined {
+	const dateValue = Number(dateText.replaceAll("-", ""));
+	return statList.value.find(item => item.dateValue === dateValue);
+}
+
+function getNumber(value?: number): number {
+	return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+
+function updateChartWidth(): void {
+	chartWidth.value = chartElement.value?.clientWidth || window.innerWidth;
+}
+
+function getDateStart(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 0, 0, 0, 0);
+}
+
+function getDateEnd(dateText: string): Date {
+	const [year, month, day] = dateText.split("-").map(Number);
+	return new Date(year, month - 1, day, 23, 59, 59, 999);
+}
+</script>
+
+<style scoped lang="less">
+.chart-section {
+	padding: 1rem;
+	position: relative;
+	background: rgba(255, 255, 255, .92);
+	box-shadow: var(--td-shadow-1);
+	border-radius: 1.25rem;
+
+	.title {
+		gap: .5rem;
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+
+		h2 {
+			margin: 0 0 .875rem 0;
+			color: #0f172a;
+			font-size: 1rem;
+			font-weight: 700;
+		}
+
+		.caption {
+			color: #94a3b8;
+			font-size: .6875rem;
+		}
+	}
+
+	.chart {
+		width: 100%;
+		height: 17rem;
+	}
+
+	.center-tips {
+		top: 50%;
+		left: 0;
+		right: 0;
+		position: absolute;
+		display: flex;
+		justify-content: center;
+		transform: translateY(-50%);
+		pointer-events: none;
+	}
+}
+
+:global(html.theme-dark) {
+	.chart-section {
+		background: rgba(15, 23, 42, .88);
+		box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+
+		.title {
+			h2 {
+				color: #e2e8f0;
+			}
+
+			.caption {
+				color: #94a3b8;
+			}
+		}
+	}
+}
+</style>