This commit is contained in:
30404 2024-07-05 17:15:38 +08:00
commit c1a414e712
12 changed files with 485 additions and 278 deletions

View File

@ -0,0 +1,11 @@
/* 页面右边 */
.body-right-question{
width: 1420px;
height: 830px;
position: absolute;
top: 72px;
left: 220px;
border-radius: 10px;
float: right;
background-color: #f7f8fa;
}

View File

@ -0,0 +1,8 @@
import './questionmanage.css'
function Questionmange(){
return (
<div className="body-right-question"></div>
)
}
export default Questionmange

View File

@ -12,17 +12,32 @@
/* 班级管理 */ /* 班级管理 */
.manage_class{ .manage_class{
/* flex-basis: calc(50.00% - 10PX); */
width: 400px; width: 400px;
height: 250px; height: 250px;
background-color: rgb(200, 249, 230); background-image: linear-gradient(rgb(193,240,222),rgb(128, 235, 226));
margin-left: 150px; border: 5px double rgb(185, 222, 200);
margin-top: 50px; margin: 60px 50px;
box-shadow:
0 0 0 0 , /* 填充颜色 */
inset 0 0 0 2px #fdfdfd, /* 外边框颜色 */
inset 0 0 0 6px #ffffff;
}
.manage_class h3{
font-size: 20px;
padding-left: 118px;
padding-top: 20px;
color: rgb(33, 110, 87);
} }
.manage_class p{ .manage_class p{
margin-left: 50px; font-size: 18px;
padding-right: 10px;
text-align: center;
margin-top: -2px;
padding-bottom: 10px;
color: rgb(75, 122, 122);
} }
.manage_class button{ .Link-teacherpage{
margin-left: 300px; padding: 10px 50px;
margin-top: 100px; margin-left: 112px;
background-color: #e1fff7;
} }

View File

@ -9,7 +9,7 @@ function TeacherPage() {
const teacher_ID = localStorage.getItem('islogin') const teacher_ID = localStorage.getItem('islogin')
if(teacher_ID==null){ if(teacher_ID==null){
alert('登录过期,请重新登录') alert('登录过期,请重新登录')
window.location.href='/signin' window.location.href='http://36.138.114.105:30294/'
} }
const [classData, setClassData] = useState({}); const [classData, setClassData] = useState({});
const log=(key)=>{ const log=(key)=>{
@ -37,10 +37,10 @@ function TeacherPage() {
<div id='class_box' style={{ display: 'flex' }}> <div id='class_box' style={{ display: 'flex' }}>
{Object.keys(classData).map((key) => ( {Object.keys(classData).map((key) => (
<div className='manage_class' key={key} style={{ display: '1' }}> <div className='manage_class' key={key} style={{ display: '1' }}>
<p id='class_name'>班级:{key}</p> <h3 id='class_name'>班级:{key}</h3>
<p id='number'>人数:<span>{classData[key][1]}</span></p> <p id='number'>人数:<span>{classData[key][1]}</span></p>
<p id='headteacher'>班主任:<span>{classData[key][0]}</span></p> <p id='headteacher'>班主任:<span>{classData[key][0]}</span></p>
<Link to={`/classID/${key}`} onClick={()=>{log(key);}}>管理</Link> <Link to={`/classID/${key}`} onClick={()=>{log(key);}} style={{color:'rgb(44, 103, 83)',textDecoration:'none',fontSize:'17px'}} className='Link-teacherpage'>管理</Link>
</div> </div>
))} ))}
</div> </div>

View File

@ -5,7 +5,8 @@
/* 页面区域占比 */ /* 页面区域占比 */
.SendTrain_body_left{ .SendTrain_body_left{
flex: 11%; flex: 11%;
/* border: 1px solid #000; */ border: 1px solid #000;
margin-left: 20px;
} }
.SendTrain_body_right{ .SendTrain_body_right{
flex: 60%; flex: 60%;
@ -18,8 +19,9 @@
line-height: 50px; line-height: 50px;
font-size: 26px; font-size: 26px;
font-weight: 440; font-weight: 440;
margin-top: 43px; margin-top: 40px;
padding-left: 75px; text-align: center;
border-top: 1px solid #000;
} }
.SendTrain_body_left_ul{ .SendTrain_body_left_ul{
/* all: unset; */ /* all: unset; */
@ -36,39 +38,144 @@
font-size: 22px; font-size: 22px;
} }
.left-list-ul li{ .left-list-ul li{
height: 20px;
text-align: center; text-align: center;
font-size: 18px; font-size: 18px;
padding-top: 10px; padding-top: 12px;
} }
/* 页面中间题目(基础题) */ /* 页面中间题目(基础题) */
.SendTrain_body_right p{ .SendTrain_body_right p{
font-size: 30px; font-size: 30px;
border: 1px solid black; border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
text-align: center; text-align: center;
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.SendTrain_body_right table{ .SendTrain_body_right table{
width: 100%; width: 100%;
border-left: 1px solid black;
border-right: 1px solid black; border-right: 1px solid black;
background-color: #eaeeec;
} }
.title{ .title{
font-size: 25px; font-size: 21px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.questiontitle{ /* 选择题 */
font-size: 20px; .Trainbox_xz{
background-color: #fff;
} }
.Trainbox{ .chapter{
background-color: rgb(166, 161, 161); color: #5cc1b9;
font-size: 18px;
font-weight: 550;
float: right;
padding-right: 10px;
padding-top: 5px;
}
.questiontitle_xz{
padding-top: 15px;
padding-left: 10px;
font-size: 17px;
}
.Train_answer_box{
padding-top: 5px;
padding-left: 27px;
}
.Train_answer_box tr{
line-height: 40px;
}
.check_box_xz{
width: 100px;
height: 30px;
float: right;
margin-right: 20px;
margin-top: -20px;
display: flex;
align-items: center;
}
.check_box_xz input{
height: 15px;
width: 15px;
}
.check_box_xz span{
font-size: 18px;
margin-top: -2px;
}
/* 填空题 */
.Trainbox_tk{
background-color: #fff;
}
.chapter_tk{
color: #5cc1b9;
font-size: 16px;
font-weight: 550;
float: right;
padding-right: 10px;
padding-top: 5px;
}
.questiontitle_tk{
padding-top: 15px;
padding-left: 10px;
font-size: 16px;
line-height: 25px;
}
.check_box_tk{
width: 100px;
height: 40px;
float: right;
margin-right: 10px;
margin-top: -20px;
display: flex;
align-items: center;
}
.check_box_tk input{
width: 15px;
height: 15px;
}
.check_box_tk span{
font-size: 16px;
margin-top: -2px;
}
/* 判断题 */
.Trainbox_pd{
background-color: #fff;
padding-top: 20px;
}
.chapter_pd{
color: #5cc1b9;
font-size: 16px;
font-weight: 550;
float: right;
padding-right: 10px;
margin-top: -10px;
} }
.judgetitle{ .judgetitle{
font-size: 20px; font-size: 16px;
background-color: rgb(166, 161, 161);
} }
.check_box_pd{
width: 100px;
float: right;
margin-right: 10px;
margin-bottom: 5px;
display: flex;
align-items: center;
}
.check_box_pd input{
width: 15px;
height: 15px;
}
.check_box_pd span{
font-size: 16px;
margin-top: -2px;
}
/* 以下为为实训 */ /* 以下为为实训 */
.Train_div{ .Train_div{

View File

@ -78,12 +78,10 @@ function SendTrain(){
StopTime, StopTime,
selectedItems, selectedItems,
Train, Train,
teacher_ID, teacher_ID
startDate,
endDate
}) })
alert('发布成功') alert('发布成功')
window.location.href='/teacher/trainmanage' window.location.href='http://localhost:3000/teacher/trainmanage'
}catch{ }catch{
alert('SendTrainTest出错') alert('SendTrainTest出错')
@ -92,7 +90,7 @@ function SendTrain(){
const SendTrainBtn=()=>{ const SendTrainBtn=()=>{
if(selectedItems.length>0 && (HourValue || MinValue)){ if(selectedItems.length>0 && (HourValue || MinValue)&&StopTime){
if(Train.length>0){ if(Train.length>0){
SendTrainTest() SendTrainTest()
}else{ }else{
@ -173,23 +171,24 @@ function SendTrain(){
{Trainquestion &&<table> {Trainquestion &&<table>
<span className='title'>选择题</span> <span className='title'>选择题</span>
<tbody> <tbody>
{Object.keys(Trainquestion['choice']).map((key)=>( {Object.keys(Trainquestion['choice']).map((key,index)=>(
<tr key={key}> <tr key={key}>
{/* 章节切换⬇ */} {/* 章节切换⬇ */}
<td className='Trainbox'> <td className='Trainbox_xz'>
<div>{Trainquestion['choice'][key][8]}</div> <div className='chapter'>{Trainquestion['choice'][key][8]}</div>
<tr> <tr>
<td className='questiontitle'>.{Trainquestion['choice'][key][1]}</td> <td className='questiontitle_xz'>{index+1}.{Trainquestion['choice'][key][1]}</td>
</tr> </tr>
<tr> <tr>
<div className='Train_answer_box'> <div className='Train_answer_box'>
<tr>A:{Trainquestion['choice'][key][2]}</tr> <tr>A.{Trainquestion['choice'][key][2]}</tr>
<tr>B:{Trainquestion['choice'][key][3]}</tr> <tr>B.{Trainquestion['choice'][key][3]}</tr>
<tr>C:{Trainquestion['choice'][key][4]}</tr> <tr>C.{Trainquestion['choice'][key][4]}</tr>
<tr>D:{Trainquestion['choice'][key][5]}</tr> <tr>D.{Trainquestion['choice'][key][5]}</tr>
</div> </div>
</tr> </tr>
<input type="checkbox" className='check_box' onClick={(event)=>{ <div className='check_box_xz'>
<input type="checkbox" onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
//ID //ID
setTrainChoice(items=>([ setTrainChoice(items=>([
@ -203,18 +202,20 @@ function SendTrain(){
} }
}} /> }} />
<span>是否选择</span> <span>是否选择</span>
</div>
</td> </td>
</tr> </tr>
))} ))}
<span className='title'>填空题</span> <span className='title'>填空题</span>
{Object.keys(Trainquestion['completion']).map((key)=>( {Object.keys(Trainquestion['completion']).map((key,index)=>(
<tr key={key}> <tr key={key}>
<td className='Trainbox'> <td className='Trainbox_tk'>
{Trainquestion['completion'][key][4]} <div className='chapter_tk'>{Trainquestion['completion'][key][4]}</div>
<td className='questiontitle'> <td className='questiontitle_tk'>
.{Trainquestion['completion'][key][1]} {index+1}.{Trainquestion['completion'][key][1]}
</td> </td>
<input type="checkbox" className='check_box' onClick={(event)=>{ <div className='check_box_tk'>
<input type="checkbox" onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
//ID //ID
setTrainCompletion(items=>([ setTrainCompletion(items=>([
@ -228,16 +229,18 @@ function SendTrain(){
} }
}} /> }} />
<span>是否选择</span> <span>是否选择</span>
</div>
</td> </td>
</tr> </tr>
))} ))}
<span className='title'>判断题</span> <span className='title'>判断题</span>
{Object.keys(Trainquestion['judge']).map((key)=>( {Object.keys(Trainquestion['judge']).map((key,index)=>(
<tr key={key}> <tr key={key}>
<td className='Trainbox'> <td className='Trainbox_pd'>
{Trainquestion['judge'][key][4]} <div className='chapter_pd'>{Trainquestion['judge'][key][4]}</div>
<td className='judgetitle'>:{Trainquestion['judge'][key][1]}</td> <td className='judgetitle'>{index+1}.{Trainquestion['judge'][key][1]}</td>
<input type="checkbox" className='check_box' onClick={(event)=>{ <div className='check_box_pd'>
<input type="checkbox" onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
setTrainJudge(items=>([ setTrainJudge(items=>([
...items, ...items,
@ -250,6 +253,7 @@ function SendTrain(){
} }
}} /> }} />
<span>是否选择</span> <span>是否选择</span>
</div>
</td> </td>
</tr> </tr>
))} ))}

View File

@ -25,11 +25,10 @@
const teacher_ID=localStorage.getItem('islogin') const teacher_ID=localStorage.getItem('islogin')
if(teacher_ID==null){ if(teacher_ID==null){
alert('登录过期,请重新登录') alert('登录过期,请重新登录')
window.location.href='/signin' window.location.href='http://36.138.114.105:30294/'
} }
// //
const class_succeed = async () => { const class_succeed = async () => {
try{ try{
const class_scr=await axios.post('/api/teacher/find_student',{key}) const class_scr=await axios.post('/api/teacher/find_student',{key})
@ -113,13 +112,14 @@
setname(classdata[item][0]); setname(classdata[item][0]);
}; };
return( return(
<div className='body-right-classId'> <div className='body-right-classId'>
<div id='body-right-bottom'> <div id='body-right-bottom'>
<h3>班级信息</h3> <h3>班级信息</h3>
<div id='body-right-bottom-left'> <div id='body-right-bottom-left'>
<div id='body-right-bottom-left-nav'> <div id='body-right-bottom-left-nav'>
<p style={{ display: 'flex', justifyContent: 'space-between' }}> <p style={{ display: 'flex', justifyContent: 'space-between',fontSize:'18px',color:'#457e98' }}>
<span style={{ flex: 1 }}>班级</span> <span style={{ flex: 1 }}>班级</span>
<span style={{ flex: 1 }}>姓名</span> <span style={{ flex: 1 }}>姓名</span>
<span style={{ flex: 1 }}>学号</span> <span style={{ flex: 1 }}>学号</span>
@ -140,7 +140,7 @@
<td className='box-content'>{classdata[item][3]}</td> <td className='box-content'>{classdata[item][3]}</td>
<td className='box-content'>{classdata[item][5]}</td> <td className='box-content'>{classdata[item][5]}</td>
<td className='box-content'>{formatDate(classdata[item][4])}</td> <td className='box-content'>{formatDate(classdata[item][4])}</td>
<td className='box-content'><button onClick={(e)=>handleClick(item)} style={{border:'none'}}>查看详情</button></td> <td className='box-content1'><button onClick={(e)=>handleClick(item)} className='btn-ckxq'>查看详情</button></td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@ -149,10 +149,29 @@
</div> </div>
</div> </div>
<div className='body-test-score'> <div className='body-test-score'>
<h3>成绩</h3> {/* <h3>成绩</h3> */}
<div className='body-test-score-bar'> <div className='body-test-score-bar'>
{name&&<div className='studentName'>已选中{name}</div>} {/* <button onClick={click}>测试</button> */}
<button onClick={click}>测试</button> <div style={{ width: '610px', height: '350px',position:'absolute',top:'20px',left:'20px', backgroundColor: '#fff',display:'flex',alignItems:'center',justifyContent:'center' }}>
{studentScores.length > 0 ? (
<BarChart width={600} height={350} data={studentScores} barSize={80} className='bar' >
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis dataKey="score" />
<Tooltip active='false'/>
<Bar dataKey="score" fill="#fdf0d3" />
</BarChart>
):(
<p>请选择学生和科目</p>
)}
</div>
</div>
<div className='choice-box'>
<div className='studentmassage'>
{name&&<div className='studentName'>学生{name}</div>}
{/* <p>学生成绩:</p> */}
</div>
<select onChange={handleSubjectChange} id='selectvalue'> <select onChange={handleSubjectChange} id='selectvalue'>
<option value="">请选择科目</option> <option value="">请选择科目</option>
<option value="Chinese">语文</option> <option value="Chinese">语文</option>
@ -160,15 +179,6 @@
<option value="English">英语</option> <option value="English">英语</option>
<option value="Train">实训</option> <option value="Train">实训</option>
</select> </select>
<div className='table-bar'>
<BarChart width={600} height={350} data={studentScores} barSize={80} className='bar' >
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis dataKey="score"/>
<Tooltip />
<Bar dataKey="score" fill="#ffeed4" />
</BarChart>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,5 +1,6 @@
.body-right-classId{ .body-right-classId{
width: 1420px; /* width: 1420px; */
width: 86.3%;
height: 830px; height: 830px;
position: absolute; position: absolute;
top: 72px; top: 72px;
@ -18,11 +19,12 @@
#body-right-bottom h3{ #body-right-bottom h3{
position: absolute; position: absolute;
top: -50px; top: -50px;
color: #236b76;
} }
#body-right-bottom-left{ #body-right-bottom-left{
width: 1200px; width: 1200px;
height: 360px; height: 320px;
background-color: #b19bc6; background-color: #bef1f4;
position: absolute; position: absolute;
} }
#body-right-bottom-left-nav{ #body-right-bottom-left-nav{
@ -33,12 +35,15 @@
} }
#body-right-bottom span{ #body-right-bottom span{
text-align: center; text-align: center;
font-weight: 550;
} }
#body-right-student-box{ #body-right-student-box{
width: 1150px; width: 1150px;
height: 280px; height: 240px;
border: 1px black solid; border: 1px rgb(70, 188, 199) solid;
background-color: #fff;
/* background-color: #dff9fd; */
margin-left: 25px; margin-left: 25px;
position: absolute; position: absolute;
top: 50px; top: 50px;
@ -46,61 +51,106 @@
#body-right-student-box table { #body-right-student-box table {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* background-color: #dff9fd; */
} }
#body-right-student-box tr { #body-right-student-box tr {
display: flex; display: flex;
align-items: center; /* 垂直居中 */ align-items: center; /* 垂直居中 */
} }
#body-right-student-box td { #body-right-student-box td {
padding: 10px; padding: 15px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #5aafbc;
text-align: center; text-align: center;
line-height: 30px;
} }
.box-content { .box-content {
flex: 1; /* 占据剩余空间 */ flex: 1; /* 占据剩余空间 */
color: #236b76;
}
.box-content1 {
flex: 1; /* 占据剩余空间 */
}
/* 查看详情按钮 */
.btn-ckxq{
border: none;
height: 30px;
width: 100px;
background-color: #85cad4;
color: #fff;
font-size: 16px;
}
.btn-ckxq:visited{
color: #5aafbc;
} }
/* 画像 */
.body-test-score{ .body-test-score{
width: 1200px; width: 650px;
height: 370px; height: 390px;
position: absolute; position: absolute;
top: 440px; top: 390px;
left: 110px; left: 150px;
background-color: #bfd1f6; background-color: #bfd1f6;
border-radius: 10px;
} }
.body-test-score h3{ .body-test-score-bar p{
position: absolute; width: 250px;
top: -50px; height: 60px;
font-size: 25px;
text-align: center;
line-height: 60px;
border-bottom: 2px double #95aee0;
} }
.body-test-score-bar select{ /* 柱形图 */
.bar{
position: absolute;
top: 10px;
left: -20px;
}
/* 学生详情 */
.choice-box{
height: 300px;
width: 400px;
background-color: #cddbf3;
/* background-color: #a4cdf8; */
position: absolute;
top: 30px;
left: 720px;
box-shadow:
inset 0 0 0 2px #fdfdfd, /* 外边框颜色 */
inset 0 0 0 6px #ffffff;
border: 5px double #bfd1f6;
}
.choice-box select{
height: 40px; height: 40px;
width: 120px; width: 120px;
font-size: 15px; font-size: 15px;
margin-top: 20px; margin-top: 20px;
margin-left: 10px; margin-left: 10px;
border: 1px solid #a1c1f4; border: 5px solid #bdcbe3;
outline-color:#a1c1f4; outline-color:#8891a4;
color: rgb(122, 122, 122); color: #4e5f7c;
position: absolute; position: absolute;
top: -5px; top: -5px;
left: 920px; left: 20px;
} }
.studentmassage{
.table-bar{ width: 300px;
width: 640px; height: 200px;
/* background-color: #fff; */
position: absolute; position: absolute;
top: 10px; top: 70px;
left: 250px; left: 30px;
border-radius: 15px; display: flex;
background-color: #fff;
} }
.bar{ .studentmassage p{
font-size: 18px;
position: absolute; position: absolute;
top: 10px; top: 15px;
left: 0px;
} }
.studentName{ .studentName{
margin-top: 20px;
font-size: 18px; font-size: 18px;
margin-left: 50px;
} }

View File

@ -7,6 +7,7 @@ import Send from "../pages/Home/img/test.jpg"
import Set from '../pages/Home/img/setting.jpg' import Set from '../pages/Home/img/setting.jpg'
import Mark from '../pages/Home/img/correct.jpg' import Mark from '../pages/Home/img/correct.jpg'
import Logo from '../pages/Home/img/logo.jpg' import Logo from '../pages/Home/img/logo.jpg'
import Question from '../pages/Home/img/question.jpg'
// //
function HeaderNavTeacher() { function HeaderNavTeacher() {
@ -59,7 +60,7 @@ function HeaderNavTeacher() {
</div> </div>
<div className='left-nav-li'> <div className='left-nav-li'>
<ul> <ul>
{[{name:'班级管理',path:'/teacher',ImgSrc:ClassManage},{name:'实训管理',path:'/teacher/trainmanage',ImgSrc:Send},{name:'批改',path:'/teacher/mark',ImgSrc:Mark},{name:'考试管理',path:'/teacher/managetest',ImgSrc:SubjectManage},{name:'设置',ImgSrc:Set,onClick:handleSettingsClick}].map((item)=> {[{name:'班级管理',path:'/teacher',ImgSrc:ClassManage},{name:'实训管理',path:'/teacher/trainmanage',ImgSrc:Send},{name:'批改',path:'/teacher/mark',ImgSrc:Mark},{name:'考试管理',path:'/teacher/managetest',ImgSrc:SubjectManage},{name:'题库管理',path:'questionmange',ImgSrc:Question},{name:'设置',ImgSrc:Set,onClick:handleSettingsClick}].map((item)=>
<li onClick={item.onClick}> <li onClick={item.onClick}>
<div className='nav-li-box'> <div className='nav-li-box'>
<Link to={item.path} className="custom-link-home" style={{color:'black'}}> <Link to={item.path} className="custom-link-home" style={{color:'black'}}>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -14,7 +14,6 @@
display: flex; display: flex;
align-content: center; align-content: center;
padding: 75px; padding: 75px;
/* border: 10px solid ; */
box-shadow: 0px -20px 20px 0px rgba(131, 244, 254, 0.6), 0 20px 20px 2px rgba(229, 210, 255, 0.6); box-shadow: 0px -20px 20px 0px rgba(131, 244, 254, 0.6), 0 20px 20px 2px rgba(229, 210, 255, 0.6);
} }

View File

@ -28,6 +28,7 @@ import TrainManage from '../TeacherPages/Trainmanage/Trainmanage'
import StudentLink from '../TeacherPages/MarkingPages/StudentLink'; import StudentLink from '../TeacherPages/MarkingPages/StudentLink';
import Test from '../TeacherPages/TestManage/Test' import Test from '../TeacherPages/TestManage/Test'
import TrainPods from '../TeacherPages/Trainmanage/TrainPods' import TrainPods from '../TeacherPages/Trainmanage/TrainPods'
import Questionmange from '../TeacherPages/Questionmanage/questionmanage'
// (exam)使 // (exam)使
@ -66,6 +67,7 @@ function App() {
<Route path="classID/:key" element={<ClassID />} /> {/* 班级管理1 */} <Route path="classID/:key" element={<ClassID />} /> {/* 班级管理1 */}
<Route path='mark/studentlink/Mark/:key' element={<StudentLink/>}/> {/* 批改1 */} <Route path='mark/studentlink/Mark/:key' element={<StudentLink/>}/> {/* 批改1 */}
<Route path='trainmanage/TrainPods' element={<TrainPods/> }/> <Route path='trainmanage/TrainPods' element={<TrainPods/> }/>
<Route path='questionmange' element={<Questionmange/>}/>
{/* 其他需要HeaderNavTeacher的页面 */} {/* 其他需要HeaderNavTeacher的页面 */}
</Route> </Route>