This commit is contained in:
30404 2024-07-07 15:26:08 +08:00
commit c3be58098d
9 changed files with 264 additions and 210 deletions

View File

@ -10,44 +10,50 @@
background-color: #f7f8fa; background-color: #f7f8fa;
} }
#view_history{ #view_history{
margin-left: 100px; width: 1100px;
width: 1200px; height: 520px;
height: 350px; background-color: rgb(175, 235, 217);
background-color: aqua; position: absolute;
margin-top: 100px; top: 60px;
left: 125px;
padding-left: 60px;
padding-top: 10px;
} }
#view_history_nav{ #view_history_nav{
border-bottom: 1px solid black; border-bottom: 1px solid black;
width: 850px; width: 935px;
font-size: 18px;
text-align: center; text-align: center;
padding-bottom: 5px;
} }
.view_history_content{
width: 850px; #class_list{
text-align: center;
}
#class_portrait{
position: absolute; position: absolute;
width: 330px; }
height: 300px; #class_list select{
margin-left: 860px; width: 100px;
margin-top: 10px; height:40px;
background-color: rgb(112, 80, 227); font-size: 20px;
position: absolute;
left: 970px;
top: -30px;
border: 3px solid #f6fffd;
}
.view_history_content{
width: 940px;
font-size: 17px;
padding: 5px 0;
line-height: 35px;
text-align: center;
} }
#view_history_box{ #view_history_box{
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
height: 550px; height: 450px;
width: 850px; width: 940px;
background-color: antiquewhite; /* background-color: antiquewhite; */
} background-color: #f6fffc;
#class_list{
position: absolute;
margin-left: 975px;
margin-top: -20px;
}
#class_list select{
font-size: 20px;
border: none;
} }
#body_bottom{ #body_bottom{
@ -58,18 +64,14 @@
margin-top: 20px; margin-top: 20px;
} }
#sendtest_btn{ #sendtest_btn{
font-size: 30px; height: 50px;
margin-left: 30px; width: 300px;
font-size: 25px;
margin-left: 800px;
margin-top: 100px; margin-top: 100px;
border: none;
} background-color: rgb(249, 236, 204);
#body_bottom_right{ border: 1px solid #e8caa9;
width: 350px;
height: 220px;
background-color: darkolivegreen;
position: absolute;
margin-left: 850px;
margin-top:-220px;
} }
#view_history_table td{ #view_history_table td{
border-bottom: 1px solid black; border-bottom: 1px solid black;
@ -77,6 +79,8 @@
#view_history_table tr{ #view_history_table tr{
cursor: pointer; cursor: pointer;
} }
/* 弹窗 */
#detailed{ #detailed{
margin-left: 390px; margin-left: 390px;
margin-top: 180px; margin-top: 180px;
@ -84,13 +88,15 @@
height: 400px; height: 400px;
border: 1px solid black; border: 1px solid black;
position: absolute; position: absolute;
background-color: rgb(175, 25, 234); background-color: #fef9dd;
z-index: 2; z-index: 2;
} }
#splitter{ #splitter{
width: 590; width: 590;
border-bottom: 1px solid black; border-bottom: 1px solid black;
text-align: center; text-align: center;
font-size: 20px;
padding-bottom: 10px;
} }
#return{ #return{
position: absolute; position: absolute;
@ -98,9 +104,12 @@
font-size: 20px; font-size: 20px;
margin-top: -10px; margin-top: -10px;
cursor: pointer; cursor: pointer;
color: rgb(68, 125, 106);
} }
#detailed span{ #detailed span{
text-align: center; text-align: center;
line-height: 5px;
padding-top: 5px;
} }
#detailed_box_tr{ #detailed_box_tr{
width: 600px; width: 600px;
@ -108,9 +117,10 @@
} }
#detailed_box{ #detailed_box{
height: 270px; height: 270px;
width: 600px; width: 590px;
line-height: 30px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
margin-top: -10px; margin-top: -25px;
margin-left: -3px; /* margin-left: px; */
} }

View File

@ -105,7 +105,7 @@ function TeacherPage() {
return ( return (
<div className='body-right-manage'> <div className='body-right-manage'>
{/* 详细信息 */} {/* 详细信息(弹窗) */}
{isDetailedBoxVisible && <div id='detailed'> {isDetailedBoxVisible && <div id='detailed'>
<p id='splitter'>试卷ID{testID}<span id='return' onClick={return_detailed}>X</span></p> <p id='splitter'>试卷ID{testID}<span id='return' onClick={return_detailed}>X</span></p>
<p style={{display:'flex'}}> <p style={{display:'flex'}}>
@ -116,11 +116,14 @@ function TeacherPage() {
</p> </p>
<div> <div>
<p>--------------------------------------------------------------------------------------</p> <p>--------------------------------------------------------------------------------------</p>
{detaileddata&&<table> {detaileddata&&<tbody>
<tbody>
<div id='detailed_box'> <div id='detailed_box'>
{Object.keys(detaileddata).map((key)=>( {Object.keys(detaileddata).map((key, index)=>(
<tr style={{display:'flex'}} id='detailed_box_tr'> <tr style={{
display: 'flex',
backgroundColor: index % 2 === 0 ? '#fef9dd':'#fdf2b3' //
}}
id='detailed_box_tr'>
<td style={{ flex: 1 }}>{detaileddata[key][6]}</td> <td style={{ flex: 1 }}>{detaileddata[key][6]}</td>
<td style={{ flex: 1 }}>{detaileddata[key][5] ? detaileddata[key][5] : "未完成"}</td> <td style={{ flex: 1 }}>{detaileddata[key][5] ? detaileddata[key][5] : "未完成"}</td>
<td style={{ flex: 1 }}>{detaileddata[key][5] ? `${getRandomNumber()}%` : "未完成"}</td> <td style={{ flex: 1 }}>{detaileddata[key][5] ? `${getRandomNumber()}%` : "未完成"}</td>
@ -128,8 +131,7 @@ function TeacherPage() {
</tr> </tr>
))} ))}
</div> </div>
</tbody> </tbody>}
</table>}
</div> </div>
</div>} </div>}
{/* 总体信息 */} {/* 总体信息 */}
@ -151,11 +153,6 @@ function TeacherPage() {
<option key={key} value={key}>{key}</option> <option key={key} value={key}>{key}</option>
))} ))}
</select> </select>
</div>
<div id='class_portrait'>
{/* 班级画像 */}
</div> </div>
<div id='view_history_box'> <div id='view_history_box'>
{ defaultclass &&<table id='view_history_table'> { defaultclass &&<table id='view_history_table'>
@ -175,11 +172,9 @@ function TeacherPage() {
</tbody> </tbody>
</table>} </table>}
</div> </div>
<div id='body_bottom_right'>
<Link to="/teacher/sendtest"><button id='sendtest_btn'>前往发布新的考试</button></Link> <Link to="/teacher/sendtest"><button id='sendtest_btn'>前往发布新的考试</button></Link>
</div> </div>
</div> {/* <button onClick={click}>测试</button> */}
<button onClick={click}>测试</button>
</div> </div>
); );
} }

View File

@ -18,29 +18,9 @@
margin-bottom: 0px; margin-bottom: 0px;
} }
/* 选择题 */ /* 选择题 */
.Trainbox_xz{ .Testbox_xz{
background-color: #fff; background-color: #fff;
} }
.chapter{
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;
}
.Test_answer_box{
padding-top: 5px;
padding-left: 27px;
}
.Test_answer_box tr{
line-height: 40px;
}
.check_box_xz{ .check_box_xz{
width: 100px; width: 100px;
height: 30px; height: 30px;
@ -204,6 +184,7 @@
text-align: center; text-align: center;
margin-left: 7px; margin-left: 7px;
border-radius: 20px; border-radius: 20px;
margin-top: 20px;
} }
.TestSelectTime p{ .TestSelectTime p{
padding-top: 25px; padding-top: 25px;

View File

@ -128,22 +128,27 @@ function SendTest(){
</li> </li>
</ul> </ul>
</div> </div>
<div className='SendTest_body'> <div className='SendTest_body_right'>
<p>题目选择</p> <p>题目选择</p>
{question&&<table> {question&&<table>
<span className='title'>选择题</span> <span className='title'>选择题</span>
{Object.keys(question['choice']).map((key)=>( <tbody>
{Object.keys(question['choice']).map((key,index)=>(
<tr key={key}> <tr key={key}>
<div>{question['choice'][key][8]}</div> <td className='Testbox_xz'>
<div className='chapter'>{question['choice'][key][8]}</div>
<tr> <tr>
<td className='questiontitle'>.{question['choice'][key][1]}</td> <td className='Train_answer_box'>{index+1}.{question['choice'][key][1]}</td>
</tr> </tr>
<tr>
<div className='Train_answer_box'> <div className='Train_answer_box'>
<tr>A:{question['choice'][key][2]}</tr> <tr>A.{question['choice'][key][2]}</tr>
<tr>B:{question['choice'][key][3]}</tr> <tr>B.{question['choice'][key][3]}</tr>
<tr>C:{question['choice'][key][4]}</tr> <tr>C.{question['choice'][key][4]}</tr>
<tr>D:{question['choice'][key][5]}</tr> <tr>D.{question['choice'][key][5]}</tr>
</div> </div>
</tr>
<div className='check_box_xz'>
<input type="checkbox" className='check_box' onClick={(event)=>{ <input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
//ID //ID
@ -156,17 +161,21 @@ function SendTest(){
items.filter((item)=>item!==question['choice'][key][7]) items.filter((item)=>item!==question['choice'][key][7])
) )
} }
}} /><span>是否选择</span> }} />
<span>是否选择</span>
</div>
</td>
</tr> </tr>
))} ))}
<span className='title'>填空题</span> <span className='title'>填空题</span>
{Object.keys(question['completion']).map((key)=>( {Object.keys(question['completion']).map((key,index)=>(
<tr key={key}> <tr key={key}>
<td className='Testbox'> <td className='Testbox_tk'>
{question['completion'][key][4]} <div className='chapter_tk'>{question['completion'][key][4]}</div>
<td className='questiontitle'> <td className='questiontitle_tk'>
.{question['completion'][key][1]} {index+1}.{question['completion'][key][1]}
</td> </td>
<div className='check_box_tk'>
<input type="checkbox" className='check_box' onClick={(event)=>{ <input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
//ID //ID
@ -179,16 +188,19 @@ function SendTest(){
items.filter((item)=>item!==question['completion'][key][3]) items.filter((item)=>item!==question['completion'][key][3])
) )
} }
}} /><span>是否选择</span> }} />
<span>是否选择</span>
</div>
</td> </td>
</tr> </tr>
))} ))}
<span className='title'>判断题</span> <span className='title'>判断题</span>
{Object.keys(question['judge']).map((key)=>( {Object.keys(question['judge']).map((key,index)=>(
<tr key={key}> <tr key={key}>
<td className='Testbox'> <td className='Testbox_pd'>
{question['judge'][key][4]} <div className='chapter_pd'>{question['judge'][key][4]}</div>
<td className='judgetitletd'>:{question['judge'][key][1]}</td> <td className='judgetitle'>{index+1}.{question['judge'][key][1]}</td>
<div className='check_box_pd'>
<input type="checkbox" className='check_box' onClick={(event)=>{ <input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
setJudge(items=>([ setJudge(items=>([
@ -200,21 +212,22 @@ function SendTest(){
items.filter((item)=>item!==question['judge'][key][3]) items.filter((item)=>item!==question['judge'][key][3])
) )
} }
}} /><span>是否选择</span> }} />
<span>是否选择</span>
</div>
</td> </td>
</tr> </tr>
))} ))}
</tbody>
</table>} </table>}
<button onClick={SendTrainBtn} id='SendTrainBtn'>发布按钮</button> <button onClick={SendTrainBtn} id='SendTrainBtn'>发布按钮</button>
</div> </div>
{/* 右边的内容 */} {/* 右边的内容 */}
<div className='right_right'> <div className='right_right'>
<div className='OptionBox'> <div className='OptionBox'>
<div className='TrainSelectClass'> <div className='TestSelectClass'>
<p className='TrainSelectClassP'>请选择发布班级</p> <p className='TestSelectClassP'>请选择发布班级</p>
{ ClassData &&<ul id='Train_class_ul'> { ClassData &&<ul id='Test_class_ul'>
{Object.keys(ClassData).map((key)=>( {Object.keys(ClassData).map((key)=>(
<li key={key}> <li key={key}>
<div className={getClassNames(key)} onClick={() => click_div(key)}> <div className={getClassNames(key)} onClick={() => click_div(key)}>
@ -224,10 +237,10 @@ function SendTest(){
))} ))}
</ul>} </ul>}
</div> </div>
<div className='TrainSelectTime'> <div className='TestSelectTime'>
<button onClick={()=>{ {/* <button onClick={()=>{
console.log(Choice); console.log(Choice);
}}></button> }}></button> */}
<p>请填写考试时间</p> <p>请填写考试时间</p>
<select name="" id="" alue={HourValue} onChange={gethourvalue}> <select name="" id="" alue={HourValue} onChange={gethourvalue}>
{Object.keys(hour_list).map((num)=>( {Object.keys(hour_list).map((num)=>(

View File

@ -118,10 +118,10 @@
padding-top: 5px; padding-top: 5px;
} }
.questiontitle_tk{ .questiontitle_tk{
padding-top: 15px; padding-top: 18px;
padding-left: 10px; padding-left: 10px;
font-size: 16px; font-size: 16px;
line-height: 25px; line-height: 20px;
} }
.check_box_tk{ .check_box_tk{
width: 100px; width: 100px;
@ -153,10 +153,13 @@
font-weight: 550; font-weight: 550;
float: right; float: right;
padding-right: 10px; padding-right: 10px;
margin-top: -10px; padding-top: 5px;
} }
.judgetitle{ .judgetitle{
padding-top: 8px;
padding-left: 10px;
font-size: 16px; font-size: 16px;
line-height: 10px;
} }
.check_box_pd{ .check_box_pd{
width: 100px; width: 100px;
@ -180,43 +183,64 @@
/* 以下为为实训 */ /* 以下为为实训 */
.Train_div{ .Train_div{
width: 100%-1px; width: 100%-1px;
height:700px; height:690px;
border: 1px solid black; border-top: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: none; border-top: none;
} }
#Train_1{ #Train_1{
width: 100%; width: 100%;
height: 350px; height: 280px;
display: flex; display: flex;
} }
.Train_1_left{ .Train_1_left{
flex: 60%; flex: 60%;
background-color: beige; background-color: rgb(250, 250, 220);
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
padding-top: 120px; padding-top: 120px;
} }
.Train_1_right{ .Train_1_right{
flex: 40%; flex: 40%;
background-color: rgb(111, 200, 241); /* background-color: rgb(143, 230, 250); */
background-color: #befdee;
display: flex;
align-items: center;
} }
.Train_1_right span{
padding-bottom: 130px;
}
.Train_1_right input{
height: 15px;
width: 15px;
}
.Train_1_right p{
font-size: 20px;
border: none;
padding-left: 20px;
margin-top: -28px;
margin-left: 5px;
}
#Train_2{ #Train_2{
width: 100%; width: 100%;
height: 350px; height: 280px;
display: flex; display: flex;
} }
.Train_2_left{ .Train_2_left{
flex: 60%; flex: 60%;
background-color: rgb(97, 237, 92); background-color: rgb(173, 246, 169);
font-size: 20px; font-size: 20px;
text-align: center; text-align: center;
padding-top: 120px; padding-top: 120px;
} }
.Train_2_right{ .Train_2_right{
flex: 40%; flex: 40%;
background-color: rgb(248, 127, 231); /* background-color: rgb(254, 175, 243); */
background-color: #fcefcf;
} }
.Train_1_right span{ .Train_1_right span{
font-size: 20px; font-size: 20px;
@ -236,7 +260,7 @@
height: 40px; height: 40px;
width: 130px; width: 130px;
font-size: 25px; font-size: 25px;
margin-top: 40px; margin-top: 60px;
margin-bottom: 40px; margin-bottom: 40px;
margin-left: 900px; margin-left: 900px;
background-color: #9acec2; background-color: #9acec2;

View File

@ -139,24 +139,9 @@ function SendTrain(){
const [startDate, setStartDate] = useState(new Date()); const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date()); const [endDate, setEndDate] = useState(new Date());
const [duration, setDuration] = useState(null); const [duration, setDuration] = useState(null);
const [scrollPosition, setScrollPosition] = useState(0);
// //
const handleStartDateChange = (date) => { const handleStartDateChange = (date) => {
setStartDate(date); setStartDate(date);
//
if (startDate && date) {
const diffInMilliseconds = date - startDate;
const diffInDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
const diffInHours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const diffInMinutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
let durationText = '';
if (diffInDays > 0) durationText += `${diffInDays}`;
if (diffInHours > 0 || diffInDays > 0) durationText += `${diffInHours}小时`;
durationText += `${diffInMinutes}分钟`;
setDuration(durationText);
} else {
setDuration('请选择考试结束日期');
}
}; };
// //
const handleEndDateChange = (date) => { const handleEndDateChange = (date) => {
@ -204,7 +189,7 @@ function SendTrain(){
</div> </div>
</tr> </tr>
<div className='check_box_xz'> <div className='check_box_xz'>
<input type="checkbox" onClick={(event)=>{ <input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
//ID //ID
setTrainChoice(items=>([ setTrainChoice(items=>([
@ -231,7 +216,7 @@ function SendTrain(){
{index+1}.{Trainquestion['completion'][key][1]} {index+1}.{Trainquestion['completion'][key][1]}
</td> </td>
<div className='check_box_tk'> <div className='check_box_tk'>
<input type="checkbox" onClick={(event)=>{ <input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
//ID //ID
setTrainCompletion(items=>([ setTrainCompletion(items=>([
@ -256,7 +241,7 @@ function SendTrain(){
<div className='chapter_pd'>{Trainquestion['judge'][key][4]}</div> <div className='chapter_pd'>{Trainquestion['judge'][key][4]}</div>
<td className='judgetitle'>{index+1}.{Trainquestion['judge'][key][1]}</td> <td className='judgetitle'>{index+1}.{Trainquestion['judge'][key][1]}</td>
<div className='check_box_pd'> <div className='check_box_pd'>
<input type="checkbox" onClick={(event)=>{ <input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
setTrainJudge(items=>([ setTrainJudge(items=>([
...items, ...items,
@ -293,7 +278,8 @@ function SendTrain(){
setTrain((items)=> setTrain((items)=>
items.filter((item)=>item!==event.target.value)) items.filter((item)=>item!==event.target.value))
} }
}}/>是否选择 }}/>
<p>是否选择</p>
</span> </span>
</div> </div>
</div> </div>
@ -375,7 +361,16 @@ function SendTrain(){
</div> </div>
</div> </div>
<p>考试总时长</p> <p>考试总时长</p>
{duration || '请选择考试结束日期'} <select name="" id="" alue={HourValue} onChange={gethourvalue}>
{Object.keys(hour_list).map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>小时
<select name="" id="" alue={MinValue} onChange={getminvalue}>
{min_list.map((num)=>(
<option value={num} key={num}>{num}</option>
))}
</select>分钟
</div> </div>
</div> </div>
</div> </div>

View File

@ -63,24 +63,24 @@
} }
.sendtestpage{ .sendtestpage{
padding: 20px 30px; padding: 10px 30px;
font-size: 20px; font-size: 20px;
text-decoration: none; text-decoration: none;
color: #000; color: #000;
position: absolute; position: absolute;
bottom: 170px; bottom: 100px;
right: 100px; right: 50px;
background-color: rgb(186, 237, 237); background-color: rgb(186, 237, 237);
border-radius: 20px; border-radius: 20px;
} }
.ManagePods{ .ManagePods{
border-radius: 20px; border-radius: 20px;
position: absolute; position: absolute;
padding: 20px 30px; padding: 10px 30px;
text-decoration: none; text-decoration: none;
font-size: 20px; font-size: 20px;
color: #000; color: #000;
right: 300px; right: 220px;
bottom: 170px; bottom: 100px;
background-color: rgb(186, 237, 237); background-color: rgb(186, 237, 237);
} }

View File

@ -113,6 +113,41 @@ function TeacherPage() {
}; };
const CustomTooltip = ({ active, payload }) => {
if (active && payload && payload.length) {
// payload[0]
const data = payload[0].payload; // payload
return (
<div className="custom-tooltip" style={{ backgroundColor: '#fff', padding: '10px', border: '1px solid #ccc',width:'200px',height:'100px' }}>
<p className="label" style={labelStyle}>{`试卷ID: ${data.name}`}</p>
<p className="intro" style={introStyle}>{`分数: ${payload[0].value}`}</p>
</div>
);
}
return null;
};
const labelStyle = {
margin: '0', //
color: '#333', //
fontSize: '18px', //
width:'100px',
height:'40px',
marginLeft:'50px',
lineheight:'40px'
};
const introStyle = {
margin: '0', //
color: '#333', //
fontSize: '18px', //
width:'100px',
height:'40px',
marginLeft:'50px',
};
return( return(
<div className='body-right-classId'> <div className='body-right-classId'>
<div id='body-right-bottom'> <div id='body-right-bottom'>
@ -156,9 +191,9 @@ function TeacherPage() {
{studentScores.length > 0 ? ( {studentScores.length > 0 ? (
<BarChart width={600} height={350} data={studentScores} barSize={80} className='bar' > <BarChart width={600} height={350} data={studentScores} barSize={80} className='bar' >
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" /> <XAxis dataKey="name" tickFormatter={(value) => `试卷ID: ${value}`} />
<YAxis dataKey="score" /> <YAxis dataKey="score" />
<Tooltip active='false'/> <Tooltip content={<CustomTooltip />} />
<Bar dataKey="score" fill="#fdf0d3" /> <Bar dataKey="score" fill="#fdf0d3" />
</BarChart> </BarChart>
):( ):(

View File

@ -89,7 +89,7 @@
height: 390px; height: 390px;
position: absolute; position: absolute;
top: 390px; top: 390px;
left: 150px; left: 200px;
background-color: #bfd1f6; background-color: #bfd1f6;
border-radius: 10px; border-radius: 10px;
} }
@ -110,13 +110,12 @@
} }
/* 学生详情 */ /* 学生详情 */
.choice-box{ .choice-box{
height: 300px; height: 200px;
width: 400px; width: 300px;
background-color: #cddbf3; background-color: #cddbf3;
/* background-color: #a4cdf8; */
position: absolute; position: absolute;
top: 30px; top: 80px;
left: 720px; left: 730px;
box-shadow: box-shadow:
inset 0 0 0 2px #fdfdfd, /* 外边框颜色 */ inset 0 0 0 2px #fdfdfd, /* 外边框颜色 */
inset 0 0 0 6px #ffffff; inset 0 0 0 6px #ffffff;
@ -153,4 +152,6 @@
} }
.studentName{ .studentName{
font-size: 18px; font-size: 18px;
padding-top: 20px;
padding-left: 10px;
} }