joylink/rt-sim-training-client
6
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

大赛训练第一个页面

Browse Source
This commit is contained in:
joylink_zhaoerwei 2024-03-01 11:08:05 +08:00
parent a36b8e7c22
commit 65b77a3b60
2 changed files with 75 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/views/contest/contestList.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="trainingPlatform" :style="'padding-left:'+(widthLeft)+'px'">
<div class="trainingPubMapList" :style="{width: widthLeft+'px'}">
<div class="contestPlatform" :style="'padding-left:'+(widthLeft)+'px'">
<div class="contestPaperList" :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>
<div class="module-box">
<div style="height: 50px;text-align: center;line-height: 50px;font-size: 26px;font-weight: bolder;color: #fff;">{{ 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+''">
@ -37,7 +37,9 @@
<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>
<div style="display: flex; justify-content: center;margin-top: 10px;">
<el-button type="primary" size="medium" @click="beginExercise(mod.customModuleId)">开始训练</el-button>
</div>
</el-tab-pane>
</template>
</el-tabs>
@ -157,32 +159,60 @@ export default {
};
</script>
<style lang="scss" scoped>
.trainingPlatform {
.contestPlatform {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
.contestPaperList {
position:absolute;
left:0;
top:0;
height: 100%;
background: #00172E;
}
.module-box{
height: 100%;
width: 100%;
padding-bottom: 20px;
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;
}
}
}
.trainingPubMapList {
position:absolute;
left:0;
top:0;
height: 100%;
}
/deep/{
.el-tabs__nav-scroll{
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;
.el-tabs--border-card>.el-tabs__header .el-tabs__item{
color: #fff;
border: solid 1px #01468B;
}
&::-webkit-scrollbar-track{
background: #06284a;
.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
background: #01468B;
}
.el-tabs--border-card{
border: solid 1px #01468B;
}
.el-table th.el-table__cell{
background-color: #01468B;
color: #fff;
}
.el-table--border, .el-table--group{
border-width: 0;
}
}
</style>

34
src/views/contest/paperList.vue
View File

@ -3,8 +3,8 @@
<div id="trainingMapTree" class="left-paper-list">
<div class="paperListName">
<el-form :inline="true" :model="formModel" class="demo-form-inline">
<el-form-item label="组别" :label-style="{ color: 'red' }">
<el-select v-model="formModel.group" placeholder="请选择" clearable>
<el-form-item label="组别">
<el-select v-model="formModel.group" placeholder="请选择" clearable style="width: 200px;" @change="queryPaper">
<el-option
v-for="item in groupOption"
:key="item.value"
@ -14,7 +14,7 @@
</el-select>
</el-form-item>
<el-form-item label="赛季">
<el-select v-model="formModel.seasonId" placeholder="请选择" clearable>
<el-select v-model="formModel.seasonId" placeholder="请选择" clearable style="width: 200px;" @change="filterPaper">
<el-option
v-for="item in seasonOptions"
:key="item.id"
@ -22,9 +22,6 @@
:value="item.id"
/>
</el-select>
<el-form-item>
<el-button type="primary" size="medium" @click="queryPaper">查询</el-button>
</el-form-item>
</el-form-item>
</el-form>
</div>
@ -35,7 +32,7 @@
active-text-color="#ffd04b"
>
<template v-for="(paper,paperIndex) in paperList">
<el-menu-item :key="paperIndex" :index="paper.id+''" @click="showPaperDetail(paper)">
<el-menu-item v-show="!formModel.seasonId||paper.seasonId==formModel.seasonId" :key="paperIndex" :index="paper.id+''" @click="showPaperDetail(paper)">
{{ paper.name }}
</el-menu-item>
</template>
@ -70,21 +67,34 @@ export default {
},
mounted() {
this.loading = false;
queryContestSeasonPaged({pageSize:999}).then((res) => {
this.seasonOptions = res.data.list;
});
getPaperList({ group:'GZ', pageSize:999}).then((res) => {
this.paperList = res.data.list;
this.defaultIndex = this.paperList[0].id + '';
this.$emit('changeModuleData', this.paperList[0]);
});
this.querySeason();
},
methods: {
queryPaper() {
const data = Object.assign({pageSize:999}, this.formModel);
getPaperList(data).then((res) => {
getPaperList({ group:this.formModel.group, pageSize:999}).then((res) => {
this.paperList = res.data.list;
});
this.querySeason();
},
querySeason() {
queryContestSeasonPaged({pageSize:999, group:this.formModel.group }).then((res) => {
this.seasonOptions = res.data.list;
});
},
filterPaper() {
if (this.formModel.seasonId) {
const paper = this.paperList.find(paper=>paper.seasonId == this.formModel.seasonId);
this.defaultIndex = paper.id + '';
this.$emit('changeModuleData', paper);
} else {
this.defaultIndex = this.paperList[0].id + '';
this.$emit('changeModuleData', this.paperList[0]);
}
},
showPaperDetail(paper) {