2312072104
/
dm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
nopy 2024-07-06 18:50:07 +08:00
parent 4b8313e859
commit c5d3383813
9 changed files with 234 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
app-dm/src/TeacherPages/TestManage/ManageTest.css
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,11 @@
margin-top: 20px; margin-top: 20px;
} }
#sendtest_btn{ #sendtest_btn{
font-size: 30px; height: 50px;
margin-left: 30px; width: 300px;
font-size: 28px;
margin-left: 830px;
margin-top: 100px; margin-top: 100px;
}
#body_bottom_right{
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;

11
app-dm/src/TeacherPages/TestManage/ManageTest.jsx
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'}}>
@ -151,11 +151,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 +170,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>
); );
} }

23
app-dm/src/TeacherPages/TestManage/SendTest.css
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;

169
app-dm/src/TeacherPages/TestManage/SendTest.jsx
View File

@ -116,35 +116,40 @@ function SendTest(){
return( return(
<div className='SendTrain_body'> <div className='SendTrain_body'>
<div className='SendTrain_body_left'> <div className='SendTrain_body_left'>
<h3>题目集</h3> <h3>题目集</h3>
<ul className='SendTrain_body_left_ul'> <ul className='SendTrain_body_left_ul'>
<li> <li>
<button>基础题</button> <button>基础题</button>
<ul style={{all:'unset'}} className='left-list-ul'> <ul style={{all:'unset'}} className='left-list-ul'>
<li>第一章</li> <li>第一章</li>
<li>第二章</li> <li>第二章</li>
</ul> </ul>
</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'>
<tr> <div className='chapter'>{question['choice'][key][8]}</div>
<td className='questiontitle'>问.{question['choice'][key][1]}</td> <tr>
</tr> <td className='Train_answer_box'>{index+1}.{question['choice'][key][1]}</td>
<div className='Train_answer_box'> </tr>
<tr>A:{question['choice'][key][2]}</tr> <tr>
<tr>B:{question['choice'][key][3]}</tr> <div className='Train_answer_box'>
<tr>C:{question['choice'][key][4]}</tr> <tr>A.{question['choice'][key][2]}</tr>
<tr>D:{question['choice'][key][5]}</tr> <tr>B.{question['choice'][key][3]}</tr>
</div> <tr>C.{question['choice'][key][4]}</tr>
<input type="checkbox" className='check_box' onClick={(event)=>{ <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) { if (event.target.checked) {
//在选择题目集中添加选择题的ID //在选择题目集中添加选择题的ID
setChoice(items=>([ setChoice(items=>([
@ -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,17 +188,20 @@ function SendTest(){
items.filter((item)=>item!==question['completion'][key][3]) items.filter((item)=>item!==question['completion'][key][3])
) )
} }
}} /><span>是否选择</span> }} />
</td> <span>是否选择</span>
</tr> </div>
))} </td>
<span className='title'>判断题</span> </tr>
{Object.keys(question['judge']).map((key)=>( ))}
<span className='title'>判断题</span>
{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>
<input type="checkbox" className='check_box' onClick={(event)=>{ <div className='check_box_pd'>
<input type="checkbox" className='check_box' onClick={(event)=>{
if (event.target.checked) { if (event.target.checked) {
setJudge(items=>([ setJudge(items=>([
...items, ...items,
@ -200,50 +212,51 @@ 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>
))} ))}
</table>} </tbody>
</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='TestSelectClass'>
<div className='TrainSelectClass'> <p className='TestSelectClassP'>请选择发布班级</p>
<p className='TrainSelectClassP'>请选择发布班级</p> { ClassData &&<ul id='Test_class_ul'>
{ ClassData &&<ul id='Train_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)}>
{key} {key}
</div> </div>
</li> </li>
))} ))}
</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)=>(
<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> <option value={num} key={num}>{num}</option>
))} ))}
</select>小时 </select>分钟
<select name="" id="" alue={MinValue} onChange={getminvalue}> <p>请填写截至时间</p>
{min_list.map((num)=>( <input type="text" maxLength={10} style={{width:'30px'}} value={StopTime} onChange={getstoptime} />天后
<option value={num} key={num}>{num}</option>
))}
</select>分钟
<p>请填写截至时间</p>
<input type="text" maxLength={10} style={{width:'30px'}} value={StopTime} onChange={getstoptime} />天后
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
) )
} }

48
app-dm/src/TeacherPages/Trainmanage/SendTrain.css
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;

35
app-dm/src/TeacherPages/Trainmanage/SendTrain.jsx
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>

12
app-dm/src/TeacherPages/Trainmanage/Trainmanage.css
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);
} }

39
app-dm/src/TeacherPages/classlistpages/classId.jsx
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>
):( ):(

13
app-dm/src/TeacherPages/classlistpages/classid.css
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;
} }