仿真试卷页

This commit is contained in:
joylink_zhaoerwei 2024-02-28 15:57:07 +08:00
parent 103a63494e
commit 2d856bc24e
2 changed files with 114 additions and 57 deletions

View File

@ -9,8 +9,11 @@
<el-tabs v-model="activeModuleName" class="tabs-box" type="border-card" @tab-click="handleTabClick">
<template v-for="(mod, modIndex) in moduleList">
<el-tab-pane :key="modIndex" :label="mod.moduleName" :name="mod.customModuleId+''">
<el-card>
<div>考试时间{{ mod.duration }}</div>
<el-card style="padding:10px">
<div>考试时间{{ mod.duration }}分钟</div>
</el-card>
<el-card style="margin-top: 10px;">
<div style="padding:10px"> 任务目录</div>
<el-tree
:data="taskTreeDatas"
node-key="id"
@ -18,10 +21,27 @@
:expand-on-click-node="false"
/>
</el-card>
<el-button type="primary" @click="beginExercise(mod.customModuleId)">开始训练</el-button>
<el-card style="margin-top: 10px;">
<div style="padding:10px"> 评分规则</div>
<el-table
:data="ruleData"
border
show-summary
:summary-method="getSummaries"
style="width: 100%;margin-top: 10px;"
>
<el-table-column type="index" width="50" />
<el-table-column label="描述" prop="text" />
<el-table-column label="作业程序" prop="worker" />
<el-table-column label="分值" prop="score" width="50" />
<el-table-column label="评分标准" prop="criteria" />
</el-table>
</el-card>
<el-button type="primary" size="medium" style="margin-top: 10px;" @click="beginExercise(mod.customModuleId)">开始训练</el-button>
</el-tab-pane>
</template>
</el-tabs>
</div>
</div>
</template>
@ -29,8 +49,7 @@
<script>
import paperList from './paperList';
import drapLeft from '@/views/components/drapLeft/index';
import localStore from 'storejs';
import { getPaperDetail} from '@/api/contest';
import { getPaperDetail, getContextScoreDetail} from '@/api/contest';
let id = 1;
export default {
@ -41,13 +60,14 @@ export default {
},
data() {
return {
widthLeft: 450,
widthLeft: 380,
paperName:'试卷',
paperId:'',
activeModuleName:'',
moduleList:[],
moduleTreeDatas:[],
taskTreeDatas:[]
taskTreeDatas:[],
ruleData:[]
};
},
computed: {
@ -55,9 +75,6 @@ export default {
return this.$store.state.app.width;
}
},
mounted() {
this.widthLeft = Number(localStore.get('LeftWidth')) ? Number(localStore.get('LeftWidth')) : 450;
},
methods: {
drapWidth(width) {
this.widthLeft = Number(width);
@ -84,16 +101,48 @@ export default {
};
});
this.taskTreeDatas = this.moduleTreeDatas[0].children;
getContextScoreDetail(this.moduleTreeDatas[0].moduleScoreRuleId).then(res => {
this.ruleData = res.data.rule ? res.data.rule.units : [];
}).catch(() => { this.ruleData = []; });
}).catch(error => {
this.$message.error(error.message);
});
},
handleTabClick(tab) {
this.taskTreeDatas = this.moduleTreeDatas.find((item)=>item.customModuleId == tab.name).children;
const moduleItem = this.moduleTreeDatas.find((item)=>item.customModuleId == tab.name);
this.taskTreeDatas = moduleItem.children;
getContextScoreDetail(moduleItem.moduleScoreRuleId).then(res => {
this.ruleData = res.data.rule ? res.data.rule.units : [];
}).catch(() => { this.ruleData = []; });
},
beginExercise(moduleId) {
this.$router.push({path: '/contest/detail', query:{paperId:this.paperId, moduleId }});
},
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '总分';
return;
}
if (index === 3) {
const values = data.map(item => Number(item[column.property]));
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += '';
} else {
sums[index] = '/';
}
});
return sums;
},
transformTree(data) {
const result = {label:data.name, children:[], id:id++, type:'taskCatalog' };
if (data.group.length) {

View File

@ -1,9 +1,9 @@
<template>
<div v-loading="loading" class="map-list-main">
<div id="trainingMapTree" class="left-map-list">
<div class="mapListName">
<div v-loading="loading" class="paper-list-main">
<div id="trainingMapTree" class="left-paper-list">
<div class="paperListName">
<el-form :inline="true" :model="formModel" class="demo-form-inline">
<el-form-item label="组别">
<el-form-item label="组别" :label-style="{ color: 'red' }">
<el-select v-model="formModel.group" placeholder="请选择" clearable>
<el-option
v-for="item in groupOption"
@ -23,7 +23,7 @@
/>
</el-select>
<el-form-item>
<el-button type="primary" @click="queryPaper">查询</el-button>
<el-button type="primary" size="medium" @click="queryPaper">查询</el-button>
</el-form-item>
</el-form-item>
</el-form>
@ -35,7 +35,7 @@
active-text-color="#ffd04b"
>
<template v-for="(paper,paperIndex) in paperList">
<el-menu-item :key="paperIndex" :index="paper.name" @click="showPaperDetail(paper)">
<el-menu-item :key="paperIndex" :index="paper.id+''" @click="showPaperDetail(paper)">
{{ paper.name }}
</el-menu-item>
</template>
@ -54,7 +54,7 @@ export default {
loading: true,
formModel: {
seasonId: '', // id
group:'' //
group:'GZ' //
},
groupOption:[{
value: 'ZZ',
@ -73,8 +73,10 @@ export default {
queryContestSeasonPaged({pageSize:999}).then((res) => {
this.seasonOptions = res.data.list;
});
getPaperList({pageSize:999}).then((res) => {
getPaperList({ group:'GZ', pageSize:999}).then((res) => {
this.paperList = res.data.list;
this.defaultIndex = this.paperList[0].id + '';
this.$emit('changeModuleData', this.paperList[0]);
});
},
methods: {
@ -92,27 +94,11 @@ export default {
};
</script>
<style lang="scss" scoped>
.el-menu{
background-color: transparent;
}
.el-menu-item{
&:hover{
background: #00172E;
}
&:focus{
background-color: #00172E;
}
}
.mapListName{
padding: 10px 0 10px 17px;
background: #01468B;
position: sticky;
position: -webkit-sticky;
border-bottom: 1px solid #00172E;
top: 0;
z-index: 9;
}
.left-map-list{
.paper-list-main{
height: 100%;
display:flex;
flex-direction:column;
.left-paper-list{
width: 100%;
height: 100%;
flex: 1;
@ -128,15 +114,37 @@ export default {
&::-webkit-scrollbar-track{
background: #06284a;
}
.paperListName{
padding: 10px 0 10px 17px;
background: #01468B;
position: sticky;
position: -webkit-sticky;
border-bottom: 1px solid #00172E;
top: 0;
z-index: 9;
}
.map-list-main{
height: 100%;
display:flex;
flex-direction:column;
}
}
.el-menu{
background-color: transparent;
.el-menu-item{
&:hover{
background: #00172E;
}
&:focus{
background-color: #00172E;
}
}
}
/deep/{
.el-menu{
border-right-width: 0;
}
}
/deep/{
.el-form-item__label{
color: white !important;
}
}
</style>