tangjiang
5 years ago
parent
1130b010c1
commit
6b4fbb60d5
@ -0,0 +1,112 @@
|
|||||||
|
/*
|
||||||
|
* @Description: 提交记录详情
|
||||||
|
* @Author: tangjiang
|
||||||
|
* @Github:
|
||||||
|
* @Date: 2019-12-04 08:36:21
|
||||||
|
* @LastEditors: tangjiang
|
||||||
|
* @LastEditTime: 2019-12-04 10:36:06
|
||||||
|
*/
|
||||||
|
import './index.scss';
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Button } from 'antd';
|
||||||
|
import moment from 'moment';
|
||||||
|
import ErrorResult from '../components/errorResult';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import MonacoEditor from '@monaco-editor/react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { getImageUrl } from 'educoder';
|
||||||
|
import actions from '../../../redux/actions';
|
||||||
|
import CONST from '../../../constants';
|
||||||
|
|
||||||
|
const {reviewResult} = CONST;
|
||||||
|
|
||||||
|
function RecordDetail (props) {
|
||||||
|
const {
|
||||||
|
match: { params },
|
||||||
|
mygetHelmetapi = {},
|
||||||
|
recordDetail,
|
||||||
|
getUserCommitRecordDetail
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const identifier = params.id;
|
||||||
|
const [detail, setDetail] = useState({});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// 根据id获取记录详情
|
||||||
|
getUserCommitRecordDetail(identifier, 'detail');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setDetail(recordDetail);
|
||||||
|
}, [recordDetail]);
|
||||||
|
return (
|
||||||
|
<div className="record_detail_area">
|
||||||
|
<div className="record_detail_header">
|
||||||
|
<div className="avator_nicker">
|
||||||
|
<img alt="用户头像" className={'student_img'} src={getImageUrl((mygetHelmetapi && mygetHelmetapi.nav_logo_url) || 'images/educoder/headNavLogo.png?1526520218')} />
|
||||||
|
<span className={'student_nicker'}>
|
||||||
|
{(mygetHelmetapi &&mygetHelmetapi.name) || ''}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={'study_name'}>
|
||||||
|
<span>{detail.name || 'test'}</span>
|
||||||
|
</div>
|
||||||
|
<div className={'study_quit'}>
|
||||||
|
<Button>
|
||||||
|
<Link to="/myproblems">返回该题</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="record_detail_ctx">
|
||||||
|
<div className="detail_ctx_header">
|
||||||
|
<h2 className="header_h2">提交记录</h2>
|
||||||
|
</div>
|
||||||
|
<div className="detail_ctx_status">
|
||||||
|
<span className="status_label">
|
||||||
|
状态: <span className="status_label_error">{reviewResult[detail.status]}</span>
|
||||||
|
</span>
|
||||||
|
<span className="status_label">
|
||||||
|
提交时间: <span className="status_label_sub">
|
||||||
|
{/* moment(detail.) */}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span className="status_label">
|
||||||
|
语言: <span className="status_label_sub">C</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="result_error_area">
|
||||||
|
<ErrorResult detail={detail}/>
|
||||||
|
</div>
|
||||||
|
<div className="detail_ctx_header">
|
||||||
|
<h2 className="header_h2">提交内容</h2>
|
||||||
|
<Button className={'header_btn'} type="primary">编辑代码</Button>
|
||||||
|
</div>
|
||||||
|
<div className="result_code_area">
|
||||||
|
<MonacoEditor
|
||||||
|
height="100%"
|
||||||
|
width="100%"
|
||||||
|
language={'c'}
|
||||||
|
value={'// init code'}
|
||||||
|
theme="dark"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapStateToProps = (state) => {
|
||||||
|
const {recordDetail} = state.ojForUserReducer;
|
||||||
|
return {
|
||||||
|
recordDetail
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const mapDispatchToProps = (dispatch) => ({
|
||||||
|
// 根据id号获取记录详情
|
||||||
|
getUserCommitRecordDetail: (id, type) => dispatch(actions.getUserCommitRecordDetail(id, type))
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps
|
||||||
|
)(RecordDetail);
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
@import '../split_pane_resizer.scss';
|
||||||
|
|
||||||
|
.record_detail_area{
|
||||||
|
.record_detail_ctx{
|
||||||
|
padding: 0 30px;
|
||||||
|
.detail_ctx_header{
|
||||||
|
position: relative;
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
.header_h2{
|
||||||
|
line-height: 56px;
|
||||||
|
}
|
||||||
|
.header_btn{
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 14px;
|
||||||
|
}
|
||||||
|
.detail_ctx_status{
|
||||||
|
line-height: 18px;
|
||||||
|
.status_label{
|
||||||
|
color: rgba(153,153,153,1);
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
.status_label_error{
|
||||||
|
color: #E51C24;
|
||||||
|
}
|
||||||
|
.status_label_success{
|
||||||
|
color: #28BD8B;
|
||||||
|
}
|
||||||
|
.status_label_sub{
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.result_code_area{
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue