Skip to content

X
xiaomai-cloud-class-web
Commit 1be68445 by yuananting
Options

fix:考试详情题目数据序号取index

parent e9903284
Showing with 141 additions and 156 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' };
...@@ -28,165 +27,152 @@ function ExamData(props: any) { ...@@ -28,165 +27,152 @@ function ExamData(props: any) {
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(() => { useEffect(() => {
queryExamUserData(); queryExamUserData();
}, []) }, []);
useEffect(() => { useEffect(() => {
queryRef.current = query; queryRef.current = query;
queryExamUserDataList(); queryExamUserDataList();
}, [query]) }, [query]);
function queryExamUserData() { function queryExamUserData() {
Service.Hades('public/hades/queryExamQuestionData', { Service.Hades('public/hades/queryExamQuestionData', {
examId: props.examId, examId: props.examId,
tenantId: User.getStoreId(), tenantId: User.getStoreId(),
userId: User.getStoreUserId(), userId: User.getStoreUserId(),
source: 0 source: 0,
}).then((res) => { }).then((res) => {
setUserData(res.result) setUserData(res.result);
});
})
} }
function queryExamUserDataList() { function queryExamUserDataList() {
Service.Hades('public/hades/queryExamQuestionDataList', { Service.Hades('public/hades/queryExamQuestionDataList', {
...query, ...query,
examId: props.examId, examId: props.examId,
tenantId: User.getStoreId(), tenantId: User.getStoreId(),
userId: User.getStoreUserId(), userId: User.getStoreUserId(),
source: 0 source: 0,
}).then((res) => { }).then((res) => {
setList(res.result.records); setList(res.result.records);
setTotal(parseInt(res.result.total)) setTotal(parseInt(res.result.total));
if (!allData) { if (!allData) {
setAllData(parseInt(res.result.total)) setAllData(parseInt(res.result.total));
} }
}) });
} }
const columns = [ const columns = [
{ {
title: "序号", title: '序号',
dataIndex: "sort", dataIndex: 'sort',
width: 60, width: 60,
render: (text: any) => <span>{text + 1}</span>, render: (text: any, record: any, index: any) => <span>{index + 1}</span>,
}, },
{ {
title: "题目", title: '题目',
dataIndex: "questionStem", dataIndex: 'questionStem',
ellipsis: true, ellipsis: true,
width: 350, width: 350,
render: (val: any) => { render: (val: any) => {
var handleVal = val; var handleVal = val;
handleVal = handleVal.replace(/<(?!img|input).*?>/g, ""); handleVal = handleVal.replace(/<(?!img|input).*?>/g, '');
handleVal = handleVal.replace(/<\s?input[^>]*>/gi, "_、"); handleVal = handleVal.replace(/<\s?input[^>]*>/gi, '_、');
handleVal = handleVal.replace(/\&nbsp\;/gi, " "); handleVal = handleVal.replace(/\&nbsp\;/gi, ' ');
return ( return (
<Tooltip <Tooltip
overlayClassName="aid-tool-list" overlayClassName='aid-tool-list'
title={ title={<div style={{ maxWidth: 700, width: 'auto' }}>{handleVal}</div>}
<div style={{ maxWidth: 700, width: "auto" }}>{handleVal}</div> placement='topLeft'
} overlayStyle={{ maxWidth: 700 }}>
placement="topLeft"
overlayStyle={{ maxWidth: 700 }}
>
{handleVal} {handleVal}
</Tooltip> </Tooltip>
); );
}, },
}, },
{ {
title: "题型", title: '题型',
dataIndex: "questionType", dataIndex: 'questionType',
render: (text: any) => <span>{(questionTypeList as any)[text]}</span>, render: (text: any) => <span>{(questionTypeList as any)[text]}</span>,
filters: Object.keys(questionTypeList).map((key) => { filters: Object.keys(questionTypeList).map((key) => {
return { return {
text: (questionTypeList as any)[key], text: (questionTypeList as any)[key],
value: key value: key,
} };
}), }),
}, },
{ {
title: "本次正确率", title: '本次正确率',
dataIndex: "currentAccuracy", dataIndex: 'currentAccuracy',
sorter: true, sorter: true,
sortOrder: field === "currentAccuracy" ? order : sortStatus.type, sortOrder: field === 'currentAccuracy' ? order : sortStatus.type,
render: (text: any) => <span>{parseInt(text * 100 as any)}%</span>, render: (text: any) => <span>{parseInt((text * 100) as any)}%</span>,
}, },
{ {
title: <div>历史正确率 <Tooltip title: (
overlayClassName="tool-list" <div>
title='包含本次考试正确率' 历史正确率{' '}
placement="top" <Tooltip overlayClassName='tool-list' title='包含本次考试正确率' placement='top' overlayStyle={{ maxWidth: 700 }}>
overlayStyle={{ maxWidth: 700 }} {' '}
> <span style={{ color: 'rgba(191, 191, 191, 1)' }} className="icon iconfont">&#xe61d;</span> <span style={{ color: 'rgba(191, 191, 191, 1)' }} className='icon iconfont'>
&#xe61d;
</span>
</Tooltip> </Tooltip>
</div>, </div>
dataIndex: "totalAccuracy", ),
render: (text: any) => <span>{parseInt(text * 100 as any)}%</span>, dataIndex: 'totalAccuracy',
render: (text: any) => <span>{parseInt((text * 100) as any)}%</span>,
}, },
]; ];
function onChange(pagination: any, filters: any, sorter: any, extra: any) { function onChange(pagination: any, filters: any, sorter: any, extra: any) {
console.log(filters, sorter); console.log(filters, sorter);
setfield(sorter.field); setfield(sorter.field);
setOrder(sorter.order) setOrder(sorter.order);
console.log(sorter.field, sorter.order, (orderEnum as any)[sorter.field]) console.log(sorter.field, sorter.order, (orderEnum as any)[sorter.field]);
let _query: any = { ...queryRef.current }; let _query: any = { ...queryRef.current };
console.log(filters.questionType) console.log(filters.questionType);
if (filters.questionType) { if (filters.questionType) {
console.log(233232) console.log(233232);
_query.questionType = filters.questionType; _query.questionType = filters.questionType;
_query.current = 1; _query.current = 1;
} else { } else {
delete _query.questionType delete _query.questionType;
} }
_query.order = (orderEnum as any)[sorter.field][sorter.order] _query.order = (orderEnum as any)[sorter.field][sorter.order];
setQuery(_query) setQuery(_query);
} }
function download() { function download() {
Service.Hades('public/hades/exportExamData', { Service.Hades('public/hades/exportExamData', {
// ...query, // ...query,
...@@ -194,103 +180,102 @@ function ExamData(props: any) { ...@@ -194,103 +180,102 @@ function ExamData(props: any) {
exportDataType: 'EXAM_QUESTION_DATA', exportDataType: 'EXAM_QUESTION_DATA',
tenantId: User.getStoreId(), tenantId: User.getStoreId(),
userId: User.getStoreUserId(), userId: User.getStoreUserId(),
source: 0 source: 0,
}).then((res) => { }).then((res) => {
const dom = (document as any).getElementById("load-play-back-excel") const dom = (document as any).getElementById('load-play-back-excel');
dom.setAttribute('href', res.result); dom.setAttribute('href', res.result);
dom.click(); dom.click();
});
})
} }
return (
<div className='rr'>
return <div className="rr"> <a download id='load-play-back-excel' style={{ position: 'absolute', left: '-10000px' }}></a>
<a <div className='dataPanal'>
download {!!examData.singleChoiceCnt && (
id="load-play-back-excel" <div className='item'>
style={{ position: "absolute", left: "-10000px" }} <div className='num'>{Math.round((examData.singleChoiceAccuracy || 0) * 100)}%</div>
></a> <div className='percent'>正确率</div>
<div className="dataPanal"> <div className='subTitle'>
{ <div className='type'>
!!examData.singleChoiceCnt && <div className="item"> <span className='icon iconfont'>&#xe7fa;</span>单选题 <span>(共{examData.singleChoiceCnt}题)</span>
<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> </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> </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> </div>
} )}
{!!examData.multiChoiceCnt && (
{ <div className='item'>
!!examData.gapFillingCnt && <div className="item"> <div className='num'>{Math.round((examData.multiChoiceAccuracy || 0) * 100)}%</div>
<div className="num">{Math.round((examData.gapFillingAccuracy || 0) * 100)}%</div> <div className='percent'>正确率</div>
<div className="percent">正确率</div> <div className='subTitle'>
<div className="subTitle"><div className="type"><span className="icon iconfont">&#xe7fd;</span>填空题<span>(共{examData.gapFillingCnt}题)</span></div></div> <div className='type'>
<span className='icon iconfont'>&#xe7fb;</span>多选题<span>(共{examData.multiChoiceCnt}题)</span>
</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>
}
</div> </div>
{ )}
!!allData && <Button style={{ marginBottom: 12, marginTop: 12 }} onClick={download} >导出</Button>
} {!!examData.judgeCnt && (
<div className='item'>
<div className='num'>{Math.round((examData.judgeAccuracy || 0) * 100)}%</div>
<div className="content"> <div className='percent'>正确率</div>
<Table <div className='subTitle'>
bordered <div className='type'>
size="small" <span className='icon iconfont'>&#xe7fc;</span>判断题<span>(共{examData.judgeCnt}题)</span>
columns={columns} </div>
dataSource={list} </div>
onChange={onChange} </div>
pagination={false} )}
> {!!examData.gapFillingCnt && (
</Table> <div className='item'>
{total > 0 && <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 <PageControl
size="small" size='small'
current={query.current - 1} current={query.current - 1}
pageSize={query.size} pageSize={query.size}
total={total} total={total}
toPage={(page: any) => { toPage={(page: any) => {
console.log(page) console.log(page);
let _query: any = { ...queryRef.current }; let _query: any = { ...queryRef.current };
_query.current = page + 1; _query.current = page + 1;
setQuery(_query) setQuery(_query);
}} }}
/> />
} )}
</div> </div>
</div> </div>
);
} }
export default ExamData; export default ExamData;
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