修复学院专业选择框问题以及添加引导界面并删除多余无用代码

This commit is contained in:
Cool 2025-03-19 17:12:04 +08:00
parent 688820ccce
commit ffefebd785
2 changed files with 443 additions and 1279 deletions

View File

@ -13,8 +13,7 @@
<div v-if="topCollege != null" style="margin-bottom: 5px">
<span style="font-size: 15px">当前数据为 </span>
<span style="color: red; font-size: 18px">{{ topCollege }}</span>
<span v-if="topMajor != null && topMajor != ''" style="color: red; font-size: 18px"> / {{ topMajor
}}</span>
<span v-if="topMajor != null && topMajor != ''" style="color: red; font-size: 18px"> / {{ topMajor }}</span>
<span style="font-size: 15px"> </span>
<span style="color: red; font-size: 20px">{{ topEntrydate }}</span>
<span style="font-size: 15px"> 级数据</span>
@ -27,8 +26,7 @@
</a-tooltip>
</template>
</a-table>
<div style="display: flex; justify-content: space-between; font-size: 15px; margin-top: 10px"
v-if="total && total > 0">
<div style="display: flex; justify-content: space-between; font-size: 15px; margin-top: 10px" v-if="total && total > 0">
<span>{{ totalName }}总人数{{ total }}</span>
<span>累计通过人数: {{ passNumberBottom }}</span>
<span>累计总通过率: {{ passRateBottom }}</span>
@ -52,357 +50,357 @@
</template>
<script>
import { defHttp } from '/@/utils/http/axios';
import * as echarts from 'echarts';
import { defHttp } from '/@/utils/http/axios';
import * as echarts from 'echarts';
export default {
data() {
return {
loading: false,
dataSourceCet4: [],
columns: [
{
title: '学年',
dataIndex: 'grade',
key: 'grade',
align: 'center',
customCell: (_, index) => ({
rowSpan: index % 2 === 0 ? 2 : 0, //graderowSpan
}),
},
{
title: '考试批次',
dataIndex: 'batch',
key: 'batch',
align: 'center',
},
{
title: '参加人数',
dataIndex: 'attendNumber',
key: 'attendNumber',
align: 'center',
},
{
title: '通过人数',
dataIndex: 'passNumber',
key: 'passNumber',
align: 'center',
},
{
title: '本批次通过率',
dataIndex: 'batchpassrate',
key: 'batchpassrate',
align: 'center',
},
{
slots: { title: 'passRateSlot' },
dataIndex: 'gradepassrate',
key: 'gradepassrate',
align: 'center',
customCell: (_, index) => ({
rowSpan: index % 2 === 0 ? 2 : 0,
}),
},
],
Url: {
getEntrydate: '/cet/getEntrydate',
getCollege: '/cet/getCollege',
getData: '/cet/getData',
getCollegeMajor: '/cet/getCollegeMajor',
},
total: 0,
totalName: '',
passNumberBottom: 0,
passRateBottom: 0,
passRatePie: [],
lineXData: [],
lineYData: [],
collegeOptions: [],
collegeMajorOptions: [],
entrydateOptions: [],
college: null,
entrydate: 2017, //
//
collegeMajor: ['全校'], //
topCollege: null, //
topMajor: null, //
topEntrydate: null, //
};
},
mounted() {
this.getEntrydateAndCollegeData();
this.getCollegeMajorData();
this.query();
//this.map2Chart();
},
methods: {
//
async getEntrydateAndCollegeData() {
const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
const getCollege = await defHttp.get({ url: this.Url.getCollege });
this.collegeOptions = getCollege.colleges;
//
this.collegeOptions.unshift({ value: '全校', label: '全校' });
this.college = this.collegeOptions[0].value;
this.entrydateOptions = getEntrydate.entrydates;
// this.entrydate = this.entrydateOptions[0].value;
},
//
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.collegeMajorOptions.unshift({ value: '专升本', label: '专升本' });
//
this.collegeMajorOptions.unshift({ value: '全校', label: '全校' });
// this.collegeMajor = [''];
console.log(this.collegeMajorOptions);
},
//
async query() {
try {
//this.collegeMajor[1]null
let major = this.collegeMajor.length > 1 ? this.collegeMajor[1] : '';
this.topCollege = this.collegeMajor[0];
this.topMajor = major;
this.topEntrydate = this.entrydate;
if (this.college) this.loading = true;
let params = {
college: this.collegeMajor[0],
major: major,
entrydate: this.entrydate,
};
console.log('params', params);
const result = await defHttp.get({ url: this.Url.getData, params });
let tableData = [];
let piedata = [];
let passrate = 0;
let index = 0;
const passRate = {};
if (result.cet4['大一学年'] != undefined) {
passRate['大一学年'] = result.cet4['大一学年'];
}
if (result.cet4['大二学年'] != undefined) {
passRate['大二学年'] = result.cet4['大二学年'];
}
if (result.cet4['大三学年'] != undefined) {
passRate['大三学年'] = result.cet4['大三学年'];
}
if (result.cet4['大四学年'] != undefined) {
passRate['大四学年'] = result.cet4['大四学年'];
}
result.cet4 = passRate;
this.lineXData = [];
this.lineYData = [];
for (let grade in result.cet4) {
result.cet4[grade].forEach((item) => {
this.lineXData.push(item.batch);
this.lineYData.push((item.batchpassrate * 100).toFixed(1));
if (index % 2 == 0) {
piedata.push({ value: parseFloat(item.gradepassrate - passrate).toFixed(3), name: grade + '时通过' });
passrate = parseFloat(item.gradepassrate).toFixed(3);
}
index++;
tableData.push({
grade: grade,
attendNumber: item.attendNumber,
batch: item.batch,
gradepassrate: (item.gradepassrate * 100).toFixed(1) + '%',
passNumber: item.passNumber,
batchpassrate: (item.batchpassrate * 100).toFixed(1) + '%',
});
});
}
console.log('tableData', tableData);
this.dataSourceCet4 = tableData; //
this.total = result.total; //
this.totalName = result.totalName; //
this.passNumberBottom = result.passNumber; //
this.passRateBottom = (result.passRate * 100).toFixed(1) + '%'; //
//
this.passRatePie = []; //
this.passRatePie.push({ value: result.passRate, name: '已通过' });
this.passRatePie.push({ value: 1 - result.passRate, name: '未通过' });
piedata.push({ value: (1 - passrate).toFixed(3), name: '未通过' }); //
setTimeout(() => {
this.drawPieChart(piedata);
this.map2Chart();
}, 100);
// this.drawPieChart();
} finally {
this.loading = false;
}
},
test() {
defHttp.get({ url: '/cet/getTest' });
},
map2Chart() {
var myChart = echarts.init(document.getElementById('map2'));
var option = {
title: {
text: '各批次通过率分析',
left: 'left',
top: '0%',
textStyle: {
fontSize: 16,
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function (params) {
return (
params[0].name +
'<br/>' +
'<table>' +
'<tr><td>' +
params[0].marker +
'</td><td style="font-weight: bold;">' +
'&nbsp;&nbsp;&nbsp;&nbsp;' +
params[0].value +
'%' +
'</td></tr>' +
'<tr>' +
'</table>'
);
},
},
grid: {
top: '50px',
left: '50px',
right: '50px',
bottom: '30px',
},
xAxis: {
type: 'category',
data: this.lineXData,
},
yAxis: {
type: 'value',
},
series: [
export default {
data() {
return {
loading: false,
dataSourceCet4: [],
columns: [
{
data: this.lineYData,
type: 'line',
itemStyle: {
normal: {
label: {
show: true, //
position: 'top', //
textStyle: {
//
color: 'black',
fontSize: 12,
title: '学年',
dataIndex: 'grade',
key: 'grade',
align: 'center',
customCell: (_, index) => ({
rowSpan: index % 2 === 0 ? 2 : 0, //graderowSpan
}),
},
{
title: '考试批次',
dataIndex: 'batch',
key: 'batch',
align: 'center',
},
{
title: '参加人数',
dataIndex: 'attendNumber',
key: 'attendNumber',
align: 'center',
},
{
title: '通过人数',
dataIndex: 'passNumber',
key: 'passNumber',
align: 'center',
},
{
title: '本批次通过率',
dataIndex: 'batchpassrate',
key: 'batchpassrate',
align: 'center',
},
{
slots: { title: 'passRateSlot' },
dataIndex: 'gradepassrate',
key: 'gradepassrate',
align: 'center',
customCell: (_, index) => ({
rowSpan: index % 2 === 0 ? 2 : 0,
}),
},
],
Url: {
getEntrydate: '/cet/getEntrydate',
getCollege: '/cet/getCollege',
getData: '/cet/getData',
getCollegeMajor: '/cet/getCollegeMajor',
},
total: 0,
totalName: '',
passNumberBottom: 0,
passRateBottom: 0,
passRatePie: [],
lineXData: [],
lineYData: [],
collegeOptions: [],
collegeMajorOptions: [],
entrydateOptions: [],
college: null,
entrydate: 2017, //
//
collegeMajor: ['全校'], //
topCollege: null, //
topMajor: null, //
topEntrydate: null, //
};
},
mounted() {
this.getEntrydateAndCollegeData();
this.getCollegeMajorData();
this.query();
//this.map2Chart();
},
methods: {
//
async getEntrydateAndCollegeData() {
const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
const getCollege = await defHttp.get({ url: this.Url.getCollege });
this.collegeOptions = getCollege.colleges;
//
this.collegeOptions.unshift({ value: '全校', label: '全校' });
this.college = this.collegeOptions[0].value;
this.entrydateOptions = getEntrydate.entrydates;
// this.entrydate = this.entrydateOptions[0].value;
},
//
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.collegeMajorOptions.unshift({ value: '专升本', label: '专升本' });
//
this.collegeMajorOptions.unshift({ value: '全校', label: '全校' });
// this.collegeMajor = [''];
console.log(this.collegeMajorOptions);
},
//
async query() {
try {
//this.collegeMajor[1]null
let major = this.collegeMajor.length > 1 ? this.collegeMajor[1] : '';
this.topCollege = this.collegeMajor[0];
this.topMajor = major;
this.topEntrydate = this.entrydate;
if (this.college) this.loading = true;
let params = {
college: this.collegeMajor[0],
major: major,
entrydate: this.entrydate,
};
console.log('params', params);
const result = await defHttp.get({ url: this.Url.getData, params });
let tableData = [];
let piedata = [];
let passrate = 0;
let index = 0;
const passRate = {};
if (result.cet4['大一学年'] != undefined) {
passRate['大一学年'] = result.cet4['大一学年'];
}
if (result.cet4['大二学年'] != undefined) {
passRate['大二学年'] = result.cet4['大二学年'];
}
if (result.cet4['大三学年'] != undefined) {
passRate['大三学年'] = result.cet4['大三学年'];
}
if (result.cet4['大四学年'] != undefined) {
passRate['大四学年'] = result.cet4['大四学年'];
}
result.cet4 = passRate;
this.lineXData = [];
this.lineYData = [];
for (let grade in result.cet4) {
result.cet4[grade].forEach((item) => {
this.lineXData.push(item.batch);
this.lineYData.push((item.batchpassrate * 100).toFixed(1));
if (index % 2 == 0) {
piedata.push({ value: parseFloat(item.gradepassrate - passrate).toFixed(3), name: grade + '时通过' });
passrate = parseFloat(item.gradepassrate).toFixed(3);
}
index++;
tableData.push({
grade: grade,
attendNumber: item.attendNumber,
batch: item.batch,
gradepassrate: (item.gradepassrate * 100).toFixed(1) + '%',
passNumber: item.passNumber,
batchpassrate: (item.batchpassrate * 100).toFixed(1) + '%',
});
});
}
console.log('tableData', tableData);
this.dataSourceCet4 = tableData; //
this.total = result.total; //
this.totalName = result.totalName; //
this.passNumberBottom = result.passNumber; //
this.passRateBottom = (result.passRate * 100).toFixed(1) + '%'; //
//
this.passRatePie = []; //
this.passRatePie.push({ value: result.passRate, name: '已通过' });
this.passRatePie.push({ value: 1 - result.passRate, name: '未通过' });
piedata.push({ value: (1 - passrate).toFixed(3), name: '未通过' }); //
setTimeout(() => {
this.drawPieChart(piedata);
this.map2Chart();
}, 100);
// this.drawPieChart();
} finally {
this.loading = false;
}
},
test() {
defHttp.get({ url: '/cet/getTest' });
},
map2Chart() {
var myChart = echarts.init(document.getElementById('map2'));
var option = {
title: {
text: '各批次通过率分析',
left: 'left',
top: '0%',
textStyle: {
fontSize: 16,
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
formatter: function (params) {
return (
params[0].name +
'<br/>' +
'<table>' +
'<tr><td>' +
params[0].marker +
'</td><td style="font-weight: bold;">' +
'&nbsp;&nbsp;&nbsp;&nbsp;' +
params[0].value +
'%' +
'</td></tr>' +
'<tr>' +
'</table>'
);
},
},
grid: {
top: '50px',
left: '50px',
right: '50px',
bottom: '30px',
},
xAxis: {
type: 'category',
data: this.lineXData,
},
yAxis: {
type: 'value',
},
series: [
{
data: this.lineYData,
type: 'line',
itemStyle: {
normal: {
label: {
show: true, //
position: 'top', //
textStyle: {
//
color: 'black',
fontSize: 12,
},
formatter: '{c}%',
},
formatter: '{c}%',
},
},
},
},
],
};
],
};
option && myChart.setOption(option);
},
drawPieChart(piedata) {
console.log(this.passRatePie);
console.log('piedata', piedata);
let myChart = echarts.init(document.getElementById('piechart'));
let option = {
tooltip: {
trigger: 'item',
confine: false,
avoidLabelOverlap: true,
//
itemStyle: {
fontSize: 100,
},
},
title: {
text: '四级通过率分析',
left: 'left',
top: '0%',
textStyle: {
fontSize: 16,
},
},
legend: {
top: 'center',
right: '0%',
orient: 'vertical',
},
color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'],
series: [
//
{
name: '四级通过率',
type: 'pie',
center: ['30%', '50%'],
radius: ['35%', '70%'],
option && myChart.setOption(option);
},
drawPieChart(piedata) {
console.log(this.passRatePie);
console.log('piedata', piedata);
let myChart = echarts.init(document.getElementById('piechart'));
let option = {
tooltip: {
trigger: 'item',
confine: false,
avoidLabelOverlap: true,
//
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
fontSize: 100,
},
label: {
show: true,
fontSize: 14,
overflow: 'truncate',
minMargin: -1,
},
title: {
text: '四级通过率分析',
left: 'left',
top: '0%',
textStyle: {
fontSize: 16,
},
emphasis: {
},
legend: {
top: 'center',
right: '0%',
orient: 'vertical',
},
color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'],
series: [
//
{
name: '四级通过率',
type: 'pie',
center: ['30%', '50%'],
radius: ['35%', '70%'],
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: true,
fontSize: 15,
fontWeight: 'bold',
fontSize: 14,
overflow: 'truncate',
minMargin: -1,
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
label: {
show: true,
fontSize: 15,
fontWeight: 'bold',
},
},
data: piedata,
},
data: piedata,
},
],
};
],
};
myChart.setOption(option);
myChart.setOption(option);
},
},
},
};
};
</script>
<style lang="less" scoped>
.container {
display: flex;
background-color: #fff;
padding: 15px;
border-radius: 4px;
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);
}
.title {
font-size: 34px;
color: rgb(8, 8, 8);
font-weight: bold;
}
.title {
font-size: 34px;
color: rgb(8, 8, 8);
font-weight: bold;
}
</style>

File diff suppressed because it is too large Load Diff