dashboard/src/views/Home.jsx

import { useContext, useEffect } from 'react';
import { observer } from 'mobx-react';
import { Row, Col, Spin, Card, Statistic, Progress } from 'antd';
import { stores_Context } from '../config';
import { useNavigate } from 'react-router-dom';
import { SlackOutlined, SketchOutlined, AntCloudOutlined, RedditOutlined, GithubOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { empty } from './../utils/commons';
import './home.css';

export default observer(() => {
  const navigate = useNavigate();
  const { TradeStore } = useContext(stores_Context);
  const { sideData, summaryData, topData } = TradeStore;

  useEffect(() => {
    if (empty(summaryData.dataSource)) {
      TradeStore.fetchSummaryData();
      TradeStore.fetchTradeDataByMonth();
      TradeStore.fetchTradeDataByType('Country');
      TradeStore.fetchTradeDataByType('Area');
    }
    return () => {};
  }, []);

  const StatisticCard = (props) => {
    const valueStyle = { color: props.VSrate < 0 ? '#cf1322' : '#3f8600' };
    const VSIcon = () => (props.VSrate < 0 ? <ArrowDownOutlined /> : <ArrowUpOutlined />);
    return (
      <Card>
        <Statistic
          className={'__hn-sta-wrapper'}
          valueStyle={valueStyle}
          suffix={
            props.VSrate && (
              <>
                <VSIcon />
                <span>{props.VSrate}</span>
                <span>%</span>
              </>
            )
          }
          {...props}
        />
        {props.showProgress !== false && <Progress percent={props.KPIrate} size="small" format={(percent) => `${props.KPIrate}%`} />}
      </Card>
    );
  };

  const layoutProps = {
    gutter: { xs: 8, sm: 8, lg: 16 },
    lg: { span: 6 },
    sm: { span: 12 },
    xs: { span: 24 },
  };

  return (
    <>
      <h2>年度业绩</h2>
      <section>
        <Spin spinning={summaryData.loading}>
          <Row gutter={layoutProps.gutter}>
            {summaryData.dataSource.map(item =>
            <Col {...layoutProps} key={item.title}>
              <StatisticCard {...item} showProgress={(item.hasKPI)} />
            </Col>
            )}
          </Row>
        </Spin>
      </section>
      <h3>市场进度</h3>
      <section>
        <Spin spinning={sideData.loading}></Spin>
      </section>
      <h3>TOP</h3>
      <section></section>
    </>
  );
});