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';

const Home = () => {
  const navigate = useNavigate();
  const { TradeStore } = useContext(stores_Context);
  const { sideData, summaryData } = TradeStore;

  useEffect(() => {
    if (empty(summaryData?.errcode)) {
      TradeStore.fetchSummaryData();
    }
    if (empty(sideData?.errcode)) {
      TradeStore.fetchTradeDataByMonth();
    }
    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>
    );
  };

  return (
    <>
      <h2>年度业绩</h2>
      <section>
        <Spin spinning={summaryData.loading}>
          <Row gutter={16}>
            <Col span={6}>
              <StatisticCard title="人数" value={summaryData?.result1?.SumPersonNum} VSrate={summaryData?.result1?.SumPersonNumrate} KPIrate={summaryData?.result1?.SumPersonNumKPIrate} />
            </Col>
            <Col span={6}>
              <StatisticCard title="成团" value={summaryData?.result1?.SumOrder} VSrate={summaryData?.result1?.SumOrderrate} KPIrate={summaryData?.result1?.SumOrderKPIrate} />
            </Col>
            <Col span={6}>
              <StatisticCard title="毛利" value={summaryData?.result1?.SumML} VSrate={summaryData?.result1?.SumMLrate} KPIrate={summaryData?.result1?.SumMLKPIrate} />
            </Col>
            <Col span={6}>
              <StatisticCard title="完成率" value={`${summaryData?.result1?.SumMLKPIrate}%`} showProgress={false} />
            </Col>
          </Row>
        </Spin>
      </section>
      <h3>市场进度</h3>

      <section>
        <Spin spinning={sideData.loading}></Spin>
      </section>
    </>
  );
};

export default observer(Home);