Commit 1d31618f authored by nikogu's avatar nikogu
parent 0688459b
import React from 'react'; import React from 'react';
import { Card, Spin } from 'antd'; import { Card, Spin } from 'antd';
import classNames from 'classnames';
import styles from './index.less'; import styles from './index.less';
const ChartCard = ({ const ChartCard = ({
loading = false, contentHeight, title, action, total, footer, children, ...rest loading = false, contentHeight, title, avatar, action, total, footer, children, ...rest
}) => { }) => {
const content = ( const content = (
<div className={styles.chartCard}> <div className={styles.chartCard}>
<div className={styles.meta}> <div
<span className={styles.title}>{title}</span> className={classNames(styles.chartTop, { [styles.chartTopMargin]: (!children && !footer) })}
<span className={styles.action}>{action}</span> >
<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> </div>
{ {
// eslint-disable-next-line children && (
total && <div className={styles.total} dangerouslySetInnerHTML={{ __html: total }} /> <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 && ( footer && (
<div className={styles.footer}> <div className={classNames(styles.footer, { [styles.footerMargin]: !children })}>
{footer} {footer}
</div> </div>
) )
......
...@@ -2,10 +2,32 @@ ...@@ -2,10 +2,32 @@
.chartCard { .chartCard {
position: relative; 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 { .meta {
color: @text-color-secondary; color: @text-color-secondary;
font-size: @font-size-base; font-size: @font-size-base;
position: relative;
line-height: 22px; line-height: 22px;
height: 22px; height: 22px;
} }
...@@ -46,4 +68,7 @@ ...@@ -46,4 +68,7 @@
position: relative; position: relative;
} }
} }
.footerMargin {
margin-top: 20px;
}
} }
...@@ -8,25 +8,46 @@ title: 图表卡片 ...@@ -8,25 +8,46 @@ title: 图表卡片
````jsx ````jsx
import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts'; import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
import Trend from 'ant-design-pro/lib/Trend'; import Trend from 'ant-design-pro/lib/Trend';
import { Tooltip, Icon } from 'antd'; import { Row, Col, Icon, Tooltip } from 'antd';
import numeral from 'numeral'; import numeral from 'numeral';
ReactDOM.render( ReactDOM.render(
<ChartCard <Row>
title="销售额" <Col span={24}>
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>} <ChartCard
total={yuan(126560)} title="销售额"
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />} action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
contentHeight={46} total={yuan(126560)}
> footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
<span> contentHeight={46}
周同比 >
<Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend> <span>
</span> 周同比
<span style={{ marginLeft: 16 }}> <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
日环比 </span>
<Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend> <span style={{ marginLeft: 16 }}>
</span> 日环比
</ChartCard> <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); , 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