diff --git a/package.json b/package.json index 5bdbed305d3df0dd8ab0067e0fcf44e586f4813c..502c2435699aa9deaf497d8c30a129930736b842 100755 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "babel-runtime": "^6.9.2", "cross-port-killer": "^1.0.1", "enzyme": "^2.9.1", - "eslint": "^4.0.0", + "eslint": "^4.8.0", "eslint-config-airbnb": "^16.0.0", "eslint-plugin-babel": "^4.0.0", "eslint-plugin-import": "^2.2.0", diff --git a/src/components/Charts/Gauge/index.js b/src/components/Charts/Gauge/index.js index 7766c7616cec1ef20d18bcd4de516cee9c349ddc..c59cfee5238a5aadbc6a74c9dc9e57db7b6c5e81 100644 --- a/src/components/Charts/Gauge/index.js +++ b/src/components/Charts/Gauge/index.js @@ -103,7 +103,7 @@ class Gauge extends PureComponent { } renderChart(nextProps) { - const { height, color = '#00b1f8', bgColor = '#d3f3fe', title, percent } = nextProps || this.props; + const { height, color = '#00b1f8', bgColor = '#d3f3fe', title, percent, format } = nextProps || this.props; const data = [{ name: title, value: percent }]; if (this.chart) { @@ -146,20 +146,7 @@ class Gauge extends PureComponent { stroke: color, }, labelOffset: -12, - formatter(val) { - switch (val * 1) { - case 20: - return '差'; - case 40: - return '中'; - case 60: - return '良'; - case 80: - return '优'; - default: - return ''; - } - }, + formatter: format, }); chart.point().position('value').shape('dashBoard'); draw(data); diff --git a/src/components/Charts/Radar/index.js b/src/components/Charts/Radar/index.js index 244b2634b0541be06d1c09ec43651789100265cf..351a1010b6ad5bc5a14dd4fdb99d7bb97796b50b 100644 --- a/src/components/Charts/Radar/index.js +++ b/src/components/Charts/Radar/index.js @@ -53,7 +53,7 @@ class Radar extends PureComponent { hasLegend = true, fit = true, tickCount = 4, - margin = [16, 0, 16, 0] } = this.props; + margin = [16, 30, 16, 30] } = this.props; if (!data || (data && data.length < 1)) { return; diff --git a/src/components/TagCloud/index.js b/src/components/Charts/TagCloud/index.js similarity index 100% rename from src/components/TagCloud/index.js rename to src/components/Charts/TagCloud/index.js diff --git a/src/components/TimelineChart/index.js b/src/components/Charts/TimelineChart/index.js similarity index 100% rename from src/components/TimelineChart/index.js rename to src/components/Charts/TimelineChart/index.js diff --git a/src/components/TimelineChart/index.less b/src/components/Charts/TimelineChart/index.less similarity index 100% rename from src/components/TimelineChart/index.less rename to src/components/Charts/TimelineChart/index.less diff --git a/src/components/Charts/Trend/index.js b/src/components/Charts/Trend/index.js index 91c318b8edaba5dca0d2e78c1851c0d0d8a95e23..d54251e2697abfc18381903221a0e7341134f888 100644 --- a/src/components/Charts/Trend/index.js +++ b/src/components/Charts/Trend/index.js @@ -1,21 +1,88 @@ import React from 'react'; -import { Icon } from 'antd'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; +import { Icon, Tooltip } from 'antd'; import styles from './index.less'; -const Item = ({ title, flag, children, ...rest }) => ( -
- {title} - { flag && } - {children} -
-); - -const Trend = ({ colorType, children, ...rest }) => ( -
- {children} -
-); +const Item = ({ title, flag, children, ...rest }, { mini }) => { + const map = { + xs: 0, + sm: 0, + md: 0, + lg: 0, + xlg: 0, + xl: 0, + xxl: 0, + }; + + if (mini && mini.forEach) { + mini.forEach((size) => { + map[size] = 1; + }); + } + + const clsObj = {}; + Object.keys(map).forEach((k) => { + clsObj[styles[k]] = map[k]; + }); + + const clsString = classNames(styles.trendItem, { + [styles.mini]: (typeof mini === 'boolean' && mini), + ...clsObj, + }); + + const miniContent = ( + + {title} + { flag && } + + ); + + return ( +
+
+ {title} + { flag && } + {children} +
+
+ {miniContent} +
+
+ ); +}; + +Item.contextTypes = { + mini: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.bool, + ]), +}; + +class Trend extends React.Component { + getChildContext() { + return { + mini: this.props.mini, + }; + } + + render() { + const { colorType, children, mini, ...rest } = this.props; + return ( +
+ {children} +
+ ); + } +} + +Trend.childContextTypes = { + mini: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.bool, + ]), +}; Trend.Item = Item; diff --git a/src/components/Charts/Trend/index.less b/src/components/Charts/Trend/index.less index 818fa9e6d2237dbde09ad3224ee3e48a575c932f..d383fa53a4235a1be1a2347e12174b241df3da69 100644 --- a/src/components/Charts/Trend/index.less +++ b/src/components/Charts/Trend/index.less @@ -7,43 +7,156 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - .trendItem { - display: inline-block; - margin-right: 16px; +} + +.trendItem { + display: inline-block; + margin-right: 16px; + color: @text-color; + font-size: @font-size-base; + line-height: 22px; + height: 22px; + .content { + display: block; + } + .miniContent { + display: none; + } + .title { + margin-right: 4px; + } + .value { color: @text-color; - font-size: @font-size-base; - line-height: 22px; - height: 22px; - .title { - margin-right: 4px; - } - .value { - color: @text-color; - font-weight: 600; - } - .up, .down { - color: #00a854; - margin-right: 4px; - position: relative; - top: 1px; - i { - font-size: 12px; - transform: scale(0.83); - } - } - .down { - color: #f04134; - top: -1px; + font-weight: 600; + } + .up, .down { + color: #00a854; + margin-right: 4px; + position: relative; + top: 1px; + i { + font-size: 12px; + transform: scale(0.83); } } - .trendItem:last-child { - margin-right: 0; + .down { + color: #f04134; + top: -1px; } } +.trendItem:last-child { + margin-right: 0; +} + .trendgray { .trend(); .trendItem { color: @text-color-secondary; } } + +.mini { + .content { + display: none; + } + .miniContent { + display: block; + } +} + +.reset() { + .trendItem { + .content { + display: block; + } + .miniContent { + display: none; + } + } +} + +@media screen and (max-width: @screen-xxl) { + .reset(); + .xxl { + .content { + display: none; + } + .miniContent { + display: block; + } + } +} + +@media screen and (max-width: @screen-xl) { + .reset(); + .xl { + .content { + display: none; + } + .miniContent { + display: block; + } + } +} + +@media screen and (max-width: @screen-lg) { + .reset(); + .lg { + .content { + display: none; + } + .miniContent { + display: block; + } + } +} + +// xlg +@media screen and (max-width: 1400px) { + .reset(); + .xlg { + .content { + display: none; + } + .miniContent { + display: block; + } + } +} + +@media screen and (max-width: @screen-md) { + .reset(); + .md { + .content { + display: none; + } + .miniContent { + display: block; + } + } +} + +@media screen and (max-width: @screen-sm) { + .reset(); + .sm { + .content { + display: none; + } + .miniContent { + display: block; + } + } +} + +@media screen and (max-width: @screen-xs) { + .reset(); + .xs { + .content { + display: none; + } + .miniContent { + display: block; + } + } +} diff --git a/src/components/Charts/index.js b/src/components/Charts/index.js index 5967d6ebb6f62c110b1e1f97eafe5c33526441c8..1059fbc60ebb5f836d5a9bcf07f42b1137b8a106 100644 --- a/src/components/Charts/index.js +++ b/src/components/Charts/index.js @@ -11,6 +11,8 @@ import Trend from './Trend'; import Field from './Field'; import NumberInfo from './NumberInfo'; import WaterWave from './WaterWave'; +import TagCloud from './TagCloud'; +import TimelineChart from './TimelineChart'; import { IconUp, IconDown } from './Icon'; const yuan = val => `¥ ${numeral(val).format('0,0')}`; @@ -31,4 +33,6 @@ export default { Field, NumberInfo, WaterWave, + TagCloud, + TimelineChart, }; diff --git a/src/components/Countdown/demo/simple.md b/src/components/Countdown/demo/simple.md new file mode 100644 index 0000000000000000000000000000000000000000..5a3d8d55ba36b95202dc763bd6f9396c4c207f95 --- /dev/null +++ b/src/components/Countdown/demo/simple.md @@ -0,0 +1,16 @@ +--- +order: 0 +title: Simple +--- + +简单的页头。 + +````jsx +import CountDown from 'ant-design-pro/lib/CountDown'; + +const targetTime = new Date().getTime() + 3900000; + +ReactDOM.render( + +, mountNode); +```` diff --git a/src/components/Countdown/index.js b/src/components/Countdown/index.js index 9a87949fa864f8592b3d744d71c6f5223f6ad78b..19c1cf48e371d432dedbde5098d4166e433c5083 100644 --- a/src/components/Countdown/index.js +++ b/src/components/Countdown/index.js @@ -4,7 +4,7 @@ function fixedZero(val) { return val * 1 < 10 ? `0${val}` : val; } -class Countdown extends Component { +class CountDown extends Component { constructor(props) { super(props); @@ -102,4 +102,4 @@ class Countdown extends Component { } } -export default Countdown; +export default CountDown; diff --git a/src/components/Countdown/index.md b/src/components/Countdown/index.md new file mode 100644 index 0000000000000000000000000000000000000000..026ea3fad33164918d0b2e5d21d32c008652e01f --- /dev/null +++ b/src/components/Countdown/index.md @@ -0,0 +1,16 @@ +--- +category: Components +type: General +title: CountDown +subtitle: 倒计时 +cols: 1 +--- + +倒计时组件。 + +## API + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| format | 时间格式化显示显示 | Function(time) | | +| target | 目标时间 | Date | - | diff --git a/src/components/MapChart/index.js b/src/components/MapChart/index.js deleted file mode 100644 index 190724ecb1911d5287e98988e8e02a381279d590..0000000000000000000000000000000000000000 --- a/src/components/MapChart/index.js +++ /dev/null @@ -1,32 +0,0 @@ -import React, { Component } from 'react'; -import { Tooltip } from 'antd'; - -import styles from './index.less'; - -/* eslint no-return-assign: 0 */ -class MapChart extends Component { - getRect() { - // 0.4657 = 708 / 1520 (img origin size) - const width = this.root.offsetWidth; - const height = width * 0.4657; - return { - width, - height, - }; - } - - render() { - return ( -
(this.root = n)}> - -
(this.root = n)}> - map -
(this.node = n)} /> -
- -
- ); - } -} - -export default MapChart; diff --git a/src/components/MapChart/index.less b/src/components/MapChart/index.less deleted file mode 100644 index 11bb7cb50e2ad07be57fe9fba237614604a3ccbf..0000000000000000000000000000000000000000 --- a/src/components/MapChart/index.less +++ /dev/null @@ -1,10 +0,0 @@ -.mapChart { - background-color: #fff; - position: relative; - .canvas { - width: 100%; - & > img { - width: 100%; - } - } -} diff --git a/src/components/SearchInput/index.js b/src/components/SearchInput/index.js deleted file mode 100644 index 36bb90ff153a8b79950f76bf0e09298d4c7e0e6b..0000000000000000000000000000000000000000 --- a/src/components/SearchInput/index.js +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { Button, Input } from 'antd'; - -import styles from './index.less'; - -export default class SearchInput extends React.Component { - state = { - value: this.props.defaultValue, - } - - handleOnChange = (e) => { - this.setState({ - value: e.target.value, - }); - } - - handleOnSearch = () => { - if (this.props.onSearch) { - this.props.onSearch(this.state.value); - } - } - - handleOnKey = (e) => { - if (e.keyCode === 13) { - this.handleOnSearch(); - } - } - - render() { - const { text = '搜索', reset } = this.props; - return ( -
- {text}} - /> -
- ); - } -} diff --git a/src/components/SearchInput/index.less b/src/components/SearchInput/index.less deleted file mode 100644 index 2e8ab24ba98a43f698748c18ccc61be1b77a745d..0000000000000000000000000000000000000000 --- a/src/components/SearchInput/index.less +++ /dev/null @@ -1,24 +0,0 @@ -@import "~antd/lib/style/themes/default.less"; - -.search { - display: inline-block; - :global { - .ant-input-group-addon { - border: none; - padding: 0; - } - .ant-input-group .ant-input { - width: 522px; - } - } - input { - border-right: none; - height: 40px; - line-height: 40px; - } - button { - border-radius: 0 @border-radius-base @border-radius-base 0; - width: 86px; - height: 40px; - } -} diff --git a/src/components/TagSelect/demo/simple.md b/src/components/TagSelect/demo/simple.md new file mode 100644 index 0000000000000000000000000000000000000000..0f67c1ca5abd96d454128ebcec5a19afd8490731 --- /dev/null +++ b/src/components/TagSelect/demo/simple.md @@ -0,0 +1,30 @@ +--- +order: 0 +title: Simple +--- + +简单的页头。 + +````jsx +import TagSelect from 'ant-design-pro/lib/CountDown'; + +const TagOption = TagSelect.Option; +const TagExpand = TagSelect.Expand; + +function handleFormSubmit(checkedValue) { + console.log(checkedValue); +} + +ReactDOM.render( + + 类目一 + 类目二 + 类目三 + 类目四 + + 类目五 + 类目六 + + +, mountNode); +```` diff --git a/src/components/TagSelect/index.js b/src/components/TagSelect/index.js index 74cf5ccf29f179a6d533f69f16e2b446453e0de2..a6065e1f99ab94d369153bab98cf42b9d317deee 100644 --- a/src/components/TagSelect/index.js +++ b/src/components/TagSelect/index.js @@ -113,16 +113,16 @@ class TagSelect extends PureComponent { render() { const { checkedTags, checkedAll, expand } = this.state; - const { children } = this.props; + const { children, className, style } = this.props; const expandNode = children.filter(child => child.props.displayName === 'TagSelectExpand')[0]; - const cls = classNames(styles.tagSelect, { + const cls = classNames(styles.tagSelect, className, { [styles.expandTag]: expandNode, }); return ( -
+
} contentHeight={46} > - + 12.3% 11% @@ -236,7 +237,7 @@ export default class Analysis extends Component { action={} total="78%" footer={ - + 12.3% 11% diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js index 9fd1b2d59642e2dcab3a70bffe2f1e18bd811564..b4fb668eb3b07755b3a8a9c85f214f3d4cb42410 100644 --- a/src/routes/Dashboard/Monitor.js +++ b/src/routes/Dashboard/Monitor.js @@ -3,10 +3,8 @@ import { connect } from 'dva'; import { Row, Col, Card } from 'antd'; import numeral from 'numeral'; -import { NumberInfo, Pie, WaterWave, Gauge } from '../../components/Charts'; -import MapChart from '../../components/MapChart'; -import TagCloud from '../../components/TagCloud'; -import Countdown from '../../components/Countdown'; +import { NumberInfo, Pie, WaterWave, Gauge, TagCloud } from '../../components/Charts'; +import CountDown from '../../components/CountDown'; import ActiveChart from '../../components/ActiveChart'; import styles from './Monitor.less'; @@ -56,7 +54,7 @@ export default class Monitor extends PureComponent { } + total={} /> @@ -67,9 +65,7 @@ export default class Monitor extends PureComponent {
- + map
@@ -84,6 +80,20 @@ export default class Monitor extends PureComponent { bordered={false} > { + switch (val) { + case 20: + return '差'; + case 40: + return '中'; + case 60: + return '量'; + case 80: + return '优'; + default: + return ''; + } + }} title="核销率" height={164} percent={87} diff --git a/src/routes/Dashboard/Monitor.less b/src/routes/Dashboard/Monitor.less index d5770493ebbc250d142a0195418473ecef7b5745..7e1f09a9104fe8bdfd0f6a64c8083d518cd6d0c7 100644 --- a/src/routes/Dashboard/Monitor.less +++ b/src/routes/Dashboard/Monitor.less @@ -4,6 +4,9 @@ .mapChart { padding-top: 46px; height: 436px; + img { + width: 100%; + } } @media screen and (max-width: @screen-lg) { diff --git a/src/routes/List/CoverCardList.js b/src/routes/List/CoverCardList.js index 06d3212bced4615d2ae708004568e2c1aa9ccc23..19916d7d07c922e94f932153934690becd665675 100644 --- a/src/routes/List/CoverCardList.js +++ b/src/routes/List/CoverCardList.js @@ -2,13 +2,12 @@ import React, { PureComponent } from 'react'; import moment from 'moment'; import { connect } from 'dva'; import { routerRedux } from 'dva/router'; -import { Row, Col, Form, Card, Select, List } from 'antd'; +import { Row, Col, Form, Card, Select, List, Input } from 'antd'; import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import StandardFormRow from '../../components/StandardFormRow'; import TagSelect from '../../components/TagSelect'; import AvatarList from '../../components/AvatarList'; -import SearchInput from '../../components/SearchInput'; import styles from './CoverCardList.less'; @@ -126,7 +125,13 @@ export default class CoverCardList extends PureComponent { const pageHeaderContent = (
- +
); diff --git a/src/routes/List/FilterCardList.js b/src/routes/List/FilterCardList.js index e7c6489b81206ef5ddd46a7ae15041159dc71015..9a07387f2cd968bc383ca2ed816b8d2ee8da9ba0 100644 --- a/src/routes/List/FilterCardList.js +++ b/src/routes/List/FilterCardList.js @@ -2,12 +2,11 @@ import React, { PureComponent } from 'react'; import numeral from 'numeral'; import { connect } from 'dva'; import { routerRedux } from 'dva/router'; -import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip } from 'antd'; +import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Input } from 'antd'; import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import StandardFormRow from '../../components/StandardFormRow'; import TagSelect from '../../components/TagSelect'; -import SearchInput from '../../components/SearchInput'; import styles from './FilterCardList.less'; @@ -114,7 +113,13 @@ export default class FilterCardList extends PureComponent { const pageHeaderContent = (
- +
); diff --git a/src/routes/List/SearchList.js b/src/routes/List/SearchList.js index 0b051bfe3b000618e75fa7a6aaf20f77d5b05366..f4d080cb27af74bf52d9ad6f58f738985d103f6a 100644 --- a/src/routes/List/SearchList.js +++ b/src/routes/List/SearchList.js @@ -2,12 +2,11 @@ import React, { Component } from 'react'; import moment from 'moment'; import { connect } from 'dva'; import { routerRedux } from 'dva/router'; -import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button } from 'antd'; +import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button, Input } from 'antd'; import PageHeaderLayout from '../../layouts/PageHeaderLayout'; import StandardFormRow from '../../components/StandardFormRow'; import TagSelect from '../../components/TagSelect'; -import SearchInput from '../../components/SearchInput'; import styles from './SearchList.less'; const { Option } = Select; @@ -150,7 +149,13 @@ export default class SearchList extends Component { const pageHeaderContent = (
- +
);