timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update charts

Browse Source
This commit is contained in:
Timi
2026-08-12 16:24:23 +08:00
parent 2a64f2ad72
commit 826f1b2dd0
14 changed files with 820 additions and 319 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/store/StoreDataCharts.vue
+8 -116
View File
@@ -1,138 +1,34 @@
<template>
<div v-can="permissionCodes.stat.read" class="data-charts-page">
<section class="summary">
<div v-for="item in summaryList" :key="item.label" class="summary-item">
<span v-text="item.label" />
<strong v-text="item.value" />
</div>
</section>
<store-chart-summary :date-text-list="dateTextList" />
<store-event-record-calendar-section :event-list="eventList" />
<store-customer-growth-chart :date-text-list="dateTextList" :stat-list="customerDailyStatList" />
<store-event-record-trend-chart :date-text-list="dateTextList" :event-list="eventList" :stat-map="recordDailyStatMap" />
<store-event-structure-chart :date-text-list="dateTextList" :event-list="eventList" :stat-map="recordDailyStatMap" />
<store-customer-gender-chart :date-text-list="dateTextList" :stat-list="customerGenderStatList" />
<store-event-record-calendar-section />
<store-customer-growth-chart :date-text-list="dateTextList" />
<store-event-record-trend-chart :date-text-list="dateTextList" />
<store-event-structure-chart :date-text-list="dateTextList" />
<store-customer-gender-chart :date-text-list="dateTextList" />
</div>
</template>
<script setup lang="ts">
import EventAPI from "@/api/EventAPI";
import StoreChartAPI from "@/api/StoreChartAPI";
import { Time } from "timi-web";
import StoreChartSummary from "@/pages/store/component/StoreChartSummary.vue";
import StoreCustomerGenderChart from "@/pages/store/component/StoreCustomerGenderChart.vue";
import StoreCustomerGrowthChart from "@/pages/store/component/StoreCustomerGrowthChart.vue";
import StoreEventRecordCalendarSection from "@/pages/store/component/StoreEventRecordCalendarSection.vue";
import StoreEventRecordTrendChart from "@/pages/store/component/StoreEventRecordTrendChart.vue";
import StoreEventStructureChart from "@/pages/store/component/StoreEventStructureChart.vue";
import type { CustomerDailyStatView, CustomerGenderStatView } from "@/types/Customer";
import type { EventItem } from "@/types/EventItem";
import type { StoreEventRecordDailyStatView } from "@/types/Store";
import { Time } from "timi-web";
import { permissionCodes } from "@/utils/permission";
interface SummaryItem {
label: string;
value: string;
}
defineOptions({
name: "StoreDataCharts"
});
// ---------- 数据源 ----------
const eventList = ref<EventItem[]>([]);
const customerDailyStatList = ref<CustomerDailyStatView[]>([]);
const customerGenderStatList = ref<CustomerGenderStatView[]>([]);
const recordDailyStatMap = ref<Record<string, StoreEventRecordDailyStatView[]>>({});
const weekBeginDate = getDateStart(addDays(new Date(), -6));
const beginDate = getDateStart(addMonths(new Date(), -1));
const endDate = getDateEnd(new Date());
const dateTextList = buildDateTextList(beginDate, endDate);
const timestampRange = {
beginAt: Time.toTimestamp(beginDate),
endAt: Time.toTimestamp(endDate)
};
// ---------- 摘要 ----------
const summaryList = computed<SummaryItem[]>(() => [
{
label: "当前客户",
value: `${getLatestTotalCustomerCount()} 人`
},
{
label: "本周新增",
value: `${sumCustomerNewCount()} 人`
},
{
label: "本周登记",
value: `${sumActionDailyCount()} 次`
}
]);
onMounted(async () => {
await loadChartsData();
});
// ---------- 页面数据 ----------
async function loadChartsData(): Promise<void> {
eventList.value = await EventAPI.listValid();
const valideventList = eventList.value.filter((item): item is EventItem & { id: string } => Boolean(item.id));
const eventIdList = valideventList.map(item => item.id);
const [customerStatList, genderStatList, recordDailyStatList] = await Promise.all([
StoreChartAPI.customerDailyStat({
beginAt: timestampRange.beginAt,
endAt: timestampRange.endAt
}),
StoreChartAPI.customerGenderStat(),
eventIdList.length ? StoreChartAPI.eventRecordDailyStat({
beginAt: timestampRange.beginAt,
endAt: timestampRange.endAt,
eventIdList
}) : Promise.resolve([])
]);
customerDailyStatList.value = customerStatList;
customerGenderStatList.value = genderStatList;
recordDailyStatMap.value = groupRecordDailyStatByEventId(recordDailyStatList);
}
// ---------- 统计计算 ----------
function getLatestTotalCustomerCount(): number {
const latest = customerDailyStatList.value[customerDailyStatList.value.length - 1];
return latest?.totalCustomerCount || 0;
}
function sumCustomerNewCount(): number {
return customerDailyStatList.value.filter(isRecentWeekStat).reduce((sum, item) => sum + (item.newCustomerCount || 0), 0);
}
function sumActionDailyCount(): number {
return eventList.value.reduce((sum, item) => sum + countRecentWeekRecordByEvent(item.id || ""), 0);
}
function countRecentWeekRecordByEvent(eventId: string): number {
return (recordDailyStatMap.value[eventId] || []).filter(isRecentWeekStat).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
}
function isRecentWeekStat(item: { dateValue?: number }): boolean {
return toDateValue(weekBeginDate) <= (item.dateValue || 0);
}
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;
}
// ---------- 日期工具 ----------
@@ -154,10 +50,6 @@ function addMonths(date: Date, months: number): Date {
return new Date(date.getFullYear(), date.getMonth() + months, date.getDate(), 0, 0, 0, 0);
}
function toDateValue(date: Date): number {
return Number(Time.formatDate(date).replaceAll("-", ""));
}
function buildDateTextList(begin: Date, end: Date): string[] {
const list: string[] = [];
for (let item = getDateStart(begin); item <= end; item = addDays(item, 1)) {