|
|
|
|
@ -1,11 +1,35 @@
|
|
|
|
|
import { dashboardUsingPost } from '@/services/pop-b2b2c/pbcUserRecordLogController';
|
|
|
|
|
import { dashboardUsingPost, exportDashboardDetailUsingPost } from '@/services/pop-b2b2c/pbcUserRecordLogController';
|
|
|
|
|
import { Bar, Pie, WordCloud, WordCloudConfig } from '@ant-design/plots';
|
|
|
|
|
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 { Button, Card, Col, DatePickerProps, message, Row, Spin, Statistic } from 'antd';
|
|
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
|
|
|
|
import { querySearchKeyRankUsingPost } from '@/services/pop-b2b2c/pbcSearchKeyController';
|
|
|
|
|
import { history, Link } from '@umijs/max';
|
|
|
|
|
import Constants from '@/constants';
|
|
|
|
|
|
|
|
|
|
const handleExport = async (values?: API.PbcDashBoardDTO) => {
|
|
|
|
|
|
|
|
|
|
const hide = message.loading('正在处理', 0);
|
|
|
|
|
try {
|
|
|
|
|
await exportDashboardDetailUsingPost(
|
|
|
|
|
{ ...values },
|
|
|
|
|
{
|
|
|
|
|
responseType: 'blob',
|
|
|
|
|
getResponse: true,
|
|
|
|
|
parseResponse: false,
|
|
|
|
|
data: { ...values, fileName: '导出' },
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
hide();
|
|
|
|
|
return false;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
hide();
|
|
|
|
|
message.error('处理失败，请重试');
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const Welcome: React.FC = () => {
|
|
|
|
|
|
|
|
|
|
@ -59,19 +83,11 @@ const Welcome: React.FC = () => {
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const asyncFetch = () => {
|
|
|
|
|
fetch('https://gw.alipayobjects.com/os/antfincdn/jPKbal7r9r/mock.json')
|
|
|
|
|
.then((response) => response.json())
|
|
|
|
|
.then((json) => setData5(json))
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
console.log('fetch data failed', error);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
const wordCloudConfig: WordCloudConfig = {
|
|
|
|
|
data: data5,
|
|
|
|
|
wordField: 'x',
|
|
|
|
|
weightField: 'value',
|
|
|
|
|
colorField: 'x',
|
|
|
|
|
wordField: 'pbcSearchWord',
|
|
|
|
|
weightField: 'number',
|
|
|
|
|
colorField: 'pbcSearchWord',
|
|
|
|
|
wordStyle: {
|
|
|
|
|
fontFamily: 'Verdana',
|
|
|
|
|
fontSize: [14, 60],
|
|
|
|
|
@ -128,6 +144,7 @@ const Welcome: React.FC = () => {
|
|
|
|
|
value: e.pbcProductCollectCount
|
|
|
|
|
}
|
|
|
|
|
}))
|
|
|
|
|
setData5(res.data.searchWordListVO)
|
|
|
|
|
}
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
handleLoadChange(true)
|
|
|
|
|
@ -151,7 +168,6 @@ const Welcome: React.FC = () => {
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
getData()
|
|
|
|
|
asyncFetch()
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
@ -181,6 +197,20 @@ const Welcome: React.FC = () => {
|
|
|
|
|
display: 'none',
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
render(props, dom) {
|
|
|
|
|
return [
|
|
|
|
|
dom,
|
|
|
|
|
<Button type="primary" key="export" onClick={() => {
|
|
|
|
|
const values: any = ref.current?.getFieldsValue();
|
|
|
|
|
if (values.dateRange) {
|
|
|
|
|
values.startDate = dayjs(values.dateRange[0]).format('YYYY-MM-DD')
|
|
|
|
|
values.endDate = dayjs(values.dateRange[1]).format('YYYY-MM-DD') + ' 23:59:59'
|
|
|
|
|
delete values.dateRange
|
|
|
|
|
}
|
|
|
|
|
handleExport(values)
|
|
|
|
|
}}>导出</Button>
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
onFinish={async (values) => {
|
|
|
|
|
console.log(values)
|
|
|
|
|
@ -258,14 +288,26 @@ const Welcome: React.FC = () => {
|
|
|
|
|
plot.on('plot:click', (evt: { x: any; y: any; }) => {
|
|
|
|
|
const { x, y } = evt;
|
|
|
|
|
const tooltipData = plot.chart.getTooltipItems({ x, y });
|
|
|
|
|
console.log(tooltipData);
|
|
|
|
|
history.push('/dashboard/channel-statistics')
|
|
|
|
|
console.log(tooltipData[0]);
|
|
|
|
|
let type = ""
|
|
|
|
|
if (tooltipData && tooltipData.length > 0) {
|
|
|
|
|
for (const key in Constants.pbcVisitSourceEnum) {
|
|
|
|
|
if (Object.prototype.hasOwnProperty.call(Constants.pbcVisitSourceEnum, key)) {
|
|
|
|
|
//@ts-ignore
|
|
|
|
|
const element = Constants.pbcVisitSourceEnum[key];
|
|
|
|
|
if (element === tooltipData[0].name) {
|
|
|
|
|
type = key
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
history.push('/dashboard/channel-statistics?type='+type)
|
|
|
|
|
});
|
|
|
|
|
}} />
|
|
|
|
|
</Card>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row gutter={16}>
|
|
|
|
|
<Row style={{ marginBottom: 12 }} gutter={16}>
|
|
|
|
|
<Col span={12}>
|
|
|
|
|
<Card title="商品浏览次数排行榜" bordered={false}>
|
|
|
|
|
<Bar {...config} data={data3} />
|
|
|
|
|
|
