Merge branch 'master' of https://bdgit.educoder.net/Hjqreturn/educoder

public/react/src/common/components/Cropper.js

@@ -7,6 +7,11 @@ let _url_origin = getUrl2()
 // let _url_origin = `http://47.96.87.25:48080`;
 
 if (!window.Cropper) {
+    $.ajaxSetup({
+        cache: true
+    });
+
+
     $('head').append($('<link rel="stylesheet" type="text/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 {
   state = {
   };
@@ -70,26 +82,31 @@ class Cropper extends Component {
   }
 
   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() {
     
     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! */}
         <style>{`
             .wrapper {
-                width: ${ width || '500px'};
+                width: ${ (width+'px') || '500px'};
-                height: ${ height || '500px'};
+                height: ${ (height+'px') || '500px'};
             }
             img {
                 max-width: 100%; 
@@ -113,7 +130,7 @@ class Cropper extends Component {
         `}</style>
         <div className="wrapper">
             {/* 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>
         {/* background: 'aquamarine', 
             'border-radius': '128px'
@@ -124,7 +141,7 @@ class Cropper extends Component {
         {/* <img id="showImg" src="http://localhost:3007/images/testPicture.jpg"></img> */}
 
         {/* <div id="canvasWrap"></div> */}
-        <button onClick={save_avatar.bind(this)}>save </button>
+        {/* <button onClick={save_avatar.bind(this)}>save </button> */}
       </div>
     );
   }

public/react/src/common/course/ActionBtn.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 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 {
   constructor(props) {
     super(props);

public/react/src/common/educoder.js

@@ -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'
 
 export { ModalHOC } from 	'./components/ModalHOC'
+export { default as Cropper } from 	'./components/Cropper'
 export { default as ConditionToolTip } from 	'./components/ConditionToolTip'
 export { default as DragValidator } from 	'./components/DragValidator'
 

public/react/src/modules/courses/css/Courses.css

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

public/react/src/modules/courses/shixunHomework/Listofworks.js

@@ -753,7 +753,7 @@ class Listofworks extends Component {
 		let {page, limit} = this.state;
 		let datalist = [];
 		let columns = this.state.columns;
-		// var  columns2=[];
+		 var  columns2=[];
 		if (teacherdata !== undefined) {
 			for (var i = 0; i < student_works.length; i++) {
 				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{
-							columns.push(item);
+							columns2.push(item);
 						}
 					}
 
@@ -817,7 +817,7 @@ class Listofworks extends Component {
 							else if(this.props.isNotMember()===true&&item.title==="学号") {
 
 							}else{
-								columns.push(item);
+								columns2.push(item);
 							}
 						}
 
@@ -831,7 +831,7 @@ class Listofworks extends Component {
 							else if(this.props.isNotMember()===true&&item.title==="学号") {
 
 							}else{
-								columns.push(item);
+								columns2.push(item);
 							}
 						}
 					}
@@ -847,7 +847,7 @@ class Listofworks extends Component {
 						else if(this.props.isNotMember()===true&&item.title==="学号") {
 
 						}else{
-							 columns.push(item);
+							 columns2.push(item);
 						}
 					}
 
@@ -863,11 +863,11 @@ class Listofworks extends Component {
 							else if(this.props.isNotMember()===true&&item.title==="学号") {
 
 							}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({
 			data: datalist,
 			teacherlist: teacherlist,
-			columns: columns,
+			columns: columns2,
 			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() {
 		// 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"}}>
 									导出<i className="iconfont icon-xiajiantou font-12 ml2"></i>
 									<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>
 								</li>:""}
 								{this.props.isAdmin() ?

public/react/src/modules/test/TestCrop.js

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

public/react/src/modules/tpm/newshixuns/Newshixuns.js

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

public/react/src/modules/tpm/shixunchild/Challenges/Challenges.js

@@ -12,7 +12,7 @@ import { getImageUrl ,markdownToHTML} from 'educoder'
 
 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';
 
@@ -35,7 +35,8 @@ class Challenges extends Component {
       shixunsreplace:false,
       shixunsmessage:"",
       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;
-  	if(path===null){
+			// let id = this.props.match.params.shixunId;
-			let id = this.props.match.params.shixunId;
 				this.setState({
 					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) => {
 
 					if (response.data.status === -2) {
@@ -190,6 +234,9 @@ class Challenges extends Component {
 							hidestartshixunsreplacevalue:response.data.message+".json"
 						})
 					} else if (response.data.status === -1) {
+						this.setState({
+							startbtns: false
+						})
 						console.log(response)
 					}else if(response.data.status===-3){
 						this.setState({
@@ -204,17 +251,18 @@ class Challenges extends Component {
 						// this.props.history.push(path);
 					}
 				}).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")
     }
     let id = this.props.match.params.shixunId;
+		const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
     return (
       <React.Fragment>
         {loadingContent ?
@@ -340,10 +389,10 @@ class Challenges extends Component {
 
                           {this.props.identity<5?
                             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>
                               :
-                              <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
                               // onClick={() => this.startshixunCombat(this.props.identity, item.challenge_id, "/editcheckpoint")}
                               className="font-16 color05101a">{item.name}</span>
@@ -431,7 +480,7 @@ class Challenges extends Component {
                           {/*判断比较复杂 有排第一不能是灰色按钮*/}
                           {item.status === 2 ?
                             <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)}
                             >已完成</a> : ""
                           }
@@ -440,7 +489,7 @@ class Challenges extends Component {
                             ChallengesDataList.allow_skip === true && item.status === 1?
                               <a className="edu-default-btn edu-blueback-btn fr Finish_button"
                                  style={{marginTop: '-2px'}}
-                                 onClick={() => this.startshixunCombat(false,undefined, item.open_game)}
+                                 onClick={() => this.startshixunCombat(false,undefined, item.challenge_id)}
                                  // onClick={() => this.startshixunCombat(false)}
                               >直接挑战</a> : ""
                           }
@@ -451,14 +500,14 @@ class Challenges extends Component {
                             ChallengesDataList.allow_skip === false ? item.status === 1 && newstatus === 2 ?
                               <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"}
-                                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>
                               </Tooltip>
 
                               : item.status === 1 && newstatus === 1 ?
                                 <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"}
-                                     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>
                                 </Tooltip> : "" : ""
 
@@ -469,7 +518,7 @@ class Challenges extends Component {
                            item.status === 0 ?
                               <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"}
-                                   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>
                               </Tooltip>: ""
                           }
@@ -530,12 +579,15 @@ class Challenges extends Component {
               closable={false}
               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>
           </div>
         }

public/react/src/modules/user/account/ChangeHeaderPicModal.js

@@ -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">仅支持JPG、GIF、PNG，且文件小于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;
+
+