基本功能完成
This commit is contained in:
parent
e7786d3429
commit
171dc8f3f6
|
|
@ -3,8 +3,10 @@
|
|||
<a-card title="按学院 / 专业分析" :loading="loading" :bordered="false">
|
||||
<template #extra>
|
||||
<a-select v-model:value="college" style="width: 300px" :options="collegeOptions"></a-select>
|
||||
<a-select v-model:value="batch" style="margin-left: 10px;width: 120px" :options="batchOptions"></a-select>
|
||||
<!-- <a-select v-model:value="batch" style="margin-left: 10px;width: 120px" :options="batchOptions"></a-select> -->
|
||||
<!-- <a-select v-model:value="level" style="margin-left: 10px;width: 120px" :options="levelOptions"></a-select> -->
|
||||
<a-select v-model:value="entrydate" style="margin-left: 10px;width: 100px"
|
||||
:options="entrydateOptions"></a-select>
|
||||
<a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button>
|
||||
</template>
|
||||
<a-row :gutter="24">
|
||||
|
|
@ -28,6 +30,7 @@ export default {
|
|||
return {
|
||||
Url: {
|
||||
getBatch: '/cet/getBatch',
|
||||
getEntrydate: '/cet/getEntrydate',
|
||||
getCollege: '/cet/getCollege',
|
||||
getRate: '/cet/getRateByBatch'
|
||||
},
|
||||
|
|
@ -40,7 +43,10 @@ export default {
|
|||
],
|
||||
level: null,
|
||||
college: null,
|
||||
batch: null
|
||||
batch: null,
|
||||
entrydateOptions: [],
|
||||
entrydate: null,
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -56,9 +62,9 @@ export default {
|
|||
let xData = [];
|
||||
let yData = [];
|
||||
for (let key in data) {
|
||||
xData.push(key);
|
||||
xData.push(data[key].college);
|
||||
// 将数据转换为百分比（加上%）
|
||||
yData.push((data[key] * 100).toFixed(2));
|
||||
yData.push(data[key].passRate);
|
||||
}
|
||||
let myChart = echarts.init(document.getElementById("map1"));
|
||||
// 指定图表的配置项和数据
|
||||
|
|
@ -72,6 +78,15 @@ export default {
|
|||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
dataView: { show: true, readOnly: false },
|
||||
magicType: { show: true, type: ['line', 'bar'] },
|
||||
restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
|
|
@ -82,8 +97,9 @@ export default {
|
|||
{
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
axisLabel: {
|
||||
interval: 1,//代表显示所有x轴标签显示
|
||||
rotate: -20,//代表倾斜30度显示
|
||||
}
|
||||
}
|
||||
],
|
||||
|
|
@ -94,10 +110,22 @@ export default {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Direct',
|
||||
name: '累计总通过率',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: yData
|
||||
data: yData,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: 'black',
|
||||
fontSize: 13
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -111,36 +139,48 @@ export default {
|
|||
this.batch = this.batchOptions[0].value;
|
||||
this.level = this.levelOptions[0].value;
|
||||
},
|
||||
//获取年级数据
|
||||
async getEntrydate() {
|
||||
const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
|
||||
this.entrydateOptions = getEntrydate.entrydates;
|
||||
this.entrydate = this.entrydateOptions[0].value;
|
||||
},
|
||||
// 查询数据
|
||||
async query() {
|
||||
let data = null;
|
||||
console.log(this.college, this.batch);
|
||||
let result = null;
|
||||
console.log(this.college, this.entrydate);
|
||||
//如果this.college和this.batch为null则先赋静态值
|
||||
if (!this.college) {
|
||||
this.college = '全校';
|
||||
}
|
||||
if (!this.batch) {
|
||||
this.batch = '2017-12-01';
|
||||
if (!this.entrydate) {
|
||||
this.entrydate = '2017';
|
||||
}
|
||||
try {
|
||||
this.loading = true;
|
||||
let params = {
|
||||
college: this.college,
|
||||
batch: this.batch,
|
||||
entrydate: this.entrydate,
|
||||
level: 'cet4'
|
||||
}
|
||||
data = await defHttp.get({ url: this.Url.getRate, params });
|
||||
result = await defHttp.get({ url: this.Url.getRate, params });
|
||||
//使数据按照passRate从大到小排序
|
||||
result.data.sort((a, b) => {
|
||||
return b.passRate - a.passRate;
|
||||
});
|
||||
console.log("data",result.data);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.$nextTick(() => {
|
||||
this.dataChart(data);
|
||||
this.dataChart(result.data);
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getCollegeOptions();
|
||||
this.getBatch();
|
||||
// this.getBatch();
|
||||
this.getEntrydate();
|
||||
this.query();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -65,6 +65,10 @@ export default {
|
|||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
interval:0,//代表显示所有x轴标签显示
|
||||
rotate:-20,//代表倾斜30度显示
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
|
|
@ -78,7 +82,19 @@ export default {
|
|||
series: [
|
||||
{
|
||||
data: yData,
|
||||
type: 'line'
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: 'black',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
|
@ -120,7 +136,7 @@ export default {
|
|||
async query() {
|
||||
let data = null;
|
||||
try {
|
||||
console.log("sb",this.collegeMajor);
|
||||
console.log("sb", this.collegeMajor);
|
||||
//如果this.collegeMajor为null则先赋个值
|
||||
if (!this.collegeMajor) {
|
||||
this.collegeMajor = ['东语学院'];
|
||||
|
|
|
|||
|
|
@ -6,11 +6,18 @@
|
|||
<a-select v-model:value="entrydate" style="margin-left: 10px;width: 100px"
|
||||
:options="entrydateOptions"></a-select>
|
||||
<a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button>
|
||||
<!-- <a-button @click=test()>test</a-button> -->
|
||||
</template>
|
||||
<a-row :gutter="24">
|
||||
<a-col :xl="12">
|
||||
<a-col :xl="14">
|
||||
<div style="padding-left: 10px;min-height: 400px;">
|
||||
<a-table :dataSource="dataSourceCet4" :columns="columns" :pagination='false'>
|
||||
<a-table :dataSource="dataSourceCet4" :columns="columns" :pagination='false' bordered>
|
||||
<template v-slot:passRateSlot>
|
||||
累计总通过率
|
||||
<a-tooltip title="累计通过人数 / (学院 / 专业总人数)" placement="top">
|
||||
<a-icon type="question-circle" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-table>
|
||||
<span style="font-size: 15px;float: right;margin-top: 10px;" v-if="total && total > 0">
|
||||
学院 / 专业总人数: {{ total }}
|
||||
|
|
@ -37,21 +44,32 @@ export default {
|
|||
title: '年级',
|
||||
dataIndex: 'grade',
|
||||
key: 'grade',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '两个批次总参加人数',
|
||||
title: '考试批次',
|
||||
dataIndex: 'batch',
|
||||
key: 'batch',
|
||||
align: 'center',
|
||||
//数据显示上下两行
|
||||
},
|
||||
{
|
||||
title: '总参加人数',
|
||||
dataIndex: 'attendNumber',
|
||||
key: 'attendNumber',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '新通过人数',
|
||||
dataIndex: 'passNumber',
|
||||
key: 'passNumber',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '累计总通过率',
|
||||
slots: { title: 'passRateSlot' },
|
||||
dataIndex: 'passRate',
|
||||
key: 'passRate',
|
||||
align: 'center',
|
||||
}
|
||||
],
|
||||
Url: {
|
||||
|
|
@ -97,6 +115,8 @@ export default {
|
|||
})
|
||||
}
|
||||
});
|
||||
//手动添加一个专升本字段
|
||||
this.collegeMajorOptions.unshift({ value: '专升本', label: '专升本' });
|
||||
// 手动添加一个全校字段
|
||||
this.collegeMajorOptions.unshift({ value: '全校', label: '全校' });
|
||||
this.collegeMajor = ['全校'];
|
||||
|
|
@ -123,6 +143,9 @@ export default {
|
|||
this.loading = false;
|
||||
}
|
||||
},
|
||||
test() {
|
||||
defHttp.get({ url: "/cet/getTest" });
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getEntrydateAndCollegeData();
|
||||
|
|
|
|||
Loading…
Reference in New Issue