Commit 1d31618f authored by nikogu's avatar nikogu
parent 0688459b
import React from 'react';
import { Card, Spin } from 'antd';
import classNames from 'classnames';
import styles from './index.less';
const ChartCard = ({
loading = false, contentHeight, title, action, total, footer, children, ...rest
loading = false, contentHeight, title, avatar, action, total, footer, children, ...rest
}) => {
const content = (
<div className={styles.chartCard}>
<div className={styles.meta}>
<span className={styles.title}>{title}</span>
<span className={styles.action}>{action}</span>
<div
className={classNames(styles.chartTop, { [styles.chartTopMargin]: (!children && !footer) })}
>
<div className={styles.avatar}>
{
avatar
}
</div>
<div className={styles.metaWrap}>
<div className={styles.meta}>
<span className={styles.title}>{title}</span>
<span className={styles.action}>{action}</span>
</div>
{
// eslint-disable-next-line
total && (<div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />)
}
</div>
</div>
{
// eslint-disable-next-line
total && <div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} />
children && (
<div className={styles.content} style={{ height: contentHeight || 'auto' }}>
<div className={contentHeight && styles.contentFixed}>
{children}
</div>
</div>
)
}
<div className={styles.content} style={{ height: contentHeight || 'auto' }}>
<div className={contentHeight && styles.contentFixed}>
{children}
</div>
</div>
{
footer && (
<div className={styles.footer}>
<div className={classNames(styles.footer, { [styles.footerMargin]: !children })}>
{footer}
</div>
)
......
......@@ -2,10 +2,32 @@
.chartCard {
position: relative;
.chartTop {
position: relative;
overflow: hidden;
width: 100%;
}
.chartTopMargin {
margin-bottom: 12px;
}
.chartTopHasMargin {
margin-bottom: 20px;
}
.metaWrap {
float: left;
}
.avatar {
position: relative;
top: 4px;
float: left;
margin-right: 20px;
img {
border-radius: 100%;
}
}
.meta {
color: @text-color-secondary;
font-size: @font-size-base;
position: relative;
line-height: 22px;
height: 22px;
}
......@@ -46,4 +68,7 @@
position: relative;
}
}
.footerMargin {
margin-top: 20px;
}
}
......@@ -8,25 +8,46 @@ title: 图表卡片
````jsx
import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
import Trend from 'ant-design-pro/lib/Trend';
import { Tooltip, Icon } from 'antd';
import { Row, Col, Icon, Tooltip } from 'antd';
import numeral from 'numeral';
ReactDOM.render(
<ChartCard
title="销售额"
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total={yuan(126560)}
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
contentHeight={46}
>
<span>
周同比
<Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
</span>
<span style={{ marginLeft: 16 }}>
日环比
<Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
</span>
</ChartCard>
<Row>
<Col span={24}>
<ChartCard
title="销售额"
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total={yuan(126560)}
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
contentHeight={46}
>
<span>
周同比
<Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
</span>
<span style={{ marginLeft: 16 }}>
日环比
<Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
</span>
</ChartCard>
</Col>
<Col span={24} style={{ marginTop: 24 }}>
<ChartCard
title="移动指标"
avatar={<img style={{ width: 56, height: 56 }} src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />}
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total={yuan(126560)}
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
/>
</Col>
<Col span={24} style={{ marginTop: 24 }}>
<ChartCard
title="移动指标"
avatar={<img style={{ width: 56, height: 56 }} src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png" />}
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total={yuan(126560)}
/>
</Col>
</Row>
, mountNode);
````
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment