819 lines
40 KiB
TypeScript
819 lines
40 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 { 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 staticSumTotalBg from '@/assets/detail/staticSumTotalBg.png'
|
|
import session from "@/utils/session";
|
|
import ProForm, { ProFormDateRangePicker, ProFormTreeSelect } from "@ant-design/pro-form";
|
|
import { handleSetlogSave } from "@/utils/format";
|
|
import OrderDetailModal from "../BookingMealOrder/components/orderDetailModal";
|
|
import MemberDetail from "../memberInfor/component/memberDetail";
|
|
import PointsRecordSearch from "../PointsRecordSearch";
|
|
import GrowthValueRecordSearch from "../GrowthValueRecordSearch";
|
|
|
|
|
|
|
|
const MemberSummaryStatistics: 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')
|
|
})
|
|
|
|
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 [showOrderModal, setShowOrderModal] = useState<boolean>(false)
|
|
const [currentRow, setCurrentRow] = useState<any>()
|
|
// 显示详情抽屉
|
|
const [showDetailDrawer, setShowDetailDrawer] = useState<boolean>(false)
|
|
// 传入给子组件的搜索内容
|
|
const [toChildrenSearchParams, setToChildrenSearchParams] = useState<any>({
|
|
SearchParameter: {
|
|
// PROVINCE_CODE: currentUser?.ProvinceCode || "",
|
|
OPERATE_DATE_Start: searchParams?.StartDate || "",
|
|
OPERATE_DATE_End: searchParams?.EndDate || "",
|
|
OWNERUNIT_ID: 911,
|
|
POINT_TYPE: '',
|
|
POINT_SOURCE: '',
|
|
MEMBERSHIP_TARGET: searchParams?.MEMBERSHIP_TARGET && searchParams?.MEMBERSHIP_TARGET.length > 0 ? searchParams?.MEMBERSHIP_TARGET.toString() : ""
|
|
},
|
|
keyWord: {
|
|
Key: "MEMBERSHIP_NAME",
|
|
Value: searchParams?.searchText || ""
|
|
},
|
|
PageIndex: searchParams?.current,
|
|
PageSize: 20,
|
|
sortstr: "OPERATE_DATE desc",
|
|
})
|
|
|
|
// 积分的columns
|
|
const columns: any = [
|
|
{
|
|
title: '查询内容',
|
|
dataIndex: 'searchText',
|
|
hideInTable: true,
|
|
fieldProps: {
|
|
placeholder: '请输入门店名称/用户昵称'
|
|
}
|
|
},
|
|
{
|
|
title: '查询时间',
|
|
dataIndex: 'search_date',
|
|
valueType: 'dateRange',
|
|
hideInTable: true,
|
|
hideInDescriptions: true,
|
|
search: {
|
|
transform: (value) => {
|
|
return {
|
|
OPERATE_DATE_Start: value[0],
|
|
OPERATE_DATE_End: value[1],
|
|
};
|
|
},
|
|
},
|
|
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')],
|
|
}
|
|
},
|
|
initialValue: [moment().startOf('M'), moment()],
|
|
},
|
|
{
|
|
title: "会员昵称",
|
|
width: 150,
|
|
dataIndex: "MEMBERSHIP_NAME",
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
ellipsis: true,
|
|
render: (_, record) => {
|
|
return record?.MEMBERSHIP_NAME ? <a onClick={() => {
|
|
setCurrentRow(record)
|
|
setShowDetailDrawer(true)
|
|
handleSetlogSave(`查看${record?.MEMBERSHIP_NAME}【${record?.MEMBERSHIP_ID}】会员信息`)
|
|
}}>
|
|
{record?.MEMBERSHIP_NAME}
|
|
</a> : "-"
|
|
}
|
|
},
|
|
{
|
|
title: "会员等级",
|
|
width: 150,
|
|
dataIndex: "MEMBERSHIP_LEVEL",
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
ellipsis: true,
|
|
valueType: 'select',
|
|
valueEnum: MEMBERSHIPLEVELYNObj
|
|
},
|
|
{
|
|
title: "会员类型",
|
|
width: 120,
|
|
dataIndex: "MEMBERSHIP_TYPE",
|
|
ellipsis: true,
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
valueType: 'select',
|
|
valueEnum: {
|
|
...MEMBERSHIPTYPEYNObj,
|
|
},
|
|
},
|
|
{
|
|
title: "积分方式",
|
|
width: 120,
|
|
dataIndex: "POINT_TYPE",
|
|
ellipsis: true,
|
|
valueType: 'select',
|
|
align: 'center',
|
|
valueEnum: {
|
|
"0": "全部",
|
|
"1": "累计",
|
|
"-1": "消耗"
|
|
},
|
|
initialValue: "0"
|
|
},
|
|
{
|
|
title: "积分来源",
|
|
width: 120,
|
|
dataIndex: "POINT_SOURCE",
|
|
ellipsis: true,
|
|
valueType: 'treeSelect',
|
|
align: 'center',
|
|
request: () => {
|
|
return SCORETYPETree
|
|
},
|
|
fieldProps: {
|
|
allowClear: true
|
|
}
|
|
// valueEnum: {
|
|
// "0": "全部",
|
|
// "1000": "消费赠送",
|
|
// "2000": "消费抵扣",
|
|
// "3000": "注册赠送"
|
|
// },
|
|
// initialValue: "0"
|
|
},
|
|
{
|
|
title: "订单编号",
|
|
width: 250,
|
|
dataIndex: "TICKET_CODE",
|
|
hideInSearch: true,
|
|
align: 'center',
|
|
ellipsis: true,
|
|
valueType: 'digit',
|
|
render: (_, record) => {
|
|
return record?.TICKET_CODE ? <a onClick={() => {
|
|
setCurrentRow(record)
|
|
setShowOrderModal(true)
|
|
}}>{record?.TICKET_CODE}</a> : "-"
|
|
}
|
|
},
|
|
{
|
|
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: 120,
|
|
dataIndex: "PAY_AMOUNT",
|
|
hideInSearch: true,
|
|
ellipsis: true,
|
|
align: 'center',
|
|
valueType: "digit"
|
|
},
|
|
{
|
|
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: 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(() => {
|
|
let [StartDate, EndDate] = [moment().startOf('M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
|
|
handleGetTopData(StartDate, EndDate)
|
|
}, [])
|
|
// 获取顶部的数据
|
|
const handleGetTopData = async (StartDate?: string, EndDate?: string, MEMBERSHIP_TARGET?: string) => {
|
|
const req: any = {
|
|
CalcType: 1, // 1 汇总 2 会员等级 3 会员类型
|
|
OwnerUnitId: currentUser?.OwnerUnitId,
|
|
StartDate: StartDate ? StartDate : "",
|
|
EndDate: EndDate ? EndDate : "",
|
|
PointSource: "",
|
|
ServerpartId: "",
|
|
MemberShipId: "",
|
|
MembershipType: "",
|
|
MembershipLevel: "",
|
|
MembershipTarget: MEMBERSHIP_TARGET && MEMBERSHIP_TARGET.length > 0 ? MEMBERSHIP_TARGET.toString() : ""
|
|
}
|
|
const data = await handeGetPointGrowthSummary(req)
|
|
console.log('datadatadatadatadata', data);
|
|
let sumObj: any = data[0]
|
|
setTopData(sumObj)
|
|
}
|
|
|
|
// 改变顶部的选择
|
|
const handleChangeTab = (value: number) => {
|
|
setSelectTab(value)
|
|
let req: any = {}
|
|
if (value <= 3) {
|
|
req = {
|
|
SearchParameter: {
|
|
// PROVINCE_CODE: currentUser?.ProvinceCode || "",
|
|
OPERATE_DATE_Start: searchParams?.StartDate || "",
|
|
OPERATE_DATE_End: searchParams?.EndDate || "",
|
|
OWNERUNIT_ID: 911,
|
|
POINT_TYPE: value === 1 ? '' : value === 2 ? '1' : value === 3 ? '-1' : '',
|
|
POINT_SOURCE: '',
|
|
MEMBERSHIP_TARGET: searchParams?.MEMBERSHIP_TARGET && searchParams?.MEMBERSHIP_TARGET.length > 0 ? searchParams?.MEMBERSHIP_TARGET.toString() : ""
|
|
},
|
|
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: value === 4 ? '' : value === 5 ? '1' : value === 6 ? '-1' : '',
|
|
MEMBERSHIP_TARGET: searchParams?.MEMBERSHIP_TARGET && searchParams?.MEMBERSHIP_TARGET.length > 0 ? searchParams?.MEMBERSHIP_TARGET.toString() : ""
|
|
},
|
|
PageIndex: searchParams?.current,
|
|
PageSize: 20,
|
|
sortstr: "OPERATE_DATE desc",
|
|
keyWord: {
|
|
Key: "MEMBERSHIP_NAME",
|
|
Value: searchParams?.searchText || ""
|
|
},
|
|
}
|
|
}
|
|
|
|
setToChildrenSearchParams(req)
|
|
actionRef.current?.reload()
|
|
if (value <= 3) {
|
|
PointsRecordSearchRef.current?.actionRef?.current?.reload()
|
|
} else {
|
|
GrowthValueRecordSearchRef.current?.actionRef?.current?.reload()
|
|
}
|
|
}
|
|
|
|
const handleCloseModal = () => {
|
|
setShowOrderModal(false)
|
|
setCurrentRow(null)
|
|
setShowDetailDrawer(false)
|
|
}
|
|
|
|
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, values.MEMBERSHIP_TARGET)
|
|
setSearchParams({
|
|
StartDate: StartDate,
|
|
EndDate: EndDate
|
|
})
|
|
let req: any = {}
|
|
if (selectTab <= 3) {
|
|
req = {
|
|
SearchParameter: {
|
|
// PROVINCE_CODE: currentUser?.ProvinceCode || "",
|
|
OPERATE_DATE_Start: StartDate || "",
|
|
OPERATE_DATE_End: EndDate || "",
|
|
OWNERUNIT_ID: 911,
|
|
POINT_TYPE: selectTab === 1 ? '' : selectTab === 2 ? '1' : selectTab === 3 ? '-1' : '',
|
|
POINT_SOURCE: '',
|
|
MEMBERSHIP_TARGET: values?.MEMBERSHIP_TARGET && values?.MEMBERSHIP_TARGET.length > 0 ? values?.MEMBERSHIP_TARGET.toString() : ""
|
|
},
|
|
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: StartDate || "",
|
|
OPERATE_DATE_End: EndDate || "",
|
|
OWNERUNIT_ID: 911,
|
|
SCORESETTING_STATE: 1,
|
|
GROWTH_SOURCES: "",
|
|
GROWTH_TYPE: selectTab === 4 ? '' : selectTab === 5 ? '1' : selectTab === 6 ? '-1' : '',
|
|
MEMBERSHIP_TARGET: searchParams?.MEMBERSHIP_TARGET && searchParams?.MEMBERSHIP_TARGET.length > 0 ? searchParams?.MEMBERSHIP_TARGET.toString() : ""
|
|
},
|
|
PageIndex: searchParams?.current,
|
|
PageSize: 20,
|
|
sortstr: "OPERATE_DATE desc",
|
|
keyWord: {
|
|
Key: "MEMBERSHIP_NAME",
|
|
Value: searchParams?.searchText || ""
|
|
},
|
|
}
|
|
}
|
|
|
|
setToChildrenSearchParams(req)
|
|
actionRef.current?.reload()
|
|
PointsRecordSearchRef.current?.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={{
|
|
multiple: true,
|
|
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 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) > 10 ? '1000%' : (((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) > 10 ? '1000%' : (((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) > 10 ? '1000%' : (((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) > 10 ? '1000%' : (((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) > 10 ? '1000%' : (((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) > 10 ? '1000%' : (((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">
|
|
{
|
|
selectTab <= 3 ?
|
|
<PointsRecordSearch onRef={PointsRecordSearchRef} isComponent={true} searchReq={toChildrenSearchParams} /> :
|
|
selectTab > 3 ?
|
|
<GrowthValueRecordSearch onRef={GrowthValueRecordSearchRef} isComponent={true} searchReq={toChildrenSearchParams} /> : ""
|
|
}
|
|
|
|
|
|
|
|
{/* <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);
|
|
}
|
|
|
|
setSearchParams(params)
|
|
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,
|
|
}}
|
|
/> */}
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.currentUser
|
|
}))(MemberSummaryStatistics); |