|
|
|
|
@ -1,13 +1,14 @@
|
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
import { Link } from "react-router-dom";
|
|
|
|
|
import { markdownToHTML, configShareForCustom,getImageUrl,getUploadActionUrlthree,appendFileSizeToUploadFileAll} from 'educoder'
|
|
|
|
|
import { Divider, Tooltip,Upload,Modal,Spin} from 'antd';
|
|
|
|
|
import { Divider, Tooltip,Upload,Modal,Statistic} from 'antd';
|
|
|
|
|
import LoadingSpin from '../../../../common/LoadingSpin';
|
|
|
|
|
import 'antd/lib/pagination/style/index.css';
|
|
|
|
|
import '../shixunchildCss/Challenges.css';
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
import {addjypertime} from "../../../../redux/actions/jupyter";
|
|
|
|
|
const $ = window.$;
|
|
|
|
|
|
|
|
|
|
const { Countdown } = Statistic;
|
|
|
|
|
class Challengesjupyter extends Component {
|
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props)
|
|
|
|
|
@ -28,7 +29,8 @@ class Challengesjupyter extends Component {
|
|
|
|
|
enlarge:false,
|
|
|
|
|
fileList:[],
|
|
|
|
|
shuaxin:false,
|
|
|
|
|
showtime:false
|
|
|
|
|
showtime:false,
|
|
|
|
|
jupytertime:Date.now() +3600 * 1000
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -103,14 +105,46 @@ class Challengesjupyter extends Component {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
gettimeinfo_with_tpm=(datas)=>{
|
|
|
|
|
let timeinfo_with_tpm=`/jupyters/timeinfo_with_tpm.json`
|
|
|
|
|
axios.get(timeinfo_with_tpm, {params: datas}).then((response) => {
|
|
|
|
|
if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
|
|
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
if(response.data.status===0){
|
|
|
|
|
if(response.data.useSeconds===null){
|
|
|
|
|
this.handleClickResetTpi()
|
|
|
|
|
}else{
|
|
|
|
|
let useSeconds=response.data.useSeconds;
|
|
|
|
|
let summain=3600 * 1000;
|
|
|
|
|
let sums= useSeconds * 1000;
|
|
|
|
|
let sum=summain-sums;
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.setState({
|
|
|
|
|
jupytertime:Date.now() +sum
|
|
|
|
|
})
|
|
|
|
|
},500);
|
|
|
|
|
}
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}).catch((error) => {
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
var that=this;
|
|
|
|
|
let that=this;
|
|
|
|
|
setTimeout(this.ChallengesList(), 1000);
|
|
|
|
|
let id = this.props.match.params.shixunId;
|
|
|
|
|
let ChallengesURL = `/jupyters/get_info_with_tpm.json`;
|
|
|
|
|
let datas={
|
|
|
|
|
identifier:id,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let ChallengesURL = `/jupyters/get_info_with_tpm.json`;
|
|
|
|
|
|
|
|
|
|
axios.get(ChallengesURL, {params: datas}).then((response) => {
|
|
|
|
|
if (response.data.status === 403||response.data.status === 401||response.data.status === 500) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
@ -120,6 +154,7 @@ class Challengesjupyter extends Component {
|
|
|
|
|
}, 600)
|
|
|
|
|
}else{
|
|
|
|
|
if(response.data.status===0){
|
|
|
|
|
this.gettimeinfo_with_tpm(datas)
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setState({
|
|
|
|
|
jupyter_url:response.data.url,
|
|
|
|
|
@ -344,14 +379,20 @@ class Challengesjupyter extends Component {
|
|
|
|
|
identifier:id
|
|
|
|
|
}}).then((response) => {
|
|
|
|
|
if(response.data.status===0){
|
|
|
|
|
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.setState({
|
|
|
|
|
jupyter_url :response.data.url,
|
|
|
|
|
booljupyterurls:true,
|
|
|
|
|
})
|
|
|
|
|
},500);
|
|
|
|
|
this.props.showNotification('重置环境成功!');
|
|
|
|
|
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
|
this.setState({
|
|
|
|
|
booljupyterurls:true,
|
|
|
|
|
})
|
|
|
|
|
},1000);
|
|
|
|
|
this.props.showNotification('重置实训成功!');
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
@ -363,7 +404,6 @@ class Challengesjupyter extends Component {
|
|
|
|
|
title: '重置环境',
|
|
|
|
|
content: (
|
|
|
|
|
<p style={{ lineHeight: '24px' }}>
|
|
|
|
|
你在本文件中修改的内容将丢失,<br />
|
|
|
|
|
是否确定重置环境？
|
|
|
|
|
</p>
|
|
|
|
|
),
|
|
|
|
|
@ -377,6 +417,23 @@ class Challengesjupyter extends Component {
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onFinish=()=>{
|
|
|
|
|
let id=this.props.match.params.shixunId;
|
|
|
|
|
Modal.confirm({
|
|
|
|
|
title: '倒计时截止',
|
|
|
|
|
content: (
|
|
|
|
|
<p style={{ lineHeight: '24px' }}>
|
|
|
|
|
服务已中断，是否确认重置实验环境？
|
|
|
|
|
</p>
|
|
|
|
|
),
|
|
|
|
|
okText: '确定',
|
|
|
|
|
cancelText: '取消',
|
|
|
|
|
onOk () {
|
|
|
|
|
this.handleClickResetTpisync_code(id)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
render() {
|
|
|
|
|
let{ChallengesDataList,booljupyterurls,enlarge,fileList}=this.state;
|
|
|
|
|
let id = this.props.match.params.shixunId;
|
|
|
|
|
@ -427,7 +484,7 @@ class Challengesjupyter extends Component {
|
|
|
|
|
<div >
|
|
|
|
|
<style>
|
|
|
|
|
{
|
|
|
|
|
`
|
|
|
|
|
`
|
|
|
|
|
.ant-notification{
|
|
|
|
|
|
|
|
|
|
position: fixed !important;
|
|
|
|
|
@ -437,10 +494,21 @@ class Challengesjupyter extends Component {
|
|
|
|
|
position: fixed !important;
|
|
|
|
|
z-index: 3000 !important;
|
|
|
|
|
margin-top: 100px !important;
|
|
|
|
|
}
|
|
|
|
|
.Countdowntypes{
|
|
|
|
|
width:1px;
|
|
|
|
|
height:1px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<span className={"Countdowntypes"}>
|
|
|
|
|
{/*this.state.jupytertime*/}
|
|
|
|
|
<Countdown value={this.state.jupytertime} format="HH:mm:ss" onFinish={this.onFinish}/>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<p className="clearfix mb20 edu-back-white">
|
|
|
|
|
<div className={"shixunjianjie"}>
|
|
|
|
|
<span className="font-16 fl">简介</span>
|
|
|
|
|
@ -504,20 +572,7 @@ class Challengesjupyter extends Component {
|
|
|
|
|
}
|
|
|
|
|
</p>}
|
|
|
|
|
</p>
|
|
|
|
|
{
|
|
|
|
|
booljupyterurls===true?
|
|
|
|
|
(
|
|
|
|
|
this.state.jupyter_url === null?
|
|
|
|
|
<div className="mt50 intermediatecenter juplbool">
|
|
|
|
|
<span className="icon iconfontysl icon-jiazaishibai1"></span>
|
|
|
|
|
<p className="intermediatecenter sortinxdirection mt5 juplboolp"><p className="colorbluetest">加载实训失败，</p><p className="colorbluetwo" onClick={()=>this.updatamakedowns()}>重新加载</p></p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
:""
|
|
|
|
|
)
|
|
|
|
|
:""
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{this.state.isopentitletype==="Less"?"":this.state.opentitletype===true?<Divider dashed={true} onClick={()=>this.opentitle()} className={"pointer Breadcrumbfont color-grey-9 "}>
|
|
|
|
|
@ -557,7 +612,49 @@ class Challengesjupyter extends Component {
|
|
|
|
|
</style>
|
|
|
|
|
{
|
|
|
|
|
this.state.jupyter_url === null || this.state.jupyter_url === undefined ?
|
|
|
|
|
""
|
|
|
|
|
enlarge===true?
|
|
|
|
|
<div style={{
|
|
|
|
|
height: '63px',
|
|
|
|
|
}} className={enlarge?"shixunjianjiecballenges edu-back-white intermediatecenter fangdaone":"shixunjianjiecballenges edu-back-white mt20"}>
|
|
|
|
|
|
|
|
|
|
<div className={enlarge?"sortinxdirection jupyterswidth":"sortinxdirection"} >
|
|
|
|
|
<div className="renwuxiangssi sortinxdirection">
|
|
|
|
|
<div><p className="renwuxiangqdiv">任务详情</p></div>
|
|
|
|
|
<div><p className="renwuxiangqdivtest ml1 shixunbingbaocun">（请将实训题目写在下方并保存）</p></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="renwuxiangssit xaxisreverseorder">
|
|
|
|
|
{
|
|
|
|
|
enlarge===true?
|
|
|
|
|
<i className="iconfont icon-suoxiao2 font-18 ml2 ysliconfont" style={{
|
|
|
|
|
marginLeft: '30px',
|
|
|
|
|
}} onClick={()=>this.onclki(false)}></i>
|
|
|
|
|
:
|
|
|
|
|
<i className="iconfont icon-fangda font-18 ml2 ysliconfont" style={{
|
|
|
|
|
marginLeft: '30px',
|
|
|
|
|
}} onClick={()=>this.onclki(true)}></i>
|
|
|
|
|
}
|
|
|
|
|
<style>
|
|
|
|
|
{
|
|
|
|
|
`
|
|
|
|
|
.ant-upload-list{
|
|
|
|
|
display:none
|
|
|
|
|
}
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<Upload {...uploadProps}>
|
|
|
|
|
<div className="challenbaocun" type="upload">
|
|
|
|
|
<p className="challenbaocuntest" type="upload" >导入</p>
|
|
|
|
|
</div>
|
|
|
|
|
</Upload>
|
|
|
|
|
<button type="button" className="ant-btn deletebuttom chongzhistyles" onClick={this.handleClickResetTpi}><span>重置环境</span></button>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
:""
|
|
|
|
|
:
|
|
|
|
|
(
|
|
|
|
|
admin===true||business===true||mysidentity===true?
|
|
|
|
|
@ -640,15 +737,26 @@ class Challengesjupyter extends Component {
|
|
|
|
|
this.state.jupyter_url===null || this.state.jupyter_url===undefined?
|
|
|
|
|
(
|
|
|
|
|
booljupyterurls===false?
|
|
|
|
|
<LoadingSpin></LoadingSpin>
|
|
|
|
|
:""
|
|
|
|
|
<div className={enlarge?"fangdatwo edu-back-white fangdatwoswidth":""}>
|
|
|
|
|
<LoadingSpin ></LoadingSpin>
|
|
|
|
|
</div>
|
|
|
|
|
:
|
|
|
|
|
<div className={enlarge?"fangdatwo edu-back-white fangdatwoswidth":""}>
|
|
|
|
|
<div className="mt50 intermediatecenter juplbool">
|
|
|
|
|
<span className="icon iconfontysl icon-jiazaishibai1"></span>
|
|
|
|
|
<p className="intermediatecenter sortinxdirection mt5 juplboolp"><p className="colorbluetest">加载实训失败，</p><p className="colorbluetwo" onClick={()=>this.updatamakedowns()}>重新加载</p></p>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
:
|
|
|
|
|
|
|
|
|
|
<div className={enlarge?"fangdatwo edu-back-white":""}>
|
|
|
|
|
<iframe src={this.state.jupyter_url} className={enlarge?"fangdatwo":""}
|
|
|
|
|
scrolling="no" id="frame"
|
|
|
|
|
name="framename" width="100%" height="700" frameBorder="0"
|
|
|
|
|
></iframe>
|
|
|
|
|
scrolling="no" id="frame"
|
|
|
|
|
name="framename" width="100%" height="700" frameBorder="0"
|
|
|
|
|
></iframe>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -664,3 +772,17 @@ class Challengesjupyter extends Component {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default Challengesjupyter;
|
|
|
|
|
{/*{*/}
|
|
|
|
|
{/* booljupyterurls===true?*/}
|
|
|
|
|
{/* (*/}
|
|
|
|
|
{/* this.state.jupyter_url === null?*/}
|
|
|
|
|
{/* <div className="mt50 intermediatecenter juplbool">*/}
|
|
|
|
|
{/* <span className="icon iconfontysl icon-jiazaishibai1"></span>*/}
|
|
|
|
|
{/* <p className="intermediatecenter sortinxdirection mt5 juplboolp"><p className="colorbluetest">加载实训失败，</p><p className="colorbluetwo" onClick={()=>this.updatamakedowns()}>重新加载</p></p>*/}
|
|
|
|
|
|
|
|
|
|
{/* </div>*/}
|
|
|
|
|
|
|
|
|
|
{/* :""*/}
|
|
|
|
|
{/* )*/}
|
|
|
|
|
{/* :""*/}
|
|
|
|
|
{/*}*/}
|
|
|
|
|
|
