551 lines
13 KiB
Vue
551 lines
13 KiB
Vue
<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>
|
|
|
|
<event-record-calendar
|
|
v-model="monthCursor"
|
|
v-model:selected-event-id-list="selectedEventIdList"
|
|
:event-list="eventList"
|
|
empty-text="当前月份暂无登记事件记录"
|
|
:loading="calendarLoading"
|
|
:records="monthRecords"
|
|
/>
|
|
|
|
<section
|
|
v-for="item in chartList"
|
|
:key="item.id"
|
|
class="chart-section"
|
|
>
|
|
<h2 v-text="item.title" />
|
|
<div :ref="element => setChartRef(item.id, element)" class="chart" />
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { ECharts, EChartsOption } from "echarts";
|
|
import { BarChart, LineChart } from "echarts/charts";
|
|
import { GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
|
|
import { init, use } from "echarts/core";
|
|
import { CanvasRenderer } from "echarts/renderers";
|
|
import CustomerAPI from "@/api/CustomerAPI";
|
|
import EventAPI from "@/api/EventAPI";
|
|
import EventRecordAPI from "@/api/EventRecordAPI";
|
|
import EventRecordCalendar from "@/components/EventRecordCalendar.vue";
|
|
import type { CustomerDailyStatView, CustomerGenderStatView } from "@/types/Customer";
|
|
import type { EventItem } from "@/types/EventItem";
|
|
import type { EventRecord, EventRecordCalendarView, EventRecordDailyStatView } from "@/types/EventRecord";
|
|
import { Time } from "timi-web";
|
|
import { permissionCodes } from "@/utils/permission";
|
|
|
|
interface SummaryItem {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
interface ChartProfile {
|
|
id: string;
|
|
title: string;
|
|
option: EChartsOption;
|
|
}
|
|
|
|
defineOptions({
|
|
name: "ManagementDataCharts"
|
|
});
|
|
|
|
use([
|
|
BarChart,
|
|
LineChart,
|
|
GridComponent,
|
|
LegendComponent,
|
|
TooltipComponent,
|
|
CanvasRenderer
|
|
]);
|
|
|
|
const chartRefs = new Map<string, HTMLElement>();
|
|
const chartInstances = new Map<string, ECharts>();
|
|
const eventList = ref<EventItem[]>([]);
|
|
const selectedEventIdList = ref<string[]>([]);
|
|
const customerDailyStatList = ref<CustomerDailyStatView[]>([]);
|
|
const customerGenderStatList = ref<CustomerGenderStatView[]>([]);
|
|
const recordDailyStatMap = ref<Record<string, EventRecordDailyStatView[]>>({});
|
|
const monthRecords = ref<EventRecord[]>([]);
|
|
const loading = ref(false);
|
|
const calendarLoading = ref(false);
|
|
const monthCursor = ref(getMonthStart(new Date()));
|
|
const genderColorMap = {
|
|
MALE: "#2563eb",
|
|
FEMALE: "#db2777",
|
|
UNKNOWN: "#64748b"
|
|
} as const;
|
|
const beginDate = getDateStart(addDays(new Date(), -6));
|
|
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()} 次`
|
|
}
|
|
]);
|
|
|
|
const chartList = computed<ChartProfile[]>(() => [
|
|
{
|
|
id: "customer-growth",
|
|
title: "客户增长趋势",
|
|
option: buildCustomerGrowthOption()
|
|
},
|
|
{
|
|
id: "record-trend",
|
|
title: "登记量趋势",
|
|
option: buildRecordTrendOption()
|
|
},
|
|
{
|
|
id: "customer-value",
|
|
title: "事件结构",
|
|
option: buildEventStructureOption()
|
|
},
|
|
{
|
|
id: "customer-gender",
|
|
title: "性别统计",
|
|
option: buildGenderStatOption()
|
|
}
|
|
]);
|
|
|
|
watch(chartList, async () => {
|
|
await nextTick();
|
|
renderCharts();
|
|
});
|
|
|
|
watch(monthCursor, async () => {
|
|
await loadMonthRecords();
|
|
});
|
|
|
|
onMounted(async () => {
|
|
await loadChartsData();
|
|
await loadMonthRecords();
|
|
await nextTick();
|
|
renderCharts();
|
|
window.addEventListener("resize", resizeCharts);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("resize", resizeCharts);
|
|
chartInstances.forEach(item => item.dispose());
|
|
chartInstances.clear();
|
|
});
|
|
|
|
function setChartRef(id: string, element: Element | ComponentPublicInstance | null): void {
|
|
if (element instanceof HTMLElement) {
|
|
chartRefs.set(id, element);
|
|
}
|
|
}
|
|
|
|
function renderCharts(): void {
|
|
for (const item of chartList.value) {
|
|
const element = chartRefs.get(item.id);
|
|
if (!element) {
|
|
continue;
|
|
}
|
|
|
|
const chart = getChartInstance(item.id, element);
|
|
chart.setOption(item.option, true);
|
|
}
|
|
}
|
|
|
|
function getChartInstance(id: string, element: HTMLElement): ECharts {
|
|
const instance = chartInstances.get(id);
|
|
if (instance) {
|
|
return instance;
|
|
}
|
|
|
|
const chart = init(element);
|
|
chartInstances.set(id, chart);
|
|
return chart;
|
|
}
|
|
|
|
function resizeCharts(): void {
|
|
chartInstances.forEach(item => item.resize());
|
|
}
|
|
|
|
async function loadChartsData(): Promise<void> {
|
|
loading.value = true;
|
|
try {
|
|
eventList.value = await EventAPI.enabledList();
|
|
const valideventList = eventList.value.filter((item): item is EventItem & { id: string } => Boolean(item.id));
|
|
selectedEventIdList.value = valideventList.map(item => item.id);
|
|
const [customerStatList, genderStatList, recordDailyStatList] = await Promise.all([
|
|
CustomerAPI.dailyStat({
|
|
beginCreatedAt: timestampRange.beginAt,
|
|
endCreatedAt: timestampRange.endAt
|
|
}),
|
|
CustomerAPI.genderStat(),
|
|
Promise.all(valideventList.map(async item => ({
|
|
eventId: item.id,
|
|
stats: await EventRecordAPI.allCustomerEventDailyStat({
|
|
eventId: item.id,
|
|
beginAt: timestampRange.beginAt,
|
|
endAt: timestampRange.endAt
|
|
})
|
|
})))
|
|
]);
|
|
customerDailyStatList.value = customerStatList;
|
|
customerGenderStatList.value = genderStatList;
|
|
recordDailyStatMap.value = Object.fromEntries(recordDailyStatList.map(item => [item.eventId, item.stats]));
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
async function loadMonthRecords(): Promise<void> {
|
|
const begin = getCalendarBeginDate(monthCursor.value);
|
|
const end = getDateEnd(addDays(begin, 41));
|
|
calendarLoading.value = true;
|
|
try {
|
|
const calendarRecordList = await EventRecordAPI.calendarRangeList({
|
|
beginAt: Time.toTimestamp(begin),
|
|
endAt: Time.toTimestamp(end)
|
|
});
|
|
monthRecords.value = calendarRecordList.map(buildCalendarRecord);
|
|
} finally {
|
|
calendarLoading.value = false;
|
|
}
|
|
}
|
|
|
|
function buildBaseOption(): EChartsOption {
|
|
return {
|
|
color: ["#2563eb", "#0f766e", "#d97706", "#db2777", "#7c3aed"],
|
|
grid: {
|
|
top: 48,
|
|
left: 12,
|
|
right: 12,
|
|
bottom: 12,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
top: 0,
|
|
icon: "roundRect",
|
|
textStyle: {
|
|
color: "#52607a"
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: "axis"
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: dateTextList.map(item => item.slice(5)),
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: "#52607a"
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
axisLabel: {
|
|
color: "#52607a"
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(148, 163, 184, .2)"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
function buildCustomerGrowthOption(): EChartsOption {
|
|
return {
|
|
...buildBaseOption(),
|
|
series: [
|
|
{
|
|
name: "客户总量",
|
|
type: "line",
|
|
smooth: true,
|
|
data: dateTextList.map(dateText => getCustomerDailyStat(dateText)?.totalCustomerCount || 0)
|
|
},
|
|
{
|
|
name: "新客户量",
|
|
type: "bar",
|
|
data: dateTextList.map(dateText => getCustomerDailyStat(dateText)?.newCustomerCount || 0)
|
|
}
|
|
]
|
|
};
|
|
}
|
|
|
|
function buildRecordTrendOption(): EChartsOption {
|
|
return {
|
|
...buildBaseOption(),
|
|
series: eventList.value.map(action => ({
|
|
name: action.name || "未命名事件",
|
|
type: "bar",
|
|
stack: "record",
|
|
itemStyle: getEventColor(action) ? {
|
|
color: getEventColor(action)
|
|
} : undefined,
|
|
data: dateTextList.map(dateText => countRecordByEventAndDate(action.id || "", dateText))
|
|
}))
|
|
};
|
|
}
|
|
|
|
function buildEventStructureOption(): EChartsOption {
|
|
return {
|
|
...buildBaseOption(),
|
|
legend: {
|
|
show: false
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: eventList.value.map(item => item.name || "未命名事件"),
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: "#52607a"
|
|
}
|
|
},
|
|
series: [{
|
|
name: "登记次数",
|
|
type: "bar",
|
|
data: eventList.value.map(item => ({
|
|
value: countRecordByEvent(item.id || ""),
|
|
itemStyle: getEventColor(item) ? {
|
|
color: getEventColor(item)
|
|
} : undefined
|
|
}))
|
|
}]
|
|
};
|
|
}
|
|
|
|
function buildGenderStatOption(): EChartsOption {
|
|
return {
|
|
...buildBaseOption(),
|
|
tooltip: {
|
|
trigger: "item"
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: ["男", "女", "未知"],
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: "#52607a"
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: "男",
|
|
type: "bar",
|
|
itemStyle: {
|
|
color: genderColorMap.MALE
|
|
},
|
|
data: [getGenderCount("MALE"), 0, 0]
|
|
},
|
|
{
|
|
name: "女",
|
|
type: "bar",
|
|
itemStyle: {
|
|
color: genderColorMap.FEMALE
|
|
},
|
|
data: [0, getGenderCount("FEMALE"), 0]
|
|
},
|
|
{
|
|
name: "未知",
|
|
type: "bar",
|
|
itemStyle: {
|
|
color: genderColorMap.UNKNOWN
|
|
},
|
|
data: [0, 0, getGenderCount("UNKNOWN")]
|
|
}
|
|
]
|
|
};
|
|
}
|
|
|
|
function getLatestTotalCustomerCount(): number {
|
|
const latest = customerDailyStatList.value[customerDailyStatList.value.length - 1];
|
|
return latest?.totalCustomerCount || 0;
|
|
}
|
|
|
|
function sumCustomerNewCount(): number {
|
|
return customerDailyStatList.value.reduce((sum, item) => sum + (item.newCustomerCount || 0), 0);
|
|
}
|
|
|
|
function sumActionDailyCount(): number {
|
|
return eventList.value.reduce((sum, item) => sum + countRecordByEvent(item.id || ""), 0);
|
|
}
|
|
|
|
function getCustomerDailyStat(dateText: string): CustomerDailyStatView | undefined {
|
|
const dateValue = Number(dateText.replaceAll("-", ""));
|
|
return customerDailyStatList.value.find(item => item.dateValue === dateValue);
|
|
}
|
|
|
|
function countRecordByEventAndDate(eventId: string, dateText: string): number {
|
|
const dateValue = Number(dateText.replaceAll("-", ""));
|
|
return recordDailyStatMap.value[eventId]?.find(item => item.dateValue === dateValue)?.dailyCount || 0;
|
|
}
|
|
|
|
function countRecordByEvent(eventId: string): number {
|
|
return (recordDailyStatMap.value[eventId] || []).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
|
|
}
|
|
|
|
function getEventColor(event: EventItem): string | undefined {
|
|
return event.color || undefined;
|
|
}
|
|
|
|
function getGenderCount(genderCode: "MALE" | "FEMALE" | "UNKNOWN"): number {
|
|
return customerGenderStatList.value.find(item => item.genderCode === genderCode)?.count || 0;
|
|
}
|
|
|
|
function buildCalendarRecord(record: EventRecordCalendarView): EventRecord {
|
|
return {
|
|
id: record.id,
|
|
customerId: record.customerId,
|
|
eventId: record.eventId,
|
|
registeredAt: record.registeredAt,
|
|
customer: record.customerId || record.customerCode || record.customerName ? {
|
|
id: record.customerId,
|
|
code: record.customerCode,
|
|
name: record.customerName
|
|
} : undefined
|
|
};
|
|
}
|
|
|
|
function getDateStart(date: Date): Date {
|
|
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
|
|
}
|
|
|
|
function getMonthStart(date: Date): Date {
|
|
return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0);
|
|
}
|
|
|
|
function getCalendarBeginDate(date: Date): Date {
|
|
const monthStart = getMonthStart(date);
|
|
return addDays(monthStart, -monthStart.getDay());
|
|
}
|
|
|
|
function getDateEnd(date: Date): Date {
|
|
return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59, 999);
|
|
}
|
|
|
|
function addDays(date: Date, days: number): Date {
|
|
const value = new Date(date);
|
|
value.setDate(value.getDate() + days);
|
|
return value;
|
|
}
|
|
|
|
function buildDateTextList(begin: Date, end: Date): string[] {
|
|
const list: string[] = [];
|
|
for (let item = getDateStart(begin); item <= end; item = addDays(item, 1)) {
|
|
list.push(Time.formatDate(item));
|
|
}
|
|
return list;
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.data-charts-page {
|
|
gap: 1rem;
|
|
padding: calc(var(--app-nav-height) + 1rem) 1rem 1rem 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.summary {
|
|
gap: .75rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
|
.summary-item {
|
|
padding: .875rem .625rem;
|
|
display: flex;
|
|
min-width: 0;
|
|
background: rgba(255, 255, 255, .92);
|
|
box-shadow: var(--td-shadow-1);
|
|
align-items: center;
|
|
border-radius: 1rem;
|
|
flex-direction: column;
|
|
|
|
span {
|
|
color: #52607a;
|
|
font-size: .75rem;
|
|
}
|
|
|
|
strong {
|
|
margin-top: .375rem;
|
|
color: #0f172a;
|
|
font-size: 1.125rem;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart-section {
|
|
padding: 1rem;
|
|
background: rgba(255, 255, 255, .92);
|
|
box-shadow: var(--td-shadow-1);
|
|
border-radius: 1.25rem;
|
|
|
|
h2 {
|
|
margin: 0 0 .875rem 0;
|
|
color: #0f172a;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.chart {
|
|
width: 100%;
|
|
height: 16rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
:global(html.theme-dark) {
|
|
.data-charts-page {
|
|
.summary {
|
|
.summary-item {
|
|
background: rgba(15, 23, 42, .88);
|
|
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
|
|
|
span {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
strong {
|
|
color: #e2e8f0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart-section {
|
|
background: rgba(15, 23, 42, .88);
|
|
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
|
|
|
h2 {
|
|
color: #e2e8f0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|