scrm.antd/src/pages/Workbench/index.tsx

import { post } from '@/services/ajax';
import { Area, Line } from '@ant-design/charts';
import { BarChartOutlined, CommentOutlined, TeamOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Spin } from 'antd';
import React, { useEffect, useState } from 'react';
import { DataItemCard } from './components/DataItemCard';
import { DataSumItemCard } from './components/DataSumItemCard';
import styles from './index.module.scss';

type ICustChartItem = {
  name: string;
  num: number;
  time: string;
};

type IData = {
  overView: {
    custs_total: number;
    groups_members_total: number;
    groups_total: number;
  };
  custsInfo: {
    month_custs: number;
    today_custs: number;
    today_loss: number;
    today_net_growth: number;
  };
  groupsInfo: {
    today_diss_groups: number;
    today_diss_groups_members: number;
    today_groups: number;
    today_groups_members: number;
  };
  custsChart: ICustChartItem[];
  groupsChart: ICustChartItem[];
};

const Workbench: React.FC = () => {
  const [data, setData] = useState<IData>({
    overView: {
      custs_total: 0,
      groups_members_total: 0,
      groups_total: 0,
    },
    custsInfo: {
      month_custs: 0,
      today_custs: 0,
      today_loss: 0,
      today_net_growth: 0,
    },
    groupsInfo: {
      today_diss_groups: 0,
      today_diss_groups_members: 0,
      today_groups: 0,
      today_groups_members: 0,
    },
    custsChart: [],
    groupsChart: [],
  });
  const [loading, setLoading] = useState(false);

  const getWorkBenchInfo = () => {
    setLoading(true);
    post({ url: '/WorkBench/Info' }).then((res) => {
      setLoading(false);
      if (res.err_code == 0) {
        if (res.over_view) {
          data.overView = res.over_view;
        }
        if (res.groups_info) {
          data.groupsInfo = res.groups_info;
        }
        if (res.custs_info) {
          data.custsInfo = res.custs_info;
        }
        if (Array.isArray(res.custs_chart)) {
          data.custsChart = res.custs_chart;
        }
        if (Array.isArray(res.groups_chart)) {
          data.groupsChart = res.groups_chart;
        }
        setData({ ...data });
      }
    });
  };

  useEffect(() => {
    getWorkBenchInfo();
  }, []);

  return (
    <PageContainer>
      <Spin spinning={loading}>
        <div className={styles.dataSum} style={{ padding: '24px 0' }}>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              marginBottom: 24,
              padding: '0 24px',
            }}
          >
            <span style={{ fontSize: 18 }}>数据总览</span>
            {/* <span style={{ color: '#999' }}>更新时间：2022-12-12 23:30:30</span> */}
          </div>
          <div className={styles.dataSumBox}>
            <DataSumItemCard
              title="客户数量"
              content="全部客户数量(含重复)"
              icon={<TeamOutlined className={styles.icon} />}
              count={data.overView.custs_total}
            />
            <DataSumItemCard
              title="客群数量"
              content="全部客群数量"
              icon={<CommentOutlined className={styles.icon} />}
              count={data.overView.groups_total}
            />
            <DataSumItemCard
              title="客群成员总数"
              content="客群成员的总数(含员工)(含重复)"
              icon={<BarChartOutlined className={styles.icon} />}
              count={data.overView.groups_members_total}
            />
          </div>
        </div>
        <div className={styles.dataSum}>
          <div style={{ fontSize: 18 }}>客户数据</div>
          <div className={styles.dataCardBox}>
            <DataItemCard
              title="今日新增客户"
              content="今日添加的客户数(含重复及流失)"
              count={data.custsInfo.today_custs}
            />
            <span style={{ width: 16 }} />
            {/* <DataItemCard
            title="今日跟进客户"
            content="今日处于跟进中状态的客户数(含重复)"
            count={11}
          /> */}
            {/* <span style={{ width: 16 }} /> */}
            <DataItemCard
              title="今日净增客户"
              content="今日添加的客户数(不含重复及流失)"
              count={data.custsInfo.today_net_growth}
            />
            <span style={{ width: 16 }} />
            <DataItemCard
              title="今日流失客户"
              content="今日流失的全部客户数量"
              count={data.custsInfo.today_loss}
            />
            <span style={{ width: 16 }} />
            <DataItemCard
              title="本月新增客户"
              content="本月添加的客户数(含重复及流失)"
              count={data.custsInfo.month_custs}
            />
            {/* <DataItemCard
            title="昨日发送申请"
            content="当前员工数权限范围内主动向客户发起的申请数"
            count={11}
          /> */}
          </div>
          <Line
            data={data.custsChart}
            xField="time"
            yField="num"
            seriesField="name"
            // yAxis= {{
            //   label: {
            //     formatter: (v: any) => `${(v / 10e8).toFixed(1)} B`,
            //   },
            // },}
            legend={{
              position: 'top',
            }}
            smooth={true}
            // @TODO 后续会换一种动画方式
            animation={{
              appear: {
                animation: 'path-in',
                duration: 3000,
              },
            }}
          />
        </div>
        <div className={styles.dataSum}>
          <div style={{ fontSize: 18 }}>客群数据</div>
          <div className={styles.dataCardBox}>
            <DataItemCard
              title="今日新增客群"
              content="今日创建的客群数"
              count={data.groupsInfo.today_groups}
            />
            <span style={{ width: 16 }} />
            <DataItemCard
              title="今日解散客群"
              content="今日解散的客群数"
              count={data.groupsInfo.today_diss_groups}
            />
            <span style={{ width: 16 }} />
            <DataItemCard
              title="今日新增成员"
              content="今日新增客群成员数(含员工)"
              count={data.groupsInfo.today_groups_members}
            />
            <span style={{ width: 16 }} />
            <DataItemCard
              title="今日退出成员"
              content="今日退出客群成员数(含员工)"
              count={data.groupsInfo.today_diss_groups_members}
            />
          </div>
          <Area
            data={data.groupsChart}
            xField="time"
            yField="num"
            seriesField="name"
            smooth={true}
            legend={{ position: 'top' }}
            isStack={false}
          />
        </div>
      </Spin>
    </PageContainer>
  );
};

export default Workbench;