Merge branch 'master' of https://gitea.xn--7p0a.site/2312072104/dm

app-dm/src/pages/ListPages/Subject/Exam.css

@@ -1,61 +1,43 @@
-/* 导航 */
-.nav-test{
-    width: 100%;
-    height: 52px;
+/* 上面导航 */
+.nav-exam{
+    height: 50px;
+    width: 1630px;
+    margin-bottom: 5px;
+    box-shadow: 1px 1px 6px #d4d4d4;
+}
+.nav-exam p{
+    width: 200px;
+    height: 40px;
     font-size: 20px;
-    background-color: rgb(255, 255, 255);
-    box-shadow: 3px 2px 2px #d4d4d4;
+    line-height: 10px;
+    padding-right: 10px;
+    float: right;
 }
 
-.nav1{
-    line-height:15px;
-    font-size: 20px;
-    margin-left: 100px;
-    font-weight: 500;
-    font-family: '微软雅黑';
-}
-
-.nav1 p{
-    font-size: 15px;
-    margin-top: 15px;
-}
-.nav1 h1{
-    font-size: 20px;
-    margin-top: 15px;
-}
-
-.time{
-    position: absolute;
-    right: 50px;
-    top: 8px;
-}
-
-/* 主体 */
-.body-box{
+.body-exam{
     display: flex;
-    align-content: center;
+    flex-direction: column;
 }
-
-/* 左侧 */
-.body-left-test{
+/* 第二页（实训题）的左边导航 */
+.nav-left-exam{
     width: 215px;
-    height: 840px;
+    height: 1540px;
+    position: absolute;
     box-shadow: 2px 2px 6px #d4d4d4;
 }
-
-.body-left-test p{
-    font-size: 16px;
+.nav-left-exam p{
+    height: 10px;
+    font-size: 15px;
     padding: 0 10px;
+    margin-top: 6px;
 }
-
-.body-left-test ul{
+.nav-left-ul1-exam{
     width: 175px;
-    height: 240px;
-    border-top: 1px solid #7f7f7f;
+    position: relative;
+    border-top: 2px solid rgb(212, 212, 212);
 }
-
-.body-left-test li{
-    width: 75px;
+.nav-left-ul1-exam li{
+    width: 65px;
     height: 40px;
     font-size: 18px;
     list-style-type: none;
@@ -64,42 +46,77 @@
     line-height: 40px;
     display: block;
     cursor: pointer;
-    border-bottom: 1px solid #7f7f7f;
-    /* background-color:aliceblue; */
+    /* border-bottom: 1px solid #7f7f7f; */
+    background-color: #f5f5f5;
+    border-bottom: 2px solid rgb(212, 212, 212);
 }
-
-/* 右侧 */
-.body-right-test{
-    width: 1403px;
-    height: 828px;
-    margin-top: 10px;
-    margin-left: 5px;
-    background-color: #fff;
-}
-
-
-/* 提交按钮 */
-#submit{
+/* 下拉菜单 */
+.dropdown-menu1-exam {
+    height: auto;
     position: absolute;
+    top: 62px;
+    left: 0px;
+    z-index: 1000;
+}
+.dropdown-menu1-exam li{
+    background-color: rgb(236, 232, 232);
+    border-bottom: 2px solid rgb(213, 208, 208);
+}
+/* 显示下拉菜单 */
+.subject-dropdown.open1-exam + .dropdown-menu1-exam {
+    display: block;
+}
+.subject-dropdown1-exam span{
+    position: absolute;
+    top: 15px;
+    left: 180px;
 }
 
-#choice_box input{
-    margin-top: 20px;
-    margin-left: 20px;
+/* 题目预览框 */
+.countBox-exam{
+    height: 280px;
+    padding: 7px;
+    position: fixed;
+    right: 0px;
+    top: 65px;
+    background-color:#e8f7f0;
+    box-shadow: 0px 0px 6px #aacbae;
+    z-index: 1000;
+    transition: top 0.3s; /* 平滑过渡效果 */
 }
-#choice_box td{
-    border-bottom: 2px solid rgb(111, 203, 242);
-    width: 2000px;
+.fixed-count-box-exam {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: auto;
+    z-index: 1000;
 }
-#comple_box td{
-    border-bottom: 2px solid rgb(111, 203, 242);
-    width: 2000px;
+.countBox-exam div{
+    display: flex;
+    flex-wrap:wrap;
+    width: 200px;
 }
-.input_txt{
-    border: none;
-    border-bottom: 1px solid black;
-    font-size: 16px;
-    font-family: 'heiti';
+.countBox-exam td{
+    width: 40px;
+    height: 30px;
+    border: 1px solid black;
+    text-align: center;
+    margin-left: 5px;
+    margin-top: 5px;
+    cursor: pointer;
+}
+.countBox-exam tr{
+    font-size: 18px;
+    font-weight: 550;
+    color: #364a38;
+}
+.answered-exam {
+    /* 例如，改变题目的背景色 */
+    width: 40px;
+    height: 30px;
+    background-color: rgb(149, 223, 187);
+    text-align: center;
+    margin-left: 5px;
+    margin-top: 5px;
+    cursor: pointer;
 }
-
-

app-dm/src/pages/ListPages/Subject/Exam.jsx

@@ -1,13 +1,112 @@
 import './Exam.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 arrowright from '../img/arrowright.jpg'
+import bottom from '../img/bottom.jpg'
+import top from '../img/top.jpg'
 import axios from 'axios';
-import { useEffect, useState } from 'react';
 
-// 首页 课程班级
-function Exam(){
-    return(
-        <div></div>
-    )
+function Exam() {
+    
+
+    //倒计时
+    const [countdown, setCountdown] = useState(null);
+
+    // 倒计时更新
+    useEffect(() => {
+        let interval = setInterval(() => {
+            if (countdown !== 0 ) {
+                setCountdown(countdown - 1);
+                localStorage.setItem('time',countdown-1)
+            } else {
+                clearInterval(interval);
+                alert('考试时间到！');
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [countdown]);
+
+    // useEffect(()=>{
+    //     if(countdown<0){
+    //         console.log('c');
+    //         setCountdown(60 * parseInt(TrainData['operateID'][4]))
+    //         localStorage.removeItem('time')
+    //     }
+    // },[TrainData])
+
+     // 转换秒数为时分秒格式
+      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-exam'>
+            {/* 导航 */}
+            {/* <h1>{OperationId}</h1> */}
+            <p>剩余时间：{countdown >=0  && formatTime(countdown)}</p>
+        </div>
+        <div className='body-exam'>
+            <div className='nav-left-exam'>
+                {/* 左边导航 */}
+                <p>题目</p>
+                <ul className='nav-left-ul1-exam'>
+                    <li className='subject-dropdown1-exam' onClick={() => setIsSubjectDropdownOpen(!isSubjectDropdownOpen)}>
+                        主观题
+                        {isSubjectDropdownOpen ? <span className='list-img1-exam'><img src={bottom} alt="" width='20px' height='20px'/></span> : <span><img src={top} alt="" width='20px' height='20px'/></span>}
+                        {isSubjectDropdownOpen && (
+                            <ul className='dropdown-menu1-exam'>
+                                <li>判断题</li>
+                                <li>选择题</li>
+                                <li>简答题</li>
+                                {/* 子菜单项 */}
+                            </ul>
+                        )}
+                    </li>
+                    <Link to={`/operation2/1`} style={{color:'#000',textDecoration:'none'}}>
+                        <li style={{ marginTop: isSubjectDropdownOpen ? '186px' : '0' }}>实训题</li>
+                    </Link>
+                </ul>
+                {/* 题目预览框 */}
+                {/* 根据isFixed状态来设置countBox的类 */}
+                {/* <div className={`countBox ${isFixed ? 'fixed-count-box' : ''}`}> 
+                    {TrainData&&<table>
+                        <tr>选择题:</tr>
+                        <div>
+                            {Object.keys(TrainData['operateID'][0]).map((key,index)=>(
+                                <td key={key} className={answeredChoice.includes(index) ? 'answered' : ''}>{index+1}</td>
+                            ))}
+                        </div>
+                        <tr>填空题：</tr>
+                        <div>
+                            {Object.keys(TrainData['operateID'][1]).map((key,index)=>(
+                                <td key={key} className={answeredComple.includes(index) ? 'answered' : ''}>{index+1}</td>
+                            ))}
+                        </div>
+                        <tr>判断题：</tr>
+                        <div>
+                            {Object.keys(TrainData['operateID'][2]).map((key,index)=>(
+                                <td key={key} className={answeredJudge.includes(index) ? 'answered' : ''}>{index+1}</td>
+                            ))}
+                        </div>
+                    </table>}
+                </div> */}
+            </div>
+            {/* <div className='body-right1-exam'>
+                
+            </div> */}
+        </div>
+    </div>
+  )
 }
 
-export default Exam
+export default Exam;

app-dm/src/pages/ListPages/Training/Operation1.css

@@ -1,6 +1,7 @@
+/* 上面导航 */
 .nav-operation1{
     height: 50px;
-    width: 99.5%;
+    width: 1630px;
     margin-bottom: 5px;
     box-shadow: 1px 1px 6px #d4d4d4;
 }
@@ -20,17 +21,18 @@
 /* 第二页（实训题）的左边导航 */
 .nav-left-operation1{
     width: 215px;
-    height: 100%;
+    height: 1540px;
     position: absolute;
     box-shadow: 2px 2px 6px #d4d4d4;
 }
 .nav-left-operation1 p{
-    font-size: 16px;
+    height: 10px;
+    font-size: 15px;
     padding: 0 10px;
+    margin-top: 6px;
 }
 .nav-left-ul1{
     width: 175px;
-    /* border-top: 1px solid #7f7f7f; */
     position: relative;
     border-top: 2px solid rgb(212, 212, 212);
 }
@@ -57,8 +59,8 @@
     z-index: 1000;
 }
 .dropdown-menu1 li{
-    background-color: rgb(255, 239, 239);
-    border-bottom: 2px solid rgb(253, 210, 210);
+    background-color: rgb(236, 232, 232);
+    border-bottom: 2px solid rgb(213, 208, 208);
 }
 /* 显示下拉菜单 */
 .subject-dropdown.open1 + .dropdown-menu1 {
@@ -69,49 +71,25 @@
     top: 15px;
     left: 180px;
 }
-/* 第二页（实训题）的右边页面 */
-.body-right1{
-    width: 1415px;
-    height: 845px;
-    position: absolute;
-    top: 64px;
-    left: 230px;
-    border-radius: 10px;
-    background-color: #f7f8fa;
-}
 
-/* 前进按钮 */
-.btn-back1{
-
-}
-.btn-back1 p{
-    font-size: 20px;
-    margin-left: 5px;
-}
-
-.body-right1 table{
-    width: 100%;
-}
-.optionBox{
-    width: 100%;
-    background-color: rgb(110, 130, 130);
-}
-.body-right1 p{
-    margin: 0px;
-    font-size: 20px;
-}
-.optionBox label{
-    margin-left: 10px;
-}
-.body-right1-comple{
-    border-collapse: separate;
-    border-spacing: 10px; /* 设置行和列之间的间距 */
-}
-.body-right1-comple tr{
-    background-color: rgb(110, 130, 130);
-}
+/* 题目预览框 */
 .countBox{
-    margin-top: 10px;
+    height: 280px;
+    padding: 7px;
+    position: fixed;
+    right: 0px;
+    top: 65px;
+    background-color:#e8f7f0;
+    box-shadow: 0px 0px 6px #aacbae;
+    z-index: 1000;
+    transition: top 0.3s; /* 平滑过渡效果 */
+}
+.fixed-count-box {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: auto;
+    z-index: 1000;
 }
 .countBox div{
     display: flex;
@@ -121,21 +99,90 @@
 .countBox td{
     width: 40px;
     height: 30px;
-    /* background-color: rgb(136, 243, 209); */
     border: 1px solid black;
     text-align: center;
     margin-left: 5px;
     margin-top: 5px;
     cursor: pointer;
 }
+.countBox tr{
+    font-size: 18px;
+    font-weight: 550;
+    color: #364a38;
+}
 .answered {
     /* 例如，改变题目的背景色 */
     width: 40px;
     height: 30px;
-    background-color: rgb(136, 243, 209);
+    background-color: rgb(149, 223, 187);
     text-align: center;
     margin-left: 5px;
     margin-top: 5px;
     cursor: pointer;
-  }
+}
 
+/* 第二页（实训题）的右边页面 */
+.body-right1{
+    width: 1414px;
+    height: 1540px;
+    position: absolute;
+    top: 64px;
+    left: 230px;
+    border-radius: 10px;
+    background-color: #f7f8fa;
+}
+.body-right1 p{
+    width: 80px;
+    height: 30px;
+    margin: 0px;
+    padding-left: 10px;
+    margin-left: -10px;
+    font-size: 20px;
+    color: #273128;
+    background-image: linear-gradient(#c7e0ca,#a7daa3);
+    border-radius: 0 10px 10px 0;
+}
+.body-right1 table{
+    width: 100%;
+    border-spacing: 10px;
+}
+.test-title{
+    font-size: 17px;
+    text-indent: 1em;
+}
+.optionBox{
+    width: 100%;
+    height: 160px;
+    font-size: 16px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    background-color: rgb(255, 255, 255);
+}
+.optionBox label{
+    margin-left: 40px;
+    line-height: 40px;
+}
+.body-right1-comple{
+    border-collapse: separate;
+    text-indent: initial;
+    border-spacing: 10px; /* 设置行和列之间的间距 */
+}
+.body-right1-comple tr{
+    height: 25px;
+    background-color: #fff;
+}
+.test-title1{
+    font-size: 17px;
+}
+.input-box{
+    margin-bottom: 10px;
+}
+.body-right1-comple span{
+    margin-left: 30px;
+}
+
+/* 前进按钮 */
+.btn-back1 p{
+    font-size: 20px;
+    margin-left: 5px;
+}

app-dm/src/pages/ListPages/Training/Operation1.jsx

@@ -216,9 +216,29 @@ function Operation1() {
             }
             JUD_sum++
         }
-        
     }
 
+    // 题目预览框
+    const [isFixed,setIsFixed]=useState(false)
+    // 创建一个函数来处理滚动逻辑
+    const handleScroll = () => {
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+        const fixedThreshold = 100; // 滚动到100px后固定
+      
+        if (scrollTop > fixedThreshold) {
+          setIsFixed(true);
+        } else {
+          setIsFixed(false);
+        }
+    };
+    //  在组件挂载后添加滚动事件监听器，并在卸载时移除
+    useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+      
+    return () => {
+        window.removeEventListener('scroll', handleScroll);
+    };
+    }, []);
     
 
   return (
@@ -249,7 +269,8 @@ function Operation1() {
                         <li style={{ marginTop: isSubjectDropdownOpen ? '186px' : '0' }}>实训题</li>
                     </Link>
                 </ul>
-                <div className='countBox'>
+                {/* 题目预览框 */}
+                <div className={`countBox ${isFixed ? 'fixed-count-box' : ''}`}> {/* 根据isFixed状态来设置countBox的类 */}
                     {TrainData&&<table>
                         <tr>选择题:</tr>
                         <div>
@@ -273,59 +294,74 @@ function Operation1() {
                 </div>
             </div>
             <div className='body-right1'>
-            {TrainData && (
-            <table className='body-right1-choice'>
-                <p>选择题:</p>
-                <tbody> 
-                    {Object.keys(TrainData['operateID'][0]).map((key,index) => (
-                        <tr key={key}>
-                            <tr style={{fontSize:'18px'}}>({index+1}.){TrainData['operateID'][0][key][0][1]}</tr>
-                            <div className='optionBox'>
-                                <label><input type="radio" value={TrainData['operateID'][0][key][0][2]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][2]} onChange={handleOptionChange} name={`group${key}`}/><span>A:{TrainData['operateID'][0][key][0][2]}</span></label>
-                                <br />
-                                <label><input type="radio" value={TrainData['operateID'][0][key][0][3]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][3]} onChange={handleOptionChange} name={`group${key}`}/><span>B:{TrainData['operateID'][0][key][0][3]}</span></label>
-                                <br />
-                                <label><input type="radio" value={TrainData['operateID'][0][key][0][4]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][4]} onChange={handleOptionChange} name={`group${key}`}/><span>C:{TrainData['operateID'][0][key][0][4]}</span></label>
-                                <br />
-                                <label><input type="radio" value={TrainData['operateID'][0][key][0][5]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][5]} onChange={handleOptionChange} name={`group${key}`}/><span>D:{TrainData['operateID'][0][key][0][5]}</span></label>
-                            </div>
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
-            )}
-            {TrainData&&(
-                <table className='body-right1-comple'>
-                    <tbody>
-                    <p>填空题:</p>
-                    {Object.keys(TrainData['operateID'][1]).map((key)=>(
-                        <tr key={key}>{TrainData['operateID'][1][key][0][1]}
-                        <br />
-                        <span>请填入你的答案:</span>
-                            <input type="text" onChange={handleInputChange} name={key} value={completion_answer[key]||''}/>
-                        </tr>
-                    ))}
-                    </tbody>
-                </table>
-            )}
-            {TrainData&&(
+                {TrainData && (
                 <table>
+                    <p>选择题</p>
                     <tbody>
-                        <p>判断题:</p>
-                        {Object.keys(TrainData['operateID'][2]).map((key)=>(
-                            <tr key={key}>{TrainData['operateID'][2][key][0][1]}
-                                <tr>
-                                    <label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'true'} onChange={handleJudgeOption} value={true} />T</label>
-                                    <label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'false'} onChange={handleJudgeOption} value={false} />F</label>
-                                </tr>
+                        {Object.keys(TrainData['operateID'][0]).map((key,index) => (
+                            <tr key={key}>
+                                <tr className='test-title'>{index+1}.{TrainData['operateID'][0][key][0][1]}</tr>
+                                <div className='optionBox'>
+                                    <label>
+                                        <input type="radio" value={TrainData['operateID'][0][key][0][2]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][2]} onChange={handleOptionChange} name={`group${key}`}/>
+                                        <span>A.{TrainData['operateID'][0][key][0][2]}</span>
+                                    </label>
+                                    <br />
+                                    <label>
+                                        <input type="radio" value={TrainData['operateID'][0][key][0][3]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][3]} onChange={handleOptionChange} name={`group${key}`}/>
+                                        <span>B.{TrainData['operateID'][0][key][0][3]}</span>
+                                    </label>
+                                    <br />
+                                    <label>
+                                        <input type="radio" value={TrainData['operateID'][0][key][0][4]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][4]} onChange={handleOptionChange} name={`group${key}`}/>
+                                        <span>C.{TrainData['operateID'][0][key][0][4]}</span>
+                                    </label>
+                                    <br />
+                                    <label>
+                                        <input type="radio" value={TrainData['operateID'][0][key][0][5]}  checked={choice_answer[key] === TrainData['operateID'][0][key][0][5]} onChange={handleOptionChange} name={`group${key}`}/>
+                                        <span>D.{TrainData['operateID'][0][key][0][5]}</span>
+                                    </label>
+                                </div>
                             </tr>
                         ))}
-                        
                     </tbody>
                 </table>
-            )}
-            <button onClick={click}>测试</button><button onClick={clear}>清除测试</button><button onClick={submit}>假提交按钮</button>
-            <Link to={`/operation2/${operateID}`}><button onClick={saveAnswers}>下一页</button></Link>
+                )}
+                {TrainData&&(
+                    <table className='body-right1-comple'>
+                        <tbody>
+                        <p>填空题</p>
+                        {Object.keys(TrainData['operateID'][1]).map((key,index)=>(
+                            <tr key={key}>
+                                <tr className='test-title1'>{index+1}.{TrainData['operateID'][1][key][0][1]}</tr>
+                                {/* <br /> */}
+                                <div className='input-box'>
+                                    <span>请填入你的答案：</span>
+                                    <input type="text" onChange={handleInputChange} name={key} value={completion_answer[key]||''}/>
+                                </div>
+                            </tr>
+                        ))}
+                        </tbody>
+                    </table>
+                )}
+                {TrainData&&(
+                    <table>
+                        <tbody>
+                            <p>判断题</p>
+                            {Object.keys(TrainData['operateID'][2]).map((key,index)=>(
+                                <tr key={key}>
+                                    <tr>{index+1}.{TrainData['operateID'][2][key][0][1]}</tr>
+                                    <tr>
+                                        <label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'true'} onChange={handleJudgeOption} value={true} />T</label>
+                                        <label><input type="radio" name={`judge${key}`} checked={judge_answer[key] === 'false'} onChange={handleJudgeOption} value={false} />F</label>
+                                    </tr>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                )}
+                <button onClick={click}>测试</button><button onClick={clear}>清除测试</button><button onClick={submit}>假提交按钮</button>
+                <Link to={`/operation2/${operateID}`}><button onClick={saveAnswers}>下一页</button></Link>
             </div>
         </div>
     </div>

app-dm/src/pages/ListPages/Training/Operation2.css

@@ -25,8 +25,10 @@
     box-shadow: 2px 2px 6px #d4d4d4;
 }
 .nav-left-operation2 p{
-    font-size: 16px;
+    height: 10px;
+    font-size: 15px;
     padding: 0 10px;
+    margin-top: 6px;
 }
 .nav-left-ul2{
     width: 175px;

app-dm/src/router/index.jsx

@@ -23,8 +23,8 @@ import ClassID from '../TeacherPages/classlistpages/classId';
 import ManageTest from '../TeacherPages/TestManage/ManageTest';
 import SendTest from '../TeacherPages/TestManage/SendTest';
 import Marking from '../TeacherPages/MarkingPages/Marking';
-import SendTrain from '../TeacherPages/Trainmanage/SendTrain'
-import TrainManage from '../TeacherPages/Trainmanage/Trainmanage'
+import SendTrain from '../TeacherPages/TrainManage/SendTrain'
+import TrainManage from '../TeacherPages/TrainManage/Trainmanage'
 import StudentLink from '../TeacherPages/MarkingPages/StudentLink';