This commit is contained in:
nopy 2024-06-30 01:37:56 +08:00
parent 2b499c9347
commit 634321d69d
4 changed files with 366 additions and 179 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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;
}

View File

@ -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>
<select name="" id="" alue={MinValue} onChange={getminvalue}>
}}>asd</button> */}
<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>