This commit is contained in:
fan 2024-02-28 15:33:59 +08:00
commit b1766b0ac5
3 changed files with 275 additions and 6 deletions

View File

@ -1,13 +1,139 @@
<template> <template>
<div>任务列表</div> <div class="trainingPlatform" :style="'padding-left:'+(widthLeft)+'px'">
<div class="trainingPubMapList" :style="{width: widthLeft+'px'}">
<paper-list ref="paperList" @changeModuleData="changeModuleData" />
<drap-left :width-left="widthLeft" @drapWidth="drapWidth" />
</div>
<div>
<div style="height: 50px;text-align: center;line-height: 50px;font-size: 26px;font-weight: bolder;">{{ paperName }}</div>
<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-tree
:data="taskTreeDatas"
node-key="id"
default-expand-all
:expand-on-click-node="false"
/>
</el-card>
<el-button type="primary" @click="beginExercise(mod.customModuleId)">开始训练</el-button>
</el-tab-pane>
</template>
</el-tabs>
</div>
</div>
</template> </template>
<script> <script>
import paperList from './paperList';
import drapLeft from '@/views/components/drapLeft/index';
import localStore from 'storejs';
import { getPaperDetail} from '@/api/contest';
let id = 1;
export default { export default {
name: "contestList" name: 'TrainingPlatform',
} components: {
paperList,
drapLeft
},
data() {
return {
widthLeft: 450,
paperName:'试卷',
paperId:'',
activeModuleName:'',
moduleList:[],
moduleTreeDatas:[],
taskTreeDatas:[]
};
},
computed: {
width() {
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);
},
changeModuleData(paper) {
this.paperName = paper.name;
this.paperId = paper.id;
getPaperDetail(paper.id).then((res) => {
this.moduleList = res.data.moduleVo.modules;
this.activeModuleName = this.moduleList[0].customModuleId + '';
this.moduleTreeDatas = this.moduleList.map(moduleItem=>{
let children = [];
if (moduleItem.group.length) {
children = moduleItem.group.map(taskCatalog=> this.transformTree(taskCatalog));
}
return {
id:id++,
label:moduleItem.moduleName,
duration:moduleItem.duration,
moduleScoreRuleId:moduleItem.moduleScoreRuleId,
customModuleId:moduleItem.customModuleId,
type:'module',
children
};
});
this.taskTreeDatas = this.moduleTreeDatas[0].children;
}).catch(error => {
this.$message.error(error.message);
});
},
handleTabClick(tab) {
this.taskTreeDatas = this.moduleTreeDatas.find((item)=>item.customModuleId == tab.name).children;
},
beginExercise(moduleId) {
this.$router.push({path: '/contest/detail', query:{paperId:this.paperId, moduleId }});
},
transformTree(data) {
const result = {label:data.name, children:[], id:id++, type:'taskCatalog' };
if (data.group.length) {
const changeGroup = data.group.map(taskCatalog=>
this.transformTree(taskCatalog)
);
result.children.push(...changeGroup);
}
return result;
}
}
};
</script> </script>
<style lang="scss" scoped>
<style scoped> .trainingPlatform {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.trainingPubMapList {
position:absolute;
left:0;
top:0;
height: 100%;
background: #00172E;
}
.tabs-box{
height: calc(100% - 30px);
margin: 0 10px;
overflow-y: auto;
background: transparent;
&::-webkit-scrollbar{
background: #06284a;
}
&::-webkit-scrollbar-thumb{
background: #0c0909;
}
&::-webkit-scrollbar-track{
background: #06284a;
}
}
</style> </style>

View File

@ -0,0 +1,142 @@
<template>
<div v-loading="loading" class="map-list-main">
<div id="trainingMapTree" class="left-map-list">
<div class="mapListName">
<el-form :inline="true" :model="formModel" class="demo-form-inline">
<el-form-item label="组别">
<el-select v-model="formModel.group" placeholder="请选择" clearable>
<el-option
v-for="item in groupOption"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="赛季">
<el-select v-model="formModel.seasonId" placeholder="请选择" clearable>
<el-option
v-for="item in seasonOptions"
:key="item.id"
:label="item.code"
:value="item.id"
/>
</el-select>
<el-form-item>
<el-button type="primary" @click="queryPaper">查询</el-button>
</el-form-item>
</el-form-item>
</el-form>
</div>
<el-menu
:default-active="defaultIndex"
class="el-menu-vertical-demo"
text-color="#fff"
active-text-color="#ffd04b"
>
<template v-for="(paper,paperIndex) in paperList">
<el-menu-item :key="paperIndex" :index="paper.name" @click="showPaperDetail(paper)">
{{ paper.name }}
</el-menu-item>
</template>
</el-menu>
</div>
</div>
</template>
<script>
import { queryContestSeasonPaged, getPaperList} from '@/api/contest';
export default {
name: 'DemonList',
components: {
},
data() {
return {
loading: true,
formModel: {
seasonId: '', // id
group:'' //
},
groupOption:[{
value: 'ZZ',
label: '中职'
}, {
value: 'GZ',
label: '高职'
}],
seasonOptions:[],
paperList:[],
defaultIndex: ''
};
},
mounted() {
this.loading = false;
queryContestSeasonPaged({pageSize:999}).then((res) => {
this.seasonOptions = res.data.list;
});
getPaperList({pageSize:999}).then((res) => {
this.paperList = res.data.list;
});
},
methods: {
queryPaper() {
const data = Object.assign({pageSize:999}, this.formModel);
getPaperList(data).then((res) => {
this.paperList = res.data.list;
});
},
showPaperDetail(paper) {
this.$emit('changeModuleData', paper);
}
}
};
</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{
width: 100%;
height: 100%;
flex: 1;
overflow-y: scroll;
padding-bottom: 10px;
background: linear-gradient(to bottom, #01468B, #00172E);
&::-webkit-scrollbar{
background: #06284a;
}
&::-webkit-scrollbar-thumb{
background: #0c0909;
}
&::-webkit-scrollbar-track{
background: #06284a;
}
}
.map-list-main{
height: 100%;
display:flex;
flex-direction:column;
}
/deep/{
.el-menu{
border-right-width: 0;
}
}
</style>

View File

@ -218,6 +218,7 @@ export default {
const targetData = this.findLabel(this.taskTreeDatas, data.id); const targetData = this.findLabel(this.taskTreeDatas, data.id);
targetData.label = data.label; targetData.label = data.label;
targetData.duration = data.duration; targetData.duration = data.duration;
targetData.moduleScoreRuleId = data.moduleScoreRuleId;
} }
} else if (type == 'taskCatalog') { } else if (type == 'taskCatalog') {