Skip to content

X
xiaomai-cloud-class-web
Commit c54209d0 by yuananting
Options

Merge branch 'feature/yuananting/20210801/task-center' of… 

Merge branch 'feature/yuananting/20210801/task-center' of ssh://xmgit.ixm5.cn:10022/xiaomai-cloud-class/xiaomai-cloud-class-web into feature/yuananting/20210801/task-center
parents fe30365a 44af767b
Showing with 98 additions and 26 deletions
src/modules/task-center/data-center/Index.tsx
...@@ -24,16 +24,25 @@ function DataCenter(props: any) { ...@@ -24,16 +24,25 @@ function DataCenter(props: any) {
name: '课程目录', name: '课程目录',
key: 'course', key: 'course',
compoment: CourseTable, compoment: CourseTable,
show:()=>{
return true
}
}, },
{ {
name: '学习详情', name: '学习详情',
key: 'study', key: 'study',
compoment: StudyTable, compoment: StudyTable,
show:()=>{
return info.courseNum
}
}, },
{ {
name: '考试详情', name: '考试详情',
key: 'exam', key: 'exam',
compoment: ExamTable, compoment: ExamTable,
show:()=>{
return info.examNum
}
}, },
] ]
...@@ -65,7 +74,7 @@ function DataCenter(props: any) { ...@@ -65,7 +74,7 @@ function DataCenter(props: any) {
<Tabs defaultActiveKey={'course'} onChange={() => { }}> <Tabs defaultActiveKey={'course'} onChange={() => { }}>
{ {
tabList.map((item: any) => { tabList.map((item: any) => {
return <TabPane tab={item.name} key={item.key}> return item.show() && <TabPane tab={item.name} key={item.key}>
{ {
<item.compoment info={info} taskId={taskId} /> <item.compoment info={info} taskId={taskId} />
} }
......
src/modules/task-center/data-center/components/DataInfo.tsx
...@@ -22,7 +22,7 @@ function DataInfo(props: any) { ...@@ -22,7 +22,7 @@ function DataInfo(props: any) {
<span style={{ marginLeft: 24 }}> {`培训时间：${moment(props.info.startTime).format('YYYY-MM-DD HH:mm')} 至 ${moment(props.info.endTime).format('YYYY-MM-DD HH:mm')}`}</span> <span style={{ marginLeft: 24 }}> {`培训时间：${moment(props.info.startTime).format('YYYY-MM-DD HH:mm')} 至 ${moment(props.info.endTime).format('YYYY-MM-DD HH:mm')}`}</span>
</div> </div>
<div className="info"> <div className="info">
<div className="item">{`任务数:${props.info.contentNum}`}</div> <div className="item">{`任务数: ${props.info.contentNum}`}</div>
{ {
!!props.info.courseNum && <div className="item"><span className="icon"><img src="https://image.xiaomaiketang.com/xm/6C2GjSpnDp.png" alt="" /></span>{`课程：${props.info.courseNum}`}</div> !!props.info.courseNum && <div className="item"><span className="icon"><img src="https://image.xiaomaiketang.com/xm/6C2GjSpnDp.png" alt="" /></span>{`课程：${props.info.courseNum}`}</div>
} }
...@@ -39,7 +39,18 @@ function DataInfo(props: any) { ...@@ -39,7 +39,18 @@ function DataInfo(props: any) {
</div> </div>
<div className="right"> <div className="right">
<div className="prog"> <div className="prog">
<Progress type="circle" width={85} percent={parseInt(props.info.finishCustomerNum /(props.info.cultureCustomerNum)*100 as any)} strokeWidth={10} format={percent => <div className='wcl'>{`${(parseInt(props.info.finishCustomerNum /(props.info.cultureCustomerNum)*100 as any))}% `} <div>完成率</div></div>} /> <Progress type="circle" width={85} percent={parseInt(props.info.finishCustomerNum /(props.info.cultureCustomerNum)*100 as any)} strokeWidth={10}
format={percent => <div className='wcl'>
{`${(parseInt(props.info.finishCustomerNum /(props.info.cultureCustomerNum)*100 as any))}% `}
<div>完成率</div>
</div>} />
{/* <div className='wcl'> */}
{/* {`${(parseInt(props.info.finishCustomerNum /(props.info.cultureCustomerNum)*100 as any))}% `} */}
{/* <div>完成率</div> */}
{/* </div> */}
</div> </div>
<div className="num"> <div className="num">
<div className="item"> {`指派人数：${props.info.cultureCustomerNum}`}</div> <div className="item"> {`指派人数：${props.info.cultureCustomerNum}`}</div>
......
src/modules/task-center/data-center/components/StudyTable.tsx
...@@ -26,34 +26,46 @@ function StudyTable(props: any) { ...@@ -26,34 +26,46 @@ function StudyTable(props: any) {
const [list, setList] = useState<any[]>([]); const [list, setList] = useState<any[]>([]);
const [total, setTotal] = useState<any>(0); const [total, setTotal] = useState<any>(0);
const [name, setName] = useState<any>(''); const [name, setName] = useState<any>('');
const timer = useRef<any>(null) const [orderFiled, setOrderFiled] = useState<any>(null);
const [sort, setSort] = useState<any>(null);
const timer = useRef<any>(null);
const sortNameMap: any = {
learnPercentage: 'LEARN_NUM',
latelyLearnTime: 'LATE_LEARN_TIME',
startLearnTime: 'START_LEARN_TIME',
}
useEffect(() => { useEffect(() => {
getList() getList()
}, [query]) }, [query, orderFiled, sort])
function getList() { function getList() {
Service.Hades('public/hades/getTaskCustomerRecordPage', query).then((res: any) => { const _query = { ...query };
delete _query.sortMap;
if (sort) {
_query.sortMap = {
[sortNameMap[orderFiled]]: sort === "ascend" ? 'SORT_ASC' : 'SORT_DESC'
}
}
Service.Hades('public/hades/getTaskCustomerRecordPage', _query).then((res: any) => {
res.result.records.map((item: any) => { res.result.records.map((item: any) => {
item.department =item.departmentNameList.map((_item:any)=>{ item.department = item.departmentNameList.map((_item: any) => {
if (_item == '1000') { if (_item == '1000') {
return '微信' return '微信'
} else { } else {
return <WWOpenDataCom type="departmentName" openid={_item} /> return <WWOpenDataCom type="departmentName" openid={_item} />
} }
}) })
}) })
setList(res.result.records) setList(res.result.records)
setTotal(res.result.total) setTotal(res.result.total)
}) })
} }
const columns = [ const columns = [
{ {
title: '学员', title: '学员',
...@@ -73,13 +85,13 @@ function StudyTable(props: any) { ...@@ -73,13 +85,13 @@ function StudyTable(props: any) {
key: 'departmentNameList', key: 'departmentNameList',
dataIndex: 'departmentNameList', dataIndex: 'departmentNameList',
render: (val: any, record: any) => { render: (val: any, record: any) => {
return <div> return <div>
{ {
record.department.map((item:any,index:number)=>{ record.department.map((item: any, index: number) => {
if((index+1) ==record.department.length){ if ((index + 1) == record.department.length) {
return item return item
}else{ } else {
return [item,';'] return [item, ';']
} }
}) })
...@@ -103,9 +115,17 @@ function StudyTable(props: any) { ...@@ -103,9 +115,17 @@ function StudyTable(props: any) {
}, },
}, },
{ {
title: '学习进度', title: <div>学习进度 <Tooltip
title={'已完成任务数/任务总数'}>
<span
style={{ color: "rgba(191, 191, 191, 1)", fontWeight: 400 }}
className="iconfont"
>&#xe61d;</span>
</Tooltip></div>,
key: 'learnPercentage', key: 'learnPercentage',
sorter: true,
dataIndex: 'learnPercentage', dataIndex: 'learnPercentage',
sortOrder: (orderFiled == 'learnPercentage') ? sort : null,
render: (val: any, record: any) => { render: (val: any, record: any) => {
return `${val}%`; return `${val}%`;
}, },
...@@ -117,8 +137,8 @@ function StudyTable(props: any) { ...@@ -117,8 +137,8 @@ function StudyTable(props: any) {
dataIndex: 'latelyLearnTime', dataIndex: 'latelyLearnTime',
sorter: true, sorter: true,
width: 240, width: 240,
sortOrder: (orderFiled == 'latelyLearnTime') ? sort : null,
render: (val: any, record: any) => { render: (val: any, record: any) => {
return `${formatDate('YYYY-MM-DD H:i', parseInt(record.latelyLearnTime))}`; return `${formatDate('YYYY-MM-DD H:i', parseInt(record.latelyLearnTime))}`;
}, },
}, },
...@@ -128,6 +148,8 @@ function StudyTable(props: any) { ...@@ -128,6 +148,8 @@ function StudyTable(props: any) {
dataIndex: 'startLearnTime', dataIndex: 'startLearnTime',
width: 240, width: 240,
sorter: true, sorter: true,
field: 'yuiooo',
sortOrder: (orderFiled == 'startLearnTime') ? sort : null,
render: (val: any, record: any) => { render: (val: any, record: any) => {
return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>; return <div>{formatDate('YYYY-MM-DD H:i', val)}</div>;
}, },
...@@ -154,6 +176,13 @@ function StudyTable(props: any) { ...@@ -154,6 +176,13 @@ function StudyTable(props: any) {
}, },
]; ];
function onChange(pagination: any, filters: any, sorter: any, extra: any) {
console.log(sorter)
setOrderFiled(sorter.field || null)
setSort(sorter.order)
}
return <div className="study_Table"> return <div className="study_Table">
<div className="filter"> <div className="filter">
...@@ -256,6 +285,7 @@ function StudyTable(props: any) { ...@@ -256,6 +285,7 @@ function StudyTable(props: any) {
storeUserId: User.getStoreUserId(), storeUserId: User.getStoreUserId(),
userId: User.getStoreUserId(), userId: User.getStoreUserId(),
}) })
setSort('')
}}> }}>
&#xe61b;{' '} &#xe61b;{' '}
</span> </span>
...@@ -275,7 +305,7 @@ function StudyTable(props: any) { ...@@ -275,7 +305,7 @@ function StudyTable(props: any) {
columns={columns} columns={columns}
pagination={false} pagination={false}
className='user-learning-table' className='user-learning-table'
onChange={() => { }} onChange={onChange}
showSorterTooltip={false} showSorterTooltip={false}
bordered bordered
/> />
...@@ -293,7 +323,7 @@ function StudyTable(props: any) { ...@@ -293,7 +323,7 @@ function StudyTable(props: any) {
</div> </div>
)} )}
</div> </div>
</div> </div>
} }
......
src/modules/task-center/data-center/components/course.less
...@@ -38,13 +38,20 @@ ...@@ -38,13 +38,20 @@
.taskItemList{ .taskItemList{
margin-left: 64px; margin-left: 64px;
.item{ .item{
padding: 16px 0px 16px 32px; padding: 16px 0px 16px 16px;
border-bottom: 1px dashed #E8E8E8; border-bottom: 1px dashed #E8E8E8;
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
line-height: 20px; line-height: 20px;
.name{
img{
width: 20px;
position: relative;
top: -2px;
}
}
&.noBorder{ &.noBorder{
border:none; border:none;
} }
......
src/modules/task-center/data-center/index.less
...@@ -33,8 +33,7 @@ ...@@ -33,8 +33,7 @@
line-height: 25px; line-height: 25px;
} }
.status{ .status{
width: 42px; padding: 0px 8px;
height: 20px;
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
...@@ -42,7 +41,9 @@ ...@@ -42,7 +41,9 @@
line-height: 20px; line-height: 20px;
text-align: center; text-align: center;
margin-left: 24px; margin-left: 24px;
position: relative;
top: 4px;
height: 20px;
} }
} }
.info{ .info{
...@@ -79,14 +80,28 @@ ...@@ -79,14 +80,28 @@
width: 85px; width: 85px;
margin-top: 27px; margin-top: 27px;
margin-right: 24px; margin-right: 24px;
position: relative;
.wcl{ .wcl{
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #666666; color: #666666;
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
// left: 0px;
// top: 20px;
// width: 100%;
// height: 100%;
// display: none;
// position: absolute;
// z-index: 1;
} }
// &:hover{
// .wcl{
// display: block;
// }
// }
} }
.num{ .num{
margin-top: 27px; margin-top: 27px;
......
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