11.08版本
This commit is contained in:
9w2lr
parent
4465398e1c
commit
17678637a2
|
|
@ -1,110 +1,128 @@
|
|||
<template>
|
||||
<a-card :bordered="false">
|
||||
<!-- 查询区域 -->
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-descriptions bordered>
|
||||
<a-descriptions-item label="学院" :span="3">
|
||||
<a-checkbox v-model="college.checkAll" @change="handleCheckAll('college')">全选</a-checkbox>
|
||||
<a-checkbox-group v-model="college.checkedList" :options="college.plainOptions" />
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="批次" :span="3">
|
||||
<a-checkbox v-model="batch.checkAll" @change="handleCheckAll('batch')">全选</a-checkbox>
|
||||
<a-checkbox-group v-model="batch.checkedList" :options="batch.plainOptions" />
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<span style="margin-top: 15px;" class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="seachClick" icon="search">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
|
||||
</span>
|
||||
</a-form>
|
||||
<div>
|
||||
<a-button type="primary" @click="visible = true">打开筛选项</a-button>
|
||||
</div>
|
||||
<!-- 查询区域-END -->
|
||||
<!-- <div class="WEBdraw" v-if="!this.isMobile()">
|
||||
<div id="web1"></div>
|
||||
</div> -->
|
||||
<!-- table区域-begin -->
|
||||
<div v-if="!this.isMobile()">
|
||||
<a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
|
||||
:dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
|
||||
@change="handleTableChange">
|
||||
|
||||
</a-table>
|
||||
<a-drawer placement="right" :visible="visible" width="90%" :closable="false">
|
||||
<template slot="title">
|
||||
<span>CET查询筛选项</span>
|
||||
<span style="float:right;">
|
||||
<a-button type="primary" @click="visible = false" icon="close">取消</a-button>
|
||||
<a-button type="primary" @click="seachClick" icon="search" style="margin-left: 10px;">查询</a-button>
|
||||
</span>
|
||||
</template>
|
||||
<a-descriptions bordered>
|
||||
<a-descriptions-item label="学院" :span="3">
|
||||
<a-checkbox-group v-model="college.checkedList" :options="college.plainOptions" />
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="批次" :span="3">
|
||||
<a-checkbox-group v-model="batch.checkedList" :options="batch.plainOptions" />
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="级别" :span="3">
|
||||
<a-radio-group v-model="selectedLevel" size="large">
|
||||
<a-radio-button v-for="option in levelOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="培养层次" :span="3">
|
||||
<a-radio-group v-model="selectedCultivationLevel" size="large">
|
||||
<a-radio-button v-for="option in cultivationLevelOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="考试时年级" :span="3">
|
||||
<a-radio-group v-model="selectedExamGrade" size="large">
|
||||
<a-radio-button v-for="option in examGradeOptions" :key="option.value" :value="option.value">
|
||||
{{ option.label }}
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-drawer>
|
||||
<a-descriptions bordered style="margin-top:10px;">
|
||||
<a-descriptions-item label="总人数">
|
||||
{{ totalEntries }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="总通过数">
|
||||
{{ totalPassCount }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="总通过率">
|
||||
{{ totalPassRate }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<div v-if="isSeach">
|
||||
正在加载中 <a-spin />
|
||||
</div>
|
||||
|
||||
<div v-if="colleges.length > 0 && loading === false">
|
||||
<div class="title">各学院通过率变化</div>
|
||||
<a-tabs v-model:activeKey="activeKey" type="card" @change="darwLine">
|
||||
<a-tab-pane v-for="(college, index) in colleges" :key="index" :tab="college">
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
<div class="LineChart">
|
||||
<div id="LineChart"></div>
|
||||
</div>
|
||||
<a-table :dataSource="dataSource" :columns="columns" bordered style="margin-top:10px;" :loading="loading"
|
||||
v-if="colleges.length > 0">
|
||||
<template slot="passRate" slot-scope="text">
|
||||
{{ text }}%
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAction, postAction } from '@/api/manage'
|
||||
import '@/assets/less/TableExpand.less'
|
||||
import { mixinDevice } from '@/utils/mixin'
|
||||
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'CetEnglishList',
|
||||
mixins: [JeecgListMixin, mixinDevice],
|
||||
data() {
|
||||
return {
|
||||
isSeach: false,
|
||||
activeKey: 0,
|
||||
loading: false,
|
||||
//总人数
|
||||
totalEntries: 0,
|
||||
//总通过数
|
||||
totalPassCount: 0,
|
||||
//总通过率
|
||||
totalPassRate: 0,
|
||||
visible: false,
|
||||
description: '四六级英语管理页面',
|
||||
// 表头
|
||||
dataSource: [],
|
||||
columns: [
|
||||
{
|
||||
title: '学院',
|
||||
align: "center",
|
||||
dataIndex: 'college'
|
||||
},
|
||||
{
|
||||
title: '成绩',
|
||||
align: "center",
|
||||
dataIndex: 'result'
|
||||
},
|
||||
{
|
||||
title: '是否通过',
|
||||
align: "center",
|
||||
dataIndex: 'ispassed'
|
||||
},
|
||||
{
|
||||
title: '学号',
|
||||
align: "center",
|
||||
dataIndex: 'studentId'
|
||||
},
|
||||
{
|
||||
title: '级别',
|
||||
align: "center",
|
||||
dataIndex: 'level'
|
||||
dataIndex: 'college',
|
||||
key: 'college',
|
||||
},
|
||||
{
|
||||
title: '批次',
|
||||
align: "center",
|
||||
dataIndex: 'batch'
|
||||
dataIndex: 'batch',
|
||||
key: 'batch',
|
||||
},
|
||||
{
|
||||
title: '报名日期',
|
||||
align: "center",
|
||||
dataIndex: 'entrydate'
|
||||
title: '报名数',
|
||||
dataIndex: 'entries',
|
||||
key: 'entries',
|
||||
},
|
||||
{
|
||||
title: '年级',
|
||||
align: "center",
|
||||
dataIndex: 'examgrade'
|
||||
title: '通过率',
|
||||
dataIndex: 'passRate',
|
||||
key: 'passRate',
|
||||
scopedSlots: { customRender: 'passRate' },
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
align: "center",
|
||||
dataIndex: 'sex'
|
||||
},
|
||||
{
|
||||
title: '生源地',
|
||||
align: "center",
|
||||
dataIndex: 'birthplace'
|
||||
},
|
||||
{
|
||||
title: '考试时年级',
|
||||
align: "center",
|
||||
dataIndex: 'cultivationlevel'
|
||||
}
|
||||
],
|
||||
url: {
|
||||
list: "/superlilu/cetEnglish/list",
|
||||
|
|
@ -114,22 +132,14 @@ export default {
|
|||
seachData: {
|
||||
college: [],
|
||||
batch: [],
|
||||
level: [],
|
||||
cultivationlevel: [],
|
||||
examgrade: []
|
||||
},
|
||||
queryParam: {
|
||||
college: [],
|
||||
level: [],
|
||||
batch: [],
|
||||
examgrade: [],
|
||||
cultivationlevel: [],
|
||||
level: "",
|
||||
cultivationlevel: "",
|
||||
examgrade: ""
|
||||
},
|
||||
//标准格式为
|
||||
drawData: [],
|
||||
//学院
|
||||
college: {
|
||||
checkAll: false,
|
||||
checkedList: [],
|
||||
plainOptions: [
|
||||
{ label: '传媒学院', value: '传媒学院' },
|
||||
|
|
@ -161,7 +171,6 @@ export default {
|
|||
},
|
||||
//批次
|
||||
batch: {
|
||||
checkAll: false,
|
||||
checkedList: [],
|
||||
plainOptions: [
|
||||
{ label: '2021-06-01', value: '2021-06-01' },
|
||||
|
|
@ -170,7 +179,36 @@ export default {
|
|||
{ label: '2023-03-01', value: '2023-03-01' },
|
||||
{ label: '2023-06-01', value: '2023-06-01' },
|
||||
]
|
||||
}
|
||||
},
|
||||
//级别
|
||||
levelOptions: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '英语四级', value: '英语四级' },
|
||||
{ label: '英语六级', value: '英语六级' }
|
||||
],
|
||||
selectedLevel: '',
|
||||
//培养层次
|
||||
cultivationLevelOptions: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '研究生', value: '研究生' },
|
||||
{ label: '本科', value: '本科' },
|
||||
{ label: '专升本', value: '专升本' }
|
||||
],
|
||||
selectedCultivationLevel: '',
|
||||
//考试时年级
|
||||
examGradeOptions: [
|
||||
{ label: '全部', value: '' },
|
||||
{ label: '大一', value: '大一' },
|
||||
{ label: '大二', value: '大二' },
|
||||
{ label: '大三', value: '大三' },
|
||||
{ label: '大四', value: '大四' },
|
||||
{ label: '研究生', value: '研究生' },
|
||||
{ label: '其他', value: '其他' }
|
||||
],
|
||||
selectedExamGrade: '',
|
||||
colleges: [],
|
||||
dates: [],
|
||||
LineChartData: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -178,87 +216,152 @@ export default {
|
|||
return `${window._CONFIG['domianURL']}/${this.url.getPassRate}`
|
||||
}
|
||||
},
|
||||
// mounted() {
|
||||
// // 第三步：基于准备好的dom，初始化echarts实例 echarts.init(dom容器)
|
||||
// var myChart = echarts.init(document.getElementById('web1'));
|
||||
// // 第四步：指定配置项option
|
||||
// let option = {
|
||||
// title: {
|
||||
// text: 'ECharts 入门示例'
|
||||
// },
|
||||
// legend: {},
|
||||
// tooltip: {},
|
||||
// xAxis: {
|
||||
// data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
||||
// },
|
||||
// yAxis: {},
|
||||
// series: [
|
||||
// {
|
||||
// name: '销量',
|
||||
// type: 'bar',
|
||||
// data: [5, 20, 36, 10, 10, 20]
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// // 第五步：绘制图表，把配置项给实例对象
|
||||
// myChart.setOption(option);
|
||||
// },
|
||||
methods: {
|
||||
//查询
|
||||
seachClick() {
|
||||
//获取college的值，用,拼接赋值给.queryParam.college
|
||||
this.queryParam.college = this.college.checkedList.join(",")
|
||||
//获取batch的值，用,拼接赋值给.queryParam.batch
|
||||
this.queryParam.batch = this.batch.checkedList.join(",")
|
||||
this.searchQuery()
|
||||
//切换tab，获取当前的学院，绘制折线图
|
||||
darwLine() {
|
||||
let college = this.colleges[this.activeKey];
|
||||
let dates = this.dates;
|
||||
let drawData = this.LineChartData[this.activeKey];
|
||||
this.drawLine(college, dates, drawData);
|
||||
},
|
||||
|
||||
// 在getDraw函数中添加以下代码
|
||||
drawLine(colleges, dates, drawData) {
|
||||
//等待LineChart加载完成再绘制
|
||||
let LineChart = echarts.getInstanceByDom(document.getElementById('LineChart'));
|
||||
if (LineChart != null && LineChart != undefined) {
|
||||
LineChart.dispose();
|
||||
}
|
||||
LineChart = echarts.init(document.getElementById('LineChart'));
|
||||
let option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: colleges
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
toolbox: {
|
||||
show: false
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: dates
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: drawData
|
||||
};
|
||||
LineChart.setOption(option);
|
||||
},
|
||||
|
||||
//获取图像数据
|
||||
getDraw() {
|
||||
//把数据清空
|
||||
this.colleges = []
|
||||
this.dates = []
|
||||
this.LineChartData = []
|
||||
//销毁折线图
|
||||
let LineChart = echarts.getInstanceByDom(document.getElementById('LineChart'));
|
||||
if (LineChart != null && LineChart != undefined) {
|
||||
LineChart.dispose();
|
||||
}
|
||||
postAction(this.getPassRate, this.seachData).then(res => {
|
||||
console.log("res", this.convertData(res.result))
|
||||
let data = res.result;
|
||||
//先将所有数据按照batch排序
|
||||
data.resultList.sort((a, b) => {
|
||||
return a.batch > b.batch ? 1 : -1;
|
||||
});
|
||||
|
||||
this.loading = false;
|
||||
// 表格数据
|
||||
this.dataSource = Object.assign([], data.resultList);
|
||||
//总计数据
|
||||
this.totalEntries = data.totalEntries;
|
||||
this.totalPassCount = data.totalPass;
|
||||
this.totalPassRate = parseFloat(this.totalPassCount / this.totalEntries * 100).toFixed(2) + "%";
|
||||
//收集学院和日期
|
||||
data.resultList.forEach(item => {
|
||||
//判断学院是否存在，不存在则添加
|
||||
let collegeIndex = this.colleges.indexOf(item.college);
|
||||
if (collegeIndex === -1) {
|
||||
this.colleges.push(item.college);
|
||||
}
|
||||
let dateIndex = this.dates.indexOf(item.batch);
|
||||
if (dateIndex === -1) {
|
||||
this.dates.push(item.batch);
|
||||
}
|
||||
});
|
||||
//收集折线图的数据
|
||||
this.getDrawData(data);
|
||||
this.isSeach = false
|
||||
})
|
||||
},
|
||||
//将数据转换为绘图所需的格式
|
||||
convertData(tempData) {
|
||||
const drawData = []
|
||||
for (const [name, data] of Object.entries(tempData)) {
|
||||
const chartData = {
|
||||
name,
|
||||
data: []
|
||||
|
||||
//收集折线图的数据
|
||||
getDrawData(data) {
|
||||
data.resultList.forEach(item => {
|
||||
//判断学院是否存在，不存在则添加
|
||||
let collegeIndex = this.colleges.indexOf(item.college);
|
||||
//判断日期是否存在，不存在则添加
|
||||
let dateIndex = this.dates.indexOf(item.batch);
|
||||
if (!this.LineChartData[collegeIndex]) {
|
||||
this.LineChartData[collegeIndex] = {
|
||||
name: item.college,
|
||||
type: 'line',
|
||||
data: []
|
||||
};
|
||||
}
|
||||
for (const [date, info] of Object.entries(data)) {
|
||||
const passRate = parseFloat(info.passRate)
|
||||
chartData.data.push({
|
||||
name: date,
|
||||
value: passRate
|
||||
})
|
||||
}
|
||||
drawData.push(chartData)
|
||||
}
|
||||
return drawData
|
||||
this.LineChartData[collegeIndex].data[dateIndex] = parseFloat(item.passRate.toFixed(2));
|
||||
});
|
||||
this.activeKey = 0
|
||||
this.darwLine();
|
||||
},
|
||||
|
||||
|
||||
//查询
|
||||
seachClick() {
|
||||
this.loading = true;
|
||||
this.isSeach = true;
|
||||
this.seachData.level = this.selectedLevel;
|
||||
this.seachData.cultivationlevel = this.selectedCultivationLevel;
|
||||
this.seachData.examgrade = this.selectedExamGrade;
|
||||
this.seachData.college = this.college.checkedList;
|
||||
this.seachData.batch = this.batch.checkedList;
|
||||
//绘制柱状图
|
||||
this.getDraw()
|
||||
this.visible = false;
|
||||
// this.searchQuery()
|
||||
},
|
||||
//全选逻辑
|
||||
handleCheckAll(type) {
|
||||
const currentType = this[type];
|
||||
if (currentType.checkAll) {
|
||||
currentType.checkedList = currentType.plainOptions.map(option => option.value);
|
||||
} else {
|
||||
currentType.checkedList = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@import '~@assets/less/common.less';
|
||||
|
||||
.WEBdraw {
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.LineChart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#web1 {
|
||||
#LineChart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -269,4 +372,4 @@ export default {
|
|||
} */
|
||||
|
||||
/* 第二步 */
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue