From b4d7f6cd7a069ec8462dfed9ffd54838ba0eb80d Mon Sep 17 00:00:00 2001 From: nikogu <644506165@qq.com> Date: Wed, 6 Sep 2017 16:30:29 +0800 Subject: [PATCH 1/2] List & Dashboard Design Review --- src/components/Charts/MiniArea/index.js | 3 +- src/components/Charts/MiniProgress/index.js | 17 ++++++---- src/components/Charts/MiniProgress/index.less | 1 + src/components/Charts/Pie/index.js | 4 ++- src/components/TagCloud/index.js | 2 +- src/layouts/PageHeaderLayout.js | 3 +- src/routes/Dashboard/Analysis.js | 6 +++- src/routes/Dashboard/Analysis.less | 5 +++ src/routes/Dashboard/Monitor.js | 34 +++++++++++++------ src/routes/Dashboard/Workplace.js | 2 +- 10 files changed, 54 insertions(+), 23 deletions(-) diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js index 5807c352..d763649c 100644 --- a/src/components/Charts/MiniArea/index.js +++ b/src/components/Charts/MiniArea/index.js @@ -18,7 +18,7 @@ class MiniArea extends PureComponent { } renderChart(data) { - const { height = 0, fit = true, color = '#33abfb', line, xAxis, yAxis } = this.props; + const { height = 0, fit = true, color = '#33abfb', line, xAxis, yAxis, animate = true } = this.props; if (!data || (data && data.length < 1)) { return; @@ -31,6 +31,7 @@ class MiniArea extends PureComponent { container: this.node, forceFit: fit, height: height + 54, + animate, plotCfg: { margin: [36, 0, 30, 0], }, diff --git a/src/components/Charts/MiniProgress/index.js b/src/components/Charts/MiniProgress/index.js index 63037a1c..8d1d82a2 100644 --- a/src/components/Charts/MiniProgress/index.js +++ b/src/components/Charts/MiniProgress/index.js @@ -1,16 +1,19 @@ import React from 'react'; +import { Popover } from 'antd'; import styles from './index.less'; const MiniProgress = ({ target, color, strokeWidth, percent }) => (
-
- - -
+ +
+ + +
+
{ diff --git a/src/components/TagCloud/index.js b/src/components/TagCloud/index.js index 0ade0e71..72693b95 100644 --- a/src/components/TagCloud/index.js +++ b/src/components/TagCloud/index.js @@ -79,7 +79,7 @@ class TagCloud extends PureComponent { height, // 设定文字大小配置函数(默认为12-40px的随机大小) - size: words => (((words.value - min) / (max - min)) * 10) + 12, + size: words => (((words.value - min) / (max - min)) * 12) + 6, // 设定文字内容 text: words => words.name, diff --git a/src/layouts/PageHeaderLayout.js b/src/layouts/PageHeaderLayout.js index 1573b8a9..0b04067a 100644 --- a/src/layouts/PageHeaderLayout.js +++ b/src/layouts/PageHeaderLayout.js @@ -1,8 +1,9 @@ import React from 'react'; import PageHeader from '../components/PageHeader'; -export default ({ children, wrapperClassName, ...restProps }) => ( +export default ({ children, wrapperClassName, top, ...restProps }) => (
+ {top} {children ?
{children}
: null}
diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js index 23bca42b..f716fead 100644 --- a/src/routes/Dashboard/Analysis.js +++ b/src/routes/Dashboard/Analysis.js @@ -60,6 +60,10 @@ export default class Analysis extends Component { this.setState({ rangePickerValue, }); + + this.props.dispatch({ + type: 'chart/fetchSalesData', + }); } selectDate = (type) => { @@ -84,7 +88,7 @@ export default class Analysis extends Component { salesTypeData, salesTypeDataOnline, salesTypeDataOffline, - } = chart; + } = chart; const salesPieData = salesType === 'all' ? salesTypeData diff --git a/src/routes/Dashboard/Analysis.less b/src/routes/Dashboard/Analysis.less index 54476f4a..966b32bd 100644 --- a/src/routes/Dashboard/Analysis.less +++ b/src/routes/Dashboard/Analysis.less @@ -3,8 +3,13 @@ .iconGroup { i { + transition: color 0.32s; + color: @text-color-secondary; cursor: pointer; margin-left: 16px; + &:hover { + color: @text-color; + } } } .rankingList { diff --git a/src/routes/Dashboard/Monitor.js b/src/routes/Dashboard/Monitor.js index b7977e73..44764b28 100644 --- a/src/routes/Dashboard/Monitor.js +++ b/src/routes/Dashboard/Monitor.js @@ -11,12 +11,15 @@ import { fixedZero } from '../../utils/utils'; import styles from './Monitor.less'; -const activeData = []; -for (let i = 0; i < 24; i += 1) { - activeData.push({ - x: `${fixedZero(i)}:00`, - y: (i * 50) + (Math.floor(Math.random() * 200)), - }); +function getActiveData() { + const activeData = []; + for (let i = 0; i < 24; i += 1) { + activeData.push({ + x: `${fixedZero(i)}:00`, + y: (i * 50) + (Math.floor(Math.random() * 200)), + }); + } + return activeData; } const MapData = []; @@ -33,13 +36,23 @@ const targetTime = new Date().getTime() + 3900000; monitor: state.monitor, })) export default class Monitor extends PureComponent { + state = { + activeData: getActiveData(), + } + componentDidMount() { this.props.dispatch({ type: 'monitor/fetchTags', }); - } + setInterval(() => { + this.setState({ + activeData: getActiveData(), + }); + }, 1000); + } render() { + const { activeData = [] } = this.state; const { monitor } = this.props; const { tags } = monitor; @@ -90,6 +103,7 @@ export default class Monitor extends PureComponent { />
@@ -143,7 +157,7 @@ export default class Monitor extends PureComponent { style={{ marginBottom: 24 }} bordered={false} > - + - + From 523adccc21648a8e19959ff0aba64ec4ea802b03 Mon Sep 17 00:00:00 2001 From: nikogu <644506165@qq.com> Date: Wed, 6 Sep 2017 16:34:37 +0800 Subject: [PATCH 2/2] update searchinput --- src/components/SearchInput/index.js | 50 +++++++++++++++++++++------ src/components/SearchInput/index.less | 21 ----------- 2 files changed, 40 insertions(+), 31 deletions(-) diff --git a/src/components/SearchInput/index.js b/src/components/SearchInput/index.js index e5e4403c..36bb90ff 100644 --- a/src/components/SearchInput/index.js +++ b/src/components/SearchInput/index.js @@ -3,13 +3,43 @@ import { Button, Input } from 'antd'; import styles from './index.less'; -export default ({ onSearch = () => ({}), text = '搜索', ...reset }) => ( -
- {text}} - /> -
-); +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 index 7d00f448..2e8ab24b 100644 --- a/src/components/SearchInput/index.less +++ b/src/components/SearchInput/index.less @@ -1,5 +1,4 @@ @import "~antd/lib/style/themes/default.less"; -@import "../../utils/utils.less"; .search { display: inline-block; @@ -23,23 +22,3 @@ height: 40px; } } - -@media screen and (max-width: @screen-sm) { - .search { - :global { - .ant-input-group .ant-input { - width: 300px; - } - } - } -} - -@media screen and (max-width: @screen-xs) { - .search { - :global { - .ant-input-group .ant-input { - width: 200px; - } - } - } -}