zhengpengju 3 years ago
commit ff47820383

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

@ -4,8 +4,8 @@ import type { CardListItemDataType } from './data.d';
/**
* 6.5
* /dsideal_yy/ypt/careerTraining/learning/listMyLearningSubject
* @param params
* @returns
* @param params
* @returns
*/
export async function listMyLearningSubject(params: {
page_size: number;
@ -18,8 +18,8 @@ export async function listMyLearningSubject(params: {
/**
* 6.5
* /dsideal_yy/ypt/careerTraining/learning/listMyLearningSubject
* @param params
* @returns
* @param params
* @returns
*/
export async function getRulesList(params: {
page_size: number;
@ -32,8 +32,8 @@ export async function getRulesList(params: {
/**
* 05
* /dsideal_yy/zygh/training/rules/getRulesPaper
* @param params
* @returns
* @param params
* @returns
*/
export async function getRulesPaper(params: {
page_size: number;
@ -46,8 +46,8 @@ export async function getRulesPaper(params: {
/**
* 06
* /dsideal_yy/zygh/training/rules/getPaperQuestionList
* @param params
* @returns
* @param params
* @returns
*/
export async function getPaperQuestionList(params: {
page_size: number;
@ -79,4 +79,15 @@ export async function listMyLearningChapterCourse(params: {
return request(' /dsideal_yy/ypt/careerTraining/learning/listMyLearningChapterCourse', {
params,
});
}
}
export async function getCourseExaminationProgressList(params: {
chapter_id: number;
identity_id: number;
person_id: number;
subject_id: number
}){
return request('/dsideal_yy/zygh/training/mock/getCourseExaminationProgressList', {
params,
});
}

Loading…
Cancel
Save