竞赛第一个页面壳提交
This commit is contained in:
joylink_zhaoerwei
parent
fc554ce855
commit
dd4a338a4c
@ -1,13 +1,135 @@
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<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 {
|
||||
name: "contestList"
|
||||
name: 'TrainingPlatform',
|
||||
components: {
|
||||
paperList,
|
||||
drapLeft
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
widthLeft: 450,
|
||||
paperName:'试卷',
|
||||
paperId:'',
|
||||
activeModuleName:'',
|
||||
moduleList:[],
|
||||
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) => {
|
||||
console.log(res);
|
||||
this.moduleList = res.data.moduleVo.modules;
|
||||
this.activeModuleName = this.moduleList[0].customModuleId + '';
|
||||
const data = 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,
|
||||
type:'module',
|
||||
children
|
||||
};
|
||||
});
|
||||
this.taskTreeDatas = data[0].children;
|
||||
}).catch(error => {
|
||||
this.$message.error(error.message);
|
||||
});
|
||||
},
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style lang="scss" 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>
|
||||
|
||||
142
src/views/contest/paperList.vue
Normal file
142
src/views/contest/paperList.vue
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user