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

View File

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

View File

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

View File

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

View File

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

View File

@ -139,24 +139,9 @@ function SendTrain(){
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
const [duration, setDuration] = useState(null);
const [scrollPosition, setScrollPosition] = useState(0);
//
const handleStartDateChange = (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) => {
@ -204,7 +189,7 @@ function SendTrain(){
</div>
</tr>
<div className='check_box_xz'>
<input type="checkbox" onClick={(event)=>{
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) {
//ID
setTrainChoice(items=>([
@ -231,7 +216,7 @@ function SendTrain(){
{index+1}.{Trainquestion['completion'][key][1]}
</td>
<div className='check_box_tk'>
<input type="checkbox" onClick={(event)=>{
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) {
//ID
setTrainCompletion(items=>([
@ -256,7 +241,7 @@ function SendTrain(){
<div className='chapter_pd'>{Trainquestion['judge'][key][4]}</div>
<td className='judgetitle'>{index+1}.{Trainquestion['judge'][key][1]}</td>
<div className='check_box_pd'>
<input type="checkbox" onClick={(event)=>{
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) {
setTrainJudge(items=>([
...items,
@ -293,7 +278,8 @@ function SendTrain(){
setTrain((items)=>
items.filter((item)=>item!==event.target.value))
}
}}/>是否选择
}}/>
<p>是否选择</p>
</span>
</div>
</div>
@ -375,7 +361,16 @@ function SendTrain(){
</div>
</div>
<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>

View File

@ -63,24 +63,24 @@
}
.sendtestpage{
padding: 20px 30px;
padding: 10px 30px;
font-size: 20px;
text-decoration: none;
color: #000;
position: absolute;
bottom: 170px;
right: 100px;
bottom: 100px;
right: 50px;
background-color: rgb(186, 237, 237);
border-radius: 20px;
}
.ManagePods{
border-radius: 20px;
position: absolute;
padding: 20px 30px;
padding: 10px 30px;
text-decoration: none;
font-size: 20px;
color: #000;
right: 300px;
bottom: 170px;
right: 220px;
bottom: 100px;
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(
<div className='body-right-classId'>
<div id='body-right-bottom'>
@ -156,9 +191,9 @@ function TeacherPage() {
{studentScores.length > 0 ? (
<BarChart width={600} height={350} data={studentScores} barSize={80} className='bar' >
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<XAxis dataKey="name" tickFormatter={(value) => `试卷ID: ${value}`} />
<YAxis dataKey="score" />
<Tooltip active='false'/>
<Tooltip content={<CustomTooltip />} />
<Bar dataKey="score" fill="#fdf0d3" />
</BarChart>
):(

View File

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