|
@@ -6,202 +6,202 @@ import http from '@src/http';
|
|
|
import { gzhDataList, gzhDataExport } from '@src/http/api.ts';
|
|
|
|
|
|
interface GzhDataItem {
|
|
|
- dateStr: string;
|
|
|
- fansIncreaseCount: number;
|
|
|
- firstLevel: number;
|
|
|
- name: string;
|
|
|
- openRate: number;
|
|
|
- score: number;
|
|
|
+ dateStr: string;
|
|
|
+ fansIncreaseCount: number;
|
|
|
+ firstLevel: number;
|
|
|
+ name: string;
|
|
|
+ openRate: number;
|
|
|
+ score: number;
|
|
|
}
|
|
|
|
|
|
interface GzhDataResponse {
|
|
|
- curPageFirstRecNum: number;
|
|
|
- curPageLastRecNum: number;
|
|
|
- currentPage: number;
|
|
|
- nextPage: number;
|
|
|
- obj: GzhDataItem;
|
|
|
- objs: GzhDataItem[];
|
|
|
- offset: number;
|
|
|
- pageSize: number;
|
|
|
- prePage: number;
|
|
|
- totalPage: number;
|
|
|
- totalSize: number;
|
|
|
+ curPageFirstRecNum: number;
|
|
|
+ curPageLastRecNum: number;
|
|
|
+ currentPage: number;
|
|
|
+ nextPage: number;
|
|
|
+ obj: GzhDataItem;
|
|
|
+ objs: GzhDataItem[];
|
|
|
+ offset: number;
|
|
|
+ pageSize: number;
|
|
|
+ prePage: number;
|
|
|
+ totalPage: number;
|
|
|
+ totalSize: number;
|
|
|
}
|
|
|
|
|
|
const Gzh: React.FC = () => {
|
|
|
- const [allDataSource, setAllDataSource] = useState<GzhDataItem[]>([]);
|
|
|
- const [separateDataSource, setSeparateDataSource] = useState<GzhDataItem[]>([]);
|
|
|
- const [loading, setLoading] = useState<boolean>(false);
|
|
|
- const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
|
|
|
- const [pagination, setPagination] = useState({
|
|
|
- current: 1,
|
|
|
- pageSize: 10,
|
|
|
- total: 0
|
|
|
- });
|
|
|
- const [activeKey, setActiveKey] = useState("0");
|
|
|
+ const [allDataSource, setAllDataSource] = useState<GzhDataItem[]>([]);
|
|
|
+ const [separateDataSource, setSeparateDataSource] = useState<GzhDataItem[]>([]);
|
|
|
+ const [loading, setLoading] = useState<boolean>(false);
|
|
|
+ const [downloadLoading, setDownloadLoading] = useState<boolean>(false);
|
|
|
+ const [pagination, setPagination] = useState({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0
|
|
|
+ });
|
|
|
+ const [activeKey, setActiveKey] = useState("0");
|
|
|
|
|
|
- const columns:TableProps['columns'] = [
|
|
|
- {
|
|
|
- title: '日期',
|
|
|
- dataIndex: 'dateStr',
|
|
|
- key: 'dateStr',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '新增粉丝',
|
|
|
- dataIndex: 'fansIncreaseCount',
|
|
|
- key: 'fansIncreaseCount',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '小程序访问人数',
|
|
|
- dataIndex: 'firstLevel',
|
|
|
- key: 'firstLevel',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '打开率',
|
|
|
- dataIndex: 'openRate',
|
|
|
- key: 'openRate',
|
|
|
- render: (text) => `${text}%`
|
|
|
- },
|
|
|
- {
|
|
|
- title: '传播得分',
|
|
|
- dataIndex: 'score',
|
|
|
- key: 'score',
|
|
|
- },
|
|
|
- ];
|
|
|
+ const columns:TableProps['columns'] = [
|
|
|
+ {
|
|
|
+ title: '日期',
|
|
|
+ dataIndex: 'dateStr',
|
|
|
+ key: 'dateStr',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '新增粉丝',
|
|
|
+ dataIndex: 'fansIncreaseCount',
|
|
|
+ key: 'fansIncreaseCount',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '小程序访问人数',
|
|
|
+ dataIndex: 'firstLevel',
|
|
|
+ key: 'firstLevel',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '打开率',
|
|
|
+ dataIndex: 'openRate',
|
|
|
+ key: 'openRate',
|
|
|
+ render: (text) => `${text}%`
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '传播得分',
|
|
|
+ dataIndex: 'score',
|
|
|
+ key: 'score',
|
|
|
+ },
|
|
|
+ ];
|
|
|
|
|
|
- const fetchGzhData = async (page = 1, pageSize = 10, type = 0) => {
|
|
|
- try {
|
|
|
- setLoading(true);
|
|
|
- const res = await http.post<GzhDataResponse>(gzhDataList, {
|
|
|
- pageNum: page,
|
|
|
- pageSize: pageSize,
|
|
|
- type: type
|
|
|
- });
|
|
|
-
|
|
|
- if (res.success && res.data) {
|
|
|
- if (type === 0) {
|
|
|
- setAllDataSource(res.data.objs || []);
|
|
|
- } else {
|
|
|
- setSeparateDataSource(res.data.objs || []);
|
|
|
- }
|
|
|
-
|
|
|
- setPagination({
|
|
|
- current: res.data.currentPage,
|
|
|
- pageSize: res.data.pageSize,
|
|
|
- total: res.data.totalSize
|
|
|
- });
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.error('获取公众号数据失败:', error);
|
|
|
- } finally {
|
|
|
- setLoading(false);
|
|
|
- }
|
|
|
- };
|
|
|
+ const fetchGzhData = async (page = 1, pageSize = 10, type = 0) => {
|
|
|
+ try {
|
|
|
+ setLoading(true);
|
|
|
+ const res = await http.post<GzhDataResponse>(gzhDataList, {
|
|
|
+ pageNum: page,
|
|
|
+ pageSize: pageSize,
|
|
|
+ type: type
|
|
|
+ });
|
|
|
+
|
|
|
+ if (res.success && res.data) {
|
|
|
+ if (type === 0) {
|
|
|
+ setAllDataSource(res.data.objs || []);
|
|
|
+ } else {
|
|
|
+ setSeparateDataSource(res.data.objs || []);
|
|
|
+ }
|
|
|
|
|
|
- useEffect(() => {
|
|
|
- fetchGzhData(1, 10, 0);
|
|
|
- }, []);
|
|
|
+ setPagination({
|
|
|
+ current: res.data.currentPage,
|
|
|
+ pageSize: res.data.pageSize,
|
|
|
+ total: res.data.totalSize
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取公众号数据失败:', error);
|
|
|
+ } finally {
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
- const onChange = (key: string) => {
|
|
|
- console.log(key);
|
|
|
- fetchGzhData(1, 10, Number(key));
|
|
|
- };
|
|
|
-
|
|
|
- const handleTableChange = (pagination: any) => {
|
|
|
- const { current, pageSize } = pagination;
|
|
|
- fetchGzhData(current, pageSize, activeKey === "0" ? 0 : 1);
|
|
|
- };
|
|
|
-
|
|
|
- const handleDownload = async () => {
|
|
|
- try {
|
|
|
- setDownloadLoading(true);
|
|
|
- // 根据当前选中的标签页设置type参数
|
|
|
- const type = activeKey === "0" ? 0 : 1;
|
|
|
-
|
|
|
- // 使用当前分页信息
|
|
|
- const response = await http.post(gzhDataExport, {
|
|
|
- pageNum: pagination.current,
|
|
|
- pageSize: pagination.pageSize,
|
|
|
- type: type
|
|
|
- }, { responseType: 'blob' });
|
|
|
-
|
|
|
- if (response.success && response.data) {
|
|
|
- message.success('下载成功');
|
|
|
- } else {
|
|
|
- message.error('下载失败');
|
|
|
- }
|
|
|
- } catch {
|
|
|
- message.error('下载失败');
|
|
|
- } finally {
|
|
|
- setDownloadLoading(false);
|
|
|
- }
|
|
|
- };
|
|
|
+ useEffect(() => {
|
|
|
+ fetchGzhData(1, 10, 0);
|
|
|
+ }, []);
|
|
|
+
|
|
|
+ const onChange = (key: string) => {
|
|
|
+ console.log(key);
|
|
|
+ fetchGzhData(1, 10, Number(key));
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleTableChange = (pagination: any) => {
|
|
|
+ const { current, pageSize } = pagination;
|
|
|
+ fetchGzhData(current, pageSize, activeKey === "0" ? 0 : 1);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleDownload = async () => {
|
|
|
+ try {
|
|
|
+ setDownloadLoading(true);
|
|
|
+ // 根据当前选中的标签页设置type参数
|
|
|
+ const type = activeKey === "0" ? 0 : 1;
|
|
|
+
|
|
|
+ // 使用当前分页信息
|
|
|
+ const response = await http.post(gzhDataExport, {
|
|
|
+ pageNum: pagination.current,
|
|
|
+ pageSize: pagination.pageSize,
|
|
|
+ type: type
|
|
|
+ }, { responseType: 'blob' });
|
|
|
+
|
|
|
+ if (response.success && response.data) {
|
|
|
+ message.success('下载成功');
|
|
|
+ } else {
|
|
|
+ message.error('下载失败');
|
|
|
+ }
|
|
|
+ } catch {
|
|
|
+ message.error('下载失败');
|
|
|
+ } finally {
|
|
|
+ setDownloadLoading(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
return (
|
|
|
<>
|
|
|
<div className={"flex mb-[10px]"}>
|
|
|
<div className={"flex-1 leading-[32px]"}>公众号数据统计</div>
|
|
|
</div>
|
|
|
- <Tabs
|
|
|
- defaultActiveKey="0"
|
|
|
- type="card"
|
|
|
- tabBarExtraContent={{
|
|
|
- right: <Button
|
|
|
- type="link"
|
|
|
- icon={<DownloadOutlined />}
|
|
|
- loading={downloadLoading}
|
|
|
- onClick={handleDownload}
|
|
|
- >
|
|
|
- 下载数据
|
|
|
- </Button>
|
|
|
- }}
|
|
|
- onChange={(key) => {
|
|
|
- setActiveKey(key);
|
|
|
- onChange(key);
|
|
|
- }}
|
|
|
- items={[
|
|
|
- {
|
|
|
- key: "0",
|
|
|
- label: "账号累计",
|
|
|
- children: (
|
|
|
- <Table
|
|
|
- dataSource={allDataSource}
|
|
|
- columns={columns}
|
|
|
- rowKey="dateStr"
|
|
|
- loading={loading}
|
|
|
- pagination={{
|
|
|
- current: pagination.current,
|
|
|
- pageSize: pagination.pageSize,
|
|
|
- total: pagination.total,
|
|
|
- showSizeChanger: true,
|
|
|
- showTotal: (total) => `共 ${total} 条`,
|
|
|
- }}
|
|
|
- onChange={handleTableChange}
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- {
|
|
|
- key: "1",
|
|
|
- label: "分账号",
|
|
|
- children: (
|
|
|
- <Table
|
|
|
- dataSource={separateDataSource}
|
|
|
- columns={columns}
|
|
|
- rowKey="dateStr"
|
|
|
- loading={loading}
|
|
|
- pagination={{
|
|
|
- current: pagination.current,
|
|
|
- pageSize: pagination.pageSize,
|
|
|
- total: pagination.total,
|
|
|
- showSizeChanger: true,
|
|
|
- showTotal: (total) => `共 ${total} 条`,
|
|
|
- }}
|
|
|
- onChange={handleTableChange}
|
|
|
- />
|
|
|
- ),
|
|
|
- },
|
|
|
- ]}
|
|
|
- />
|
|
|
+ <Tabs
|
|
|
+ defaultActiveKey="0"
|
|
|
+ type="card"
|
|
|
+ tabBarExtraContent={{
|
|
|
+ right: <Button
|
|
|
+ type="link"
|
|
|
+ icon={<DownloadOutlined />}
|
|
|
+ loading={downloadLoading}
|
|
|
+ onClick={handleDownload}
|
|
|
+ >
|
|
|
+ 下载数据
|
|
|
+ </Button>
|
|
|
+ }}
|
|
|
+ onChange={(key) => {
|
|
|
+ setActiveKey(key);
|
|
|
+ onChange(key);
|
|
|
+ }}
|
|
|
+ items={[
|
|
|
+ {
|
|
|
+ key: "0",
|
|
|
+ label: "账号累计",
|
|
|
+ children: (
|
|
|
+ <Table
|
|
|
+ dataSource={allDataSource}
|
|
|
+ columns={columns}
|
|
|
+ rowKey="dateStr"
|
|
|
+ loading={loading}
|
|
|
+ pagination={{
|
|
|
+ current: pagination.current,
|
|
|
+ pageSize: pagination.pageSize,
|
|
|
+ total: pagination.total,
|
|
|
+ showSizeChanger: true,
|
|
|
+ showTotal: (total) => `共 ${total} 条`,
|
|
|
+ }}
|
|
|
+ onChange={handleTableChange}
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "1",
|
|
|
+ label: "分账号",
|
|
|
+ children: (
|
|
|
+ <Table
|
|
|
+ dataSource={separateDataSource}
|
|
|
+ columns={columns}
|
|
|
+ rowKey="dateStr"
|
|
|
+ loading={loading}
|
|
|
+ pagination={{
|
|
|
+ current: pagination.current,
|
|
|
+ pageSize: pagination.pageSize,
|
|
|
+ total: pagination.total,
|
|
|
+ showSizeChanger: true,
|
|
|
+ showTotal: (total) => `共 ${total} 条`,
|
|
|
+ }}
|
|
|
+ onChange={handleTableChange}
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
</>
|
|
|
)
|
|
|
}
|