首页的顶部优化1
This commit is contained in:
parent
608a340a2a
commit
02024f1e24
|
|
@ -12,14 +12,46 @@
|
|||
<span style="color: red; font-size: 18px">{{ topEntrydate }}</span>
|
||||
<span style="font-size: 15px"> 级数据</span>
|
||||
</div> -->
|
||||
<!--<a-cascader v-model:value="collegeMajor" expand-trigger="hover" :options="collegeMajorOptions" change-on-select />-->
|
||||
|
||||
<!-- 主外层容器：包括一级和二级菜单并排 -->
|
||||
<div class="dropdown-wrapper">
|
||||
<div class="dropdown-trigger" @click="toggleDropdown">
|
||||
<span class="trigger-label">{{ selectedLabel || '请选择学院' }}</span>
|
||||
<DownOutlined class="trigger-icon" />
|
||||
</div>
|
||||
|
||||
<div v-if="dropdownVisible" class="dropdown-panel">
|
||||
<!-- 一级菜单独立一列 -->
|
||||
<div class="main-menu">
|
||||
<div class="main-menu-scroll">
|
||||
<div v-for="item in collegeMajorOptions" :key="item.key" class="menu-item">
|
||||
<span @click.stop="selectItem(item)">{{ item.label }}</span>
|
||||
<span v-if="item.children" class="expand-icon" @click.stop="expandSubMenu(item)">
|
||||
<RightOutlined />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二级菜单独立一列 -->
|
||||
<div v-if="subMenuVisible" class="sub-menu">
|
||||
<div class="sub-menu-scroll">
|
||||
<div v-for="subItem in currentSubMenu" :key="subItem.key" class="menu-item">
|
||||
<span @click.stop="selectItem(subItem)">{{ subItem.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-select v-model:value="entrydate" style="margin-left: 10px; width: 100px" :options="entrydateOptions" />
|
||||
<a-button style="margin-left: 10px" type="primary" @click="query">查询</a-button>
|
||||
<div class="stats-container" v-if="total && total > 0">
|
||||
<span>{{ totalName }}总人数：{{ total }}</span>
|
||||
<span style="padding-left: 240px">{{ totalName }}总人数：{{ total }}</span>
|
||||
<span>累计通过人数: {{ passNumberBottom }}</span>
|
||||
<span>累计总通过率: {{ passRateBottom }}</span>
|
||||
</div>
|
||||
<a-cascader v-model:value="collegeMajor" :options="collegeMajorOptions" change-on-select />
|
||||
<a-select v-model:value="entrydate" style="margin-left: 10px; width: 100px" :options="entrydateOptions" />
|
||||
<a-button style="margin-left: 10px" type="primary" @click="query">查询</a-button>
|
||||
</div>
|
||||
<!-- <a-button @click=test()>test</a-button> -->
|
||||
</template>
|
||||
|
|
@ -27,9 +59,7 @@
|
|||
<a-row :gutter="12">
|
||||
<a-col :xl="14">
|
||||
<div style="padding-left: 10px; min-height: 200px">
|
||||
|
||||
<a-table size="small" :dataSource="dataSourceCet4" :columns="columns" :pagination="false" bordered
|
||||
:scroll="{ y: 290 }">
|
||||
<a-table size="small" :dataSource="dataSourceCet4" :columns="columns" :pagination="false" bordered :scroll="{ y: 290 }">
|
||||
<template #passRateSlot>
|
||||
累计总通过率
|
||||
<a-tooltip :title="'累计通过人数 / ' + totalName + '总人数'" placement="top">
|
||||
|
|
@ -39,11 +69,10 @@
|
|||
</a-table>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :xl="10" >
|
||||
<a-col :xl="10">
|
||||
<a-card class="card-with-piechart">
|
||||
<div style="width: 100%; height: 200px" class="piechart" id="piechart"> </div>
|
||||
</a-card>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- <div style="height: 300px;">
|
||||
|
|
@ -74,16 +103,19 @@
|
|||
<!-- </a-row> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import * as echarts from 'echarts';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import * as echarts from 'echarts';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default {
|
||||
export default {
|
||||
components: {
|
||||
DownOutlined,
|
||||
RightOutlined,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeKey: '1',
|
||||
|
|
@ -98,9 +130,106 @@ export default {
|
|||
collegetab2: [],
|
||||
collegeMajorOptions: [],
|
||||
collegeMajor: [],
|
||||
|
||||
loading: false,
|
||||
dataSourceCet4: [],
|
||||
dropdownVisible: false,
|
||||
subMenuVisible: false,
|
||||
subSubMenuVisible: false,
|
||||
selectedLabel: '全校',
|
||||
currentSubMenu: [],
|
||||
currentSubSubMenu: [],
|
||||
//测试构造数据
|
||||
//menuData: [
|
||||
// { key: '1', label: '全校' },
|
||||
// { key: '2', label: '专升本' },
|
||||
// {
|
||||
// key: '3',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '4',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '5',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '6',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '7',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '8',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '9',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '10',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
//],
|
||||
columns: [
|
||||
{
|
||||
title: '学年',
|
||||
|
|
@ -210,9 +339,40 @@ export default {
|
|||
// this.allQuery();
|
||||
this.getCollegeOptions();
|
||||
this.getEntrydate();
|
||||
|
||||
},
|
||||
methods: {
|
||||
toggleDropdown() {
|
||||
this.dropdownVisible = !this.dropdownVisible;
|
||||
this.subMenuVisible = false;
|
||||
this.subSubMenuVisible = false;
|
||||
},
|
||||
selectItem(item) {
|
||||
// 如果是二级菜单（来自 currentSubMenu），找到它的父级
|
||||
const parent = this.collegeMajorOptions.find((p) => p.children && p.children.some((child) => child.value === item.value));
|
||||
//console.log('1111', parent.label);
|
||||
console.log('2222', this.collegeMajorOptions);
|
||||
if (parent) {
|
||||
this.selectedLabel = `${parent.label} / ${item.label}`;
|
||||
this.collegeMajor[0] = parent.value;
|
||||
this.collegeMajor[1] = item.value;
|
||||
} else {
|
||||
this.selectedLabel = item.label;
|
||||
this.collegeMajor[0] = item.value;
|
||||
}
|
||||
this.dropdownVisible = false;
|
||||
this.subMenuVisible = false;
|
||||
this.subSubMenuVisible = false;
|
||||
console.log('444', this.selectedLabel);
|
||||
},
|
||||
expandSubMenu(item) {
|
||||
this.currentSubMenu = item.children || [];
|
||||
this.subMenuVisible = true;
|
||||
this.subSubMenuVisible = false;
|
||||
},
|
||||
expandSubSubMenu(item) {
|
||||
this.currentSubSubMenu = item.children || [];
|
||||
this.subSubMenuVisible = true;
|
||||
},
|
||||
allQuery() {
|
||||
this.map1loading = true;
|
||||
console.log('查询===========ddddddddddd');
|
||||
|
|
@ -299,14 +459,12 @@ export default {
|
|||
this.entrydateOptions = getEntrydate.entrydates;
|
||||
|
||||
const name = ['西语学院'];
|
||||
|
||||
},
|
||||
|
||||
// 各专业通过率
|
||||
async majorPassRate() {
|
||||
this.map3loading = true;
|
||||
const name = '西语学院';
|
||||
|
||||
},
|
||||
dataChart(data, tab) {
|
||||
let seriesData = [];
|
||||
|
|
@ -616,7 +774,7 @@ export default {
|
|||
// });
|
||||
console.log('data', result.data);
|
||||
} finally {
|
||||
this.map1loading=false;
|
||||
this.map1loading = false;
|
||||
this.$nextTick(() => {
|
||||
console.log('调用==============');
|
||||
this.dataChart(result.data, query);
|
||||
|
|
@ -668,6 +826,7 @@ export default {
|
|||
this.topCollege = this.collegeMajor[0];
|
||||
this.topMajor = major;
|
||||
this.topEntrydate = this.entrydate;
|
||||
console.log('55555', this.collegeMajor);
|
||||
if (this.college) this.loading = true;
|
||||
let params = {
|
||||
college: this.collegeMajor[0],
|
||||
|
|
@ -879,59 +1038,59 @@ export default {
|
|||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
* {
|
||||
* {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ant-card-body {
|
||||
::v-deep .ant-card-body {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep {
|
||||
::v-deep {
|
||||
.ant-table-cell {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.card-with-piechart {
|
||||
}
|
||||
.card-with-piechart {
|
||||
margin-top: 1px;
|
||||
margin-bottom: 20px;
|
||||
padding-top: 10px;
|
||||
height:100%; /* 调整高度 */
|
||||
}
|
||||
.container {
|
||||
height: 100%; /* 调整高度 */
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
// padding: 15px;
|
||||
padding: 5px 15px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.title {
|
||||
font-size: 34px;
|
||||
color: rgb(8, 8, 8);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
margin-right:270px;
|
||||
.stats-container {
|
||||
margin-right: 270px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 90px;
|
||||
// margin-top: 10px;
|
||||
// padding: 10px;
|
||||
//padding-right: px;
|
||||
// background-color: #f8f8f8f8;
|
||||
// /* 背景颜色 */
|
||||
// border-radius: 12px;
|
||||
// /* 圆角边框 */
|
||||
}
|
||||
}
|
||||
|
||||
.stats-container span {
|
||||
.stats-container span {
|
||||
padding: 15px 30px;
|
||||
/* 调整内边距 */
|
||||
font-size: 15px;
|
||||
|
|
@ -943,11 +1102,11 @@ export default {
|
|||
/* 每个项目占据相同的空间 */
|
||||
text-align: center;
|
||||
/* 文本居中 */
|
||||
margin: 0 10px;
|
||||
margin: 0 5px;
|
||||
/* 调整外边距 */
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
column-gap: 10px;
|
||||
padding: 0 5px;
|
||||
|
|
@ -961,14 +1120,14 @@ export default {
|
|||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-row {
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.query {
|
||||
.query {
|
||||
right: 3%;
|
||||
top: 10px;
|
||||
position: absolute;
|
||||
|
|
@ -976,7 +1135,58 @@ export default {
|
|||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index:9999;
|
||||
}
|
||||
z-index: 9999;
|
||||
}
|
||||
.dropdown-wrapper {
|
||||
position: relative; /* ✅ 让下拉菜单基于此定位 */
|
||||
display: inline-block;
|
||||
}
|
||||
.dropdown-trigger {
|
||||
width: 160px; /* ✅ 设置选择框宽度 */
|
||||
height: 32px;
|
||||
border: 1px solid #ccc; /* ✅ 添加边框 */
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dropdown-panel {
|
||||
position: absolute;
|
||||
top: 100%; /* ✅ 紧贴选择框底部 */
|
||||
left: 0;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
}
|
||||
.main-menu,
|
||||
.sub-menu {
|
||||
min-width: 160px;
|
||||
max-height: 300px; /* ✅ 控制每一级高度 */
|
||||
overflow-y: auto; /* ✅ 各自独立滚动 */
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
margin-left: 8px;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue