Big-Data-Lab
/
CET-vue-3.0
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

学院维度页面优化

This commit is contained in:
Xubx 2024-10-22 18:57:00 +08:00
parent dd0090a826
commit df1aab15cd
1 changed files with 52 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
src/views/cet/cet-ana-1.vue
View File

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