Skip to content

X
xiaomai-cloud-class-web
Commit 8eb4c61c by yuananting
Options

feat:学员学习进度详情接口联调

parent 8b780628
Showing with 126 additions and 119 deletions
src/data-source/taskCenter/request-apis.ts
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-08-06 17:35:35
* @LastEditors: yuananting
* @LastEditTime: 2021-08-10 15:28:07
* @LastEditTime: 2021-08-12 16:03:58
* @Description: 任务中心接口
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -40,3 +40,7 @@ export function getTrainingTaskDetail(params: object) {
export function updateTrainingTask(params: object) {
return Service.Hades('public/hades/updateTrainingTask', params);
}
export function getTaskCustomerDetail(params: object) {
return Service.Hades('public/hades/getTaskCustomerDetail', params);
}
src/domains/task-center-domain/TaskCenterService.ts
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-08-06 17:32:41
* @LastEditors: yuananting
* @LastEditTime: 2021-08-10 15:28:39
* @LastEditTime: 2021-08-12 16:04:42
* @Description: 任务中心-培训任务接口
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -16,6 +16,7 @@ import {
deleteTrainingTask,
getTrainingTaskDetail,
updateTrainingTask,
getTaskCustomerDetail,
} from '@/data-source/taskCenter/request-apis';
export default class TaskCenterService {
......@@ -58,4 +59,9 @@ export default class TaskCenterService {
static updateTrainingTask(params: any) {
return updateTrainingTask(params);
}
// 获取单个任务单个学员的学习进度详情
static getTaskCustomerDetail(params: any) {
return getTaskCustomerDetail(params);
}
}
src/modules/task-center/data-center/UserLearningData.jsx
/*
* @Author: yuananting
* @Date: 2021-08-05 10:55:49
* @LastEditors: wufan
* @LastEditTime: 2021-08-09 15:49:31
* @LastEditors: yuananting
* @LastEditTime: 2021-08-12 19:23:56
* @Description: 个人学习详情
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Progress, Space, Tabs } from 'antd';
import React, { useEffect, useState } from 'react';
import { Tabs } from 'antd';
import Breadcrumbs from '@/components/Breadcrumbs';
import WholeData from './components/WholeData';
import ENUM from '../enum';
import { withRouter } from 'react-router-dom';
import TestLinkTaskData from './components/TestLinkTaskData';
import CustomerLearnBasicInfo from './components/CustomerLearnBasicInfo';
import User from '@/common/js/user';
import TaskCenterService from '@/domains/task-center-domain/TaskCenterService';
import './UserLearningData.less';
const { TabPane } = Tabs;
function UserLearningData(props) {
const taskId = props.taskId;
const storeCustomerId = props.match.params.storeCustomerId.replace(/\?.+/, '');
const tabList = [
{
name: '全部',
......@@ -31,6 +36,23 @@ function UserLearningData(props) {
compoment: TestLinkTaskData, // todo
},
];
const [detail, setDetail] = useState({});
useEffect(() => {
getTaskCustomerDetail();
}, []);
function getTaskCustomerDetail() {
const params = {
storeCustomerId,
storeId: User.getStoreId(),
taskId,
};
TaskCenterService.getTaskCustomerDetail(params).then((res) => {
const { result = {} } = res;
setDetail(result);
});
}
return (
<div className='page user-learning-data'>
......@@ -40,35 +62,14 @@ function UserLearningData(props) {
props.history.goBack();
}}
/>
<div className='header'>
<div className='train-title'>培训任务全新版本上线啦～🐹🐹</div>
<div className='data-info'>
<div className='user-name'>学员：{'文小小'}</div>
<div className='complete-progress'>
任务完成率：
<div style={{ width: 120 }}>
<Progress size={120} strokeColor='#2966FF' trailColor='#EAEAEA' percent={30} size='small' />
</div>
</div>
<Space size={24}>
<div>
<img src={ENUM.LearningContentIcon['COURSE']} />
课程：{'15/98'}
</div>
<div>
<img src={ENUM.LearningContentIcon['EXAM']} />
考试：{'15/98'}
</div>
</Space>
</div>
</div>
<CustomerLearnBasicInfo detail={detail} />
<div className='gap-line'></div>
<div className='content'>
<Tabs defaultActiveKey={'whole'} onChange={() => {}}>
{tabList.map((item) => {
return (
<TabPane tab={item.name} key={item.key}>
{<item.compoment />}
{<item.compoment detail={detail} />}
</TabPane>
);
})}
......@@ -78,4 +79,4 @@ function UserLearningData(props) {
);
}
export default UserLearningData;
export default withRouter(UserLearningData);
src/modules/task-center/data-center/components/CustomerLearnBasicInfo.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-08-12 18:08:59
* @LastEditors: yuananting
* @LastEditTime: 2021-08-12 18:17:19
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Progress, Space } from 'antd';
import ENUM from '../../enum';
function CustomerLearnBasicInfo(props) {
return (
<div className='header'>
<div className='train-title'>{props.detail.taskName}</div>
<div className='data-info'>
<div className='user-name'>学员：{props.detail.storeCustomerName}</div>
<div className='complete-progress'>
任务完成率：
<div style={{ width: 120 }}>
<Progress size={120} strokeColor='#2966FF' trailColor='#EAEAEA' percent={props.detail.learnFinishPercentage} size='small' />
</div>
</div>
<Space size={24}>
<div>
<img src={ENUM.LearningContentIcon['COURSE']} />
课程：{props.detail.courseFinishNum || 0}/{props.detail.courseAllNum || 0}
</div>
<div>
<img src={ENUM.LearningContentIcon['EXAM']} />
考试：{props.detail.examFinishNum || 0}/{props.detail.examAllNum || 0}
</div>
</Space>
</div>
</div>
);
}
export default CustomerLearnBasicInfo;
src/modules/task-center/data-center/components/StudyTable.tsx
......@@ -115,12 +115,16 @@ function StudyTable(props: any) {
dataIndex: 'operate',
render: (val: any, record: any) => {
return (
<div className='operate-area'>
<span className='operate-item' style={{ color: 'rgba(41, 102, 255, 1)', cursor: 'pointer' }} onClick={() => { console.log(props.match); props.history.push(`${props.match.url}/user-learning-data`); }}>
查看数据
</span>
</div>
<div className='operate-area'>
<span
className='operate-item'
style={{ color: 'rgba(41, 102, 255, 1)', cursor: 'pointer' }}
onClick={() => {
props.history.push(`${props.match.url}/user-learning-data/${record.storeCustomerId}`);
}}>
查看数据
</span>
</div>
);
},
},
......@@ -265,7 +269,7 @@ function StudyTable(props: any) {
</div>
)}
</div>
<Route path={`${props.match.url}/user-learning-data`} component={UserLearningData} />
<Route path={`${props.match.url}/user-learning-data/:storeCustomerId`} render={() => <UserLearningData taskId={props.taskId} />} />
</div>
}
......
src/modules/task-center/data-center/components/WholeData.jsx
......@@ -2,76 +2,20 @@
* @Author: yuananting
* @Date: 2021-08-05 11:26:25
* @LastEditors: yuananting
* @LastEditTime: 2021-08-05 16:20:07
* @LastEditTime: 2021-08-12 21:12:08
* @Description: 个人学习详情-全部tab页
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import React, { useState, useEffect } from 'react';
import { Collapse, Progress } from 'antd';
import './WholeData.less';
import ENUM from '../../enum';
const { Panel } = Collapse;
function WholeData() {
function WholeData(props) {
const SortConvert = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
const stageList = [
{
stageName: '新手阶段',
finishedCount: 1,
contentSum: 4,
contentList: [
{
contentType: 'LIVE',
contentName: '入门培训任务',
courseState: 'UN_START',
percent: 75,
},
{
contentType: 'LIVE',
contentName: '普通培训任务',
courseState: 'FINISH',
percent: 0,
},
{
contentType: 'VOICE',
contentName: '困难培训任务',
courseChapterNum: 4,
percent: 100,
},
{
contentType: 'PICTURE',
contentName: '困难培训任务',
percent: 23,
},
],
},
{
stageName: '老手阶段',
finishedCount: 3,
contentSum: 5,
contentList: [
{
contentType: 'LIVE',
contentName: '入门培训任务',
courseState: 'UN_START',
percent: 15,
},
{
contentType: 'EXAM',
contentName: '入门考试',
percent: 70,
},
{
contentType: 'EXAM',
contentName: '入门二段考试',
percent: 100,
},
],
},
];
const courseStateShow = {
UN_START: {
title: '待开播',
......@@ -87,6 +31,12 @@ function WholeData() {
},
};
const [stageCustomerList, setStageCustomerList] = useState([]);
useEffect(() => {
setStageCustomerList(props.detail.stageCustomerVOList);
}, [props]);
// 渲染阶段信息
function renderStageInfo(item, index) {
return (
......@@ -95,7 +45,7 @@ function WholeData() {
{SortConvert[index]}、{item.stageName}
</span>
<span className='extra-info'>
（{item.finishedCount}/{item.contentSum}）
（{item.learnFinishNum}/{item.learnAllNum}）
</span>
</div>
);
......@@ -104,7 +54,7 @@ function WholeData() {
// 渲染学习内容信息
function renderContentInfo(contentItem, contentIndex, index) {
const { contentName, contentType, courseChapterNum, courseState, percent } = contentItem;
const { contentName, contentType, courseChapterNum, courseState, learnFinishPercentage } = contentItem;
return (
<div className='content-info__item'>
<div className='basic-info'>
......@@ -116,7 +66,7 @@ function WholeData() {
{contentType === 'VOICE' && <span className='extra-info'>（共{courseChapterNum || 1}小节）</span>}
</div>
<div className='percent-info'>
{percent === 100 ? (
{learnFinishPercentage === 100 ? (
<span className='icon iconfont'>&#xe621;</span>
) : (
<Progress
......@@ -128,10 +78,10 @@ function WholeData() {
'0%': '#38B7F3',
'100%': '#1A80E2',
}}
percent={percent}
percent={learnFinishPercentage}
/>
)}
<span className='text'>{percent === 100 ? '已完成' : `${percent}%`}</span>
<span className='text'>{learnFinishPercentage === 100 ? '已完成' : `${learnFinishPercentage}%`}</span>
</div>
</div>
);
......@@ -140,15 +90,16 @@ function WholeData() {
return (
<div className='whole-data-container'>
<Collapse ghost>
{stageList.map((item, index) => {
return (
<Panel header={renderStageInfo(item, index)} key={index}>
{item.contentList.map((contentItem, contentIndex) => {
{stageCustomerList?.length > 0 &&
stageCustomerList.map((item, index) => {
return (
<Panel header={renderStageInfo(item, index)} key={index}>
{/* {item.courseVOList.map((contentItem, contentIndex) => {
return renderContentInfo(contentItem, contentIndex, index);
})}
</Panel>
);
})}
})} */}
</Panel>
);
})}
</Collapse>
</div>
);
......
src/modules/task-center/train-task/modal/ChooseAssignorModal.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-08-05 17:09:36
* @LastEditors: yuananting
* @LastEditTime: 2021-08-12 14:32:20
* @LastEditTime: 2021-08-12 19:37:35
* @Description: 新建培训任务-选择指派对象
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -61,7 +61,7 @@ function ChooseAssignorModal(props) {
function handleStructureData(dataArray) {
const _dataArray = dataArray.map((item, index) => {
item.title = '';
item.checkedId = [0, 1].includes(item.depLevel) ? item.id : item.userId;
item.checkedId = [0, 1].includes(item.depLevel) ? item.id : item.storeCustomerId;
item.key = item.checkedId;
item.children = [];
if (activeKey !== 'departMentTab' && item.depLevel === 0) {
......@@ -304,15 +304,15 @@ function ChooseAssignorModal(props) {
<div className='node-title-div'>
{[0, 1].includes(nodeData.depLevel) ? (
<div>
<span className='icon iconfont item-icon'>&#xe604;</span>
<span className='item-name'>
<span className='icon iconfont title-icon'>&#xe604;</span>
<span className='title-name'>
<WWOpenDataCom type='departmentName' openid={nodeData.name} />
</span>
</div>
) : (
<div>
<span className='icon iconfont item-icon'>&#xe603;</span>
<span>
<span className='icon iconfont title-icon'>&#xe603;</span>
<span className='title-name'>
<WWOpenDataCom type='userName' openid={nodeData.userName} />
</span>
</div>
......@@ -348,7 +348,7 @@ function ChooseAssignorModal(props) {
) : (
<div>
<span className='icon iconfont title-icon'>&#xe604;</span>
<Tooltip title={<WWOpenDataCom type='departmentName' openid={item.userName} />}>
<Tooltip title={<WWOpenDataCom type='departmentName' openid={item.name} />}>
<span className='title-name'>
<WWOpenDataCom type='departmentName' openid={item.name} />
</span>
......
src/modules/task-center/train-task/modal/ChooseAssignorModal.less
......@@ -27,11 +27,11 @@
display: flex;
justify-content: space-between;
white-space: nowrap;
.item-icon {
.title-icon {
margin-right: 6px;
color: #999999;
}
.item-name {
.title-name {
position: absolute;
overflow: hidden;
white-space: nowrap;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment