活动页
parent
26f4721989
commit
2295f9ffbf
@ -0,0 +1,292 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import type { ActionType, ProColumns, ProFormInstance } from '@ant-design/pro-components';
|
||||
import { ProTable } from '@ant-design/pro-components';
|
||||
import { Button, Card, message } from 'antd';
|
||||
import Constants from '@/constants';
|
||||
import {
|
||||
exportPageByAgentUsingPost,
|
||||
getActivityPageByAgentUsingPost,
|
||||
getSignActivityPageUsingPost,
|
||||
} from '@/services/pop-b2b2c/pbcActivityController';
|
||||
|
||||
type QueryParams = API.PbcActivityActionRecordDTO;
|
||||
|
||||
const actionTypeText: Record<number, string> = {
|
||||
4: '打卡签到',
|
||||
5: '下单活动',
|
||||
};
|
||||
|
||||
const buildParams = (params: Record<string, any>): QueryParams => {
|
||||
const { current, pageSize, orderTimeRange, orderFinishTimeRange, ...rest } = params;
|
||||
const payload: QueryParams = {
|
||||
...rest,
|
||||
current,
|
||||
pageSize,
|
||||
pbcActionType: 5,
|
||||
};
|
||||
|
||||
if (Array.isArray(orderTimeRange) && orderTimeRange.length === 2) {
|
||||
payload.pbcActionStartTime = `${orderTimeRange[0]} 00:00:00`;
|
||||
payload.pbcActionEndTime = `${orderTimeRange[1]} 23:59:59`;
|
||||
}
|
||||
|
||||
if (Array.isArray(orderFinishTimeRange) && orderFinishTimeRange.length === 2) {
|
||||
payload.pbcOrderFinishStartTime = `${orderFinishTimeRange[0]} 00:00:00`;
|
||||
payload.pbcOrderFinishEndTime = `${orderFinishTimeRange[1]} 23:59:59`;
|
||||
}
|
||||
|
||||
return payload;
|
||||
};
|
||||
|
||||
const LotteryDetail: React.FC = () => {
|
||||
const summaryActionRef = useRef<ActionType>();
|
||||
const detailActionRef = useRef<ActionType>();
|
||||
const summaryFormRef = useRef<ProFormInstance<QueryParams>>();
|
||||
const [selectedAgent, setSelectedAgent] = useState<API.PurchaseAgentStatsVO>();
|
||||
const filtersRef = useRef<QueryParams>({});
|
||||
|
||||
const summaryColumns: ProColumns<API.PurchaseAgentStatsVO>[] = [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: 'index',
|
||||
valueType: 'indexBorder',
|
||||
width: 60,
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
title: '采购员',
|
||||
dataIndex: 'pbcPurchaseAgentName',
|
||||
},
|
||||
{
|
||||
title: '抽奖总次数',
|
||||
dataIndex: 'totalCount',
|
||||
search: false,
|
||||
renderText: (value) => `${value ?? 0}次`,
|
||||
},
|
||||
{
|
||||
title: '剩余次数',
|
||||
dataIndex: 'notPrizeCount',
|
||||
search: false,
|
||||
renderText: (value) => `${value ?? 0}次`,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
valueType: 'option',
|
||||
search: false,
|
||||
render: (_, record) => [
|
||||
<a
|
||||
key="view"
|
||||
onClick={() => {
|
||||
setSelectedAgent(record);
|
||||
}}
|
||||
>
|
||||
查看
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '商家名称',
|
||||
dataIndex: 'pbcBusinessName',
|
||||
hideInTable: true,
|
||||
},
|
||||
{
|
||||
title: '订单状态',
|
||||
dataIndex: 'pbcOrderState',
|
||||
valueType: 'select',
|
||||
hideInTable: true,
|
||||
valueEnum: {
|
||||
1: { text: Constants.orderStateEnum['1']?.text || '预订单' },
|
||||
2: { text: Constants.orderStateEnum['2']?.text || '已配货' },
|
||||
3: { text: Constants.orderStateEnum['3']?.text || '已取消' },
|
||||
4: { text: Constants.orderStateEnum['4']?.text || '已完成' },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '下单时间',
|
||||
dataIndex: 'orderTimeRange',
|
||||
valueType: 'dateRange',
|
||||
hideInTable: true,
|
||||
},
|
||||
{
|
||||
title: '下单完成时间',
|
||||
dataIndex: 'orderFinishTimeRange',
|
||||
valueType: 'dateRange',
|
||||
hideInTable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const detailColumns: ProColumns<API.PbcActivityActionRecord_>[] = [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: 'index',
|
||||
valueType: 'indexBorder',
|
||||
width: 60,
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
title: '采购员',
|
||||
dataIndex: 'pbcPurchaseAgentName',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
title: '抽奖类型',
|
||||
dataIndex: 'pbcActionType',
|
||||
search: false,
|
||||
renderText: (value) => actionTypeText[value as number] || '其它',
|
||||
},
|
||||
{
|
||||
title: '抽奖次数',
|
||||
dataIndex: 'pbcId',
|
||||
search: false,
|
||||
render: () => '1次',
|
||||
},
|
||||
{
|
||||
title: '操作时间',
|
||||
dataIndex: 'pbcActionTime',
|
||||
valueType: 'dateTime',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
valueType: 'option',
|
||||
search: false,
|
||||
render: () => [
|
||||
<a
|
||||
key="detail"
|
||||
onClick={() => {
|
||||
message.info('查看功能即将上线');
|
||||
}}
|
||||
>
|
||||
查看
|
||||
</a>,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const handleExport = async () => {
|
||||
const values = summaryFormRef.current?.getFieldsValue() || {};
|
||||
const payload = buildParams({ ...values, current: 1, pageSize: 9999 });
|
||||
const hide = message.loading('正在处理', 0);
|
||||
try {
|
||||
const res = await exportPageByAgentUsingPost(payload);
|
||||
hide();
|
||||
if (res.retcode && typeof res.data === 'string' && res.data) {
|
||||
window.open(res.data);
|
||||
} else {
|
||||
message.error(res.retmsg || '导出失败，请重试');
|
||||
}
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('导出失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
const summaryRequest = async (params: Record<string, any>) => {
|
||||
const payload = buildParams(params);
|
||||
filtersRef.current = { ...payload, current: undefined, pageSize: undefined };
|
||||
const res = await getActivityPageByAgentUsingPost(payload);
|
||||
const records = res.data?.records || [];
|
||||
if (records.length) {
|
||||
setSelectedAgent((prev) => {
|
||||
if (!prev) {
|
||||
return records[0];
|
||||
}
|
||||
const exists = records.find(
|
||||
(item) => item.pbcPurchaseAgentId === prev.pbcPurchaseAgentId,
|
||||
);
|
||||
return exists ? prev : records[0];
|
||||
});
|
||||
} else {
|
||||
setSelectedAgent(undefined);
|
||||
}
|
||||
return {
|
||||
data: records,
|
||||
total: res.data?.total || 0,
|
||||
success: Boolean(res.retcode),
|
||||
};
|
||||
};
|
||||
|
||||
const detailRequest = async (params: Record<string, any>) => {
|
||||
if (!selectedAgent) {
|
||||
return {
|
||||
data: [],
|
||||
total: 0,
|
||||
success: true,
|
||||
};
|
||||
}
|
||||
const payload: QueryParams = {
|
||||
...filtersRef.current,
|
||||
...params,
|
||||
pbcPurchaseAgentId: selectedAgent.pbcPurchaseAgentId,
|
||||
pbcPurchaseAgentName: selectedAgent.pbcPurchaseAgentName,
|
||||
};
|
||||
const res = await getSignActivityPageUsingPost(payload);
|
||||
return {
|
||||
data: res.data?.records || [],
|
||||
total: res.data?.total || 0,
|
||||
success: Boolean(res.retcode),
|
||||
};
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
detailActionRef.current?.reload();
|
||||
}, [selectedAgent]);
|
||||
|
||||
return (
|
||||
<PageContainer header={{ title: '' }}>
|
||||
<Card bordered={false}>
|
||||
<ProTable<API.PurchaseAgentStatsVO>
|
||||
actionRef={summaryActionRef}
|
||||
formRef={summaryFormRef}
|
||||
columns={summaryColumns}
|
||||
rowKey="pbcPurchaseAgentId"
|
||||
request={summaryRequest}
|
||||
bordered
|
||||
size="small"
|
||||
search={{
|
||||
labelWidth: 'auto',
|
||||
span: 6,
|
||||
}}
|
||||
pagination={{
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
}}
|
||||
dateFormatter="string"
|
||||
scroll={{
|
||||
y: 'calc(50vh - 200px)',
|
||||
}}
|
||||
options={false}
|
||||
toolBarRender={() => [
|
||||
<Button key="export" type="primary" onClick={handleExport}>
|
||||
导出
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card bordered={false} style={{ marginTop: 24 }} title="抽奖明细">
|
||||
<ProTable<API.PbcActivityActionRecord_>
|
||||
actionRef={detailActionRef}
|
||||
columns={detailColumns}
|
||||
rowKey="pbcId"
|
||||
request={detailRequest}
|
||||
bordered
|
||||
size="small"
|
||||
search={false}
|
||||
pagination={{
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
}}
|
||||
dateFormatter="string"
|
||||
options={false}
|
||||
scroll={{
|
||||
y: 'calc(50vh - 200px)',
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default LotteryDetail;
|
||||
@ -0,0 +1,132 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import type { ActionType, ProColumns, ProFormInstance } from '@ant-design/pro-components';
|
||||
import { ProTable } from '@ant-design/pro-components';
|
||||
import { Button, message } from 'antd';
|
||||
import {
|
||||
exportPageByAgentUsingPost,
|
||||
getSignActivityPageUsingPost,
|
||||
} from '@/services/pop-b2b2c/pbcActivityController';
|
||||
|
||||
type QueryParams = API.PbcActivityActionRecordDTO;
|
||||
|
||||
const formatParams = (params: Record<string, any>): QueryParams => {
|
||||
const { current, pageSize, pbcActionTimeRange, ...rest } = params;
|
||||
let start: string | undefined;
|
||||
let end: string | undefined;
|
||||
|
||||
if (Array.isArray(pbcActionTimeRange) && pbcActionTimeRange.length === 2) {
|
||||
start = `${pbcActionTimeRange[0]} 00:00:00`;
|
||||
end = `${pbcActionTimeRange[1]} 23:59:59`;
|
||||
}
|
||||
|
||||
return {
|
||||
...rest,
|
||||
current,
|
||||
pageSize,
|
||||
pbcActionStartTime: start,
|
||||
pbcActionEndTime: end,
|
||||
pbcActionType: 4,
|
||||
};
|
||||
};
|
||||
|
||||
const SignInActivity: React.FC = () => {
|
||||
const actionRef = useRef<ActionType>();
|
||||
const formRef = useRef<ProFormInstance<QueryParams>>();
|
||||
|
||||
const columns: ProColumns<API.PbcActivityActionRecord_>[] = [
|
||||
{
|
||||
title: '#',
|
||||
dataIndex: 'index',
|
||||
valueType: 'indexBorder',
|
||||
width: 60,
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
title: '抽奖编码',
|
||||
dataIndex: 'pbcOrderNo',
|
||||
},
|
||||
{
|
||||
title: '采购员',
|
||||
dataIndex: 'pbcPurchaseAgentName',
|
||||
},
|
||||
{
|
||||
title: '商家名称',
|
||||
dataIndex: 'pbcBusinessName',
|
||||
},
|
||||
{
|
||||
title: '打卡时间',
|
||||
dataIndex: 'pbcActionTime',
|
||||
valueType: 'dateTime',
|
||||
search: false,
|
||||
},
|
||||
{
|
||||
title: '打卡时间',
|
||||
dataIndex: 'pbcActionTimeRange',
|
||||
valueType: 'dateRange',
|
||||
hideInTable: true,
|
||||
},
|
||||
];
|
||||
|
||||
const request = async (params: Record<string, any>) => {
|
||||
const payload = formatParams(params);
|
||||
const res = await getSignActivityPageUsingPost(payload);
|
||||
return {
|
||||
data: res.data?.records || [],
|
||||
total: res.data?.total || 0,
|
||||
success: Boolean(res.retcode),
|
||||
};
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
const values = formRef.current?.getFieldsValue() || {};
|
||||
const payload = formatParams({ ...values, current: 1, pageSize: 9999 });
|
||||
const hide = message.loading('正在处理', 0);
|
||||
try {
|
||||
const res = await exportPageByAgentUsingPost(payload);
|
||||
hide();
|
||||
if (res.retcode && typeof res.data === 'string' && res.data) {
|
||||
window.open(res.data);
|
||||
} else {
|
||||
message.error(res.retmsg || '导出失败，请重试');
|
||||
}
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('导出失败，请重试');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<PageContainer header={{ title: '' }}>
|
||||
<ProTable<API.PbcActivityActionRecord_>
|
||||
actionRef={actionRef}
|
||||
formRef={formRef}
|
||||
columns={columns}
|
||||
rowKey="pbcId"
|
||||
request={request}
|
||||
bordered
|
||||
size="small"
|
||||
search={{
|
||||
labelWidth: 'auto',
|
||||
span: 6,
|
||||
}}
|
||||
pagination={{
|
||||
defaultPageSize: 10,
|
||||
showSizeChanger: true,
|
||||
}}
|
||||
scroll={{
|
||||
y: 'calc(100vh - 320px)',
|
||||
}}
|
||||
options={false}
|
||||
dateFormatter="string"
|
||||
toolBarRender={() => [
|
||||
<Button key="export" type="primary" onClick={handleExport}>
|
||||
导出
|
||||
</Button>,
|
||||
]}
|
||||
/>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignInActivity;
|
||||
@ -0,0 +1,331 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { PageContainer } from '@ant-design/pro-layout';
|
||||
import { Card, Col, Row, Segmented, Typography } from 'antd';
|
||||
import type { PieConfig } from '@ant-design/plots';
|
||||
import { Pie } from '@ant-design/plots';
|
||||
|
||||
const { Title, Paragraph, Text } = Typography;
|
||||
|
||||
type RangeKey = 'day' | 'month' | 'all';
|
||||
|
||||
type ChartDatum = {
|
||||
label: string;
|
||||
value: number;
|
||||
};
|
||||
|
||||
type DataMap = Record<RangeKey, ChartDatum[]>;
|
||||
|
||||
const signMerchantData: DataMap = {
|
||||
day: [
|
||||
{ label: 'A商家', value: 35 },
|
||||
{ label: 'B商家', value: 25 },
|
||||
{ label: 'C商家', value: 18 },
|
||||
{ label: 'D商家', value: 12 },
|
||||
{ label: 'E商家', value: 10 },
|
||||
{ label: 'F商家', value: 8 },
|
||||
{ label: 'G商家', value: 6 },
|
||||
{ label: 'H商家', value: 5 },
|
||||
{ label: 'I商家', value: 4 },
|
||||
{ label: 'J商家', value: 3 },
|
||||
],
|
||||
month: [
|
||||
{ label: 'A商家', value: 260 },
|
||||
{ label: 'B商家', value: 200 },
|
||||
{ label: 'C商家', value: 180 },
|
||||
{ label: 'D商家', value: 140 },
|
||||
{ label: 'E商家', value: 120 },
|
||||
{ label: 'F商家', value: 100 },
|
||||
{ label: 'G商家', value: 80 },
|
||||
{ label: 'H商家', value: 60 },
|
||||
{ label: 'I商家', value: 45 },
|
||||
{ label: 'J商家', value: 30 },
|
||||
],
|
||||
all: [],
|
||||
};
|
||||
|
||||
const signAgentData: DataMap = {
|
||||
day: [
|
||||
{ label: 'A采购员', value: 40 },
|
||||
{ label: 'B采购员', value: 30 },
|
||||
{ label: 'C采购员', value: 20 },
|
||||
{ label: 'D采购员', value: 15 },
|
||||
{ label: 'E采购员', value: 12 },
|
||||
{ label: 'F采购员', value: 10 },
|
||||
{ label: 'G采购员', value: 8 },
|
||||
{ label: 'H采购员', value: 6 },
|
||||
{ label: 'I采购员', value: 5 },
|
||||
{ label: 'J采购员', value: 4 },
|
||||
],
|
||||
month: [
|
||||
{ label: 'A采购员', value: 320 },
|
||||
{ label: 'B采购员', value: 230 },
|
||||
{ label: 'C采购员', value: 180 },
|
||||
{ label: 'D采购员', value: 150 },
|
||||
{ label: 'E采购员', value: 130 },
|
||||
{ label: 'F采购员', value: 110 },
|
||||
{ label: 'G采购员', value: 95 },
|
||||
{ label: 'H采购员', value: 80 },
|
||||
{ label: 'I采购员', value: 70 },
|
||||
{ label: 'J采购员', value: 55 },
|
||||
],
|
||||
all: [],
|
||||
};
|
||||
|
||||
const orderMerchantData: DataMap = {
|
||||
day: [
|
||||
{ label: 'A商家', value: 30 },
|
||||
{ label: 'B商家', value: 27 },
|
||||
{ label: 'C商家', value: 19 },
|
||||
{ label: 'D商家', value: 14 },
|
||||
{ label: 'E商家', value: 12 },
|
||||
{ label: 'F商家', value: 9 },
|
||||
{ label: 'G商家', value: 7 },
|
||||
{ label: 'H商家', value: 6 },
|
||||
{ label: 'I商家', value: 5 },
|
||||
{ label: 'J商家', value: 3 },
|
||||
],
|
||||
month: [
|
||||
{ label: 'A商家', value: 280 },
|
||||
{ label: 'B商家', value: 230 },
|
||||
{ label: 'C商家', value: 200 },
|
||||
{ label: 'D商家', value: 180 },
|
||||
{ label: 'E商家', value: 150 },
|
||||
{ label: 'F商家', value: 120 },
|
||||
{ label: 'G商家', value: 100 },
|
||||
{ label: 'H商家', value: 85 },
|
||||
{ label: 'I商家', value: 70 },
|
||||
{ label: 'J商家', value: 55 },
|
||||
],
|
||||
all: [
|
||||
{ label: 'A商家', value: 680 },
|
||||
{ label: 'B商家', value: 620 },
|
||||
{ label: 'C商家', value: 550 },
|
||||
{ label: 'D商家', value: 480 },
|
||||
{ label: 'E商家', value: 440 },
|
||||
{ label: 'F商家', value: 360 },
|
||||
{ label: 'G商家', value: 310 },
|
||||
{ label: 'H商家', value: 290 },
|
||||
{ label: 'I商家', value: 240 },
|
||||
{ label: 'J商家', value: 200 },
|
||||
],
|
||||
};
|
||||
|
||||
const orderAgentData: DataMap = {
|
||||
day: [
|
||||
{ label: 'A采购员', value: 28 },
|
||||
{ label: 'B采购员', value: 24 },
|
||||
{ label: 'C采购员', value: 20 },
|
||||
{ label: 'D采购员', value: 16 },
|
||||
{ label: 'E采购员', value: 12 },
|
||||
{ label: 'F采购员', value: 10 },
|
||||
{ label: 'G采购员', value: 8 },
|
||||
{ label: 'H采购员', value: 6 },
|
||||
{ label: 'I采购员', value: 5 },
|
||||
{ label: 'J采购员', value: 4 },
|
||||
],
|
||||
month: [
|
||||
{ label: 'A采购员', value: 260 },
|
||||
{ label: 'B采购员', value: 240 },
|
||||
{ label: 'C采购员', value: 220 },
|
||||
{ label: 'D采购员', value: 180 },
|
||||
{ label: 'E采购员', value: 160 },
|
||||
{ label: 'F采购员', value: 140 },
|
||||
{ label: 'G采购员', value: 120 },
|
||||
{ label: 'H采购员', value: 95 },
|
||||
{ label: 'I采购员', value: 80 },
|
||||
{ label: 'J采购员', value: 70 },
|
||||
],
|
||||
all: [
|
||||
{ label: 'A采购员', value: 620 },
|
||||
{ label: 'B采购员', value: 580 },
|
||||
{ label: 'C采购员', value: 520 },
|
||||
{ label: 'D采购员', value: 480 },
|
||||
{ label: 'E采购员', value: 430 },
|
||||
{ label: 'F采购员', value: 360 },
|
||||
{ label: 'G采购员', value: 320 },
|
||||
{ label: 'H采购员', value: 280 },
|
||||
{ label: 'I采购员', value: 240 },
|
||||
{ label: 'J采购员', value: 220 },
|
||||
],
|
||||
};
|
||||
|
||||
const buildPieConfig = (data: ChartDatum[]): PieConfig => ({
|
||||
data,
|
||||
angleField: 'value',
|
||||
colorField: 'label',
|
||||
radius: 0.8,
|
||||
legend: false,
|
||||
label: {
|
||||
type: 'inner',
|
||||
offset: '-30%',
|
||||
content: ({ percent }) => `${Math.round(Number(percent) * 100)}%`,
|
||||
style: {
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
statistic: {
|
||||
title: false,
|
||||
content: {
|
||||
formatter: () => 'Top 10',
|
||||
style: {
|
||||
fontSize: '16px',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const renderRanking = (data: ChartDatum[]) => {
|
||||
const total = data.reduce((sum, item) => sum + item.value, 0);
|
||||
return (
|
||||
<div style={{ paddingLeft: 16 }}>
|
||||
{data.map((item, index) => {
|
||||
const percent = total ? Math.round((item.value / total) * 100) : 0;
|
||||
return (
|
||||
<Paragraph key={item.label} style={{ marginBottom: 8 }}>
|
||||
<Text strong style={{ marginRight: 8 }}>
|
||||
{index + 1}
|
||||
</Text>
|
||||
<Text style={{ marginRight: 8 }}>{item.label}</Text>
|
||||
<Text type="secondary">
|
||||
{item.value}次 | {percent}%
|
||||
</Text>
|
||||
</Paragraph>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ActivityStatistics: React.FC = () => {
|
||||
const [signRange, setSignRange] = useState<RangeKey>('day');
|
||||
const [signAgentRange, setSignAgentRange] = useState<RangeKey>('day');
|
||||
const [orderRange, setOrderRange] = useState<RangeKey>('day');
|
||||
const [orderAgentRange, setOrderAgentRange] = useState<RangeKey>('day');
|
||||
|
||||
const signMerchant = useMemo(() => signMerchantData[signRange], [signRange]);
|
||||
const signAgent = useMemo(() => signAgentData[signAgentRange], [signAgentRange]);
|
||||
const orderMerchant = useMemo(() => orderMerchantData[orderRange], [orderRange]);
|
||||
const orderAgent = useMemo(() => orderAgentData[orderAgentRange], [orderAgentRange]);
|
||||
|
||||
return (
|
||||
<PageContainer header={{ title: '' }}>
|
||||
<Card bordered={false} style={{ marginBottom: 24 }}>
|
||||
<Row justify="space-between" align="middle" style={{ marginBottom: 16 }}>
|
||||
<Col>
|
||||
<Title level={4} style={{ margin: 0 }}>
|
||||
打卡签到活动
|
||||
</Title>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={24} style={{ marginBottom: 24 }}>
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title="商家打卡前10统计"
|
||||
extra={
|
||||
<Segmented
|
||||
options={[{ label: '当日', value: 'day' }, { label: '当月', value: 'month' }]}
|
||||
value={signRange}
|
||||
onChange={(value) => setSignRange(value as RangeKey)}
|
||||
size="small"
|
||||
/>
|
||||
}
|
||||
bordered={false}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Pie {...buildPieConfig(signMerchant)} />
|
||||
</Col>
|
||||
<Col span={12}>{renderRanking(signMerchant)}</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title="采购员打卡前10统计"
|
||||
extra={
|
||||
<Segmented
|
||||
options={[{ label: '当日', value: 'day' }, { label: '当月', value: 'month' }]}
|
||||
value={signAgentRange}
|
||||
onChange={(value) => setSignAgentRange(value as RangeKey)}
|
||||
size="small"
|
||||
/>
|
||||
}
|
||||
bordered={false}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Pie {...buildPieConfig(signAgent)} />
|
||||
</Col>
|
||||
<Col span={12}>{renderRanking(signAgent)}</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<Card bordered={false}>
|
||||
<Row justify="space-between" align="middle" style={{ marginBottom: 16 }}>
|
||||
<Col>
|
||||
<Title level={4} style={{ margin: 0 }}>
|
||||
下单活动
|
||||
</Title>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={24} style={{ marginBottom: 24 }}>
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title="商家下单前10统计"
|
||||
extra={
|
||||
<Segmented
|
||||
options={[
|
||||
{ label: '当日', value: 'day' },
|
||||
{ label: '当月', value: 'month' },
|
||||
{ label: '全部', value: 'all' },
|
||||
]}
|
||||
value={orderRange}
|
||||
onChange={(value) => setOrderRange(value as RangeKey)}
|
||||
size="small"
|
||||
/>
|
||||
}
|
||||
bordered={false}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Pie {...buildPieConfig(orderMerchant)} />
|
||||
</Col>
|
||||
<Col span={12}>{renderRanking(orderMerchant)}</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Card
|
||||
title="采购员下单前10统计"
|
||||
extra={
|
||||
<Segmented
|
||||
options={[
|
||||
{ label: '当日', value: 'day' },
|
||||
{ label: '当月', value: 'month' },
|
||||
{ label: '全部', value: 'all' },
|
||||
]}
|
||||
value={orderAgentRange}
|
||||
onChange={(value) => setOrderAgentRange(value as RangeKey)}
|
||||
size="small"
|
||||
/>
|
||||
}
|
||||
bordered={false}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Pie {...buildPieConfig(orderAgent)} />
|
||||
</Col>
|
||||
<Col span={12}>{renderRanking(orderAgent)}</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActivityStatistics;
|
||||
Loading…
Reference in New Issue