|
|
|
|
@ -1,10 +1,14 @@
|
|
|
|
|
import { listTreeUsingGet } from '@/services/pop-b2b2c/pbcCategoryController';
|
|
|
|
|
import { dashboardUsingPost } from '@/services/pop-b2b2c/pbcUserRecordLogController';
|
|
|
|
|
import { Bar, Pie } from '@ant-design/plots';
|
|
|
|
|
import { PageContainer, ProCard } from '@ant-design/pro-components';
|
|
|
|
|
import { Card, Col, Radio, RadioChangeEvent, Row, Spin, Statistic } from 'antd';
|
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
|
import { PageContainer, ProCard, ProForm, ProFormDateRangePicker, ProFormGroup, ProFormInstance, ProFormRadio } from '@ant-design/pro-components';
|
|
|
|
|
import { Card, Col, DatePickerProps, Row, Spin, Statistic } from 'antd';
|
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
|
|
|
|
|
|
const Welcome: React.FC = () => {
|
|
|
|
|
|
|
|
|
|
const ref = useRef<ProFormInstance<API.PbcDashBoardDTO>>();
|
|
|
|
|
const [loading, handleLoadChange] = useState<boolean>(false);
|
|
|
|
|
const [data1, setData1] = useState<any[]>([]);
|
|
|
|
|
const [data2, setData2] = useState<any[]>([]);
|
|
|
|
|
@ -12,15 +16,15 @@ const Welcome: React.FC = () => {
|
|
|
|
|
const [data4, setData4] = useState<any[]>([]);
|
|
|
|
|
const [pbcRegisterStatical, setPbcRegisterStatical] = useState<API.PbcRegisterStaticalVO>({
|
|
|
|
|
vipNumber: 0,
|
|
|
|
|
businessNumber: 0,
|
|
|
|
|
businessNumber: 0
|
|
|
|
|
});
|
|
|
|
|
const [pbcScanCodeStatical, setPbcScanCodeStatical] = useState<API.PbcScanCodeStaticalVO>({
|
|
|
|
|
pbcScanNumber: 0,
|
|
|
|
|
pbcScanUserNumber: 0,
|
|
|
|
|
pbcScanUserNumber: 0
|
|
|
|
|
});
|
|
|
|
|
const [pbcInteractStatical, setPbcInteractStatical] = useState<API.PbcInteractStaticalVO>({
|
|
|
|
|
pbcColectNumber: 0,
|
|
|
|
|
pbcViewTotalNumber: 0,
|
|
|
|
|
pbcViewTotalNumber: 0
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const config: any = {
|
|
|
|
|
@ -32,10 +36,10 @@ const Welcome: React.FC = () => {
|
|
|
|
|
label: {
|
|
|
|
|
autoRotate: false,
|
|
|
|
|
formatter: (value: any) => {
|
|
|
|
|
return value.length > 10 ? value.substring(0, 10) + '...' : value;
|
|
|
|
|
return value.length > 10 ? value.substring(0,10) + '...' : value;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const pieConfig = {
|
|
|
|
|
@ -53,68 +57,72 @@ const Welcome: React.FC = () => {
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const getData = (type: number) => {
|
|
|
|
|
if (type) {
|
|
|
|
|
handleLoadChange(true);
|
|
|
|
|
dashboardUsingPost({ pbcQueryType: type })
|
|
|
|
|
.then((res) => {
|
|
|
|
|
handleLoadChange(false);
|
|
|
|
|
if (res.retcode && res.data) {
|
|
|
|
|
setPbcRegisterStatical(res.data.pbcRegisterStaticalVO);
|
|
|
|
|
setPbcScanCodeStatical(res.data.pbcScanCodeStaticalVO);
|
|
|
|
|
setPbcInteractStatical(res.data.pbcInteractStaticalVO);
|
|
|
|
|
setData1(
|
|
|
|
|
(res.data.pbcBusinessViewStaticalVO.pbcBusinessRankList || []).map((e: any) => {
|
|
|
|
|
return {
|
|
|
|
|
label: e.pbcBusinessName,
|
|
|
|
|
value: e.pbcBusinessVisitCount,
|
|
|
|
|
};
|
|
|
|
|
}),
|
|
|
|
|
);
|
|
|
|
|
const arr = [
|
|
|
|
|
{
|
|
|
|
|
type: '分享',
|
|
|
|
|
value: res.data.pbcVisitStaticalVO.pbcShareNumber || 0,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: '扫码',
|
|
|
|
|
value: res.data.pbcVisitStaticalVO.pbcScanNumber || 0,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: '链接',
|
|
|
|
|
value: res.data.pbcVisitStaticalVO.pbcLinkNumber || 0,
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
setData2(arr);
|
|
|
|
|
setData3(
|
|
|
|
|
(res.data.pbcProductViewStaticalVO.pbcProductViewRank || []).map((e: any) => {
|
|
|
|
|
return {
|
|
|
|
|
label: e.pbcProductName,
|
|
|
|
|
value: e.pbcProductVisitCount,
|
|
|
|
|
};
|
|
|
|
|
}),
|
|
|
|
|
);
|
|
|
|
|
setData4(
|
|
|
|
|
(res.data.pbcProductCollectStaticalVO.pbcProductCollectViewRank || []).map(
|
|
|
|
|
(e: any) => {
|
|
|
|
|
return {
|
|
|
|
|
label: e.pbcProductName,
|
|
|
|
|
value: e.pbcProductCollectCount,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
handleLoadChange(true);
|
|
|
|
|
});
|
|
|
|
|
const getData = () => {
|
|
|
|
|
const param: any = ref.current?.getFieldsValue()
|
|
|
|
|
if (param) {
|
|
|
|
|
if (param.dateRange) {
|
|
|
|
|
param.startDate = dayjs(param.dateRange[0]).format('YYYY-MM-DD')
|
|
|
|
|
param.endDate = dayjs(param.dateRange[1]).format('YYYY-MM-DD') + ' 23:59:59'
|
|
|
|
|
delete param.dateRange
|
|
|
|
|
}
|
|
|
|
|
handleLoadChange(true)
|
|
|
|
|
dashboardUsingPost(param).then(res => {
|
|
|
|
|
handleLoadChange(false)
|
|
|
|
|
if (res.retcode && res.data) {
|
|
|
|
|
setPbcRegisterStatical(res.data.pbcRegisterStaticalVO)
|
|
|
|
|
setPbcScanCodeStatical(res.data.pbcScanCodeStaticalVO)
|
|
|
|
|
setPbcInteractStatical(res.data.pbcInteractStaticalVO)
|
|
|
|
|
setData1((res.data.pbcBusinessViewStaticalVO.pbcBusinessRankList || []).map((e: any) => {
|
|
|
|
|
return {
|
|
|
|
|
label: e.pbcBusinessName,
|
|
|
|
|
value: e.pbcBusinessVisitCount
|
|
|
|
|
}
|
|
|
|
|
}))
|
|
|
|
|
const arr = [
|
|
|
|
|
{
|
|
|
|
|
type: '分享',
|
|
|
|
|
value: res.data.pbcVisitStaticalVO.pbcShareNumber || 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: '扫码',
|
|
|
|
|
value: res.data.pbcVisitStaticalVO.pbcScanNumber || 0
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: '链接',
|
|
|
|
|
value: res.data.pbcVisitStaticalVO.pbcLinkNumber || 0
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
setData2(arr)
|
|
|
|
|
setData3((res.data.pbcProductViewStaticalVO.pbcProductViewRank || []).map((e: any) => {
|
|
|
|
|
return {
|
|
|
|
|
label: e.pbcProductName,
|
|
|
|
|
value: e.pbcProductVisitCount
|
|
|
|
|
}
|
|
|
|
|
}))
|
|
|
|
|
setData4((res.data.pbcProductCollectStaticalVO.pbcProductCollectViewRank || []).map((e: any) => {
|
|
|
|
|
return {
|
|
|
|
|
label: e.pbcProductName,
|
|
|
|
|
value: e.pbcProductCollectCount
|
|
|
|
|
}
|
|
|
|
|
}))
|
|
|
|
|
}
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
handleLoadChange(true)
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const disabledDate: DatePickerProps['disabledDate'] = (current, { from }) => {
|
|
|
|
|
if (from) {
|
|
|
|
|
return Math.abs(current.diff(from, 'months')) >= 3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
getData(1);
|
|
|
|
|
}, []);
|
|
|
|
|
getData()
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<PageContainer
|
|
|
|
|
@ -124,79 +132,79 @@ const Welcome: React.FC = () => {
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<ProCard style={{ marginBottom: 12 }} bodyStyle={{ padding: '10px 24px' }}>
|
|
|
|
|
<Radio.Group
|
|
|
|
|
optionType="button"
|
|
|
|
|
buttonStyle="solid"
|
|
|
|
|
defaultValue={1}
|
|
|
|
|
onChange={({ target: { value } }: RadioChangeEvent) => {
|
|
|
|
|
getData(value);
|
|
|
|
|
<ProForm
|
|
|
|
|
layout="inline"
|
|
|
|
|
formRef={ref}
|
|
|
|
|
initialValues={{
|
|
|
|
|
pbcQueryType: 1,
|
|
|
|
|
pbcCategoryType: null
|
|
|
|
|
}}
|
|
|
|
|
options={[
|
|
|
|
|
{
|
|
|
|
|
label: '今日',
|
|
|
|
|
value: 1,
|
|
|
|
|
submitter={{
|
|
|
|
|
searchConfig: {
|
|
|
|
|
submitText: '查询',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '本月',
|
|
|
|
|
value: 2,
|
|
|
|
|
submitButtonProps: {
|
|
|
|
|
loading: loading,
|
|
|
|
|
},
|
|
|
|
|
resetButtonProps: {
|
|
|
|
|
style: {
|
|
|
|
|
display: 'none',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
}}
|
|
|
|
|
onFinish={async (values) => {
|
|
|
|
|
console.log(values)
|
|
|
|
|
getData()
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<ProFormGroup size="small">
|
|
|
|
|
<ProFormRadio.Group
|
|
|
|
|
colon={false}
|
|
|
|
|
name="pbcQueryType"
|
|
|
|
|
label=" "
|
|
|
|
|
radioType="button"
|
|
|
|
|
fieldProps={{
|
|
|
|
|
buttonStyle: "solid"
|
|
|
|
|
}}
|
|
|
|
|
options={[
|
|
|
|
|
{
|
|
|
|
|
label: '今日',
|
|
|
|
|
value: 1,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: '本月',
|
|
|
|
|
value: 2,
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
<ProFormDateRangePicker
|
|
|
|
|
name="dateRange"
|
|
|
|
|
fieldProps={{
|
|
|
|
|
maxDate: dayjs(),
|
|
|
|
|
disabledDate
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</ProFormGroup>
|
|
|
|
|
</ProForm>
|
|
|
|
|
</ProCard>
|
|
|
|
|
<Spin spinning={loading}>
|
|
|
|
|
<Row style={{ marginBottom: 12 }} gutter={16}>
|
|
|
|
|
<Col span={8}>
|
|
|
|
|
<Card
|
|
|
|
|
title="注册情况"
|
|
|
|
|
bodyStyle={{ display: 'flex', justifyContent: 'space-between' }}
|
|
|
|
|
bordered={false}
|
|
|
|
|
>
|
|
|
|
|
<Statistic
|
|
|
|
|
title="商家数"
|
|
|
|
|
valueStyle={{ color: '#3f8600', fontSize: 30 }}
|
|
|
|
|
value={pbcRegisterStatical.businessNumber || 0}
|
|
|
|
|
/>
|
|
|
|
|
<Statistic
|
|
|
|
|
title="会员数"
|
|
|
|
|
valueStyle={{ color: '#3f8600', fontSize: 30 }}
|
|
|
|
|
value={pbcRegisterStatical.vipNumber || 0}
|
|
|
|
|
/>
|
|
|
|
|
<Card title="注册情况" bodyStyle={{ display: 'flex', justifyContent: 'space-between' }} bordered={false}>
|
|
|
|
|
<Statistic title="商家数" valueStyle={{ color: '#3f8600', fontSize: 30 }} value={pbcRegisterStatical.businessNumber || 0} />
|
|
|
|
|
<Statistic title="会员数" valueStyle={{ color: '#3f8600', fontSize: 30 }} value={pbcRegisterStatical.vipNumber || 0} />
|
|
|
|
|
</Card>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={8}>
|
|
|
|
|
<Card
|
|
|
|
|
title="扫码情况"
|
|
|
|
|
bodyStyle={{ display: 'flex', justifyContent: 'space-between' }}
|
|
|
|
|
bordered={false}
|
|
|
|
|
>
|
|
|
|
|
<Statistic
|
|
|
|
|
title="扫码次数"
|
|
|
|
|
valueStyle={{ color: '#3f8600', fontSize: 30 }}
|
|
|
|
|
value={pbcScanCodeStatical.pbcScanNumber || 0}
|
|
|
|
|
/>
|
|
|
|
|
<Statistic
|
|
|
|
|
title="扫码人数"
|
|
|
|
|
valueStyle={{ color: '#3f8600', fontSize: 30 }}
|
|
|
|
|
value={pbcScanCodeStatical.pbcScanUserNumber || 0}
|
|
|
|
|
/>
|
|
|
|
|
<Card title="扫码情况" bodyStyle={{ display: 'flex', justifyContent: 'space-between' }} bordered={false}>
|
|
|
|
|
<Statistic title="扫码次数" valueStyle={{ color: '#3f8600', fontSize: 30 }} value={pbcScanCodeStatical.pbcScanNumber || 0} />
|
|
|
|
|
<Statistic title="扫码人数" valueStyle={{ color: '#3f8600', fontSize: 30 }} value={pbcScanCodeStatical.pbcScanUserNumber || 0} />
|
|
|
|
|
</Card>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={8}>
|
|
|
|
|
<Card
|
|
|
|
|
title="互动情况"
|
|
|
|
|
bodyStyle={{ display: 'flex', justifyContent: 'space-between' }}
|
|
|
|
|
bordered={false}
|
|
|
|
|
>
|
|
|
|
|
<Statistic
|
|
|
|
|
title="浏览总数"
|
|
|
|
|
valueStyle={{ color: '#3f8600', fontSize: 30 }}
|
|
|
|
|
value={pbcInteractStatical.pbcViewTotalNumber || 0}
|
|
|
|
|
/>
|
|
|
|
|
<Statistic
|
|
|
|
|
title="收藏总数"
|
|
|
|
|
valueStyle={{ color: '#3f8600', fontSize: 30 }}
|
|
|
|
|
value={pbcInteractStatical.pbcColectNumber || 0}
|
|
|
|
|
/>
|
|
|
|
|
<Card title="互动情况" bodyStyle={{ display: 'flex', justifyContent: 'space-between' }} bordered={false}>
|
|
|
|
|
<Statistic title="浏览总数" valueStyle={{ color: '#3f8600', fontSize: 30 }} value={pbcInteractStatical.pbcViewTotalNumber || 0} />
|
|
|
|
|
<Statistic title="收藏总数" valueStyle={{ color: '#3f8600', fontSize: 30 }} value={pbcInteractStatical.pbcColectNumber || 0} />
|
|
|
|
|
</Card>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
|