Merge remote-tracking branch 'refs/remotes/origin/feature/1.0版本校领导页面开发' into feature/1.0版本页面优化
# Conflicts: # src/views/cet/universityDashboard.vue
This commit is contained in:
commit
7b47fa447a
|
|
@ -54,6 +54,7 @@
|
|||
|
||||
<script>
|
||||
//import { pagination } from 'mock/_util';
|
||||
import { red } from '@ant-design/colors';
|
||||
import { defHttp } from '/@/utils/http/axios';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
|
|
@ -326,18 +327,31 @@
|
|||
this.participate_Piechartloading = true;
|
||||
this.tableloading = true;
|
||||
let result = await defHttp.get({ url: url, params: queryParams });
|
||||
let totalRate = 0;
|
||||
for (let key in result.gradeData) {
|
||||
totalRate += parseFloat(result.gradeData[key].passRate);
|
||||
}
|
||||
console.log(totalRate, 'totalRate');
|
||||
console.log(result, 'result');
|
||||
let chartsData = [];
|
||||
for (let key in result.gradeData) {
|
||||
chartsData.push({
|
||||
name: key + '级',
|
||||
value: result.gradeData[key].passRate,
|
||||
value: (parseFloat(result.gradeData[key].passRate) / totalRate) * 100,
|
||||
});
|
||||
}
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
conginee: false,
|
||||
formatter: function (params) {
|
||||
return params.name + ': ' + params.value.toFixed(1) + '%';
|
||||
},
|
||||
textStyle: {
|
||||
color: '#ec2e30', // 设置文本颜色
|
||||
fontSize: 14, // 设置字体大小
|
||||
fontWeight: 'bold', // 设置字体加粗
|
||||
},
|
||||
//字体大小
|
||||
itemStytle: {
|
||||
// 设置阴影效果
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<!--<a-cascader v-model:value="collegeMajor" expand-trigger="hover" :options="collegeMajorOptions" change-on-select />-->
|
||||
|
||||
<!-- 主外层容器：包括一级和二级菜单并排 -->
|
||||
<div class="dropdown-wrapper" ref="step1" @blur="loseFocus" tabindex="0">
|
||||
<div class="dropdown-wrapper" @blur="loseFocus" tabindex="0">
|
||||
<div class="dropdown-trigger" @click="toggleDropdown">
|
||||
<span class="trigger-label">{{ selectedLabel || '请选择学院' }}</span>
|
||||
<DownOutlined class="trigger-icon" />
|
||||
|
|
@ -45,8 +45,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<a-select v-model:value="entrydate" ref="step2" style="margin-left: 10px; width: 100px" :options="entrydateOptions" />
|
||||
<a-button style="margin-left: 10px" type="primary" ref="step3" @click="query">查询</a-button>
|
||||
<a-select v-model:value="entrydate" style="margin-left: 10px; width: 100px" :options="entrydateOptions" />
|
||||
<a-button style="margin-left: 10px" type="primary" @click="query">查询</a-button>
|
||||
<div class="stats-container">
|
||||
<span style="padding-left: 240px">{{ totalName }}总人数：{{ total }}</span>
|
||||
<span>累计通过人数: {{ passNumberBottom }}</span>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<a-row :gutter="12">
|
||||
<a-col :xl="14">
|
||||
<div style="padding-left: 10px; min-height: 200px">
|
||||
<a-table size="small" :dataSource="dataSourceCet4" :columns="columns" ref="step4" :pagination="false" bordered :scroll="{ y: 290 }">
|
||||
<a-table size="small" :dataSource="dataSourceCet4" :columns="columns" :pagination="false" bordered :scroll="{ y: 290 }">
|
||||
<template #passRateSlot>
|
||||
累计总通过率
|
||||
<a-tooltip :title="'累计通过人数 / ' + totalName + '总人数'" placement="top">
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
</div>
|
||||
</a-col>
|
||||
<a-col :xl="10">
|
||||
<a-card class="card-with-piechart" ref="step5">
|
||||
<a-card class="card-with-piechart">
|
||||
<div style="width: 100%; height: 200px" class="piechart" id="piechart"> </div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
|
|
@ -82,14 +82,14 @@
|
|||
</div>
|
||||
<div class="bottom-box">
|
||||
<div class="left-side">
|
||||
<a-card :loading="loading" :bordered="false" ref="step6">
|
||||
<a-card :loading="loading" :bordered="false">
|
||||
<div style="width: 100%; height: 350px" id="map2"> </div>
|
||||
</a-card>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<!-- <a-row :gutter="12"> -->
|
||||
<!-- <a-col :xl="16"> -->
|
||||
<a-card :loading="map1loading" ref="step7">
|
||||
<a-card :loading="map1loading">
|
||||
<!-- <div class="query">
|
||||
<span
|
||||
style="font-size: 15px; margin-right: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold">年级:
|
||||
|
|
@ -103,7 +103,6 @@
|
|||
<!-- </a-row> -->
|
||||
</div>
|
||||
</div>
|
||||
<Tour :current="currentStep" :open="stepOpen" :steps="steps" @close="handleOpen(false)" @update:current="updateCurrent" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -111,18 +110,15 @@
|
|||
import * as echarts from 'echarts';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';
|
||||
import { Tour } from 'ant-design-vue'; // 从 ant-design-vue 导入 Tour 组件
|
||||
import { getThirdUserBindByWechat } from '../system/appconfig/ThirdApp.api';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DownOutlined,
|
||||
RightOutlined,
|
||||
Tour,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
stepOpen: false,
|
||||
currentStep: 0,
|
||||
steps: [],
|
||||
activeKey: '1',
|
||||
allCollege: [],
|
||||
showBox: false,
|
||||
|
|
@ -134,6 +130,7 @@
|
|||
checkedOptions: [],
|
||||
collegetab2: [],
|
||||
collegeMajorOptions: [],
|
||||
collegeMajor: [],
|
||||
loading: false,
|
||||
dataSourceCet4: [],
|
||||
dropdownVisible: false,
|
||||
|
|
@ -142,6 +139,99 @@
|
|||
selectedLabel: '全校',
|
||||
currentSubMenu: [],
|
||||
currentSubSubMenu: [],
|
||||
losefocus: false,
|
||||
//测试构造数据
|
||||
//menuData: [
|
||||
// { key: '1', label: '全校' },
|
||||
// { key: '2', label: '专升本' },
|
||||
// {
|
||||
// key: '3',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '4',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '5',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '6',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '7',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '8',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '9',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: '10',
|
||||
// label: '东语学院',
|
||||
// children: [
|
||||
// { key: '3-1', label: '朝鲜语' },
|
||||
// { key: '3-2', label: '日语' },
|
||||
// { key: '3-3', label: '阿拉伯语' },
|
||||
// ],
|
||||
// },
|
||||
//],
|
||||
columns: [
|
||||
{
|
||||
title: '学年',
|
||||
|
|
@ -211,8 +301,10 @@
|
|||
|
||||
visible: false,
|
||||
level: null,
|
||||
college: [],
|
||||
batch: null,
|
||||
entrydateOptions: [],
|
||||
entrydate: [],
|
||||
majorCheckOn: [],
|
||||
//对不同的学院选择的专业进行记忆化
|
||||
lastCollegeMajor: [],
|
||||
|
|
@ -230,6 +322,9 @@
|
|||
passRatePie: [],
|
||||
lineXData: [],
|
||||
lineYData: [],
|
||||
collegeOptions: [],
|
||||
collegeMajorOptions: [],
|
||||
entrydateOptions: [],
|
||||
college: null,
|
||||
entrydate: 2017, //年级选择器
|
||||
//设置默认值为全校
|
||||
|
|
@ -239,7 +334,6 @@
|
|||
topEntrydate: null, //顶部选择器
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getEntrydateAndCollegeData();
|
||||
this.getCollegeMajorData();
|
||||
|
|
@ -247,83 +341,11 @@
|
|||
// this.allQuery();
|
||||
this.getCollegeOptions();
|
||||
this.getEntrydate();
|
||||
this.$nextTick(() => {
|
||||
this.initStep();
|
||||
});
|
||||
this.isFirstAsk();
|
||||
},
|
||||
methods: {
|
||||
isFirstAsk() {
|
||||
const isFirstAsk = localStorage.getItem('isFirstAsk');
|
||||
// 如果是第一次访问（isFirstAsk 为空或为 true）
|
||||
//测试引导功能放开注释
|
||||
//this.handleOpen(true);
|
||||
if (isFirstAsk === null || isFirstAsk === 'true') {
|
||||
this.handleOpen(true);
|
||||
// 将 isFirstAsk 存入 localStorage，确保下一次不会再执行
|
||||
localStorage.setItem('isFirstAsk', 'false');
|
||||
}
|
||||
},
|
||||
initStep() {
|
||||
console.log('initstep');
|
||||
this.steps = [
|
||||
{
|
||||
title: '选择学院/专业',
|
||||
description: '请点击选择框选择学院和专业',
|
||||
// Vue 2 中可以通过传入一个渲染函数来生成封面元素
|
||||
//cover: function (h) {
|
||||
// return h('img', {
|
||||
// attrs: {
|
||||
// alt: 'tour.png',
|
||||
// src: 'https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png'
|
||||
// }
|
||||
// });
|
||||
//},
|
||||
// 通过箭头函数保持 this 指向 Vue 实例，从而获取 ref
|
||||
target: () => this.$refs.step1,
|
||||
},
|
||||
{
|
||||
title: '选择年级',
|
||||
description: '请点击选择框选择年级',
|
||||
target: () => this.$refs.step2.$el,
|
||||
},
|
||||
{
|
||||
title: '确认查询',
|
||||
description: '请点击查询按钮进行查询并绘制图表',
|
||||
target: () => this.$refs.step3.$el,
|
||||
},
|
||||
{
|
||||
title: '表单介绍',
|
||||
description: '该学院/专业该年级各个批次的成绩情况',
|
||||
target: () => this.$refs.step4.$el,
|
||||
},
|
||||
{
|
||||
title: '图表介绍',
|
||||
description: '该学院/专业该年级在不同年级通过考试的人数占比',
|
||||
target: () => this.$refs.step5.$el,
|
||||
},
|
||||
{
|
||||
title: '图表介绍',
|
||||
description: '该学院/专业该年级各个批次的通过率折线图',
|
||||
target: () => this.$refs.step6.$el,
|
||||
},
|
||||
{
|
||||
title: '图表介绍',
|
||||
description: '本年级全校各学院通过率排名，点击学院柱状图可查看该学院的其他信息',
|
||||
target: () => this.$refs.step7.$el,
|
||||
},
|
||||
];
|
||||
},
|
||||
loseFocus() {
|
||||
this.dropdownVisible = false;
|
||||
},
|
||||
handleOpen(val) {
|
||||
console.log('handleOpen');
|
||||
this.stepOpen = val;
|
||||
},
|
||||
updateCurrent(val) {
|
||||
this.currentStep = val;
|
||||
},
|
||||
toggleDropdown() {
|
||||
this.dropdownVisible = !this.dropdownVisible;
|
||||
this.subMenuVisible = false;
|
||||
|
|
@ -334,8 +356,6 @@
|
|||
const parent = this.collegeMajorOptions.find((p) => p.children && p.children.some((child) => child.value === item.value));
|
||||
//console.log('1111', parent.label);
|
||||
console.log('2222', this.collegeMajorOptions);
|
||||
//清空collegeMajor
|
||||
this.collegeMajor = [];
|
||||
if (parent) {
|
||||
this.selectedLabel = `${parent.label} / ${item.label}`;
|
||||
this.collegeMajor[0] = parent.value;
|
||||
|
|
@ -401,25 +421,25 @@
|
|||
}
|
||||
},
|
||||
//获取学院专业级联数据
|
||||
//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.collegeMajor = ['东语学院'];
|
||||
// console.log(this.collegeMajor, 'collegeMajor');
|
||||
// console.log(this.collegeMajorOptions, 'collegeMajorOptions1');
|
||||
//},
|
||||
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.collegeMajor = ['东语学院'];
|
||||
console.log(this.collegeMajor, 'collegeMajor');
|
||||
console.log(this.collegeMajorOptions, 'collegeMajorOptions1');
|
||||
},
|
||||
getCollegeOptions() {
|
||||
defHttp.get({ url: this.Url.getCollege }).then((res) => {
|
||||
this.collegeOptions = res.colleges;
|
||||
|
|
@ -442,11 +462,14 @@
|
|||
this.map2loading = true;
|
||||
const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
|
||||
this.entrydateOptions = getEntrydate.entrydates;
|
||||
|
||||
const name = ['西语学院'];
|
||||
},
|
||||
|
||||
// 各专业通过率
|
||||
async majorPassRate() {
|
||||
this.map3loading = true;
|
||||
const name = '西语学院';
|
||||
},
|
||||
dataChart(data, tab) {
|
||||
let seriesData = [];
|
||||
|
|
@ -500,17 +523,30 @@
|
|||
'#FAF0E6 ',
|
||||
];
|
||||
let j = 0;
|
||||
|
||||
for (let i in data) {
|
||||
//过滤掉不需要的数据
|
||||
let filteredData = [];
|
||||
if (this.selectedLabel === '全校（不含艺体美外语）') {
|
||||
for (let i in data) {
|
||||
// 过滤函数
|
||||
filteredData[i] = data[i].filter((college) => {
|
||||
return !['体育科学学院', '美术学院', '音乐学院'].includes(college.college);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
filteredData = data;
|
||||
}
|
||||
console.log('filteredData', filteredData);
|
||||
for (let i in filteredData) {
|
||||
xData = [];
|
||||
let yData = [];
|
||||
for (let key in data[i]) {
|
||||
xData.push(data[i][key].college);
|
||||
for (let key in filteredData[i]) {
|
||||
xData.push(filteredData[i][key].college);
|
||||
// 将数据转换为百分比（加上%）
|
||||
yData.push(data[i][key].passRate);
|
||||
yData.push(filteredData[i][key].passRate);
|
||||
}
|
||||
|
||||
console.log('xData', xData);
|
||||
xData = xData.map((label) => label.split('').join('\n')); //将x轴竖着展示
|
||||
|
||||
seriesData.push({
|
||||
name: i + '级累计总通过率',
|
||||
type: 'bar',
|
||||
|
|
@ -866,19 +902,6 @@
|
|||
}
|
||||
|
||||
console.log('tableData', tableData);
|
||||
tableData.forEach((item) => {
|
||||
const year = item.batch.substring(0, 4);
|
||||
console.log('year', year);
|
||||
if (item.batch.includes('12-01')) {
|
||||
item.batch = `${year}冬季`;
|
||||
} else if (item.batch.includes('06-01')) {
|
||||
item.batch = `${year}夏季`;
|
||||
} else if (item.batch.includes('09-01')) {
|
||||
item.batch = `${year}夏季`;
|
||||
} else if (item.batch.includes('03-01')) {
|
||||
item.batch = `${year}春季`;
|
||||
}
|
||||
});
|
||||
this.dataSourceCet4 = tableData; //表格数据
|
||||
this.total = result.total; //总人数
|
||||
this.totalName = result.totalName; //总人数名称
|
||||
|
|
@ -1145,7 +1168,7 @@
|
|||
display: inline-block;
|
||||
}
|
||||
.dropdown-trigger {
|
||||
width: 160px; /* ✅ 设置选择框宽度 */
|
||||
width: 190px; /* ✅ 设置选择框宽度 */
|
||||
height: 32px;
|
||||
border: 1px solid #ccc; /* ✅ 添加边框 */
|
||||
padding: 6px 12px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue