update chart
This commit is contained in:
Timi
@@ -7,38 +7,25 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<event-record-calendar
|
||||
v-model="monthCursor"
|
||||
v-model:selected-event-id-list="selectedEventIdList"
|
||||
:event-list="eventList"
|
||||
empty-text="当前月份暂无登记事件记录"
|
||||
:loading="isCalendarLoading"
|
||||
: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>
|
||||
<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" />
|
||||
</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 EventRecordCalendar from "@/components/EventRecordCalendar.vue";
|
||||
import StoreChartAPI from "@/api/StoreChartAPI";
|
||||
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 { EventRecord, EventRecordCalendarView, EventRecordDailyStatView } from "@/types/EventRecord";
|
||||
import type { StoreEventRecordDailyStatView } from "@/types/Store";
|
||||
import { Time } from "timi-web";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
@@ -47,45 +34,18 @@ interface SummaryItem {
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface ChartProfile {
|
||||
id: string;
|
||||
title: string;
|
||||
option: EChartsOption;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: "StoreDataCharts"
|
||||
});
|
||||
|
||||
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 isLoading = ref(false);
|
||||
const isCalendarLoading = 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 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 = {
|
||||
@@ -110,286 +70,31 @@ const summaryList = computed<SummaryItem[]>(() => [
|
||||
}
|
||||
]);
|
||||
|
||||
// ---------- 图表配置 ----------
|
||||
|
||||
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> {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
eventList.value = await EventAPI.listValid();
|
||||
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: []
|
||||
})))
|
||||
]);
|
||||
customerDailyStatList.value = customerStatList;
|
||||
customerGenderStatList.value = genderStatList;
|
||||
recordDailyStatMap.value = Object.fromEntries(recordDailyStatList.map(item => [item.eventId, item.stats]));
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMonthRecords(): Promise<void> {
|
||||
const begin = getCalendarBeginDate(monthCursor.value);
|
||||
const end = getDateEnd(addDays(begin, 41));
|
||||
isCalendarLoading.value = true;
|
||||
try {
|
||||
await Promise.resolve({
|
||||
beginAt: Time.toTimestamp(begin),
|
||||
endAt: Time.toTimestamp(end)
|
||||
});
|
||||
const calendarRecordList: EventRecordCalendarView[] = [];
|
||||
monthRecords.value = calendarRecordList.map(buildCalendarRecord);
|
||||
} finally {
|
||||
isCalendarLoading.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")]
|
||||
}
|
||||
]
|
||||
};
|
||||
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);
|
||||
}
|
||||
|
||||
// ---------- 统计计算 ----------
|
||||
@@ -400,49 +105,33 @@ function getLatestTotalCustomerCount(): number {
|
||||
}
|
||||
|
||||
function sumCustomerNewCount(): number {
|
||||
return customerDailyStatList.value.reduce((sum, item) => sum + (item.newCustomerCount || 0), 0);
|
||||
return customerDailyStatList.value.filter(isRecentWeekStat).reduce((sum, item) => sum + (item.newCustomerCount || 0), 0);
|
||||
}
|
||||
|
||||
function sumActionDailyCount(): number {
|
||||
return eventList.value.reduce((sum, item) => sum + countRecordByEvent(item.id || ""), 0);
|
||||
return eventList.value.reduce((sum, item) => sum + countRecentWeekRecordByEvent(item.id || ""), 0);
|
||||
}
|
||||
|
||||
function getCustomerDailyStat(dateText: string): CustomerDailyStatView | undefined {
|
||||
const dateValue = Number(dateText.replaceAll("-", ""));
|
||||
return customerDailyStatList.value.find(item => item.dateValue === dateValue);
|
||||
function countRecentWeekRecordByEvent(eventId: string): number {
|
||||
return (recordDailyStatMap.value[eventId] || []).filter(isRecentWeekStat).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
|
||||
}
|
||||
|
||||
function countRecordByEventAndDate(eventId: string, dateText: string): number {
|
||||
const dateValue = Number(dateText.replaceAll("-", ""));
|
||||
return recordDailyStatMap.value[eventId]?.find(item => item.dateValue === dateValue)?.dailyCount || 0;
|
||||
function isRecentWeekStat(item: { dateValue?: number }): boolean {
|
||||
return toDateValue(weekBeginDate) <= (item.dateValue || 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 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;
|
||||
}
|
||||
|
||||
// ---------- 日期工具 ----------
|
||||
@@ -451,15 +140,6 @@ 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);
|
||||
}
|
||||
@@ -470,6 +150,14 @@ function addDays(date: Date, days: number): Date {
|
||||
return value;
|
||||
}
|
||||
|
||||
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)) {
|
||||
@@ -515,25 +203,6 @@ function buildDateTextList(begin: Date, end: Date): string[] {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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) {
|
||||
@@ -552,15 +221,6 @@ function buildDateTextList(begin: Date, end: Date): string[] {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
|
||||
h2 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<section class="chart-section">
|
||||
<h2>性别统计</h2>
|
||||
<div ref="chartElement" class="chart" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { EChartsOption } from "echarts";
|
||||
import type { CustomerGenderStatView } from "@/types/Customer";
|
||||
import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
|
||||
|
||||
const props = defineProps<{
|
||||
dateTextList: string[];
|
||||
statList: CustomerGenderStatView[];
|
||||
}>();
|
||||
|
||||
const genderColorMap = {
|
||||
MALE: "#2563eb",
|
||||
FEMALE: "#db2777",
|
||||
UNKNOWN: "#64748b"
|
||||
} as const;
|
||||
|
||||
const chartOption = computed<EChartsOption>(() => ({
|
||||
...buildStoreBaseChartOption(props.dateTextList),
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["男", "女", "未知"],
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#52607a"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "客户数",
|
||||
type: "bar",
|
||||
barWidth: 24,
|
||||
data: [
|
||||
{
|
||||
name: "男",
|
||||
value: getGenderCount("MALE"),
|
||||
itemStyle: {
|
||||
color: genderColorMap.MALE
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "女",
|
||||
value: getGenderCount("FEMALE"),
|
||||
itemStyle: {
|
||||
color: genderColorMap.FEMALE
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "未知",
|
||||
value: getGenderCount("UNKNOWN"),
|
||||
itemStyle: {
|
||||
color: genderColorMap.UNKNOWN
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}));
|
||||
|
||||
const { chartElement } = useStoreChart(chartOption);
|
||||
|
||||
function getGenderCount(genderCode: "MALE" | "FEMALE" | "UNKNOWN"): number {
|
||||
return props.statList.find(item => item.genderCode === genderCode)?.count || 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.chart-section {
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.25rem;
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<section class="chart-section">
|
||||
<h2>客户增长趋势</h2>
|
||||
<div ref="chartElement" class="chart" />
|
||||
<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 type { EChartsOption } from "echarts";
|
||||
import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
|
||||
import type { CustomerDailyStatView } from "@/types/Customer";
|
||||
import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
|
||||
|
||||
const props = defineProps<{
|
||||
dateTextList: string[];
|
||||
statList: CustomerDailyStatView[];
|
||||
}>();
|
||||
|
||||
const dateTextList = computed(() => props.dateTextList);
|
||||
const {
|
||||
rangeText,
|
||||
showSlider,
|
||||
sliderValue,
|
||||
maxSliderValue,
|
||||
visibleDateTextList,
|
||||
handleSliderChange
|
||||
} = useStoreChartWindow(dateTextList);
|
||||
const chartOption = computed<EChartsOption>(() => ({
|
||||
...buildStoreBaseChartOption(visibleDateTextList.value),
|
||||
series: [
|
||||
{
|
||||
name: "客户总量",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
data: visibleDateTextList.value.map(dateText => getDailyStat(dateText)?.totalCustomerCount || 0)
|
||||
},
|
||||
{
|
||||
name: "新客户量",
|
||||
type: "bar",
|
||||
data: visibleDateTextList.value.map(dateText => getDailyStat(dateText)?.newCustomerCount || 0)
|
||||
}
|
||||
]
|
||||
}));
|
||||
|
||||
const { chartElement } = useStoreChart(chartOption);
|
||||
|
||||
function getDailyStat(dateText: string): CustomerDailyStatView | undefined {
|
||||
const dateValue = Number(dateText.replaceAll("-", ""));
|
||||
return props.statList.find(item => item.dateValue === dateValue);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.chart-section {
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.25rem;
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<event-record-calendar
|
||||
v-model="monthCursor"
|
||||
v-model:selected-event-id-list="selectedEventIdList"
|
||||
:event-list="eventList"
|
||||
empty-text="当前月份暂无登记事件记录"
|
||||
:loading="isCalendarLoading"
|
||||
:records="monthRecords"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import StoreChartAPI from "@/api/StoreChartAPI";
|
||||
import EventRecordCalendar from "@/components/EventRecordCalendar.vue";
|
||||
import type { EventItem } from "@/types/EventItem";
|
||||
import type { EventRecord } from "@/types/EventRecord";
|
||||
import type { StoreEventRecordCalendarView } from "@/types/Store";
|
||||
import { Time } from "timi-web";
|
||||
|
||||
const props = defineProps<{
|
||||
eventList: EventItem[];
|
||||
}>();
|
||||
|
||||
const selectedEventIdList = ref<string[]>([]);
|
||||
const monthRecords = ref<EventRecord[]>([]);
|
||||
const isCalendarLoading = ref(false);
|
||||
const monthCursor = ref(getMonthStart(new Date()));
|
||||
let calendarRequestId = 0;
|
||||
|
||||
watch(monthCursor, async () => {
|
||||
await loadMonthRecords();
|
||||
});
|
||||
|
||||
watch(() => props.eventList, async () => {
|
||||
const eventIdList = getEventIdList();
|
||||
selectedEventIdList.value = selectedEventIdList.value.length ? selectedEventIdList.value.filter(item => eventIdList.includes(item)) : eventIdList;
|
||||
await loadMonthRecords();
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
|
||||
async function loadMonthRecords(): Promise<void> {
|
||||
const requestId = ++calendarRequestId;
|
||||
const begin = getCalendarBeginDate(monthCursor.value);
|
||||
const end = getDateEnd(addDays(begin, 41));
|
||||
const eventIdList = getEventIdList();
|
||||
if (!eventIdList.length) {
|
||||
monthRecords.value = [];
|
||||
return;
|
||||
}
|
||||
isCalendarLoading.value = true;
|
||||
try {
|
||||
const calendarRecordList = await StoreChartAPI.eventRecordCalendar({
|
||||
beginAt: Time.toTimestamp(begin),
|
||||
endAt: Time.toTimestamp(end),
|
||||
eventIdList
|
||||
});
|
||||
if (requestId === calendarRequestId) {
|
||||
monthRecords.value = calendarRecordList.map(buildCalendarRecord);
|
||||
}
|
||||
} finally {
|
||||
if (requestId === calendarRequestId) {
|
||||
isCalendarLoading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getEventIdList(): string[] {
|
||||
return props.eventList.map(item => item.id).filter((id): id is string => Boolean(id));
|
||||
}
|
||||
|
||||
function buildCalendarRecord(record: StoreEventRecordCalendarView): 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 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;
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<section class="chart-section">
|
||||
<h2>登记量趋势</h2>
|
||||
<div ref="chartElement" class="chart" />
|
||||
<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 type { EChartsOption } from "echarts";
|
||||
import ChartRangeSlider from "@/components/ChartRangeSlider.vue";
|
||||
import type { EventItem } from "@/types/EventItem";
|
||||
import type { StoreEventRecordDailyStatView } from "@/types/Store";
|
||||
import { buildStoreBaseChartOption, useStoreChart, useStoreChartWindow } from "@/pages/store/component/useStoreChart";
|
||||
|
||||
const props = defineProps<{
|
||||
dateTextList: string[];
|
||||
eventList: EventItem[];
|
||||
statMap: Record<string, StoreEventRecordDailyStatView[]>;
|
||||
}>();
|
||||
|
||||
const dateTextList = computed(() => props.dateTextList);
|
||||
const {
|
||||
rangeText,
|
||||
showSlider,
|
||||
sliderValue,
|
||||
maxSliderValue,
|
||||
visibleDateTextList,
|
||||
handleSliderChange
|
||||
} = useStoreChartWindow(dateTextList);
|
||||
const chartOption = computed<EChartsOption>(() => ({
|
||||
...buildStoreBaseChartOption(visibleDateTextList.value),
|
||||
series: props.eventList.map(event => ({
|
||||
name: event.name || "未命名事件",
|
||||
type: "bar",
|
||||
stack: "record",
|
||||
itemStyle: getEventColor(event) ? {
|
||||
color: getEventColor(event)
|
||||
} : undefined,
|
||||
data: visibleDateTextList.value.map(dateText => countRecordByEventAndDate(event.id || "", dateText))
|
||||
}))
|
||||
}));
|
||||
|
||||
const { chartElement } = useStoreChart(chartOption);
|
||||
|
||||
function countRecordByEventAndDate(eventId: string, dateText: string): number {
|
||||
const dateValue = Number(dateText.replaceAll("-", ""));
|
||||
return props.statMap[eventId]?.find(item => item.dateValue === dateValue)?.dailyCount || 0;
|
||||
}
|
||||
|
||||
function getEventColor(event: EventItem): string | undefined {
|
||||
return event.color || undefined;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.chart-section {
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.25rem;
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<section class="chart-section">
|
||||
<h2>事件结构</h2>
|
||||
<div ref="chartElement" class="chart" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { EChartsOption } from "echarts";
|
||||
import type { EventItem } from "@/types/EventItem";
|
||||
import type { StoreEventRecordDailyStatView } from "@/types/Store";
|
||||
import { buildStoreBaseChartOption, useStoreChart } from "@/pages/store/component/useStoreChart";
|
||||
|
||||
const props = defineProps<{
|
||||
dateTextList: string[];
|
||||
eventList: EventItem[];
|
||||
statMap: Record<string, StoreEventRecordDailyStatView[]>;
|
||||
}>();
|
||||
|
||||
const chartOption = computed<EChartsOption>(() => ({
|
||||
...buildStoreBaseChartOption(props.dateTextList),
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: props.eventList.map(item => item.name || "未命名事件"),
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#52607a"
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: "登记次数",
|
||||
type: "bar",
|
||||
data: props.eventList.map(item => ({
|
||||
value: countRecordByEvent(item.id || ""),
|
||||
itemStyle: getEventColor(item) ? {
|
||||
color: getEventColor(item)
|
||||
} : undefined
|
||||
}))
|
||||
}]
|
||||
}));
|
||||
|
||||
const { chartElement } = useStoreChart(chartOption);
|
||||
|
||||
function countRecordByEvent(eventId: string): number {
|
||||
return (props.statMap[eventId] || []).reduce((sum, item) => sum + (item.dailyCount || 0), 0);
|
||||
}
|
||||
|
||||
function getEventColor(event: EventItem): string | undefined {
|
||||
return event.color || undefined;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.chart-section {
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.25rem;
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,164 @@
|
||||
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 type { ComputedRef, Ref } from "vue";
|
||||
|
||||
use([
|
||||
BarChart,
|
||||
LineChart,
|
||||
GridComponent,
|
||||
LegendComponent,
|
||||
TooltipComponent,
|
||||
CanvasRenderer
|
||||
]);
|
||||
|
||||
export function buildStoreBaseChartOption(dateTextList: string[]): 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)"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function useStoreChart(option: ComputedRef<EChartsOption> | Ref<EChartsOption>) {
|
||||
const chartElement = ref<HTMLElement>();
|
||||
let chart: ECharts | undefined;
|
||||
|
||||
watch(option, async () => {
|
||||
await nextTick();
|
||||
renderChart();
|
||||
}, {
|
||||
deep: true
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick();
|
||||
renderChart();
|
||||
window.addEventListener("resize", resizeChart);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", resizeChart);
|
||||
chart?.dispose();
|
||||
chart = undefined;
|
||||
});
|
||||
|
||||
function renderChart(): void {
|
||||
if (!chartElement.value) {
|
||||
return;
|
||||
}
|
||||
chart = chart || init(chartElement.value);
|
||||
chart.setOption(option.value, true);
|
||||
}
|
||||
|
||||
function resizeChart(): void {
|
||||
chart?.resize();
|
||||
}
|
||||
|
||||
return {
|
||||
chartElement
|
||||
};
|
||||
}
|
||||
|
||||
export function useStoreChartWindow(dateTextList: ComputedRef<string[]>) {
|
||||
const sliderValue = ref<number[]>([0, 0]);
|
||||
const viewportWidth = ref(window.innerWidth);
|
||||
let isSliderInitialized = false;
|
||||
const visibleDayCount = computed(() => Math.max(6, Math.floor(viewportWidth.value / 64)));
|
||||
const maxSliderValue = computed(() => Math.max(0, dateTextList.value.length - 1));
|
||||
const visibleDateTextList = computed(() => dateTextList.value.slice(sliderValue.value[0], sliderValue.value[1] + 1));
|
||||
const showSlider = computed(() => visibleDayCount.value < dateTextList.value.length);
|
||||
const rangeText = computed(() => {
|
||||
const list = visibleDateTextList.value;
|
||||
const beginText = list[0]?.slice(5) || "";
|
||||
const endText = list[list.length - 1]?.slice(5) || "";
|
||||
return beginText && endText ? `${beginText} 至 ${endText}` : "";
|
||||
});
|
||||
|
||||
watch(maxSliderValue, value => {
|
||||
if (!isSliderInitialized) {
|
||||
sliderValue.value = getLatestSliderRange();
|
||||
isSliderInitialized = true;
|
||||
return;
|
||||
}
|
||||
const [start, end] = sliderValue.value;
|
||||
if (value < end) {
|
||||
sliderValue.value = [Math.max(0, value - Math.max(0, end - start)), value];
|
||||
}
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("resize", updateViewportWidth);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", updateViewportWidth);
|
||||
});
|
||||
|
||||
function handleSliderChange(value: number | number[]): void {
|
||||
if (!Array.isArray(value)) {
|
||||
return;
|
||||
}
|
||||
const [start = 0, end = start] = value;
|
||||
sliderValue.value = [start, Math.max(start, end)];
|
||||
}
|
||||
|
||||
function updateViewportWidth(): void {
|
||||
viewportWidth.value = window.innerWidth;
|
||||
}
|
||||
|
||||
function getLatestSliderRange(): number[] {
|
||||
const end = maxSliderValue.value;
|
||||
const start = Math.max(0, end - visibleDayCount.value + 1);
|
||||
return [start, end];
|
||||
}
|
||||
|
||||
return {
|
||||
rangeText,
|
||||
showSlider,
|
||||
sliderValue,
|
||||
maxSliderValue,
|
||||
visibleDateTextList,
|
||||
handleSliderChange
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user