From 60750d0ca4a778be95623b579782f24907d8fe91 Mon Sep 17 00:00:00 2001
From: YuNan <3194726156@qq.com>
Date: Wed, 23 Oct 2024 14:00:52 +0800
Subject: [PATCH] =?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=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/cet/cet-ana-2.vue                   | 184 +-----------------
 .../cet/data-import/cet4-data-import.vue      | 132 +++++++++++++
 .../cet/data-import/cet6-data-import.vue      |   0
 3 files changed, 134 insertions(+), 182 deletions(-)
 create mode 100644 src/views/cet/data-import/cet4-data-import.vue
 create mode 100644 src/views/cet/data-import/cet6-data-import.vue

diff --git a/src/views/cet/cet-ana-2.vue b/src/views/cet/cet-ana-2.vue
index 2ec20df..ecbce8e 100644
--- a/src/views/cet/cet-ana-2.vue
+++ b/src/views/cet/cet-ana-2.vue
@@ -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',
               },
             },
           ],
diff --git a/src/views/cet/data-import/cet4-data-import.vue b/src/views/cet/data-import/cet4-data-import.vue
new file mode 100644
index 0000000..bd4d311
--- /dev/null
+++ b/src/views/cet/data-import/cet4-data-import.vue
@@ -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>
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