diff --git a/app-dm/package-lock.json b/app-dm/package-lock.json index 4d8fc5d..a462fec 100644 --- a/app-dm/package-lock.json +++ b/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", diff --git a/app-dm/package.json b/app-dm/package.json index ccc49a9..89c2d69 100644 --- a/app-dm/package.json +++ b/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", diff --git a/app-dm/src/TeacherPages/Trainmanage/SendTrain.css b/app-dm/src/TeacherPages/Trainmanage/SendTrain.css index 42a3794..79e556a 100644 --- a/app-dm/src/TeacherPages/Trainmanage/SendTrain.css +++ b/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{ - all: unset; +/* 左边导航 */ +.SendTrain_body_left h3{ + 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{ - text-align: center; +.SendTrain_body_left_ul{ + /* 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{ - background-color: aqua; - font-size: 36px; - margin-top: 43px; +.left-list-ul li{ + text-align: center; + font-size: 18px; + 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; } \ No newline at end of file diff --git a/app-dm/src/TeacherPages/Trainmanage/SendTrain.jsx b/app-dm/src/TeacherPages/Trainmanage/SendTrain.jsx index 17044c4..4094c03 100644 --- a/app-dm/src/TeacherPages/Trainmanage/SendTrain.jsx +++ b/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,188 +137,239 @@ 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(
-
- -
-
-

题目选择

- {/* 实训题 */} - {isTrain&&
-
-
- 设计达梦数据库课程实验实训，按照提供的达梦数据库安装文档，在系统中实现达梦数据库安装、连接及使用 -
-
- - { - if(event.target.checked){ - setTrain(items=>([ - ...items, - event.target.value - ])) - }else{ - setTrain((items)=> - items.filter((item)=>item!==event.target.value)) - } - }}/>是否选择 - -
-
-
-
- 设计和实现一个Web前端开发和DM8数据库后端结合的项目实训。 -
-
- - { - if(event.target.checked){ - setTrain(items=>([ - ...items, - event.target.value - ])) - }else{ - setTrain((items)=> - items.filter((item)=>item!==event.target.value)) - } - }}/>是否选择 - -
-
-
} - - {/* 基础题 */} - {Trainquestion && - 选择题 - - {Object.keys(Trainquestion['choice']).map((key)=>( - - {/* 章节切换⬇ */} +
+

题目集

+
    +
  • + +
      +
    • 第一章
      • +
    • 第二章
      • +
    +
    • +
  • + +
    • +
+
+
+

题目选择

+ {/* 基础题 */} + {Trainquestion &&
+ 选择题 + + {Object.keys(Trainquestion['choice']).map((key)=>( + + {/* 章节切换⬇ */} - - - -
-
A:{Trainquestion['choice'][key][2]} - B:{Trainquestion['choice'][key][3]} - C:{Trainquestion['choice'][key][4]} - D:{Trainquestion['choice'][key][5]} - +
{Trainquestion['choice'][key][8]}
+ + + + +
+
A:{Trainquestion['choice'][key][2]} + B:{Trainquestion['choice'][key][3]} + C:{Trainquestion['choice'][key][4]} + D:{Trainquestion['choice'][key][5]} + { - if (event.target.checked) { - //在选择题目集中添加选择题的ID - setTrainChoice(items=>([ - ...items, - Trainquestion['choice'][key][7] - ])) - }else{ - setTrainChoice((items)=> - items.filter((item)=>item!==Trainquestion['choice'][key][7]) - ) - } - }} />是否选择 + if (event.target.checked) { + //在选择题目集中添加选择题的ID + setTrainChoice(items=>([ + ...items, + Trainquestion['choice'][key][7] + ])) + }else{ + setTrainChoice((items)=> + items.filter((item)=>item!==Trainquestion['choice'][key][7]) + ) + } + }} /> + 是否选择 - ))} - 填空题 - {Object.keys(Trainquestion['completion']).map((key)=>( - - - { - if (event.target.checked) { - //在选择题目集中添加选择题的ID - setTrainCompletion(items=>([ - ...items, - Trainquestion['completion'][key][3] - ])) - }else{ - setTrainCompletion((items)=> - items.filter((item)=>item!==Trainquestion['completion'][key][3]) - ) - } - }} />是否选择 + ))} + 填空题 + {Object.keys(Trainquestion['completion']).map((key)=>( + + - - ))} - 判断题 - {Object.keys(Trainquestion['judge']).map((key)=>( + { + if (event.target.checked) { + //在选择题目集中添加选择题的ID + setTrainCompletion(items=>([ + ...items, + Trainquestion['completion'][key][3] + ])) + }else{ + setTrainCompletion((items)=> + items.filter((item)=>item!==Trainquestion['completion'][key][3]) + ) + } + }} /> + 是否选择 + + + ))} + 判断题 + {Object.keys(Trainquestion['judge']).map((key)=>( { - if (event.target.checked) { - setTrainJudge(items=>([ - ...items, - Trainquestion['judge'][key][3] - ])) - }else{ - setTrainJudge((items)=> - items.filter((item)=>item!==Trainquestion['judge'][key][3]) - ) - } - }} />是否选择 + if (event.target.checked) { + setTrainJudge(items=>([ + ...items, + Trainquestion['judge'][key][3] + ])) + }else{ + setTrainJudge((items)=> + items.filter((item)=>item!==Trainquestion['judge'][key][3]) + ) + } + }} /> + 是否选择 - ))} - -
-
{Trainquestion['choice'][key][8]}
-
问.{Trainquestion['choice'][key][1]}
问.{Trainquestion['choice'][key][1]}
- {Trainquestion['completion'][key][4]} - - 问.{Trainquestion['completion'][key][1]} -
+ {Trainquestion['completion'][key][4]} + + 问.{Trainquestion['completion'][key][1]}
{Trainquestion['judge'][key][4]} 问:{Trainquestion['judge'][key][1]}
} - -
- {/* 右边的内容 */} -
-
-
-

请选择发布班级

- { ClassData &&
    - {Object.keys(ClassData).map((key)=>( -
  • -
    click_div(key)}> - {key} -
    -
    • ))} -
} + + } + {/* 实训题 */} + {isTrain&&
+
+
+ 设计达梦数据库课程实验实训，按照提供的达梦数据库安装文档，在系统中实现达梦数据库安装、连接及使用
-
-

请填写考试时间

- 小时 - - 分钟 -

请填写截至时间

- 天后 +
+ + { + if(event.target.checked){ + setTrain(items=>([ + ...items, + event.target.value + ])) + }else{ + setTrain((items)=> + items.filter((item)=>item!==event.target.value)) + } + }}/>是否选择 +
-
+
+
+ 设计和实现一个Web前端开发和DM8数据库后端结合的项目实训。 +
+
+ + { + if(event.target.checked){ + setTrain(items=>([ + ...items, + event.target.value + ])) + }else{ + setTrain((items)=> + items.filter((item)=>item!==event.target.value)) + } + }}/>是否选择 + +
+
+
} + +
+ {/* 最右边的内容 */} +
+
+
+

请选择发布班级

+ { ClassData &&
    + {Object.keys(ClassData).map((key)=>( +
  • +
    click_div(key)}> + {key} +
    +
    • + ))} +
} +
+
+

请填写考试总时长

+ 小时 + {/* */} + 分钟 + {/* 日历 */} +

请填写考试开始、截止日期

+
+ + - + +
+

总天数：{calculateTotalDays()}天

+
+
+
) }