1

app-dm/src/TeacherPages/MarkingPages/Marking.css

@@ -65,4 +65,42 @@
     position: absolute;
     margin-left: 1230px;
     margin-top: -45px;
-}
+}
+
+
+
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+  }
+  
+  .modal-content {
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+  }
+  
+  .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+  }

app-dm/src/TeacherPages/Trainmanage/Trainmanage.jsx

@@ -2,12 +2,13 @@ import axios from 'axios';
 import './Trainmanage.css'
 import { Link } from 'react-router-dom';
 import React, { useEffect, useState } from 'react';
-// import axios from 'axios';
 
 
 function TrainManage(){
     const teacher_ID=localStorage.getItem('islogin')
-    const [Data,setData]=useState()
+    const [Data,setData]=useState([])
+    const [showModal, setShowModal] = useState(false);
+    const [selectedTrain, setSelectedTrain] = useState(null);
     //获取发布的实训
     const getTrainfunc=async()=>{
         try{
@@ -16,13 +17,20 @@ function TrainManage(){
             })
             setData(getTrainSrc.data['data'])
         }catch{
-            alert('aaaa')
+            alert('获取实训信息失败')
         }
     }
 
     useEffect(()=>{
         getTrainfunc()
     },[])
+
+
+    const handleTrainClick = (train) => {
+        setSelectedTrain(train);
+        setShowModal(true);
+    };
+
     return(
         <div className='body-trainmanage'>
             <p className='title'>已结束的实训</p>
@@ -30,16 +38,52 @@ function TrainManage(){
             {Data&&<div className='train-list-trainmanage'>
                 <ul className="ul-trainmanage">
                    {Object.keys(Data).map((key)=>(
-                    <li key={key}>
-                    <span>实训ID:{Data[key][10]}</span>
-                    <h6 className='TrainTitle'>实训名称:{eval(Data[key][11])}</h6>
-                    <p>关闭时间：{Data[key][6]}</p>
-                </li>
+                    <li key={key} onClick={() => handleTrainClick(key)}>
+                        <span>实训ID:{Data[key][10]}</span>
+                        <h6 className='TrainTitle'>实训名称:{eval(Data[key][11])}</h6>
+                        <p>关闭时间：{Data[key][6]}</p>
+                    </li>
                    ))}
                 </ul>
                 <Link to='/teacher/trainmanage/TrainPods' className='ManagePods' >管理实训</Link>
                 <Link to='/teacher/SendTrain' className='sendtestpage'>发布实训</Link>
             </div>}
+
+            
+            {/* 弹窗组件 */}
+            {showModal && (
+                <div className='modal'>
+                    <div className='modal-content'>
+                        <span className='close' onClick={() => setShowModal(false)}>&times;</span>
+                        <h2>实训信息</h2>
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>实训ID</th>
+                                    <th>实训名称</th>
+                                    <th>学号</th>
+                                    <th>基础成绩</th>
+                                    <th>实训成绩</th>
+                                    <th>总成绩</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {selectedTrain && selectedTrain.students.map((student, index) => (
+                                    <tr key={index}>
+                                        <td>{selectedTrain[10]}</td>
+                                        <td>{eval(selectedTrain[11])}</td>
+                                        <td>{student.studentID}</td>
+                                        <td>{student.baseScore}</td>
+                                        <td>{student.trainScore}</td>
+                                        <td>{student.totalScore}</td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            )}
+
         </div>
     )
 }