CET-vue-3.0/src/views/cet/collegeDashboard.vue

<template>
  <a-card>
    <!--<a-row :gutter="1">
      <a-card-grid class="card-title">/
        <span>学院总人数：{{ collegeStudentCount }}</span>
      </a-card-grid>
      <a-card-grid class="card-title">
        <span>积累通过人数：{{ collegeStudentPassCount }}</span>
      </a-card-grid>
      <a-card-grid class="card-title">
        <span>学院通过率：{{ collegeStudentPassRate }}</span>
      </a-card-grid>
      <a-card-grid class="card-title">
        <span> 全校通过率：{{ schoolStudentPassRate }}</span>
      </a-card-grid>
      <a-card-grid style="margin-left: 24%; width: 10%; height: 10%; margin-bottom: 10px; border-radius: 10%; text-align: center">
        <a-select v-model:value="entrydate" style="border-radius: 10%; width: 100px; margin-left: -20px" :options="entrydateOptions" />
      </a-card-grid>
    </a-row>-->

    <a-row :gutter="1">
      <a-card-grid class="card-center">
        <div>
          <a-table
            :dataSource="dataSourceCet4"
            :columns="columns"
            :pagination="false"
            bordered
            class="custom-table"
            :style="{ fontSize: '10px', color: '#333', marginTop: '-11px' }"
            :loading="loadingTable"
          />
        </div>
      </a-card-grid>

      <a-card class="card-center" :loading="loadingMap2">
        <div style="width: 100%; height: 210px; padding: 10px" class="map2" id="map2"></div>
      </a-card>

      <a-card class="card-center" :loading="loadingMap3">
        <a-select
          v-model:value="entrydate"
          style="border-radius: 10%; width: 100px; margin-left: 220px"
          :options="entrydateOptions"
          @change="handleSelectChange"
        />

        <div id="map3" style="width: 100%; height: 230px"></div>
      </a-card>
    </a-row>
    <a-row :gutter="1">
      <a-card class="card-bottom" style="width: 32%" :loading="loadingMap4">
        <div id="map4" style="width: 100%; height: 300%"></div>
      </a-card>
      <a-card style="width: 65%" class="card-bottom" :loading="loadingMap5">
        <div id="map5" style="width: 100%; height: 300%"></div>
      </a-card>
    </a-row>
  </a-card>
</template>

<script>
  import { defHttp } from '/@/utils/http/axios';
  import * as echarts from 'echarts';

  export default {
    data() {
      return {
        collegeStudentCount: '11',
        collegeStudentPassCount: '11',
        collegeStudentPassRate: '11',
        schoolStudentPassRate: '11',
        loading: false,
        loadingTable: false,
        loadingMap2: false,
        loadingMap3: false,
        loadingMap4: false,
        loadingMap5: false,
        dataSourceCet4: [],
        batch: '',
        college: '',
        majors: [],
        majorentrydate: [],
        entrydate: '2017',
        entrydateOptions: [],
        columns: [
          {
            title: '年级',
            dataIndex: 'grade',
            key: 'grade',
            align: 'center',
          },
          {
            title: '参加人数',
            dataIndex: 'attendNumber',
            key: 'attendNumber',
            align: 'center',
          },
          {
            title: '通过人数',
            dataIndex: 'passNumber',
            key: 'passNumber',
            align: 'center',
          },
          {
            title: '通过率',
            dataIndex: 'passrate',
            key: 'passrate',
            align: 'center',
          },
        ],
        Url: {
          getDataForHead: '/cet/getDataForHLeadersHome',
          getData: '/cet/getRateByBatch',
          getRateByMajor: '/cet/getRateByMajor',
          getCollegeRate: '/cet/getRateByCollege',
          getEntrydate: '/cet/getEntrydate',
          getCollegeMajor: '/cet/getCollegeMajor',
        },
      };
    },
    mounted() {
      this.query();
      this.majorPassRate();
      this.gradePassRate();
      this.queryMajorByCollege();
    },
    methods: {
      // 查询数据
      async query() {
        this.loadingTable = true;
        let resultData = null;
        try {
          //如果this.batch为null则先赋个值
          if (!this.batch) {
            this.batch = '2024-06-01';
          }
          if (!this.college) {
            this.college = '计算机科学与信息工程学院';
          }
          let params = {
            batch: this.batch,
            college: this.college,
            level: 'cet4',
          };
          resultData = await defHttp.get({ url: this.Url.getData, params });

          console.log('result', resultData);
          //表格数据
          let tableData = [];
          for (let grade in resultData.gradeData) {
            tableData.push({
              grade: grade + '级',
              attendNumber: resultData.gradeData[grade].allStudent,
              passNumber: resultData.gradeData[grade].passed,
              passrate: resultData.gradeData[grade].passRate,
            });
          }
          this.dataSourceCet4 = tableData; //表格数据
          console.log(this.dataSourceCet4, 'dataSourceCet4');
        } finally {
          this.loadingTable = false;
          this.$nextTick(() => {
            //this.dataChart(resultData.data);
            console.log('cet4:', resultData.data);
            this.card_Table();
          });
        }
      },
      async queryMajorByCollege() {
        this.loadingMap5 = true;
        if (!this.college) {
          this.college = '计算机科学与信息工程学院';
        }
        let resultData = await defHttp.get({ url: this.Url.getCollegeMajor });
        let collegeAndMajor = resultData.collegeMajor;
        console.log('11111111111', collegeAndMajor);
        // 从 collegeAndMajor 中查找对应学院的专业
        let majors = collegeAndMajor.find((item) => item.college === this.college);
        console.log('3333', majors);
        majors = majors.major;
        this.majors = majors;
        console.log('444', this.majors);
        let collegeAndMajors = this.majors.map((major) => [this.college, major]);
        console.log('777', collegeAndMajors);
        //this.major = resultData.
        const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
        this.entrydateOptions = getEntrydate.entrydates;
        let entrydate = this.entrydateOptions.map((item) => item.value).splice(-5);
        this.majorentrydate = entrydate;
        let params = {
          college: collegeAndMajors,
          entrydate: entrydate,
        };
        console.log('666');
        let res = await defHttp.post({ url: this.Url.getRateByMajor, params });
        console.log('55555', res.data);
        this.loadingMap5 = false;
        this.$nextTick(() => {
          this.drawChart(res.data);
        });
      },
      //绘画饼图--该批次每一年级的通过率饼图
      async card_Table() {
        this.loadingMap2 = true;
        //console.log(this.passRatePie);
        //console.log('piedata', piedata);
        //如果this.batch为null则先赋个值
        if (!this.batch) {
          this.batch = '2024-06-01';
        }
        if (!this.college) {
          this.college = '计算机科学与信息工程学院';
        }
        let queryParams = {
          batch: this.batch,
          college: this.college,
          level: 'cet4',
        };
        console.log(queryParams, 'queryParams');

        let result = await defHttp.get({ url: this.Url.getData, params: queryParams });
        console.log(result, 'result');
        let chartsData = [];
        for (let key in result.gradeData) {
          chartsData.push({
            name: key + '级',
            value: result.gradeData[key].passRate,
          });
        }
        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: '10%',
            left: 'center',

            itemGap: 3,
            selectedMode: true,
          },
          color: ['#ec2e30', '#c75af1', '#2b9eef', '#eee03f', '#2aed91', '#c5ed3c'],

          series: [
            {
              name: '学院/专业该批次通过人数环形图',
              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: chartsData,
            },
            {
              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: chartsData,
            },
          ],
          animationDurationUpate: 500,
        };
        this.loadingMap2 = false;
        this.$nextTick(() => {
          var myChart = echarts.init(document.getElementById('map2'));
          myChart.setOption(option);
        });
      },
      handleSelectChange() {
        this.loadingMap3 = true;
        this.majorPassRate();
      },
      // 本学院各专业通过率-map3---------------------------------------------
      async majorPassRate() {
        this.loadingMap3 = true;
        console.log('55555555', this.entrydate);
        if (!this.batch) {
          this.batch = '2024-06-01';
        }
        if (!this.college) {
          this.college = ['计算机科学与信息工程学院'];
        }
        //将选择后的entrydate转化为数组
        let entrydateArray = [];
        entrydateArray.push(this.entrydate);
        let queryParams = {
          college: [[this.college]],
          entrydate: entrydateArray,
          level: 'cet4',
        };
        let url = this.Url.getRateByMajor;
        console.log(queryParams, 'queryParams');
        let result = await defHttp.post({ url: url, data: queryParams });
        console.log('88888', result.data);
        if (!result) {
          return;
        }

        //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: this.college + '各专业四级通过率',
            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,
        };
        this.loadingMap3 = false;
        this.$nextTick(() => {
          var myChart = echarts.init(document.getElementById('map3'));
          myChart.setOption(majorOption);
        });
      },
      // 年级通过率map4
      async gradePassRate() {
        this.loadingMap4 = true;
        const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
        this.entrydateOptions = getEntrydate.entrydates;
        let entrydate = this.entrydateOptions.map((item) => item.value);

        const college = ['计算机科学与信息工程学院'];

        let queryParams = {
          college: college,
          entrydate: entrydate,
          level: 'cet4',
        };
        let url = this.Url.getCollegeRate;
        let result = await defHttp.post({ url: url, data: queryParams });
        if (!result) {
          return;
        }
        result = result.data[college];
        let collegeOption = {
          title: {
            text: college + '四级通过率',
            textStyle: {
              fontSize: 14,
            },
          },
          xAxis: {
            data: result.map((item) => item.entrydate),
          },
          //显示数据
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter: function (params) {
              //生成tooltip,加上小圆球
              let result = params[0].name + '<br>';
              for (let i = 0; i < params.length; i++) {
                result += params[i].marker + name + ' : ' + params[i].value + '%' + '<br>';
              }
              return result;
            },
          },
          series: {
            type: 'line',
            data: result.map((item) => item.passRate),
            label: {
              show: true, // 开启标签显示
              position: 'top', // 设置标签显示的位置为上方
              formatter: function (params) {
                // 在标签文本后面添加百分号
                return params.value + '%';
              },
              // 你可以设置其他的标签样式选项，如颜色、字体大小等
            },
            universalTransition: {
              // enabled: true,
              // divideShape: 'clone',
            },
          },
          yAxis: {},

          animationDurationUpdate: 500,
        };
        this.loadingMap4 = false;
        this.$nextTick(() => {
          var myChart = echarts.init(document.getElementById('map4'));
          myChart.setOption(collegeOption);
        });
      },
      //各专业通过率详情map5
      drawChart(data) {
        this.loadingMap5 = true;
        let seriesData = [];
        let xData = this.majorentrydate.sort((a, b) => a - b);
        let k = 0;
        let legendData = [];
        let colors = [
          '#5370c5',
          '#91CC75',
          '#fac858',
          '#ee6666',
          '#73c0de',
          '#FF6A6A',
          '#FFA500',
          '#EE2C2C',
          '#90EE90',
          '#008B8B',
          '#FFC0CB',
          '#FFDAB9',
          '#FFDEAD',
          '#FFE4B5',
          '#FFE4C4',
          '#FFE4E1',
          '#FFEBCD',
          '#FFEFD5',
          '#FFFAF0',
          '#FFFAFA',
          '#FFFFE0',
          '#FFFFF0',
          '#FFFFFF',
          '#F0F8FF',
          '#FAEBD7',
          '#FAF0E6',
          '#FAFAD2',
          '#F5FFFA',
          '#F8F8FF',
          '#F0FFF0',
          '#F0FFFF',
          '#F0E68C',
          '#F0F8FF',
          '#F0FFF0',
          '#F0FFFF',
          '#F4A460',
          '#F5DEB3',
          '#F5F5DC',
          '#F5F5F5',
          '#F5FFFA',
          '#F8F8FF',
          '#F9EBEA',
          '#FAD7A0',
          '#FAF0E6',
          '#FAFAD2',
          '#FAF0E6  ',
        ];
        for (let i in data) {
          console.log(i, 'i');
          legendData.push(i);
          let yData = [];
          // legendData=[];
          console.log(data[i], 'data[i]');

          for (let j in data[i]) {
            console.log(data[i][j].college, 'data[i][j].college111');
            // if(data[i][j].college == ''){
            yData.push(data[i][j].passRate);
            // legendData.push(data[i][j].college);
          }
          console.log(yData, 'yData');
          seriesData.push({
            name: i,
            type: 'bar',
            //设置柱状图大小
            barWidth: 16,
            data: yData,
            //柱子间距
            barGap: '30%',
            //颜色
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: '{c}%',
                  textStyle: {
                    //数值样式
                    color: 'black',
                    fontSize: 13,
                  },
                },
                color: colors[k++],
              },
            },
          });
        }
        // debugger
        let myChart = null;

        myChart = document.getElementById('map5');
        if (myChart) {
          myChart = echarts.getInstanceByDom(myChart);
          if (myChart) {
            myChart.dispose();
          }
        }
        myChart = echarts.init(document.getElementById('map5'));

        // 指定图表的配置项和数据
        let option = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter: function (params) {
              //生成tooltip,加上小圆球
              let result = params[0].name + '级通过率<br>';
              for (let i = 0; i < params.length; i++) {
                result += params[i].marker + legendData[i] + ' : ' + params[i].value + '%' + '<br>';
              }
              return result;
            },
          },
          toolbox: {
            show: true,
            //feature: {
            //  magicType: { show: true, type: ['line', 'bar'] },
            //  restore: { show: true },
            //  saveAsImage: { show: true },
            //},
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              data: xData,
              axisLabel: {
                interval: 0, //代表显示所有x轴标签显示
                rotate: 0, //代表倾斜0度显示
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '通过率',
              axisLabel: {
                formatter: '{value} %',
              },
            },
          ],
          series: seriesData,
        };
        // 使用刚指定的配置项和数据显示图表。
        console.log(option, 'option');
        console.log(myChart, 'myChart');
        this.loadingMap5 = false;
        setTimeout(() => {
          myChart.setOption(option);
        }, 1);
      },
    },
  };
</script>

<style lang="less" scoped>
  .card-title {
    width: 15%;
    height: 10%;
    //text-align: top center;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 10%;
  }
  .card-center {
    width: 31%;
    margin-right: 25px;
    margin-bottom: 10px;
    border-radius: 2%;
  }
  .card-bottom {
    margin-right: 10px;
    height: 300px;
  }
</style>