diff --git a/src/components/Charts/MiniArea/index.js b/src/components/Charts/MiniArea/index.js index 5807c352fae25fc1c0abbc1f96f8381750588264..d763649c688e9c8f3956408fe95e90033bc67186 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 63037a1ce9f6a3b81284ad58185078c55a3713b1..8d1d82a26791e61f5a5c3df41ffe3556bfca654c 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 0ade0e71e7221cf59ba2283ca0beda79f467cf60..72693b956b3e8c58bf2a0d6f6c76950372169eae 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 1573b8a97e5f609eede924c343e1c1bf8eaf98c4..0b04067a3eacf0a81ce9b5bbca7a4f5226be50cd 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 23bca42b16d27bceacf953db4ac1e744aadbd785..f716fead4110456e2f4e0e2d7947bb269437983c 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 54476f4a13fad8942a3bdaa8eaa56820c8ee4a48..966b32bd96abdc554f0d10d7e0eb599429cc055d 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 b7977e734da06340efc768f737323f50505ba6e2..44764b2829fb4ab10672a78ef389bbc9e262a6ef 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} > - + - +