|
@@ -20,8 +20,106 @@ const PREVIEW = 'PREVIEW';
|
|
|
const PREVIEW_CLASS = 'PREVIEW_CLASS';
|
|
|
const PREVIEW_TASK = 'PREVIEW_TASK';
|
|
|
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ title: '练习册',
|
|
|
+ width: 250,
|
|
|
+ align: 'left',
|
|
|
+ render: item => {
|
|
|
+ return (
|
|
|
+ <div className="table-row">
|
|
|
+ <div className="night f-s-16">{item.title}</div>
|
|
|
+ <div>
|
|
|
+ <ProgressText
|
|
|
+ progress={item.report.id ? item.repport.userNumber / item.report.questionNumber : 0}
|
|
|
+ size="small"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '正确率',
|
|
|
+ width: 150,
|
|
|
+ align: 'left',
|
|
|
+ render: item => {
|
|
|
+ return (
|
|
|
+ <div className="table-row">
|
|
|
+ <div className="night f-s-16 f-w-b">--</div>
|
|
|
+ <div className="f-s-12">{item.stat.totalCorrect / item.stat.totalNumber}</div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '全站用时',
|
|
|
+ width: 150,
|
|
|
+ align: 'left',
|
|
|
+ render: item => {
|
|
|
+ return (
|
|
|
+ <div className="table-row">
|
|
|
+ <div className="night f-s-16 f-w-b">--</div>
|
|
|
+ <div className="f-s-12">全站{item.stat.totalTime / item.stat.totalNumber}s</div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '最近做题',
|
|
|
+ width: 150,
|
|
|
+ align: 'left',
|
|
|
+ render: () => {
|
|
|
+ return (
|
|
|
+ <div className="table-row">
|
|
|
+ <div>2019-04-28</div>
|
|
|
+ <div>07:30</div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ width: 180,
|
|
|
+ align: 'left',
|
|
|
+ render: item => {
|
|
|
+ return (
|
|
|
+ <div className="table-row p-t-1">
|
|
|
+ {!item.repport.id && (
|
|
|
+ <IconButton type="start" tip="Start" onClick={() => this.previewAction('start', item)} />
|
|
|
+ )}
|
|
|
+ {item.repport.id && (
|
|
|
+ <IconButton
|
|
|
+ className="m-r-2"
|
|
|
+ type="continue"
|
|
|
+ tip="Continue"
|
|
|
+ onClick={() => this.previewAction('continue', item)}
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ {item.repport.id && (
|
|
|
+ <IconButton type="restart" tip="Restart" onClick={() => this.previewAction('restart', item)} />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '报告',
|
|
|
+ width: 30,
|
|
|
+ align: 'right',
|
|
|
+ render: item => {
|
|
|
+ return (
|
|
|
+ <div className="table-row p-t-1">
|
|
|
+ {item.report.userNumber === item.report.questionNumber && <IconButton type="report" tip="Report" />}
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
export default class extends Page {
|
|
|
initState() {
|
|
|
+ this.columns = columns;
|
|
|
return {
|
|
|
level1Tab: PREVIEW,
|
|
|
level2Tab: '',
|
|
@@ -65,7 +163,7 @@ export default class extends Page {
|
|
|
this.refreshClassProcess();
|
|
|
}
|
|
|
if (previewType === PREVIEW_TASK) {
|
|
|
- this.refreshPreview();
|
|
|
+ this.refreshListPreview();
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -136,11 +234,11 @@ export default class extends Page {
|
|
|
<div className="content">
|
|
|
<Module className="m-t-2">
|
|
|
<Tabs type="card" active={level1Tab} tabs={tabs} onChange={key => this.onChangeTab(1, key)} />
|
|
|
- {(level1Tab !== HARD || level1Tab !== PREVIEW) && (
|
|
|
+ {level1Tab !== HARD && level1Tab !== PREVIEW && (
|
|
|
<Tabs active={level2Tab} tabs={map[level2Tab]} onChange={key => this.onChangeTab(2, key)} />
|
|
|
)}
|
|
|
</Module>
|
|
|
- {(level1Tab !== HARD || level1Tab !== PREVIEW) && this.renderType()}
|
|
|
+ {level1Tab !== HARD && level1Tab !== PREVIEW && this.renderType()}
|
|
|
{level1Tab === HARD && this.renderHard()}
|
|
|
{level1Tab === PREVIEW && this.renderWork()}
|
|
|
</div>
|
|
@@ -161,122 +259,52 @@ export default class extends Page {
|
|
|
}
|
|
|
|
|
|
renderAllClass() {
|
|
|
- const { allClass, classProcess } = this.props;
|
|
|
+ const { allClass, classProcess } = this.state;
|
|
|
return (
|
|
|
- <Division col="3">
|
|
|
- {allClass.map(item => {
|
|
|
- return <Card data={item} process={classProcess[item.id]} previewAction={this.previewAction} />;
|
|
|
- })}
|
|
|
- </Division>
|
|
|
+ <div className="work-body">
|
|
|
+ <div className="work-nav">
|
|
|
+ <div className="left">完成情况</div>
|
|
|
+ <div className="right theme c-p" onClick={() => this.onChangePreviewType(PREVIEW_TASK)}>
|
|
|
+ 全部作业 >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <Division col="3">
|
|
|
+ {allClass.map(item => {
|
|
|
+ return <Card data={item} process={classProcess[item.id]} previewAction={this.previewAction} />;
|
|
|
+ })}
|
|
|
+ </Division>
|
|
|
+ </div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
renderAllTask() {
|
|
|
- const { previews } = this.props;
|
|
|
+ const { previews } = this.state;
|
|
|
return (
|
|
|
- <ListTable
|
|
|
- filters={[
|
|
|
- { type: 'radio', checked: 'first', list: [{ key: 'first', title: 123 }, { key: 'two', title: 321 }] },
|
|
|
- { type: 'select', checked: 'first', list: [{ key: 'first', title: 123 }, { key: 'two', title: 321 }] },
|
|
|
- ]}
|
|
|
- data={previews}
|
|
|
- columns={[
|
|
|
- {
|
|
|
- title: '练习册',
|
|
|
- width: 250,
|
|
|
- align: 'left',
|
|
|
- render: item => {
|
|
|
- return (
|
|
|
- <div className="table-row">
|
|
|
- <div className="night f-s-16">{item.title}</div>
|
|
|
- <div>
|
|
|
- <ProgressText
|
|
|
- progress={item.report.id ? item.repport.userNumber / item.report.questionNumber : 0}
|
|
|
- size="small"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- title: '正确率',
|
|
|
- width: 150,
|
|
|
- align: 'left',
|
|
|
- render: item => {
|
|
|
- return (
|
|
|
- <div className="table-row">
|
|
|
- <div className="night f-s-16 f-w-b">--</div>
|
|
|
- <div className="f-s-12">{item.stat.totalCorrect / item.stat.totalNumber}</div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- title: '全站用时',
|
|
|
- width: 150,
|
|
|
- align: 'left',
|
|
|
- render: item => {
|
|
|
- return (
|
|
|
- <div className="table-row">
|
|
|
- <div className="night f-s-16 f-w-b">--</div>
|
|
|
- <div className="f-s-12">全站{item.stat.totalTime / item.stat.totalNumber}s</div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- title: '最近做题',
|
|
|
- width: 150,
|
|
|
- align: 'left',
|
|
|
- render: () => {
|
|
|
- return (
|
|
|
- <div className="table-row">
|
|
|
- <div>2019-04-28</div>
|
|
|
- <div>07:30</div>
|
|
|
- </div>
|
|
|
- );
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- width: 180,
|
|
|
- align: 'left',
|
|
|
- render: item => {
|
|
|
- return (
|
|
|
- <div className="table-row p-t-1">
|
|
|
- {!item.repport.id && (
|
|
|
- <IconButton type="start" tip="Start" onClick={() => this.previewAction('start', item)} />
|
|
|
- )}
|
|
|
- {item.repport.id && (
|
|
|
- <IconButton
|
|
|
- className="m-r-2"
|
|
|
- type="continue"
|
|
|
- tip="Continue"
|
|
|
- onClick={() => this.previewAction('continue', item)}
|
|
|
- />
|
|
|
- )}
|
|
|
- {item.repport.id && (
|
|
|
- <IconButton type="restart" tip="Restart" onClick={() => this.previewAction('restart', item)} />
|
|
|
- )}
|
|
|
- </div>
|
|
|
- );
|
|
|
+ <div className="work-body">
|
|
|
+ <div className="work-nav">
|
|
|
+ <div className="left">全部作业</div>
|
|
|
+ <div className="right theme c-p" onClick={() => this.onChangePreviewType(PREVIEW_CLASS)}>
|
|
|
+ 我的课程 >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ListTable
|
|
|
+ filters={[
|
|
|
+ {
|
|
|
+ type: 'radio',
|
|
|
+ checked: 'today',
|
|
|
+ list: [{ key: 'today', title: '今日需完成' }, { key: 'tomorrow', title: '明日需完成' }],
|
|
|
},
|
|
|
- },
|
|
|
- {
|
|
|
- title: '报告',
|
|
|
- width: 30,
|
|
|
- align: 'right',
|
|
|
- render: item => {
|
|
|
- return (
|
|
|
- <div className="table-row p-t-1">
|
|
|
- {item.report.userNumber === item.report.questionNumber && <IconButton type="report" tip="Report" />}
|
|
|
- </div>
|
|
|
- );
|
|
|
+ {
|
|
|
+ type: 'radio',
|
|
|
+ checked: 'unfinish',
|
|
|
+ list: [{ key: 'unfinish', title: '未完成' }, { key: 'finish', title: '已完成' }],
|
|
|
},
|
|
|
- },
|
|
|
- ]}
|
|
|
- />
|
|
|
+ { type: 'select', checked: 'all', list: [{ key: 'all', title: '全部' }] },
|
|
|
+ ]}
|
|
|
+ data={previews}
|
|
|
+ columns={this.columns}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
);
|
|
|
}
|
|
|
|