+ {
+ user.link &&
+ 
+ }
+
+
+
+
+ {user.name}
+
+
+ {moment(updatedAt).fromNow()}
+{moment(updatedAt).fromNow()}
++ {label} + {value} +
+); + +export default Field; diff --git a/src/components/Charts/Field/index.less b/src/components/Charts/Field/index.less new file mode 100644 index 00000000..63894f9d --- /dev/null +++ b/src/components/Charts/Field/index.less @@ -0,0 +1,17 @@ +@import "~antd/lib/style/themes/default.less"; +@import "../../../utils/utils.less"; + +.field { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + span { + font-size: @font-size-base; + line-height: 22px; + } + span:last-child { + font-weight: 600; + margin-left: 8px; + } +} + diff --git a/src/components/Charts/Gauge/index.js b/src/components/Charts/Gauge/index.js new file mode 100644 index 00000000..0c53540e --- /dev/null +++ b/src/components/Charts/Gauge/index.js @@ -0,0 +1,195 @@ +import React, { PureComponent } from 'react'; +import G2 from 'g2'; + +const Shape = G2.Shape; + +/* eslint no-underscore-dangle: 0 */ +class Gauge extends PureComponent { + componentDidMount() { + this.renderChart(); + } + + componentWillReceiveProps(nextProps) { + this.renderChart(nextProps); + } + + handleRef = (n) => { + this.node = n; + } + + initChart(nextProps) { + const { title, color = '#00b1f8' } = nextProps || this.props; + + Shape.registShape('point', 'dashBoard', { + drawShape(cfg, group) { + const originPoint = cfg.points[0]; + const point = this.parsePoint({ x: originPoint.x, y: 0.4 }); + + const center = this.parsePoint({ + x: 0, + y: 0, + }); + + const shape = group.addShape('polygon', { + attrs: { + points: [ + [center.x, center.y], + [point.x + 8, point.y], + [point.x + 8, point.y - 2], + [center.x, center.y - 2], + ], + radius: 2, + lineWidth: 2, + arrow: false, + fill: color, + }, + }); + + group.addShape('Marker', { + attrs: { + symbol: 'circle', + lineWidth: 2, + fill: color, + radius: 8, + x: center.x, + y: center.y, + }, + }); + group.addShape('Marker', { + attrs: { + symbol: 'circle', + lineWidth: 2, + fill: '#fff', + radius: 5, + x: center.x, + y: center.y, + }, + }); + + const origin = cfg.origin; + group.addShape('text', { + attrs: { + x: center.x, + y: center.y + 80, + text: `${origin._origin.value}%`, + textAlign: 'center', + fontSize: 24, + fill: 'rgba(0, 0, 0, 0.85)', + }, + }); + group.addShape('text', { + attrs: { + x: center.x, + y: center.y + 45, + text: title, + textAlign: 'center', + fontSize: 14, + fill: 'rgba(0, 0, 0, 0.43)', + }, + }); + + return shape; + }, + }); + } + + renderChart(nextProps) { + const { height, color = '#00b1f8', bgColor = '#d3f3fe', title, percent } = nextProps || this.props; + const data = [{ name: title, value: percent }]; + + if (this.chart) { + this.chart.clear(); + } + if (this.node) { + this.node.innerHTML = ''; + } + + this.initChart(nextProps); + + const chart = new G2.Chart({ + container: this.node, + forceFit: true, + height, + animate: false, + plotCfg: { + margin: [10, 0, 30, 0], + }, + }); + + chart.source(data); + + chart.tooltip(false); + + chart.coord('gauge', { + startAngle: -1.2 * Math.PI, + endAngle: 0.20 * Math.PI, + }); + chart.col('value', { + type: 'linear', + nice: true, + min: 0, + max: 100, + tickCount: 6, + subTick: false, + }); + chart.axis('value', { + tickLine: { + stroke: color, + }, + labelOffset: -12, + formatter(val) { + switch (val * 1) { + case 20: + return '差'; + case 40: + return '中'; + case 60: + return '良'; + case 80: + return '优'; + default: + return ''; + } + }, + }); + chart.point().position('value').shape('dashBoard'); + draw(data); + + /* eslint no-shadow: 0 */ + function draw(data) { + const val = data[0].value; + const lineWidth = 18; + chart.guide().clear(); + + chart.guide().arc(() => { + return [0, 0.95]; + }, () => { + return [val, 0.95]; + }, { + stroke: color, + lineWidth, + }); + + chart.guide().arc(() => { + return [val, 0.95]; + }, (arg) => { + return [arg.max, 0.95]; + }, { + stroke: bgColor, + lineWidth, + }); + + chart.changeData(data); + } + + this.chart = chart; + } + + render() { + return ( + + ); + } +} + +export default Gauge; diff --git a/src/components/Charts/Icon/index.js b/src/components/Charts/Icon/index.js new file mode 100644 index 00000000..d03a3e38 --- /dev/null +++ b/src/components/Charts/Icon/index.js @@ -0,0 +1,29 @@ +import React from 'react'; +import { Icon } from 'antd'; + +const IconUp = ({ color }) => ( ++ + {item.name} +
+
+ 段落示意：蚂蚁金服务设计平台-design.alipay.com，用最小的工作量，无缝接入蚂蚁金服生态， +提供跨越设计与开发的体验解决方案。
+ +
+ + {val} 万 +
+ ), + }, + { + title: '状态', + dataIndex: 'status', + filters: [ + { + text: status[0], + value: 0, + }, + { + text: status[1], + value: 1, + }, + ], + render(val) { + if (val === 0) { + return强度：强
, + pass:强度：中
, + pool:强度：太短
, +}; + +const passwordProgressMap = { + ok: 'success', + pass: 'normal', + pool: 'exception', +}; + +@connect(state => ({ + register: state.register, +})) +@Form.create() +export default class Register extends Component { + state = { + count: 0, + confirmDirty: false, + visible: false, + help: '', + } + + componentWillReceiveProps(nextProps) { + if (nextProps.register.status === 'ok') { + this.props.dispatch(routerRedux.push('/')); + } + } + + componentWillUnmount() { + clearInterval(this.interval); + } + + onGetCaptcha = () => { + let count = 59; + this.setState({ count }); + this.interval = setInterval(() => { + count -= 1; + this.setState({ count }); + if (count === 0) { + clearInterval(this.interval); + } + }, 1000); + } + + getPasswordStatus = () => { + const form = this.props.form; + const value = form.getFieldValue('password'); + if (value && value.length > 9) { + return 'ok'; + } + if (value && value.length > 5) { + return 'pass'; + } + return 'pool'; + } + + handleSubmit = (e) => { + e.preventDefault(); + this.props.form.validateFields({ force: true }, + (err, values) => { + if (!err) { + this.props.dispatch({ + type: 'register/submit', + payload: values, + }); + } + } + ); + } + + handleConfirmBlur = (e) => { + const value = e.target.value; + this.setState({ confirmDirty: this.state.confirmDirty || !!value }); + } + + checkConfirm = (rule, value, callback) => { + const form = this.props.form; + if (value && value !== form.getFieldValue('password')) { + callback('两次输入的密码不匹配!'); + } else { + callback(); + } + } + + checkPassword = (rule, value, callback) => { + if (!value) { + this.setState({ + help: '请输入密码！', + visible: !!value, + }); + callback('error'); + } else { + this.setState({ + help: '', + }); + if (!this.state.visible) { + this.setState({ + visible: !!value, + }); + } + if (value.length < 6) { + callback('error'); + } else { + const form = this.props.form; + if (value && this.state.confirmDirty) { + form.validateFields(['confirm'], { force: true }); + } + callback(); + } + } + } + + renderPasswordProgress = () => { + const form = this.props.form; + const value = form.getFieldValue('password'); + const passwordStatus = this.getPasswordStatus(); + return value && value.length ? +
快速开始
+ 
产品简介
+ 
产品文档
+ 
+ 
+ 
+