ylj20011123 524c0abc26 update
2025-07-30 20:28:29 +08:00

477 lines
32 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// 运营活动统计
import { connect, CurrentUser } from "umi";
import { ConnectState } from "@/models/connect";
import { useEffect, useRef, useState } from "react";
import { Button, Col, Drawer, FormInstance, Row, Spin, Tooltip } from "antd";
import ProForm, { ProFormDateRangePicker, ProFormSelect } from "@ant-design/pro-form";
import './BusinessActivityStatistics.less'
import { handeGetMarketingSummary, handeGetMembershipCount } from "../service";
import session from "@/utils/session";
import ProTable, { ActionType } from "@ant-design/pro-table";
import MemberInfor from "../memberInfor";
import moment from 'moment'
import addIcon from '@/assets/detail/addIcon.png'
import reduceIcon from '@/assets/detail/reduceIcon.png'
const BusinessActivityStatistics: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
const { currentUser } = props
const formRef = useRef<FormInstance>();
const actionRef = useRef<ActionType>();
// 选择的tab
const [selectPageTab, setSelectPageTab] = useState<any>(1)
// 会员类型数据
const [membershipType, setMembershipType] = useState<any>()
// 活动总数
const [activityTotal, setActivityTotal] = useState<number>()
// 会员等级数据
const [revenueList, setRevenueList] = useState<any>()
// 营收合计
const [revenueTotal, setRevenueTotal] = useState<number>()
// 显示详情抽屉
const [showDetail, setShowDetail] = useState<boolean>(false)
const [currentRow, setCurrentRow] = useState<any>()
// 抽屉显示的标题
const [currentDrawerTitle, setCurrentDrawerTitle] = useState<string>()
// 1 是 会员类型 2是 会员等级
const [searchType, setSearchType] = useState<any>()
// 对应的枚举类型
const [valueType, setValueType] = useState<any>()
// 显示加载效果
const [showLoading, setShowLoading] = useState<boolean>(false)
let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj')
let MEMBERSHIPLEVELYNList = session.get('MEMBERSHIPLEVELYNList')
let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj')
let MEMBERSHIPTYPEYNList = session.get('MEMBERSHIPTYPEYNList')
const handleGetData = async (formData?: any) => {
console.log('formDataformDataformData', formData);
let [start, end] = ['', '']
if (formData && formData?.searchTime) {
[start, end] = formData.searchTime
}
const req: any = {
CalcType: 3, // 拉新
OwnerUnitId: currentUser?.OwnerUnitId,
ExcludeTest: formData ? formData?.ExcludeTest === 1 ? true : false : true,
StartDate: start ? start : "",
EndDate: end ? end : "",
MembershipType: formData?.MembershipType === 1 ? '' : formData?.MembershipType || "",
MembershipLevel: formData?.MembershipLevel === '1' ? '' : formData?.MembershipLevel || "",
}
const req2: any = {
OwnerUnitId: currentUser?.OwnerUnitId,
StartDate: start ? start : "",
EndDate: end ? end : "",
SalebillType: "",
MembershipType: formData?.MembershipType === 1 ? '' : formData?.MembershipType || "",
MembershipLevel: formData?.MembershipLevel === '1' ? '' : formData?.MembershipLevel || "",
}
setShowLoading(true)
const data = await handeGetMembershipCount(req)
const data2 = await handeGetMarketingSummary(req2)
setShowLoading(false)
console.log('datadatadatadata', data);
setMembershipType(data.List)
setActivityTotal(data.OtherData)
setRevenueList(data2.List)
}
// 点击事件
const handleShowTableData = async (type: number, memberType: any) => {
// type 1 的话是 会员类型 2 的话是 会员等级 memberType 对应的枚举值
setCurrentDrawerTitle(`${type === 1 ? '会员类型' : type === 2 ? '会员等级' : ''}${type === 1 ? MEMBERSHIPTYPEYNObj && memberType ? MEMBERSHIPTYPEYNObj[memberType] : '' : type === 2 ? MEMBERSHIPLEVELYNObj && memberType ? MEMBERSHIPLEVELYNObj[memberType] : '' : ''}`)
setSearchType(type)
setValueType(memberType)
setShowDetail(true)
}
useEffect(() => {
handleGetData({ searchTime: [moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')] })
}, [])
return (
<div className="BusinessActivityStatisticsMain">
{
showLoading ?
<div
style={{
width: '100%',
height: '100%',
background: 'rgba(0,0,0,0.1)',
position: 'absolute',
zIndex: 5,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '15px 20px 10px',
background: '#fff',
borderRadius: '8px',
width: '200px'
}}>
<Spin />
<span style={{ marginLeft: '5px' }}>...</span>
</div>
</div> : ''
}
<div className="BusinessActivityStatisticsTop">
{/* <div className="BusinessActivityStatisticsTitleBox">
<div className={selectPageTab === 1 ? 'BusinessActivityStatisticsTitle BusinessActivityStatisticsTitleSelect' : 'BusinessActivityStatisticsTitle'} onClick={() => {
setSelectPageTab(1)
}}>会员类型</div>
<div style={{ marginLeft: '48px' }} className={selectPageTab === 2 ? 'BusinessActivityStatisticsTitle BusinessActivityStatisticsTitleSelect' : 'BusinessActivityStatisticsTitle'} onClick={() => {
setSelectPageTab(2)
}}>会员等级</div>
</div> */}
<ProForm
layout={'horizontal'}
formRef={formRef}
submitter={false}
onFinish={async (values: any) => {
console.log('valuesvaluesvaluesvalues', values);
handleGetData(values)
}}
>
<Row gutter={16} style={{ marginTop: "16px" }}>
<Col span={6}>
<ProFormDateRangePicker
label={"查询时间"}
name={"searchTime"}
// initialValue={[moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]}
initialValue={[moment().startOf('M'), moment()]}
fieldProps={{
ranges: {
"本月": [moment().startOf('M'), moment()],
"上月": [moment().subtract(1, 'M').startOf('M'), moment().subtract(1, 'M').endOf('M')],
"近三月": [moment().subtract(3, 'M').startOf('M'), moment().endOf('M')],
"近半年": [moment().subtract(6, 'M').startOf('M'), moment().endOf('M')],
}
}}
/>
</Col>
<Col span={6}>
<ProFormSelect
label={"会员类型"}
name={"MembershipType"}
options={MEMBERSHIPTYPEYNList}
/>
</Col>
<Col span={6}>
<ProFormSelect
label={"会员等级"}
name={"MembershipLevel"}
options={MEMBERSHIPLEVELYNList}
/>
</Col>
<Col span={6}>
<ProFormSelect
label={"是否排除测试会员"}
name={"ExcludeTest"}
options={[{ label: '是', value: 1 }, { label: '否', value: 0 }]}
initialValue={1}
/>
</Col>
<Col span={18}></Col>
<Col span={6}>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button style={{ marginRight: '8px' }} onClick={() => {
formRef.current?.resetFields()
}}></Button>
<Button type={"primary"} onClick={() => {
formRef.current?.submit()
}}></Button>
</div>
</Col>
</Row>
</ProForm>
</div>
<div className="BusinessActivityStatisticsBottom">
{
membershipType && membershipType.length > 0 ?
<>
<div className="BusinessActivityStatisticsTitleBox">
<div className="BusinessActivityStatisticsTitle">{activityTotal ? `${activityTotal}人)` : ""}</div>
</div>
<div className="BusinessActivityStatisticsContentBox">
<div className="BusinessActivityStatisticsItemOther">
{
membershipType.map((item: any) => {
return <div className="BusinessActivityStatisticsOtherItem">
<div className="otherItemTitle">{item.label}</div>
<div className="otherItemValue">{item.value}<span className="otherItemValueUnit"></span></div>
<div className="addLabel"></div>
<div className="otherItemAddBox">
<span className="addValue">{item.key ? item.key + '%' : ""}</span>
</div>
</div>
})
}
</div>
</div>
</>
: ""
}
</div>
<div className="BusinessActivityStatisticsBottom">
{
revenueList && revenueList.length > 0 ?
revenueList.map((item: any) => {
return <div style={{ marginBottom: '16px' }}>
<div className="BusinessActivityStatisticsTitleBox">
<div className="BusinessActivityStatisticsTitle">{item.MarketingActivity}</div>
</div>
<div className="BusinessActivityStatisticsContentBox">
<div className="BusinessActivityStatisticsItemOther">
<div className="BusinessActivityStatisticsOtherItem">
<div className="otherItemTitle">退</div>
<div className="otherItemValue">{item && item?.TotalActualAmount ? item?.TotalActualAmount.summaryData : "-"}</div>
<div className="addLabel"></div>
<div className="otherItemAddBox">
{
item && item?.TotalActualAmount && item?.TotalActualAmount.QOQData && item?.TotalActualAmount.summaryData ?
<img className="addIcon" src={((item?.TotalActualAmount.summaryData - item?.TotalActualAmount.QOQData) / item?.TotalActualAmount.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
item && item?.TotalActualAmount && item?.TotalActualAmount.QOQData && item?.TotalActualAmount.summaryData ?
<Tooltip title={`((${item?.TotalActualAmount.summaryData} - ${item?.TotalActualAmount.QOQData}) / ${item?.TotalActualAmount.QOQData}) * 100`}>
<span className="addValue">{(((item?.TotalActualAmount.summaryData - item?.TotalActualAmount.QOQData) / item?.TotalActualAmount.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: "-"
}
</div>
</div>
<div className="BusinessActivityStatisticsOtherItem">
<div className="otherItemTitle"></div>
<div className="otherItemValue">{item && item?.TotalSuccAmount ? item?.TotalSuccAmount.summaryData : "-"}</div>
<div className="addLabel"></div>
<div className="otherItemAddBox">
{
item && item?.TotalSuccAmount && item?.TotalSuccAmount.QOQData && item?.TotalSuccAmount.summaryData ?
<img className="addIcon" src={((item?.TotalSuccAmount.summaryData - item?.TotalSuccAmount.QOQData) / item?.TotalSuccAmount.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
item && item?.TotalSuccAmount && item?.TotalSuccAmount.QOQData && item?.TotalSuccAmount.summaryData ?
// <span className="addValue">{item && item?.TotalSuccAmount ? item?.TotalSuccAmount.QOQData : "-"}</span>
<Tooltip title={`((${item?.TotalSuccAmount.summaryData} - ${item?.TotalSuccAmount.QOQData}) / ${item?.TotalSuccAmount.QOQData}) * 100`}>
<span className="addValue">{(((item?.TotalSuccAmount.summaryData - item?.TotalSuccAmount.QOQData) / item?.TotalSuccAmount.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: "-"
}
</div>
</div>
<div className="BusinessActivityStatisticsOtherItem">
<div className="otherItemTitle"></div>
<div className="otherItemValue">{item && item?.TotalSuccTicket ? item?.TotalSuccTicket.summaryData : "-"}</div>
<div className="addLabel"></div>
<div className="otherItemAddBox">
{
item && item?.TotalSuccTicket && item?.TotalSuccTicket.QOQData && item?.TotalSuccTicket.summaryData ?
<img className="addIcon" src={((item?.TotalSuccTicket.summaryData - item?.TotalSuccTicket.QOQData) / item?.TotalSuccTicket.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
item && item?.TotalSuccTicket && item?.TotalSuccTicket.QOQData && item?.TotalSuccTicket.summaryData ?
<Tooltip title={`((${item?.TotalSuccTicket.summaryData} - ${item?.TotalSuccTicket.QOQData}) / ${item?.TotalSuccTicket.QOQData}) * 100`}>
<span className="addValue">{(((item?.TotalSuccTicket.summaryData - item?.TotalSuccTicket.QOQData) / item?.TotalSuccTicket.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: "-"
}
</div>
</div>
{/* <div className="BusinessActivityStatisticsOtherItem">
<div className="otherItemTitle">成交销售数量</div>
<div className="otherItemValue">{item && item?.TotalCount ? item?.TotalCount.summaryData : "-"}</div>
<div className="addLabel">环比增长</div>
<div className="otherItemAddBox">
{
item && item?.TotalCount && item?.TotalCount.QOQData && item?.TotalCount.summaryData ?
<img className="addIcon" src={((item?.TotalCount.summaryData - item?.TotalCount.QOQData) / item?.TotalCount.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
item && item?.TotalCount && item?.TotalCount.QOQData && item?.TotalCount.summaryData ?
// <span className="addValue">{item && item?.TotalCount ? item?.TotalCount.QOQData : "-"}</span>
<Tooltip title={`((${item?.TotalCount.summaryData} - ${item?.TotalCount.QOQData}) / ${item?.TotalCount.QOQData}) * 100`}>
<span className="addValue">{(((item?.TotalCount.summaryData - item?.TotalCount.QOQData) / item?.TotalCount.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: "-"
}
</div>
</div>
<div className="BusinessActivityStatisticsOtherItem">
<div className="otherItemTitle">交易失败笔数</div>
<div className="otherItemValue">{item && item?.TotalFailureTicket ? item?.TotalFailureTicket.summaryData : "-"}</div>
<div className="addLabel">环比增长</div>
<div className="otherItemAddBox">
{
item && item?.TotalFailureTicket && item?.TotalFailureTicket.QOQData && item?.TotalFailureTicket.summaryData ?
<img className="addIcon" src={((item?.TotalFailureTicket.summaryData - item?.TotalFailureTicket.QOQData) / item?.TotalFailureTicket.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
item && item?.TotalFailureTicket && item?.TotalFailureTicket.QOQData && item?.TotalFailureTicket.summaryData ?
// <span className="addValue">{item && item?.TotalFailureTicket ? item?.TotalFailureTicket.QOQData : "-"}</span>
<Tooltip title={`((${item?.TotalFailureTicket.summaryData} - ${item?.TotalFailureTicket.QOQData}) / ${item?.TotalFailureTicket.QOQData}) * 100`}>
<span className="addValue">{(((item?.TotalFailureTicket.summaryData - item?.TotalFailureTicket.QOQData) / item?.TotalFailureTicket.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: "-"
}
</div>
</div>
<div className="BusinessActivityStatisticsOtherItem">
<div className="otherItemTitle">退款订单笔数</div>
<div className="otherItemValue">{item && item?.TotalRefundTicket ? item?.TotalRefundTicket.summaryData : "-"}</div>
<div className="addLabel">环比增长</div>
<div className="otherItemAddBox">
{
item && item?.TotalRefundTicket && item?.TotalRefundTicket.QOQData && item?.TotalRefundTicket.summaryData ?
<img className="addIcon" src={((item?.TotalRefundTicket.summaryData - item?.TotalRefundTicket.QOQData) / item?.TotalRefundTicket.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
item && item?.TotalRefundTicket && item?.TotalRefundTicket.QOQData && item?.TotalRefundTicket.summaryData ?
// <span className="addValue">{item && item?.TotalRefundTicket ? item?.TotalRefundTicket.QOQData : "-"}</span>
<Tooltip title={`((${item?.TotalRefundTicket.summaryData} - ${item?.TotalRefundTicket.QOQData}) / ${item?.TotalRefundTicket.QOQData}) * 100`}>
<span className="addValue">{(((item?.TotalRefundTicket.summaryData - item?.TotalRefundTicket.QOQData) / item?.TotalRefundTicket.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: "-"
}
</div>
</div>
<div className="BusinessActivityStatisticsOtherItem">
<div className="otherItemTitle">退款订单金额</div>
<div className="otherItemValue">{item && item?.TotalRefundAmount ? item?.TotalRefundAmount.summaryData : "-"}</div>
<div className="addLabel">环比增长</div>
<div className="otherItemAddBox">
{
item && item?.TotalRefundAmount && item?.TotalRefundAmount.QOQData && item?.TotalRefundAmount.summaryData ?
<img className="addIcon" src={((item?.TotalRefundAmount.summaryData - item?.TotalRefundAmount.QOQData) / item?.TotalRefundAmount.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
item && item?.TotalRefundAmount && item?.TotalRefundAmount.QOQData && item?.TotalRefundAmount.summaryData ?
// <span className="addValue">{item && item?.TotalRefundAmount ? item?.TotalRefundAmount.QOQData : "-"}</span>
<Tooltip title={`((${item?.TotalRefundAmount.summaryData} - ${item?.TotalRefundAmount.QOQData}) / ${item?.TotalRefundAmount.QOQData}) * 100`}>
<span className="addValue">{(((item?.TotalRefundAmount.summaryData - item?.TotalRefundAmount.QOQData) / item?.TotalRefundAmount.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: "-"
}
</div>
</div> */}
<div className="BusinessActivityStatisticsOtherItem">
<div className="otherItemTitle"></div>
<div className="otherItemValue">{item && item?.CouponAmount ? item?.CouponAmount.summaryData : "-"}</div>
<div className="addLabel"></div>
<div className="otherItemAddBox">
{
item && item?.CouponAmount && item?.CouponAmount.QOQData && item?.CouponAmount.summaryData ?
<img className="addIcon" src={((item?.CouponAmount.summaryData - item?.CouponAmount.QOQData) / item?.CouponAmount.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
item && item?.CouponAmount && item?.CouponAmount.QOQData && item?.CouponAmount.summaryData ?
<Tooltip title={`((${item?.CouponAmount.summaryData} - ${item?.CouponAmount.QOQData}) / ${item?.CouponAmount.QOQData}) * 100`}>
<span className="addValue">{(((item?.CouponAmount.summaryData - item?.CouponAmount.QOQData) / item?.CouponAmount.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: "-"
}
</div>
</div>
<div className="BusinessActivityStatisticsOtherItem">
<div className="otherItemTitle"></div>
<div className="otherItemValue">{item && item?.ConsumePoint ? item?.ConsumePoint.summaryData : "-"}</div>
<div className="addLabel"></div>
<div className="otherItemAddBox">
{
item && item?.ConsumePoint && item?.ConsumePoint.QOQData && item?.ConsumePoint.summaryData ?
<img className="addIcon" src={((item?.ConsumePoint.summaryData - item?.ConsumePoint.QOQData) / item?.ConsumePoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
item && item?.ConsumePoint && item?.ConsumePoint.QOQData && item?.ConsumePoint.summaryData ?
<Tooltip title={`((${item?.ConsumePoint.summaryData} - ${item?.ConsumePoint.QOQData}) / ${item?.ConsumePoint.QOQData}) * 100`}>
<span className="addValue">{(((item?.ConsumePoint.summaryData - item?.ConsumePoint.QOQData) / item?.ConsumePoint.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: "-"
}
</div>
</div>
<div className="BusinessActivityStatisticsOtherItem">
<div className="otherItemTitle"></div>
<div className="otherItemValue">{item && item?.EarnPoint ? item?.EarnPoint.summaryData : "-"}</div>
<div className="addLabel"></div>
<div className="otherItemAddBox">
{
item && item?.EarnPoint && item?.EarnPoint.QOQData && item?.EarnPoint.summaryData ?
<img className="addIcon" src={((item?.EarnPoint.summaryData - item?.EarnPoint.QOQData) / item?.EarnPoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
item && item?.EarnPoint && item?.EarnPoint.QOQData && item?.EarnPoint.summaryData ?
<Tooltip title={`((${item?.EarnPoint.summaryData} - ${item?.EarnPoint.QOQData}) / ${item?.EarnPoint.QOQData}) * 100`}>
<span className="addValue">{(((item?.EarnPoint.summaryData - item?.EarnPoint.QOQData) / item?.EarnPoint.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: "-"
}
</div>
</div>
</div>
</div>
</div>
}) : ""
}
</div>
<Drawer
width={'80%'}
title={currentDrawerTitle || ""}
visible={showDetail}
destroyOnClose
closable={false}
onClose={() => {
setSearchType(null)
setValueType(null)
setShowDetail(false)
}}
>
<MemberInfor searchType={searchType} valueType={valueType} isComponent={true} />
</Drawer>
</div >
)
}
export default connect(({ user }: ConnectState) => ({
currentUser: user.currentUser
}))(BusinessActivityStatistics);