1

app-dm/package-lock.json

@@ -31,6 +31,7 @@
         "postcss": "^8.4.38",
         "react": "^18.3.1",
         "react-chartjs-2": "^5.2.0",
+        "react-datepicker": "^7.2.0",
         "react-dom": "^18.3.1",
         "react-redux": "^9.1.2",
         "react-router-dom": "^6.23.0",
@@ -2737,6 +2738,54 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.3.tgz",
+      "integrity": "sha512-1ZpCvYf788/ZXOhRQGFxnYQOVgeU+pi0i+d0Ow34La7qjIXETi6RNswGVKkA6KcDO8/+Ysu2E/CeUmmeEBDvTg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.6.tgz",
+      "integrity": "sha512-qiTYajAnh3P+38kECeffMSQgbvXty2VB6rS+42iWR4FPIlZjLK84E9qtLnMTLIpPz2znD/TaFqaiavMUrS+Hcw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.3"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.18",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/react/-/react-0.26.18.tgz",
+      "integrity": "sha512-enDDX09Jpi3kmhcXXpvs+fvRXOfBj1jUV2KF6uDMf5HjS+SOZJzNTFUW71lKbFcxz0BkmQqwbvqdmHIxMq/fyQ==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.0",
+        "@floating-ui/utils": "^0.2.3",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
+      "integrity": "sha512-4h84MJt3CHrtG18mGsXuLCHMrug49d7DFkU0RMIyshRveBeyV2hmV/pDaF2Uxtu8kgq5r46llp5E5FQiR0K2Yg==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.3.tgz",
+      "integrity": "sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -7387,6 +7436,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.4.tgz",
@@ -15233,6 +15291,22 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmmirror.com/react-datepicker/-/react-datepicker-7.2.0.tgz",
+      "integrity": "sha512-Hhs1Fk6/ZqpGGg9QX/JjzvgEJoSFKYCAvRVdBbjxvOjflsXutFprAl/E0ZOm1J+/b/jQqU03WMTTNLcw5nXcuw==",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.2",
+        "clsx": "^2.1.0",
+        "date-fns": "^3.3.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.13.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmmirror.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -15408,6 +15482,19 @@
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-onclickoutside": {
+      "version": "6.13.1",
+      "resolved": "https://registry.npmmirror.com/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
+      "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/react-redux": {
       "version": "9.1.2",
       "resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-9.1.2.tgz",
@@ -17098,6 +17185,11 @@
       "integrity": "sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==",
       "dev": true
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.3",
       "resolved": "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-3.4.3.tgz",

app-dm/package.json

@@ -25,6 +25,7 @@
     "postcss": "^8.4.38",
     "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^7.2.0",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.0",

app-dm/src/TeacherPages/Trainmanage/SendTrain.css

@@ -2,34 +2,48 @@
     width: 100%;    
     display: flex;
 }
+/* 页面区域占比 */
 .SendTrain_body_left{
-    flex: 20%;
+    flex: 11%;
+    /* border: 1px solid #000; */
 }
 .SendTrain_body_right{
     flex: 60%;
 }
 
-
+/* 左边导航 */
-.SendTrain_body_left_ul{
+.SendTrain_body_left h3{
-    all: unset;
+    background-color: #a7f4e2;
+    height: 50px;
+    line-height: 50px;
+    font-size: 26px;
+    font-weight: 440;
+    margin-top: 43px;
+    padding-left: 75px;
 }
-.SendTrain_body_left_ul li{
+.SendTrain_body_left_ul{
-    text-align: center;
+    /* all: unset; */
+    list-style-type: none;
+    margin-left: -40px;
+    margin-top: -28px;
 }
 .SendTrain_body_left_ul button{
-    background-color: rgb(114, 134, 232);
+    background-color: rgb(247, 232, 189);
     border: none;
     width: 100%;
+    height: 40px;
     margin-top: 20px;
-    font-size: 28px;
+    font-size: 22px;
 }
-.SendTrain_body_left_ul_div{
+.left-list-ul li{
-    background-color: aqua;
+    text-align: center;
-    font-size: 36px;
+    font-size: 18px;
-    margin-top: 43px;
+    padding-top: 10px;
 }
+
+/* 页面中间题目(基础题) */
 .SendTrain_body_right p{
-    font-size: 32px;
+    font-size: 30px;
     border: 1px solid black;
     text-align: center;
     margin-top: 0px;
@@ -42,7 +56,7 @@
     border-right: 1px solid black;
 }
 .title{
-    font-size: 26px;
+    font-size: 25px;
     margin-bottom: 0px;
 }
 .questiontitle{
@@ -120,7 +134,6 @@
 
 
 /* 右边的内容 */
-
 .right_right{
     flex: 20%;
 }
@@ -174,9 +187,37 @@
 
 .TrainSelectTime{
     width: 95%;
-    height: 200px;
+    height: 220px;
     background-color: beige;
     text-align: center;
     margin-left: 7px;
     border-radius: 20px;
 }
+.TrainSelectTime p{
+    padding-top: 10px;
+}
+.TrainSelectTime p::before{
+    content: "▶";
+}
+
+.calendar-box span{
+    position: absolute;
+    /* top: 20px; */
+    top: 380px;
+    right: 160px;
+}
+.calendar1{
+    width: 100px;
+    height: 20px;
+    position: absolute;
+    left: -110px;
+}
+.calendar2{
+    width: 100px;
+    height: 20px;
+    position: absolute;
+    right: -130px;
+}
+.data-num{
+    margin-top: 30px;
+}

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

@@ -2,6 +2,8 @@ import React,{ useState ,useEffect} from 'react';
 import { Link } from 'react-router-dom';
 import './SendTrain.css'
 import axios from 'axios';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 
 function SendTrain(){
     const teacher_ID=localStorage.getItem('islogin')
@@ -135,23 +137,136 @@ function SendTrain(){
         SetStopTime(event.target.value)
     }
 
+    // 日历
+    // 用于存储开始日期和结束日期的状态
+    const [startDate, setStartDate] = useState(new Date());
+    const [endDate, setEndDate] = useState(new Date());
+    // 格式化日期显示
+    const formatDate = (date) => {
+        return date.toLocaleDateString();
+    };
+    // 选择日期时更新状态
+    const handleStartDateChange = (date) => {
+        setStartDate(date);
+    };
+    const handleEndDateChange = (date) => {
+        setEndDate(date);
+    };
+    // 计算并显示总天数
+    const calculateTotalDays = () => {
+        const differenceInTime = endDate - startDate;
+        const differenceInDays = Math.floor(differenceInTime / (1000 * 60 * 60 * 24));
+        return differenceInDays;
+    };
+    useEffect(() => {
+        console.log(calculateTotalDays());
+      }, [startDate, endDate]);
+
     return(
         <div className='SendTrain_body'>
             <div className='SendTrain_body_left'>
+                <h3>题目集</h3>
                 <ul className='SendTrain_body_left_ul'>
-                        <li><div className='SendTrain_body_left_ul_div'>题目集</div></li>
                     <li>
                         <button onClick={clickQuestion}>基础题</button>
-                            <ul style={{all:'unset'}}>
+                        <ul style={{all:'unset'}} className='left-list-ul'>
                             <li>第一章</li>
                             <li>第二章</li>
                         </ul>
                     </li>
-                        <li><button onClick={clickTrain}>实训题</button></li>
+                    <li>
+                        <button onClick={clickTrain}>实训题</button>
+                    </li>
                 </ul>
             </div>
             <div className='SendTrain_body_right'>
                 <p>题目选择</p>
+                {/* 基础题 */}
+                {Trainquestion &&<table>
+                    <span className='title'>选择题</span>
+                    <tbody>
+                        {Object.keys(Trainquestion['choice']).map((key)=>(
+                            <tr key={key}>
+                                {/* 章节切换⬇ */}
+                                <td className='Trainbox'>
+                                    <div>{Trainquestion['choice'][key][8]}</div>
+                                    <tr>
+                                        <td className='questiontitle'>问.{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>
+                                        </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>
+                                </td>
+                            </tr>
+                        ))}
+                        <span className='title'>填空题</span>
+                        {Object.keys(Trainquestion['completion']).map((key)=>(
+                            <tr key={key}>
+                                <td className='Trainbox'>
+                                    {Trainquestion['completion'][key][4]}
+                                    <td className='questiontitle'>
+                                        问.{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>
+                                </td>
+                            </tr>
+                        ))}
+                        <span className='title'>判断题</span>
+                        {Object.keys(Trainquestion['judge']).map((key)=>(
+                            <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>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>}
                 {/* 实训题 */}
                 {isTrain&&<div className='Train_div'>
                     <div id='Train_1'>
@@ -195,93 +310,9 @@ function SendTrain(){
                         </div>
                     </div>
                 </div>}
-
-                    {/* 基础题 */}
-                    {Trainquestion &&<table>
-                        <span className='title'>选择题</span>
-                        <tbody>
-                            {Object.keys(Trainquestion['choice']).map((key)=>(
-                                <tr key={key}>
-                                    {/* 章节切换⬇ */}
-                                <td className='Trainbox'>
-                                <div>{Trainquestion['choice'][key][8]}</div>
-                                <tr>
-                                    <td className='questiontitle'>问.{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>
-                                    </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>
-                                </td>
-                            </tr>
-                            ))}
-                            <span className='title'>填空题</span>
-                            {Object.keys(Trainquestion['completion']).map((key)=>(
-                                <tr key={key}>
-                                    <td className='Trainbox'>
-                                        {Trainquestion['completion'][key][4]}
-                                        <td className='questiontitle'>
-                                            问.{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>
-                                    </td>
-                                </tr>
-                            ))}
-                            <span className='title'>判断题</span>
-                            {Object.keys(Trainquestion['judge']).map((key)=>(
-                            <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>
-                            </tr>
-                            ))}
-                        </tbody>
-                    </table>}
                 <button onClick={SendTrainBtn} id='SendTrainBtn'>发布按钮</button>
             </div>
-                {/* 右边的内容 */}
+            {/* 最右边的内容 */}
             <div className='right_right'>
                 <div className='OptionBox'>
                     <div className='TrainSelectClass'>
@@ -297,23 +328,45 @@ function SendTrain(){
                         </ul>}
                     </div>
                     <div className='TrainSelectTime'>
-                        <p>请填写考试时间</p>
+                        <p>请填写考试总时长</p>
                         <select name="" id="" alue={HourValue} onChange={gethourvalue}>
                             {Object.keys(hour_list).map((num)=>(
                                 <option value={num} key={num}>{num}</option>
                             ))}
                         </select>小时
-                    <button onClick={()=>{
+                        {/* <button onClick={()=>{
                             console.log(selectedItems);
                             console.log(Train);
-                    }}>asd</button>
+                        }}>asd</button> */}
-                    <select name="" id="" alue={MinValue} onChange={getminvalue}>
+                        <select name="" id="" value={MinValue} onChange={getminvalue}>
                             {min_list.map((num)=>(
                                 <option value={num} key={num}>{num}</option>
                             ))}
                         </select>分钟
-                    <p>请填写截至时间</p>
+                        {/* 日历 */}
-                    <input type="text" maxLength={10} style={{width:'30px'}} value={StopTime} onChange={getstoptime} />天后
+                        <p>请填写考试开始、截止日期</p>
+                        <div className='calendar-box'>
+                            <DatePicker
+                                selected={startDate}
+                                onChange={handleStartDateChange}
+                                dateFormat="yyyy/MM/dd"
+                                placeholderText="选择开始日期"
+                                popperPlacement="left-start"
+                                className='calendar1'
+                            />
+                            <span>-</span>
+                            <DatePicker
+                                selected={endDate}
+                                onChange={handleEndDateChange}
+                                dateFormat="yyyy/MM/dd"
+                                placeholderText="选择结束日期"
+                                minDate={startDate} // 设置最小日期为开始日期
+                                withFullScreenPortal={false} // 避免全屏模式
+                                popperPlacement="left-start"
+                                className='calendar2'
+                            />
+                        </div>
+                        <p className='data-num'>总天数：{calculateTotalDays()}天</p>
                     </div>
                 </div>
             </div>