ylj20011123 010680be5a update
2025-07-16 20:46:34 +08:00

551 lines
26 KiB
TypeScript

// 会员汇总统计
import { ConnectState } from "@/models/connect";
import { connect, CurrentUser } from "umi";
import './MemberSummaryStatistics.less'
import ProTable, { ActionType } from "@ant-design/pro-table";
import { useEffect, useRef, useState } from "react";
import { Button, Col, FormInstance, Row, Tooltip } from "antd";
import { 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 } from "@ant-design/pro-form";
const MemberSummaryStatistics: React.FC<{ currentUser: CurrentUser | undefined }> = (props) => {
const { currentUser } = props
const actionRef = useRef<ActionType>();
const formRef = useRef<FormInstance>();
// 顶部内容的对象值
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')
})
let SCORETYPETree = session.get('SCORETYPETree')
// 主表隐藏的字段
const [columnsStateMap, setColumnsStateMap] = useState<any>({
TotalPointQOQData: { show: false },
EarnPointQOQData: { show: false },
ConsumePointQOQData: { show: false },
TotalGrowthQOQData: { show: false },
EarnGrowthQOQData: { show: false },
ConsumeGrowthQOQData: { show: false },
})
// 积分的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,
hideInSearch: true,
valueType: 'select',
align: 'center',
valueEnum: {
"-2": "全部",
"1": "累计",
"-1": "消耗"
}
},
{
title: "积分来源",
width: 120,
dataIndex: "POINT_SOURCE",
ellipsis: true,
hideInSearch: true,
valueType: 'treeSelect',
align: 'center',
request: () => {
return SCORETYPETree
}
},
{
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: "MEMBERSHIP_NAME",
hideInSearch: true,
ellipsis: true,
align: 'center',
},
{
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') : "-"
}
},
]
// 成长值的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: 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,
hideInSearch: true,
valueType: 'treeSelect',
request: () => {
return SCORETYPETree
}
},
{
title: "成长方式",
width: 120,
dataIndex: "GROWTH_TYPE",
ellipsis: true,
align: 'center',
valueType: 'select',
hideInSearch: true,
valueEnum: {
"-2": "全部",
"1": "积累",
"-1": "消耗",
},
},
{
title: "会员名称",
width: 150,
dataIndex: "MEMBERSHIP_NAME",
hideInSearch: true,
ellipsis: true,
align: 'center',
},
{
title: "操作时间",
width: 120,
dataIndex: "OPERATE_DATE",
align: 'center',
hideInSearch: true,
render: (_, record) => {
return record?.OPERATE_DATE ? moment(record?.OPERATE_DATE).format('YYYY-MM-DD') : "-"
}
},
]
useEffect(() => {
handleGetTopData()
}, [])
// 获取顶部的数据
const handleGetTopData = async (StartDate?: string, EndDate?: string) => {
const req: any = {
CalcType: 1, // 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: ""
}
const data = await handeGetPointGrowthSummary(req)
console.log('datadatadatadatadata', data);
let sumObj: any = data[0]
setTopData(sumObj)
}
// 改变顶部的选择
const handleChangeTab = (value: number) => {
setSelectTab(value)
actionRef.current?.reload()
}
return (
<div className="MemberSummaryStatisticsMain">
<div className="MemberSummaryStatisticsTop">
<div className="MemberSummaryStatisticsTitleBox">
<div className="MemberSummaryStatisticsTitle"></div>
</div>
<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)
setSearchParams({
StartDate: StartDate,
EndDate: EndDate
})
actionRef.current?.reload()
}}
>
<ProFormDateRangePicker
label={"查询时间"}
name={"searchTime"}
initialValue={[moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]}
/>
</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 className="MemberSummaryStatisticsContentBox">
<div className="MemberSummaryStatisticsItemOther">
<div className={selectTab === 1 ? 'MemberSummaryStatisticsOtherItem MemberSummaryStatisticsOtherItemSelect' : 'MemberSummaryStatisticsOtherItem'} onClick={() => {
handleChangeTab(1)
}}>
<div className="otherItemTitle"></div>
<div className="otherItemValue">{topData && topData?.TotalPoint ? topData?.TotalPoint.summaryData : "-"}</div>
<div className="otherItemAddBox">
<span className="addLabel"></span>
{
topData && topData?.TotalPoint && topData?.TotalPoint.QOQData && topData?.TotalPoint.summaryData ?
<img className="addIcon" src={((topData?.TotalPoint.summaryData - topData?.TotalPoint.QOQData) / topData?.TotalPoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
topData && topData?.TotalPoint && topData?.TotalPoint.QOQData && topData?.TotalPoint.summaryData ?
// <span className="addValue">{topData && topData?.TotalPoint ? topData?.TotalPoint.QOQData : "-"}</span>
<Tooltip title={`((${topData?.TotalPoint.summaryData} - ${topData?.TotalPoint.QOQData}) / ${topData?.TotalPoint.QOQData}) * 100`}>
<span className="addValue">{(((topData?.TotalPoint.summaryData - topData?.TotalPoint.QOQData) / topData?.TotalPoint.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: "-"
}
</div>
</div>
<div className={selectTab === 2 ? 'MemberSummaryStatisticsOtherItem MemberSummaryStatisticsOtherItemSelect' : 'MemberSummaryStatisticsOtherItem'} onClick={() => {
handleChangeTab(2)
}}>
<div className="otherItemTitle"></div>
<div className="otherItemValue">{topData && topData?.EarnPoint ? topData?.EarnPoint.summaryData : "-"}</div>
<div className="otherItemAddBox">
<span className="addLabel"></span>
{
topData && topData?.EarnPoint && topData?.EarnPoint.QOQData && topData?.EarnPoint.summaryData ?
<img className="addIcon" src={((topData?.EarnPoint.summaryData - topData?.EarnPoint.QOQData) / topData?.EarnPoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
topData && topData?.EarnPoint && topData?.EarnPoint.QOQData && topData?.EarnPoint.summaryData ?
// <span className="addValue">{topData && topData?.EarnPoint ? topData?.EarnPoint.QOQData : "-"}</span>
<Tooltip title={`((${topData?.EarnPoint.summaryData} - ${topData?.EarnPoint.QOQData}) / ${topData?.EarnPoint.QOQData}) * 100`}>
<span className="addValue">{(((topData?.EarnPoint.summaryData - topData?.EarnPoint.QOQData) / topData?.EarnPoint.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: ""
}
</div>
{/* <div className="otherBgIcon"></div> */}
</div>
<div className={selectTab === 3 ? 'MemberSummaryStatisticsOtherItem MemberSummaryStatisticsOtherItemSelect' : 'MemberSummaryStatisticsOtherItem'} onClick={() => {
handleChangeTab(3)
}}>
<div className="otherItemTitle"></div>
<div className="otherItemValue">{topData && topData?.ConsumePoint ? topData?.ConsumePoint.summaryData : "-"}</div>
<div className="otherItemAddBox">
<span className="addLabel"></span>
{
topData && topData?.ConsumePoint && topData?.ConsumePoint.QOQData && topData?.ConsumePoint.summaryData ?
<img className="addIcon" src={((topData?.ConsumePoint.summaryData - topData?.ConsumePoint.QOQData) / topData?.ConsumePoint.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
topData && topData?.ConsumePoint && topData?.ConsumePoint.QOQData && topData?.ConsumePoint.summaryData ?
// <span className="addValue">{topData && topData?.ConsumePoint ? topData?.ConsumePoint.QOQData : "-"}</span>
<Tooltip title={`((${topData?.ConsumePoint.summaryData} - ${topData?.ConsumePoint.QOQData}) / ${topData?.ConsumePoint.QOQData}) * 100`}>
<span className="addValue">{(((topData?.ConsumePoint.summaryData - topData?.ConsumePoint.QOQData) / topData?.ConsumePoint.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: ""
}
</div>
{/* <div className="otherBgIcon"></div> */}
</div>
<div className={selectTab === 4 ? 'MemberSummaryStatisticsOtherItem MemberSummaryStatisticsOtherItemSelect' : 'MemberSummaryStatisticsOtherItem'} onClick={() => {
handleChangeTab(4)
}}>
<div className="otherItemTitle"></div>
<div className="otherItemValue">{topData && topData?.TotalGrowth ? topData?.TotalGrowth.summaryData : "-"}</div>
<div className="otherItemAddBox">
<span className="addLabel"></span>
{
topData && topData?.TotalGrowth && topData?.TotalGrowth.QOQData && topData?.TotalGrowth.summaryData ?
<img className="addIcon" src={((topData?.TotalGrowth.summaryData - topData?.TotalGrowth.QOQData) / topData?.TotalGrowth.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
topData && topData?.TotalGrowth && topData?.TotalGrowth.QOQData && topData?.TotalGrowth.summaryData ?
// <span className="addValue">{topData && topData?.TotalGrowth ? topData?.TotalGrowth.QOQData : "-"}</span>
<Tooltip title={`((${topData?.TotalGrowth.summaryData} - ${topData?.TotalGrowth.QOQData}) / ${topData?.TotalGrowth.QOQData}) * 100`}>
<span className="addValue">{(((topData?.TotalGrowth.summaryData - topData?.TotalGrowth.QOQData) / topData?.TotalGrowth.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: ""
}
</div>
</div>
<div className={selectTab === 5 ? 'MemberSummaryStatisticsOtherItem MemberSummaryStatisticsOtherItemSelect' : 'MemberSummaryStatisticsOtherItem'} onClick={() => {
handleChangeTab(5)
}}>
<div className="otherItemTitle"></div>
<div className="otherItemValue">{topData && topData?.EarnGrowth ? topData?.EarnGrowth.summaryData : "-"}</div>
<div className="otherItemAddBox">
<span className="addLabel"></span>
{
topData && topData?.EarnGrowth && topData?.EarnGrowth.QOQData && topData?.EarnGrowth.summaryData ?
<img className="addIcon" src={((topData?.EarnGrowth.summaryData - topData?.EarnGrowth.QOQData) / topData?.EarnGrowth.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
topData && topData?.EarnGrowth && topData?.EarnGrowth.QOQData && topData?.EarnGrowth.summaryData ?
// <span className="addValue">{topData && topData?.EarnGrowth ? topData?.EarnGrowth.QOQData : "-"}</span>
<Tooltip title={`((${topData?.EarnGrowth.summaryData} - ${topData?.EarnGrowth.QOQData}) / ${topData?.EarnGrowth.QOQData}) * 100`}>
<span className="addValue">{(((topData?.EarnGrowth.summaryData - topData?.EarnGrowth.QOQData) / topData?.EarnGrowth.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: ""
}
</div>
{/* <div className="otherBgIcon"></div> */}
</div>
<div className={selectTab === 6 ? 'MemberSummaryStatisticsOtherItem MemberSummaryStatisticsOtherItemSelect' : 'MemberSummaryStatisticsOtherItem'} onClick={() => {
handleChangeTab(6)
}}>
<div className="otherItemTitle"></div>
<div className="otherItemValue">{topData && topData?.ConsumeGrowth ? topData?.ConsumeGrowth.summaryData : "-"}</div>
<div className="otherItemAddBox">
<span className="addLabel"></span>
{
topData && topData?.ConsumeGrowth && topData?.ConsumeGrowth.QOQData && topData?.ConsumeGrowth.summaryData ?
<img className="addIcon" src={((topData?.ConsumeGrowth.summaryData - topData?.ConsumeGrowth.QOQData) / topData?.ConsumeGrowth.QOQData) > 0 ? addIcon : reduceIcon} /> : ""
}
{
topData && topData?.ConsumeGrowth && topData?.ConsumeGrowth.QOQData && topData?.ConsumeGrowth.summaryData ?
// <span className="addValue">{topData && topData?.ConsumeGrowth ? topData?.ConsumeGrowth.QOQData : "-"}</span>
<Tooltip title={`((${topData?.ConsumeGrowth.summaryData} - ${topData?.ConsumeGrowth.QOQData}) / ${topData?.ConsumeGrowth.QOQData}) * 100`}>
<span className="addValue">{(((topData?.ConsumeGrowth.summaryData - topData?.ConsumeGrowth.QOQData) / topData?.ConsumeGrowth.QOQData) * 100).toFixed(2) + '%'}</span>
</Tooltip>
: ""
}
</div>
{/* <div className="otherBgIcon"></div> */}
</div>
</div>
</div>
</div>
<div className="MemberSummaryStatisticsBottom">
<ProTable
actionRef={actionRef}
columns={selectTab <= 3 ? columns : growthColumns}
bordered
search={false}
scroll={{ x: "100%", y: '400px' }}
request={async () => {
// 判断当前选择的 1、2、3为积分的 4、5、6 为成长值的
let req: any = {}
let data: any = {}
const params = searchParams;
if (selectTab <= 3) {
req = {
SearchParameter: {
// PROVINCE_CODE: currentUser?.ProvinceCode || "",
OPERATE_DATE_Start: params?.StartDate || "",
OPERATE_DATE_End: params?.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: params?.StartDate || "",
OPERATE_DATE_End: params?.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);
}
// if (searchParams.StartDate !== params?.StartDate || searchParams.EndDate !== params?.EndDate) {
// await handleGetTopData(params?.StartDate, params?.EndDate)
// }
setSearchParams(params)
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,
}}
/>
</div>
</div>
)
}
export default connect(({ user }: ConnectState) => ({
currentUser: user.currentUser
}))(MemberSummaryStatistics);