优化首页相关视图
This commit is contained in:
parent
56cff6ecdd
commit
13d5df6d05
|
@ -15,7 +15,7 @@
|
||||||
<!--<a-cascader v-model:value="collegeMajor" expand-trigger="hover" :options="collegeMajorOptions" change-on-select />-->
|
<!--<a-cascader v-model:value="collegeMajor" expand-trigger="hover" :options="collegeMajorOptions" change-on-select />-->
|
||||||
|
|
||||||
<!-- 主外层容器:包括一级和二级菜单并排 -->
|
<!-- 主外层容器:包括一级和二级菜单并排 -->
|
||||||
<div class="dropdown-wrapper">
|
<div class="dropdown-wrapper" @blur="loseFocus" tabindex="0">
|
||||||
<div class="dropdown-trigger" @click="toggleDropdown">
|
<div class="dropdown-trigger" @click="toggleDropdown">
|
||||||
<span class="trigger-label">{{ selectedLabel || '请选择学院' }}</span>
|
<span class="trigger-label">{{ selectedLabel || '请选择学院' }}</span>
|
||||||
<DownOutlined class="trigger-icon" />
|
<DownOutlined class="trigger-icon" />
|
||||||
|
@ -26,7 +26,7 @@
|
||||||
<div class="main-menu">
|
<div class="main-menu">
|
||||||
<div class="main-menu-scroll">
|
<div class="main-menu-scroll">
|
||||||
<div v-for="item in collegeMajorOptions" :key="item.key" class="menu-item">
|
<div v-for="item in collegeMajorOptions" :key="item.key" class="menu-item">
|
||||||
<span @click.stop="selectItem(item)">{{ item.label }}</span>
|
<span @click.stop="selectItem(item)" style="width: 90%">{{ item.label }}</span>
|
||||||
<span v-if="item.children" class="expand-icon" @click.stop="expandSubMenu(item)">
|
<span v-if="item.children" class="expand-icon" @click.stop="expandSubMenu(item)">
|
||||||
<RightOutlined />
|
<RightOutlined />
|
||||||
</span>
|
</span>
|
||||||
|
@ -38,7 +38,7 @@
|
||||||
<div v-if="subMenuVisible" class="sub-menu">
|
<div v-if="subMenuVisible" class="sub-menu">
|
||||||
<div class="sub-menu-scroll">
|
<div class="sub-menu-scroll">
|
||||||
<div v-for="subItem in currentSubMenu" :key="subItem.key" class="menu-item">
|
<div v-for="subItem in currentSubMenu" :key="subItem.key" class="menu-item">
|
||||||
<span @click.stop="selectItem(subItem)">{{ subItem.label }}</span>
|
<span @click.stop="selectItem(subItem)" style="width: 100%">{{ subItem.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -139,6 +139,7 @@
|
||||||
selectedLabel: '全校',
|
selectedLabel: '全校',
|
||||||
currentSubMenu: [],
|
currentSubMenu: [],
|
||||||
currentSubSubMenu: [],
|
currentSubSubMenu: [],
|
||||||
|
losefocus: false,
|
||||||
//测试构造数据
|
//测试构造数据
|
||||||
//menuData: [
|
//menuData: [
|
||||||
// { key: '1', label: '全校' },
|
// { key: '1', label: '全校' },
|
||||||
|
@ -342,6 +343,9 @@
|
||||||
this.getEntrydate();
|
this.getEntrydate();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
loseFocus() {
|
||||||
|
this.dropdownVisible = false;
|
||||||
|
},
|
||||||
toggleDropdown() {
|
toggleDropdown() {
|
||||||
this.dropdownVisible = !this.dropdownVisible;
|
this.dropdownVisible = !this.dropdownVisible;
|
||||||
this.subMenuVisible = false;
|
this.subMenuVisible = false;
|
||||||
|
@ -519,17 +523,30 @@
|
||||||
'#FAF0E6 ',
|
'#FAF0E6 ',
|
||||||
];
|
];
|
||||||
let j = 0;
|
let j = 0;
|
||||||
|
//过滤掉不需要的数据
|
||||||
for (let i in data) {
|
let filteredData = [];
|
||||||
|
if (this.selectedLabel === '全校(不含艺体美外语)') {
|
||||||
|
for (let i in data) {
|
||||||
|
// 过滤函数
|
||||||
|
filteredData[i] = data[i].filter((college) => {
|
||||||
|
return !['体育科学学院', '美术学院', '音乐学院'].includes(college.college);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
filteredData = data;
|
||||||
|
}
|
||||||
|
console.log('filteredData', filteredData);
|
||||||
|
for (let i in filteredData) {
|
||||||
xData = [];
|
xData = [];
|
||||||
let yData = [];
|
let yData = [];
|
||||||
for (let key in data[i]) {
|
for (let key in filteredData[i]) {
|
||||||
xData.push(data[i][key].college);
|
xData.push(filteredData[i][key].college);
|
||||||
// 将数据转换为百分比(加上%)
|
// 将数据转换为百分比(加上%)
|
||||||
yData.push(data[i][key].passRate);
|
yData.push(filteredData[i][key].passRate);
|
||||||
}
|
}
|
||||||
|
console.log('xData', xData);
|
||||||
xData = xData.map((label) => label.split('').join('\n')); //将x轴竖着展示
|
xData = xData.map((label) => label.split('').join('\n')); //将x轴竖着展示
|
||||||
|
|
||||||
seriesData.push({
|
seriesData.push({
|
||||||
name: i + '级累计总通过率',
|
name: i + '级累计总通过率',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
|
@ -1151,7 +1168,7 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.dropdown-trigger {
|
.dropdown-trigger {
|
||||||
width: 160px; /* ✅ 设置选择框宽度 */
|
width: 190px; /* ✅ 设置选择框宽度 */
|
||||||
height: 32px;
|
height: 32px;
|
||||||
border: 1px solid #ccc; /* ✅ 添加边框 */
|
border: 1px solid #ccc; /* ✅ 添加边框 */
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
|
|
Loading…
Reference in New Issue