This commit is contained in:
nopy 2024-06-27 10:51:57 +08:00
parent 231606adff
commit 4ed8c5cc49
6 changed files with 43 additions and 104 deletions

View File

@ -137,4 +137,5 @@ function Operation2() {
) )
} }
export default Operation2; export default Operation2;

View File

@ -1,95 +0,0 @@
import './Operation2.css'
import { Terminal } from "@xterm/xterm";
import "@xterm/xterm/css/xterm.css"
import React,{ MouseEvent, useEffect, useRef, useState } from "react";
import { useParams } from 'react-router';
import { Link } from 'react-router-dom';
import arrowleft from '../img/arrowleft.jpg'
import arrowright from '../img/arrowright.jpg'
import bottom from '../img/bottom.jpg'
import top from '../img/top.jpg'
function Operation3() {
const { operateID } = useParams();
//
// const { OperationId } = useParams();
const [test_data, setTestData] = useState('');
const [countdown, setCountdown] = useState(0);
//
useEffect(() => {
const examDuration = 60 * 60; // 1
setCountdown(examDuration);
}, []);
//
useEffect(() => {
let interval = setInterval(() => {
if (countdown > 0) {
setCountdown(countdown - 1);
} else {
clearInterval(interval);
alert('考试时间到!');
}
}, 1000);
return () => clearInterval(interval);
}, [countdown]);
//
const formatTime = (seconds) => {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};
//
const [isSubjectDropdownOpen, setIsSubjectDropdownOpen] = useState(false);
return (
<div>
<div className='nav-operation2'>
{/* 导航 */}
{/* <h1>{OperationId}</h1> */}
<p>剩余时间{formatTime(countdown)}</p>
</div>
<div className='body-operation2'>
<div className='nav-left-operation2'>
{/* 左边导航 */}
<p>题目</p>
<ul className='nav-left-ul2'>
<Link to='/operation1/实训一:数据库的安装' style={{color:'#000',textDecoration:'none'}}>
<li className='subject-dropdown2' onClick={() => setIsSubjectDropdownOpen(!isSubjectDropdownOpen)}>
主观题
{isSubjectDropdownOpen ? <span className='list-img2'><img src={bottom} alt="" width='20px' height='20px'/></span> : <span><img src={top} alt="" width='20px' height='20px'/></span>}
{isSubjectDropdownOpen && (
<ul className='dropdown-menu2'>
<li>判断题</li>
<li>选择题</li>
<li>简答题</li>
{/* 子菜单项 */}
</ul>
)}
</li>
</Link>
<li style={{ marginTop: isSubjectDropdownOpen ? '186px' : '0' }}>实训题</li>
</ul>
</div>
<div className='body-right2'>
第三页实训题:的右边页面
</div>
<Link className='btn-back2' to={`/operation1/${operateID}`} style={{color:'#000',textDecoration:'none'}}>
<p>上一页</p>
<img src={arrowleft} alt="" width='40px' height='40px' />
</Link>
<Link className='btn-out2' to='/train' style={{color:'#000',textDecoration:'none'}}>
<img src={arrowright} alt="" width='40px' height='40px' />
<p>完成</p>
</Link>
</div>
</div>
)
}
export default Operation3;

View File

@ -78,6 +78,17 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 1000; z-index: 1000;
animation: slideInFromUp 0.5s ease-out forwards;
}
@keyframes slideInFromUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
} }
.warning-content { .warning-content {
width: 1420px; width: 1420px;

View File

@ -4,17 +4,43 @@ import '../Training/TrainingPage.css'
import axios from 'axios'; import axios from 'axios';
const WarningModal = ({ isOpen, onClose }) => { // const WarningModal = ({ isOpen, onClose }) => {
if (!isOpen) return null; //
// if (!isOpen) return; //
// return (
// <div className="warning-box">
// <div className="warning-content">
// <span className="close-button" onClick={onClose}>×</span>
// <p> : </p>
// </div>
// </div>
// );
// };
const WarningModal = ({ isOpen, onClose }) => {
//
const [isClosing, setIsClosing] = useState(false);
//
const handleClose = () => {
setIsClosing(true); //
setTimeout(() => {
setIsClosing(false); //
onClose(); // onCloseModal
}, 500); // 500ms CSS
};
if (!isOpen || !isClosing) {
return ( return (
<div className="warning-box"> <div className={`warning-box ${isClosing ? 'slideUpFadeOut' : ''}`}>
<div className="warning-content"> <div className="warning-content">
<span className="close-button" onClick={onClose}>×</span> {!isClosing && <span className="close-button" onClick={handleClose}>×</span>}
<p>提醒 : 请及时完成实训内容</p> <p>提醒 : 请及时完成实训内容</p>
</div> </div>
</div> </div>
); );
}
return null;
}; };
const list4=[ const list4=[
@ -23,6 +49,7 @@ const list4=[
] ]
// //
function SubjectPage(){ function SubjectPage(){
const student_ID=localStorage.getItem('islogin') const student_ID=localStorage.getItem('islogin')
if(student_ID==null){ if(student_ID==null){
alert('登录过期,请重新登录') alert('登录过期,请重新登录')
@ -48,13 +75,10 @@ function SubjectPage(){
// //
const [isWarningOpen, setWarningOpen] = useState(false); const [isWarningOpen, setWarningOpen] = useState(false);
// //
const openWarning = () => setWarningOpen(true); const openWarning = () => setWarningOpen(true);
// //
const closeWarning = () => setWarningOpen(false); const closeWarning = () => setWarningOpen(false);
// openWarning // openWarning
useEffect(() => { useEffect(() => {
openWarning(); openWarning();

View File

@ -16,7 +16,6 @@ import AnalysePage from '../pages/ListPages/Analyse/AnalysePages';
import Exam from '../pages/ListPages/Subject/Exam'; import Exam from '../pages/ListPages/Subject/Exam';
import Operation1 from '../pages/ListPages/Training/Operation1'; import Operation1 from '../pages/ListPages/Training/Operation1';
import Operation2 from '../pages/ListPages/Training/Operation2'; import Operation2 from '../pages/ListPages/Training/Operation2';
import Operation3 from '../pages/ListPages/Training/Operation3';
// //
import TeacherPage from '../TeacherPages/TeacherPage'; import TeacherPage from '../TeacherPages/TeacherPage';
@ -78,7 +77,6 @@ function App() {
<Route path='/teacher/SendTrain' element={<SendTrain/>}/> {/*实训管理-发布实训*/} <Route path='/teacher/SendTrain' element={<SendTrain/>}/> {/*实训管理-发布实训*/}
<Route path='operation1/:operateID' element={<Operation1/>}/> {/* 实训页面1:理论 */} <Route path='operation1/:operateID' element={<Operation1/>}/> {/* 实训页面1:理论 */}
<Route path='operation2/:operateID' element={<Operation2/>}/> {/* 实训页面2:数据库 */} <Route path='operation2/:operateID' element={<Operation2/>}/> {/* 实训页面2:数据库 */}
<Route path='operation3/:operateID' element={<Operation3/>}/> {/* 实训页面3:web前端 */}
<Route path='teacher/list_pods' element={<List_pods/>}/> <Route path='teacher/list_pods' element={<List_pods/>}/>
<Route path='/refresh' element={<Refresh/>}/> <Route path='/refresh' element={<Refresh/>}/>