feature/1.0版本页面优化 #1
|
|
@ -25,10 +25,10 @@
|
|||
</a-card>
|
||||
</a-col>
|
||||
<a-col :xl="8">
|
||||
<a-card :style="{ marginBottom: '12px' }">
|
||||
<a-card :loading="map2loading" :style="{ marginBottom: '12px' }">
|
||||
<div id="map2" style="width: 100%; height: 230px"></div>
|
||||
</a-card>
|
||||
<a-card>
|
||||
<a-card :loading="map3loading">
|
||||
<div id="map3" style="width: 100%; height: 230px"></div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
|
@ -74,8 +74,8 @@
|
|||
getRateByMajor: '/cet/getRateByMajor',
|
||||
},
|
||||
map1loading: false,
|
||||
tab2loading: false,
|
||||
tab3loading: false,
|
||||
map2loading: false,
|
||||
map3loading: false,
|
||||
|
||||
collegeOptions: [],
|
||||
batchOptions: [],
|
||||
|
|
@ -106,12 +106,12 @@
|
|||
this.getEntrydate();
|
||||
this.allQuery();
|
||||
this.getCollegeMajorData();
|
||||
this.gradePassRate();
|
||||
this.majorPassRate();
|
||||
},
|
||||
methods: {
|
||||
allQuery() {
|
||||
this.map1loading = true;
|
||||
this.map2loading = true; // 新增
|
||||
this.map3loading = true; // 新增
|
||||
let college = ['全校'];
|
||||
let query = 'tab1';
|
||||
if (this.oneentrydate == null) {
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
},
|
||||
// 年级通过率
|
||||
async gradePassRate() {
|
||||
var myChart = echarts.init(document.getElementById('map2'));
|
||||
this.map2loading = true;
|
||||
const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
|
||||
this.entrydateOptions = getEntrydate.entrydates;
|
||||
let entrydate = this.entrydateOptions.map((item) => item.value);
|
||||
|
|
@ -203,14 +203,10 @@
|
|||
level: 'cet4',
|
||||
};
|
||||
let url = this.Url.getCollegeRate;
|
||||
console.log(queryParams, 'queryParams');
|
||||
let result = await defHttp.post({ url: url, data: queryParams });
|
||||
|
||||
console.log(myChart, 'mychart');
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
console.log(result.data, 'result');
|
||||
result = result.data[name];
|
||||
let collegeOption = {
|
||||
title: {
|
||||
|
|
@ -258,17 +254,18 @@
|
|||
|
||||
animationDurationUpdate: 500,
|
||||
};
|
||||
myChart.setOption(collegeOption);
|
||||
this.map2loading = false;
|
||||
this.$nextTick(() => {
|
||||
var myChart = echarts.init(document.getElementById('map2'));
|
||||
myChart.setOption(collegeOption);
|
||||
});
|
||||
},
|
||||
|
||||
// 各专业通过率
|
||||
async majorPassRate() {
|
||||
var myChart = echarts.init(document.getElementById('map3'));
|
||||
this.map3loading = true;
|
||||
const name = '西语学院';
|
||||
|
||||
//let entrydate = this.oneentrydate.map((item) => item.value);
|
||||
//console.log(entrydata, 'entrydata');
|
||||
|
||||
let queryParams = {
|
||||
college: [[name]],
|
||||
entrydate: [this.oneentrydate],
|
||||
|
|
@ -276,14 +273,11 @@
|
|||
};
|
||||
let url = this.Url.getMajorRate;
|
||||
console.log(queryParams, 'queryParams');
|
||||
|
||||
let result = await defHttp.post({ url: url, data: queryParams });
|
||||
|
||||
console.log(myChart, 'mychart');
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
console.log(result.data, 'result');
|
||||
|
||||
//result = result.data[name];
|
||||
// 遍历 result.data 中的所有专业
|
||||
|
|
@ -359,7 +353,11 @@
|
|||
],
|
||||
animationDurationUpdate: 500,
|
||||
};
|
||||
myChart.setOption(majorOption);
|
||||
this.map3loading = false;
|
||||
this.$nextTick(() => {
|
||||
var myChart = echarts.init(document.getElementById('map3'));
|
||||
myChart.setOption(majorOption);
|
||||
});
|
||||
},
|
||||
|
||||
dataChart(data, tab) {
|
||||
|
|
@ -458,34 +456,32 @@
|
|||
.sort((a, b) => b - a)
|
||||
.map((value) => yData.indexOf(value) + 1);
|
||||
//如果选择全校，增加排名
|
||||
if (tab == 'tab1') {
|
||||
seriesData.push({
|
||||
name: i + '级累计总通过率排名',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: rankData,
|
||||
bar: {},
|
||||
show: false,
|
||||
seriesData.push({
|
||||
name: i + '级累计总通过率排名',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: rankData,
|
||||
bar: {},
|
||||
show: false,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
formatter: '{c}',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: 'black',
|
||||
fontSize: 8,
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
formatter: '{c}',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: 'black',
|
||||
fontSize: 8,
|
||||
},
|
||||
color: colors[j++],
|
||||
},
|
||||
color: colors[j++],
|
||||
},
|
||||
});
|
||||
if (j == colors.length) {
|
||||
j = 0;
|
||||
}
|
||||
},
|
||||
});
|
||||
if (j == colors.length) {
|
||||
j = 0;
|
||||
}
|
||||
}
|
||||
let myChart = null;
|
||||
|
|
@ -623,7 +619,6 @@
|
|||
this.collegeOptions.map((item) => item.value),
|
||||
'collegeOptions'
|
||||
);
|
||||
console.log(name, 'params');
|
||||
console.log(this.collegeOptions.map((item) => item.value).includes(name), 'bool');
|
||||
if (params != null && params != undefined && params.name != '' && this.collegeOptions.map((item) => item.value).includes(name)) {
|
||||
console.log(params, 'params');
|
||||
|
|
@ -634,14 +629,13 @@
|
|||
level: 'cet4',
|
||||
};
|
||||
let url = this.Url.getCollegeRate;
|
||||
console.log(queryParams, 'queryParams');
|
||||
this.map2loading = true;
|
||||
this.map3loading = true;
|
||||
let result = await defHttp.post({ url: url, data: queryParams });
|
||||
|
||||
console.log(myChart, 'mychart');
|
||||
if (!result) {
|
||||
return;
|
||||
}
|
||||
console.log(result.data, 'result');
|
||||
result = result.data[name];
|
||||
let collegeOption = {
|
||||
title: {
|
||||
|
|
@ -689,21 +683,6 @@
|
|||
|
||||
animationDurationUpdate: 500,
|
||||
};
|
||||
console.log(collegeOption, 'collegeOption');
|
||||
|
||||
//let spanElement = document.getElementById('span');
|
||||
|
||||
// 隐藏 span 元素
|
||||
//spanElement.style.display = 'none';
|
||||
var map2Chart = echarts.init(document.getElementById('map2'));
|
||||
map2Chart.setOption(collegeOption, true);
|
||||
//myChart.setOption(collegeOption, true);
|
||||
|
||||
console.log(myChart, 'mychart');
|
||||
// this.college = [params];
|
||||
|
||||
// this.query(tab, this.college, this.entrydate);
|
||||
|
||||
//点击事件中的个专业四级通过率
|
||||
let querMajorParam = {
|
||||
college: [[name]],
|
||||
|
|
@ -711,16 +690,12 @@
|
|||
level: 'cet4',
|
||||
};
|
||||
let urlMajor = this.Url.getMajorRate;
|
||||
console.log(querMajorParam, 'querMajorParam');
|
||||
|
||||
let resultMajor = await defHttp.post({ url: urlMajor, data: querMajorParam });
|
||||
|
||||
console.log(myChart, 'mychart');
|
||||
if (!resultMajor) {
|
||||
return;
|
||||
}
|
||||
console.log(resultMajor.data, 'resultMajor');
|
||||
|
||||
//result = result.data[name];
|
||||
// 遍历 result.data 中的所有专业
|
||||
const majors = Object.keys(resultMajor.data); // 获取所有专业名称
|
||||
|
|
@ -792,9 +767,14 @@
|
|||
],
|
||||
animationDurationUpdate: 500,
|
||||
};
|
||||
console.log(majorOption, 'majorOption');
|
||||
var map3Chart = echarts.init(document.getElementById('map3'));
|
||||
map3Chart.setOption(majorOption, true);
|
||||
this.map3loading = false;
|
||||
this.map2loading = false;
|
||||
this.$nextTick(() => {
|
||||
var map2Chart = echarts.init(document.getElementById('map2'));
|
||||
map2Chart.setOption(collegeOption, true);
|
||||
var map3Chart = echarts.init(document.getElementById('map3'));
|
||||
map3Chart.setOption(majorOption, true);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
@ -844,11 +824,9 @@
|
|||
// });
|
||||
console.log('data', result.data);
|
||||
} finally {
|
||||
query == 'tab1' ? (this.map1loading = false) : (this.tab2loading = false);
|
||||
this.map1loading = false;
|
||||
this.$nextTick(() => {
|
||||
if (query == 'tab1') {
|
||||
this.dataChart(result.data, query);
|
||||
}
|
||||
this.dataChart(result.data, query);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue