796 lines
39 KiB
TypeScript
796 lines
39 KiB
TypeScript
// 会员汇总统计 // 会员等级统计
|
||
import { ConnectState } from "@/models/connect";
|
||
import { connect, CurrentUser } from "umi";
|
||
import './MembershipLevelStatistics.less'
|
||
import ProTable, { ActionType } from "@ant-design/pro-table";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import { Button, Col, Drawer, FormInstance, Row, Spin, Tabs, Tooltip } from "antd";
|
||
import { handeGetNestingAUTOTYPEList, handeGetPointGrowthSummary, handleGetMEMBERGROWTHList, handleGetPOINTRECORDList } from "../service";
|
||
import moment from 'moment'
|
||
import addIcon from '@/assets/detail/addIcon.png'
|
||
import reduceIcon from '@/assets/detail/reduceIcon.png'
|
||
import session from "@/utils/session";
|
||
import ProForm, { ProFormDateRangePicker, ProFormTreeSelect } from "@ant-design/pro-form";
|
||
import { handleSetlogSave } from "@/utils/format";
|
||
import PointsRecordSearch from "../PointsRecordSearch";
|
||
import GrowthValueRecordSearch from "../GrowthValueRecordSearch";
|
||
|
||
|
||
|
||
const MembershipLevelStatistics: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
|
||
const { currentUser } = props
|
||
const actionRef = useRef<ActionType>();
|
||
const formRef = useRef<FormInstance>();
|
||
const PointsRecordSearchRef = useRef<any>();
|
||
const GrowthValueRecordSearchRef = useRef<any>();
|
||
// 顶部内容的对象值
|
||
const [topData, setTopData] = useState<any>()
|
||
// 当前顶部的选择到了第几个
|
||
const [selectTab, setSelectTab] = useState<number>(1)
|
||
// 搜索参数
|
||
const [searchParams, setSearchParams] = useState<any>({
|
||
StartDate: moment().startOf('M').format('YYYY-MM-DD'),
|
||
EndDate: moment().format('YYYY-MM-DD')
|
||
})
|
||
// 选择的大的tab
|
||
const [selectBigTab, setSelectBigTab] = useState<string>('1')
|
||
// 大tab能切换的内容
|
||
const [tabList, setTabList] = useState<any>([])
|
||
// 判断是不是第一次进入页面
|
||
const [isFirst, setIsFirst] = useState<boolean>(true)
|
||
// 数据的加载效果
|
||
const [topLoading, setTopLoading] = useState<boolean>(false)
|
||
// 当前选中的是第几个数据
|
||
const [currentIndex, setCurrentIndex] = useState<any>()
|
||
const [currentRow, setCurrentRow] = useState<any>()
|
||
// 抽屉显示的值
|
||
const [currentDrawerTitle, setCurrentDrawerTitle] = useState<string>('')
|
||
|
||
let SCORETYPETree = session.get('SCORETYPETree')
|
||
let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj')
|
||
let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj')
|
||
// 主表隐藏的字段
|
||
const [columnsStateMap, setColumnsStateMap] = useState<any>({
|
||
TotalPointQOQData: { show: false },
|
||
EarnPointQOQData: { show: false },
|
||
ConsumePointQOQData: { show: false },
|
||
TotalGrowthQOQData: { show: false },
|
||
EarnGrowthQOQData: { show: false },
|
||
ConsumeGrowthQOQData: { show: false },
|
||
})
|
||
// 显示详情抽屉
|
||
const [showDetail, setShowDetail] = useState<boolean>(false)
|
||
// 顶部的数组内容
|
||
const [topListData, setTopListData] = useState<any>([])
|
||
// 传入给子组件的搜索内容
|
||
const [toChildrenSearchParams, setToChildrenSearchParams] = useState<any>()
|
||
// 积分的columns
|
||
const columns: any = [
|
||
{
|
||
title: '查询内容',
|
||
dataIndex: 'searchText',
|
||
hideInTable: true
|
||
},
|
||
// {
|
||
// title: '查询时间',
|
||
// dataIndex: 'search_date',
|
||
// valueType: 'dateRange',
|
||
// hideInTable: true,
|
||
// hideInDescriptions: true,
|
||
// search: {
|
||
// transform: (value: any) => {
|
||
// return {
|
||
// StartDate: value[0],
|
||
// EndDate: value[1],
|
||
// };
|
||
// },
|
||
// },
|
||
// initialValue: [moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
|
||
// },
|
||
{
|
||
title: "服务区名称",
|
||
width: 150,
|
||
dataIndex: "SERVERPART_NAME",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: "门店名称",
|
||
width: 150,
|
||
dataIndex: "SHOPNAME",
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: "积分方式",
|
||
width: 120,
|
||
dataIndex: "POINT_TYPE",
|
||
ellipsis: true,
|
||
valueType: 'select',
|
||
align: 'center',
|
||
valueEnum: {
|
||
"-2": "全部",
|
||
"1": "累计",
|
||
"-1": "消耗"
|
||
},
|
||
initialValue: "-2"
|
||
},
|
||
{
|
||
title: "积分来源",
|
||
width: 120,
|
||
dataIndex: "POINT_SOURCE",
|
||
ellipsis: true,
|
||
valueType: 'treeSelect',
|
||
align: 'center',
|
||
request: () => {
|
||
return SCORETYPETree
|
||
}
|
||
// valueEnum: {
|
||
// "0": "全部",
|
||
// "1000": "消费赠送",
|
||
// "2000": "消费抵扣",
|
||
// "3000": "注册赠送"
|
||
// },
|
||
// initialValue: "0"
|
||
},
|
||
{
|
||
title: "本次积分",
|
||
width: 120,
|
||
dataIndex: "CURRENT_POINT",
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
align: 'center',
|
||
valueType: "digit"
|
||
},
|
||
{
|
||
title: "累计积分",
|
||
width: 120,
|
||
dataIndex: "MEMBERSHIP_POINT",
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
align: 'center',
|
||
valueType: "digit"
|
||
},
|
||
{
|
||
title: "获取时间",
|
||
width: 150,
|
||
dataIndex: "CREATE_DATE",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
return record?.CREATE_DATE ? moment(record?.CREATE_DATE).format('YYYY-MM-DD HH:mm:ss') : "-"
|
||
}
|
||
},
|
||
]
|
||
// 成长值的columns
|
||
const growthColumns: any = [
|
||
{
|
||
title: '查询内容',
|
||
dataIndex: 'searchText',
|
||
hideInTable: true
|
||
},
|
||
// {
|
||
// title: '查询时间',
|
||
// dataIndex: 'search_date',
|
||
// valueType: 'dateRange',
|
||
// hideInTable: true,
|
||
// hideInDescriptions: true,
|
||
// search: {
|
||
// transform: (value: any) => {
|
||
// return {
|
||
// StartDate: value[0],
|
||
// EndDate: value[1],
|
||
// };
|
||
// },
|
||
// },
|
||
// initialValue: [moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
|
||
// },
|
||
{
|
||
title: "服务区名称",
|
||
width: 150,
|
||
dataIndex: "SERVERPART_NAME",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: "门店名称",
|
||
width: 150,
|
||
dataIndex: "SHOPNAME",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: "会员昵称",
|
||
width: 150,
|
||
dataIndex: "MEMBERSHIP_NAME",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: "累计成长值",
|
||
width: 120,
|
||
dataIndex: "MEMBERSHIP_GROWTH",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
ellipsis: true,
|
||
valueType: 'digit'
|
||
},
|
||
{
|
||
title: "本次成长值",
|
||
width: 120,
|
||
dataIndex: "CURRENT_GROWTH",
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
ellipsis: true,
|
||
valueType: 'digit'
|
||
},
|
||
{
|
||
title: "成长来源",
|
||
width: 120,
|
||
dataIndex: "GROWTH_SOURCE",
|
||
align: 'center',
|
||
ellipsis: true,
|
||
valueType: 'treeSelect',
|
||
request: () => {
|
||
return SCORETYPETree
|
||
},
|
||
fieldProps: {
|
||
allowClear: true, // 允许清除已选中的值
|
||
treeDefaultExpandAll: true, // 默认展开所有节点（可选）
|
||
showSearch: true, // 允许搜索（可选）
|
||
treeNodeFilterProp: 'title', // 按 title 搜索（可选）
|
||
}
|
||
// valueEnum: {
|
||
// "0": "全部",
|
||
// "1000": "消费赠送",
|
||
// "2000": "消费抵扣",
|
||
// "3000": "注册赠送",
|
||
// },
|
||
},
|
||
{
|
||
title: "成长方式",
|
||
width: 120,
|
||
dataIndex: "GROWTH_TYPE",
|
||
ellipsis: true,
|
||
align: 'center',
|
||
valueType: 'select',
|
||
valueEnum: {
|
||
"-2": "全部",
|
||
"1": "积累",
|
||
"-1": "消耗",
|
||
},
|
||
initialValue: "-2"
|
||
},
|
||
{
|
||
title: "操作时间",
|
||
width: 180,
|
||
dataIndex: "OPERATE_DATE",
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.OPERATE_DATE ? moment(record?.OPERATE_DATE).format('YYYY-MM-DD HH:mm:ss') : "-"
|
||
}
|
||
},
|
||
]
|
||
|
||
useEffect(() => {
|
||
const initData = async () => {
|
||
await handleGetTopData();
|
||
// 使用最新的selectBigTab值触发表格加载
|
||
// actionRef.current?.reload();
|
||
};
|
||
initData();
|
||
}, [])
|
||
|
||
// 获取顶部的数据
|
||
const handleGetTopData = async (StartDate?: string, EndDate?: string, MEMBERSHIP_TARGET?: string) => {
|
||
const req: any = {
|
||
CalcType: 2, // 1 汇总 2 会员等级 3 会员类型
|
||
OwnerUnitId: currentUser?.OwnerUnitId,
|
||
StartDate: StartDate ? StartDate : searchParams?.StartDate ? searchParams?.StartDate : "",
|
||
EndDate: EndDate ? EndDate : searchParams?.EndDate ? searchParams?.EndDate : "",
|
||
PointSource: "",
|
||
ServerpartId: "",
|
||
MemberShipId: "",
|
||
MembershipType: "",
|
||
MembershipLevel: "",
|
||
MembershipTarget: MEMBERSHIP_TARGET || ""
|
||
}
|
||
setTopLoading(true)
|
||
const data = await handeGetPointGrowthSummary(req)
|
||
setTopLoading(false)
|
||
console.log('datadatadatadatadata', data);
|
||
let sumObj: any = data[0]
|
||
setTopListData(data)
|
||
setTopData(sumObj)
|
||
|
||
let list: any = []
|
||
if (data && data.length > 0) {
|
||
data.forEach((item: any) => {
|
||
list.push({ label: item.StatisticalName && MEMBERSHIPLEVELYNObj && MEMBERSHIPLEVELYNObj[item.StatisticalName] ? MEMBERSHIPLEVELYNObj[item.StatisticalName.toString()] : "", value: item.StatisticalName, key: item.StatisticalName })
|
||
})
|
||
}
|
||
console.log('listlistlistlist', list);
|
||
|
||
// 使用函数形式的setState确保获取到最新值
|
||
return new Promise<string>((resolve) => {
|
||
setTabList(list);
|
||
const newTabKey = list[0]?.key || '1';
|
||
setSelectBigTab(newTabKey);
|
||
resolve(newTabKey);
|
||
});
|
||
}
|
||
|
||
// 改变顶部的选择
|
||
const handleChangeTab = (value: number) => {
|
||
// 立即更新状态
|
||
setSelectTab(value);
|
||
// 使用setTimeout确保状态更新后再触发表格重新加载
|
||
setTimeout(() => {
|
||
actionRef.current?.reload();
|
||
}, 0);
|
||
}
|
||
|
||
// 判断当前是点击看哪个的详情
|
||
const handleShowDetail = (index: number, obj: any) => {
|
||
setCurrentIndex(index)
|
||
setCurrentRow(obj)
|
||
let item: any = topListData[index]
|
||
let type: string = obj.TotalPoint ? '总积分' : obj.EarnPoint ? '赚取积分' : obj.ConsumePoint ? '消耗积分' : obj.TotalGrowth ? '总成长值' : obj.EarnGrowth ? '赚取成长值' : obj.ConsumeGrowth ? '消耗成长值' : ''
|
||
let typeTab: number = obj.TotalPoint ? 1 : obj.EarnPoint ? 2 : obj.ConsumePoint ? 3 : obj.TotalGrowth ? 4 : obj.EarnGrowth ? 5 : obj.ConsumeGrowth ? 6 : 0
|
||
console.log('typetypetype', type);
|
||
|
||
setSelectTab(typeTab)
|
||
let str: string = `${item.StatisticalName && MEMBERSHIPLEVELYNObj && MEMBERSHIPLEVELYNObj[item.StatisticalName] ? MEMBERSHIPLEVELYNObj[item.StatisticalName.toString()] : ""}${type}`
|
||
setCurrentDrawerTitle(str)
|
||
|
||
|
||
let req: any = {}
|
||
// 确保使用最新的状态值
|
||
const currentTabValue = topListData[index].StatisticalName;
|
||
|
||
if (typeTab <= 3) {
|
||
req = {
|
||
SearchParameter: {
|
||
MEMBERSHIP_TYPE: currentTabValue || "",
|
||
// PROVINCE_CODE: currentUser?.ProvinceCode || "",
|
||
OPERATE_DATE_Start: searchParams?.StartDate || "",
|
||
OPERATE_DATE_End: searchParams?.EndDate || "",
|
||
OWNERUNIT_ID: 911,
|
||
POINT_TYPE: typeTab === 1 ? '' : typeTab === 2 ? '1' : typeTab === 3 ? '-1' : '',
|
||
POINT_SOURCE: ''
|
||
},
|
||
keyWord: {
|
||
Key: "MEMBERSHIP_NAME",
|
||
Value: searchParams?.searchText || ""
|
||
},
|
||
PageIndex: searchParams?.current,
|
||
PageSize: 20,
|
||
sortstr: "OPERATE_DATE desc",
|
||
}
|
||
} else {
|
||
req = {
|
||
searchParameter: {
|
||
// PROVINCE_CODE: currentUser?.ProvinceCode || "",
|
||
OPERATE_DATE_Start: searchParams?.StartDate || "",
|
||
OPERATE_DATE_End: searchParams?.EndDate || "",
|
||
OWNERUNIT_ID: 911,
|
||
SCORESETTING_STATE: 1,
|
||
GROWTH_SOURCES: "",
|
||
GROWTH_TYPE: typeTab === 4 ? '' : typeTab === 5 ? '1' : typeTab === 6 ? '-1' : ''
|
||
},
|
||
PageIndex: searchParams?.current,
|
||
PageSize: 20,
|
||
sortstr: "OPERATE_DATE desc",
|
||
keyWord: {
|
||
Key: "MEMBERSHIP_NAME",
|
||
Value: searchParams?.searchText || ""
|
||
},
|
||
}
|
||
}
|
||
setToChildrenSearchParams(req)
|
||
|
||
|
||
setShowDetail(true)
|
||
}
|
||
|
||
|
||
return (
|
||
<div className="MembershipLevelStatisticsMain">
|
||
|
||
{/* <Tabs
|
||
activeKey={selectBigTab}
|
||
onChange={(e: any) => {
|
||
// 立即更新状态，确保UI立即响应
|
||
setSelectBigTab(e);
|
||
// 使用setTimeout确保状态更新后再触发表格重新加载
|
||
setTimeout(() => {
|
||
actionRef.current?.reload();
|
||
}, 0);
|
||
}}
|
||
items={tabList}
|
||
/> */}
|
||
{
|
||
topLoading ?
|
||
<div
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
background: 'rgba(0,0,0,0.1)',
|
||
position: 'fixed',
|
||
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 style={{ width: '100%', boxSizing: 'border-box', padding: '0 16px' }}>
|
||
<Row style={{ marginTop: "16px" }}>
|
||
<Col span={18}>
|
||
<ProForm
|
||
layout={'horizontal'}
|
||
formRef={formRef}
|
||
submitter={false}
|
||
onFinish={async (values: any) => {
|
||
console.log('values', values);
|
||
let [StartDate, EndDate] = ['', '']
|
||
if (values.searchTime && values.searchTime.length > 0) {
|
||
[StartDate, EndDate] = values.searchTime
|
||
}
|
||
handleGetTopData(StartDate, EndDate, values.MEMBERSHIP_TARGET)
|
||
setSearchParams({
|
||
StartDate: StartDate,
|
||
EndDate: EndDate
|
||
})
|
||
actionRef.current?.reload()
|
||
}}
|
||
>
|
||
<Row gutter={8}>
|
||
<Col span={8}>
|
||
<ProFormDateRangePicker
|
||
label={"查询时间"}
|
||
name={"searchTime"}
|
||
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={8}>
|
||
<ProFormTreeSelect
|
||
label={"会员标签"}
|
||
name={"MEMBERSHIP_TARGET"}
|
||
request={async () => {
|
||
const req = {
|
||
AUTOTYPE_TYPEID: '2000',
|
||
AUTOTYPE_PID: "",
|
||
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
||
AUTOTYPE_VALID: 1,
|
||
SearchKey: ""
|
||
}
|
||
const data = await handeGetNestingAUTOTYPEList(req);
|
||
console.log('datadatadatadatadata', data);
|
||
return data
|
||
}}
|
||
fieldProps={{
|
||
allowClear: true,
|
||
showSearch: true,
|
||
filterTreeNode: (input, node) => {
|
||
// ✅ 输入时根据 AUTOTYPE_NAME 模糊匹配
|
||
return node?.AUTOTYPE_NAME?.toLowerCase()?.includes(input.toLowerCase());
|
||
},
|
||
treeDefaultExpandAll: true,
|
||
fieldNames: {
|
||
label: 'AUTOTYPE_NAME',
|
||
value: 'AUTOTYPE_ID',
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
|
||
</ProForm>
|
||
</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>
|
||
</div>
|
||
|
||
{
|
||
topListData && topListData.length > 0 ?
|
||
topListData.map((item: any, index: number) => {
|
||
return <div className="MembershipLevelStatisticsTop">
|
||
<div className="MembershipLevelStatisticsTitleBox">
|
||
<div className="MembershipLevelStatisticsTitle">{item.StatisticalName && MEMBERSHIPLEVELYNObj && MEMBERSHIPLEVELYNObj[item.StatisticalName] ? MEMBERSHIPLEVELYNObj[item.StatisticalName.toString()] : ""}</div>
|
||
</div>
|
||
|
||
<div className="MembershipLevelStatisticsContentBox">
|
||
<div className="MembershipLevelStatisticsItemOther">
|
||
<div className={'MembershipLevelStatisticsOtherItem MembershipLevelStatisticsOtherItemSelect'} onClick={() => {
|
||
handleShowDetail(index, {
|
||
TotalPoint: item?.TotalPoint
|
||
})
|
||
}}>
|
||
<div className="otherItemTitle">总积分</div>
|
||
<div className="otherItemValue">{item && item?.TotalPoint ? item?.TotalPoint.summaryData : "-"}</div>
|
||
<div className="otherItemAddBox">
|
||
<span className="addLabel">环比增长</span>
|
||
{
|
||
item && item?.TotalPoint && item?.TotalPoint.QOQData && item?.TotalPoint.summaryData ?
|
||
<img className="addIcon" src={((item?.TotalPoint.summaryData - item?.TotalPoint.QOQData) / item?.TotalPoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
|
||
}
|
||
{
|
||
item && item?.TotalPoint && item?.TotalPoint.QOQData && item?.TotalPoint.summaryData ?
|
||
// <span className="addValue">{item && item?.TotalPoint ? item?.TotalPoint.QOQData : "-"}</span>
|
||
<Tooltip title={`((${item?.TotalPoint.summaryData} - ${item?.TotalPoint.QOQData}) / ${item?.TotalPoint.QOQData}) * 100`}>
|
||
<span className="addValue">{(((item?.TotalPoint.summaryData - item?.TotalPoint.QOQData) / item?.TotalPoint.QOQData) * 100).toFixed(2) + '%'}</span>
|
||
</Tooltip>
|
||
: "-"
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div className={'MembershipLevelStatisticsOtherItem'} onClick={() => {
|
||
handleShowDetail(index, {
|
||
EarnPoint: item?.EarnPoint
|
||
})
|
||
}}>
|
||
<div className="otherItemTitle">赚取积分</div>
|
||
<div className="otherItemValue">{item && item?.EarnPoint ? item?.EarnPoint.summaryData : "-"}</div>
|
||
<div className="otherItemAddBox">
|
||
<span className="addLabel">环比增长</span>
|
||
{
|
||
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 ?
|
||
// <span className="addValue">{item && item?.EarnPoint ? item?.EarnPoint.QOQData : "-"}</span>
|
||
<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 className="otherBgIcon"></div> */}
|
||
</div>
|
||
|
||
<div className={'MembershipLevelStatisticsOtherItem'} onClick={() => {
|
||
handleShowDetail(index, {
|
||
ConsumePoint: item?.ConsumePoint
|
||
})
|
||
}}>
|
||
<div className="otherItemTitle">消耗积分</div>
|
||
<div className="otherItemValue">{item && item?.ConsumePoint ? item?.ConsumePoint.summaryData : "-"}</div>
|
||
<div className="otherItemAddBox">
|
||
<span className="addLabel">环比增长</span>
|
||
{
|
||
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 ?
|
||
// <span className="addValue">{item && item?.ConsumePoint ? item?.ConsumePoint.QOQData : "-"}</span>
|
||
<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 className="otherBgIcon"></div> */}
|
||
</div>
|
||
|
||
<div className={'MembershipLevelStatisticsOtherItem MembershipLevelStatisticsOtherItemSelect'} onClick={() => {
|
||
handleShowDetail(index, {
|
||
TotalGrowth: item?.TotalGrowth
|
||
})
|
||
}}>
|
||
<div className="otherItemTitle">总成长值</div>
|
||
<div className="otherItemValue">{item && item?.TotalGrowth ? item?.TotalGrowth.summaryData : "-"}</div>
|
||
<div className="otherItemAddBox">
|
||
<span className="addLabel">环比增长</span>
|
||
{
|
||
item && item?.TotalGrowth && item?.TotalGrowth.QOQData && item?.TotalGrowth.summaryData ?
|
||
<img className="addIcon" src={((item?.TotalGrowth.summaryData - item?.TotalGrowth.QOQData) / item?.TotalGrowth.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
|
||
}
|
||
{
|
||
item && item?.TotalGrowth && item?.TotalGrowth.QOQData && item?.TotalGrowth.summaryData ?
|
||
// <span className="addValue">{item && item?.TotalGrowth ? item?.TotalGrowth.QOQData : "-"}</span>
|
||
<Tooltip title={`((${item?.TotalGrowth.summaryData} - ${item?.TotalGrowth.QOQData}) / ${item?.TotalGrowth.QOQData}) * 100`}>
|
||
<span className="addValue">{(((item?.TotalGrowth.summaryData - item?.TotalGrowth.QOQData) / item?.TotalGrowth.QOQData) * 100).toFixed(2) + '%'}</span>
|
||
</Tooltip>
|
||
: ""
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div className={'MembershipLevelStatisticsOtherItem'} onClick={() => {
|
||
handleShowDetail(index, {
|
||
EarnGrowth: item?.EarnGrowth
|
||
})
|
||
}}>
|
||
<div className="otherItemTitle">赚取成长值</div>
|
||
<div className="otherItemValue">{item && item?.EarnGrowth ? item?.EarnGrowth.summaryData : "-"}</div>
|
||
<div className="otherItemAddBox">
|
||
<span className="addLabel">环比增长</span>
|
||
{
|
||
item && item?.EarnGrowth && item?.EarnGrowth.QOQData && item?.EarnGrowth.summaryData ?
|
||
<img className="addIcon" src={((item?.EarnGrowth.summaryData - item?.EarnGrowth.QOQData) / item?.EarnGrowth.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
|
||
}
|
||
{
|
||
item && item?.EarnGrowth && item?.EarnGrowth.QOQData && item?.EarnGrowth.summaryData ?
|
||
// <span className="addValue">{item && item?.EarnGrowth ? item?.EarnGrowth.QOQData : "-"}</span>
|
||
<Tooltip title={`((${item?.EarnGrowth.summaryData} - ${item?.EarnGrowth.QOQData}) / ${topData?.EarnGrowth.QOQData}) * 100`}>
|
||
<span className="addValue">{(((item?.EarnGrowth.summaryData - item?.EarnGrowth.QOQData) / item?.EarnGrowth.QOQData) * 100).toFixed(2) + '%'}</span>
|
||
</Tooltip>
|
||
|
||
: ""
|
||
}
|
||
</div>
|
||
{/* <div className="otherBgIcon"></div> */}
|
||
</div>
|
||
|
||
<div className={'MembershipLevelStatisticsOtherItem'} onClick={() => {
|
||
handleShowDetail(index, {
|
||
ConsumeGrowth: item?.ConsumeGrowth
|
||
})
|
||
}}>
|
||
<div className="otherItemTitle">消耗成长值</div>
|
||
<div className="otherItemValue">{item && item?.ConsumeGrowth ? item?.ConsumeGrowth.summaryData : "-"}</div>
|
||
<div className="otherItemAddBox">
|
||
<span className="addLabel">环比增长</span>
|
||
{
|
||
item && item?.ConsumeGrowth && item?.ConsumeGrowth.QOQData && item?.ConsumeGrowth.summaryData ?
|
||
<img className="addIcon" src={((item?.ConsumeGrowth.summaryData - item?.ConsumeGrowth.QOQData) / item?.ConsumeGrowth.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
|
||
}
|
||
{
|
||
item && item?.ConsumeGrowth && item?.ConsumeGrowth.QOQData && item?.ConsumeGrowth.summaryData ?
|
||
// <span className="addValue">{item && item?.ConsumeGrowth ? item?.ConsumeGrowth.QOQData : "-"}</span>
|
||
<Tooltip title={`((${item?.ConsumeGrowth.summaryData} - ${item?.ConsumeGrowth.QOQData}) / ${item?.ConsumeGrowth.QOQData}) * 100`}>
|
||
<span className="addValue">{(((item?.ConsumeGrowth.summaryData - item?.ConsumeGrowth.QOQData) / item?.ConsumeGrowth.QOQData) * 100).toFixed(2) + '%'}</span>
|
||
</Tooltip>
|
||
: ""
|
||
}
|
||
</div>
|
||
{/* <div className="otherBgIcon"></div> */}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}) : ""
|
||
}
|
||
|
||
|
||
<Drawer
|
||
width={'80%'}
|
||
title={currentDrawerTitle || ""}
|
||
visible={showDetail}
|
||
destroyOnClose
|
||
closable={false}
|
||
onClose={() => {
|
||
setCurrentIndex(null)
|
||
setCurrentRow(null)
|
||
setSelectTab(0)
|
||
setCurrentDrawerTitle('')
|
||
setShowDetail(false)
|
||
}}
|
||
>
|
||
|
||
{
|
||
selectTab <= 3 ?
|
||
<PointsRecordSearch onRef={PointsRecordSearchRef} isComponent={true} searchReq={toChildrenSearchParams} height={'calc(100vh - 200px)'} /> :
|
||
selectTab > 3 ?
|
||
<GrowthValueRecordSearch onRef={GrowthValueRecordSearchRef} isComponent={true} searchReq={toChildrenSearchParams} height={'calc(100vh - 200px)'} /> : ""
|
||
}
|
||
|
||
{/* <ProTable
|
||
actionRef={actionRef}
|
||
// formRef={formRef}
|
||
columns={selectTab <= 3 ? columns : growthColumns}
|
||
bordered
|
||
scroll={{ x: "100%", y: 'calc(100vh - 400px)' }}
|
||
request={async (params) => {
|
||
// 判断当前选择的 1、2、3为积分的 4、5、6 为成长值的
|
||
let req: any = {}
|
||
let data: any = {}
|
||
|
||
// 确保使用最新的状态值
|
||
const currentTabValue = topListData[currentIndex].StatisticalName;
|
||
const currentSelectTab = selectTab;
|
||
|
||
if (selectTab <= 3) {
|
||
req = {
|
||
SearchParameter: {
|
||
MEMBERSHIP_TYPE: currentTabValue || "",
|
||
// PROVINCE_CODE: currentUser?.ProvinceCode || "",
|
||
OPERATE_DATE_Start: searchParams?.StartDate || "",
|
||
OPERATE_DATE_End: searchParams?.EndDate || "",
|
||
OWNERUNIT_ID: 911,
|
||
POINT_TYPE: selectTab === 1 ? '' : selectTab === 2 ? '1' : selectTab === 3 ? '-1' : '',
|
||
POINT_SOURCE: ''
|
||
},
|
||
keyWord: {
|
||
Key: "MEMBERSHIP_NAME",
|
||
Value: params?.searchText || ""
|
||
},
|
||
PageIndex: params?.current,
|
||
PageSize: 20,
|
||
sortstr: "OPERATE_DATE desc",
|
||
}
|
||
data = await handleGetPOINTRECORDList(req)
|
||
} else {
|
||
req = {
|
||
searchParameter: {
|
||
// PROVINCE_CODE: currentUser?.ProvinceCode || "",
|
||
OPERATE_DATE_Start: searchParams?.StartDate || "",
|
||
OPERATE_DATE_End: searchParams?.EndDate || "",
|
||
OWNERUNIT_ID: 911,
|
||
SCORESETTING_STATE: 1,
|
||
GROWTH_SOURCES: "",
|
||
GROWTH_TYPE: selectTab === 4 ? '' : selectTab === 5 ? '1' : selectTab === 6 ? '-1' : ''
|
||
},
|
||
PageIndex: params?.current,
|
||
PageSize: 20,
|
||
sortstr: "OPERATE_DATE desc",
|
||
keyWord: {
|
||
Key: "MEMBERSHIP_NAME",
|
||
Value: params?.searchText || ""
|
||
},
|
||
}
|
||
data = await handleGetMEMBERGROWTHList(req);
|
||
}
|
||
handleSetlogSave(`查询${selectTab === 1 ? '总积分' : selectTab === 2 ? '赚取积分' : selectTab === 3 ? '消耗积分' : selectTab === 4 ? '总成长值' : selectTab === 5 ? '赚取成长值' : selectTab === 6 ? '消耗成长值' : ''}会员等级汇总`)
|
||
|
||
if (data.List && data.List.length > 0) {
|
||
return { data: data.List, success: true, total: data.TotalCount }
|
||
}
|
||
return { data: [], success: true }
|
||
}}
|
||
columnsState={{
|
||
value: columnsStateMap,
|
||
onChange: setColumnsStateMap,
|
||
}}
|
||
/> */}
|
||
</Drawer>
|
||
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default connect(({ user }: ConnectState) => ({
|
||
currentUser: user.currentUser
|
||
}))(MembershipLevelStatistics); |