caishi 5 years ago
commit d05d3dbe76

@ -7,6 +7,11 @@ let _url_origin = getUrl2()
// let _url_origin = `http://47.96.87.25:48080`; // let _url_origin = `http://47.96.87.25:48080`;
if (!window.Cropper) { if (!window.Cropper) {
$.ajaxSetup({
cache: true
});
$('head').append($('<link rel="stylesheet" type="text/css" />') $('head').append($('<link rel="stylesheet" type="text/css" />')
.attr('href', `${_url_origin}/react/public/js/cropper/cropper.min.css`)); .attr('href', `${_url_origin}/react/public/js/cropper/cropper.min.css`));
@ -61,7 +66,14 @@ function save_avatar(){
// }); // });
// } // }
} }
/**
props 说明
imageId 源图片标签的id
previewId crop后预览dom的id
imageSrc 源图片src
width 数字格式
height 数字格式
*/
class Cropper extends Component { class Cropper extends Component {
state = { state = {
}; };
@ -70,26 +82,31 @@ class Cropper extends Component {
} }
componentDidMount() { componentDidMount() {
setTimeout(() => { this.options = {
const image = document.getElementById('image'); aspectRatio: 1,
const cropper = new window.Cropper(image, { crop(event) {
aspectRatio: 1, // console.log(event.detail.x);
crop(event) { // console.log(event.detail.y);
// console.log(event.detail.x); // console.log(event.detail.width);
// console.log(event.detail.y); // console.log(event.detail.height);
// console.log(event.detail.width); // console.log(event.detail.rotate);
// console.log(event.detail.height); // console.log(event.detail.scaleX);
// console.log(event.detail.rotate); // console.log(event.detail.scaleY);
// console.log(event.detail.scaleX); },
// console.log(event.detail.scaleY);
},
preview: '.img-preview', preview: this.props.previewId ? `#${this.props.previewId}` : '.img-preview',
}); }
}, 3000) setTimeout(() => {
const image = document.getElementById(this.props.imageId || '__image');
this.cropper = new window.Cropper(image, this.options);
}, 1000)
} }
renew = (image) => {
this.cropper && this.cropper.destroy();
this.cropper = new window.Cropper(image, this.options);
}
render() { render() {
const { width, height, previewId, imageSrc } = this.props; const { width, height, previewId, imageSrc } = this.props;
@ -98,8 +115,8 @@ class Cropper extends Component {
{/* This rule is very important, please do not ignore this! */} {/* This rule is very important, please do not ignore this! */}
<style>{` <style>{`
.wrapper { .wrapper {
width: ${ width || '500px'}; width: ${ (width+'px') || '500px'};
height: ${ height || '500px'}; height: ${ (height+'px') || '500px'};
} }
img { img {
max-width: 100%; max-width: 100%;
@ -113,7 +130,7 @@ class Cropper extends Component {
`}</style> `}</style>
<div className="wrapper"> <div className="wrapper">
{/* http://localhost:3007/images/footNavLogo.png 图片转了后不对 */} {/* http://localhost:3007/images/footNavLogo.png 图片转了后不对 */}
<img id="image" src={`${imageSrc || "/images/testPicture.jpg"}`}></img> <img id={this.props.imageId || "__image"} src={`${imageSrc || "/images/testPicture.jpg"}`}></img>
</div> </div>
{/* background: 'aquamarine', {/* background: 'aquamarine',
'border-radius': '128px' 'border-radius': '128px'
@ -124,7 +141,7 @@ class Cropper extends Component {
{/* <img id="showImg" src="http://localhost:3007/images/testPicture.jpg"></img> */} {/* <img id="showImg" src="http://localhost:3007/images/testPicture.jpg"></img> */}
{/* <div id="canvasWrap"></div> */} {/* <div id="canvasWrap"></div> */}
<button onClick={save_avatar.bind(this)}>save </button> {/* <button onClick={save_avatar.bind(this)}>save </button> */}
</div> </div>
); );
} }

@ -1,7 +1,9 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import {Link} from 'react-router-dom' import {Link} from 'react-router-dom'
const map={"blue":"blueFull","greyBack":"greyBack","grey":"greyWidthFixed","green":"greenBack"} const map={"blue":"blueFull","greyBack":"greyBack","grey":"greyWidthFixed","green":"greenBack",
'colorBlue': 'colorBlue', // 蓝字白底
}
class ActionBtn extends Component { class ActionBtn extends Component {
constructor(props) { constructor(props) {
super(props); super(props);

@ -28,6 +28,7 @@ export { EDU_ADMIN, EDU_BUSINESS, EDU_SHIXUN_MANAGER, EDU_SHIXUN_MEMBER, EDU_CER
, EDU_GAME_MANAGER, EDU_TEACHER, EDU_NORMAL} from './Const' , EDU_GAME_MANAGER, EDU_TEACHER, EDU_NORMAL} from './Const'
export { ModalHOC } from './components/ModalHOC' export { ModalHOC } from './components/ModalHOC'
export { default as Cropper } from './components/Cropper'
export { default as ConditionToolTip } from './components/ConditionToolTip' export { default as ConditionToolTip } from './components/ConditionToolTip'
export { default as DragValidator } from './components/DragValidator' export { default as DragValidator } from './components/DragValidator'

@ -616,12 +616,12 @@ a.white-btn.use_scope-btn:hover{
border-radius: 10px; border-radius: 10px;
} }
.Navmodal .ant-modal-content .ant-modal-header{ .Navmodal .ant-modal-content .ant-modal-header{
border-radius: 10px 10px 0 0; /*border-radius: 10px 10px 0 0;*/
} }
.ant-modal-content{ .ant-modal-content{
-webkit-box-shadow: 0 4px 12px transparent !important; -webkit-box-shadow: 0 4px 12px transparent !important;
box-shadow: 0 4px 12px transparent !important; box-shadow: 0 4px 12px transparent !important;
border-radius: 10px !important; /*border-radius: 10px !important;*/
} }
.Navmodal .ant-modal-body{ .Navmodal .ant-modal-body{
@ -677,6 +677,11 @@ a.white-btn.use_scope-btn:hover{
color: #fff!important; color: #fff!important;
} }
.colorBlue {
background-color: #fff;
color: #4CACFF;
border: 1px solid #4CACFF;
}
.greyBack{ .greyBack{
/* 不要固定宽度 */ /* 不要固定宽度 */
/* width: 64px; */ /* width: 64px; */

@ -753,7 +753,7 @@ class Listofworks extends Component {
let {page, limit} = this.state; let {page, limit} = this.state;
let datalist = []; let datalist = [];
let columns = this.state.columns; let columns = this.state.columns;
// var columns2=[]; var columns2=[];
if (teacherdata !== undefined) { if (teacherdata !== undefined) {
for (var i = 0; i < student_works.length; i++) { for (var i = 0; i < student_works.length; i++) {
var timedata = moment(student_works[i].update_time).format('YYYY-MM-DD HH:mm'); var timedata = moment(student_works[i].update_time).format('YYYY-MM-DD HH:mm');
@ -799,7 +799,7 @@ class Listofworks extends Component {
else if(this.props.isNotMember()===true&&item.title==="学号") { else if(this.props.isNotMember()===true&&item.title==="学号") {
}else{ }else{
columns.push(item); columns2.push(item);
} }
} }
@ -817,7 +817,7 @@ class Listofworks extends Component {
else if(this.props.isNotMember()===true&&item.title==="学号") { else if(this.props.isNotMember()===true&&item.title==="学号") {
}else{ }else{
columns.push(item); columns2.push(item);
} }
} }
@ -831,7 +831,7 @@ class Listofworks extends Component {
else if(this.props.isNotMember()===true&&item.title==="学号") { else if(this.props.isNotMember()===true&&item.title==="学号") {
}else{ }else{
columns.push(item); columns2.push(item);
} }
} }
} }
@ -847,7 +847,7 @@ class Listofworks extends Component {
else if(this.props.isNotMember()===true&&item.title==="学号") { else if(this.props.isNotMember()===true&&item.title==="学号") {
}else{ }else{
columns.push(item); columns2.push(item);
} }
} }
@ -863,11 +863,11 @@ class Listofworks extends Component {
else if(this.props.isNotMember()===true&&item.title==="学号") { else if(this.props.isNotMember()===true&&item.title==="学号") {
}else{ }else{
columns.push(item); columns2.push(item);
} }
} }
} }
columns=this.state.columnss; columns2=this.state.columnss;
} }
} }
@ -877,7 +877,7 @@ class Listofworks extends Component {
this.setState({ this.setState({
data: datalist, data: datalist,
teacherlist: teacherlist, teacherlist: teacherlist,
columns: columns, columns: columns2,
loadingstate: false, loadingstate: false,
}) })
} }
@ -1327,6 +1327,47 @@ class Listofworks extends Component {
}); });
} }
// 导出实习报告批量
internshipreport = ()=>{
console.log("internshipreport");
let url = "/zip/shixun_report";
let homeworkid = this.props.match.params.homeworkid;
axios.get((url),{
params: {
homework_common_id: homeworkid,
work_status: this.state.course_groupyslstwo,
course_group: this.state.checkedValuesineinfo,
search: this.state.searchtext,
}
}).then((response) => {
console.log("1342");
console.log(response);
}).catch((error) => {
console.log(error)
});
}
// 课堂学生成绩的导出下载
Classstudentachievement=()=>{
console.log("Classstudentachievement");
const course_id = this.props.match.params.coursesId;
let url = "/courses/"+course_id+"/export_member_scores_excel.xlsx";
axios.get((url),{
params: {
group_id: this.state.checkedValuesineinfo,
search: this.state.searchtext,
}
}).then((response) => {
console.log("1306");
console.log(response);
}).catch((error) => {
console.log(error)
});
}
render() { render() {
// console.log("Listofworks.js000") // console.log("Listofworks.js000")
@ -1475,8 +1516,8 @@ class Listofworks extends Component {
{this.props.isAdmin()? <li className="li_line drop_down fr color-blue font-16 mr8 mt20" style={{"padding":"0 20px"}}> {this.props.isAdmin()? <li className="li_line drop_down fr color-blue font-16 mr8 mt20" style={{"padding":"0 20px"}}>
导出<i className="iconfont icon-xiajiantou font-12 ml2"></i> 导出<i className="iconfont icon-xiajiantou font-12 ml2"></i>
<ul className="drop_down_menu" style={{"right":"-0px","left":"unset","height":"auto"}}> <ul className="drop_down_menu" style={{"right":"-0px","left":"unset","height":"auto"}}>
<li><a href={`/api/student_works/${jobsettingsdata === undefined ? "" :jobsettingsdata.data.category.category_id}/export_shixun_work_report.pdf`} >实训报告</a></li> <li><a onClick={()=>this.internshipreport()}>实训报告</a></li>
<li><a href={`/api/homework_commons/${jobsettingsdata === undefined ? "" :jobsettingsdata.data.category.category_id}/works_list.xlsx`} >学生成绩</a></li> <li><a onClick={()=>this.Classstudentachievement()} >学生成绩</a></li>
</ul> </ul>
</li>:""} </li>:""}
{this.props.isAdmin() ? {this.props.isAdmin() ?

@ -1,6 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import {getImageUrl} from 'educoder'; import {getImageUrl} from 'educoder';
import {Tooltip} from 'antd'; import {Tooltip,Modal,Icon,Spin,message} from 'antd';
import '../../paths/ShixunPaths.css'; import '../../paths/ShixunPaths.css';
import DetailCardsEditAndAdd from './DetailCardsEditAndAdd'; import DetailCardsEditAndAdd from './DetailCardsEditAndAdd';
import DetailCardsEditAndEdit from './DetailCardsEditAndEdit'; import DetailCardsEditAndEdit from './DetailCardsEditAndEdit';
@ -46,7 +46,8 @@ class DetailCards extends Component{
editbuttomtypeadd:false, editbuttomtypeadd:false,
showparagraph:false, showparagraph:false,
showparagraphkey:"", showparagraphkey:"",
showparagraphindex:"" showparagraphindex:"",
isSpin:false
} }
@ -192,29 +193,62 @@ class DetailCards extends Component{
} }
startgameid=(id)=>{ startgameid=(id)=>{
let url = "/shixuns/" + id + "/shixun_exec.json";
axios.get(url).then((response) => {
if (response.data.status === -2) {
this.setState({
Modalstype:true,
Modalstopval:response.data.message,
})
} else if (response.data.status === -1) {
}else if(response.data.status===-3){
this.setState({
Modalstype:true,
Modalstopval:response.data.message,
})
} else {
window.location.href = "/tasks/" + response.data.game_identifier;
// let path="/tasks/"+response.data.game_identifier;
// this.props.history.push(path);
}
}).catch((error) => {
}); let url = "/shixuns/" + id + "/shixun_exec.json";
axios.get(url).then((response) => {
if (response.data.status === -2) {
this.setState({
shixunsreplace:true,
hidestartshixunsreplacevalue:response.data.message+".json"
})
} else if (response.data.status === -1) {
console.log(response)
}else if(response.data.status===-3){
this.setState({
shixunsmessage:response.data.message,
startshixunCombattype:true,
})
} else {
window.location.href = "/tasks/" + response.data.game_identifier;
// window.location.href = path
// let path="/tasks/"+response.data.game_identifier;
// this.props.history.push(path);
}
}).catch((error) => {
});
} }
hidestartshixunsreplace=(url)=>{
this.setState({
isSpin:true,
})
axios.get(url).then((response) => {
debugger
if(response.status===200){
// let path="/shixuns/"+response.data.shixun_identifier+"/challenges";
// this.props.history.push(path);
message.success('重置成功,正在进入实训!');
this.startgameid(response.data.shixun_identifier);
this.setState({
shixunsreplace:false,
isSpin:false,
startbtn:false,
})
// message.success('重置成功,正在进入实训!');
// this.startshixunCombat();
}}
).catch((error) => {
});
}
cardsModalcancel=()=>{ cardsModalcancel=()=>{
this.setState({ this.setState({
Modalstype:false, Modalstype:false,
@ -252,6 +286,12 @@ class DetailCards extends Component{
showparagraph:false showparagraph:false
}) })
} }
hidestartshixunCombattype=()=>{
this.setState({
startshixunCombattype:false
})
}
render(){ render(){
let { pathCardsList, let { pathCardsList,
dropid, dropid,
@ -266,14 +306,14 @@ class DetailCards extends Component{
cardsModalsave, cardsModalsave,
cardsModalcancel, cardsModalcancel,
delecttype, delecttype,
editdelectid, hidestartshixunsreplacevalue,
editbuttomtype, editbuttomtype,
editbuttomtypeadd, editbuttomtypeadd,
showparagraph, showparagraph,
showparagraphkey, showparagraphkey,
showparagraphindex showparagraphindex
}=this.state; }=this.state;
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
return( return(
<div> <div>
<Modals <Modals
@ -284,6 +324,45 @@ class DetailCards extends Component{
modalSave={delecttype===true?this.delectpathCardseditfun:cardsModalsave} modalSave={delecttype===true?this.delectpathCardseditfun:cardsModalsave}
> >
</Modals> </Modals>
<Modal
keyboard={false}
title="提示"
visible={this.state.startshixunCombattype}
closable={false}
footer={null}
>
<div className="task-popup-content">
<p className="task-popup-text-center font-16 pb20">本实训的开启时间{this.state.shixunsmessage} <br/>开启时间之前不能挑战 </p>
</div>
<div className="task-popup-submit clearfix">
{/*<a onClick={this.hidestartshixunCombattype} className="task-btn fl">取消</a>*/}
<a className="task-btn task-btn-orange fr"
style={{marginRight:'51px'}}
onClick={this.hidestartshixunCombattype}>知道了</a>
</div>
{/*<p className="inviteTipbtn with100 fl">*/}
{/*<a onClick={this.hidestartshixunCombattype}>知道了</a>*/}
{/*</p>*/}
</Modal>
<Modal
keyboard={false}
title="提示"
visible={this.state.shixunsreplace}
closable={false}
footer={null}
>
<Spin indicator={antIcon} spinning={this.state.isSpin}>
<div className="task-popup-content">
<p className="task-popup-text-center font-16 pb20">实训已经更新了正在为您重置!</p>
</div>
<div className="task-popup-submit clearfix">
<a className="task-btn task-btn-orange fr"
style={{marginRight:'51px'}}
onClick={() => this.hidestartshixunsreplace(hidestartshixunsreplacevalue)}>知道了</a>
</div>
</Spin>
</Modal>
<div className="lesson-saved-list"> <div className="lesson-saved-list">
{ {
pathCardsList && pathCardsList.map((item,key)=>{ pathCardsList && pathCardsList.map((item,key)=>{

@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Cropper from '../../common/components/Cropper' import Cropper from '../../common/components/Cropper'
import ChangeHeaderPicModal from '../user/account/ChangeHeaderPicModal'
class TestCrop extends Component { class TestCrop extends Component {
state = { state = {
}; };
@ -14,6 +14,8 @@ class TestCrop extends Component {
const props = this.props; const props = this.props;
return ( return (
<div> <div>
<button onClick={() => { this.refs['changeHeaderPicModal'].setVisible(true)}}>open</button>
<ChangeHeaderPicModal ref="changeHeaderPicModal"></ChangeHeaderPicModal>
<Cropper></Cropper> <Cropper></Cropper>
</div> </div>
); );

@ -928,6 +928,7 @@ class Newshixuns extends Component {
<label className="fl mt10 "><span <label className="fl mt10 "><span
className="color-red fl mt3">*</span>&nbsp;&nbsp;</label> className="color-red fl mt3">*</span>&nbsp;&nbsp;</label>
<textarea className="fl task-form-80 task-height-150" <textarea className="fl task-form-80 task-height-150"
style={{width:'89%'}}
onInput={this.setlanguagewrite} onInput={this.setlanguagewrite}
value={languagewrite} value={languagewrite}
placeholder="请填写该镜像是基于什么语言示例Python" placeholder="请填写该镜像是基于什么语言示例Python"

@ -12,7 +12,7 @@ import { getImageUrl ,markdownToHTML} from 'educoder'
import { CircularProgress } from 'material-ui/Progress'; import { CircularProgress } from 'material-ui/Progress';
import { Modal, Spin, Tooltip ,message} from 'antd'; import { Modal, Spin, Tooltip ,message,Icon} from 'antd';
import 'antd/lib/pagination/style/index.css'; import 'antd/lib/pagination/style/index.css';
@ -35,7 +35,8 @@ class Challenges extends Component {
shixunsreplace:false, shixunsreplace:false,
shixunsmessage:"", shixunsmessage:"",
hidestartshixunsreplacevalue:"", hidestartshixunsreplacevalue:"",
operationstrue:false operationstrue:false,
isSpin:false,
} }
} }
@ -154,33 +155,76 @@ class Challenges extends Component {
}) })
} }
} }
hidestartshixunsreplace=(url)=>{
axios.get(url).then((response) => {
if(response.status===200){
let path="/shixuns/"+response.data.shixun_identifier+"/challenges";
this.props.history.push(path);
this.setState({
shixunsreplace:false
})
message.success('重置成功,请继续!');
}}
).catch((error) => {
this.setState({
startbtns:false,
shixunsreplace:false
})
});
} startgameid=(id)=>{
let url = "/shixuns/" + id + "/shixun_exec.json";
axios.get(url).then((response) => {
if (response.data.status === -2) {
this.setState({
shixunsreplace:true,
hidestartshixunsreplacevalue:response.data.message+".json"
})
} else if (response.data.status === -1) {
console.log(response)
}else if(response.data.status===-3){
this.setState({
shixunsmessage:response.data.message,
startshixunCombattype:true,
})
} else {
window.location.href = "/tasks/" + response.data.game_identifier;
// window.location.href = path
// let path="/tasks/"+response.data.game_identifier;
// this.props.history.push(path);
}
}).catch((error) => {
});
}
hidestartshixunsreplace=(url)=>{
this.setState({
isSpin:true,
})
axios.get(url).then((response) => {
if(response.status===200){
// let path="/shixuns/"+response.data.shixun_identifier+"/challenges";
// this.props.history.push(path);
message.success('重置成功,正在进入实训!');
this.startgameid(response.data.shixun_identifier);
this.setState({
shixunsreplace:false,
isSpin:false,
})
// message.success('重置成功,正在进入实训!');
// this.startshixunCombat();
}}
).catch((error) => {
});
}
//编辑实训题目选择题
EditTraining=(type, ids, path)=>{
let { ChallengesDataList } = this.state;
window.location.href = "/shixuns/" + ChallengesDataList.shixun_identifier + "/challenges/" + ids + path;
}
//开始实战按钮 //开始实战按钮
startshixunCombat = (type, ids, path) => { startshixunCombat = (type, ids, id) => {
let { ChallengesDataList } = this.state; let { ChallengesDataList } = this.state;
if(path===null){ // let id = this.props.match.params.shixunId;
let id = this.props.match.params.shixunId;
this.setState({ this.setState({
startbtns: true startbtns: true
}) })
let url = "/shixuns/" + id + "/shixun_exec.json"; let url = "/shixuns/" + ChallengesDataList.shixun_identifier + "/shixun_exec.json?challenge_id="+id;
axios.get(url).then((response) => { axios.get(url).then((response) => {
if (response.data.status === -2) { if (response.data.status === -2) {
@ -190,6 +234,9 @@ class Challenges extends Component {
hidestartshixunsreplacevalue:response.data.message+".json" hidestartshixunsreplacevalue:response.data.message+".json"
}) })
} else if (response.data.status === -1) { } else if (response.data.status === -1) {
this.setState({
startbtns: false
})
console.log(response) console.log(response)
}else if(response.data.status===-3){ }else if(response.data.status===-3){
this.setState({ this.setState({
@ -204,17 +251,18 @@ class Challenges extends Component {
// this.props.history.push(path); // this.props.history.push(path);
} }
}).catch((error) => { }).catch((error) => {
this.setState({
startbtns: false
})
}); });
}else{
if (type > 4 || type === false) {
window.location.href = path; // if(path===null){
} else { // }else{
window.location.href = "/shixuns/" + ChallengesDataList.shixun_identifier + "/challenges/" + ids + path; // if (type > 4 || type === false) {
} // window.location.href = path;
} // } else {
//
// }
// }
} }
@ -230,6 +278,7 @@ class Challenges extends Component {
this.updatamakedown("ReactMarkdown") this.updatamakedown("ReactMarkdown")
} }
let id = this.props.match.params.shixunId; let id = this.props.match.params.shixunId;
const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
return ( return (
<React.Fragment> <React.Fragment>
{loadingContent ? {loadingContent ?
@ -340,10 +389,10 @@ class Challenges extends Component {
{this.props.identity<5? {this.props.identity<5?
item.st === 1 ? item.st === 1 ?
<a onClick={() => this.startshixunCombat(this.props.identity, item.challenge_id, "/editquestion")} <a onClick={() => this.EditTraining(this.props.identity, item.challenge_id, "/editquestion")}
className="font-16 color05101a">{item.name}</a> className="font-16 color05101a">{item.name}</a>
: :
<a onClick={() => this.startshixunCombat(this.props.identity, item.challenge_id, "/editcheckpoint")} <a onClick={() => this.EditTraining(this.props.identity, item.challenge_id, "/editcheckpoint")}
className="font-16 color05101a">{item.name}</a>:<span className="font-16 color05101a">{item.name}</a>:<span
// onClick={() => this.startshixunCombat(this.props.identity, item.challenge_id, "/editcheckpoint")} // onClick={() => this.startshixunCombat(this.props.identity, item.challenge_id, "/editcheckpoint")}
className="font-16 color05101a">{item.name}</span> className="font-16 color05101a">{item.name}</span>
@ -431,7 +480,7 @@ class Challenges extends Component {
{/*判断比较复杂 有排第一不能是灰色按钮*/} {/*判断比较复杂 有排第一不能是灰色按钮*/}
{item.status === 2 ? {item.status === 2 ?
<a className="edu-default-btn edu-blueline-btn fr Finish_button mtf3" <a className="edu-default-btn edu-blueline-btn fr Finish_button mtf3"
onClick={() => this.startshixunCombat(false,undefined, item.open_game)} onClick={() => this.startshixunCombat(false,undefined, item.challenge_id)}
// onClick={() => this.startshixunCombat(false)} // onClick={() => this.startshixunCombat(false)}
>已完成</a> : "" >已完成</a> : ""
} }
@ -440,7 +489,7 @@ class Challenges extends Component {
ChallengesDataList.allow_skip === true && item.status === 1? ChallengesDataList.allow_skip === true && item.status === 1?
<a className="edu-default-btn edu-blueback-btn fr Finish_button" <a className="edu-default-btn edu-blueback-btn fr Finish_button"
style={{marginTop: '-2px'}} style={{marginTop: '-2px'}}
onClick={() => this.startshixunCombat(false,undefined, item.open_game)} onClick={() => this.startshixunCombat(false,undefined, item.challenge_id)}
// onClick={() => this.startshixunCombat(false)} // onClick={() => this.startshixunCombat(false)}
>直接挑战</a> : "" >直接挑战</a> : ""
} }
@ -451,14 +500,14 @@ class Challenges extends Component {
ChallengesDataList.allow_skip === false ? item.status === 1 && newstatus === 2 ? ChallengesDataList.allow_skip === false ? item.status === 1 && newstatus === 2 ?
<Tooltip placement="bottom" title={item.open_game!=""?"直接挑战":"请先完成前序关卡"}> <Tooltip placement="bottom" title={item.open_game!=""?"直接挑战":"请先完成前序关卡"}>
<a className={item.open_game!=""?"edu-default-btn edu-blueback-btn fr Finish_button":"edu-default-btn edu-greyback-btn fr Finish_button"} <a className={item.open_game!=""?"edu-default-btn edu-blueback-btn fr Finish_button":"edu-default-btn edu-greyback-btn fr Finish_button"}
onClick={item.open_game!=""?()=>this.startshixunCombat(false,undefined, item.open_game):""} onClick={item.open_game!=""?()=>this.startshixunCombat(false,undefined, item.challenge_id):""}
style={{marginTop: '-2px'}}>直接挑战</a> style={{marginTop: '-2px'}}>直接挑战</a>
</Tooltip> </Tooltip>
: item.status === 1 && newstatus === 1 ? : item.status === 1 && newstatus === 1 ?
<Tooltip placement="bottom" title={this.props.identity<5?"直接挑战":"请先完成前序关卡"}> <Tooltip placement="bottom" title={this.props.identity<5?"直接挑战":"请先完成前序关卡"}>
<a className={this.props.identity<5&&item.open_game!=""?"edu-default-btn edu-blueback-btn fr Finish_button":"edu-default-btn edu-greyback-btn fr Finish_button"} <a className={this.props.identity<5&&item.open_game!=""?"edu-default-btn edu-blueback-btn fr Finish_button":"edu-default-btn edu-greyback-btn fr Finish_button"}
onClick={this.props.identity<5&&item.open_game!=""?()=>this.startshixunCombat(false,undefined, item.open_game):""} onClick={this.props.identity<5&&item.open_game!=""?()=>this.startshixunCombat(false,undefined, item.challenge_id):""}
style={{marginTop: '-2px'}}>直接挑战</a> style={{marginTop: '-2px'}}>直接挑战</a>
</Tooltip> : "" : "" </Tooltip> : "" : ""
@ -469,7 +518,7 @@ class Challenges extends Component {
item.status === 0 ? item.status === 0 ?
<Tooltip placement="bottom" title={this.props.identity<5&&item.open_game!=""?"直接挑战":"请先完成前序关卡"}> <Tooltip placement="bottom" title={this.props.identity<5&&item.open_game!=""?"直接挑战":"请先完成前序关卡"}>
<a className={this.props.identity<5&&item.open_game!=""?"edu-default-btn edu-blueback-btn fr Finish_button":"edu-default-btn edu-greyback-btn fr Finish_button"} <a className={this.props.identity<5&&item.open_game!=""?"edu-default-btn edu-blueback-btn fr Finish_button":"edu-default-btn edu-greyback-btn fr Finish_button"}
onClick={this.props.identity<5&&item.open_game!=""?()=>this.startshixunCombat(false,undefined, item.open_game):""} onClick={this.props.identity<5&&item.open_game!=""?()=>this.startshixunCombat(false,undefined, item.challenge_id):""}
style={{marginTop: '-2px'}}>直接挑战</a> style={{marginTop: '-2px'}}>直接挑战</a>
</Tooltip>: "" </Tooltip>: ""
} }
@ -530,12 +579,15 @@ class Challenges extends Component {
closable={false} closable={false}
footer={null} footer={null}
> >
<div className="task-popup-content"> <Spin indicator={antIcon} spinning={this.state.isSpin}>
<p className="task-popup-text-center font-16 pb20">实训已经更新了正在为您重置!</p> <div className="task-popup-content">
</div> <p className="task-popup-text-center font-16 pb20">实训已经更新了正在为您重置!</p>
<div className="task-popup-submit clearfix"> </div>
<a className="task-btn task-btn-orange fr mr51" onClick={()=>this.hidestartshixunsreplace(hidestartshixunsreplacevalue)}>知道了</a> <div className="task-popup-submit clearfix">
</div> <a className="task-btn task-btn-orange fr mr51"
onClick={() => this.hidestartshixunsreplace(hidestartshixunsreplacevalue)}>知道了</a>
</div>
</Spin>
</Modal> </Modal>
</div> </div>
} }

@ -0,0 +1,163 @@
import React, { Component } from "react";
import { Modal } from "antd";
import axios from 'axios'
import ModalWrapper from "../../courses/common/ModalWrapper"
import { Cropper } from 'educoder'
const imageId = 'changeHeaderPic'
const previewId = 'changeHeader_imagePreview'
let uploadedImageType;
let uploadedImageName;
let uploadedImageURL;
class ChangeHeaderPicModal extends Component{
constructor(props){
super(props);
this.state={
}
}
init = () => {
var inputImage = document.getElementById('inputImage');
const that = this;
inputImage.onchange = function () {
var files = this.files;
var file;
// cropper &&
if (files && files.length) {
file = files[0];
if (/^image\/\w+/.test(file.type)) {
uploadedImageType = file.type;
uploadedImageName = file.name;
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
const image = document.getElementById( imageId );
image.src = uploadedImageURL = URL.createObjectURL(file);
that.refs['cropper'].renew(image)
// cropper.destroy();
// cropper = new Cropper(image, options);
inputImage.value = null;
} else {
// TODO noti
window.alert('Please choose an image file.');
}
}
};
}
componentDidMount() {
}
setVisible = (visible) => {
this.refs['modalWrapper'].setVisible(visible)
if (visible) {
setTimeout(() => {
this.init()
}, 300)
}
}
onSendOk = () => {
}
onOk = () => {
var img_lg = document.getElementById(previewId);
// 截图小的显示框内的内容
window.html2canvas(img_lg).then((canvas) => {
var dataUrl = canvas.toDataURL("image/jpeg");
console.log(dataUrl)
const url = `/users/accounts/${this.props.userLogin || 'kosasa'}/avatar.json`
axios.put(url, {
image: dataUrl
})
.then((response) => {
// {"status":0,"message":"success","avatar_url":"avatars/User/15739"}
if (response.data.status == 0) {
// TODO noti
}
})
.catch(function (error) {
console.log(error);
});
});
}
render(){
const { course_lists } = this.state
const { moduleName } = this.props
return(
<ModalWrapper
ref="modalWrapper"
title={`上传头像`}
{...this.props }
onOk={this.onOk}
okText="保存"
width={552}
className="changeHeaderModal"
>
<style>{`
#changeHeader_imagePreview {
overflow: hidden;
background-color: #fff;
border-radius: 50%;
text-align: center;
width: 120px;
height: 120px;
}
.previewWrap {
flex-direction: column;
justify-content: space-between;
height: 320px;
align-items: center;
margin-left: 36px;
}
.changeHeaderModal .tip {
color: #9B9B9B;
}
.previewWrap .tip {
text-align: center;
margin-top: 2px;
}
#uploadBtn {
color: #4CACFF;
border: 1px solid #4CACFF;
padding: 2px 18px;
cursor: pointer;
}
`}</style>
<div className="df">
<div>
<Cropper
ref="cropper"
imageId={imageId}
previewId="changeHeader_imagePreview"
width={320} height={320}
></Cropper>
<span className="tip">仅支持JPGGIFPNG且文件小于2M</span>
</div>
<div
className="df previewWrap" style ={{flexDirection: 'column'}}
>
<div>
<div id="changeHeader_imagePreview"></div>
<div className="tip">头像预览</div>
</div>
<label id="uploadBtn" for="inputImage">
<input type="file" class="sr-only" id="inputImage" name="file" accept="image/*"></input>
重新上传
</label>
</div>
</div>
</ModalWrapper>
)
}
}
export default ChangeHeaderPicModal;
Loading…
Cancel
Save