qm-bus/src/DataListDaily/index.js

千米公有云业务组件库

import './index.less'

import React from 'react'
import { Progress } from 'antd'
import { Link } from 'react-router-dom'

/**
 * 
 * @param {*} param0 
 */
const DataListDaily = ({ title = '', right = { url: '', title: '' }, data = [] }) => (
  <div className="yesterday-data">
    <div className="data-header">
      <div className="data-title">{title}</div>
      <Link className="data-more" to={right.url} data-gh-name="昨日数据-更多数据">
        {right.title}&gt;&gt;
      </Link>
    </div>
    <div className="data-main">{
      data.map(x => {
        return (
          <div style={{ width: (100 / data.length).toFixed(2) + '%' }} className="col-item">
            <div style={{ width: x.chart ? '50%' : '100%' }} className="statistics-item">
              <strong>
                {(x.type == 'money' ? '￥' : '') + x.data + (x.type == 'percent' ? '%' : '')}
              </strong>
              <p>{x.title}</p>
            </div>
            {x.chart && (
              <div className="item-chart" style={{ width: '50%' }}>
                <Progress
                  type="circle"
                  percent={x.data}
                  width={60}
                  strokeWidth={20}
                  showInfo={false}
                />
              </div>
            )}
          </div>
        )
      }) || null
    }</div>
  </div>
)
export default DataListDaily