From 6641a36622dee4550c8ef4b47e71eb1f6c7c34d3 Mon Sep 17 00:00:00 2001 From: xialiang <1818147@qq.com> Date: Fri, 25 Feb 2022 17:04:57 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E6=8B=9F=E7=AD=94=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/config/config.ts | 15 +- web/src/global.less | 23 ++ web/src/pages/course/list/index.tsx | 236 +++++++------- web/src/pages/examination/paper/index.tsx | 71 ++--- .../mockExamination/chapterExamination.tsx | 13 +- web/src/pages/mockExamination/chapterList.tsx | 224 ++++++++++++++ web/src/pages/mockExamination/index.tsx | 133 ++++---- web/src/pages/mockExamination/paper/data.d.ts | 29 ++ web/src/pages/mockExamination/paper/index.tsx | 290 ++++++++++++++++++ .../pages/mockExamination/paper/service.ts | 10 + .../pages/mockExamination/paper/style.less | 153 +++++++++ .../mockExamination/paper/utils/utils.less | 50 +++ web/src/pages/mockExamination/service.ts | 67 +++- 13 files changed, 1099 insertions(+), 215 deletions(-) create mode 100644 web/src/pages/mockExamination/chapterList.tsx create mode 100644 web/src/pages/mockExamination/paper/data.d.ts create mode 100644 web/src/pages/mockExamination/paper/index.tsx create mode 100644 web/src/pages/mockExamination/paper/service.ts create mode 100644 web/src/pages/mockExamination/paper/style.less create mode 100644 web/src/pages/mockExamination/paper/utils/utils.less diff --git a/web/config/config.ts b/web/config/config.ts index 92bbdd2..221e2ee 100644 --- a/web/config/config.ts +++ b/web/config/config.ts @@ -130,17 +130,30 @@ export default defineConfig({ path: '/mockExamination', routes: [ { - name: '章节模拟练习', + name: '章节模拟练习-主题列表', path: '/mockExamination/chapterExamination', component: './mockExamination/chapterExamination', }, + { + name: '章节模拟练习-章节列表', + path: '/mockExamination/chapterList/:data_id/:data_type/:subject_id', + component: './mockExamination/chapterList', + hideInMenu: true, + }, { name: '综合模拟考试', icon: 'smile', path: '/mockExamination/index', component: './mockExamination/index', }, + { + name: '综合模拟考试答题', + icon: 'smile', + path: '/mockExamination/paper/:rules_id', + component: './mockExamination/paper', + hideInMenu: true, + }, ] }, { diff --git a/web/src/global.less b/web/src/global.less index e2758ce..4c66ee0 100644 --- a/web/src/global.less +++ b/web/src/global.less @@ -70,4 +70,27 @@ ol { } .ant-pro-global-header-logo a img{ filter: grayscale(100%) brightness(500%); +} + +.pdefault{ + margin: -1px; + border: #cccccc 1px solid; + border-radius: 5px; + color: #999999; + width: 40px; + height: 40px; + background-color: #ffffff; + text-align: center; + display:flex; + font-size: 18px; + justify-content: center; + align-items: center; +} +.pact{ + border: #1895ff 1px solid; + color: #1895ff; +} +.pok{ + border: aquamarine 1px solid; + color: aquamarine; } \ No newline at end of file diff --git a/web/src/pages/course/list/index.tsx b/web/src/pages/course/list/index.tsx index 43dab26..5662f1f 100644 --- a/web/src/pages/course/list/index.tsx +++ b/web/src/pages/course/list/index.tsx @@ -1,9 +1,9 @@ import { AlignLeftOutlined, LaptopOutlined, NotificationOutlined, PlusOutlined, UserOutlined } from '@ant-design/icons'; -import {useEffect, useState} from 'react'; +import { useEffect, useState } from 'react'; import { Button, Card, Col, Layout, List, Menu, Progress, Row, Typography } from 'antd'; import { PageContainer } from '@ant-design/pro-layout'; -import {useParams, useRequest} from 'umi'; -import { viewMyLearningSubject,listMyLearningChapterCourse } from './service'; +import { useParams, useRequest } from 'umi'; +import { viewMyLearningSubject, listMyLearningChapterCourse } from './service'; import type { CardListItemDataType } from './data.d'; import styles from './style.less'; import SubMenu from 'antd/lib/menu/SubMenu'; @@ -29,7 +29,7 @@ import cookie from 'react-cookies'; const CardList = () => { const params = useParams(); - console.log('params',params); + console.log('params', params); const ids = params.msg.split(','); const [currentCourse, SetCurrentCourse] = useState() @@ -37,51 +37,51 @@ const CardList = () => { /** 获取主题下课程 */ const { data } = useRequest(() => { return viewMyLearningSubject({ - identity_id:cookie.load('identity_id'), - person_id:cookie.load('person_id'), - data_id:ids[0], - data_type:ids[1], - subject_id:ids[2] + identity_id: cookie.load('identity_id'), + person_id: cookie.load('person_id'), + data_id: ids[0], + data_type: ids[1], + subject_id: ids[2] }); }); - const list = data?.list||[]; - const subject_data=data?data.subject:[]; - const last_data=data?data.last_learning_course:[]; - const chapter_list=data?data.chapter_list:[]; + const list = data?.list || []; + const subject_data = data ? data.subject : []; + const last_data = data ? data.last_learning_course : []; + const chapter_list = data ? data.chapter_list : []; -//console.log('currentCourse', currentCourse) + //console.log('currentCourse', currentCourse) /** 获取课程详情 */ - const {data: chapterCourse, run, loading } = useRequest((params:{subject_id:number, chapter_id:number}) => { + const { data: chapterCourse, run, loading } = useRequest((params: { subject_id: number, chapter_id: number }) => { return listMyLearningChapterCourse({ - identity_id:cookie.load('identity_id'), - person_id:cookie.load('person_id'), - subject_id: params?.subject_id,//chapter_list[0].subject_id - chapter_id: params?.chapter_id,//chapter_list[0].chapter_id + identity_id: cookie.load('identity_id'), + person_id: cookie.load('person_id'), + subject_id: params?.subject_id,//chapter_list[0].subject_id + chapter_id: params?.chapter_id,//chapter_list[0].chapter_id }); }); - /** 首次页面 当data 变化 执行run， chapterCourse 变化 进行currentCourse赋值 */ + /** 首次页面 当data 变化 执行run， chapterCourse 变化 进行currentCourse赋值 */ useEffect(() => { - console.log('chapterCourse...', chapterCourse) - if(data !== undefined && data !== null){ - run({subject_id:data?.chapter_list[0]?.subject_id, chapter_id:data?.chapter_list[0]?.chapter_id}) + console.log('chapterCourse...', chapterCourse) + if (data !== undefined && data !== null) { + run({ subject_id: data?.chapter_list[0]?.subject_id, chapter_id: data?.chapter_list[0]?.chapter_id }) SetCurrentCourse(chapterCourse) } //setSelectedCourse({}) - },[data]); + }, [data]); - /** run后 chapterCourse 变化 进行currentCourse赋值 */ + /** run后 chapterCourse 变化 进行currentCourse赋值 */ useEffect(() => { - console.log('chapterCourse...', chapterCourse) - if(data !== undefined){ + console.log('chapterCourse...', chapterCourse) + if (data !== undefined) { console.log('data', data) SetCurrentCourse(chapterCourse) } //setSelectedCourse({}) - },[chapterCourse]); + }, [chapterCourse]); // if(chapter_list.length!==0){ // // // const msg = useRequest(() => { @@ -96,37 +96,37 @@ const CardList = () => { // // console.log('msg',msg) // } - // const msg = await listMyLearningChapterCourse({ - // identity_id:cookie.load('identity_id'), - // person_id:cookie.load('person_id'), - // subject_id:chapter_list[0].subject_id, - // chapter_id:chapter_list[0].chapter_id, - // }); - // console.log('msg======',msg) + // const msg = await listMyLearningChapterCourse({ + // identity_id:cookie.load('identity_id'), + // person_id:cookie.load('person_id'), + // subject_id:chapter_list[0].subject_id, + // chapter_id:chapter_list[0].chapter_id, + // }); + // console.log('msg======',msg) const content = (
{subject_data?subject_data.subject_name:'--'}} + title={{subject_data ? subject_data.subject_name : '--'}} hoverable={false} className={styles.card} actions={[]} - extra={<>开始学习时间: {subject_data?subject_data.learning_start_time:'--'}距离结束时间：{subject_data?subject_data.distance_end_time:'--'}考核学时：{subject_data?subject_data.total_course_hours:'--'}小时} + extra={<>开始学习时间: {subject_data ? subject_data.learning_start_time : '--'}距离结束时间：{subject_data ? subject_data.distance_end_time : '--'}考核学时：{subject_data ? subject_data.total_course_hours : '--'}小时} > } + avatar={} title={false} description={ <> - - - {subject_data?subject_data.subject_describe:'--'} + + + {subject_data ? subject_data.subject_describe : '--'} - 学习进度： + 学习进度： - 上次学习：{last_data?last_data.course_name:'--'} 主讲人：{last_data?last_data.lecture_teacher:'--'} + 上次学习：{last_data ? last_data.course_name : '--'} 主讲人：{last_data ? last_data.lecture_teacher : '--'} @@ -137,32 +137,32 @@ const CardList = () => { ); - console.log('iddddddd',chapter_list.length!==0?chapter_list[0].chapter_id.toString():'') + console.log('iddddddd', chapter_list.length !== 0 ? chapter_list[0].chapter_id.toString() : '') const nullData: Partial = {}; return ( - + } title="章节目录"> { - chapter_list.length!==0? - chapter_list.map((item)=>{ - return( - { + return ( + { - run({subject_id:item.subject_id, chapter_id:item.chapter_id}) + onClick={() => { + run({ subject_id: item.subject_id, chapter_id: item.chapter_id }) }} >{item.chapter_name} - ) + ) - }):'' + }) : '' } {/*生涯规划理论*/} {/*生涯规划基本步骤*/} @@ -180,72 +180,72 @@ const CardList = () => { - + {console.log('chapterCourse', chapterCourse)} - { - chapterCourse !== undefined ? - <> - <>{chapterCourse[0]?.course_name} - <>{chapterCourse[0]?.lecture_teacher} - - : <>暂无 - } - + { + chapterCourse !== undefined ? + <> + <>{chapterCourse[0]?.course_name} + <>{chapterCourse[0]?.lecture_teacher} + + : <>暂无 + } + > - rowKey="id" - // loading={loading} - grid={{ - gutter: 1, - xs: 1, - sm: 2, - md: 1, - lg: 1, - xl: 1, - xxl: 1, - }} - dataSource={[nullData, ...list]} - renderItem={(item) => { - if (item && item.id) { - return ( - - - {item.title}} - description={ - - - 第1讲 - - - - {item.description} - - - - 23分钟 - - - - - - - - - } - /> - - - ); - } - }} - /> + rowKey="id" + // loading={loading} + grid={{ + gutter: 1, + xs: 1, + sm: 2, + md: 1, + lg: 1, + xl: 1, + xxl: 1, + }} + dataSource={[nullData, ...list]} + renderItem={(item) => { + if (item && item.id) { + return ( + + + {item.title}} + description={ + + + 第1讲 + + + + {item.description} + + + + 23分钟 + + + + + + + + + } + /> + + + ); + } + }} + /> diff --git a/web/src/pages/examination/paper/index.tsx b/web/src/pages/examination/paper/index.tsx index 2070ff0..043edb2 100644 --- a/web/src/pages/examination/paper/index.tsx +++ b/web/src/pages/examination/paper/index.tsx @@ -2,7 +2,7 @@ import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons'; import { Switch, Button, Card, Col, List, Menu, Progress, Row, Typography, Space, Divider, Radio, Checkbox } from 'antd'; import { PageContainer } from '@ant-design/pro-layout'; -import { useRequest } from 'umi'; +import { useParams, useRequest } from 'umi'; import { queryFakeList } from '../service'; import type { CardListItemDataType } from '../data'; import styles from './style.less'; @@ -12,9 +12,10 @@ import ProCard from '@ant-design/pro-card'; const { Paragraph } = Typography; const CardList = () => { + const params = useParams(); const { data, loading } = useRequest(() => { return queryFakeList({ - count: 8, + count: params.rules_id, }); }); @@ -31,17 +32,17 @@ const CardList = () => { const numbers = []; - for(let i=0;i<50;i++){ - numbers.push({id: `${i}`}) + for (let i = 0; i < 50; i++) { + numbers.push({ id: `${i}` }) } return ( - + 一. 单选题
} @@ -53,7 +54,7 @@ const CardList = () => { {item.id} )} - style={{background:'#ffffff', margin:'-25px -24px 0 -24px'}} + style={{ background: '#ffffff', margin: '-25px -24px 0 -24px' }} /> 二. 多选题} @@ -65,7 +66,7 @@ const CardList = () => { {item.id} )} - style={{background:'#ffffff', margin:'-1px -24px'}} + style={{ background: '#ffffff', margin: '-1px -24px' }} /> 三. 判断题} @@ -77,11 +78,11 @@ const CardList = () => { {item.id} )} - style={{background:'#ffffff', margin:'-1px -24px -24px -24px'}} + style={{ background: '#ffffff', margin: '-1px -24px -24px -24px' }} /> - + { bordered headerBordered > - + - + 4. 以下哪些是符合法律规定的 ？ - {return true}} value={0} size="large"> - - A. 单位在试用期辞退员工 - B. 社会中介收取中介费 - C. 单位不缴纳五险一金 - D. 要求员工支付押金 + { return true }} value={0} size="large"> + + A. 单位在试用期辞退员工 + B. 社会中介收取中介费 + C. 单位不缴纳五险一金 + D. 要求员工支付押金 - + 5. 以下哪些是不符合法律规定的(多选) ？ - {return true}}> + { return true }}> - A. 单位在试用期辞退员工 - B. 社会中介收取中介费 - C. 单位不缴纳五险一金 - D. 要求员工支付押金 + A. 单位在试用期辞退员工 + B. 社会中介收取中介费 + C. 单位不缴纳五险一金 + D. 要求员工支付押金 - + 6. 单位在试用期辞退员工是符合法律规定的 ？ - {return true}} value={0} size="large"> - - 正确 - 错误 + { return true }} value={0} size="large"> + + 正确 + 错误 - -
- + +
+ 剩余时间 6分14秒 - + 答题序号 14/80 - + -
+
diff --git a/web/src/pages/mockExamination/chapterExamination.tsx b/web/src/pages/mockExamination/chapterExamination.tsx index 56cda94..38898c7 100644 --- a/web/src/pages/mockExamination/chapterExamination.tsx +++ b/web/src/pages/mockExamination/chapterExamination.tsx @@ -1,7 +1,7 @@ import { PlusOutlined } from '@ant-design/icons'; import { Button, Card, List, Progress, Typography, Image } from 'antd'; import { PageContainer } from '@ant-design/pro-layout'; -import { useRequest } from 'umi'; +import { useRequest, history } from 'umi'; import { listMyLearningSubject } from './service'; import styles from './style.less'; @@ -44,7 +44,7 @@ const SubjectList = () => { hoverable className={styles.card} actions={[]} - extra={<>开始学习时间: ---距离结束时间：---天考核学时：{item?.total_course_hours}} + extra={<>开始学习时间:{item?.learning_start_time}距离结束时间：{item?.distance_end_time}考核学时：{item?.total_course_hours}小时} > } @@ -56,8 +56,13 @@ const SubjectList = () => { {item.subject_describe} - - + + + + } /> diff --git a/web/src/pages/mockExamination/chapterList.tsx b/web/src/pages/mockExamination/chapterList.tsx new file mode 100644 index 0000000..175122b --- /dev/null +++ b/web/src/pages/mockExamination/chapterList.tsx @@ -0,0 +1,224 @@ +import { AlignLeftOutlined, LaptopOutlined, NotificationOutlined, PlusOutlined, UserOutlined } from '@ant-design/icons'; +import { useEffect, useState } from 'react'; +import { Button, Card, Col, Layout, List, Menu, Progress, Row, Typography } from 'antd'; +import { PageContainer } from '@ant-design/pro-layout'; +import { useParams, useRequest } from 'umi'; +import { viewMyLearningSubject, listMyLearningChapterCourse } from './service'; +import type { CardListItemDataType } from './data.d'; +import styles from './style.less'; +import SubMenu from 'antd/lib/menu/SubMenu'; +console.log('course/list') +const { Paragraph } = Typography; +import cookie from 'react-cookies'; +// const getList = async (subject_id,chapter_id ) => { +// // const hide = message.loading('正在配置'); +// try { +// const a=await listMyLearningChapterCourse({ +// identity_id:cookie.load('identity_id'), +// person_id:cookie.load('person_id'), +// subject_id:subject_id, +// chapter_id:chapter_id, +// }); +// // message.success('配置成功'); +// return a; +// } catch (error) { +// // message.error('配置失败请重试！'); +// return false; +// } +// }; + +const CardList = () => { + const params = useParams(); + console.log('params', params); + // const ids = params.msg.split(','); + + const [currentCourse, SetCurrentCourse] = useState() + + /** 获取主题下课程 */ + const { data } = useRequest(() => { + return viewMyLearningSubject({ + identity_id: cookie.load('identity_id'), + person_id: cookie.load('person_id'), + data_id: params.data_id, + data_type: params.data_type, + subject_id: params.subject_id + + }); + }); + + const list = data?.list || []; + const subject_data = data ? data.subject : []; + const last_data = data ? data.last_learning_course : []; + const chapter_list = data ? data.chapter_list : []; + + //console.log('currentCourse', currentCourse) + + /** 获取课程详情 */ + const { data: chapterCourse, run, loading } = useRequest((params: { subject_id: number, chapter_id: number }) => { + return listMyLearningChapterCourse({ + identity_id: cookie.load('identity_id'), + person_id: cookie.load('person_id'), + subject_id: params?.subject_id,//chapter_list[0].subject_id + chapter_id: params?.chapter_id,//chapter_list[0].chapter_id + }); + }); + + /** 首次页面 当data 变化 执行run， chapterCourse 变化 进行currentCourse赋值 */ + useEffect(() => { + console.log('chapterCourse...', chapterCourse) + if (data !== undefined && data !== null) { + run({ subject_id: data?.chapter_list[0]?.subject_id, chapter_id: data?.chapter_list[0]?.chapter_id }) + SetCurrentCourse(chapterCourse) + } + + }, [data]); + + /** run后 chapterCourse 变化 进行currentCourse赋值 */ + useEffect(() => { + console.log('chapterCourse...', chapterCourse) + if (data !== undefined) { + console.log('data', data) + SetCurrentCourse(chapterCourse) + } + + }, [chapterCourse]); + + + const content = ( +
+ {subject_data ? subject_data.subject_name : '--'}} + hoverable={false} + className={styles.card} + actions={[]} + extra={<>开始学习时间: {subject_data ? subject_data.learning_start_time : '--'}距离结束时间：{subject_data ? subject_data.distance_end_time : '--'}考核学时：{subject_data ? subject_data.total_course_hours : '--'}小时} + > + } + title={false} + description={ + <> + + + {subject_data ? subject_data.subject_describe : '--'} + + + 学习进度： + + + 上次学习：{last_data ? last_data.course_name : '--'} 主讲人：{last_data ? last_data.lecture_teacher : '--'} + + + + } + /> + +
+ ); + + + console.log('iddddddd', chapter_list.length !== 0 ? chapter_list[0].chapter_id.toString() : '') + const nullData: Partial = {}; + return ( + + + + + } title="章节目录"> + { + chapter_list.length !== 0 ? + chapter_list.map((item) => { + return ( + { + run({ subject_id: item.subject_id, chapter_id: item.chapter_id }) + }} + >{item.chapter_name} + ) + + }) : '' + } + + + + + + {console.log('chapterCourse', chapterCourse)} + { + chapterCourse !== undefined ? + <> + <>{chapterCourse[0]?.course_name} + <>{chapterCourse[0]?.lecture_teacher} + + : <>暂无 + } + + + > + rowKey="id" + // loading={loading} + grid={{ + gutter: 1, + xs: 1, + sm: 2, + md: 1, + lg: 1, + xl: 1, + xxl: 1, + }} + dataSource={[nullData, ...chapterCourse]} + renderItem={(item) => { + if (item && item.id) { + return ( + + + {item.title}} + description={ + + + 第1讲 + + + + {item.description} + + + + 23分钟 + + + + + + + + + } + /> + + + ); + } + }} + /> + + + + + ); +}; + +export default CardList; diff --git a/web/src/pages/mockExamination/index.tsx b/web/src/pages/mockExamination/index.tsx index e8b6552..490a0fb 100644 --- a/web/src/pages/mockExamination/index.tsx +++ b/web/src/pages/mockExamination/index.tsx @@ -1,71 +1,92 @@ import { PlusOutlined } from '@ant-design/icons'; import { Button, Card, List, Progress, Typography, Image } from 'antd'; import { PageContainer } from '@ant-design/pro-layout'; -import { useRequest } from 'umi'; -import { listMyLearningSubject } from './service'; - +import { history } from 'umi'; +import { getRulesList } from './service'; +import React, { useRef } from 'react'; import styles from './style.less'; -import NumberInfo from './components/NumberInfo'; -import cookie from 'react-cookies'; -const { Paragraph } = Typography; +import ProTable from '@ant-design/pro-table'; + +const columns: ProColumns[] = [ + { + dataIndex: 'index', + valueType: 'indexBorder', + width: 48, + }, + { + title: '标题', + dataIndex: 'rules_name', + }, + + { + title: '考试时间', + key: 'examination_time', + dataIndex: 'examination_time', + valueType: 'text', + }, + { + title: '总分', + key: 'sum_score', + dataIndex: 'sum_score', + valueType: 'text', + }, + { + title: '及格', + key: 'pass_score', + dataIndex: 'pass_score', + valueType: 'text', + }, + + { + title: '操作', + valueType: 'option', + render: (text, record, _, action) => [ + { + history.push(`/mockExamination/paper/${record.id}`); + }} + > + 开始考试 + , + + ], + }, +]; const SubjectList = () => { - /** 获取主题列表数据 */ - const { loading: subjectListLoading, data: subjectList = [] } = useRequest( - () => listMyLearningSubject( - { - identity_id: cookie.load('identity_id'), - person_id: cookie.load('person_id') - })); - console.log(subjectList); + const actionRef = useRef(); return (
- + columns={columns} + actionRef={actionRef} + request={async (value) => { + const RulesData = await getRulesList({ + ...value, + b_use: 1, + rules_type: 0 + }) + console.log(RulesData.table_List) + return { data: RulesData.table_List } + }} + editable={{ + type: 'multiple', }} - dataSource={subjectList} - renderItem={(item: SubjectListItemDataType) => { - if (item && item.subject_id) { - return ( - - {item?.subject_name}} - hoverable - className={styles.card} - actions={[]} - extra={<>开始学习时间: ---距离结束时间：---天考核学时：{item?.total_course_hours}} - > - } - title={false} - description={ - <> - - - {item.subject_describe} - - - - - - } - /> - - - ); - } + columnsState={{ + persistenceKey: 'pro-table-singe-demos', + persistenceType: 'localStorage', + }} + search={false} + rowKey="id" + toolBarRender={false} + pagination={{ + pageSize: 10, }} + dateFormatter="string" + headerTitle="高级表格" />
diff --git a/web/src/pages/mockExamination/paper/data.d.ts b/web/src/pages/mockExamination/paper/data.d.ts new file mode 100644 index 0000000..c7e663f --- /dev/null +++ b/web/src/pages/mockExamination/paper/data.d.ts @@ -0,0 +1,29 @@ +export type Member = { + avatar: string; + name: string; + id: string; +}; + +export type CardListItemDataType = { + id: string; + owner: string; + title: string; + avatar: string; + cover: string; + status: 'normal' | 'exception' | 'active' | 'success'; + percent: number; + logo: string; + href: string; + body?: any; + updatedAt: number; + createdAt: number; + subDescription: string; + description: string; + activeUser: number; + newUser: number; + star: number; + like: number; + message: number; + content: string; + members: Member[]; +}; diff --git a/web/src/pages/mockExamination/paper/index.tsx b/web/src/pages/mockExamination/paper/index.tsx new file mode 100644 index 0000000..3a36641 --- /dev/null +++ b/web/src/pages/mockExamination/paper/index.tsx @@ -0,0 +1,290 @@ +/** 资质考试 */ +import { AlignLeftOutlined, PlusOutlined } from '@ant-design/icons'; +import { Switch, Button, Card, Col, List, Menu, Progress, Row, Typography, Space, Divider, Radio, Checkbox } from 'antd'; +import { PageContainer } from '@ant-design/pro-layout'; +import { useParams, useRequest } from 'umi'; +import { useState } from 'react'; +const { Text, Link } = Typography; +import { getRulesPaper, getPaperQuestionList } from '../service'; +import type { CardListItemDataType } from '../data'; +import styles from './style.less'; +import SubMenu from 'antd/lib/menu/SubMenu'; +import ProCard from '@ant-design/pro-card'; + +const { Paragraph } = Typography; + +const CardList = () => { + // 组卷详情查询 + const [rulesPaperInfo, setRulesPaperInfo] = useState([]); + // 试题列表 + const [paperInfo, setPaperInfo] = useState([]); + //答题卡列表 + const [questionTypeList, setQuestionTypeList] = useState([]) + // 当前答题id + const [questionNow, setQuestionNow] = useState([]) + + + + + const [parsingShow, setParsingShow] = useState(false) + + + + + + const params = useParams(); + const { loading, data } = useRequest(() => { + return getRulesPaper({ + rules_id: params.rules_id + }); + }, + { + formatResult: (result) => { + return result; + }, + onSuccess: (result) => { + if (result.success) { + setRulesPaperInfo(result.question_list || []) + console.log(result, 'result1') + run({ paper_id: result.question_list[0].paper_id, question_type_count: result.question_list[0].question_type_count }) + // setQuestionTypeList(result.question_list[0].question_type_count) + } + } + }); + + const { run } = useRequest(getPaperQuestionList, + { + refreshDeps: [rulesPaperInfo], + manual: true, + formatResult: (result) => { + return result; + }, + onSuccess: (result, params) => { + // setRulesPaperInfo(result || []) + if (result.success) { + // 试题列表 + const paperList = result.question_list; + + const qList = params[0].question_type_count + const questionList = [] + qList.map((e, i) => { + if (e.count > 0) { + questionList.push({ + children: [], + ...e + }) + } + }) + // 根据分类拆分试题 左侧答题卡 + paperList.map((e) => { + questionList.map((item, index) => { + if (item.question_type == e.question_type) { + questionList[index].children.push({ ...e, question_type: item.question_type, answerSelect: "" }) + } + }) + }) + + // 根据答题卡生成考试顺序 + const questionInfo = [] + for (let i = 0; i < questionList.length; i++) { + console.log(questionList[i], 'iiii') + questionList[i].children.map((e, index) => { + console.log(e, "num"); + questionInfo.push({ ...e, index: index }) + }) + } + + + + + setPaperInfo(questionInfo || []) + setQuestionNow(questionInfo[0] || []) + setQuestionTypeList(questionList || []) + + } + } + }); + const content = ( +
+

+ 试卷信息：{rulesPaperInfo[0]?.rules_name} +

+
+ ); + + + // console.log(rulesPaperInfo, 'rulesPaperInfo', questionList) + + const numbers = []; + for (let i = 0; i < 50; i++) { + numbers.push({ id: `${i}` }) + } + const tiNum = (a: number) => { + switch (a) { + case 0: + return "A：" + break; + case 1: + return "B：" + break; + case 2: + return "C：" + break; + case 3: + return "D：" + break; + case 4: + return "E：" + break; + case 5: + return "F：" + break; + case 6: + return "G：" + break; + case 7: + return "H：" + break; + case 8: + return "I：" + break; + case 9: + return "J：" + break; + default: + return "" + break; + } + + } + return ( + + + + + {console.log("当前题号：", questionNow, "试题顺序：", paperInfo)} + { + + questionTypeList && ( + + questionTypeList.map((e, i) => { + console.log(e.children, 'e.children') + return { + console.log(item, 'list') + return + }} + style={{ background: '#ffffff', margin: '-25px -24px 24px -24px' }} + /> + } + ) + + + )} + 二. 多选题} + footer={false} + bordered + dataSource={numbers} + renderItem={item => ( + + {item.id} + + )} + style={{ background: '#ffffff', margin: '-1px -24px' }} + /> + + + + + + + + + {questionNow?.question_stem} + + { return true }} value={0} size="large"> + + {questionNow.question_type === 0 ? + ({questionNow?.answers?.map((item, index) => { + return { + const qArr = [] + questionNow?.answers?.map(() => { + qArr.push("0") + }) + qArr[index] = item.is_true + const questionAnswer = qArr.join(",") + const paperInfoTemp = paperInfo + paperInfoTemp[questionNow.index].answerSelect = questionAnswer + setPaperInfo(paperInfoTemp || []) + console.log('0', paperInfoTemp, questionNow.index) + }} value={item.id} style={{ padding: 5, fontSize: 16 }}>{tiNum(index)}{item.answer} + })}) : questionNow.question_type === 1 ? questionNow?.answers?.map((item, index) => { + return {tiNum(index)}{item.answer} + }) : questionNow.question_type === 2 ? questionNow?.answers?.map((item, index) => { + return {tiNum(index)}{item.answer} + }) : ""} + + + + + { return true }} value={0} size="large"> + + +
+ + + + + + +
+ + 剩余时间 + 6分14秒 + + 答题序号 + 14/80 + + + + + +
+ + + + ); +}; + +export default CardList; diff --git a/web/src/pages/mockExamination/paper/service.ts b/web/src/pages/mockExamination/paper/service.ts new file mode 100644 index 0000000..fee9a31 --- /dev/null +++ b/web/src/pages/mockExamination/paper/service.ts @@ -0,0 +1,10 @@ +import { request } from 'umi'; +import type { CardListItemDataType } from './data.d'; + +export async function queryFakeList(params: { + count: number; +}): Promise<{ data: { list: CardListItemDataType[] } }> { + return request('/api/card_fake_list', { + params, + }); +} diff --git a/web/src/pages/mockExamination/paper/style.less b/web/src/pages/mockExamination/paper/style.less new file mode 100644 index 0000000..e441454 --- /dev/null +++ b/web/src/pages/mockExamination/paper/style.less @@ -0,0 +1,153 @@ +@import '~antd/es/style/themes/default.less'; +@import './utils/utils.less'; + +.cardList { + .card { + :global { + .ant-card-meta-title { + margin-bottom: 12px; + & > a { + display: inline-block; + max-width: 100%; + color: @heading-color; + } + } + .ant-card-body:hover { + .ant-card-meta-title > a { + color: @primary-color; + } + } + } + } + .item { + height: 64px; + } + +} + +:global { + + .ant-list .ant-list-item-content-single { + max-width: 100%; + } + .ant-list-items{ + display: block; + padding: 10px; + } + .ant-list-bordered .ant-list-item{ + display: inline-block; + width: 50px; + height: 50px; + padding: 5px; + margin: 0; + .ant-typography:hover{ + cursor: pointer; + } + .ant-typography{ + color:#999999; + border: #CCCCCC 1px solid; + border-radius: 5px; + font-weight: bolder; + background-color: #f0f0f0; + display: inline-block; + width: 100%; + height: 100%; + font-size: 18px; + text-align: center; + vertical-align: middle; + span{ + text-align: center; + display: block; + font-size: 18px; + line-height: 18px; + padding: 8px 8px; + } + + mark{ + margin: -1px; + border: #1890ff 1px solid; + border-radius: 5px; + color: #1890ff; + display: block; + width: 40px; + height: 40px; + background-color: #e6f7ff; + } + } + } +} +.extraImg { + width: 155px; + margin-top: -20px; + text-align: center; + img { + width: 100%; + } +} + +.newButton { + width: 100%; + height: 201px; + color: @text-color-secondary; + background-color: @component-background; + border-color: @border-color-base; +} + +.cardAvatar { + width: 48px; + height: 48px; + border-radius: 48px; +} + +.cardDescription { + .textOverflowMulti(); +} + +.pageHeaderContent { + position: relative; +} + +.contentLink { + margin-top: 16px; + a { + margin-right: 32px; + img { + width: 24px; + } + } + img { + margin-right: 8px; + vertical-align: middle; + } +} + +@media screen and (max-width: @screen-lg) { + .contentLink { + a { + margin-right: 16px; + } + } +} +@media screen and (max-width: @screen-md) { + .extraImg { + display: none; + } +} + +@media screen and (max-width: @screen-sm) { + .pageHeaderContent { + padding-bottom: 30px; + } + .contentLink { + position: absolute; + bottom: -4px; + left: 0; + width: 1000px; + a { + margin-right: 16px; + } + img { + margin-right: 4px; + } + } +} diff --git a/web/src/pages/mockExamination/paper/utils/utils.less b/web/src/pages/mockExamination/paper/utils/utils.less new file mode 100644 index 0000000..de1aa64 --- /dev/null +++ b/web/src/pages/mockExamination/paper/utils/utils.less @@ -0,0 +1,50 @@ +.textOverflow() { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + word-break: break-all; +} + +.textOverflowMulti(@line: 3, @bg: #fff) { + position: relative; + max-height: @line * 1.5em; + margin-right: -1em; + padding-right: 1em; + overflow: hidden; + line-height: 1.5em; + text-align: justify; + &::before { + position: absolute; + right: 14px; + bottom: 0; + padding: 0 1px; + background: @bg; + content: '...'; + } + &::after { + position: absolute; + right: 14px; + width: 1em; + height: 1em; + margin-top: 0.2em; + background: white; + content: ''; + } +} + +// mixins for clearfix +// ------------------------ +.clearfix() { + zoom: 1; + &::before, + &::after { + display: table; + content: ' '; + } + &::after { + clear: both; + height: 0; + font-size: 0; + visibility: hidden; + } +} diff --git a/web/src/pages/mockExamination/service.ts b/web/src/pages/mockExamination/service.ts index bceeda0..4a1f157 100644 --- a/web/src/pages/mockExamination/service.ts +++ b/web/src/pages/mockExamination/service.ts @@ -11,7 +11,72 @@ export async function listMyLearningSubject(params: { page_size: number; //count: number; }): Promise<{ data: { list: CardListItemDataType[] } }> { - return request(' /dsideal_yy/ypt/careerTraining/learning/listMyLearningSubject', { + return request('/dsideal_yy/ypt/careerTraining/learning/listMyLearningSubject', { params, }); } +/** + * 【6.5】（教师首页）当前学习主题课程信息 + * /dsideal_yy/ypt/careerTraining/learning/listMyLearningSubject + * @param params + * @returns + */ +export async function getRulesList(params: { + page_size: number; + //count: number; +}): Promise<{ data: { list: CardListItemDataType[] } }> { + return request('/dsideal_yy/zygh/training/rules/getRulesList', { + params, + }); +} +/** + * 05 组卷详情查询 + * /dsideal_yy/zygh/training/rules/getRulesPaper + * @param params + * @returns + */ +export async function getRulesPaper(params: { + page_size: number; + //count: number; +}): Promise<{ data: { list: CardListItemDataType[] } }> { + return request('/dsideal_yy/zygh/training/rules/getRulesPaper', { + params, + }); +} +/** + * 06 获取试卷内容 + * /dsideal_yy/zygh/training/rules/getPaperQuestionList + * @param params + * @returns + */ +export async function getPaperQuestionList(params: { + page_size: number; + //count: number; +}): Promise<{ data: { list: CardListItemDataType[] } }> { + return request('/dsideal_yy/zygh/training/rules/getPaperQuestionList', { + params, + }); +} + +export async function viewMyLearningSubject(params: { + identity_id: number; + person_id: number; + data_id: number; + data_type: number; + subject_id: number +}) { + return request(' /dsideal_yy/ypt/careerTraining/learning/viewMyLearningSubject', { + params, + }); +} + +export async function listMyLearningChapterCourse(params: { + chapter_id: number; + identity_id: number; + person_id: number; + subject_id: number +}) { + return request(' /dsideal_yy/ypt/careerTraining/learning/listMyLearningChapterCourse', { + params, + }); +} \ No newline at end of file