ui优化
This commit is contained in:
parent
2193470e4b
commit
0708525435
|
@ -2,7 +2,7 @@
|
||||||
<div style="background: #ececec; padding: 15px">
|
<div style="background: #ececec; padding: 15px">
|
||||||
<a-card :bordered="false">
|
<a-card :bordered="false">
|
||||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||||
<a-tab-pane key="1" tab="查询全校各学院通过率">
|
<a-tab-pane key="1" tab="查询全校各学院四级通过率">
|
||||||
<div>
|
<div>
|
||||||
<div class="query">
|
<div class="query">
|
||||||
<span style="font-size: 15px; margin-right: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold"
|
<span style="font-size: 15px; margin-right: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold"
|
||||||
|
@ -12,7 +12,7 @@
|
||||||
<a-button style="margin-left: 10px" type="primary" @click="allQuery">查询</a-button>
|
<a-button style="margin-left: 10px" type="primary" @click="allQuery">查询</a-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a-card title="查询全校各学院通过率" :loading="tab1loading" :bordered="false">
|
<a-card title="查询全校各学院四级通过率" :loading="tab1loading" :bordered="false">
|
||||||
<template #extra>
|
<template #extra>
|
||||||
<!-- <a-select v-model:value="college" style="width: 300px" mode="multiple" :max-tag-count="2"
|
<!-- <a-select v-model:value="college" style="width: 300px" mode="multiple" :max-tag-count="2"
|
||||||
:options="collegeOptions" @change="onCollegeMajorChange"></a-select> -->
|
:options="collegeOptions" @change="onCollegeMajorChange"></a-select> -->
|
||||||
|
@ -477,7 +477,7 @@ export default {
|
||||||
// 指定图表的配置项和数据
|
// 指定图表的配置项和数据
|
||||||
let option = {
|
let option = {
|
||||||
title: {
|
title: {
|
||||||
text: '本批次学院通过率排名',
|
text: '本批次学院四级通过率排名',
|
||||||
},
|
},
|
||||||
legend: {},
|
legend: {},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
@ -675,7 +675,7 @@ export default {
|
||||||
// const college1 = this.college;
|
// const college1 = this.college;
|
||||||
let option = {
|
let option = {
|
||||||
title: {
|
title: {
|
||||||
text: '本年级学院通过率排名',
|
text: '本年级学院四级通过率排名',
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
|
|
@ -10,6 +10,15 @@
|
||||||
<a-row :gutter="24">
|
<a-row :gutter="24">
|
||||||
<a-col :xl="24" :style="{ marginBottom: '24px' }">
|
<a-col :xl="24" :style="{ marginBottom: '24px' }">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<div style="display: flex;">
|
||||||
|
<span class="title">学院 / 专业四级通过率变化</span>
|
||||||
|
<div v-if="topCollege != null">
|
||||||
|
<span style="font-size: 15px;padding-left: 100px;">该数据为 </span>
|
||||||
|
<span style="color: red; font-size: 18px; ">{{ topCollege}}</span>
|
||||||
|
<span v-if="topMajor != null && topMajor != ''" style="color: red; font-size: 18px; "> / {{ topMajor}}</span>
|
||||||
|
<span style="font-size: 15px;"> 的四级通过率变化趋势 </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div id="map1" style="width: 100%; height: 500px"></div>
|
<div id="map1" style="width: 100%; height: 500px"></div>
|
||||||
</div>
|
</div>
|
||||||
</a-col>
|
</a-col>
|
||||||
|
@ -45,6 +54,8 @@ export default {
|
||||||
college: null,
|
college: null,
|
||||||
batch: null,
|
batch: null,
|
||||||
collegeMajor: null,
|
collegeMajor: null,
|
||||||
|
topCollege: null,//顶部解释行
|
||||||
|
topMajor: null,//顶部解释行
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -60,7 +71,7 @@ export default {
|
||||||
// 指定图表的配置项和数据
|
// 指定图表的配置项和数据
|
||||||
let option = {
|
let option = {
|
||||||
title: {
|
title: {
|
||||||
text: '学院 / 专业通过率变化',
|
// text: '学院 / 专业四级通过率变化',
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
|
@ -167,9 +178,11 @@ export default {
|
||||||
let college = null;
|
let college = null;
|
||||||
//如果this.collegeMajor[1]不存在则设为null
|
//如果this.collegeMajor[1]不存在则设为null
|
||||||
college = this.collegeMajor[0];
|
college = this.collegeMajor[0];
|
||||||
major=this.collegeMajor.length>1?this.collegeMajor[1]:'';
|
major = this.collegeMajor.length > 1 ? this.collegeMajor[1] : '';
|
||||||
|
this.topCollege = college;
|
||||||
|
this.topMajor = major;
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
console.log(college, major,"college,major");
|
console.log(college, major, "college,major");
|
||||||
let params = {
|
let params = {
|
||||||
college: college,
|
college: college,
|
||||||
major: major,
|
major: major,
|
||||||
|
@ -194,7 +207,7 @@ export default {
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
// display: flex;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
@ -202,7 +215,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 34px;
|
font-size: 20px;
|
||||||
color: rgb(8, 8, 8);
|
color: rgb(8, 8, 8);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,12 +12,12 @@
|
||||||
<a-col :xl="24" :style="{ marginBottom: '24px' }">
|
<a-col :xl="24" :style="{ marginBottom: '24px' }">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div style="display: flex;">
|
<div style="display: flex;">
|
||||||
<span class="title">学院 / 专业通过率变化</span>
|
<span class="title">学院 / 专业四级通过率变化</span>
|
||||||
<div v-if="topCollege != null">
|
<div v-if="topCollege != null">
|
||||||
<span style="color: red; font-size: 18px; padding-left: 100px;"> {{ topCollege }}</span>
|
<span style="color: red; font-size: 18px; padding-left: 100px;"> {{ topCollege }}</span>
|
||||||
<span style="font-size: 15px;"> 在 </span>
|
<span style="font-size: 15px;"> 在 </span>
|
||||||
<span style="color: red; font-size: 18px;"> {{ topBath }} </span>
|
<span style="color: red; font-size: 18px;"> {{ topBath }} </span>
|
||||||
<span style="font-size: 15px;"> 批次的通过率为:</span>
|
<span style="font-size: 15px;"> 批次的四级通过率为:</span>
|
||||||
<span style="color: red; font-size: 18px;"> {{ sumRate }}%</span>
|
<span style="color: red; font-size: 18px;"> {{ sumRate }}%</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<div>
|
<div>
|
||||||
<a-card :bordered="false">
|
<a-card :bordered="false">
|
||||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||||
<a-tab-pane key="1" tab="对比多学院通过率">
|
<a-tab-pane key="1" tab="对比多学院四级通过率">
|
||||||
<div class="query">
|
<div class="query">
|
||||||
<div>
|
<div>
|
||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
|
@ -511,7 +511,7 @@ export default {
|
||||||
// 指定图表的配置项和数据
|
// 指定图表的配置项和数据
|
||||||
let option = {
|
let option = {
|
||||||
title: {
|
title: {
|
||||||
text: '学院通过率对比',
|
text: '学院四级通过率对比',
|
||||||
},
|
},
|
||||||
legend: {},
|
legend: {},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div>
|
<div>
|
||||||
<a-card :bordered="false">
|
<a-card :bordered="false">
|
||||||
<a-tabs v-model:activeKey="activeKey" type="card">
|
<a-tabs v-model:activeKey="activeKey" type="card">
|
||||||
<a-tab-pane key="1" tab="对比多专业通过率">
|
<a-tab-pane key="1" tab="对比多专业四级通过率">
|
||||||
<div class="tab3">
|
<div class="tab3">
|
||||||
<!-- <span style="font-size: 15px;margin-right: 10px; display: flex;justify-content: center;align-items: center;
|
<!-- <span style="font-size: 15px;margin-right: 10px; display: flex;justify-content: center;align-items: center;
|
||||||
font-weight: bold;">专业: </span>
|
font-weight: bold;">专业: </span>
|
||||||
|
@ -512,7 +512,7 @@ export default {
|
||||||
// 指定图表的配置项和数据
|
// 指定图表的配置项和数据
|
||||||
let option = {
|
let option = {
|
||||||
title: {
|
title: {
|
||||||
text: '专业通过率对比',
|
text: '专业四级通过率对比',
|
||||||
},
|
},
|
||||||
legend: {},
|
legend: {},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
|
|
@ -4,7 +4,8 @@
|
||||||
<div class="app-loading-dots">
|
<div class="app-loading-dots">
|
||||||
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-loading-title">哈师大四级查询平台</div>
|
<div class="app-loading-title">哈尔滨师范大学</div>
|
||||||
|
<div class="app-loading-title">英语四六级综合管理平台</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -9,10 +9,12 @@
|
||||||
<div class="aui-image">
|
<div class="aui-image">
|
||||||
<div class="aui-image-text">
|
<div class="aui-image-text">
|
||||||
<div>
|
<div>
|
||||||
<span class="introduce-text" >哈师大四级查询平台</span>
|
<span class="introduce-text" >哈尔滨师范大学</span>
|
||||||
|
<br>
|
||||||
|
<span class="introduce-text" >英语四六级综合管理平台</span>
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
<span class="introduce-text" style="font-size: 15px;">深入分析 多维展示</span>
|
<span class="introduce-text" style="font-size: 18px;">深入分析 多维展示</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue