CET-vue-3.0/src/views/dashboard/Analysis/index.vue

<template>
  <div style="background: #ececec; padding: 15px">
    <a-card title="四级总通过率查询" :loading="loading" :bordered="false">
      <template #extra>
        <a-cascader v-model:value="collegeMajor" :options="collegeMajorOptions" change-on-select />
        <a-select v-model:value="entrydate" style="margin-left: 10px;width: 100px"
          :options="entrydateOptions"></a-select>
        <a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button>
        <!-- <a-button @click=test()>test</a-button> -->
      </template>
      <a-row :gutter="24">
        <a-col :xl="13">
          <div style="padding-left: 10px;min-height: 400px;">
            <a-table :dataSource="dataSourceCet4" :columns="columns" :pagination='false' bordered>
              <template v-slot:passRateSlot>
                累计总通过率
                <a-tooltip title="累计通过人数  /  (学院 / 专业总人数)" placement="top">
                  <a-icon type="question-circle" />
                </a-tooltip>
              </template>
            </a-table>
            <span style="font-size: 15px;float: right;margin-top: 10px;" v-if="total && total > 0">
              学院 / 专业总人数: {{ total }}
            </span>

          </div>
        </a-col>
        <a-col :xl="11">
          <div style="width: 100%;height: 500px;padding: 10px;" class="piechart" id="piechart">

          </div>
        </a-col>
      </a-row>
      <!-- <div style="height: 300px;">
        <a-empty style="margin-top: 100px" />
      </div> -->
    </a-card>
  </div>
</template>

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

export default {
  name: "Analysis",
  data() {
    return {
      loading: false,
      dataSourceCet4: [],
      columns: [
        {
          title: '年级',
          dataIndex: 'grade',
          key: 'grade',
          align: 'center',
          customCell: (_, index) => ({
            rowSpan: index % 2 === 0 ? 2 : 0,
          }),
        },
        {
          title: '考试批次',
          dataIndex: 'batch',
          key: 'batch',
          align: 'center',
        },
        {
          title: '参加人数',
          dataIndex: 'attendNumber',
          key: 'attendNumber',
          align: 'center',
        },
        {
          title: '新通过人数',
          dataIndex: 'passNumber',
          key: 'passNumber',
          align: 'center',
        },
        {
          title: '本批次通过率',
          dataIndex: 'batchpassrate',
          key: 'batchpassrate',
          align: 'center',
        },
        {
          slots: { title: 'passRateSlot' },
          dataIndex: 'gradepassrate',
          key: 'gradepassrate',
          align: 'center',
          customCell: (_, index) => ({
            rowSpan: index % 2 === 0 ? 2 : 0,
          }),
        }
      ],
      Url: {
        getEntrydate: '/cet/getEntrydate',
        getCollege: '/cet/getCollege',
        getData: '/cet/getData',
        getCollegeMajor: '/cet/getCollegeMajor'
      },
      total: 0,
      collegeOptions: [],
      collegeMajorOptions: [],
      entrydateOptions: [],
      college: null,
      entrydate: null,
      collegeMajor: null
    };
  },
  methods: {
    // 获取年级和学院数据
    async getEntrydateAndCollegeData() {
      const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
      const getCollege = await defHttp.get({ url: this.Url.getCollege });
      this.collegeOptions = getCollege.colleges;
      // 手动添加一个全校字段
      this.collegeOptions.unshift({ value: '全校', label: '全校' });
      this.college = this.collegeOptions[0].value;
      this.entrydateOptions = getEntrydate.entrydates;
      this.entrydate = this.entrydateOptions[0].value;
    },
    //获取学院专业级联数据
    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.collegeMajorOptions.unshift({ value: '专升本', label: '专升本' });
      // 手动添加一个全校字段
      this.collegeMajorOptions.unshift({ value: '全校', label: '全校' });
      this.collegeMajor = ['全校'];
      console.log(this.collegeMajorOptions);
    },

    // 查询数据
    async query() {
      try {
        //如果this.collegeMajor[1]不存在则设为null
        let major = this.collegeMajor.length > 1 ? this.collegeMajor[1] : "";
        if (this.college)
          this.loading = true;
        let params = {
          college: this.collegeMajor[0],
          major: major,
          entrydate: this.entrydate
        }
        console.log("params", params);
        const result = await defHttp.get({ url: this.Url.getData, params });
        let tableData = [];
        let piedata = [];
        let passrate = 0;
        let index = 0;
        for (let grade in result.cet4) {
          result.cet4[grade].forEach(item => {
            if (index % 2 == 0) {
              piedata.push({ value: parseFloat(item.gradepassrate - passrate).toFixed(3), name: grade + "时通过" });

              passrate = parseFloat(item.gradepassrate).toFixed(3);
            }
            index++

            tableData.push({
              grade: grade,
              attendNumber: item.attendNumber,
              batch: item.batch,
              gradepassrate: item.gradepassrate,
              passNumber: item.passNumber,
              batchpassrate: item.batchpassrate
            });
          });
        }

        console.log("tableData", tableData);
        this.dataSourceCet4 = tableData;
        this.total = result.total;
        piedata.push({ value: (1 - passrate).toFixed(3), name: '未通过' });
        setTimeout(() => {
          this.drawPieChart(piedata);
        }, 100);
        // this.drawPieChart();
      } finally {
        this.loading = false;
      }
    },
    test() {
      defHttp.get({ url: "/cet/getTest" });
    },
    renderGrade(record, index) {
      console.log(record, "record", index, "index");
      console.log(record.grade)
      if (index % 2 == 0) {
        return {
          children: record.grade,
          attrs: {
            rowSpan: 2
          }
        }

      } else {
        return {
          children: record.grade,
          attrs: {
            rowSpan: 0
          }
        }
      }
    },
    drawPieChart(piedata) {
      let myChart = echarts.init(document.getElementById('piechart'));
      let option = {
        tooltip: {
          trigger: 'item',
          confine: false,
        },
        title: {
          text: '四级通过率分析',
          left: 'left',
          top: '0%',
          textStyle: {
            fontSize: 20
          }
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '四级通过率',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {

              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            // label: {
            //   show: false,
            //   position: 'center'
            // },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            // labelLine: {
            //   show: false
            // },
            data: piedata
          }
        ]
      };



      myChart.setOption(option);
    }
  },
  mounted() {
    this.getEntrydateAndCollegeData();
    this.getCollegeMajorData();
  }


}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.title {
  font-size: 34px;
  color: rgb(8, 8, 8);
  font-weight: bold;
}
</style>