xs-manage/estateagents-admin-manager/src/pages/Monitor.jsx

import React, { Component, useState, useEffect } from 'react';
import { Card, Typography, Alert, Row, Col } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import EchartsTest from '../components/EchartsTest';
import IndexEcharts from './indexEcharts/index';
// import Swiper from './swiper/index';
import router from 'umi/router';
import request from '../utils/request';
import apis from '../services/apis';

const Monitor = props => {

  const [data, setData] = useState([])

  const [checkData, setCheckData] = useState([])

  useEffect(() => {
    getIndexEcharts()
    getBuildingReports()
  }, [])

  function getIndexEcharts(params) {
    request({
      ...apis.indexEcharts.list,
      params
    }).then((data) => {
      setData(data)
      console.log(data, '11111')
    })
  }

  function getBuildingReports() {
    request({ ...apis.system.taBuildingReports, }).then((data) => {
      console.log(data,"22222222222222222")
      setCheckData((data.records || []).map((x) => x.reportCode))
    })
  }

  return (
    <>
      <div style={{ display: 'flex', marginBottom: '33px' }}>
        {checkData.includes('total_number_of_users') &&
          <div style={{
            textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(241,43,62,1) 0%,rgba(254,144,155,1) 100%)', height: '100px',
            boxShadow: '0px  0.106rem 14px -15px rgba(241,43,62,1)',
            borderRadius: '12px', width: '32%', marginRight: '2%'
          }}>
            <span style={{ fontSize: '24px', color: '#fff' }}>总用户 </span>
            <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{data.selectUserCount || '0'}</span>
          </div>
        }
        {checkData.includes('total_number_of_registered_users') &&
          <div style={{
            textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(255,126,74,1) 0%,rgba(255,196,168,1) 100%)', height: '100px',
            boxShadow: '0px  0.106rem 14px -15px rgba(255,126,74,1)',
            borderRadius: '12px', width: '32%', marginRight: '2%'
          }}>
            <span style={{ fontSize: '24px', color: '#fff' }}>总注册用户 </span>
            <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{data.selectRegisteredCount || '0'}</span>
          </div>
        }
        {checkData.includes('total_number_of_visit_users') &&
          <div style={{
            textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(255,126,74,1) 0%,rgba(255,196,168,1) 100%)', height: '100px',
            boxShadow: '0px  0.106rem 14px -15px rgba(255,126,74,1)',
            borderRadius: '12px', width: '32%', marginRight: '2%'
          }}>
            <span style={{ fontSize: '24px', color: '#fff' }}>今日访问次数 </span>
            <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{data.selectVisitCount || '0'}</span>
          </div>
        }
        {checkData.includes('number_of_new_users') &&
          <div onClick={() => router.push('/statistical/newUsers')} style={{
            textAlign: 'center', display: 'flex', justifyContent: 'center', background: 'linear-gradient(137deg,rgba(107,130,230,1) 0%,rgba(152,175,251,1) 100%)', height: '100px',
            boxShadow: '0px  0.106rem 14px -15px rgba(107,130,230,1)',
            borderRadius: '12px', width: '32%',
          }}>
            <span style={{ fontSize: '24px', color: '#fff', borderBottom: '1px solid #fff', margin: '30px 0', cursor: 'pointer' }}>今日新增用户 </span>
            <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy', lineHeight: '100px' }}>{data.selectRecentlyCount || '0'}</span>
          </div>
        }
      </div>
      {/* <Swiper /> */}
      <IndexEcharts style={{ width: '100%' }} onReData={(e) => redata(e)} checkData={checkData}></IndexEcharts>
    </>
  )

}
export default Monitor