Merge branch 'master' of https://gitea.xn--7p0a.site/2312072104/dm
This commit is contained in:
commit
c1a414e712
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import './questionmanage.css'
|
||||
|
||||
function Questionmange(){
|
||||
return (
|
||||
<div className="body-right-question"></div>
|
||||
)
|
||||
}
|
||||
export default Questionmange
|
||||
|
|
@ -12,17 +12,32 @@
|
|||
|
||||
/* 班级管理 */
|
||||
.manage_class{
|
||||
/* flex-basis: calc(50.00% - 10PX); */
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
background-color: rgb(200, 249, 230);
|
||||
margin-left: 150px;
|
||||
margin-top: 50px;
|
||||
background-image: linear-gradient(rgb(193,240,222),rgb(128, 235, 226));
|
||||
border: 5px double rgb(185, 222, 200);
|
||||
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{
|
||||
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{
|
||||
margin-left: 300px;
|
||||
margin-top: 100px;
|
||||
.Link-teacherpage{
|
||||
padding: 10px 50px;
|
||||
margin-left: 112px;
|
||||
background-color: #e1fff7;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@ function TeacherPage() {
|
|||
const teacher_ID = localStorage.getItem('islogin')
|
||||
if(teacher_ID==null){
|
||||
alert('登录过期，请重新登录')
|
||||
window.location.href='/signin'
|
||||
window.location.href='http://36.138.114.105:30294/'
|
||||
}
|
||||
const [classData, setClassData] = useState({});
|
||||
const log=(key)=>{
|
||||
|
|
@ -37,10 +37,10 @@ function TeacherPage() {
|
|||
<div id='class_box' style={{ display: 'flex' }}>
|
||||
{Object.keys(classData).map((key) => (
|
||||
<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='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>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@
|
|||
/* 页面区域占比 */
|
||||
.SendTrain_body_left{
|
||||
flex: 11%;
|
||||
/* border: 1px solid #000; */
|
||||
border: 1px solid #000;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.SendTrain_body_right{
|
||||
flex: 60%;
|
||||
|
|
@ -18,8 +19,9 @@
|
|||
line-height: 50px;
|
||||
font-size: 26px;
|
||||
font-weight: 440;
|
||||
margin-top: 43px;
|
||||
padding-left: 75px;
|
||||
margin-top: 40px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #000;
|
||||
}
|
||||
.SendTrain_body_left_ul{
|
||||
/* all: unset; */
|
||||
|
|
@ -36,39 +38,144 @@
|
|||
font-size: 22px;
|
||||
}
|
||||
.left-list-ul li{
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
padding-top: 10px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
/* 页面中间题目(基础题) */
|
||||
.SendTrain_body_right p{
|
||||
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;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.SendTrain_body_right table{
|
||||
width: 100%;
|
||||
border-left: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
background-color: #eaeeec;
|
||||
}
|
||||
.title{
|
||||
font-size: 25px;
|
||||
font-size: 21px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.questiontitle{
|
||||
font-size: 20px;
|
||||
/* 选择题 */
|
||||
.Trainbox_xz{
|
||||
background-color: #fff;
|
||||
}
|
||||
.Trainbox{
|
||||
background-color: rgb(166, 161, 161);
|
||||
.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;
|
||||
}
|
||||
.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{
|
||||
font-size: 20px;
|
||||
background-color: rgb(166, 161, 161);
|
||||
font-size: 16px;
|
||||
}
|
||||
.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{
|
||||
|
|
|
|||
|
|
@ -78,12 +78,10 @@ function SendTrain(){
|
|||
StopTime,
|
||||
selectedItems,
|
||||
Train,
|
||||
teacher_ID,
|
||||
startDate,
|
||||
endDate
|
||||
teacher_ID
|
||||
})
|
||||
alert('发布成功')
|
||||
window.location.href='/teacher/trainmanage'
|
||||
window.location.href='http://localhost:3000/teacher/trainmanage'
|
||||
}catch{
|
||||
alert('SendTrainTest出错')
|
||||
|
||||
|
|
@ -92,7 +90,7 @@ function SendTrain(){
|
|||
|
||||
|
||||
const SendTrainBtn=()=>{
|
||||
if(selectedItems.length>0 && (HourValue || MinValue)){
|
||||
if(selectedItems.length>0 && (HourValue || MinValue)&&StopTime){
|
||||
if(Train.length>0){
|
||||
SendTrainTest()
|
||||
}else{
|
||||
|
|
@ -173,83 +171,89 @@ function SendTrain(){
|
|||
{Trainquestion &&<table>
|
||||
<span className='title'>选择题</span>
|
||||
<tbody>
|
||||
{Object.keys(Trainquestion['choice']).map((key)=>(
|
||||
{Object.keys(Trainquestion['choice']).map((key,index)=>(
|
||||
<tr key={key}>
|
||||
{/* 章节切换⬇ */}
|
||||
<td className='Trainbox'>
|
||||
<div>{Trainquestion['choice'][key][8]}</div>
|
||||
<td className='Trainbox_xz'>
|
||||
<div className='chapter'>{Trainquestion['choice'][key][8]}</div>
|
||||
<tr>
|
||||
<td className='questiontitle'>问.{Trainquestion['choice'][key][1]}</td>
|
||||
<td className='questiontitle_xz'>{index+1}.{Trainquestion['choice'][key][1]}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<div className='Train_answer_box'>
|
||||
<tr>A:{Trainquestion['choice'][key][2]}</tr>
|
||||
<tr>B:{Trainquestion['choice'][key][3]}</tr>
|
||||
<tr>C:{Trainquestion['choice'][key][4]}</tr>
|
||||
<tr>D:{Trainquestion['choice'][key][5]}</tr>
|
||||
<tr>A.{Trainquestion['choice'][key][2]}</tr>
|
||||
<tr>B.{Trainquestion['choice'][key][3]}</tr>
|
||||
<tr>C.{Trainquestion['choice'][key][4]}</tr>
|
||||
<tr>D.{Trainquestion['choice'][key][5]}</tr>
|
||||
</div>
|
||||
</tr>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
setTrainChoice(items=>([
|
||||
...items,
|
||||
Trainquestion['choice'][key][7]
|
||||
]))
|
||||
}else{
|
||||
setTrainChoice((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['choice'][key][7])
|
||||
)
|
||||
}
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
<div className='check_box_xz'>
|
||||
<input type="checkbox" onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
setTrainChoice(items=>([
|
||||
...items,
|
||||
Trainquestion['choice'][key][7]
|
||||
]))
|
||||
}else{
|
||||
setTrainChoice((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['choice'][key][7])
|
||||
)
|
||||
}
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<span className='title'>填空题</span>
|
||||
{Object.keys(Trainquestion['completion']).map((key)=>(
|
||||
{Object.keys(Trainquestion['completion']).map((key,index)=>(
|
||||
<tr key={key}>
|
||||
<td className='Trainbox'>
|
||||
{Trainquestion['completion'][key][4]}
|
||||
<td className='questiontitle'>
|
||||
问.{Trainquestion['completion'][key][1]}
|
||||
<td className='Trainbox_tk'>
|
||||
<div className='chapter_tk'>{Trainquestion['completion'][key][4]}</div>
|
||||
<td className='questiontitle_tk'>
|
||||
{index+1}.{Trainquestion['completion'][key][1]}
|
||||
</td>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
setTrainCompletion(items=>([
|
||||
...items,
|
||||
Trainquestion['completion'][key][3]
|
||||
]))
|
||||
}else{
|
||||
setTrainCompletion((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['completion'][key][3])
|
||||
)
|
||||
}
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
<div className='check_box_tk'>
|
||||
<input type="checkbox" onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
//在选择题目集中添加选择题的ID
|
||||
setTrainCompletion(items=>([
|
||||
...items,
|
||||
Trainquestion['completion'][key][3]
|
||||
]))
|
||||
}else{
|
||||
setTrainCompletion((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['completion'][key][3])
|
||||
)
|
||||
}
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<span className='title'>判断题</span>
|
||||
{Object.keys(Trainquestion['judge']).map((key)=>(
|
||||
{Object.keys(Trainquestion['judge']).map((key,index)=>(
|
||||
<tr key={key}>
|
||||
<td className='Trainbox'>
|
||||
{Trainquestion['judge'][key][4]}
|
||||
<td className='judgetitle'>问:{Trainquestion['judge'][key][1]}</td>
|
||||
<input type="checkbox" className='check_box' onClick={(event)=>{
|
||||
if (event.target.checked) {
|
||||
setTrainJudge(items=>([
|
||||
...items,
|
||||
Trainquestion['judge'][key][3]
|
||||
]))
|
||||
}else{
|
||||
setTrainJudge((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['judge'][key][3])
|
||||
)
|
||||
}
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
<td className='Trainbox_pd'>
|
||||
<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)=>{
|
||||
if (event.target.checked) {
|
||||
setTrainJudge(items=>([
|
||||
...items,
|
||||
Trainquestion['judge'][key][3]
|
||||
]))
|
||||
}else{
|
||||
setTrainJudge((items)=>
|
||||
items.filter((item)=>item!==Trainquestion['judge'][key][3])
|
||||
)
|
||||
}
|
||||
}} />
|
||||
<span>是否选择</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,177 +1,187 @@
|
|||
import { useParams } from 'react-router-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
|
||||
import axios from 'axios';
|
||||
import './classid.css'
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
|
||||
import axios from 'axios';
|
||||
import './classid.css'
|
||||
|
||||
|
||||
|
||||
function TeacherPage() {
|
||||
const [selectedSubject, setSelectedSubject] = useState();
|
||||
const [ID,setID]=useState(null)
|
||||
const[TestScore,setTestScore]=useState([])
|
||||
const { key } = useParams();
|
||||
const [isclick,setisclick]=useState(false)
|
||||
const [classdata,setClassData]=useState([])
|
||||
const [studentScores, setStudentScores] = useState([])
|
||||
const [name,setname]=useState('')
|
||||
function TeacherPage() {
|
||||
const [selectedSubject, setSelectedSubject] = useState();
|
||||
const [ID,setID]=useState(null)
|
||||
const[TestScore,setTestScore]=useState([])
|
||||
const { key } = useParams();
|
||||
const [isclick,setisclick]=useState(false)
|
||||
const [classdata,setClassData]=useState([])
|
||||
const [studentScores, setStudentScores] = useState([])
|
||||
const [name,setname]=useState('')
|
||||
|
||||
const click=()=>{
|
||||
console.log(selectedSubject);
|
||||
console.log(ID);
|
||||
console.log(studentScores);
|
||||
const click=()=>{
|
||||
console.log(selectedSubject);
|
||||
console.log(ID);
|
||||
console.log(studentScores);
|
||||
}
|
||||
const teacher_ID=localStorage.getItem('islogin')
|
||||
if(teacher_ID==null){
|
||||
alert('登录过期，请重新登录')
|
||||
window.location.href='http://36.138.114.105:30294/'
|
||||
}
|
||||
|
||||
//学生表格
|
||||
const class_succeed = async () => {
|
||||
try{
|
||||
const class_scr=await axios.post('/api/teacher/find_student',{key})
|
||||
const class_data=class_scr.data
|
||||
setClassData(class_data[1])
|
||||
setisclick(true)
|
||||
}catch(error){
|
||||
alert(error)
|
||||
}
|
||||
const teacher_ID=localStorage.getItem('islogin')
|
||||
if(teacher_ID==null){
|
||||
alert('登录过期，请重新登录')
|
||||
window.location.href='/signin'
|
||||
}
|
||||
|
||||
//学生表格
|
||||
|
||||
const class_succeed = async () => {
|
||||
try{
|
||||
const class_scr=await axios.post('/api/teacher/find_student',{key})
|
||||
const class_data=class_scr.data
|
||||
setClassData(class_data[1])
|
||||
setisclick(true)
|
||||
}catch(error){
|
||||
alert(error)
|
||||
}
|
||||
}
|
||||
useState(()=>{
|
||||
class_succeed();
|
||||
},[])
|
||||
}
|
||||
useState(()=>{
|
||||
class_succeed();
|
||||
},[])
|
||||
|
||||
useEffect(() => {
|
||||
class_succeed().then(() => {
|
||||
const scores = [];
|
||||
// 遍历 TestScore 对象的每个值
|
||||
for (const studentId in TestScore) {
|
||||
// 如果当前学生的信息数组没有被跳过，则对其做进一步处理
|
||||
if (TestScore.hasOwnProperty(studentId)) {
|
||||
const studentInfo = TestScore[studentId];
|
||||
// 检查当前学生的信息数组是否符合特定的科目要求
|
||||
if (studentInfo[2] === selectedSubject) {
|
||||
// 只有当学生信息数组的第3个元素（科目）等于"Chinese"时，才添加到 scores 数组中
|
||||
scores.push({
|
||||
name: studentInfo[3], // 假设姓名总是位于数组的第4个位置
|
||||
score: studentInfo[5], // 假设分数总是位于数组的第6个位置
|
||||
});
|
||||
// 如果 scores 数组已经有三个或更多项目，则移除数组的第一个项目
|
||||
if (scores.length > 3) {
|
||||
scores.shift();
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
class_succeed().then(() => {
|
||||
const scores = [];
|
||||
// 遍历 TestScore 对象的每个值
|
||||
for (const studentId in TestScore) {
|
||||
// 如果当前学生的信息数组没有被跳过，则对其做进一步处理
|
||||
if (TestScore.hasOwnProperty(studentId)) {
|
||||
const studentInfo = TestScore[studentId];
|
||||
// 检查当前学生的信息数组是否符合特定的科目要求
|
||||
if (studentInfo[2] === selectedSubject) {
|
||||
// 只有当学生信息数组的第3个元素（科目）等于"Chinese"时，才添加到 scores 数组中
|
||||
scores.push({
|
||||
name: studentInfo[3], // 假设姓名总是位于数组的第4个位置
|
||||
score: studentInfo[5], // 假设分数总是位于数组的第6个位置
|
||||
});
|
||||
// 如果 scores 数组已经有三个或更多项目，则移除数组的第一个项目
|
||||
if (scores.length > 3) {
|
||||
scores.shift();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setStudentScores(scores);
|
||||
});
|
||||
}, [selectedSubject]);
|
||||
setStudentScores(scores);
|
||||
});
|
||||
}, [selectedSubject]);
|
||||
|
||||
function formatDate(dateString) {
|
||||
// 将日期字符串转换为 Date 对象
|
||||
const date = new Date(dateString);
|
||||
// 获取年份、月份和日期
|
||||
const year = date.getFullYear();
|
||||
const monthIndex = date.getMonth();
|
||||
const day = date.getDate();
|
||||
|
||||
// 构建格式化后的日期字符串
|
||||
const formattedDate = `${year}-${(monthIndex + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
|
||||
return formattedDate;
|
||||
}
|
||||
function formatDate(dateString) {
|
||||
// 将日期字符串转换为 Date 对象
|
||||
const date = new Date(dateString);
|
||||
// 获取年份、月份和日期
|
||||
const year = date.getFullYear();
|
||||
const monthIndex = date.getMonth();
|
||||
const day = date.getDate();
|
||||
|
||||
// 构建格式化后的日期字符串
|
||||
const formattedDate = `${year}-${(monthIndex + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
|
||||
return formattedDate;
|
||||
}
|
||||
|
||||
const Find_details= async ()=>{
|
||||
if(ID!==null){
|
||||
try{
|
||||
const Find_details_Src = await axios.post('/api/teacher/Find_details',{
|
||||
ID
|
||||
})
|
||||
setTestScore(Find_details_Src.data['TestScore'])
|
||||
setStudentScores([])
|
||||
setSelectedSubject()
|
||||
}catch{
|
||||
alert('Find_details')
|
||||
}
|
||||
const Find_details= async ()=>{
|
||||
if(ID!==null){
|
||||
try{
|
||||
const Find_details_Src = await axios.post('/api/teacher/Find_details',{
|
||||
ID
|
||||
})
|
||||
setTestScore(Find_details_Src.data['TestScore'])
|
||||
setStudentScores([])
|
||||
setSelectedSubject()
|
||||
}catch{
|
||||
alert('Find_details')
|
||||
}
|
||||
}
|
||||
useEffect(()=>{
|
||||
Find_details()
|
||||
const sltvalue=document.getElementById('selectvalue')
|
||||
sltvalue.value=''
|
||||
},[ID])
|
||||
|
||||
function handleSubjectChange(event) {
|
||||
setSelectedSubject(event.target.value);
|
||||
}
|
||||
}
|
||||
useEffect(()=>{
|
||||
Find_details()
|
||||
const sltvalue=document.getElementById('selectvalue')
|
||||
sltvalue.value=''
|
||||
},[ID])
|
||||
|
||||
function handleSubjectChange(event) {
|
||||
setSelectedSubject(event.target.value);
|
||||
}
|
||||
|
||||
const handleClick = (item) => {
|
||||
setID(classdata[item][1]);
|
||||
setname(classdata[item][0]);
|
||||
};
|
||||
const handleClick = (item) => {
|
||||
setID(classdata[item][1]);
|
||||
setname(classdata[item][0]);
|
||||
};
|
||||
|
||||
return(
|
||||
<div className='body-right-classId'>
|
||||
<div id='body-right-bottom'>
|
||||
<h3>班级信息</h3>
|
||||
<div id='body-right-bottom-left'>
|
||||
<div id='body-right-bottom-left-nav'>
|
||||
<p style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<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>
|
||||
<span style={{ flex: 1 }}>查看详情</span>
|
||||
</p>
|
||||
</div>
|
||||
<div id='body-right-student-box'>
|
||||
<table>
|
||||
<tbody>
|
||||
{Object.keys(classdata).map((item)=>(
|
||||
<tr key={item}>
|
||||
<td className='box-content'>{classdata[item][2]}</td>
|
||||
<td className='box-content'>{classdata[item][0]}</td>
|
||||
<td className='box-content'>{classdata[item][1]}</td>
|
||||
<td className='box-content'>{classdata[item][3]}</td>
|
||||
<td className='box-content'>{classdata[item][5]}</td>
|
||||
<td className='box-content'>{formatDate(classdata[item][4])}</td>
|
||||
<td className='box-content'><button onClick={(e)=>handleClick(item)} style={{border:'none'}}>查看详情</button></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
return(
|
||||
<div className='body-right-classId'>
|
||||
<div id='body-right-bottom'>
|
||||
<h3>班级信息</h3>
|
||||
<div id='body-right-bottom-left'>
|
||||
<div id='body-right-bottom-left-nav'>
|
||||
<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>
|
||||
<span style={{ flex: 1 }}>查看详情</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='body-test-score'>
|
||||
<h3>成绩</h3>
|
||||
<div className='body-test-score-bar'>
|
||||
{name&&<div className='studentName'>已选中{name}</div>}
|
||||
<button onClick={click}>测试</button>
|
||||
<select onChange={handleSubjectChange} id='selectvalue'>
|
||||
<option value="">请选择科目</option>
|
||||
<option value="Chinese">语文</option>
|
||||
<option value="Math">数学</option>
|
||||
<option value="English">英语</option>
|
||||
<option value="Train">实训</option>
|
||||
</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 id='body-right-student-box'>
|
||||
<table>
|
||||
<tbody>
|
||||
{Object.keys(classdata).map((item)=>(
|
||||
<tr key={item}>
|
||||
<td className='box-content'>{classdata[item][2]}</td>
|
||||
<td className='box-content'>{classdata[item][0]}</td>
|
||||
<td className='box-content'>{classdata[item][1]}</td>
|
||||
<td className='box-content'>{classdata[item][3]}</td>
|
||||
<td className='box-content'>{classdata[item][5]}</td>
|
||||
<td className='box-content'>{formatDate(classdata[item][4])}</td>
|
||||
<td className='box-content1'><button onClick={(e)=>handleClick(item)} className='btn-ckxq'>查看详情</button></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default TeacherPage;
|
||||
<div className='body-test-score'>
|
||||
{/* <h3>成绩</h3> */}
|
||||
<div className='body-test-score-bar'>
|
||||
{/* <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'>
|
||||
<option value="">请选择科目</option>
|
||||
<option value="Chinese">语文</option>
|
||||
<option value="Math">数学</option>
|
||||
<option value="English">英语</option>
|
||||
<option value="Train">实训</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default TeacherPage;
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
.body-right-classId{
|
||||
width: 1420px;
|
||||
/* width: 1420px; */
|
||||
width: 86.3%;
|
||||
height: 830px;
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
|
|
@ -18,11 +19,12 @@
|
|||
#body-right-bottom h3{
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
color: #236b76;
|
||||
}
|
||||
#body-right-bottom-left{
|
||||
width: 1200px;
|
||||
height: 360px;
|
||||
background-color: #b19bc6;
|
||||
height: 320px;
|
||||
background-color: #bef1f4;
|
||||
position: absolute;
|
||||
}
|
||||
#body-right-bottom-left-nav{
|
||||
|
|
@ -33,12 +35,15 @@
|
|||
}
|
||||
#body-right-bottom span{
|
||||
text-align: center;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
#body-right-student-box{
|
||||
width: 1150px;
|
||||
height: 280px;
|
||||
border: 1px black solid;
|
||||
height: 240px;
|
||||
border: 1px rgb(70, 188, 199) solid;
|
||||
background-color: #fff;
|
||||
/* background-color: #dff9fd; */
|
||||
margin-left: 25px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
|
|
@ -46,61 +51,106 @@
|
|||
#body-right-student-box table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* background-color: #dff9fd; */
|
||||
}
|
||||
#body-right-student-box tr {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
}
|
||||
#body-right-student-box td {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid #5aafbc;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
.box-content {
|
||||
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{
|
||||
width: 1200px;
|
||||
height: 370px;
|
||||
width: 650px;
|
||||
height: 390px;
|
||||
position: absolute;
|
||||
top: 440px;
|
||||
left: 110px;
|
||||
top: 390px;
|
||||
left: 150px;
|
||||
background-color: #bfd1f6;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.body-test-score h3{
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
.body-test-score-bar p{
|
||||
width: 250px;
|
||||
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;
|
||||
width: 120px;
|
||||
font-size: 15px;
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
border: 1px solid #a1c1f4;
|
||||
outline-color:#a1c1f4;
|
||||
color: rgb(122, 122, 122);
|
||||
border: 5px solid #bdcbe3;
|
||||
outline-color:#8891a4;
|
||||
color: #4e5f7c;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 920px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.table-bar{
|
||||
width: 640px;
|
||||
.studentmassage{
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
/* background-color: #fff; */
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 250px;
|
||||
border-radius: 15px;
|
||||
background-color: #fff;
|
||||
top: 70px;
|
||||
left: 30px;
|
||||
display: flex;
|
||||
}
|
||||
.bar{
|
||||
.studentmassage p{
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
top: 15px;
|
||||
left: 0px;
|
||||
}
|
||||
.studentName{
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ import Send from "../pages/Home/img/test.jpg"
|
|||
import Set from '../pages/Home/img/setting.jpg'
|
||||
import Mark from '../pages/Home/img/correct.jpg'
|
||||
import Logo from '../pages/Home/img/logo.jpg'
|
||||
import Question from '../pages/Home/img/question.jpg'
|
||||
|
||||
// 导航
|
||||
function HeaderNavTeacher() {
|
||||
|
|
@ -59,7 +60,7 @@ function HeaderNavTeacher() {
|
|||
</div>
|
||||
<div className='left-nav-li'>
|
||||
<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}>
|
||||
<div className='nav-li-box'>
|
||||
<Link to={item.path} className="custom-link-home" style={{color:'black'}}>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -14,7 +14,6 @@
|
|||
display: flex;
|
||||
align-content: center;
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import TrainManage from '../TeacherPages/Trainmanage/Trainmanage'
|
|||
import StudentLink from '../TeacherPages/MarkingPages/StudentLink';
|
||||
import Test from '../TeacherPages/TestManage/Test'
|
||||
import TrainPods from '../TeacherPages/Trainmanage/TrainPods'
|
||||
import Questionmange from '../TeacherPages/Questionmanage/questionmanage'
|
||||
|
||||
|
||||
// 定义一个组件来包裹除了特定页面(exam)外的所有页面使其有导航
|
||||
|
|
@ -66,6 +67,7 @@ function App() {
|
|||
<Route path="classID/:key" element={<ClassID />} /> {/* 班级管理1 */}
|
||||
<Route path='mark/studentlink/Mark/:key' element={<StudentLink/>}/> {/* 批改1 */}
|
||||
<Route path='trainmanage/TrainPods' element={<TrainPods/> }/>
|
||||
<Route path='questionmange' element={<Questionmange/>}/>
|
||||
{/* 其他需要HeaderNavTeacher的页面 */}
|
||||
</Route>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue