测验

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',
         },
       ]
     },

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 (
+    <PageContainer content={false} extraContent={false}>
+      <div className={styles.cardList}>
+        <List
+          rowKey="id"
+          loading={subjectListLoading}
+          grid={{
+            gutter: 16,
+            xs: 1,
+            sm: 1,
+            md: 1,
+            lg: 1,
+            xl: 1,
+            xxl: 1,
+          }}
+          dataSource={subjectList}
+          renderItem={(item: SubjectListItemDataType) => {
+            if (item && item.subject_id) {
+              return (
+                <List.Item key={item?.subject_id}>
+                  <Card
+                    title={<a>{item?.subject_name}</a>}
+                    hoverable
+                    className={styles.card}
+                    actions={[]}
+                    extra={<><span style={{ padding: 10 }}>开始学习时间: ---</span><span style={{ padding: 10 }}>距离结束时间：---天</span><span style={{ padding: 10 }}>考核学时：{item?.total_course_hours}</span></>}
+                  >
+                    <Card.Meta
+                      avatar={<Image preview={false} width={200} height={150} src={`${item.attachment_json.url}`} fallback="../fallback.svg" />}
+                      title={false}
+                      description={
+                        <>
+                          <Card.Grid hoverable={false} style={{ width: '50%', padding: 0 }}>
+                            <Paragraph className={styles.item} ellipsis={{ rows: 4 }}>
+                              {item.subject_describe}
+                            </Paragraph>
+                          </Card.Grid>
+                          <Card.Grid hoverable={false} style={{ width: '30%', textAlign: 'center' }}><Progress type="circle" percent={75} /></Card.Grid>
+                          <Card.Grid hoverable={false} style={{ width: '20%', textAlign: 'center' }}><Button type="primary">去练习</Button></Card.Grid>
+                        </>
+                      }
+                    />
+                  </Card>
+                </List.Item>
+              );
+            }
+          }}
+        />
+      </div>
+    </PageContainer>
+  );
+};
+
+export default SubjectList;

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[];
+};
+*/

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 (
     <PageContainer content={false} extraContent={false}>
       <div className={styles.cardList}>
         <List
           rowKey="id"
-          loading={loading}
+          loading={subjectListLoading}
           grid={{
             gutter: 16,
             xs: 1,
@@ -35,7 +34,7 @@ const SubjectList = () => {
             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={<><span style={{padding:10}}>开始学习时间: ---</span><span style={{padding:10}}>距离结束时间：---天</span><span style={{padding:10}}>考核学时：{item?.total_course_hours}</span></>}
+                    extra={<><span style={{ padding: 10 }}>开始学习时间: ---</span><span style={{ padding: 10 }}>距离结束时间：---天</span><span style={{ padding: 10 }}>考核学时：{item?.total_course_hours}</span></>}
                   >
                     <Card.Meta
                       avatar={<Image preview={false} width={200} height={150} src={`${item.attachment_json.url}`} fallback="../fallback.svg" />}
                       title={false}
                       description={
                         <>
-                          <Card.Grid hoverable={false} style={{width:'50%',padding:0}}>
+                          <Card.Grid hoverable={false} style={{ width: '50%', padding: 0 }}>
                             <Paragraph className={styles.item} ellipsis={{ rows: 4 }}>
                               {item.subject_describe}
                             </Paragraph>
                           </Card.Grid>
-                          <Card.Grid hoverable={false} style={{width:'30%',textAlign:'center'}}><Progress type="circle" percent={75} /></Card.Grid>
-                          <Card.Grid hoverable={false} style={{width:'20%',textAlign:'center'}}><Button type="primary">去学习</Button></Card.Grid>
-                        </>                      
+                          <Card.Grid hoverable={false} style={{ width: '30%', textAlign: 'center' }}><Progress type="circle" percent={75} /></Card.Grid>
+                          <Card.Grid hoverable={false} style={{ width: '20%', textAlign: 'center' }}><Button type="primary">去学习</Button></Card.Grid>
+                        </>
                       }
                     />
                   </Card>

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,
+  });
+}

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

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