Skip to content

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

Merge branch 'feature/yuananting/20210624/replace_empty_picture' into dev

parents 07b3c46e 1be68445
Showing with 267 additions and 283 deletions
src/modules/teach-tool/examination-manager/ExamData.tsx
import React, { useState, useRef, useEffect, useContext } from 'react' import React, { useState, useRef, useEffect, useContext } from 'react';
import Service from "@/common/js/service"; import Service from '@/common/js/service';
import { PageControl } from "@/components"; import { PageControl } from '@/components';
import { Input, Select, Tooltip, Button, Table } from 'antd'; import { Input, Select, Tooltip, Button, Table } from 'antd';
import User from "@/common/js/user"; import User from '@/common/js/user';
import moment from 'moment'; import moment from 'moment';
import './userData.less' import './userData.less';
const { Search } = Input; const { Search } = Input;
const { Option } = Select; const { Option } = Select;
interface sortType { interface sortType {
type: "ascend" | "descend" | null | undefined type: 'ascend' | 'descend' | null | undefined;
} }
function ExamData(props: any) { function ExamData(props: any) {
const sortStatus: sortType = { const sortStatus: sortType = {
type: undefined type: undefined,
} };
const examDataInit: any = {}; const examDataInit: any = {};
const queryInit: any = { current: 1, size: 10, order: 'SORT_ASC' }; const queryInit: any = { current: 1, size: 10, order: 'SORT_ASC' };
const [examData, setUserData] = useState(examDataInit); const [examData, setUserData] = useState(examDataInit);
const [list, setList] = useState([]); const [list, setList] = useState([]);
const [query, setQuery] = useState(queryInit); const [query, setQuery] = useState(queryInit);
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [field, setfield] = useState(''); const [field, setfield] = useState('');
const [allData, setAllData] = useState(0); const [allData, setAllData] = useState(0);
const [order, setOrder] = useState(sortStatus.type); const [order, setOrder] = useState(sortStatus.type);
const questionTypeList = { const questionTypeList = {
SINGLE_CHOICE: "单选题", SINGLE_CHOICE: '单选题',
MULTI_CHOICE: "多选题", MULTI_CHOICE: '多选题',
JUDGE: "判断题", JUDGE: '判断题',
GAP_FILLING: "填空题", GAP_FILLING: '填空题',
INDEFINITE_CHOICE: "不定项选择题", INDEFINITE_CHOICE: '不定项选择题',
}; };
const userTypeEnum = { const userTypeEnum = {
WORK_WE_CHAT: '企业微信', WORK_WE_CHAT: '企业微信',
WE_CHAT: '微信' WE_CHAT: '微信',
} };
const userExamStateEnum = { const userExamStateEnum = {
EXAM: '进行中', EXAM: '进行中',
LACK_EXAM: '缺考', LACK_EXAM: '缺考',
FINISH_EXAM: '已考试' FINISH_EXAM: '已考试',
} };
const orderEnum = { const orderEnum = {
currentAccuracy: { currentAccuracy: {
ascend: 'ACCURACY_ASC', ascend: 'ACCURACY_ASC',
descend: 'ACCURACY_DESC' descend: 'ACCURACY_DESC',
}, },
};
}
const queryRef = useRef({});
const queryRef = useRef({}); useEffect(() => {
queryExamUserData();
useEffect(() => { }, []);
queryExamUserData();
}, []) useEffect(() => {
queryRef.current = query;
useEffect(() => { queryExamUserDataList();
queryRef.current = query; }, [query]);
queryExamUserDataList();
}, [query]) function queryExamUserData() {
Service.Hades('public/hades/queryExamQuestionData', {
function queryExamUserData() { examId: props.examId,
Service.Hades('public/hades/queryExamQuestionData', { tenantId: User.getStoreId(),
examId: props.examId, userId: User.getStoreUserId(),
tenantId: User.getStoreId(), source: 0,
userId: User.getStoreUserId(), }).then((res) => {
source: 0 setUserData(res.result);
}).then((res) => { });
setUserData(res.result) }
}) function queryExamUserDataList() {
} Service.Hades('public/hades/queryExamQuestionDataList', {
...query,
examId: props.examId,
function queryExamUserDataList() { tenantId: User.getStoreId(),
Service.Hades('public/hades/queryExamQuestionDataList', { userId: User.getStoreUserId(),
...query, source: 0,
examId: props.examId, }).then((res) => {
tenantId: User.getStoreId(), setList(res.result.records);
userId: User.getStoreUserId(), setTotal(parseInt(res.result.total));
source: 0 if (!allData) {
}).then((res) => { setAllData(parseInt(res.result.total));
setList(res.result.records); }
setTotal(parseInt(res.result.total)) });
if (!allData) { }
setAllData(parseInt(res.result.total))
} const columns = [
}) {
} title: '序号',
dataIndex: 'sort',
width: 60,
const columns = [ render: (text: any, record: any, index: any) => <span>{index + 1}</span>,
},
{ {
title: "序号", title: '题目',
dataIndex: "sort", dataIndex: 'questionStem',
width: 60, ellipsis: true,
render: (text: any) => <span>{text + 1}</span>, width: 350,
}, render: (val: any) => {
{ var handleVal = val;
title: "题目", handleVal = handleVal.replace(/<(?!img|input).*?>/g, '');
dataIndex: "questionStem", handleVal = handleVal.replace(/<\s?input[^>]*>/gi, '_、');
ellipsis: true, handleVal = handleVal.replace(/\&nbsp\;/gi, ' ');
width: 350, return (
render: (val: any) => { <Tooltip
var handleVal = val; overlayClassName='aid-tool-list'
handleVal = handleVal.replace(/<(?!img|input).*?>/g, ""); title={<div style={{ maxWidth: 700, width: 'auto' }}>{handleVal}</div>}
handleVal = handleVal.replace(/<\s?input[^>]*>/gi, "_、"); placement='topLeft'
handleVal = handleVal.replace(/\&nbsp\;/gi, " "); overlayStyle={{ maxWidth: 700 }}>
return ( {handleVal}
<Tooltip </Tooltip>
overlayClassName="aid-tool-list" );
title={ },
<div style={{ maxWidth: 700, width: "auto" }}>{handleVal}</div> },
} {
placement="topLeft" title: '题型',
overlayStyle={{ maxWidth: 700 }} dataIndex: 'questionType',
> render: (text: any) => <span>{(questionTypeList as any)[text]}</span>,
{handleVal} filters: Object.keys(questionTypeList).map((key) => {
</Tooltip> return {
); text: (questionTypeList as any)[key],
}, value: key,
};
}, }),
{ },
title: "题型", {
dataIndex: "questionType", title: '本次正确率',
render: (text: any) => <span>{(questionTypeList as any)[text]}</span>, dataIndex: 'currentAccuracy',
filters: Object.keys(questionTypeList).map((key) => { sorter: true,
return { sortOrder: field === 'currentAccuracy' ? order : sortStatus.type,
text: (questionTypeList as any)[key], render: (text: any) => <span>{parseInt((text * 100) as any)}%</span>,
value: key },
} {
}), title: (
<div>
}, 历史正确率{' '}
{ <Tooltip overlayClassName='tool-list' title='包含本次考试正确率' placement='top' overlayStyle={{ maxWidth: 700 }}>
title: "本次正确率", {' '}
dataIndex: "currentAccuracy", <span style={{ color: 'rgba(191, 191, 191, 1)' }} className='icon iconfont'>
sorter: true, &#xe61d;
sortOrder: field === "currentAccuracy" ? order : sortStatus.type, </span>
render: (text: any) => <span>{parseInt(text * 100 as any)}%</span>, </Tooltip>
},
{
title: <div>历史正确率 <Tooltip
overlayClassName="tool-list"
title='包含本次考试正确率'
placement="top"
overlayStyle={{ maxWidth: 700 }}
> <span style={{ color: 'rgba(191, 191, 191, 1)' }} className="icon iconfont">&#xe61d;</span>
</Tooltip>
</div>,
dataIndex: "totalAccuracy",
render: (text: any) => <span>{parseInt(text * 100 as any)}%</span>,
},
];
function onChange(pagination: any, filters: any, sorter: any, extra: any) {
console.log(filters, sorter);
setfield(sorter.field);
setOrder(sorter.order)
console.log(sorter.field, sorter.order, (orderEnum as any)[sorter.field])
let _query: any = { ...queryRef.current };
console.log(filters.questionType)
if (filters.questionType) {
console.log(233232)
_query.questionType = filters.questionType;
_query.current = 1;
} else {
delete _query.questionType
}
_query.order = (orderEnum as any)[sorter.field][sorter.order]
setQuery(_query)
}
function download() {
Service.Hades('public/hades/exportExamData', {
// ...query,
examId: props.examId,
exportDataType: 'EXAM_QUESTION_DATA',
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
source: 0
}).then((res) => {
const dom = (document as any).getElementById("load-play-back-excel")
dom.setAttribute('href', res.result);
dom.click();
})
}
return <div className="rr">
<a
download
id="load-play-back-excel"
style={{ position: "absolute", left: "-10000px" }}
></a>
<div className="dataPanal">
{
!!examData.singleChoiceCnt && <div className="item">
<div className="num">{Math.round((examData.singleChoiceAccuracy || 0) * 100)}%</div>
<div className="percent">正确率</div>
<div className="subTitle"><div className="type"><span className="icon iconfont">&#xe7fa;</span>单选题 <span>(共{examData.singleChoiceCnt}题)</span></div></div>
</div>
}
{
!!examData.multiChoiceCnt && <div className="item">
<div className="num">{Math.round((examData.multiChoiceAccuracy || 0) * 100)}%</div>
<div className="percent">正确率</div>
<div className="subTitle"><div className="type"><span className="icon iconfont">&#xe7fb;</span>多选题<span>(共{examData.multiChoiceCnt}题)</span></div></div>
</div>
}
{
!!examData.judgeCnt && <div className="item">
<div className="num">{Math.round((examData.judgeAccuracy || 0) * 100)}%</div>
<div className="percent">正确率</div>
<div className="subTitle"><div className="type"><span className="icon iconfont">&#xe7fc;</span>判断题<span>(共{examData.judgeCnt}题)</span></div></div>
</div>
}
{
!!examData.gapFillingCnt && <div className="item">
<div className="num">{Math.round((examData.gapFillingAccuracy || 0) * 100)}%</div>
<div className="percent">正确率</div>
<div className="subTitle"><div className="type"><span className="icon iconfont">&#xe7fd;</span>填空题<span>(共{examData.gapFillingCnt}题)</span></div></div>
</div>
}
{
!!examData.indefiniteChoiceCnt && <div className="item">
<div className="num">{Math.round((examData.indefiniteChoiceAccuracy || 0) * 100)}%</div>
<div className="percent">正确率</div>
<div className="subTitle"><div className="type"><span className="icon iconfont">&#xe7fe;</span>不定项选择题 <span>(共{examData.indefiniteChoiceCnt}题)</span></div></div>
</div>
}
</div>
{
!!allData && <Button style={{ marginBottom: 12, marginTop: 12 }} onClick={download} >导出</Button>
}
<div className="content">
<Table
bordered
size="small"
columns={columns}
dataSource={list}
onChange={onChange}
pagination={false}
>
</Table>
{total > 0 &&
<PageControl
size="small"
current={query.current - 1}
pageSize={query.size}
total={total}
toPage={(page: any) => {
console.log(page)
let _query: any = { ...queryRef.current };
_query.current = page + 1;
setQuery(_query)
}}
/>
}
</div> </div>
),
dataIndex: 'totalAccuracy',
render: (text: any) => <span>{parseInt((text * 100) as any)}%</span>,
},
];
function onChange(pagination: any, filters: any, sorter: any, extra: any) {
console.log(filters, sorter);
setfield(sorter.field);
setOrder(sorter.order);
console.log(sorter.field, sorter.order, (orderEnum as any)[sorter.field]);
let _query: any = { ...queryRef.current };
console.log(filters.questionType);
if (filters.questionType) {
console.log(233232);
_query.questionType = filters.questionType;
_query.current = 1;
} else {
delete _query.questionType;
}
_query.order = (orderEnum as any)[sorter.field][sorter.order];
setQuery(_query);
}
function download() {
Service.Hades('public/hades/exportExamData', {
// ...query,
examId: props.examId,
exportDataType: 'EXAM_QUESTION_DATA',
tenantId: User.getStoreId(),
userId: User.getStoreUserId(),
source: 0,
}).then((res) => {
const dom = (document as any).getElementById('load-play-back-excel');
dom.setAttribute('href', res.result);
dom.click();
});
}
return (
<div className='rr'>
<a download id='load-play-back-excel' style={{ position: 'absolute', left: '-10000px' }}></a>
<div className='dataPanal'>
{!!examData.singleChoiceCnt && (
<div className='item'>
<div className='num'>{Math.round((examData.singleChoiceAccuracy || 0) * 100)}%</div>
<div className='percent'>正确率</div>
<div className='subTitle'>
<div className='type'>
<span className='icon iconfont'>&#xe7fa;</span>单选题 <span>(共{examData.singleChoiceCnt}题)</span>
</div>
</div>
</div>
)}
{!!examData.multiChoiceCnt && (
<div className='item'>
<div className='num'>{Math.round((examData.multiChoiceAccuracy || 0) * 100)}%</div>
<div className='percent'>正确率</div>
<div className='subTitle'>
<div className='type'>
<span className='icon iconfont'>&#xe7fb;</span>多选题<span>(共{examData.multiChoiceCnt}题)</span>
</div>
</div>
</div>
)}
{!!examData.judgeCnt && (
<div className='item'>
<div className='num'>{Math.round((examData.judgeAccuracy || 0) * 100)}%</div>
<div className='percent'>正确率</div>
<div className='subTitle'>
<div className='type'>
<span className='icon iconfont'>&#xe7fc;</span>判断题<span>(共{examData.judgeCnt}题)</span>
</div>
</div>
</div>
)}
{!!examData.gapFillingCnt && (
<div className='item'>
<div className='num'>{Math.round((examData.gapFillingAccuracy || 0) * 100)}%</div>
<div className='percent'>正确率</div>
<div className='subTitle'>
<div className='type'>
<span className='icon iconfont'>&#xe7fd;</span>填空题<span>(共{examData.gapFillingCnt}题)</span>
</div>
</div>
</div>
)}
{!!examData.indefiniteChoiceCnt && (
<div className='item'>
<div className='num'>{Math.round((examData.indefiniteChoiceAccuracy || 0) * 100)}%</div>
<div className='percent'>正确率</div>
<div className='subTitle'>
<div className='type'>
<span className='icon iconfont'>&#xe7fe;</span>不定项选择题 <span>(共{examData.indefiniteChoiceCnt}题)</span>
</div>
</div>
</div>
)}
</div>
{!!allData && (
<Button style={{ marginBottom: 12, marginTop: 12 }} onClick={download}>
导出
</Button>
)}
<div className='content'>
<Table bordered size='small' columns={columns} dataSource={list} onChange={onChange} pagination={false}></Table>
{total > 0 && (
<PageControl
size='small'
current={query.current - 1}
pageSize={query.size}
total={total}
toPage={(page: any) => {
console.log(page);
let _query: any = { ...queryRef.current };
_query.current = page + 1;
setQuery(_query);
}}
/>
)}
</div>
</div> </div>
);
} }
export default ExamData;
export default ExamData;
\ No newline at end of file
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