Compare commits
2 Commits
cf89aae584
...
60750d0ca4
| Author | SHA1 | Date |
|---|---|---|
 YuNan
|
60750d0ca4 | |
|
YuNan
|
4aef7d706d |
|
|
@ -22,16 +22,6 @@
|
||||||
</a-card>
|
</a-card>
|
||||||
|
|
||||||
<a-card>
|
<a-card>
|
||||||
<!--<template #extra>
|
|
||||||
<div style="display: flex">
|
|
||||||
<div v-if="topCollege != null">
|
|
||||||
<span style="font-size: 15px; padding-left: 100px">该数据为 </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 style="font-size: 15px"> 的四级通过率变化趋势 </span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>-->
|
|
||||||
<div>
|
<div>
|
||||||
<div id="map1" style="width: 100%; height: 400px"></div>
|
<div id="map1" style="width: 100%; height: 400px"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -48,25 +38,6 @@
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
<!-- <div>
|
|
||||||
<a-row :gutter="24">
|
|
||||||
<a-col :xl="24" :style="{ marginBottom: '24px' }">
|
|
||||||
<div class="container">
|
|
||||||
<div style="display: flex;">
|
|
||||||
<span class="title">学院 / 专业四级通过率变化</span>
|
|
||||||
<div v-if="topCollege != null">
|
|
||||||
<span style="font-size: 15px;padding-left: 100px;">该数据为 </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 style="font-size: 15px;"> 的四级通过率变化趋势 </span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="map1" style="width: 100%; height: 500px"></div>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div> -->
|
|
||||||
</a-card>
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -209,7 +180,7 @@
|
||||||
}
|
}
|
||||||
console.log(result.data, 'result');
|
console.log(result.data, 'result');
|
||||||
|
|
||||||
let titleText = major ? `${college} / ${major}专业 最新批次通过人数饼图` : `${college} 最新批次通过人数饼图`;
|
let titleText = major ? `${college} / ${major}专业 最新批次通过人数` : `${college} 最新批次通过人数`;
|
||||||
|
|
||||||
// 使用 API 返回的数据填充饼图
|
// 使用 API 返回的数据填充饼图
|
||||||
let chartData = [];
|
let chartData = [];
|
||||||
|
|
@ -221,109 +192,57 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
console.log(chartData, '123');
|
console.log(chartData, '123');
|
||||||
|
let xData = chartData.map((item) => item.name); // 提取类别数据
|
||||||
|
let yData = chartData.map((item) => item.value); // 提取值数据
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
grid: {
|
||||||
trigger: 'item',
|
left: '20%', // 增加左边距，可以根据需要调整
|
||||||
//conginee: false,
|
right: '5%', // 右边距
|
||||||
//字体大小
|
top: '15%', // 上边距
|
||||||
itemStytle: {
|
bottom: '10%', // 下边距
|
||||||
// 设置阴影效果
|
|
||||||
shadowBlur: 10, // 阴影模糊大小
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色
|
|
||||||
shadowOffsetX: 5, // 阴影水平方向偏移
|
|
||||||
shadowOffsetY: 5, // 阴影垂直方向偏移
|
|
||||||
fontSize: 100,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
text: '最新批次每一年级的通过率饼图',
|
text: '最新批次每一年级的通过率',
|
||||||
left: 'top',
|
left: 'top',
|
||||||
top: '0%',
|
top: '0%',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
tooltip: {
|
||||||
top: '15%',
|
trigger: 'item',
|
||||||
left: 'center',
|
},
|
||||||
// orient: 'vertical',
|
xAxis: {
|
||||||
itemGap: 3,
|
type: 'category',
|
||||||
selectedMode: true,
|
data: xData,
|
||||||
// inactiveColor: '#ccc',
|
//data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
// icon: 'circle',
|
},
|
||||||
|
yAxis: {
|
||||||
// formatter: function (name) {
|
type: 'value',
|
||||||
// var value;
|
axisLabel: {
|
||||||
// for (var i = 0; i < data.length; i++){
|
formatter: '{value}%',
|
||||||
// if(data[i].name == name){
|
},
|
||||||
// value = data[i].value;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// return name + ' : ' + Math.round(value / num * 10000) / 100 + "%";
|
|
||||||
// },
|
|
||||||
},
|
},
|
||||||
color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'],
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: titleText,
|
name: titleText,
|
||||||
type: 'pie',
|
data: yData,
|
||||||
radius: ['50%', '100%'],
|
//data: [150, 230, 224, 218, 135, 147, 260],
|
||||||
center: ['50%', '50%'],
|
type: 'line',
|
||||||
startAngle: 130,
|
|
||||||
top: 80,
|
|
||||||
//暂时没有
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
// borderRadius: 5,
|
normal: {
|
||||||
// borderColor: '#fff',
|
label: {
|
||||||
borderWidth: 2,
|
show: true, //开启显示
|
||||||
},
|
position: 'top', //在上方显示
|
||||||
label: {
|
textStyle: {
|
||||||
show: true,
|
//数值样式
|
||||||
// position: 'inside',
|
color: 'black',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
overflow: 'truncate',
|
},
|
||||||
},
|
formatter: '{c}%',
|
||||||
labelLine: {
|
},
|
||||||
show: true,
|
|
||||||
smooth: true,
|
|
||||||
length: 10,
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
itemStyle: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowOffsetX: 0,
|
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 15,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: chartData,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
startAngle: 130,
|
|
||||||
top: 80,
|
|
||||||
radius: ['40%', '51%'],
|
|
||||||
center: ['50%', '50%'],
|
|
||||||
//暂时没有
|
|
||||||
itemStyle: {
|
|
||||||
// borderRadius: 3,
|
|
||||||
// borderColor: '#fff',
|
|
||||||
borderWidth: 2,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
hoverAnimation: false,
|
|
||||||
legendHoverLink: false,
|
|
||||||
// animationn：false,
|
|
||||||
tooltip: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
data: chartData,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
@ -405,6 +324,7 @@
|
||||||
show: true, // 显示数据标签
|
show: true, // 显示数据标签
|
||||||
position: 'top', // 标签位置在柱体顶部
|
position: 'top', // 标签位置在柱体顶部
|
||||||
formatter: '{c}%', // 标签内容为百分比
|
formatter: '{c}%', // 标签内容为百分比
|
||||||
|
fontSize: '10px',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -23,17 +23,6 @@
|
||||||
</a-card>
|
</a-card>
|
||||||
|
|
||||||
<a-card>
|
<a-card>
|
||||||
<!--<template #extra>
|
|
||||||
<div style="display: flex">
|
|
||||||
<div v-if="topCollege != null">
|
|
||||||
<span style="color: red; font-size: 18px; padding-left: 100px"> {{ topCollege }}</span>
|
|
||||||
<span style="font-size: 15px"> 在 </span>
|
|
||||||
<span style="color: red; font-size: 18px"> {{ topBath }} </span>
|
|
||||||
<span style="font-size: 15px"> 批次的四级通过率为：</span>
|
|
||||||
<span style="color: red; font-size: 18px"> {{ sumRate }}%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>-->
|
|
||||||
<div>
|
<div>
|
||||||
<div id="map1" style="width: 100%; height: 400px"></div>
|
<div id="map1" style="width: 100%; height: 400px"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -44,42 +33,60 @@
|
||||||
<a-card style="margin-bottom: 10px">
|
<a-card style="margin-bottom: 10px">
|
||||||
<div style="width: 100%; height: 210px; padding: 10px" class="participate_Piechart" id="participate_Piechart"></div>
|
<div style="width: 100%; height: 210px; padding: 10px" class="participate_Piechart" id="participate_Piechart"></div>
|
||||||
</a-card>
|
</a-card>
|
||||||
<a-card>
|
|
||||||
<div style="width: 100%; height: 210px; padding: 10px" class="pass_Piechart" id="pass_Piechart"></div>
|
<a-card style="height: 268px">
|
||||||
|
<div>
|
||||||
|
<a-table
|
||||||
|
:dataSource="dataSourceCet4"
|
||||||
|
:columns="columns"
|
||||||
|
:pagination="false"
|
||||||
|
bordered
|
||||||
|
class="custom-table"
|
||||||
|
:style="{ fontSize: '12px', color: '#333', marginTop: '-11px' }"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</a-col>
|
</a-col>
|
||||||
</a-row>
|
</a-row>
|
||||||
|
|
||||||
<!-- <div>
|
|
||||||
<a-row :gutter="24">
|
|
||||||
<a-col :xl="24" :style="{ marginBottom: '24px' }">
|
|
||||||
<div class="container">
|
|
||||||
<div style="display: flex;">
|
|
||||||
<span class="title">学院 / 专业四级通过率变化</span>
|
|
||||||
<div v-if="topCollege != null">
|
|
||||||
<span style="color: red; font-size: 18px; padding-left: 100px;"> {{ topCollege }}</span>
|
|
||||||
<span style="font-size: 15px;"> 在 </span>
|
|
||||||
<span style="color: red; font-size: 18px;"> {{ topBath }} </span>
|
|
||||||
<span style="font-size: 15px;"> 批次的四级通过率为：</span>
|
|
||||||
<span style="color: red; font-size: 18px;"> {{ sumRate }}%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="map1" style="width: 100%; height: 600px;"></div>
|
|
||||||
</div>
|
|
||||||
</a-col>
|
|
||||||
</a-row>
|
|
||||||
</div> -->
|
|
||||||
</a-card>
|
</a-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
//import { pagination } from 'mock/_util';
|
||||||
import { defHttp } from '/@/utils/http/axios';
|
import { defHttp } from '/@/utils/http/axios';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
dataSourceCet4: [],
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: '年级',
|
||||||
|
dataIndex: 'grade',
|
||||||
|
key: 'grade',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '参加人数',
|
||||||
|
dataIndex: 'attendNumber',
|
||||||
|
key: 'attendNumber',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '通过人数',
|
||||||
|
dataIndex: 'passNumber',
|
||||||
|
key: 'passNumber',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '通过率',
|
||||||
|
dataIndex: 'passrate',
|
||||||
|
key: 'passrate',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
],
|
||||||
Url: {
|
Url: {
|
||||||
getBatch: '/cet/getBatch',
|
getBatch: '/cet/getBatch',
|
||||||
getCollege: '/cet/getCollege',
|
getCollege: '/cet/getCollege',
|
||||||
|
|
@ -179,6 +186,7 @@
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
|
barMaxWidth: 50, // 设置柱子的最大宽度
|
||||||
data: yData,
|
data: yData,
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
|
|
@ -264,93 +272,122 @@
|
||||||
};
|
};
|
||||||
resultData = await defHttp.get({ url: this.Url.getRate, params });
|
resultData = await defHttp.get({ url: this.Url.getRate, params });
|
||||||
this.sumRate = resultData.sumRate;
|
this.sumRate = resultData.sumRate;
|
||||||
|
|
||||||
console.log('result', resultData);
|
console.log('result', resultData);
|
||||||
|
//表格数据
|
||||||
|
let tableData = [];
|
||||||
|
for (let grade in resultData.gradeData) {
|
||||||
|
tableData.push({
|
||||||
|
grade: grade + '级',
|
||||||
|
attendNumber: resultData.gradeData[grade].allStudent,
|
||||||
|
passNumber: resultData.gradeData[grade].passed,
|
||||||
|
passrate: resultData.gradeData[grade].passRate,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.dataSourceCet4 = tableData; //表格数据
|
||||||
|
console.log(this.dataSourceCet4, 'dataSourceCet4');
|
||||||
} finally {
|
} finally {
|
||||||
this.loading = false;
|
this.loading = false;
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.dataChart(resultData.data);
|
this.dataChart(resultData.data);
|
||||||
this.draPieChart_Pass();
|
//this.draPieChart_Pass();
|
||||||
this.draPieChart_Participate();
|
this.draPieChart_Participate();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
//绘画饼图--cet4通过的数据分析
|
//绘画饼图--该批次每一年级的参加人数，通过人数，通过率表格
|
||||||
draPieChart_Pass() {
|
//draPieChart_Pass() {
|
||||||
//console.log(this.passRatePie);
|
// //console.log(this.passRatePie);
|
||||||
//console.log('piedata', piedata);
|
// //console.log('piedata', piedata);
|
||||||
let myChart = echarts.init(document.getElementById('pass_Piechart'));
|
// let myChart = echarts.init(document.getElementById('pass_Piechart'));
|
||||||
|
|
||||||
let option = {
|
// let option = {
|
||||||
tooltip: {
|
// tooltip: {
|
||||||
trigger: 'item',
|
// trigger: 'item',
|
||||||
conginee: false,
|
// conginee: false,
|
||||||
//字体大小
|
// //字体大小
|
||||||
itemStytle: {
|
// itemStytle: {
|
||||||
fontSize: 100,
|
// fontSize: 100,
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
//title: {
|
// title: {
|
||||||
// text: '学院/专业该批次通过人数饼图',
|
// text: '该批次每一年级的参加人数，通过人数，通过率表格',
|
||||||
// left: 'top',
|
// left: 'top',
|
||||||
// top: '0%',
|
// top: '0%',
|
||||||
// textStyle: {
|
// textStyle: {
|
||||||
// fontSize: 12,
|
// fontSize: 12,
|
||||||
// },
|
// },
|
||||||
//},
|
// },
|
||||||
legend: {
|
// legend: {
|
||||||
top: '5%',
|
// top: '5%',
|
||||||
left: 'center',
|
// left: 'center',
|
||||||
},
|
// },
|
||||||
color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'],
|
// color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'],
|
||||||
|
|
||||||
series: [
|
// series: [
|
||||||
{
|
// {
|
||||||
name: '学院/专业该批次通过人数饼图',
|
// name: '学院/专业该批次通过人数饼图',
|
||||||
type: 'pie',
|
// type: 'pie',
|
||||||
radius: ['0', '100%'],
|
// radius: ['0', '100%'],
|
||||||
top: 80,
|
// top: 80,
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
borderRadius: 5,
|
// borderRadius: 5,
|
||||||
borderColor: '#fff',
|
// borderColor: '#fff',
|
||||||
borderWideth: 2,
|
// borderWideth: 2,
|
||||||
},
|
// },
|
||||||
label: {
|
// label: {
|
||||||
show: true,
|
// show: true,
|
||||||
fontSize: 12,
|
// fontSize: 12,
|
||||||
overflow: 'truncate',
|
// overflow: 'truncate',
|
||||||
},
|
// },
|
||||||
emphasis: {
|
// emphasis: {
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
shadowBlur: 10,
|
// shadowBlur: 10,
|
||||||
shadowOffsetX: 0,
|
// shadowOffsetX: 0,
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
// shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||||
},
|
// },
|
||||||
label: {
|
// label: {
|
||||||
show: true,
|
// show: true,
|
||||||
fontSize: 15,
|
// fontSize: 15,
|
||||||
fontWeight: 'bold',
|
// fontWeight: 'bold',
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
data: [
|
// data: [
|
||||||
{ value: 1048, name: '你好' },
|
// { value: 1048, name: '你好' },
|
||||||
{ value: 735, name: '不好' },
|
// { value: 735, name: '不好' },
|
||||||
{ value: 580, name: '孤寡' },
|
// { value: 580, name: '孤寡' },
|
||||||
{ value: 484, name: '小鸟伏特加' },
|
// { value: 484, name: '小鸟伏特加' },
|
||||||
{ value: 300, name: '喜喜' },
|
// { value: 300, name: '喜喜' },
|
||||||
],
|
// ],
|
||||||
},
|
// },
|
||||||
],
|
// ],
|
||||||
};
|
// };
|
||||||
myChart.setOption(option);
|
// myChart.setOption(option);
|
||||||
},
|
//},
|
||||||
|
|
||||||
//绘画饼图--参与人数数据分析
|
//绘画饼图--该批次每一年级的通过率饼图
|
||||||
draPieChart_Participate() {
|
async draPieChart_Participate() {
|
||||||
//console.log(this.passRatePie);
|
//console.log(this.passRatePie);
|
||||||
//console.log('piedata', piedata);
|
//console.log('piedata', piedata);
|
||||||
let myChart = echarts.init(document.getElementById('participate_Piechart'));
|
let myChart = echarts.init(document.getElementById('participate_Piechart'));
|
||||||
|
|
||||||
|
let queryParams = {
|
||||||
|
batch: this.batch,
|
||||||
|
college: this.collegeMajor,
|
||||||
|
level: 'cet4',
|
||||||
|
};
|
||||||
|
console.log(queryParams, 'queryParams');
|
||||||
|
let url = this.Url.getRate;
|
||||||
|
let result = await defHttp.get({ url: url, params: queryParams });
|
||||||
|
console.log(result, 'result');
|
||||||
|
let chartsData = [];
|
||||||
|
for (let key in result.gradeData) {
|
||||||
|
chartsData.push({
|
||||||
|
name: key + '级',
|
||||||
|
value: result.gradeData[key].passRate,
|
||||||
|
});
|
||||||
|
}
|
||||||
let option = {
|
let option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
|
|
@ -365,32 +402,20 @@
|
||||||
fontSize: 100,
|
fontSize: 100,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// title: {
|
title: {
|
||||||
// text: '学院/专业该批次通过人数饼图',
|
text: '该批次每一年级的通过率饼图',
|
||||||
// left: 'top',
|
left: 'top',
|
||||||
// top: '0%',
|
top: '0%',
|
||||||
// textStyle: {
|
textStyle: {
|
||||||
// fontSize: 12,
|
fontSize: 12,
|
||||||
// },
|
},
|
||||||
// },
|
},
|
||||||
legend: {
|
legend: {
|
||||||
top: '5%',
|
top: '10%',
|
||||||
left: 'center',
|
left: 'center',
|
||||||
// orient: 'vertical',
|
|
||||||
itemGap: 3,
|
itemGap: 3,
|
||||||
selectedMode: true,
|
selectedMode: true,
|
||||||
// inactiveColor: '#ccc',
|
|
||||||
// icon: 'circle',
|
|
||||||
|
|
||||||
// formatter: function (name) {
|
|
||||||
// var value;
|
|
||||||
// for (var i = 0; i < data.length; i++){
|
|
||||||
// if(data[i].name == name){
|
|
||||||
// value = data[i].value;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// return name + ' : ' + Math.round(value / num * 10000) / 100 + "%";
|
|
||||||
// },
|
|
||||||
},
|
},
|
||||||
color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'],
|
color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'],
|
||||||
|
|
||||||
|
|
@ -431,13 +456,7 @@
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: [
|
data: chartsData,
|
||||||
{ value: 1048, name: '你好' },
|
|
||||||
{ value: 735, name: '不好' },
|
|
||||||
{ value: 580, name: '孤寡' },
|
|
||||||
{ value: 484, name: '小鸟伏特加' },
|
|
||||||
{ value: 300, name: '喜喜' },
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
|
|
@ -460,13 +479,7 @@
|
||||||
tooltip: {
|
tooltip: {
|
||||||
show: false,
|
show: false,
|
||||||
},
|
},
|
||||||
data: [
|
data: chartsData,
|
||||||
{ value: 1048, name: '你好' },
|
|
||||||
{ value: 735, name: '不好' },
|
|
||||||
{ value: 580, name: '孤寡' },
|
|
||||||
{ value: 484, name: '小鸟伏特加' },
|
|
||||||
{ value: 300, name: '喜喜' },
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
<template>
|
||||||
|
<div style="background: #ececec; padding-top: 0px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px">
|
||||||
|
<a-card title="英语四级数据导入" :bordered="false">
|
||||||
|
<a-row :gutter="2">
|
||||||
|
<a-col :xl="3" :style="{ marginBottom: '24px' }">
|
||||||
|
<a-space direction="vertical" :size="12">
|
||||||
|
<a-date-picker v-model:value="month" picker="month" />
|
||||||
|
</a-space>
|
||||||
|
</a-col>
|
||||||
|
|
||||||
|
<a-col :xl="5" :style="{ marginBottom: '24px' }">
|
||||||
|
<div class="clearfix">
|
||||||
|
<!-- accept=".dbf" 属性限制文件类型 -->
|
||||||
|
<a-upload :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove">
|
||||||
|
<a-button type="primary">
|
||||||
|
<upload-outlined />
|
||||||
|
导入文件
|
||||||
|
</a-button>
|
||||||
|
</a-upload>
|
||||||
|
<div class="clearfix">
|
||||||
|
<a-button preIcon="ant-design:export-outlined" @click="onExportXls"> 下载模板</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix">
|
||||||
|
<a-button type="primary" :disabled="!canUpload" :loading="uploading" @click="handleUpload">
|
||||||
|
{{ uploading ? 'Uploading' : '确认上传文件' }}
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :xl="1" :style="{ marginBottom: '24px' }" />
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="10">
|
||||||
|
<a-col :xl="24">
|
||||||
|
<a-table :dataSource="dataSourceCet4" :columns="columns" :pagination="false" :loading="loading" bordered class="custom-table" />
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed, onMounted } from 'vue';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
// 批次选择（月份选择器）
|
||||||
|
const month = ref(null);
|
||||||
|
|
||||||
|
// 文件上传部分
|
||||||
|
const fileList = ref([]);
|
||||||
|
const uploading = ref(false);
|
||||||
|
|
||||||
|
// 计算属性：控制上传按钮的可用性
|
||||||
|
const canUpload = computed(() => fileList.value.length > 0 && month.value !== null);
|
||||||
|
|
||||||
|
// 移除文件
|
||||||
|
const handleRemove = (file) => {
|
||||||
|
const index = fileList.value.indexOf(file);
|
||||||
|
const newFileList = fileList.value.slice();
|
||||||
|
newFileList.splice(index, 1);
|
||||||
|
fileList.value = newFileList;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 文件选择前的校验处理
|
||||||
|
const beforeUpload = (file) => {
|
||||||
|
fileList.value = [...fileList.value, file];
|
||||||
|
return false; // 阻止自动上传
|
||||||
|
};
|
||||||
|
// 处理上传逻辑
|
||||||
|
const handleUpload = async () => {
|
||||||
|
const formData = new FormData();
|
||||||
|
fileList.value.forEach((file) => {
|
||||||
|
formData.append('files[]', file);
|
||||||
|
});
|
||||||
|
|
||||||
|
uploading.value = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
let queryParams = {
|
||||||
|
month: month,
|
||||||
|
formData: formData,
|
||||||
|
};
|
||||||
|
const response = await defHttp.post({ url: url, data: queryParams });
|
||||||
|
fileList.value = [];
|
||||||
|
month.value = null; // 上传后清空日期选择
|
||||||
|
message.success('Upload successfully.');
|
||||||
|
} catch (error) {
|
||||||
|
message.error('Upload failed.');
|
||||||
|
} finally {
|
||||||
|
uploading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 定义表格的数据源
|
||||||
|
const dataSourceCet4 = ref([]);
|
||||||
|
// 定义表格的列配置
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '考试批次',
|
||||||
|
dataIndex: 'batch',
|
||||||
|
key: 'batch',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '参加人数',
|
||||||
|
dataIndex: 'attendNumber',
|
||||||
|
key: 'attendNumber',
|
||||||
|
align: 'center',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
//处理表格数据源
|
||||||
|
const fetchData = async () => {
|
||||||
|
loading.value = true; // 开始加载
|
||||||
|
try {
|
||||||
|
const response = await defHttp.get('/api/words');
|
||||||
|
console.log(response, 'response');
|
||||||
|
dataSourceCet4.value = response.data; // 将数据绑定到表格
|
||||||
|
} catch (error) {
|
||||||
|
message.error('Failed to load data.');
|
||||||
|
} finally {
|
||||||
|
loading.value = false; // 加载结束
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 在组件挂载时调用 fetchData
|
||||||
|
onMounted(fetchData);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.clearfix {
|
||||||
|
display: flex;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue