diff --git a/web/config/config.ts b/web/config/config.ts index f91f810..92bbdd2 100644 --- a/web/config/config.ts +++ b/web/config/config.ts @@ -127,21 +127,19 @@ export default defineConfig({ { name: '模拟考试', icon: 'dashboard', - path: '/RulesList', + path: '/mockExamination', routes: [ { - name: '考试概况(暂时废弃)', - icon: 'smile', - path: '/examination/intro', - component: './examination/intro', - hideInMenu: true, + name: '章节模拟练习', + path: '/mockExamination/chapterExamination', + component: './mockExamination/chapterExamination', + }, { - name: '考试信息', + name: '综合模拟考试', icon: 'smile', - path: '/examination/info/:examination_id', - component: './examination/info', - hideInMenu: true, + path: '/mockExamination/index', + component: './mockExamination/index', }, ] }, diff --git a/web/src/pages/mockExamination/chapterExamination.tsx b/web/src/pages/mockExamination/chapterExamination.tsx new file mode 100644 index 0000000..56cda94 --- /dev/null +++ b/web/src/pages/mockExamination/chapterExamination.tsx @@ -0,0 +1,75 @@ +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 styles from './style.less'; +import NumberInfo from './components/NumberInfo'; +import cookie from 'react-cookies'; +const { Paragraph } = Typography; + +const SubjectList = () => { + /** 获取主题列表数据 */ + const { loading: subjectListLoading, data: subjectList = [] } = useRequest( + () => listMyLearningSubject( + { + identity_id: cookie.load('identity_id'), + person_id: cookie.load('person_id') + })); + console.log(subjectList); + + return ( + +
+ { + 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} + + + + + + } + /> + + + ); + } + }} + /> +
+ + ); +}; + +export default SubjectList; diff --git a/web/src/pages/mockExamination/data.d.ts b/web/src/pages/mockExamination/data.d.ts new file mode 100644 index 0000000..6ac631f --- /dev/null +++ b/web/src/pages/mockExamination/data.d.ts @@ -0,0 +1,54 @@ +export type Member = { + avatar: string; + name: string; + id: string; +}; + +/** 主题列表项数据类型 */ +export type SubjectListItemDataType = { + "b_use": number; // 是否启用（临时保存为草稿状态，完成时为启用状态） + "total_course_minutes": number; // 总学时（分钟） + "update_time": string; // 修改时间 + "subject_name": string; // 主题名称 + "create_time": string; // 创建时间 + "total_course_hours": number; // 总学时（小时） + "is_deleted": number; // 删除状态：0-未删除；1-已删除 + "attachment_json": Attachment; // 附件信息（主题封面，保存前端需要的所有信息） + "total_course_number": number; + "subject_id": number; // 主题id + "total_chapter_number": number; // 章节数 + "subject_describe": string; // 主题简介 +}; + +/** 主题附件声明 */ +export type Attachment = { + name: string; // 原文件名 + ext: string; // 原文件名 + url: 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[]; +}; +*/ \ No newline at end of file diff --git a/web/src/pages/examination/mockExamination/index.tsx b/web/src/pages/mockExamination/index.tsx similarity index 62% rename from web/src/pages/examination/mockExamination/index.tsx rename to web/src/pages/mockExamination/index.tsx index 9e02d5a..e8b6552 100644 --- a/web/src/pages/examination/mockExamination/index.tsx +++ b/web/src/pages/mockExamination/index.tsx @@ -2,30 +2,29 @@ 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 { querySubjectList } from './service'; -import type { SubjectListItemDataType } from './data.d'; +import { listMyLearningSubject } from './service'; + import styles from './style.less'; import NumberInfo from './components/NumberInfo'; - +import cookie from 'react-cookies'; const { Paragraph } = Typography; const SubjectList = () => { /** 获取主题列表数据 */ - const { data, loading } = useRequest(() => { - - return querySubjectList({ - count: 10, - }); - }); - - const list = data?.list || []; + const { loading: subjectListLoading, data: subjectList = [] } = useRequest( + () => listMyLearningSubject( + { + identity_id: cookie.load('identity_id'), + person_id: cookie.load('person_id') + })); + console.log(subjectList); return (
{ xl: 1, xxl: 1, }} - dataSource={list} + dataSource={subjectList} renderItem={(item: SubjectListItemDataType) => { if (item && item.subject_id) { return ( @@ -45,21 +44,21 @@ const SubjectList = () => { hoverable className={styles.card} actions={[]} - extra={<>开始学习时间: ---距离结束时间：---天考核学时：{item?.total_course_hours}} + extra={<>开始学习时间: ---距离结束时间：---天考核学时：{item?.total_course_hours}} > } title={false} description={ <> - + {item.subject_describe} - - - + + + } /> diff --git a/web/src/pages/mockExamination/service.ts b/web/src/pages/mockExamination/service.ts new file mode 100644 index 0000000..bceeda0 --- /dev/null +++ b/web/src/pages/mockExamination/service.ts @@ -0,0 +1,17 @@ +import { request } from 'umi'; +import type { CardListItemDataType } from './data.d'; + +/** + * 【6.5】（教师首页）当前学习主题课程信息 + * /dsideal_yy/ypt/careerTraining/learning/listMyLearningSubject + * @param params + * @returns + */ +export async function listMyLearningSubject(params: { + page_size: number; + //count: number; +}): Promise<{ data: { list: CardListItemDataType[] } }> { + return request(' /dsideal_yy/ypt/careerTraining/learning/listMyLearningSubject', { + params, + }); +} diff --git a/web/src/pages/mockExamination/style.less b/web/src/pages/mockExamination/style.less new file mode 100644 index 0000000..7489aae --- /dev/null +++ b/web/src/pages/mockExamination/style.less @@ -0,0 +1,118 @@ +@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-card-meta-description{ + height:100%; + } + .ant-card-grid{ + box-shadow:none; + height:100%; + } + } +} +:global { + .ant-card-meta-detail{ + height: 150px; + } +} +.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: 270px; + height: 150px; + border-radius: 10px; +} + +.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/utils/utils.less b/web/src/pages/mockExamination/utils/utils.less new file mode 100644 index 0000000..de1aa64 --- /dev/null +++ b/web/src/pages/mockExamination/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; + } +}