|
@@ -0,0 +1,209 @@
|
|
|
|
+import { useState, useEffect } from 'react';
|
|
|
|
+import { Tabs, Table, Button, message } from "antd";
|
|
|
|
+import type { TableProps } from 'antd';
|
|
|
|
+import { DownloadOutlined } from '@ant-design/icons';
|
|
|
|
+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;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+interface GzhDataResponse {
|
|
|
|
+ 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 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);
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ 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}
|
|
|
|
+ />
|
|
|
|
+ ),
|
|
|
|
+ },
|
|
|
|
+ ]}
|
|
|
|
+ />
|
|
|
|
+ </>
|
|
|
|
+ )
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+export default Gzh
|