Merge remote-tracking branch 'origin/feature/1.0版本页面优化' into feature/1.0版本页面优化
This commit is contained in:
commit
5610e30c11
|
@ -79,7 +79,37 @@
|
||||||
import { defHttp } from '/@/utils/http/axios';
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeKey: '1',
|
||||||
|
allCollege: [],
|
||||||
|
showBox: false,
|
||||||
|
showGroup: false,
|
||||||
|
oneentrydate: null,
|
||||||
|
collegeentrydate: [],
|
||||||
|
majorentrydate: [],
|
||||||
|
lastMajorEntrydate: [],
|
||||||
|
checkedOptions: [],
|
||||||
|
collegetab2: [],
|
||||||
|
collegeMajorOptions: [],
|
||||||
|
collegeMajor: [],
|
||||||
|
Url: {
|
||||||
|
getBatch: '/cet/getBatch',
|
||||||
|
getEntrydate: '/cet/getEntrydate',
|
||||||
|
getCollege: '/cet/getCollege',
|
||||||
|
getCollegeRate: '/cet/getRateByCollege',
|
||||||
|
getAllRate: '/cet/getAllRate',
|
||||||
|
getCollegeMajor: '/cet/getCollegeMajor',
|
||||||
|
getRateByMajor: '/cet/getRateByMajor',
|
||||||
|
},
|
||||||
|
tab1loading: false,
|
||||||
|
tab2loading: false,
|
||||||
|
tab3loading: false,
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -203,6 +233,26 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
//获取学院专业级联数据
|
||||||
|
async getCollegeMajorData() {
|
||||||
|
const res = await defHttp.get({ url: this.Url.getCollegeMajor });
|
||||||
|
//通过map方法将数据转换为级联选择器需要的数据格式
|
||||||
|
this.collegeMajorOptions = res.collegeMajor.map((item) => {
|
||||||
|
return {
|
||||||
|
value: item.college,
|
||||||
|
label: item.college,
|
||||||
|
children: item.major.map((major) => {
|
||||||
|
return {
|
||||||
|
value: major,
|
||||||
|
label: major,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
// this.collegeMajor = ['东语学院'];
|
||||||
|
console.log(this.collegeMajor, 'collegeMajor');
|
||||||
|
console.log(this.collegeMajorOptions, 'collegeMajorOptions1');
|
||||||
|
},
|
||||||
//获取学院专业级联数据
|
//获取学院专业级联数据
|
||||||
async getCollegeMajorData() {
|
async getCollegeMajorData() {
|
||||||
const res = await defHttp.get({ url: this.Url.getCollegeMajor });
|
const res = await defHttp.get({ url: this.Url.getCollegeMajor });
|
||||||
|
@ -224,11 +274,20 @@
|
||||||
console.log(this.collegeMajorOptions, 'collegeMajorOptions1');
|
console.log(this.collegeMajorOptions, 'collegeMajorOptions1');
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getCollegeOptions() {
|
||||||
|
defHttp.get({ url: this.Url.getCollege }).then((res) => {
|
||||||
|
this.collegeOptions = res.colleges;
|
||||||
|
// 手动添加一个全校字段
|
||||||
getCollegeOptions() {
|
getCollegeOptions() {
|
||||||
defHttp.get({ url: this.Url.getCollege }).then((res) => {
|
defHttp.get({ url: this.Url.getCollege }).then((res) => {
|
||||||
this.collegeOptions = res.colleges;
|
this.collegeOptions = res.colleges;
|
||||||
// 手动添加一个全校字段
|
// 手动添加一个全校字段
|
||||||
|
|
||||||
|
// this.collegeOptions.unshift({ value: '全校', label: '全校' });
|
||||||
|
// this.collegeOptions.forEach(option => {
|
||||||
|
// if (option.value !== '全校') {
|
||||||
|
// option.disabled = true;
|
||||||
|
//}
|
||||||
// this.collegeOptions.unshift({ value: '全校', label: '全校' });
|
// this.collegeOptions.unshift({ value: '全校', label: '全校' });
|
||||||
// this.collegeOptions.forEach(option => {
|
// this.collegeOptions.forEach(option => {
|
||||||
// if (option.value !== '全校') {
|
// if (option.value !== '全校') {
|
||||||
|
@ -324,6 +383,117 @@
|
||||||
this.majorLength--;
|
this.majorLength--;
|
||||||
},
|
},
|
||||||
//学院选项回调函数
|
//学院选项回调函数
|
||||||
|
onMajorCollegeChange(value) {
|
||||||
|
let val = value.target.value;
|
||||||
|
console.log(val, 'value');
|
||||||
|
console.log(this.collegeMajorOptions.find((item) => item.value == val).children, 'majorOptions');
|
||||||
|
this.majorOptions = this.collegeMajorOptions.find((item) => item.value == val).children;
|
||||||
|
//将this.majorCheckOn中的数据与this.lastCollegeMajor比较,如果this.lastCollegeMajor中有this.majorCheckOn中没有的数据则删除,反之添加
|
||||||
|
// for (let i = 0; i < this.majorCheckOn.length; i++) {
|
||||||
|
// if (!this.lastCollegeMajor.includes(this.majorCheckOn[i])) {
|
||||||
|
// this.lastCollegeMajor.push(this.majorCheckOn[i]);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// for (let i = 0; i < this.lastCollegeMajor.length; i++) {
|
||||||
|
// if (!this.majorCheckOn.includes(this.lastCollegeMajor[i])) {
|
||||||
|
// this.lastCollegeMajor.splice(i, 1);
|
||||||
|
// console.log("splice")
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// this.lastCollegeMajor = this.majorCheckOn;
|
||||||
|
console.log(this.lastCollegeMajor, 'lastCollegeMajor');
|
||||||
|
this.majorCheckOn = this.lastCollegeMajor.map((item) => item[1]);
|
||||||
|
console.log(this.majorCheckOn, 'majorCheckOn');
|
||||||
|
},
|
||||||
|
// });
|
||||||
|
// this.college = ['全校'];
|
||||||
|
// this.collegetab2 = ['地理科学学院', '文学院'];
|
||||||
|
console.log(this.collegeOptions, 'collegeOptions');
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onMajorEntrydateChange(value) {
|
||||||
|
console.log(value, 'value');
|
||||||
|
if (value.length > 5) {
|
||||||
|
//找到value中不在this.lastMajorEntrydate中的数据
|
||||||
|
for (let i = 0; i < value.length; i++) {
|
||||||
|
if (!this.lastMajorEntrydate.includes(value[i])) {
|
||||||
|
message.error('最多选择五个');
|
||||||
|
//删除value[i]
|
||||||
|
value.splice(i, 1);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.lastMajorEntrydate = value;
|
||||||
|
},
|
||||||
|
//学院对比 学院选项回调函数
|
||||||
|
onCollegeChange(value) {
|
||||||
|
console.log(value, 'value');
|
||||||
|
if (value.length > 5) {
|
||||||
|
message.error('最多选择五个');
|
||||||
|
//和lastCollege比较,如果value中的数据不在lastCollege中则删除
|
||||||
|
for (let i = 0; i < value.length; i++) {
|
||||||
|
if (!this.lastCollege.includes(value[i])) {
|
||||||
|
value.splice(i, 1);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.lastCollege = value;
|
||||||
|
},
|
||||||
|
//学院对比 年级选项回调函数
|
||||||
|
onCollegeEntrydateChange(value) {
|
||||||
|
console.log(value, 'value');
|
||||||
|
if (value.length > 5) {
|
||||||
|
message.error('最多选择五个');
|
||||||
|
//和lastCollegeEntrydate比较,如果value中的数据不在lastCollegeEntrydate中则删除
|
||||||
|
for (let i = 0; i < value.length; i++) {
|
||||||
|
if (!this.lastCollegeEntrydate.includes(value[i])) {
|
||||||
|
value.splice(i, 1);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.lastCollegeEntrydate = value;
|
||||||
|
},
|
||||||
|
//专业选项回调函数
|
||||||
|
onCollegeMajorChange(value) {
|
||||||
|
//将value中的数据与this.lastCollegeMajor比较,如果value中的有this.lastCollegeMajor中没有的数据则添加,反之寻找在this.majorOptions中并且在this.lastCollegeMajor中但是不在value中的数据删除
|
||||||
|
for (let i = 0; i < value.length; i++) {
|
||||||
|
if (!this.lastCollegeMajor.map((item) => item[1]).includes(value[i])) {
|
||||||
|
if (this.majorLength == 5) {
|
||||||
|
message.error('最多选择五个');
|
||||||
|
//从value中删除value[i]
|
||||||
|
value.splice(i, 1);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.lastCollegeMajor.push([this.collegeMajor, value[i]]);
|
||||||
|
this.majorLength++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (let i = 0; i < this.lastCollegeMajor.length; i++) {
|
||||||
|
if (!value.includes(this.lastCollegeMajor[i][1])) {
|
||||||
|
//查看该数据是都在this.majorOptions中
|
||||||
|
if (this.majorOptions.find((item) => item.value == this.lastCollegeMajor[i][1])) {
|
||||||
|
this.lastCollegeMajor.splice(i, 1);
|
||||||
|
console.log('splice');
|
||||||
|
this.majorLength--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(value, 'value');
|
||||||
|
},
|
||||||
|
removeTag(index) {
|
||||||
|
if (this.majorCheckOn.includes(this.lastCollegeMajor[index][1])) {
|
||||||
|
let index1 = this.majorCheckOn.indexOf(this.lastCollegeMajor[index][1]);
|
||||||
|
this.majorCheckOn.splice(index1, 1);
|
||||||
|
}
|
||||||
|
this.lastCollegeMajor.splice(index, 1);
|
||||||
|
this.majorLength--;
|
||||||
|
},
|
||||||
|
//学院选项回调函数
|
||||||
onMajorCollegeChange(value) {
|
onMajorCollegeChange(value) {
|
||||||
let val = value.target.value;
|
let val = value.target.value;
|
||||||
console.log(val, 'value');
|
console.log(val, 'value');
|
||||||
|
@ -347,6 +517,20 @@
|
||||||
console.log(this.majorCheckOn, 'majorCheckOn');
|
console.log(this.majorCheckOn, 'majorCheckOn');
|
||||||
},
|
},
|
||||||
|
|
||||||
|
clearMajor() {
|
||||||
|
this.majorCheckOn = [];
|
||||||
|
this.lastCollegeMajor = [];
|
||||||
|
this.majorLength = 0;
|
||||||
|
},
|
||||||
|
clearCollege() {
|
||||||
|
this.collegetab2 = [];
|
||||||
|
this.collegeentrydate = [];
|
||||||
|
this.lastCollege = [];
|
||||||
|
this.lastCollegeEntrydate = [];
|
||||||
|
},
|
||||||
|
//tab2\3图标
|
||||||
|
drawChart(data, tab) {
|
||||||
|
let seriesData = [];
|
||||||
clearMajor() {
|
clearMajor() {
|
||||||
this.majorCheckOn = [];
|
this.majorCheckOn = [];
|
||||||
this.lastCollegeMajor = [];
|
this.lastCollegeMajor = [];
|
||||||
|
@ -754,7 +938,21 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||||
}
|
}
|
||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
||||||
|
}
|
||||||
|
|
||||||
|
.query {
|
||||||
|
//居左
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
.query {
|
.query {
|
||||||
//居左
|
//居左
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -763,6 +961,11 @@
|
||||||
margin-left: 24px;
|
margin-left: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tab3 {
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
.tab3 {
|
.tab3 {
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -774,4 +977,9 @@
|
||||||
color: rgb(8, 8, 8);
|
color: rgb(8, 8, 8);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 34px;
|
||||||
|
color: rgb(8, 8, 8);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue