From aad4061a66a29614ed0cc90a565df200430254f2 Mon Sep 17 00:00:00 2001
From: 86183 <747682928@qq.com>
Date: Thu, 9 Nov 2023 21:10:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BA=86=E4=B8=80=E4=BA=9BBu?=
 =?UTF-8?q?g?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/office/cet/CetEnglishList.vue | 509 ++++++++++++++++++++++++
 1 file changed, 509 insertions(+)
 create mode 100644 src/views/office/cet/CetEnglishList.vue

diff --git a/src/views/office/cet/CetEnglishList.vue b/src/views/office/cet/CetEnglishList.vue
new file mode 100644
index 0000000..4040ae4
--- /dev/null
+++ b/src/views/office/cet/CetEnglishList.vue
@@ -0,0 +1,509 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div>
+      <a-button type="primary" @click="visible = true">打开筛选项</a-button>
+    </div>
+
+    <a-drawer placement="right" :visible="visible" width="90%" :closable="false">
+      <template slot="title">
+        <span>CET查询筛选项</span>
+      </template>
+      <a-descriptions bordered>
+        <a-descriptions-item label="学院" :span="3">
+
+          <div class="collegeDesc">
+            <a-checkbox :indeterminate="college.liberalData.indeterminate" :checked="college.liberalData.checkAll"
+              @change="liberalCheckAllOptions($event)">
+              {{ college.liberalData.label }}
+            </a-checkbox>
+            <!-- <hr class="objectHr"> -->
+            <a-checkbox-group v-model="college.liberalData.liberalCheckList"
+              :options="college.liberalData.liberalOptions" />
+
+            <hr class="objectHr">
+            <a-checkbox :indeterminate="college.scienceData.indeterminate" :checked="college.scienceData.checkAll"
+              @change="scienceCheckAllOptions($event)">
+              {{ college.scienceData.label }}
+            </a-checkbox>
+            <!-- <hr class="objectHr"> -->
+            <a-checkbox-group v-model="college.scienceData.scienceCheckList"
+              :options="college.scienceData.scienceOpitons" />
+
+            <hr class="objectHr">
+            <a-checkbox :indeterminate="college.artsData.indeterminate" :checked="college.artsData.checkAll"
+              @change="artsCheckAllOptions($event)">
+              {{ college.artsData.label }}
+            </a-checkbox>
+            <!-- <hr class="objectHr"> -->
+            <br>
+            <a-checkbox-group v-model="college.artsData.artsCheckList" :options="college.artsData.artsOptions" />
+
+
+          </div>
+
+
+        </a-descriptions-item>
+        <a-descriptions-item label="批次" :span="3">
+          <a-checkbox-group v-model="batch.checkedList" :options="batch.plainOptions" />
+        </a-descriptions-item>
+        <a-descriptions-item label="级别" :span="3">
+          <a-radio-group v-model="selectedLevel" size="large">
+            <a-radio-button v-for="option in levelOptions" :key="option.value" :value="option.value">
+              {{ option.label }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-descriptions-item>
+        <a-descriptions-item label="培养层次" :span="3">
+          <a-radio-group v-model="selectedCultivationLevel" size="large">
+            <a-radio-button v-for="option in cultivationLevelOptions" :key="option.value" :value="option.value"
+              :disabled="(option.value === '研究生' && (selectedExamGrade === '大一' || selectedExamGrade === '大二' || selectedExamGrade === '大三' || selectedExamGrade === '大四')) || ((option.value === '本科') && selectedExamGrade === '研究生')">
+              {{ option.label }}
+            </a-radio-button>
+          </a-radio-group>
+        </a-descriptions-item>
+        <a-descriptions-item label="考试时年级" :span="3">
+          <a-radio-group v-model="selectedExamGrade" size="large">
+            <a-radio-button v-for="option in examGradeOptions" :key="option.value" :value="option.value"
+              :disabled="(option.value === '研究生' && selectedCultivationLevel === '本科') || ((option.value === '大一' || option.value === '大二' || option.value === '大三' || option.value === '大四') && selectedCultivationLevel === '研究生')">
+              {{ option.label }}
+            </a-radio-button>
+          </a-radio-group>
+
+        </a-descriptions-item>
+
+      </a-descriptions>
+      <div class="buttons">
+        <a-button type="primary" style="margin-right: 5px;" @click="visible = false" icon="close">取消</a-button>
+        <a-button type="primary" @click="seachClick" icon="search">查询</a-button>
+      </div>
+    </a-drawer>
+    <a-descriptions bordered style="margin-top:10px;">
+      <a-descriptions-item label="总人数">
+        {{ totalEntries }}
+      </a-descriptions-item>
+      <a-descriptions-item label="总通过数">
+        {{ totalPassCount }}
+      </a-descriptions-item>
+      <a-descriptions-item label="总通过率">
+        {{ totalPassRate }}
+      </a-descriptions-item>
+    </a-descriptions>
+    <div v-if="isSeach">
+      正在加载中 <a-spin />
+    </div>
+
+    <div v-if="colleges.length > 0 && loading === false">
+      <div class="title">各学院通过率变化</div>
+      <a-tabs v-model:activeKey="activeKey" type="card" @change="darwLine">
+        <a-tab-pane v-for="(college, index) in colleges" :key="index" :tab="college">
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+    <div class="LineChart">
+      <div id="LineChart"></div>
+    </div>
+    <a-table :dataSource="dataSource" :columns="columns" bordered style="margin-top:10px;" :loading="loading"
+      v-if="colleges.length > 0">
+      <template slot="passRate" slot-scope="text">
+        {{ text }}%
+      </template>
+    </a-table>
+
+
+  </a-card>
+</template>
+
+<script>
+import { getAction, postAction } from '@/api/manage'
+import '@/assets/less/TableExpand.less'
+import * as echarts from 'echarts';
+
+export default {
+
+  name: 'CetEnglishList',
+  data() {
+    return {
+      indeterminate: false,
+      isSeach: false,
+      activeKey: 0,
+      loading: false,
+      //总人数
+      totalEntries: 0,
+      //总通过数
+      totalPassCount: 0,
+      //总通过率
+      totalPassRate: 0,
+      visible: false,
+      description: '四六级英语管理页面',
+      // 表头
+      dataSource: [],
+      columns: [
+        {
+          title: '学院',
+          dataIndex: 'college',
+          key: 'college',
+        },
+        {
+          title: '批次',
+          dataIndex: 'batch',
+          key: 'batch',
+        },
+        {
+          title: '报名数',
+          dataIndex: 'entries',
+          key: 'entries',
+        },
+        {
+          title: '通过率',
+          dataIndex: 'passRate',
+          key: 'passRate',
+          scopedSlots: { customRender: 'passRate' },
+        },
+      ],
+      url: {
+        list: "/superlilu/cetEnglish/list",
+        //获取图像url
+        getPassRate: "/superlilu/cetEnglish/passRate",
+      },
+      seachData: {
+        college: [],
+        batch: [],
+        level: "",
+        cultivationlevel: "",
+        examgrade: ""
+      },
+      //标准格式为
+      drawData: [],
+      //学院
+      college: {
+        checkedList: [],
+        liberalData:
+        {
+          label: '文科',
+          indeterminate: false,
+          liberalCheckList: [],
+          checkAll: false,
+          liberalOptions: [
+            { label: '东语学院', value: '东语学院' },
+            { label: '法学院', value: '法学院' },
+            { label: '管理学院', value: '管理学院' },
+            { label: '教师教育学院', value: '教师教育学院' },
+            { label: '教育科学学院', value: '教育科学学院' },
+            { label: '经济学院', value: '经济学院' },
+            { label: '历史文化学院', value: '历史文化学院' },
+            { label: '马克思主义学院', value: '马克思主义学院' },
+            { label: '西语学院', value: '西语学院' },
+            { label: '公共英语教研部', value: '公共英语教研部' },
+            { label: '国际教育学院', value: '国际教育学院' },
+            { label: '斯拉夫语学院', value: '斯拉夫语学院' },
+            { label: '文学院', value: '文学院' },
+          ],
+        },
+        artsData: {
+          label: '艺体',
+          indeterminate: false,
+          artsCheckList: [],
+          checkAll: false,
+          artsOptions: [
+            { label: '传媒学院', value: '传媒学院' },
+            { label: '国际美术学院', value: '国际美术学院' },
+            { label: '音乐学院', value: '音乐学院' },
+            { label: '美术学院', value: '美术学院' },
+            { label: '体育科学学院', value: '体育科学学院' },
+          ],
+        },
+
+        scienceData: {
+          label: '理科',
+          indeterminate: false,
+          scienceCheckList: [],
+          checkAll: false,
+          scienceOpitons: [
+            { label: '物理与电子工程学院', value: '物理与电子工程学院' },
+            { label: '生命科学与技术学院', value: '生命科学与技术学院' },
+            { label: '数学科学学院', value: '数学科学学院' },
+            { label: '计算机科学与信息工程学院', value: '计算机科学与信息工程学院' },
+            { label: '化学化工学院', value: '化学化工学院' },
+            { label: '地理科学学院', value: '地理科学学院' },
+            { label: '光电带隙材料教育部重点实验室', value: '光电带隙材料教育部重点实验室' },
+          ],
+        },
+
+
+
+      },
+      //批次
+      batch: {
+        checkedList: [],
+        plainOptions: [
+          { label: '2021-06-01', value: '2021-06-01' },
+          { label: '2021-12-01', value: '2021-12-01' },
+          { label: '2022-09-01', value: '2022-09-01' },
+          { label: '2023-03-01', value: '2023-03-01' },
+          { label: '2023-06-01', value: '2023-06-01' },
+        ]
+      },
+      //级别
+      levelOptions: [
+        { label: '全部', value: '' },
+        { label: '英语四级', value: '英语四级' },
+        { label: '英语六级', value: '英语六级' }
+      ],
+      selectedLevel: '',
+      //培养层次
+      cultivationLevelOptions: [
+        { label: '全部', value: '' },
+        { label: '研究生', value: '研究生' },
+        { label: '本科', value: '本科' },
+        // { label: '专升本', value: '专升本' }
+      ],
+      selectedCultivationLevel: '',
+      //考试时年级
+      examGradeOptions: [
+        { label: '全部', value: '' },
+        { label: '大一', value: '大一' },
+        { label: '大二', value: '大二' },
+        { label: '大三', value: '大三' },
+        { label: '大四', value: '大四' },
+        { label: '研究生', value: '研究生' },
+        { label: '其他', value: '其他' }
+      ],
+      selectedExamGrade: '',
+      colleges: [],
+      dates: [],
+      LineChartData: []
+    }
+  },
+  computed: {
+    getPassRate: function () {
+      return `${window._CONFIG['domianURL']}/${this.url.getPassRate}`
+
+    }
+  },
+  // mounted() {
+  //   const cancelButton = document.querySelector('.cancelButton');
+  //   const width = cancelButton.getBoundingClientRect().width;
+  //   cancelButton.style.marginRight = `${width}px`;
+  // },
+  methods: {
+    //切换tab，获取当前的学院，绘制折线图
+    darwLine() {
+      let college = this.colleges[this.activeKey];
+      let dates = this.dates;
+      let drawData = this.LineChartData[this.activeKey];
+      this.drawLine(college, dates, drawData);
+    },
+
+    // 在getDraw函数中添加以下代码
+    drawLine(colleges, dates, drawData) {
+      //等待LineChart加载完成再绘制
+      let LineChart = echarts.getInstanceByDom(document.getElementById('LineChart'));
+      if (LineChart != null && LineChart != undefined) {
+        LineChart.dispose();
+      }
+      LineChart = echarts.init(document.getElementById('LineChart'));
+      let option = {
+        title: {
+          text: ''
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: colleges
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        toolbox: {
+          show: false
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: dates
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: drawData
+      };
+      LineChart.setOption(option);
+    },
+
+    //获取图像数据
+    getDraw() {
+      //把数据清空
+      this.colleges = []
+      this.dates = []
+      this.LineChartData = []
+      //销毁折线图
+      let LineChart = echarts.getInstanceByDom(document.getElementById('LineChart'));
+      if (LineChart != null && LineChart != undefined) {
+        LineChart.dispose();
+      }
+      postAction(this.getPassRate, this.seachData).then(res => {
+        let data = res.result;
+        //先将所有数据按照batch排序
+        data.resultList.sort((a, b) => {
+          return a.batch > b.batch ? 1 : -1;
+        });
+
+        this.loading = false;
+        // 表格数据
+        this.dataSource = Object.assign([], data.resultList);
+        //总计数据
+        this.totalEntries = data.totalEntries;
+        this.totalPassCount = data.totalPass;
+        this.totalPassRate = parseFloat(this.totalPassCount / this.totalEntries * 100).toFixed(2) + "%";
+        //收集学院和日期
+        data.resultList.forEach(item => {
+          //判断学院是否存在，不存在则添加
+          let collegeIndex = this.colleges.indexOf(item.college);
+          if (collegeIndex === -1) {
+            this.colleges.push(item.college);
+          }
+          let dateIndex = this.dates.indexOf(item.batch);
+          if (dateIndex === -1) {
+            this.dates.push(item.batch);
+          }
+        });
+        //收集折线图的数据
+        this.getDrawData(data);
+        this.isSeach = false
+      },
+
+      ).catch(error => {
+        this.isSeach = false
+      })
+    },
+
+    //收集折线图的数据
+    getDrawData(data) {
+      data.resultList.forEach(item => {
+        //判断学院是否存在，不存在则添加
+        let collegeIndex = this.colleges.indexOf(item.college);
+        //判断日期是否存在，不存在则添加
+        let dateIndex = this.dates.indexOf(item.batch);
+        if (!this.LineChartData[collegeIndex]) {
+          this.LineChartData[collegeIndex] = {
+            name: item.college,
+            type: 'line',
+            data: [],
+            label: {
+              show: true,
+              position: 'top'
+            }
+          };
+        }
+        this.LineChartData[collegeIndex].data[dateIndex] = parseFloat(item.passRate.toFixed(2));
+      });
+      this.activeKey = 0
+      this.darwLine();
+    },
+
+
+    //查询
+    seachClick() {
+      this.loading = true;
+      this.isSeach = true;
+      this.seachData.level = this.selectedLevel;
+      this.seachData.cultivationlevel = this.selectedCultivationLevel;
+      this.seachData.examgrade = this.selectedExamGrade;
+      this.college.checkedList = this.college.liberalData.liberalCheckList.concat(this.college.scienceData.scienceCheckList, this.college.artsData.artsCheckList)
+      this.seachData.college = this.college.checkedList;
+      this.seachData.batch = this.batch.checkedList;
+      //绘制柱状图
+      this.getDraw()
+      this.visible = false;
+      // this.searchQuery()
+    },
+
+    liberalCheckAllOptions(e) {//选择全部的事件
+      //如果选中全选的话就遍历拿出当前相对项的数组的全部值
+      let newArr = []
+      if (e.target.checked) {
+        newArr = this.college.liberalData.liberalOptions.map(item => {
+          return item.value
+        })
+      }
+      this.college.liberalData.liberalCheckList = e.target.checked ? newArr : []
+      this.college.liberalData.indeterminate = false
+      this.college.liberalData.checkAll = e.target.checked
+    },
+    scienceCheckAllOptions(e) {//选择全部的事件
+      //如果选中全选的话就遍历拿出当前相对项的数组的全部值
+      let newArr = []
+      if (e.target.checked) {
+        newArr = this.college.scienceData.scienceOpitons.map(item => {
+          return item.value
+        })
+      }
+      this.college.scienceData.scienceCheckList = e.target.checked ? newArr : []
+      this.college.scienceData.indeterminate = false
+      this.college.scienceData.checkAll = e.target.checked
+    },
+    artsCheckAllOptions(e) {//选择全部的事件
+      //如果选中全选的话就遍历拿出当前相对项的数组的全部值
+      let newArr = []
+      if (e.target.checked) {
+        newArr = this.college.artsData.artsOptions.map(item => {
+          return item.value
+        })
+      }
+      this.college.artsData.artsCheckList = e.target.checked ? newArr : []
+      this.college.artsData.indeterminate = false
+      this.college.artsData.checkAll = e.target.checked
+    },
+  },
+}
+
+</script>
+<style scoped>
+@import '~@assets/less/common.less';
+
+.title {
+  font-size: 24px;
+  font-weight: bold;
+  margin: 10px 0;
+}
+
+.LineChart {
+  width: 100%;
+  height: 400px;
+  padding: 10px;
+
+}
+
+.buttons {
+  float: right;
+  margin-top: 10px;
+  padding-bottom: 10px;
+}
+
+#LineChart {
+  width: 100%;
+  height: 100%;
+
+}
+
+.collegeDesc {
+  display: block;
+  width: 100%;
+}
+.objectHr{
+  
+  border: none;
+  border-top: 1px dashed #ece8e8;
+}
+/* #main {
+  width: 100%;
+  height: 100%;
+} */
+
+/* 第二步 */
+</style>