From 80a240675dd1ce6e670214fcd0dee448934d20be Mon Sep 17 00:00:00 2001 From: Xubx <1827135378@qq.com> Date: Fri, 11 Oct 2024 15:29:09 +0800 Subject: [PATCH 01/16] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80?= =?UTF-8?q?=E6=94=B9=E8=BF=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cet/cet-ana-1.vue | 1189 +++++++++-------- src/views/cet/cet-ana-2.vue | 597 ++++++--- src/views/cet/cet-ana-3.vue | 675 +++++++--- src/views/cet/cet-ana-college.vue | 1640 +++++++++++------------- src/views/dashboard/Analysis/index.vue | 630 ++++----- 5 files changed, 2593 insertions(+), 2138 deletions(-) diff --git a/src/views/cet/cet-ana-1.vue b/src/views/cet/cet-ana-1.vue index cd8e35d..dfaa817 100644 --- a/src/views/cet/cet-ana-1.vue +++ b/src/views/cet/cet-ana-1.vue @@ -1,300 +1,363 @@ diff --git a/src/views/cet/cet-ana-2.vue b/src/views/cet/cet-ana-2.vue index 4b33473..44b956d 100644 --- a/src/views/cet/cet-ana-2.vue +++ b/src/views/cet/cet-ana-2.vue @@ -6,7 +6,50 @@ 查询 -
+ + + + + +
+
+ 该数据为 + {{ topCollege }} + / {{ topMajor }} + 的四级通过率变化趋势 +
+
+ + + + +
+
+
+ + + + + +
+ + + +
+ + + + +
diff --git a/src/views/cet/cet-ana-3.vue b/src/views/cet/cet-ana-3.vue index 0670cee..50648a5 100644 --- a/src/views/cet/cet-ana-3.vue +++ b/src/views/cet/cet-ana-3.vue @@ -1,13 +1,56 @@ \ No newline at end of file + .title { + font-size: 20px; + color: rgb(8, 8, 8); + font-weight: bold; + } + .tip { + margin-bottom: 10px; + background-color: #d0e5fe; + opacity: 0.9; + } + diff --git a/src/views/cet/cet-ana-college.vue b/src/views/cet/cet-ana-college.vue index e4a4be3..788193a 100644 --- a/src/views/cet/cet-ana-college.vue +++ b/src/views/cet/cet-ana-college.vue @@ -1,801 +1,448 @@ diff --git a/src/views/dashboard/Analysis/index.vue b/src/views/dashboard/Analysis/index.vue index a4d993f..ddb1b60 100644 --- a/src/views/dashboard/Analysis/index.vue +++ b/src/views/dashboard/Analysis/index.vue @@ -3,42 +3,43 @@ - + -
-
- 当前数据为 - {{ topCollege }} - / {{ topMajor }} - 的 - {{ topEntrydate }} - 级数据 +
+
+ 当前数据为 + {{ topCollege }} + / {{ topMajor }} + 的 + {{ topEntrydate }} + 级数据
- - - \ No newline at end of file + -- 2.41.0 From ccd3305924eb8a43b47d64c88724b73023eb2d33 Mon Sep 17 00:00:00 2001 From: Xubx <1827135378@qq.com> Date: Thu, 17 Oct 2024 14:08:39 +0800 Subject: [PATCH 03/16] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E4=B8=8E=E6=8C=89?= =?UTF-8?q?=E4=B8=93=E4=B8=9A=E7=BB=B4=E5=BA=A6=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cet/cet-ana-major.vue | 1492 +++++++++++------------- src/views/dashboard/Analysis/index.vue | 48 +- 2 files changed, 714 insertions(+), 826 deletions(-) diff --git a/src/views/cet/cet-ana-major.vue b/src/views/cet/cet-ana-major.vue index 6d0d60a..db9eecd 100644 --- a/src/views/cet/cet-ana-major.vue +++ b/src/views/cet/cet-ana-major.vue @@ -59,10 +59,15 @@ :options="entrydateOptions"> 查询 --> - - + +
-
+
+
+ + +
+
@@ -71,732 +76,369 @@ diff --git a/src/views/dashboard/Analysis/index.vue b/src/views/dashboard/Analysis/index.vue index ddb1b60..c265d73 100644 --- a/src/views/dashboard/Analysis/index.vue +++ b/src/views/dashboard/Analysis/index.vue @@ -113,6 +113,8 @@ passNumberBottom: 0, passRateBottom: 0, passRatePie: [], + lineXData: [], + lineYData: [], collegeOptions: [], collegeMajorOptions: [], entrydateOptions: [], @@ -129,7 +131,7 @@ this.getEntrydateAndCollegeData(); this.getCollegeMajorData(); this.query(); - this.map2Chart(); + //this.map2Chart(); }, methods: { // 获取年级和学院数据 @@ -201,8 +203,12 @@ passRate['大四学年'] = result.cet4['大四学年']; } result.cet4 = passRate; + this.lineXData = []; + this.lineYData = []; for (let grade in result.cet4) { result.cet4[grade].forEach((item) => { + this.lineXData.push(item.batch); + this.lineYData.push((item.batchpassrate * 100).toFixed(1)); if (index % 2 == 0) { piedata.push({ value: parseFloat(item.gradepassrate - passrate).toFixed(3), name: grade + '时通过' }); passrate = parseFloat(item.gradepassrate).toFixed(3); @@ -232,6 +238,7 @@ piedata.push({ value: (1 - passrate).toFixed(3), name: '未通过' }); //外置饼图 setTimeout(() => { this.drawPieChart(piedata); + this.map2Chart(); }, 100); // this.drawPieChart(); } finally { @@ -253,7 +260,26 @@ }, }, tooltip: { - trigger: 'item', + trigger: 'axis', + axisPointer: { + type: 'shadow', + }, + formatter: function (params) { + return ( + params[0].name + + '
' + + '' + + '' + + '' + + '
' + + params[0].marker + + '' + + '    ' + + params[0].value + + '%' + + '
' + ); + }, }, grid: { top: '50px', @@ -263,15 +289,29 @@ }, xAxis: { type: 'category', - data: ['2017-12-01', '2017-12-01', '2017-12-01', '2017-12-01', '2017-12-01'], + data: this.lineXData, }, yAxis: { type: 'value', }, series: [ { - data: [150, 230, 224, 218, 135], + data: this.lineYData, type: 'line', + itemStyle: { + normal: { + label: { + show: true, //开启显示 + position: 'top', //在上方显示 + textStyle: { + //数值样式 + color: 'black', + fontSize: 12, + }, + formatter: '{c}%', + }, + }, + }, }, ], }; -- 2.41.0 From aaedf72cf355a9cc33dd74dfb1dd21ef5b0ab0c9 Mon Sep 17 00:00:00 2001 From: Xubx <1827135378@qq.com> Date: Thu, 17 Oct 2024 14:19:04 +0800 Subject: [PATCH 04/16] =?UTF-8?q?=E5=90=88=E5=B9=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cet/cet-ana-1.vue | 187 ++++++++- src/views/cet/cet-ana-2.vue | 275 ++++++++----- .../cet/cet-location/CetLocationList.vue | 373 +++++++++--------- 3 files changed, 544 insertions(+), 291 deletions(-) diff --git a/src/views/cet/cet-ana-1.vue b/src/views/cet/cet-ana-1.vue index dfaa817..311b5f1 100644 --- a/src/views/cet/cet-ana-1.vue +++ b/src/views/cet/cet-ana-1.vue @@ -67,6 +67,10 @@ getCollegeRate: '/cet/getRateByCollege', getAllRate: '/cet/getAllRate', getCollegeMajor: '/cet/getCollegeMajor', + + getMajor: '/cet/getMajorByCollege', + getMajorRate: '/cet/getRateByMajor', + getRateByMajor: '/cet/getRateByMajor', }, map1loading: false, @@ -114,6 +118,8 @@ this.oneentrydate = '2017'; } this.query(query, college, [this.oneentrydate]); + this.majorPassRate(); + this.gradePassRate(); }, async majorQuery() { if (this.majorentrydate.length == 0) { @@ -254,32 +260,108 @@ }; myChart.setOption(collegeOption); }, + // 各专业通过率 - majorPassRate() { + async majorPassRate() { var myChart = echarts.init(document.getElementById('map3')); - var option = { + const name = '西语学院'; + + //let entrydate = this.oneentrydate.map((item) => item.value); + //console.log(entrydata, 'entrydata'); + + let queryParams = { + college: [[name]], + entrydate: [this.oneentrydate], + level: 'cet4', + }; + let url = this.Url.getMajorRate; + console.log(queryParams, 'queryParams'); + + let result = await defHttp.post({ url: url, data: queryParams }); + + console.log(myChart, 'mychart'); + if (!result) { + return; + } + console.log(result.data, 'result'); + + //result = result.data[name]; + // 遍历 result.data 中的所有专业 + const majors = Object.keys(result.data); // 获取所有专业名称 + const passRates = majors.map((major) => { + const entries = result.data[major]; + return entries.length > 0 ? parseFloat(entries[0].passRate) : 0; // 获取通过率 + }); + let xData = majors.map((label) => label.split('').join('\n')); //将x轴竖着展示 + + var majorOption = { + tooltip: { + trigger: 'item', + conginee: false, + //字体大小 + itemStytle: { + fontSize: 100, + }, + formatter: function (params) { + // 在默认格式基础上添加 % + return `${params.marker}${params.name} ${params.value}%`; + }, + }, title: { - text: '西语学院各专业四级通过率', + text: name + '各专业四级通过率', textStyle: { fontSize: 14, }, }, xAxis: { type: 'category', - data: ['英语', '翻译', '法语', '葡萄牙语', '西班牙语'], + data: xData, + axisLabel: { + interval: 0, //代表显示所有x轴标签显示 + //rotate: -10, //代表倾斜30度显示 + }, + //data: result.map((item) => item.major), + //data: ['英语', '翻译', '法语', '葡萄牙语', '西班牙语'], }, yAxis: { type: 'value', }, series: [ { - data: [200, 150, 80, 70, 110, 130], + label: { + show: true, + fontSize: 14, + overflow: 'truncate', + position: 'top', + formatter: function (params) { + // 在标签文本后面添加百分号 + return params.value + '%'; + }, + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)', + }, + //鼠标进入时的标签 + label: { + show: false, + fontSize: 14, + fontWeight: 'bold', + }, + }, + data: passRates, + //data: result.map((item) => item.passRate), + //data: [200, 150, 80, 70, 110, 130], type: 'bar', }, ], + animationDurationUpdate: 500, }; - myChart.setOption(option); + myChart.setOption(majorOption); }, + dataChart(data, tab) { let seriesData = []; let xData = []; @@ -531,6 +613,7 @@ }, ]; myChart.setOption(option, true); + // 使用刚指定的配置项和数据显示图表。 myChart.on('click', async (params) => { let name = params.name; @@ -620,6 +703,98 @@ // this.college = [params]; // this.query(tab, this.college, this.entrydate); + + //点击事件中的个专业四级通过率 + let querMajorParam = { + college: [[name]], + entrydate: [this.oneentrydate], + level: 'cet4', + }; + let urlMajor = this.Url.getMajorRate; + console.log(querMajorParam, 'querMajorParam'); + + let resultMajor = await defHttp.post({ url: urlMajor, data: querMajorParam }); + + console.log(myChart, 'mychart'); + if (!resultMajor) { + return; + } + console.log(resultMajor.data, 'resultMajor'); + + //result = result.data[name]; + // 遍历 result.data 中的所有专业 + const majors = Object.keys(resultMajor.data); // 获取所有专业名称 + const passRates = majors.map((major) => { + const entries = resultMajor.data[major]; + return entries.length > 0 ? parseFloat(entries[0].passRate) : 0; // 获取通过率 + }); + xData = majors.map((label) => label.split('').join('\n')); //将x轴竖着展示 + + var majorOption = { + tooltip: { + trigger: 'item', + conginee: false, + //字体大小 + itemStytle: { + fontSize: 100, + }, + }, + title: { + text: name + '各专业四级通过率', + textStyle: { + fontSize: 14, + }, + }, + xAxis: { + type: 'category', + data: xData, + axisLabel: { + interval: 0, //代表显示所有x轴标签显示 + //rotate: -10, //代表倾斜30度显示 + }, + //data: result.map((item) => item.major), + //data: ['英语', '翻译', '法语', '葡萄牙语', '西班牙语'], + }, + yAxis: { + type: 'value', + }, + series: [ + { + //显示时的标签 + label: { + show: true, + fontSize: 14, + overflow: 'truncate', + position: 'top', + formatter: function (params) { + // 在标签文本后面添加百分号 + return params.value + '%'; + }, + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)', + }, + //鼠标进入时的标签 + label: { + show: false, + fontSize: 14, + fontWeight: 'bold', + }, + }, + data: passRates, + //data: result.map((item) => item.passRate), + //data: [200, 150, 80, 70, 110, 130], + type: 'bar', + }, + ], + animationDurationUpdate: 500, + }; + console.log(majorOption, 'majorOption'); + var map3Chart = echarts.init(document.getElementById('map3')); + map3Chart.setOption(majorOption, true); } }); }, diff --git a/src/views/cet/cet-ana-2.vue b/src/views/cet/cet-ana-2.vue index 44b956d..822adaf 100644 --- a/src/views/cet/cet-ana-2.vue +++ b/src/views/cet/cet-ana-2.vue @@ -83,6 +83,9 @@ getCollege: '/cet/getCollege', getRate: '/cet/getRateByAllBatch', getCollegeMajor: '/cet/getCollegeMajor', + getRateByMajor: '/cet/getgetRateByMajor', + getRateByMajorAndLastestBatch: '/cet/getRateByMajorAndLastestBatch', + getRateByEntryDate: '/cet/getRateByEntryDate', }, loading: false, collegeOptions: [], @@ -182,86 +185,39 @@ myChart.setOption(option); }, - //绘画饼图--每个批次通过-数据分析 - draPieChart_Pass() { - //console.log(this.passRatePie); - //console.log('piedata', piedata); - let myChart = echarts.init(document.getElementById('pass_Piechart')); + //绘画饼图--最新批次每一年级的通过率饼图 + 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 option = { - tooltip: { - trigger: '', - conginee: false, - //字体大小 - itemStytle: { - fontSize: 100, - }, - }, - title: { - //text: '学院/专业每个批次通过人数饼图', - left: 'left', - top: '0%', - textStyle: { - fontSize: 14, - }, - }, - legend: { - top: '5%', - left: 'center', - }, - color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], - - series: [ - { - name: '学院/专业每个批次通过人数饼图', - type: 'pie', - radius: ['0', '100%'], - top: 80, - itemStyle: { - borderRadius: 5, - borderColor: '#fff', - borderWideth: 2, - }, - label: { - show: true, - fontSize: 14, - overflow: 'truncate', - }, - emphasis: { - itemStyle: { - shadowBlur: 10, - shadowOffsetX: 0, - shadowColor: 'rgba(0, 0, 0, 0.5)', - }, - label: { - show: true, - fontSize: 15, - fontWeight: 'bold', - }, - }, - data: [ - { value: 1048, name: '计算机' }, - { value: 735, name: '东语' }, - { value: 580, name: '物理' }, - { value: 484, name: '大数据' }, - { value: 300, name: '树莓' }, - ], - }, - ], - }; - myChart.setOption(option); - }, - - //绘画饼图--每个批次参与人数-数据分析 - draPieChart_Participate() { - //console.log(this.passRatePie); - //console.log('piedata', piedata); 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'); + + // 使用 API 返回的数据填充饼图 + let chartData = result.data.map((item) => ({ + name: item.entryDate + '级', + value: item.passRate, + })); let option = { tooltip: { trigger: 'item', - conginee: false, + //conginee: false, //字体大小 itemStytle: { // 设置阴影效果 @@ -272,14 +228,14 @@ fontSize: 100, }, }, - // title: { - // text: '学院/专业该批次通过人数饼图', - // left: 'top', - // top: '0%', - // textStyle: { - // fontSize: 12, - // }, - // }, + title: { + text: '最新批次每一年级的通过率饼图', + left: 'top', + top: '0%', + textStyle: { + fontSize: 12, + }, + }, legend: { top: '5%', left: 'center', @@ -302,7 +258,7 @@ color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], series: [ { - name: '学院/专业该批次通过人数饼图', + name: college + '/' + major + '该批次通过人数饼图', type: 'pie', radius: ['50%', '100%'], center: ['50%', '50%'], @@ -337,13 +293,7 @@ fontWeight: 'bold', }, }, - data: [ - { value: 1048, name: '计算机' }, - { value: 735, name: '东语' }, - { value: 580, name: '物理' }, - { value: 484, name: '大数据' }, - { value: 300, name: '树莓' }, - ], + data: chartData, }, { type: 'pie', @@ -366,13 +316,7 @@ tooltip: { show: false, }, - data: [ - { value: 1048, name: '计算机' }, - { value: 735, name: '东语' }, - { value: 580, name: '物理' }, - { value: 484, name: '大数据' }, - { value: 300, name: '树莓' }, - ], + data: chartData, }, ], }; @@ -386,6 +330,142 @@ }); }, + //绘画饼图--学院/专业每个年级的通过率柱状图 + async draPieChart_Pass() { + //console.log(this.passRatePie); + //console.log('piedata', piedata); + let myChart = echarts.init(document.getElementById('pass_Piechart')); + let college = this.collegeMajor[0]; + let major = this.collegeMajor[1]; + let queryParams = { + college: college, + major: major, + level: 'cet4', + }; + let url = this.Url.getRateByEntryDate; + console.log(queryParams, 'queryParams'); + let result = await defHttp.post({ url: url, data: queryParams }); + if (!result) { + return; + } + console.log(result, 'result'); + // 从 result 提取数据 + let xData = result.data.map((item) => item.entryDate); // 用于 X 轴 + let values = result.data.map((item) => item.passRate); // 用于柱状图的数据 + console.log(xData, values, 'xData values'); + let option = { + grid: { + left: '15%', // 调整左边距，向右移动 + top: '20%', // 调整上边距，向下移动 + right: '10%', // 可根据需要调整右边距 + bottom: '10%', // 可根据需要调整底边距 + }, + tooltip: { + trigger: 'item', + formatter: function (params) { + // 在默认格式基础上添加 % + return `${params.marker}${params.name} ${params.value}%`; + }, + }, + title: { + text: college + '/' + '每个年级的通过率柱状图', + left: 'left', + top: '0%', + textStyle: { + fontSize: 14, + }, + }, + xAxis: { + type: 'category', + data: xData, + }, + yAxis: { + type: 'value', + axisLabel: { + formatter: '{value}%', // Y 轴显示百分比符号 + }, + }, + series: [ + { + data: values, + type: 'bar', + showBackground: true, + backgroundStyle: { + color: 'rgba(180, 180, 180, 0.2)', + }, + label: { + show: true, // 显示数据标签 + position: 'top', // 标签位置在柱体顶部 + formatter: '{c}%', // 标签内容为百分比 + }, + }, + ], + }; + + //let option = { + // tooltip: { + // trigger: 'item', + // conginee: false, + // //字体大小 + // itemStytle: { + // fontSize: 100, + // }, + // }, + // title: { + // text: '学院/专业每个年级的通过率柱状图', + // left: 'left', + // top: '0%', + // textStyle: { + // fontSize: 14, + // }, + // }, + // legend: { + // top: '5%', + // left: 'center', + // }, + // color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], + + // series: [ + // { + // name: '学院/专业每个批次通过人数饼图', + // type: 'pie', + // radius: ['0', '100%'], + // top: 80, + // itemStyle: { + // borderRadius: 5, + // borderColor: '#fff', + // borderWideth: 2, + // }, + // label: { + // show: true, + // fontSize: 14, + // overflow: 'truncate', + // }, + // emphasis: { + // itemStyle: { + // shadowBlur: 10, + // shadowOffsetX: 0, + // shadowColor: 'rgba(0, 0, 0, 0.5)', + // }, + // label: { + // show: true, + // fontSize: 15, + // fontWeight: 'bold', + // }, + // }, + // data: [ + // { value: 1048, name: '计算机' }, + // { value: 735, name: '东语' }, + // { value: 580, name: '物理' }, + // { value: 484, name: '大数据' }, + // { value: 300, name: '树莓' }, + // ], + // }, + // ], + //}; + myChart.setOption(option); + }, + // 获取批次数据 async getBatch() { const getBatch = await defHttp.get({ url: this.Url.getBatch }); @@ -440,6 +520,7 @@ level: 'cet4', }; data = await defHttp.get({ url: this.Url.getRate, params }); + console.log(data, 'data'); } finally { this.loading = false; this.$nextTick(() => { diff --git a/src/views/cet/cet-location/CetLocationList.vue b/src/views/cet/cet-location/CetLocationList.vue index cd012b1..9b5064a 100644 --- a/src/views/cet/cet-location/CetLocationList.vue +++ b/src/views/cet/cet-location/CetLocationList.vue @@ -1,206 +1,203 @@ - \ No newline at end of file + -- 2.41.0 From dd0090a82641a4391c9557f9fabc61f22024c29d Mon Sep 17 00:00:00 2001 From: Xubx <1827135378@qq.com> Date: Thu, 17 Oct 2024 14:20:31 +0800 Subject: [PATCH 05/16] =?UTF-8?q?=E5=90=88=E5=B9=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cet/cet-ana-major.vue | 208 -------------------------------- 1 file changed, 208 deletions(-) diff --git a/src/views/cet/cet-ana-major.vue b/src/views/cet/cet-ana-major.vue index 61cbc30..db9eecd 100644 --- a/src/views/cet/cet-ana-major.vue +++ b/src/views/cet/cet-ana-major.vue @@ -79,37 +79,7 @@ import { defHttp } from '/@/utils/http/axios'; import * as echarts from 'echarts'; import { message } from 'ant-design-vue'; - import { defHttp } from '/@/utils/http/axios'; - import * as echarts from 'echarts'; - import { message } from 'ant-design-vue'; - export default { - data() { - return { - activeKey: '1', - allCollege: [], - showBox: false, - showGroup: false, - oneentrydate: null, - collegeentrydate: [], - majorentrydate: [], - lastMajorEntrydate: [], - checkedOptions: [], - collegetab2: [], - collegeMajorOptions: [], - collegeMajor: [], - Url: { - getBatch: '/cet/getBatch', - getEntrydate: '/cet/getEntrydate', - getCollege: '/cet/getCollege', - getCollegeRate: '/cet/getRateByCollege', - getAllRate: '/cet/getAllRate', - getCollegeMajor: '/cet/getCollegeMajor', - getRateByMajor: '/cet/getRateByMajor', - }, - tab1loading: false, - tab2loading: false, - tab3loading: false, export default { data() { return { @@ -233,26 +203,6 @@ } }, - //获取学院专业级联数据 - 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 }); @@ -274,20 +224,11 @@ console.log(this.collegeMajorOptions, 'collegeMajorOptions1'); }, - getCollegeOptions() { - defHttp.get({ url: this.Url.getCollege }).then((res) => { - this.collegeOptions = res.colleges; - // 手动添加一个全校字段 getCollegeOptions() { defHttp.get({ url: this.Url.getCollege }).then((res) => { this.collegeOptions = res.colleges; // 手动添加一个全校字段 - // this.collegeOptions.unshift({ value: '全校', label: '全校' }); - // this.collegeOptions.forEach(option => { - // if (option.value !== '全校') { - // option.disabled = true; - //} // this.collegeOptions.unshift({ value: '全校', label: '全校' }); // this.collegeOptions.forEach(option => { // if (option.value !== '全校') { @@ -383,117 +324,6 @@ this.majorLength--; }, //学院选项回调函数 - onMajorCollegeChange(value) { - let val = value.target.value; - console.log(val, 'value'); - console.log(this.collegeMajorOptions.find((item) => item.value == val).children, 'majorOptions'); - this.majorOptions = this.collegeMajorOptions.find((item) => item.value == val).children; - //将this.majorCheckOn中的数据与this.lastCollegeMajor比较，如果this.lastCollegeMajor中有this.majorCheckOn中没有的数据则删除,反之添加 - // for (let i = 0; i < this.majorCheckOn.length; i++) { - // if (!this.lastCollegeMajor.includes(this.majorCheckOn[i])) { - // this.lastCollegeMajor.push(this.majorCheckOn[i]); - // } - // } - // for (let i = 0; i < this.lastCollegeMajor.length; i++) { - // if (!this.majorCheckOn.includes(this.lastCollegeMajor[i])) { - // this.lastCollegeMajor.splice(i, 1); - // console.log("splice") - // } - // } - // this.lastCollegeMajor = this.majorCheckOn; - console.log(this.lastCollegeMajor, 'lastCollegeMajor'); - this.majorCheckOn = this.lastCollegeMajor.map((item) => item[1]); - console.log(this.majorCheckOn, 'majorCheckOn'); - }, - // }); - // this.college = ['全校']; - // this.collegetab2 = ['地理科学学院', '文学院']; - console.log(this.collegeOptions, 'collegeOptions'); - }); - }, - onMajorEntrydateChange(value) { - console.log(value, 'value'); - if (value.length > 5) { - //找到value中不在this.lastMajorEntrydate中的数据 - for (let i = 0; i < value.length; i++) { - if (!this.lastMajorEntrydate.includes(value[i])) { - message.error('最多选择五个'); - //删除value[i] - value.splice(i, 1); - return; - } - } - } - this.lastMajorEntrydate = value; - }, - //学院对比 学院选项回调函数 - onCollegeChange(value) { - console.log(value, 'value'); - if (value.length > 5) { - message.error('最多选择五个'); - //和lastCollege比较，如果value中的数据不在lastCollege中则删除 - for (let i = 0; i < value.length; i++) { - if (!this.lastCollege.includes(value[i])) { - value.splice(i, 1); - return; - } - } - return; - } - this.lastCollege = value; - }, - //学院对比 年级选项回调函数 - onCollegeEntrydateChange(value) { - console.log(value, 'value'); - if (value.length > 5) { - message.error('最多选择五个'); - //和lastCollegeEntrydate比较，如果value中的数据不在lastCollegeEntrydate中则删除 - for (let i = 0; i < value.length; i++) { - if (!this.lastCollegeEntrydate.includes(value[i])) { - value.splice(i, 1); - return; - } - } - return; - } - this.lastCollegeEntrydate = value; - }, - //专业选项回调函数 - onCollegeMajorChange(value) { - //将value中的数据与this.lastCollegeMajor比较，如果value中的有this.lastCollegeMajor中没有的数据则添加,反之寻找在this.majorOptions中并且在this.lastCollegeMajor中但是不在value中的数据删除 - for (let i = 0; i < value.length; i++) { - if (!this.lastCollegeMajor.map((item) => item[1]).includes(value[i])) { - if (this.majorLength == 5) { - message.error('最多选择五个'); - //从value中删除value[i] - value.splice(i, 1); - return; - } - this.lastCollegeMajor.push([this.collegeMajor, value[i]]); - this.majorLength++; - } - } - for (let i = 0; i < this.lastCollegeMajor.length; i++) { - if (!value.includes(this.lastCollegeMajor[i][1])) { - //查看该数据是都在this.majorOptions中 - if (this.majorOptions.find((item) => item.value == this.lastCollegeMajor[i][1])) { - this.lastCollegeMajor.splice(i, 1); - console.log('splice'); - this.majorLength--; - } - } - } - console.log(value, 'value'); - }, - removeTag(index) { - if (this.majorCheckOn.includes(this.lastCollegeMajor[index][1])) { - let index1 = this.majorCheckOn.indexOf(this.lastCollegeMajor[index][1]); - this.majorCheckOn.splice(index1, 1); - } - this.lastCollegeMajor.splice(index, 1); - this.majorLength--; - }, - //学院选项回调函数 onMajorCollegeChange(value) { let val = value.target.value; console.log(val, 'value'); @@ -517,20 +347,6 @@ console.log(this.majorCheckOn, 'majorCheckOn'); }, - clearMajor() { - this.majorCheckOn = []; - this.lastCollegeMajor = []; - this.majorLength = 0; - }, - clearCollege() { - this.collegetab2 = []; - this.collegeentrydate = []; - this.lastCollege = []; - this.lastCollegeEntrydate = []; - }, - //tab2\3图标 - drawChart(data, tab) { - let seriesData = []; clearMajor() { this.majorCheckOn = []; this.lastCollegeMajor = []; @@ -938,21 +754,7 @@ border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); } - .container { - display: flex; - background-color: #fff; - padding: 15px; - border-radius: 4px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); - } - .query { - //居左 - display: flex; - justify-content: flex-start; - align-items: center; - margin-left: 24px; - } .query { //居左 display: flex; @@ -961,11 +763,6 @@ margin-left: 24px; } - .tab3 { - justify-content: flex-start; - align-items: center; - margin-left: 24px; - } .tab3 { justify-content: flex-start; align-items: center; @@ -977,9 +774,4 @@ color: rgb(8, 8, 8); font-weight: bold; } - .title { - font-size: 34px; - color: rgb(8, 8, 8); - font-weight: bold; - } -- 2.41.0 From e60233645ac355920faa68ff182dbd8b7c6bf37e Mon Sep 17 00:00:00 2001 From: YuNan <3194726156@qq.com> Date: Thu, 17 Oct 2024 19:19:51 +0800 Subject: [PATCH 06/16] =?UTF-8?q?=E6=8C=89=E6=89=B9=E6=AC=A1=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cet/cet-ana-2.vue | 84 +++++++------------------------------ 1 file changed, 15 insertions(+), 69 deletions(-) diff --git a/src/views/cet/cet-ana-2.vue b/src/views/cet/cet-ana-2.vue index 822adaf..d029a2e 100644 --- a/src/views/cet/cet-ana-2.vue +++ b/src/views/cet/cet-ana-2.vue @@ -209,11 +209,18 @@ } console.log(result.data, 'result'); + let titleText = major ? `${college} / ${major}专业 最新批次通过人数饼图` : `${college} 最新批次通过人数饼图`; + // 使用 API 返回的数据填充饼图 - let chartData = result.data.map((item) => ({ - name: item.entryDate + '级', - value: item.passRate, - })); + 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', @@ -237,7 +244,7 @@ }, }, legend: { - top: '5%', + top: '15%', left: 'center', // orient: 'vertical', itemGap: 3, @@ -258,7 +265,7 @@ color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], series: [ { - name: college + '/' + major + '该批次通过人数饼图', + name: titleText, type: 'pie', radius: ['50%', '100%'], center: ['50%', '50%'], @@ -353,6 +360,7 @@ let xData = result.data.map((item) => item.entryDate); // 用于 X 轴 let values = result.data.map((item) => item.passRate); // 用于柱状图的数据 console.log(xData, values, 'xData values'); + let titleText = major ? `${college} / ${major}专业 每个年级的通过率柱状图` : `${college} 每个年级的通过率柱状图`; let option = { grid: { left: '15%', // 调整左边距，向右移动 @@ -368,7 +376,7 @@ }, }, title: { - text: college + '/' + '每个年级的通过率柱状图', + text: titleText, left: 'left', top: '0%', textStyle: { @@ -401,68 +409,6 @@ }, ], }; - - //let option = { - // tooltip: { - // trigger: 'item', - // conginee: false, - // //字体大小 - // itemStytle: { - // fontSize: 100, - // }, - // }, - // title: { - // text: '学院/专业每个年级的通过率柱状图', - // left: 'left', - // top: '0%', - // textStyle: { - // fontSize: 14, - // }, - // }, - // legend: { - // top: '5%', - // left: 'center', - // }, - // color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], - - // series: [ - // { - // name: '学院/专业每个批次通过人数饼图', - // type: 'pie', - // radius: ['0', '100%'], - // top: 80, - // itemStyle: { - // borderRadius: 5, - // borderColor: '#fff', - // borderWideth: 2, - // }, - // label: { - // show: true, - // fontSize: 14, - // overflow: 'truncate', - // }, - // emphasis: { - // itemStyle: { - // shadowBlur: 10, - // shadowOffsetX: 0, - // shadowColor: 'rgba(0, 0, 0, 0.5)', - // }, - // label: { - // show: true, - // fontSize: 15, - // fontWeight: 'bold', - // }, - // }, - // data: [ - // { value: 1048, name: '计算机' }, - // { value: 735, name: '东语' }, - // { value: 580, name: '物理' }, - // { value: 484, name: '大数据' }, - // { value: 300, name: '树莓' }, - // ], - // }, - // ], - //}; myChart.setOption(option); }, -- 2.41.0 From df1aab15cd72838b9bffc06167ca90c61f4ba7b8 Mon Sep 17 00:00:00 2001 From: Xubx <1827135378@qq.com> Date: Tue, 22 Oct 2024 18:57:00 +0800 Subject: [PATCH 07/16] =?UTF-8?q?=E5=AD=A6=E9=99=A2=E7=BB=B4=E5=BA=A6?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cet/cet-ana-1.vue | 126 +++++++++++++++--------------------- 1 file changed, 52 insertions(+), 74 deletions(-) diff --git a/src/views/cet/cet-ana-1.vue b/src/views/cet/cet-ana-1.vue index 311b5f1..9457ace 100644 --- a/src/views/cet/cet-ana-1.vue +++ b/src/views/cet/cet-ana-1.vue @@ -25,10 +25,10 @@ - +
- +
@@ -74,8 +74,8 @@ getRateByMajor: '/cet/getRateByMajor', }, map1loading: false, - tab2loading: false, - tab3loading: false, + map2loading: false, + map3loading: false, collegeOptions: [], batchOptions: [], @@ -106,12 +106,12 @@ this.getEntrydate(); this.allQuery(); this.getCollegeMajorData(); - this.gradePassRate(); - this.majorPassRate(); }, methods: { allQuery() { this.map1loading = true; + this.map2loading = true; // 新增 + this.map3loading = true; // 新增 let college = ['全校']; let query = 'tab1'; if (this.oneentrydate == null) { @@ -192,7 +192,7 @@ }, // 年级通过率 async gradePassRate() { - var myChart = echarts.init(document.getElementById('map2')); + this.map2loading = true; const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate }); this.entrydateOptions = getEntrydate.entrydates; let entrydate = this.entrydateOptions.map((item) => item.value); @@ -203,14 +203,10 @@ level: 'cet4', }; let url = this.Url.getCollegeRate; - console.log(queryParams, 'queryParams'); let result = await defHttp.post({ url: url, data: queryParams }); - - console.log(myChart, 'mychart'); if (!result) { return; } - console.log(result.data, 'result'); result = result.data[name]; let collegeOption = { title: { @@ -258,17 +254,18 @@ animationDurationUpdate: 500, }; - myChart.setOption(collegeOption); + this.map2loading = false; + this.$nextTick(() => { + var myChart = echarts.init(document.getElementById('map2')); + myChart.setOption(collegeOption); + }); }, // 各专业通过率 async majorPassRate() { - var myChart = echarts.init(document.getElementById('map3')); + this.map3loading = true; const name = '西语学院'; - //let entrydate = this.oneentrydate.map((item) => item.value); - //console.log(entrydata, 'entrydata'); - let queryParams = { college: [[name]], entrydate: [this.oneentrydate], @@ -276,14 +273,11 @@ }; let url = this.Url.getMajorRate; console.log(queryParams, 'queryParams'); - let result = await defHttp.post({ url: url, data: queryParams }); - console.log(myChart, 'mychart'); if (!result) { return; } - console.log(result.data, 'result'); //result = result.data[name]; // 遍历 result.data 中的所有专业 @@ -359,7 +353,11 @@ ], animationDurationUpdate: 500, }; - myChart.setOption(majorOption); + this.map3loading = false; + this.$nextTick(() => { + var myChart = echarts.init(document.getElementById('map3')); + myChart.setOption(majorOption); + }); }, dataChart(data, tab) { @@ -458,34 +456,32 @@ .sort((a, b) => b - a) .map((value) => yData.indexOf(value) + 1); //如果选择全校，增加排名 - if (tab == 'tab1') { - seriesData.push({ - name: i + '级累计总通过率排名', - type: 'line', - yAxisIndex: 1, - data: rankData, - bar: {}, - show: false, + seriesData.push({ + name: i + '级累计总通过率排名', + type: 'line', + yAxisIndex: 1, + data: rankData, + bar: {}, + show: false, - itemStyle: { - normal: { - label: { - show: false, //开启显示 - position: 'top', //在上方显示 - formatter: '{c}', - textStyle: { - //数值样式 - color: 'black', - fontSize: 8, - }, + itemStyle: { + normal: { + label: { + show: false, //开启显示 + position: 'top', //在上方显示 + formatter: '{c}', + textStyle: { + //数值样式 + color: 'black', + fontSize: 8, }, - color: colors[j++], }, + color: colors[j++], }, - }); - if (j == colors.length) { - j = 0; - } + }, + }); + if (j == colors.length) { + j = 0; } } let myChart = null; @@ -623,7 +619,6 @@ this.collegeOptions.map((item) => item.value), 'collegeOptions' ); - console.log(name, 'params'); console.log(this.collegeOptions.map((item) => item.value).includes(name), 'bool'); if (params != null && params != undefined && params.name != '' && this.collegeOptions.map((item) => item.value).includes(name)) { console.log(params, 'params'); @@ -634,14 +629,13 @@ level: 'cet4', }; let url = this.Url.getCollegeRate; - console.log(queryParams, 'queryParams'); + this.map2loading = true; + this.map3loading = true; let result = await defHttp.post({ url: url, data: queryParams }); - console.log(myChart, 'mychart'); if (!result) { return; } - console.log(result.data, 'result'); result = result.data[name]; let collegeOption = { title: { @@ -689,21 +683,6 @@ animationDurationUpdate: 500, }; - console.log(collegeOption, 'collegeOption'); - - //let spanElement = document.getElementById('span'); - - // 隐藏 span 元素 - //spanElement.style.display = 'none'; - var map2Chart = echarts.init(document.getElementById('map2')); - map2Chart.setOption(collegeOption, true); - //myChart.setOption(collegeOption, true); - - console.log(myChart, 'mychart'); - // this.college = [params]; - - // this.query(tab, this.college, this.entrydate); - //点击事件中的个专业四级通过率 let querMajorParam = { college: [[name]], @@ -711,16 +690,12 @@ level: 'cet4', }; let urlMajor = this.Url.getMajorRate; - console.log(querMajorParam, 'querMajorParam'); let resultMajor = await defHttp.post({ url: urlMajor, data: querMajorParam }); - console.log(myChart, 'mychart'); if (!resultMajor) { return; } - console.log(resultMajor.data, 'resultMajor'); - //result = result.data[name]; // 遍历 result.data 中的所有专业 const majors = Object.keys(resultMajor.data); // 获取所有专业名称 @@ -792,9 +767,14 @@ ], animationDurationUpdate: 500, }; - console.log(majorOption, 'majorOption'); - var map3Chart = echarts.init(document.getElementById('map3')); - map3Chart.setOption(majorOption, true); + this.map3loading = false; + this.map2loading = false; + this.$nextTick(() => { + var map2Chart = echarts.init(document.getElementById('map2')); + map2Chart.setOption(collegeOption, true); + var map3Chart = echarts.init(document.getElementById('map3')); + map3Chart.setOption(majorOption, true); + }); } }); }, @@ -844,11 +824,9 @@ // }); console.log('data', result.data); } finally { - query == 'tab1' ? (this.map1loading = false) : (this.tab2loading = false); + this.map1loading = false; this.$nextTick(() => { - if (query == 'tab1') { - this.dataChart(result.data, query); - } + this.dataChart(result.data, query); }); } }, -- 2.41.0 From 4aef7d706d0bd77f94ed2201566f3068c6c29ebb Mon Sep 17 00:00:00 2001 From: YuNan <3194726156@qq.com> Date: Wed, 23 Oct 2024 14:00:27 +0800 Subject: [PATCH 08/16] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96=20?= =?UTF-8?q?=E5=92=8C=20=E6=95=B0=E6=8D=AE=E5=AF=BC=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cet/cet-ana-2.vue | 276 +++++++++++++++++++++++----------- src/views/cet/cet-ana-3.vue | 291 +++++++++++++++++++----------------- 2 files changed, 340 insertions(+), 227 deletions(-) diff --git a/src/views/cet/cet-ana-2.vue b/src/views/cet/cet-ana-2.vue index d029a2e..2ec20df 100644 --- a/src/views/cet/cet-ana-2.vue +++ b/src/views/cet/cet-ana-2.vue @@ -209,7 +209,7 @@ } console.log(result.data, 'result'); - let titleText = major ? `${college} / ${major}专业 最新批次通过人数饼图` : `${college} 最新批次通过人数饼图`; + let titleText = major ? `${college} / ${major}专业 最新批次通过人数` : `${college} 最新批次通过人数`; // 使用 API 返回的数据填充饼图 let chartData = []; @@ -221,109 +221,57 @@ }); } console.log(chartData, '123'); + let xData = chartData.map((item) => item.name); // 提取类别数据 + let yData = chartData.map((item) => item.value); // 提取值数据 let option = { - tooltip: { - trigger: 'item', - //conginee: false, - //字体大小 - itemStytle: { - // 设置阴影效果 - shadowBlur: 10, // 阴影模糊大小 - shadowColor: 'rgba(0, 0, 0, 0.3)', // 阴影颜色 - shadowOffsetX: 5, // 阴影水平方向偏移 - shadowOffsetY: 5, // 阴影垂直方向偏移 - fontSize: 100, - }, + grid: { + left: '20%', // 增加左边距，可以根据需要调整 + right: '5%', // 右边距 + top: '10%', // 上边距 + bottom: '10%', // 下边距 }, title: { - text: '最新批次每一年级的通过率饼图', + 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 + "%"; - // }, + tooltip: { + trigger: 'item', + }, + xAxis: { + type: 'category', + data: xData, + //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + }, + yAxis: { + type: 'value', + axisLabel: { + formatter: '{value}%', + }, }, - color: ['#b3cde0', '#6497b1', '#005b96', '#03396c', '#e5e5e5'], series: [ { name: titleText, - type: 'pie', - radius: ['50%', '100%'], - center: ['50%', '50%'], - startAngle: 130, - top: 80, - //暂时没有 + data: yData, + //data: [150, 230, 224, 218, 135, 147, 260], + type: 'line', 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', + normal: { + label: { + show: true, //开启显示 + position: 'top', //在上方显示 + textStyle: { + //数值样式 + color: 'black', + fontSize: 12, + }, + formatter: '{c}%', + }, }, }, - 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, }, ], }; @@ -337,6 +285,158 @@ }); }, + ////绘画饼图--最新批次每一年级的通过率饼图 + //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); diff --git a/src/views/cet/cet-ana-3.vue b/src/views/cet/cet-ana-3.vue index 50648a5..3ffcaa3 100644 --- a/src/views/cet/cet-ana-3.vue +++ b/src/views/cet/cet-ana-3.vue @@ -23,17 +23,6 @@ -
@@ -44,42 +33,60 @@
- -
+ + +
+ +
- -
+ + diff --git a/src/views/cet/data-import/cet6-data-import.vue b/src/views/cet/data-import/cet6-data-import.vue new file mode 100644 index 0000000..e69de29 -- 2.41.0 From baf4b4246b2d5fc2b17d401df0ad19e58a863785 Mon Sep 17 00:00:00 2001 From: Cool <747682928@qq.com> Date: Wed, 23 Oct 2024 18:11:28 +0800 Subject: [PATCH 10/16] =?UTF-8?q?=E5=AF=BC=E5=85=A5=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/download.js | 70 +++++++ src/views/cet/cet-ana-3.vue | 1 - src/views/cet/cet-student-query.vue | 2 +- .../cet/data-import/cet4-data-import.vue | 183 ++++++++++++++---- src/views/cet/data-import/dataImportApi.ts | 9 + 5 files changed, 222 insertions(+), 43 deletions(-) create mode 100644 src/utils/download.js create mode 100644 src/views/cet/data-import/dataImportApi.ts diff --git a/src/utils/download.js b/src/utils/download.js new file mode 100644 index 0000000..8760449 --- /dev/null +++ b/src/utils/download.js @@ -0,0 +1,70 @@ +function myBrowser() { + var userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串 + var isOpera = userAgent.indexOf('Opera') > -1; + if (isOpera) { + return 'Opera'; + } // 判断是否Opera浏览器 + if (userAgent.indexOf('Firefox') > -1) { + return 'FF'; + } // 判断是否Firefox浏览器 + if (userAgent.indexOf('Chrome') > -1) { + return 'Chrome'; + } + if (userAgent.indexOf('Safari') > -1) { + return 'Safari'; + } // 判断是否Safari浏览器 + if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera) { + return 'IE'; + } // 判断是否IE浏览器 + if (userAgent.indexOf('Trident') > -1) { + return 'Edge'; + } // 判断是否Edge浏览器 +} +function SaveAs5(imgURL) { + var oPop = window.open(imgURL, '', 'width=1, height=1, top=5000, left=5000'); + for (; oPop.document.readyState !== 'complete'; ) { + if (oPop.document.readyState === 'complete') break; + } + oPop.document.execCommand('SaveAs'); + oPop.close(); +} +function download(src, fileName) { + // 创建隐藏的可下载链接 + var eleLink = document.createElement('a'); + if (fileName) { + eleLink.setAttribute('download', fileName); + } else { + eleLink.download = src; + } + eleLink.style.display = 'none'; + // // 字符内容转变成blob地址 + eleLink.href = src; + // // 触发点击 + document.body.appendChild(eleLink); + eleLink.click(); + // // 然后移除 + document.body.removeChild(eleLink); +} +function downLoadFile(url, fileName = '') { + if (myBrowser() === 'IE' || myBrowser() === 'Edge') { + SaveAs5(url); + } else { + download(url, fileName); + } +} +function conversionFileDownload(res) { + const a = document.createElement('a'); + const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); + const temp = res.headers['content-disposition'].split(';')[1].split('filename=')[1]; + // 对文件名乱码转义--【Node.js】使用iconv-lite解决中文乱码 + const iconv = require('iconv-lite'); + iconv.skipDecodeWarning = true; // 忽略警告 + const fileName = iconv.decode(temp, 'utf-8'); + console.log(fileName); + a.setAttribute('download', fileName); + const objectUrl = URL.createObjectURL(blob); + a.setAttribute('href', objectUrl); + a.click(); +} + +export { downLoadFile, conversionFileDownload }; diff --git a/src/views/cet/cet-ana-3.vue b/src/views/cet/cet-ana-3.vue index 3ffcaa3..db4c644 100644 --- a/src/views/cet/cet-ana-3.vue +++ b/src/views/cet/cet-ana-3.vue @@ -261,7 +261,6 @@ this.collegeMajor = '全校'; } //如果this.batch[1]不存在则设为null - let major = this.batch.length > 1 ? this.batch[1] : ''; this.topCollege = this.collegeMajor; this.topBath = this.batch; this.loading = true; diff --git a/src/views/cet/cet-student-query.vue b/src/views/cet/cet-student-query.vue index daa56fe..ef222fb 100644 --- a/src/views/cet/cet-student-query.vue +++ b/src/views/cet/cet-student-query.vue @@ -55,7 +55,7 @@ }); const isShow = ref(false); const loading = ref(false); - const tableData = ref([]); + const tableData: any = ref([]); const tableLabel = ref([ { title: '考试批次', diff --git a/src/views/cet/data-import/cet4-data-import.vue b/src/views/cet/data-import/cet4-data-import.vue index bd4d311..cd0efa0 100644 --- a/src/views/cet/data-import/cet4-data-import.vue +++ b/src/views/cet/data-import/cet4-data-import.vue @@ -2,24 +2,31 @@
- - - - - - - +
- - - - - 导入文件 - - + 考试批次： + + +
- 下载模板 + + + + + 导入文件 + +
+
{{ uploading ? 'Uploading' : '确认上传文件' }} @@ -27,7 +34,6 @@
- @@ -38,15 +44,22 @@
- diff --git a/src/views/cet/data-import/dataImportApi.ts b/src/views/cet/data-import/dataImportApi.ts new file mode 100644 index 0000000..7f66485 --- /dev/null +++ b/src/views/cet/data-import/dataImportApi.ts @@ -0,0 +1,9 @@ +import { defHttp } from '/@/utils/http/axios'; + +export function downloadTemplateExcel() { + return defHttp.request({ + url: '/cetDataImport/downloadTemplate', + method: 'post', + responseType: 'blob', + }); +} -- 2.41.0 From 347fb8847760497eff734d4502ab125c827854e6 Mon Sep 17 00:00:00 2001 From: YuNan <3194726156@qq.com> Date: Wed, 23 Oct 2024 19:19:55 +0800 Subject: [PATCH 11/16] =?UTF-8?q?=E5=AD=A6=E7=94=9F=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cet/data-import/student-data-import.vue | 228 ++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 src/views/cet/data-import/student-data-import.vue diff --git a/src/views/cet/data-import/student-data-import.vue b/src/views/cet/data-import/student-data-import.vue new file mode 100644 index 0000000..ebfecf7 --- /dev/null +++ b/src/views/cet/data-import/student-data-import.vue @@ -0,0 +1,228 @@ + + + + + \ No newline at end of file -- 2.41.0 From d0a33280d33dfcc8b2a562b3a3e67219778c171f Mon Sep 17 00:00:00 2001 From: Cool <747682928@qq.com> Date: Wed, 23 Oct 2024 22:19:31 +0800 Subject: [PATCH 12/16] =?UTF-8?q?=E5=AD=A6=E7=94=9F=E5=AF=BC=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cet/cet-student/Cet4Major.api.ts | 72 +++++ src/views/cet/cet-student/Cet4Major.data.ts | 103 ++++++++ src/views/cet/cet-student/Cet4MajorList.vue | 247 ++++++++++++++++++ .../cet-student/components/Cet4MajorForm.vue | 193 ++++++++++++++ .../cet-student/components/Cet4MajorModal.vue | 75 ++++++ .../cet/data-import/student-data-import.vue | 228 ---------------- 6 files changed, 690 insertions(+), 228 deletions(-) create mode 100644 src/views/cet/cet-student/Cet4Major.api.ts create mode 100644 src/views/cet/cet-student/Cet4Major.data.ts create mode 100644 src/views/cet/cet-student/Cet4MajorList.vue create mode 100644 src/views/cet/cet-student/components/Cet4MajorForm.vue create mode 100644 src/views/cet/cet-student/components/Cet4MajorModal.vue delete mode 100644 src/views/cet/data-import/student-data-import.vue diff --git a/src/views/cet/cet-student/Cet4Major.api.ts b/src/views/cet/cet-student/Cet4Major.api.ts new file mode 100644 index 0000000..aff90b2 --- /dev/null +++ b/src/views/cet/cet-student/Cet4Major.api.ts @@ -0,0 +1,72 @@ +import { defHttp } from '/@/utils/http/axios'; +import { useMessage } from "/@/hooks/web/useMessage"; + +const { createConfirm } = useMessage(); + +enum Api { + list = '/com/cet4Major/list', + save='/com/cet4Major/add', + edit='/com/cet4Major/edit', + deleteOne = '/com/cet4Major/delete', + deleteBatch = '/com/cet4Major/deleteBatch', + importExcel = '/com/cet4Major/importExcel', + exportXls = '/com/cet4Major/exportXls', +} + +/** + * 导出api + * @param params + */ +export const getExportUrl = Api.exportXls; + +/** + * 导入api + */ +export const getImportUrl = Api.importExcel; + +/** + * 列表接口 + * @param params + */ +export const list = (params) => defHttp.get({ url: Api.list, params }); + +/** + * 删除单个 + * @param params + * @param handleSuccess + */ +export const deleteOne = (params,handleSuccess) => { + return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => { + handleSuccess(); + }); +} + +/** + * 批量删除 + * @param params + * @param handleSuccess + */ +export const batchDelete = (params, handleSuccess) => { + createConfirm({ + iconType: 'warning', + title: '确认删除', + content: '是否删除选中数据', + okText: '确认', + cancelText: '取消', + onOk: () => { + return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => { + handleSuccess(); + }); + } + }); +} + +/** + * 保存或者更新 + * @param params + * @param isUpdate + */ +export const saveOrUpdate = (params, isUpdate) => { + let url = isUpdate ? Api.edit : Api.save; + return defHttp.post({ url: url, params }, { isTransformResponse: false }); +} diff --git a/src/views/cet/cet-student/Cet4Major.data.ts b/src/views/cet/cet-student/Cet4Major.data.ts new file mode 100644 index 0000000..f2805ca --- /dev/null +++ b/src/views/cet/cet-student/Cet4Major.data.ts @@ -0,0 +1,103 @@ +import { BasicColumn } from '/@/components/Table'; +import { FormSchema } from '/@/components/Table'; +import { rules } from '/@/utils/helper/validator'; +import { render } from '/@/utils/common/renderUtils'; +//列表数据 +export const columns: BasicColumn[] = [ + { + title: '年级', + dataIndex: 'entrydate', + key: 'entrydate', + align: 'center', + }, + { + title: '学生人数', + dataIndex: 'studentNumber', + key: 'studentNumber', + align: 'center', + }, +]; + +//查询数据 +export const searchFormSchema: FormSchema[] = []; + +//表单数据 +export const formSchema: FormSchema[] = [ + { + label: 'name', + field: 'name', + component: 'Input', + }, + { + label: 'college', + field: 'college', + component: 'Input', + }, + { + label: 'majorId', + field: 'majorId', + component: 'Input', + }, + { + label: 'majorname', + field: 'majorname', + component: 'Input', + }, + { + label: 'className', + field: 'className', + component: 'Input', + }, + { + label: 'educate', + field: 'educate', + component: 'Input', + }, + { + label: 'entrydate', + field: 'entrydate', + component: 'Input', + }, + { + label: 'campus', + field: 'campus', + component: 'Input', + }, + { + label: 'state', + field: 'state', + component: 'Input', + }, + { + label: 'level', + field: 'level', + component: 'Input', + }, + { + label: 'category', + field: 'category', + component: 'Input', + }, + // TODO 主键隐藏字段，目前写死为ID + { + label: '', + field: 'id', + component: 'Input', + show: false, + }, +]; + +// 高级查询数据 +export const superQuerySchema = { + name: { title: 'name', order: 0, view: 'text', type: 'string' }, + college: { title: 'college', order: 1, view: 'text', type: 'string' }, + majorId: { title: 'majorId', order: 2, view: 'text', type: 'string' }, + majorname: { title: 'majorname', order: 3, view: 'text', type: 'string' }, + className: { title: 'className', order: 4, view: 'text', type: 'string' }, + educate: { title: 'educate', order: 5, view: 'text', type: 'string' }, + entrydate: { title: 'entrydate', order: 6, view: 'text', type: 'string' }, + campus: { title: 'campus', order: 7, view: 'text', type: 'string' }, + state: { title: 'state', order: 8, view: 'text', type: 'string' }, + level: { title: 'level', order: 9, view: 'text', type: 'string' }, + category: { title: 'category', order: 10, view: 'text', type: 'string' }, +}; diff --git a/src/views/cet/cet-student/Cet4MajorList.vue b/src/views/cet/cet-student/Cet4MajorList.vue new file mode 100644 index 0000000..09314f8 --- /dev/null +++ b/src/views/cet/cet-student/Cet4MajorList.vue @@ -0,0 +1,247 @@ + + + + + diff --git a/src/views/cet/cet-student/components/Cet4MajorForm.vue b/src/views/cet/cet-student/components/Cet4MajorForm.vue new file mode 100644 index 0000000..31f15f1 --- /dev/null +++ b/src/views/cet/cet-student/components/Cet4MajorForm.vue @@ -0,0 +1,193 @@ + + + + + diff --git a/src/views/cet/cet-student/components/Cet4MajorModal.vue b/src/views/cet/cet-student/components/Cet4MajorModal.vue new file mode 100644 index 0000000..1abe807 --- /dev/null +++ b/src/views/cet/cet-student/components/Cet4MajorModal.vue @@ -0,0 +1,75 @@ + + + + + diff --git a/src/views/cet/data-import/student-data-import.vue b/src/views/cet/data-import/student-data-import.vue deleted file mode 100644 index ebfecf7..0000000 --- a/src/views/cet/data-import/student-data-import.vue +++ /dev/null @@ -1,228 +0,0 @@ - - - - - \ No newline at end of file -- 2.41.0 From 87daede4143bb51a64a05be7a05cba3c6e3e6bcf Mon Sep 17 00:00:00 2001 From: Cool <747682928@qq.com> Date: Thu, 24 Oct 2024 15:04:53 +0800 Subject: [PATCH 13/16] =?UTF-8?q?=E5=9B=9B=E5=85=AD=E7=BA=A7=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E5=90=8C=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/cet/cet-student/Cet4MajorList.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/views/cet/cet-student/Cet4MajorList.vue b/src/views/cet/cet-student/Cet4MajorList.vue index 09314f8..78114a9 100644 --- a/src/views/cet/cet-student/Cet4MajorList.vue +++ b/src/views/cet/cet-student/Cet4MajorList.vue @@ -5,9 +5,9 @@
导入 - +
@@ -37,6 +37,7 @@ \ No newline at end of file + return true; + }); + + let formData = {}; + const queryByIdUrl = '/CET/cetLocation/queryById'; + async function initFormData() { + let params = { code: props.formData.dataId }; + const data = await defHttp.get({ url: queryByIdUrl, params }); + formData = { ...data }; + //设置表单的值 + await setFieldsValue(formData); + //默认是禁用 + await setProps({ disabled: formDisabled.value }); + } + + async function submitForm() { + let data = getFieldsValue(); + let params = Object.assign({}, formData, data); + console.log('表单数据', params); + await saveOrUpdate(params, true); + } + + initFormData(); + + return { + registerForm, + formDisabled, + submitForm, + }; + }, + }); + diff --git a/src/views/cet/cet-student-query.vue b/src/views/cet/cet-student-query.vue index ef222fb..6c77eba 100644 --- a/src/views/cet/cet-student-query.vue +++ b/src/views/cet/cet-student-query.vue @@ -6,8 +6,8 @@ - - + + 查询 @@ -23,7 +23,7 @@ 学生姓名：{{ tableData[tableData.length - 1]?.name }} - 学生学号：{{ tableData[tableData.length - 1]?.id }} + 学生学号：{{ tableData[tableData.length - 1]?.code }} 所在学院：{{ tableData[tableData.length - 1]?.college }} @@ -46,12 +46,12 @@ import type { Rule } from 'ant-design-vue/es/form'; interface FormState { name: string; - id: string; + code: string; } const search: UnwrapRef = reactive({ name: '', - id: '', + code: '', }); const isShow = ref(false); const loading = ref(false); @@ -90,7 +90,7 @@ ]); const rules: Record = { name: [{ required: true, message: '请输入学生姓名', trigger: 'change' }], - id: [{ required: true, message: '请输入学生学号', trigger: 'change' }], + code: [{ required: true, message: '请输入学生学号', trigger: 'change' }], }; const url = ref({ getData: '/cet_4/getDataByStudent', @@ -116,7 +116,7 @@ }; const handleClear = () => { search.name = ''; - search.id = ''; + search.code = ''; isShow.value = false; tableData.value = []; }; diff --git a/src/views/cet/cet-student/Cet4MajorList.vue b/src/views/cet/cet-student/Cet4MajorList.vue index 78114a9..bac8fd6 100644 --- a/src/views/cet/cet-student/Cet4MajorList.vue +++ b/src/views/cet/cet-student/Cet4MajorList.vue @@ -1,6 +1,6 @@