gao-customer-h5/src/pages/customer/component/CustomerEventStructureChart.vue

<template>
	<section class="chart-section">
		<h2>登记事件结构</h2>
		<div ref="chartElement" class="chart" />
	</section>
</template>

<script setup lang="ts">
import { Time } from "timi-web";
import type { EChartsOption } from "echarts";
import CustomerChartAPI from "@/api/CustomerChartAPI";
import EventAPI from "@/api/EventAPI";
import type { EventItem } from "@/types/EventItem";
import type { StoreEventRecordDailyStatView } from "@/types/Store";
import { buildCustomerBaseChartOption, useCustomerChart } from "@/pages/customer/component/useCustomerChart";

const props = defineProps<{
	customerId: string;
	dateTextList: string[];
	selectedEventIdList: string[];
}>();

// ---------- 图表数据 ----------

const eventList = ref<EventItem[]>([]);
const statMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
let statRequestId = 0;

const selectedEventIdSet = computed(() => new Set(props.selectedEventIdList));
const visibleEventList = computed(() => eventList.value.filter(item => item.id && selectedEventIdSet.value.has(item.id)));
const shouldRotateAxisLabel = computed(() => visibleEventList.value.length > 4 || visibleEventList.value.some(item => 6 < getEventName(item).length));
const chartOption = computed<EChartsOption>(() => ({
	...buildCustomerBaseChartOption(props.dateTextList),
	legend: {
		show: false
	},
	xAxis: {
		type: "category",
		data: visibleEventList.value.map(getEventName),
		axisTick: {
			show: false
		},
		axisLabel: {
			color: "#52607a",
			hideOverlap: true,
			interval: 0,
			overflow: "truncate",
			rotate: shouldRotateAxisLabel.value ? 45 : 0,
			width: shouldRotateAxisLabel.value ? 72 : 56
		}
	},
	series: [
		{
			name: "登记次数",
			type: "bar",
			data: visibleEventList.value.map(item => ({
				value: countRecordByEvent(item.id || ""),
				itemStyle: getEventColor(item) ? {
					color: getEventColor(item)
				} : undefined
			}))
		}
	]
}));

const { chartElement } = useCustomerChart(chartOption);

watch([
	() => props.customerId,
	() => props.dateTextList,
	() => props.selectedEventIdList
], async () => {
	await loadDailyStat();
}, {
	deep: true
});

onMounted(async () => {
	await loadEvents();
	await loadDailyStat();
});

async function loadEvents(): Promise<void> {
	eventList.value = await EventAPI.listValid();
}

async function loadDailyStat(): Promise<void> {
	if (!props.customerId || !props.dateTextList.length || !props.selectedEventIdList.length) {
		statMap.value = {};
		return;
	}

	const requestId = ++statRequestId;
	const dailyStatList = await CustomerChartAPI.eventRecordDailyStat({
		customerId: props.customerId,
		beginAt: Time.toTimestamp(getDateStart(props.dateTextList[0])),
		endAt: Time.toTimestamp(getDateEnd(props.dateTextList[props.dateTextList.length - 1])),
		eventIdList: props.selectedEventIdList
	});
	if (requestId === statRequestId) {
		statMap.value = groupRecordDailyStatByEventId(dailyStatList);
	}
}

function countRecordByEvent(eventId: string): number {
	return (statMap.value[eventId] || []).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
}

function getEventColor(event: EventItem): string | undefined {
	return event.color || undefined;
}

function getEventName(event: EventItem): string {
	return event.name || "未命名事件";
}

function groupRecordDailyStatByEventId(list: StoreEventRecordDailyStatView[]): Record<string, StoreEventRecordDailyStatView[]> {
	const map: Record<string, StoreEventRecordDailyStatView[]> = {};
	for (const item of list) {
		if (!item.eventId) {
			continue;
		}
		if (!map[item.eventId]) {
			map[item.eventId] = [];
		}
		map[item.eventId].push(item);
	}
	return map;
}

// ---------- 日期 ----------

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;
	background: rgba(255, 255, 255, .92);
	box-shadow: var(--td-shadow-1);
	border-radius: .75rem;

	h2 {
		color: #0f172a;
		margin: 0 0 .875rem 0;
		font-size: 1rem;
		font-weight: 700;
	}

	.chart {
		width: 100%;
		height: 16rem;
	}
}

:global(html.theme-dark) {
	.chart-section {
		background: rgba(15, 23, 42, .88);
		box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);

		h2 {
			color: #e2e8f0;
		}
	}
}
</style>