yongxu-web/src/pages/Welcome.tsx

import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, Col, DatePicker, Form, Row, Space } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import styles from './Welcome.less';
import { getStatisticData } from '@/services/statistic';
import bookSum from '../../public/assets/book-sum.png';
import totalOnlineNum from '../../public/icons/total_online_num.png';
import activation1 from '../../public/icons/activation_1.png';
import activation2 from '../../public/icons/activation_2.png';
import online1 from '../../public/icons/online_1.png';
import online2 from '../../public/icons/online_2.png';
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import moment from 'moment/moment';
import * as echarts from 'echarts';

const { RangePicker } = DatePicker;

/**
 * 首页
 * @constructor
 */
const Welcome: React.FC = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState<any>(null);
  const [searchData, setSearchData] = useState<object | null>({});
  const chartRef: any = useRef();

  // 获取数据
  const getList = () => {
    const params = {
      ...searchData,
    };
    getStatisticData(params).then((res) => {
      if (res && res.code === 0) {
        setData(res.data);
        const chart = echarts.init(chartRef.current);
        const region = JSON.parse(res.data.region);
        const newData = Object.entries(region).map(([name, value]) => ({ value, name }));
        console.log(newData);
        const options = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: newData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        };
        // 设置图表实例的配置项和数据
        chart.setOption(options);
      }
    });
  };

  // 初始化
  useEffect(() => {
    getList();
  }, []);

  useEffect(() => {
    getList();
  }, [searchData]);

  //  搜索
  const onFinish = () => {
    const params: any = {};
    form.validateFields().then((res) => {
      if (res.time) {
        params.time_start = moment(res.time[0]).format('YYYY-MM-DD');
        params.time_end = moment(res.time[1]).format('YYYY-MM-DD');
      }
      setSearchData(params);
    });
  };
  //  重置
  const onReset = () => {
    form.resetFields();
    setSearchData(null);
  };

  return (
    <PageContainer>
      <Card style={{ marginBottom: '20px' }}>
        <Form form={form} layout="inline" onFinish={onFinish}>
          <Form.Item name="time" label="时间">
            <RangePicker />
          </Form.Item>
          <Form.Item style={{ marginBottom: '10px' }}>
            <Space>
              <Button type="primary" htmlType="submit">
                <SearchOutlined />
                查询
              </Button>
              <Button htmlType="button" onClick={onReset}>
                <ReloadOutlined />
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
      <Card className={styles.container}>
        <Row gutter={[30, 20]}>
          <Col span={5} xs={24} sm={12} md={12} lg={12} xl={5} xxl={5}>
            <div className={styles.itemLeft}>
              <span className={styles.leftTitle}>总数</span>
              <div className={styles.imgBox}>
                <img src={bookSum} alt="" />
              </div>
              <span className={styles.leftNumber}>{data?.total}</span>
            </div>
          </Col>
          <Col span={3} xs={24} sm={12} md={12} lg={12} xl={3} xxl={3}>
            <div className={styles.itemCenter}>
              <div className={styles.itemImg}>
                <img src={totalOnlineNum} alt="" />
              </div>
              <div className={styles.itemValue}>{data?.online}</div>
              <div className={styles.itemTitle}>总在线数</div>
            </div>
          </Col>
          <Col span={8} xs={24} sm={12} md={12} lg={12} xl={8} xxl={8}>
            <div className={styles.itemRight}>
              <div className={[styles.imgRightBox, styles.itemRightBg4].join(' ')}>
                <div className={styles.itemRightImg}>
                  <img src={online2} alt="" />
                </div>
                <span className={styles.itemRightVal}>{data?.wuheng_online}</span>
                <span className={styles.itemRightTitle}>五恒在线数</span>
              </div>
              <div className={[styles.imgRightBox, styles.itemRightBg1].join(' ')}>
                <div className={styles.itemRightImg}>
                  <img src={activation2} alt="" />
                </div>
                <span className={styles.itemRightVal}>{data?.wuheng}</span>
                <span className={styles.itemRightTitle}>激活五恒数</span>
              </div>
              <div className={[styles.imgRightBox, styles.itemRightBg3].join(' ')}>
                <div className={styles.itemRightImg}>
                  <img src={online1} alt="" />
                </div>
                <span className={styles.itemRightVal}>{data?.ffx_online}</span>
                <span className={styles.itemRightTitle}>分风箱在线数</span>
              </div>
              <div className={[styles.imgRightBox, styles.itemRightBg2].join(' ')}>
                <div className={styles.itemRightImg}>
                  <img src={activation1} alt="" />
                </div>
                <span className={styles.itemRightVal}>{data?.ffx}</span>
                <span className={styles.itemRightTitle}>激活分风箱数</span>
              </div>
            </div>
          </Col>
          <Col span={8} xs={24} sm={12} md={12} lg={12} xl={8} xxl={8}>
            <div style={{ width: '700px', height: '450px' }} ref={chartRef} />
          </Col>
        </Row>
      </Card>
    </PageContainer>
  );
};

export default Welcome;