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