diff --git a/package.json b/package.json
index 5bdbed305d3df0dd8ab0067e0fcf44e586f4813c..f9dd6e414eb5ee6cea84ad552294ecc336cce8f2 100755
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
"dependencies": {
"antd": "next",
"dva": "^1.2.1",
+ "electron": "^1.7.9",
"g-cloud": "^1.0.2-beta",
"g2": "^2.3.8",
"g2-plugin-slider": "^1.2.1",
@@ -37,7 +38,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)}>
-
-
(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 {
-
+
@@ -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 = (
-
+
);