import { Card, Col, Row, Statistic, Tooltip } from 'antd'; import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale'; import React, { Component } from 'react'; import { Dispatch } from 'redux'; import { GridContent } from '@ant-design/pro-layout'; import { connect } from 'dva'; import numeral from 'numeral'; import { StateType } from './model'; import { Pie, WaterWave, Gauge, TagCloud } from './components/Charts'; import ActiveChart from './components/ActiveChart'; import styles from './style.less'; const { Countdown } = Statistic; const targetTime = new Date().getTime() + 3900000; interface PAGE_NAME_UPPER_CAMEL_CASEProps { BLOCK_NAME_CAMEL_CASE: StateType; dispatch: Dispatch; loading: boolean; } @connect( ({ BLOCK_NAME_CAMEL_CASE, loading, }: { BLOCK_NAME_CAMEL_CASE: StateType; loading: { models: { [key: string]: boolean }; }; }) => ({ BLOCK_NAME_CAMEL_CASE, loading: loading.models.monitor, }), ) class PAGE_NAME_UPPER_CAMEL_CASE extends Component { componentDidMount() { const { dispatch } = this.props; dispatch({ type: 'BLOCK_NAME_CAMEL_CASE/fetchTags', }); } render() { const { BLOCK_NAME_CAMEL_CASE, loading } = this.props; const { tags } = BLOCK_NAME_CAMEL_CASE; return ( } bordered={false} > } suffix="元" value={numeral(124543233).format('0,0')} /> } value="92%" /> } > } suffix="元" value={numeral(234).format('0,0')} />
} > map
} style={{ marginBottom: 24 }} bordered={false} > } style={{ marginBottom: 24 }} bodyStyle={{ textAlign: 'center' }} bordered={false} >
} bordered={false} className={styles.pieCard} > } total="28%" height={128} lineWidth={2} /> } total="22%" height={128} lineWidth={2} /> } total="32%" height={128} lineWidth={2} /> } loading={loading} bordered={false} bodyStyle={{ overflow: 'hidden' }} > } bodyStyle={{ textAlign: 'center', fontSize: 0 }} bordered={false} > } percent={34} />
); } } export default PAGE_NAME_UPPER_CAMEL_CASE;