feature/1.0版本页面优化 #1
|
|
@ -22,16 +22,6 @@
|
|||
</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 id="map1" style="width: 100%; height: 400px"></div>
|
||||
</div>
|
||||
|
|
@ -48,25 +38,6 @@
|
|||
</a-card>
|
||||
</a-col>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -227,7 +198,7 @@
|
|||
grid: {
|
||||
left: '20%', // 增加左边距，可以根据需要调整
|
||||
right: '5%', // 右边距
|
||||
top: '10%', // 上边距
|
||||
top: '15%', // 上边距
|
||||
bottom: '10%', // 下边距
|
||||
},
|
||||
title: {
|
||||
|
|
@ -285,158 +256,6 @@
|
|||
});
|
||||
},
|
||||
|
||||
////绘画饼图--最新批次每一年级的通过率饼图
|
||||
//async draPieChart_Participate() {
|
||||
// console.log(this.collegeMajor, 'collegeMajor');
|
||||
// let college = this.collegeMajor[0];
|
||||
// let major = this.collegeMajor[1];
|
||||
// console.log(college, major, 'college major');
|
||||
|
||||
// let myChart = echarts.init(document.getElementById('participate_Piechart'));
|
||||
|
||||
// let queryParams = {
|
||||
// college: college,
|
||||
// major: major,
|
||||
// level: 'cet4',
|
||||
// };
|
||||
// let url = this.Url.getRateByMajorAndLastestBatch;
|
||||
// console.log(queryParams, 'queryParams');
|
||||
|
||||
// let result = await defHttp.post({ url: url, data: queryParams });
|
||||
|
||||
// if (!result) {
|
||||
// return;
|
||||
// }
|
||||
// console.log(result.data, 'result');
|
||||
|
||||
// let titleText = major ? `${college} / ${major}专业 最新批次通过人数饼图` : `${college} 最新批次通过人数饼图`;
|
||||
|
||||
// // 使用 API 返回的数据填充饼图
|
||||
// let chartData = [];
|
||||
|
||||
// for (let key in result.data) {
|
||||
// chartData.push({
|
||||
// name: key + '级',
|
||||
// value: result.data[key].passRate,
|
||||
// });
|
||||
// }
|
||||
// console.log(chartData, '123');
|
||||
// let option = {
|
||||
// tooltip: {
|
||||
// trigger: 'item',
|
||||
// //conginee: false,
|
||||
// //字体大小
|
||||
// itemStytle: {
|
||||
// // 设置阴影效果
|
||||
// shadowBlur: 10, // 阴影模糊大小
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色
|
||||
// shadowOffsetX: 5, // 阴影水平方向偏移
|
||||
// shadowOffsetY: 5, // 阴影垂直方向偏移
|
||||
// fontSize: 100,
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: '最新批次每一年级的通过率饼图',
|
||||
// left: 'top',
|
||||
// top: '0%',
|
||||
// textStyle: {
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// legend: {
|
||||
// top: '15%',
|
||||
// left: 'center',
|
||||
// // orient: 'vertical',
|
||||
// itemGap: 3,
|
||||
// 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: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'],
|
||||
// series: [
|
||||
// {
|
||||
// name: titleText,
|
||||
// type: 'pie',
|
||||
// radius: ['50%', '100%'],
|
||||
// center: ['50%', '50%'],
|
||||
// startAngle: 130,
|
||||
// top: 80,
|
||||
// //暂时没有
|
||||
// itemStyle: {
|
||||
// // borderRadius: 5,
|
||||
// // borderColor: '#fff',
|
||||
// borderWidth: 2,
|
||||
// },
|
||||
// label: {
|
||||
// show: true,
|
||||
// // position: 'inside',
|
||||
// fontSize: 12,
|
||||
// overflow: 'truncate',
|
||||
// },
|
||||
// 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,
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
// myChart.setOption(option);
|
||||
// myChart.dispatchAction({
|
||||
// type: 'highlight',
|
||||
// seriesIndex: 1,
|
||||
// });
|
||||
// window.addEventListener('resize', function () {
|
||||
// myChart.resize();
|
||||
// });
|
||||
//},
|
||||
|
||||
//绘画饼图--学院/专业每个年级的通过率柱状图
|
||||
async draPieChart_Pass() {
|
||||
//console.log(this.passRatePie);
|
||||
|
|
@ -505,6 +324,7 @@
|
|||
show: true, // 显示数据标签
|
||||
position: 'top', // 标签位置在柱体顶部
|
||||
formatter: '{c}%', // 标签内容为百分比
|
||||
fontSize: '10px',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -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