feat：【mall 商城】商城首页的迁移【antd】45%：member-funnel-card.vue 修复缺陷
This commit is contained in:
YunaiV
@@ -13,10 +13,10 @@ import { Col, Row } from 'ant-design-vue';
|
||||
import { getUserCountComparison } from '#/api/mall/statistics/member';
|
||||
import { getOrderComparison } from '#/api/mall/statistics/trade';
|
||||
|
||||
import MemberFunnelCard from '../statistics/member/modules/funnel-card.vue';
|
||||
import MemberTerminalCard from '../statistics/member/modules/terminal-card.vue';
|
||||
import ComparisonCard from './modules/comparison-card.vue';
|
||||
import MemberFunnelCard from './modules/member-funnel-card.vue';
|
||||
import MemberStatisticsCard from './modules/member-statistics-card.vue';
|
||||
import MemberTerminalCard from './modules/member-terminal-card.vue';
|
||||
import OperationDataCard from './modules/operation-data-card.vue';
|
||||
import ShortcutCard from './modules/shortcut-card.vue';
|
||||
import TradeTrendCard from './modules/trade-trend-card.vue';
|
||||
|
||||
@@ -1,161 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Dayjs } from 'dayjs';
|
||||
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { fenToYuan } from '@vben/utils';
|
||||
|
||||
import { Card } from 'ant-design-vue';
|
||||
|
||||
import * as MemberStatisticsApi from '#/api/mall/statistics/member';
|
||||
import { ShortcutDateRangePicker } from '#/components/shortcut-date-range-picker';
|
||||
|
||||
/** 会员概览卡片 */
|
||||
defineOptions({ name: 'MemberFunnelCard' });
|
||||
|
||||
const loading = ref(false);
|
||||
const analyseData = ref<any>();
|
||||
|
||||
/** 查询会员概览数据列表 */
|
||||
async function loadData(times: [Dayjs, Dayjs]) {
|
||||
if (!times || times.length !== 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
// 查询数据
|
||||
analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
|
||||
times: [times[0].toDate(), times[1].toDate()],
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 时间范围改变 */
|
||||
const handleTimeRangeChange = (times: [Dayjs, Dayjs]) => {
|
||||
loadData(times);
|
||||
};
|
||||
|
||||
/** 计算环比增长率 */
|
||||
const calculateRelativeRate = (value?: number, reference?: number) => {
|
||||
if (!reference || reference === 0) return 0;
|
||||
return (((value || 0) - reference) / reference) * 100;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card :bordered="false" :loading="loading">
|
||||
<template #title>
|
||||
<div class="flex items-center justify-between">
|
||||
<span>会员概览</span>
|
||||
<ShortcutDateRangePicker @change="handleTimeRangeChange" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="min-w-[900px] py-7">
|
||||
<div class="relative flex h-24">
|
||||
<div class="flex h-full w-[75%] bg-blue-50">
|
||||
<div class="ml-15 flex h-full flex-col justify-center">
|
||||
<div class="font-bold">
|
||||
注册用户数量：{{
|
||||
analyseData?.comparison?.value?.registerUserCount || 0
|
||||
}}
|
||||
</div>
|
||||
<div class="mt-2 text-sm">
|
||||
环比增长率：{{
|
||||
calculateRelativeRate(
|
||||
analyseData?.comparison?.value?.registerUserCount,
|
||||
analyseData?.comparison?.reference?.registerUserCount,
|
||||
).toFixed(2)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="trapezoid1 -ml-[154px] mt-1.5 flex h-full w-[308px] flex-col items-center justify-center bg-blue-500 text-sm text-white"
|
||||
>
|
||||
<span class="text-2xl font-bold">{{
|
||||
analyseData?.visitUserCount || 0
|
||||
}}</span>
|
||||
<span>访客</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex h-24">
|
||||
<div class="flex h-full w-[75%] bg-cyan-50">
|
||||
<div class="ml-15 flex h-full flex-col justify-center">
|
||||
<div class="font-bold">
|
||||
活跃用户数量：{{
|
||||
analyseData?.comparison?.value?.visitUserCount || 0
|
||||
}}
|
||||
</div>
|
||||
<div class="mt-2 text-sm">
|
||||
环比增长率：{{
|
||||
calculateRelativeRate(
|
||||
analyseData?.comparison?.value?.visitUserCount,
|
||||
analyseData?.comparison?.reference?.visitUserCount,
|
||||
).toFixed(2)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="trapezoid2 -ml-[112px] mt-[6.8px] flex h-[100px] w-[224px] flex-col items-center justify-center bg-cyan-500 text-sm text-white"
|
||||
>
|
||||
<span class="text-2xl font-bold">{{
|
||||
analyseData?.orderUserCount || 0
|
||||
}}</span>
|
||||
<span>下单</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative flex h-24">
|
||||
<div class="flex w-[75%] bg-slate-50">
|
||||
<div class="ml-15 flex h-full flex-row gap-x-16">
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="font-bold">
|
||||
充值用户数量：{{
|
||||
analyseData?.comparison?.value?.rechargeUserCount || 0
|
||||
}}
|
||||
</div>
|
||||
<div class="mt-2 text-sm">
|
||||
环比增长率：{{
|
||||
calculateRelativeRate(
|
||||
analyseData?.comparison?.value?.rechargeUserCount,
|
||||
analyseData?.comparison?.reference?.rechargeUserCount,
|
||||
).toFixed(2)
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="font-bold">
|
||||
客单价：{{ fenToYuan(analyseData?.atv || 0) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="trapezoid3 -ml-[72px] mt-[13px] flex h-[92px] w-[144px] flex-col items-center justify-center bg-slate-500 text-sm text-white"
|
||||
>
|
||||
<span class="text-2xl font-bold">{{
|
||||
analyseData?.payUserCount || 0
|
||||
}}</span>
|
||||
<span>成交用户</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.trapezoid1 {
|
||||
transform: perspective(5em) rotateX(-11deg);
|
||||
}
|
||||
|
||||
.trapezoid2 {
|
||||
transform: perspective(7em) rotateX(-20deg);
|
||||
}
|
||||
|
||||
.trapezoid3 {
|
||||
transform: perspective(3em) rotateX(-13deg);
|
||||
}
|
||||
</style>
|
||||
@@ -1,55 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { EchartsUIType } from '@vben/plugins/echarts';
|
||||
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
import { getDictOptions } from '@vben/hooks';
|
||||
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
||||
|
||||
import { Card, Spin } from 'ant-design-vue';
|
||||
|
||||
import * as MemberStatisticsApi from '#/api/mall/statistics/member';
|
||||
|
||||
import { getTerminalChartOptions } from './member-terminal-chart-options';
|
||||
|
||||
/** 会员终端卡片 */
|
||||
defineOptions({ name: 'MemberTerminalCard' });
|
||||
|
||||
const loading = ref(true);
|
||||
const chartRef = ref<EchartsUIType>();
|
||||
const { renderEcharts } = useEcharts(chartRef);
|
||||
|
||||
/** 按照终端，查询会员统计列表 */
|
||||
const getMemberTerminalStatisticsList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const list = await MemberStatisticsApi.getMemberTerminalStatisticsList();
|
||||
const dictDataList = getDictOptions('terminal');
|
||||
const chartData = dictDataList.map((dictData: any) => {
|
||||
const userCount = list.find(
|
||||
(item: any) => item.terminal === dictData.value,
|
||||
)?.userCount;
|
||||
return {
|
||||
name: dictData.label,
|
||||
value: userCount || 0,
|
||||
};
|
||||
});
|
||||
await renderEcharts(getTerminalChartOptions(chartData));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
getMemberTerminalStatisticsList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card :bordered="false" title="会员终端" class="h-full">
|
||||
<Spin :spinning="loading">
|
||||
<EchartsUI ref="chartRef" class="h-[380px] w-full" />
|
||||
</Spin>
|
||||
</Card>
|
||||
</template>
|
||||
@@ -1,31 +0,0 @@
|
||||
/**
|
||||
* 会员终端统计图配置
|
||||
*/
|
||||
export function getTerminalChartOptions(data: any[]): any {
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
confine: true,
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'right',
|
||||
},
|
||||
roseType: 'area',
|
||||
series: [
|
||||
{
|
||||
name: '会员终端',
|
||||
type: 'pie',
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user