Skip to content

X
xiaomai-cloud-class-web
Commit a57782eb 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 090763d8 25189f3f
Showing with 177 additions and 35 deletions
src/modules/task-center/data-center/Index.tsx
...@@ -11,7 +11,7 @@ import './index.less' ...@@ -11,7 +11,7 @@ import './index.less'
const { TabPane } = Tabs; const { TabPane } = Tabs;
function DataCenter(props: any) { function DataCenter(props: any) {
const { match: { params: { planId } } } = props; const { match: { params: { taskId } } } = props;
const [info, setInfo] = useState<any>({}) const [info, setInfo] = useState<any>({})
const [tabKey, setTabKey] = useState<any>('') const [tabKey, setTabKey] = useState<any>('')
...@@ -40,10 +40,11 @@ function DataCenter(props: any) { ...@@ -40,10 +40,11 @@ function DataCenter(props: any) {
}, []) }, [])
function getInfo() { function getInfo() {
Service.Hades('public/hades/getTrainingPlanDetail', { planId }).then((res: any) => { Service.Hades('/public/hades/getTrainingTaskDetail', { taskId }).then((res: any) => {
res.result.trainingTaskList.map((item: any) => { res.result.trainingStageList.map((item: any) => {
item.open = true item.open = true
}) })
res.result.cover =res.result.courseMediaVOS.filter((item:any) => item.contentType === 'COVER')[0]
setInfo(res.result) setInfo(res.result)
}) })
} }
...@@ -57,12 +58,12 @@ function DataCenter(props: any) { ...@@ -57,12 +58,12 @@ function DataCenter(props: any) {
/> />
<div className="content"> <div className="content">
<DataInfo info={info} /> <DataInfo info={info} />
<Tabs defaultActiveKey={'study'} onChange={() => { }}> <Tabs defaultActiveKey={'course'} onChange={() => { }}>
{ {
tabList.map((item: any) => { tabList.map((item: any) => {
return <TabPane tab={item.name} key={item.key}> return <TabPane tab={item.name} key={item.key}>
{ {
<item.compoment info={info} /> <item.compoment info={info} taskId={taskId} />
} }
</TabPane> </TabPane>
}) })
......
src/modules/task-center/data-center/components/DataInfo.tsx
...@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; ...@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { Progress } from 'antd'; import { Progress } from 'antd';
import ENUM from '../../enum' import ENUM from '../../enum'
import moment from 'moment'
const defaultCover = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png'; const defaultCover = 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png';
function DataInfo(props: any) { function DataInfo(props: any) {
...@@ -9,22 +10,28 @@ function DataInfo(props: any) { ...@@ -9,22 +10,28 @@ function DataInfo(props: any) {
return <div className="infoBox"> return <div className="infoBox">
<div className="left"> <div className="left">
<div className="banner"> <div className="banner">
<img src={props.info.coverUrl || defaultCover} alt="" /> <img src={ props.info.cover|| defaultCover} alt="" />
</div> </div>
<div className="textBox"> <div className="textBox">
<div className="nameBox"> <div className="nameBox">
<div className="name">{props.info.planName}</div> <div className="name">{props.info.taskName}</div>
<div className="status" style={{ color: ENUM.trainStatus[props.info.status || 'UN_START'].color, background: ENUM.trainStatus[props.info.status || 'UN_START'].background }}>{ENUM.trainStatus[props.info.status || 'UN_START'].text}</div> <div className="status" style={{ color: ENUM.trainStatus[props.info.taskState || 'UN_START'].color, background: ENUM.trainStatus[props.info.taskState || 'UN_START'].background }}>{ENUM.trainStatus[props.info.taskState || 'UN_START'].text}</div>
</div> </div>
<div className="info"> <div className="info">
<span> {`创建人: 文小白 `}</span> <span> {`创建人: ${props.info.createName} `}</span>
<span style={{ marginLeft: 24 }}> {`培训时间：2021-07-01 00:00 至 2021-08-17 00:00`}</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">{`任务数: 98`}</div> <div className="item">{`任务数:${props.info.contentNum}`}</div>
<div className="item"><span className="icon iconfont" style={{color:'rgba(41, 102, 255, 1)'}}>&#xe617;</span>{`课程：98`}</div> {
<div className="item"><span className="icon iconfont" style={{color:'rgba(255, 105, 0, 1)'}} >&#xe61c;</span>{`作业：4`}</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>
<div className="item"><span className="icon iconfont" style={{color:'rgba(255, 79, 79, 1)'}} >&#xe619;</span>{`考试：4`}</div> }
{/* <div className="item"><span className="icon"><img src="https://image.xiaomaiketang.com/xm/6C2GjSpnDp.png" alt="" /></span>{`作业：4`}</div> */}
{
!!props.info.examNum && <div className="item"><span className="icon"><img src="https://image.xiaomaiketang.com/xm/fCDPp2Eenc.png" alt="" /></span>{`考试：${props.info.examNum}`}</div>
}
</div> </div>
</div> </div>
...@@ -32,12 +39,12 @@ function DataInfo(props: any) { ...@@ -32,12 +39,12 @@ function DataInfo(props: any) {
</div> </div>
<div className="right"> <div className="right">
<div className="prog"> <div className="prog">
<Progress type="circle" width={85} percent={75} strokeWidth={10} format={percent => <div className='wcl'>{`${percent}% `} <div>完成率</div></div>} /> <Progress type="circle" width={85} percent={75} strokeWidth={10} format={percent => <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"> {`指派人数：${12}`}</div> <div className="item"> {`指派人数：${props.info.cultureCustomerNum}`}</div>
<div className="item">{`学习人数：${12}`}</div> <div className="item">{`学习人数：${props.info.cultureCustomerNum}`}</div>
<div className="item">{`完成人数：${12}`}</div> <div className="item">{`完成人数：${props.info.finishCustomerNum}`}</div>
</div> </div>
</div> </div>
</div> </div>
......
src/modules/task-center/data-center/components/ExamTable.tsx
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { PageControl, XMTable } from '@/components';
import Service from '@/common/js/service';
import User from '@/common/js/user';
function CourseTable(props: any) {
return <div className="info_banner"> function ExamTable(props: any) {
const [query, setQuery] = useState<any>({
current: 1, size: 10,
taskId: props.taskId,
source: 0,
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
});
const [list, setList] = useState<any[]>([]);
const [total, setTotal] = useState<any>(0);
useEffect(() => {
getList()
}, [query])
function getList() {
Service.Hades('public/hades/queryTrainingExamUserData', query).then((res: any) => {
setList(res.result.records)
setTotal(res.result.tatal)
})
}
const columns = [
{
title: '考试名称',
key: 'examName',
},
{
title: '完成人数',
key: 'finishCnt',
dataIndex: 'finishCnt',
},
{
title: '平均分',
key: 'averageScore',
dataIndex: 'averageScore',
},
{
title: '及格人数',
key: 'passCnt',
dataIndex: 'passCnt',
},
{
title: '及格率',
key: 'passPercentage',
dataIndex: 'passPercentage',
render: (val: any, record: any) => {
return <div></div>;
},
},
{
title: '操作',
key: 'operate',
dataIndex: 'operate',
render: (val: any, record: any) => {
return (
<div className='operate-area'>
<span className='operate-item' onClick={() => { }}>
查看数据
</span>
</div>
);
},
},
];
return <div className="study_Table">
<div style={{ marginTop: 12 }}>
<XMTable
renderEmpty={{
type: 'college',
description: '暂无数据',
}}
rowKey={(record: any) => record.storeCustomerId}
dataSource={list}
columns={columns}
pagination={false}
className='user-learning-table'
onChange={() => { }}
showSorterTooltip={false}
bordered
/>
{list.length > 0 && (
<div className='box-footer'>
<PageControl
current={query.current - 1}
pageSize={query.size}
total={total}
toPage={(page: any) => {
setQuery({ ...query, current: query.current + 1 })
}}
/>
</div>
)}
</div>
</div> </div>
} }
export default withRouter(CourseTable) export default withRouter(ExamTable)
\ No newline at end of file \ No newline at end of file
src/modules/task-center/data-center/components/StudyTable.tsx
...@@ -3,7 +3,9 @@ import { Route, withRouter } from "react-router-dom"; ...@@ -3,7 +3,9 @@ import { Route, withRouter } from "react-router-dom";
import { Row, Input, Select, Tooltip, Col } from 'antd'; import { Row, Input, Select, Tooltip, Col } from 'antd';
import RangePicker from '@/modules/common/DateRangePicker'; import RangePicker from '@/modules/common/DateRangePicker';
import { PageControl, XMTable } from '@/components'; import { PageControl, XMTable } from '@/components';
import Service from '@/common/js/service';
import ENUM from '../../enum'; import ENUM from '../../enum';
import User from '@/common/js/user';
import moment from 'moment'; import moment from 'moment';
import UserLearningData from '../UserLearningData'; import UserLearningData from '../UserLearningData';
const { Search } = Input; const { Search } = Input;
...@@ -11,16 +13,32 @@ const { Option } = Select; ...@@ -11,16 +13,32 @@ const { Option } = Select;
declare var formatDate: any; declare var formatDate: any;
function StudyTable(props: any) { function StudyTable(props: any) {
const [query, setQuery] = useState<any>({ current: 1, size: 10 }); const [query, setQuery] = useState<any>({
const [list,setList] = useState<any[]>([ current: 1, size: 10,
{ taskId: props.taskId,
storeCustomerName: 'yat', source: 0,
learnState2: '技术部', storeId: User.getStoreId(),
learnState1: '前端', storeUserId: User.getStoreUserId(),
learnState: 'UN_PLAY', userId: User.getStoreUserId(),
} });
]); const [list, setList] = useState<any[]>([]);
const [total,setTotal] = useState<any>(0); const [total, setTotal] = useState<any>(0);
useEffect(() => {
getList()
}, [query])
function getList() {
Service.Hades('public/hades/getTaskCustomerRecordPage', query).then((res: any) => {
setList(res.result.records)
setTotal(res.result.tatal)
})
}
const columns = [ const columns = [
{ {
...@@ -200,7 +218,7 @@ function StudyTable(props: any) { ...@@ -200,7 +218,7 @@ function StudyTable(props: any) {
pageSize={query.size} pageSize={query.size}
total={total} total={total}
toPage={(page:any) => { toPage={(page:any) => {
setQuery({ ...query, current: query.current + 1 })
}} }}
/> />
......
src/modules/task-center/data-center/index.less
...@@ -46,6 +46,15 @@ ...@@ -46,6 +46,15 @@
} }
.info{ .info{
margin-bottom: 12px; margin-bottom: 12px;
.icon{
position: relative;
top: -2px;
margin-right: 8px;
img{
width: 20px;
}
}
span,.item{ span,.item{
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
......
src/modules/task-center/train-task/TrainTaskPage.jsx
...@@ -91,7 +91,7 @@ function TrainTaskPage(props) { ...@@ -91,7 +91,7 @@ function TrainTaskPage(props) {
<TrainFilter onChange={queryChange} /> <TrainFilter onChange={queryChange} />
<TrainList trainListData={trainListData} storeTaskNum={storeTaskNum} query={query} totalCount={totalCount} onChange={queryChange} /> <TrainList trainListData={trainListData} storeTaskNum={storeTaskNum} query={query} totalCount={totalCount} onChange={queryChange} />
</div> </div>
<Route path={`${match.url}/data`} component={DataCenter} /> <Route path={`${match.url}/data/:taskId`} component={DataCenter} />
</div> </div>
); );
} }
......
src/modules/task-center/train-task/components/TrainList.jsx
...@@ -288,7 +288,7 @@ function TrainList(props) { ...@@ -288,7 +288,7 @@ function TrainList(props) {
<div <div
className='operate__item' className='operate__item'
onClick={() => { onClick={() => {
props.history.push(`${match.path}/data?planId=${record.planId}`); props.history.push(`${match.path}/data/${record.taskId}`);
}}> }}>
数据 数据
</div> </div>
......
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