gao-customer-h5/src/pages/store/component/StorePointDailyTrendChart.vue

<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>