contentCooper/src/views/weData/gzh/index.tsx

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) => `${(Number(text) * 100).toFixed(2)}%`
    },
    {
      title: '本渠道裂变率',
      dataIndex: 'score',
      key: 'score',
		},
		{
      title: '预估单价',
      dataIndex: 'unitPrice',
      key: 'unitPrice',
		},
		{
      title: '建议结算金额',
      dataIndex: 'settlementAmount',
      key: 'settlementAmount',
    },
  ];

	const separateColumns:TableProps['columns'] = [
    {
      title: '日期',
      dataIndex: 'dateStr',
      key: 'dateStr',
    },
		{
      title: '公众号',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '新增粉丝',
      dataIndex: 'fansIncreaseCount',
      key: 'fansIncreaseCount',
    },
    {
      title: '小程序访问人数',
      dataIndex: 'firstLevel',
      key: 'firstLevel',
    },
    {
      title: '打开率',
      dataIndex: 'openRate',
      key: 'openRate',
      render: (text) => `${(Number(text) * 100).toFixed(2)}%`
    },
    {
      title: '本渠道裂变率',
      dataIndex: 'score',
      key: 'score',
    },
	];

	const separateVideoColumns:TableProps['columns'] = [
		{
			title: '日期',
			dataIndex: 'dateStr',
			key: 'dateStr',
		},
		{
      title: '公众号',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '视频ID',
      dataIndex: 'videoId',
      key: 'videoId',
		},
		{
      title: '视频标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '小程序访问人数',
      dataIndex: 'firstLevel',
      key: 'firstLevel',
    },
    {
      title: '本渠道裂变率',
      dataIndex: 'score',
      key: 'score',
    },
	];
	const fetchGzhData = async (page = 1, pageSize = 10, type = 0) => {
		setAllDataSource([]);
		setSeparateDataSource([]);
    try {
      setLoading(true);
      const res = await http.post<GzhDataResponse>(gzhDataList, {
        pageNum: page,
        pageSize: pageSize,
        type: type
      });
      
      if (res.success && res.data) {
        if (type === 0 || type === 2) {
          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, Number(activeKey));
  };

  const handleDownload = async () => {
    try {
      setDownloadLoading(true);
      // 根据当前选中的标签页设置type参数
      const type = Number(activeKey);

      // 使用当前分页信息
      const response = await http.post(gzhDataExport, {
        pageNum: pagination.current,
        pageSize: pagination.pageSize,
        type: type
      });

      if (response.success && response.data) {
        window.open(response.data as string);
      } 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={(record, idx) => record.dateStr + record.ghId + idx}
                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={separateColumns}
                rowKey={(record, idx) => record.dateStr + record.ghId + idx}
                loading={loading}
                pagination={{
                  current: pagination.current,
                  pageSize: pagination.pageSize,
                  total: pagination.total,
                  showSizeChanger: true,
                  showTotal: (total) => `共 ${total} 条`,
                }}
                onChange={handleTableChange}
              />
            ),
					},
					{
            key: "4",
            label: "自动回复分账号分视频",
            children: (
              <Table
                dataSource={separateDataSource}
                columns={separateVideoColumns}
								rowKey={(record, idx) => record.dateStr + record.ghId + idx}
                loading={loading}
                pagination={{
                  current: pagination.current,
                  pageSize: pagination.pageSize,
                  total: pagination.total,
                  showSizeChanger: true,
                  showTotal: (total) => `共 ${total} 条`,
                }}
                onChange={handleTableChange}
              />
            ),
					},
					{
            key: "2",
            label: "服务号总计",
            children: (
              <Table
                dataSource={allDataSource}
                columns={columns}
                rowKey={(record, idx) => record.dateStr + record.ghId + idx}
                loading={loading}
                pagination={{
                  current: pagination.current,
                  pageSize: pagination.pageSize,
                  total: pagination.total,
                  showSizeChanger: true,
                  showTotal: (total) => `共 ${total} 条`,
                }}
                onChange={handleTableChange}
              />
            ),
          },
          {
            key: "3",
            label: "服务号分账号",
            children: (
              <Table
                dataSource={separateDataSource}
                columns={separateColumns}
                rowKey={(record, idx) => record.dateStr + record.ghId + idx}
                loading={loading}
                pagination={{
                  current: pagination.current,
                  pageSize: pagination.pageSize,
                  total: pagination.total,
                  showSizeChanger: true,
                  showTotal: (total) => `共 ${total} 条`,
                }}
                onChange={handleTableChange}
              />
            ),
          },
        ]}
      />
    </>
  )
}

export default Gzh