|
|
|
|
@ -3,222 +3,200 @@ 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 { viewMyLearningSubject, getCourseExaminationProgressList } 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;
|
|
|
|
|
// }
|
|
|
|
|
// };
|
|
|
|
|
import { history } from "@@/core/history";
|
|
|
|
|
|
|
|
|
|
let chapterCourse=[];
|
|
|
|
|
let total_process=0;
|
|
|
|
|
const CardList = () => {
|
|
|
|
|
const params = useParams();
|
|
|
|
|
console.log('params', params);
|
|
|
|
|
// const ids = params.msg.split(',');
|
|
|
|
|
const params = useParams();
|
|
|
|
|
|
|
|
|
|
const [currentCourse, SetCurrentCourse] = useState()
|
|
|
|
|
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 { 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 : [];
|
|
|
|
|
// 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)
|
|
|
|
|
}
|
|
|
|
|
/** 获取课程详情 */
|
|
|
|
|
const { chapterCourseData, run, loading } = useRequest((params: { subject_id: number, chapter_id: number }) => {
|
|
|
|
|
return getCourseExaminationProgressList({
|
|
|
|
|
identity_id: cookie.load('identity_id'),
|
|
|
|
|
person_id: cookie.load('person_id'),
|
|
|
|
|
subject_id: params?.subject_id,
|
|
|
|
|
chapter_id: params?.chapter_id,
|
|
|
|
|
|
|
|
|
|
}, [data]);
|
|
|
|
|
// r_list[0].chapter_id
|
|
|
|
|
});
|
|
|
|
|
},{
|
|
|
|
|
formatResult: (result) => {
|
|
|
|
|
if(result.list.length!==0){
|
|
|
|
|
let total_finish_count=0;
|
|
|
|
|
let total_question_count=0;
|
|
|
|
|
result.list.forEach((item)=>{
|
|
|
|
|
total_finish_count+=item.finish_count;
|
|
|
|
|
total_question_count+=item.question_count;
|
|
|
|
|
if(item.finish_count!==0){
|
|
|
|
|
let num=0;
|
|
|
|
|
num=result.finish_count/result.question_count;
|
|
|
|
|
item.process=num.toFixed(4)
|
|
|
|
|
}else {
|
|
|
|
|
item.process=0;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
if(total_finish_count!==0){
|
|
|
|
|
let total_num=total_finish_count/total_question_count;
|
|
|
|
|
total_process=total_num.toFixed(4)
|
|
|
|
|
|
|
|
|
|
/** run后 chapterCourse 变化 进行currentCourse赋值 */
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
console.log('chapterCourse...', chapterCourse)
|
|
|
|
|
if (data !== undefined) {
|
|
|
|
|
console.log('data', data)
|
|
|
|
|
SetCurrentCourse(chapterCourse)
|
|
|
|
|
}else {
|
|
|
|
|
total_process=0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}, [chapterCourse]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const content = (
|
|
|
|
|
<div className={styles.pageHeaderContent}>
|
|
|
|
|
<Card
|
|
|
|
|
title={<a>{subject_data ? subject_data.subject_name : '--'}</a>}
|
|
|
|
|
hoverable={false}
|
|
|
|
|
className={styles.card}
|
|
|
|
|
actions={[]}
|
|
|
|
|
extra={<><span style={{ padding: 10 }}>开始学习时间: {subject_data ? subject_data.learning_start_time : '--'}</span><span style={{ padding: 10 }}>距离结束时间：{subject_data ? subject_data.distance_end_time : '--'}</span><span style={{ padding: 10 }}>考核学时：{subject_data ? subject_data.total_course_hours : '--'}小时</span></>}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<img alt="" className={styles.cardAvatar} src={'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png'} style={{ width: '270px', height: '150px', borderRadius: '10px' }} />}
|
|
|
|
|
title={false}
|
|
|
|
|
description={
|
|
|
|
|
<>
|
|
|
|
|
<Card.Grid hoverable={false} style={{ width: '100%', padding: 0, boxShadow: 'none' }}>
|
|
|
|
|
<Paragraph className={styles.item} ellipsis={{ rows: 4 }} style={{ paddingLeft: 10 }}>
|
|
|
|
|
{subject_data ? subject_data.subject_describe : '--'}
|
|
|
|
|
</Paragraph>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={16} style={{ display: 'inline-block', padding: 10 }}><span>学习进度：</span><span style={{ display: 'inline-block', width: '80%' }}><Progress percent={subject_data ? subject_data.subject_learning_progress * 100 : 0} /></span></Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={10} style={{ padding: 10 }}><span>上次学习：</span><span>{last_data ? last_data.course_name : '--'}</span></Col> <Col span={10} style={{ padding: 10 }}>主讲人：<span>{last_data ? last_data.lecture_teacher : '--'}</span></Col> <Col span={4} style={{ padding: 10 }}><Button type="primary">去学习::</Button></Col>
|
|
|
|
|
</Row>
|
|
|
|
|
</Card.Grid>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log('iddddddd', chapter_list.length !== 0 ? chapter_list[0].chapter_id.toString() : '')
|
|
|
|
|
const nullData: Partial<CardListItemDataType> = {};
|
|
|
|
|
return (
|
|
|
|
|
<PageContainer content={content} extraContent={false}>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={6} style={{ paddingRight: 24 }}>
|
|
|
|
|
<Menu
|
|
|
|
|
mode="inline"
|
|
|
|
|
selectedKeys={[chapter_list.length !== 0 ? chapter_list[0].chapter_id.toString() : '']}
|
|
|
|
|
defaultOpenKeys={['sub1']}
|
|
|
|
|
style={{ height: '100%', width: '100%' }}
|
|
|
|
|
>
|
|
|
|
|
<SubMenu key="sub1" icon={<AlignLeftOutlined />} title="章节目录">
|
|
|
|
|
{
|
|
|
|
|
chapter_list.length !== 0 ?
|
|
|
|
|
chapter_list.map((item) => {
|
|
|
|
|
return (
|
|
|
|
|
<Menu.Item
|
|
|
|
|
key={item.chapter_id}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
run({ subject_id: item.subject_id, chapter_id: item.chapter_id })
|
|
|
|
|
}}
|
|
|
|
|
>{item.chapter_name}</Menu.Item>
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
}) : ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</SubMenu>
|
|
|
|
|
</Menu>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={18} style={{ background: '#ffffff', padding: 24 }}>
|
|
|
|
|
{console.log('chapterCourse', chapterCourse)}
|
|
|
|
|
{
|
|
|
|
|
chapterCourse !== undefined ?
|
|
|
|
|
<>
|
|
|
|
|
<>{chapterCourse[0]?.course_name}</>
|
|
|
|
|
<>{chapterCourse[0]?.lecture_teacher}</>
|
|
|
|
|
</>
|
|
|
|
|
: <>暂无</>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<List<Partial<CardListItemDataType>>
|
|
|
|
|
rowKey="id"
|
|
|
|
|
// loading={loading}
|
|
|
|
|
grid={{
|
|
|
|
|
gutter: 1,
|
|
|
|
|
xs: 1,
|
|
|
|
|
sm: 2,
|
|
|
|
|
md: 1,
|
|
|
|
|
lg: 1,
|
|
|
|
|
xl: 1,
|
|
|
|
|
xxl: 1,
|
|
|
|
|
}
|
|
|
|
|
chapterCourse=result.list;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/** 首次页面 当data 变化 执行run， chapterCourse 变化 进行currentCourse赋值 */
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// console.log('chapterCourse首次页面...', chapterCourse)
|
|
|
|
|
if (data !== undefined && data !== null && chapter_list.length !== 0) {
|
|
|
|
|
run({ subject_id: data?.chapter_list[0]?.subject_id, chapter_id: data?.chapter_list[0]?.chapter_id })
|
|
|
|
|
SetCurrentCourse(chapterCourse)
|
|
|
|
|
}
|
|
|
|
|
//setSelectedCourse({})
|
|
|
|
|
}, [data]);
|
|
|
|
|
|
|
|
|
|
/** run后 chapterCourse 变化 进行currentCourse赋值 */
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// console.log('chapterCourse变化...', chapterCourse)
|
|
|
|
|
if (data !== undefined) {
|
|
|
|
|
SetCurrentCourse(chapterCourse)
|
|
|
|
|
}
|
|
|
|
|
//setSelectedCourse({})
|
|
|
|
|
}, [chapterCourse]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const content = (
|
|
|
|
|
<div className={styles.pageHeaderContent}>
|
|
|
|
|
<Card
|
|
|
|
|
title={<a>{subject_data ? subject_data.subject_name : '--'}</a>}
|
|
|
|
|
hoverable={false}
|
|
|
|
|
className={styles.card}
|
|
|
|
|
actions={[]}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<img alt="" className={styles.cardAvatar} src={'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png'} style={{ width: '270px', height: '150px', borderRadius: '10px' }} />}
|
|
|
|
|
title={false}
|
|
|
|
|
description={
|
|
|
|
|
<>
|
|
|
|
|
<Card.Grid hoverable={false} style={{ width: '100%', padding: 0, boxShadow: 'none' }}>
|
|
|
|
|
<Paragraph className={styles.item} ellipsis={{ rows: 4 }} style={{ paddingLeft: 10 }}>
|
|
|
|
|
{subject_data ? subject_data.subject_describe : '--'}
|
|
|
|
|
</Paragraph>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={16} style={{ display: 'inline-block', padding: 10 }}><span>章节模拟考试进度：</span><span style={{ display: 'inline-block', width: '80%' }}><Progress percent={total_process * 100 } /></span></Col>
|
|
|
|
|
</Row>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={4} style={{ padding: 10 }}>
|
|
|
|
|
<Button type="primary"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
console.log('last_data',last_data)
|
|
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
>错题练习</Button>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
</Card.Grid>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const nullData: Partial<CardListItemDataType> = {};
|
|
|
|
|
return (
|
|
|
|
|
<PageContainer content={content} extraContent={false}>
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={6} style={{ paddingRight: 24 }}>
|
|
|
|
|
<Menu
|
|
|
|
|
mode="inline"
|
|
|
|
|
selectedKeys={[chapter_list.length !== 0 ? chapter_list[0].chapter_id.toString() : '']}
|
|
|
|
|
defaultOpenKeys={['sub1']}
|
|
|
|
|
style={{ height: '100%', width: '100%' }}
|
|
|
|
|
>
|
|
|
|
|
<SubMenu key="sub1" icon={<AlignLeftOutlined />} title="章节目录">
|
|
|
|
|
{
|
|
|
|
|
chapter_list.length !== 0 ?
|
|
|
|
|
chapter_list.map((item) => {
|
|
|
|
|
return (
|
|
|
|
|
<Menu.Item
|
|
|
|
|
key={item.chapter_id}
|
|
|
|
|
onClick={() => {
|
|
|
|
|
run({ subject_id: item.subject_id, chapter_id: item.chapter_id })
|
|
|
|
|
}}
|
|
|
|
|
dataSource={[nullData, ...chapterCourse]}
|
|
|
|
|
renderItem={(item) => {
|
|
|
|
|
if (item && item.id) {
|
|
|
|
|
return (
|
|
|
|
|
<List.Item key={item.id}>
|
|
|
|
|
<Card
|
|
|
|
|
hoverable={false}
|
|
|
|
|
className={styles.card}
|
|
|
|
|
actions={[]}
|
|
|
|
|
style={{ background: '#f0f0f0' }}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={false}
|
|
|
|
|
title={<a>{item.title}</a>}
|
|
|
|
|
description={
|
|
|
|
|
<Row>
|
|
|
|
|
<Col span={4} style={{ padding: 10 }}>
|
|
|
|
|
第1讲
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={8} style={{ padding: 10 }}>
|
|
|
|
|
<Paragraph className={styles.item} ellipsis={{ rows: 3 }}>
|
|
|
|
|
{item.description}
|
|
|
|
|
</Paragraph>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={4} style={{ padding: 10, textAlign: 'center' }}>
|
|
|
|
|
23分钟
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={4} style={{ padding: 10, textAlign: 'center' }}>
|
|
|
|
|
<Progress percent={30} />
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={4} style={{ padding: 10, textAlign: 'center' }}>
|
|
|
|
|
<Button type="primary">学习</Button>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
</List.Item>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
</PageContainer>
|
|
|
|
|
);
|
|
|
|
|
>{item.chapter_name}</Menu.Item>
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
}) : ''
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</SubMenu>
|
|
|
|
|
</Menu>
|
|
|
|
|
</Col>
|
|
|
|
|
<Col span={18} style={{ background: '#ffffff', padding: 24, minHeight: '20rem' }}>
|
|
|
|
|
{
|
|
|
|
|
chapterCourse !== undefined && chapterCourse !== '' ?
|
|
|
|
|
chapterCourse.map((item, index) => {
|
|
|
|
|
return (
|
|
|
|
|
<div key={'chapterCourse' + index} >
|
|
|
|
|
<div style={{ marginBottom: '2rem', }}>
|
|
|
|
|
<div style={{ paddingRight: '1rem', width: '10%', display: 'inline-block' }}>第{index+1}讲</div>
|
|
|
|
|
<div title={item?.course_name} style={{ paddingRight: '1rem', width: '30%', display: 'inline-block', verticalAlign: 'middle', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item?.course_name}</div>
|
|
|
|
|
<div style={{ paddingRight: '1rem', width: '10%', display: 'inline-block' }}>{item?.finish_count}题/{item?.question_count}题</div>
|
|
|
|
|
<div style={{ paddingRight: '1rem', width: '30%', display: 'inline-block' }}>
|
|
|
|
|
<Progress percent={item?.progress * 100} />
|
|
|
|
|
</div>
|
|
|
|
|
<div style={{ paddingRight: '1rem', width: '20%', display: 'inline-block', textAlign: 'right' }}>
|
|
|
|
|
<Button type="primary" onClick={() => {
|
|
|
|
|
const info = item.chapter_id + ',' + item.course_id + ',' + item.subject_id;
|
|
|
|
|
// window.open('/#/course/detail/' + info)
|
|
|
|
|
// history.push( '/course/detail/'+info);
|
|
|
|
|
}}>开始考试</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
: <>暂无</>
|
|
|
|
|
}
|
|
|
|
|
</Col>
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
|
|
</PageContainer>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default CardList;
|
|
|
|
|
|
