taihu/app/containers/DataManagerOverview/index.tsx

import React from 'react'
import Helmet from 'react-helmet'
import Container from 'components/Container'
import styles from './index.less'
// const styles = require('./index.less')

export default function DataOverview() {
  return (
    <Container>
      <Helmet title="数据总览" />

      <div className={styles['overview-container']}>
        <div className={styles['card-list']}>
          {[
            {
              title: '数据资源数量',
              num: 131
            },
            {
              title: '来源部门数量',
              num: 9
            },
            {
              title: '来源系统数量',
              num: 10
            },
            {
              title: '近一月目录新增数量',
              num: 3
            }
          ].map((item) => (
            <div className={styles.item} key={item.title}>
              <div className={styles.title}>{item.title}</div>
              <div>
                <span className={styles.num}>{item.num}</span> 个
              </div>
            </div>
          ))}
        </div>
        <div className={styles.charts}>
          <div>
            <div className={styles['chart-title']}>行业分类</div>
            <div className={styles['chart-desc']}>资源目录各行业资源数量</div>
          </div>
          <div>
            <div className={styles['chart-title']}>数据资源来源部门</div>
            <div className={styles['chart-desc']}>数据资源来源部门TOP10</div>
          </div>
        </div>
      </div>
    </Container>
  )
}