|
@@ -1,7 +1,8 @@
|
|
|
import React, { Component } from 'react';
|
|
|
import './index.less';
|
|
|
import { Icon } from 'antd';
|
|
|
-import { getMap, formatDate } from '@src/services/Tools';
|
|
|
+import { getMap, formatDate, formatPercent } from '@src/services/Tools';
|
|
|
+import moment from 'moment';
|
|
|
import { SpecialRadioGroup } from '../Radio';
|
|
|
import Modal from '../Modal';
|
|
|
import Button from '../Button';
|
|
@@ -9,14 +10,21 @@ import TotalSort from '../TotalSort';
|
|
|
import Date from '../Date';
|
|
|
import Ratio from '../Ratio';
|
|
|
import { My } from '../../stores/my';
|
|
|
-import { PrepareStatus, PrepareExaminationTime } from '../../../Constant';
|
|
|
+import { PrepareStatus, PrepareExaminationTime, PrepareScoreTime } from '../../../Constant';
|
|
|
|
|
|
const PrepareStatusMap = getMap(PrepareStatus, 'value', 'short');
|
|
|
const PrepareExaminationTimeMap = getMap(PrepareExaminationTime, 'value', 'label');
|
|
|
+const PrepareScoreTimeMap = getMap(PrepareScoreTime, 'value', 'label');
|
|
|
|
|
|
export default class extends Component {
|
|
|
constructor(props) {
|
|
|
super(props);
|
|
|
+
|
|
|
+ this.statusColors = ['#41A6F3', '#3F86EA', '#41A6F3', '#6DC0FF', '#9BD4FF'];
|
|
|
+ this.examinationTimeColors = ['#6865FD', '#322EF2', '#8F65FF', '#8C8AFF'];
|
|
|
+ this.goalColors = ['#2754E0', '#3F86EA', '#41A6F3', '#6DC0FF'];
|
|
|
+ this.scoreTimeColors = ['#6865FD', '#322EF2', '#8F65FF', '#8C8AFF', '#8F65FF', '#C3C1D1'];
|
|
|
+
|
|
|
this.stepProp = {
|
|
|
0: {
|
|
|
title: '我的身份',
|
|
@@ -33,21 +41,63 @@ export default class extends Component {
|
|
|
4: {
|
|
|
title: '备考信息',
|
|
|
onConfirm: props.onConfirm,
|
|
|
- onCancel: props.onCancel,
|
|
|
+ onCancel: () => {
|
|
|
+ this.setState({ step: 0 });
|
|
|
+ },
|
|
|
confirmText: '关闭',
|
|
|
cancelText: '修改',
|
|
|
},
|
|
|
};
|
|
|
- this.state = { step: 0, data: {} };
|
|
|
+ this.state = { step: 0, data: { prepareGoal: 650 } };
|
|
|
My.getPrepare().then(result => {
|
|
|
- this.setState({ data: result, first: !result.prepareStatus });
|
|
|
+ const statusTotal = result.stat.status.reduce((p, n) => {
|
|
|
+ return p + n.value;
|
|
|
+ }, 0);
|
|
|
+ const goalTotal = result.stat.goal.reduce((p, n) => {
|
|
|
+ return p + n.value;
|
|
|
+ }, 0);
|
|
|
+ const examinationTimeTotal = result.stat.examinationTime.reduce((p, n) => {
|
|
|
+ return p + n.value;
|
|
|
+ }, 0);
|
|
|
+ const scoreTimeTotal = result.stat.scoreTime.reduce((p, n) => {
|
|
|
+ return p + n.value;
|
|
|
+ }, 0);
|
|
|
+ const stat = {
|
|
|
+ status: result.stat.status.map((row, index) => {
|
|
|
+ row.value = formatPercent(row.value, statusTotal);
|
|
|
+ row.label = `${PrepareStatusMap[row.key]}; ${row.value}%`;
|
|
|
+ row.color = this.statusColors[index];
|
|
|
+ return row;
|
|
|
+ }),
|
|
|
+ goal: result.stat.goal.map((row, index) => {
|
|
|
+ row.value = formatPercent(row.value, goalTotal);
|
|
|
+ row.label = `${row.key}+; ${row.value}%`;
|
|
|
+ row.color = this.goalColors[index];
|
|
|
+ return row;
|
|
|
+ }),
|
|
|
+ examinationTime: result.stat.status.map((row, index) => {
|
|
|
+ row.value = formatPercent(row.value, examinationTimeTotal);
|
|
|
+ row.label = `${PrepareExaminationTimeMap[row.key]}; ${row.value}%`;
|
|
|
+ row.color = this.examinationTimeColors[index];
|
|
|
+ return row;
|
|
|
+ }),
|
|
|
+ scoreTime: result.stat.scoreTime.map((row, index) => {
|
|
|
+ row.value = formatPercent(row.value, scoreTimeTotal);
|
|
|
+ row.label = `${PrepareScoreTimeMap[row.key]}; ${row.value}%`;
|
|
|
+ row.color = this.scoreTimeColors[index];
|
|
|
+ return row;
|
|
|
+ }),
|
|
|
+ };
|
|
|
+ result.prepareGoal = result.prepareGoal || 650;
|
|
|
+ result.prepareScoreTime = result.prepareScoreTime ? moment(result.prepareScoreTime) : null;
|
|
|
+ this.setState({ data: result, stat, first: !result.prepareStatus, step: !result.prepareStatus ? 0 : 4 });
|
|
|
});
|
|
|
}
|
|
|
|
|
|
onChange(type, key) {
|
|
|
- const { data, step } = this.state;
|
|
|
+ const { data } = this.state;
|
|
|
data[type] = key;
|
|
|
- this.setState({ data, step: step + 1 });
|
|
|
+ this.setState({ data });
|
|
|
}
|
|
|
|
|
|
onPrev() {
|
|
@@ -133,9 +183,16 @@ export default class extends Component {
|
|
|
}
|
|
|
|
|
|
renderStep2() {
|
|
|
+ const { data } = this.state;
|
|
|
+ const { prepareGoal } = data;
|
|
|
return (
|
|
|
<div className="step-2-layout">
|
|
|
- <TotalSort />
|
|
|
+ <TotalSort
|
|
|
+ value={prepareGoal}
|
|
|
+ onChange={goal => {
|
|
|
+ this.onChange('prepareGoal', goal);
|
|
|
+ }}
|
|
|
+ />
|
|
|
<div className="action-layout">
|
|
|
<div className="prev" onClick={() => this.onPrev()}>
|
|
|
<Icon type="left-circle" theme="filled" />
|
|
@@ -151,9 +208,17 @@ export default class extends Component {
|
|
|
}
|
|
|
|
|
|
renderStep3() {
|
|
|
+ const { data } = this.state;
|
|
|
+ const { prepareScoreTime } = data;
|
|
|
return (
|
|
|
<div className="step-3-layout">
|
|
|
- <Date theme="filled" />
|
|
|
+ <Date
|
|
|
+ theme="filled"
|
|
|
+ value={prepareScoreTime}
|
|
|
+ onChange={date => {
|
|
|
+ this.onChange('prepareScoreTime', date);
|
|
|
+ }}
|
|
|
+ />
|
|
|
<div className="action-layout">
|
|
|
<div className="prev" onClick={() => this.onPrev()}>
|
|
|
<Icon type="left-circle" theme="filled" />
|
|
@@ -174,7 +239,7 @@ export default class extends Component {
|
|
|
}
|
|
|
|
|
|
renderStep4() {
|
|
|
- const { first, data } = this.state;
|
|
|
+ const { first, data, stat = {} } = this.state;
|
|
|
return (
|
|
|
<div className="step-4-layout">
|
|
|
{first && (
|
|
@@ -183,49 +248,17 @@ export default class extends Component {
|
|
|
7天VIP权限已赠送至您的账户。
|
|
|
</div>
|
|
|
)}
|
|
|
- <Ratio
|
|
|
- text="身份"
|
|
|
- subtext={PrepareStatusMap[data.prepareStatus]}
|
|
|
- values={[
|
|
|
- { label: '学生-D; 20%', value: 10, color: '#41A6F3' },
|
|
|
- { label: '学生-O; 20%', value: 20, color: '#3F86EA' },
|
|
|
- { label: '在职-D; 20%', value: 20, color: '#41A6F3' },
|
|
|
- { label: '在职-O; 20%', value: 20, color: '#6DC0FF' },
|
|
|
- { label: 'Gap Year; 20%', value: 20, color: '#9BD4FF' },
|
|
|
- ]}
|
|
|
- />
|
|
|
+ <Ratio text="身份" subtext={PrepareStatusMap[data.prepareStatus]} values={stat.status || []} />
|
|
|
<Ratio
|
|
|
text="考试时间"
|
|
|
subtext={PrepareExaminationTimeMap[data.prepareExaminationTime]}
|
|
|
- values={[
|
|
|
- { label: '近1个月; 20%', value: 10, color: '#6865FD' },
|
|
|
- { label: '近2个月; 20%', value: 20, color: '#322EF2' },
|
|
|
- { label: '近3个月; 20%', value: 20, color: '#8F65FF' },
|
|
|
- { label: '半年内; 20%', value: 20, color: '#8C8AFF' },
|
|
|
- ]}
|
|
|
- />
|
|
|
- <Ratio
|
|
|
- text="目标成绩"
|
|
|
- subtext={`${data.prepareGoal}分`}
|
|
|
- values={[
|
|
|
- { label: '600+; 20%', value: 10, color: '#2754E0' },
|
|
|
- { label: '650+; 20%', value: 20, color: '#3F86EA' },
|
|
|
- { label: '700+; 20%', value: 20, color: '#41A6F3' },
|
|
|
- { label: '700+; 20%', value: 20, color: '#6DC0FF' },
|
|
|
- ]}
|
|
|
+ values={stat.examinationTime || []}
|
|
|
/>
|
|
|
+ <Ratio text="目标成绩" subtext={`${data.prepareGoal}分`} values={stat.goal || []} />
|
|
|
<Ratio
|
|
|
text="出分日期"
|
|
|
subtext={`${formatDate(data.prepareScoreTime, 'YYYY-MM')}`}
|
|
|
- values={[
|
|
|
- { label: '近1个月; 20%', value: 10, color: '#6865FD' },
|
|
|
- { label: '近2个月; 20%', value: 20, color: '#322EF2' },
|
|
|
- { label: '近3个月; 20%', value: 20, color: '#8F65FF' },
|
|
|
- { label: '半年内; 20%', value: 20, color: '#8C8AFF' },
|
|
|
- { label: '半年内; 20%', value: 20, color: '#8C8AFF' },
|
|
|
- { label: '1年内; 20%', value: 20, color: '#8F65FF' },
|
|
|
- { label: '不清楚', value: 20, color: '#C3C1D1' },
|
|
|
- ]}
|
|
|
+ values={stat.scoreTime || []}
|
|
|
/>
|
|
|
</div>
|
|
|
);
|