四级可视化分析1.1

2024-04-10 21:34:49 +08:00 · 2024-04-10 21:34:49 +08:00 · 9d1b7cc623
parent 171dc8f3f6
commit 9d1b7cc623
5 changed files with 443 additions and 35 deletions
--- a/src/utils/http/axios/index.ts
+++ b/src/utils/http/axios/index.ts
@ -246,7 +246,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
        // authenticationScheme: 'Bearer',
        authenticationScheme: '',
        //接口超时设置
-        timeout: 10 * 1000,
+        timeout: 15 * 1000,
        // 基础接口地址
        // baseURL: globSetting.apiUrl,
        headers: { 'Content-Type': ContentTypeEnum.JSON },
--- a/src/views/cet/cet-ana-1.vue
+++ b/src/views/cet/cet-ana-1.vue
@ -1,11 +1,11 @@
 <template>
-  <div style="background: #ececec; padding: 25px">
+  <div style="background: #ececec; padding: 15px">
    <a-card title="按学院 / 专业分析" :loading="loading" :bordered="false">
      <template #extra>
-        <a-select v-model:value="college" style="width: 300px" :options="collegeOptions"></a-select>
+        <a-select v-model:value="college" style="width: 300px" mode="multiple" :max-tag-count="2" :options="collegeOptions" @change="onCollegeMajorChange"></a-select>
        <!-- <a-select v-model:value="batch" style="margin-left: 10px;width: 120px" :options="batchOptions"></a-select> -->
        <!-- <a-select v-model:value="level" style="margin-left: 10px;width: 120px" :options="levelOptions"></a-select> -->
-        <a-select v-model:value="entrydate" style="margin-left: 10px;width: 100px"
+        <a-select v-model:value="entrydate"  style="margin-left: 10px;width: 150px"
          :options="entrydateOptions"></a-select>
        <a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button>
      </template>
@ -32,7 +32,7 @@ export default {
        getBatch: '/cet/getBatch',
        getEntrydate: '/cet/getEntrydate',
        getCollege: '/cet/getCollege',
-        getRate: '/cet/getRateByBatch'
+        getRate: '/cet/getRateByCollege'
      },
      loading: false,
      collegeOptions: [],
@ -55,9 +55,35 @@ export default {
        this.collegeOptions = res.colleges;
        // 手动添加一个全校字段
        this.collegeOptions.unshift({ value: '全校', label: '全校' });
-        this.college = this.collegeOptions[0].value;
+        this.collegeOptions.forEach(option => {
+          if (option.value !== '全校') {
+            option.disabled = true;
+          }
+        
+        });
+        this.college = ['全校'];
      });
    },
+    onCollegeMajorChange(value) {
+    if (value.includes('全校')) {
+      this.collegeOptions.forEach(option => {
+        if (option.value !== '全校') {
+          option.disabled = true;
+        }
+      });
+    }else{
+      this.collegeOptions.forEach(option => {
+        option.disabled = false;
+        if (value!=='全校'&&option.value === '全校') {
+          option.disabled = true;
+        }
+        if(value.length===0){
+          option.disabled = false;
+        }
+      });
+    }
+    console.log(value);
+  },
    dataChart(data) {
      let xData = [];
      let yData = [];
@ -66,6 +92,8 @@ export default {
        // 将数据转换为百分比（加上%）
        yData.push(data[key].passRate);
      }
+      let rankData = yData.slice().sort((a, b) => b - a).map((value) => yData.indexOf(value) + 1);
+      xData = xData.map(label => label.split("").join("\n"));//将x轴竖着展示
      let myChart = echarts.init(document.getElementById("map1"));
      // 指定图表的配置项和数据
      let option = {
@ -76,12 +104,19 @@ export default {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
+          },
+          formatter: function (params) {
+            return params[0].name + '<br/>' +
+              '<table>' +
+              '<tr><td>' + params[0].marker + params[0].seriesName + '</td><td style="font-weight: bold;">'+'&nbsp;&nbsp;&nbsp;&nbsp;' + params[0].value + '%' + '</td></tr>' +
+              '<tr><td>' + params[1].marker + params[1].seriesName + '</td><td style="font-weight: bold;">'+'&nbsp;&nbsp;&nbsp;&nbsp;' + params[1].value + '</td></tr>' +
+              '</table>';
          }
        },
        toolbox: {
          show: true,
          feature: {
-            dataView: { show: true, readOnly: false },
+
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
@ -98,14 +133,23 @@ export default {
            type: 'category',
            data: xData,
            axisLabel: {
-              interval: 1,//代表显示所有x轴标签显示
-              rotate: -20,//代表倾斜30度显示
+              interval: 0,//代表显示所有x轴标签显示
+              rotate: 0,//代表倾斜0度显示
            }
          }
        ],
        yAxis: [
          {
-            type: 'value'
+            type: 'value',
+            name: '通过率',
+            axisLabel: {
+              formatter: '{value} %'
+            }
+          },
+          {
+            type: 'value',
+            name: '排名',
+            show: false,
          }
        ],
        series: [
@ -122,11 +166,24 @@ export default {
                  textStyle: { //数值样式
                    color: 'black',
                    fontSize: 13
-                  }
+                  },
+                  formatter: '{c}%'
                }
              }
-            }
-          }
+            },
+            yAxisIndex: 0,
+          },
+          {
+            name: '排名',
+            type: 'bar',
+            data: rankData,
+            label: {
+              show: false,
+              position: 'inside',
+              formatter: '{c}',
+            },
+            yAxisIndex: 1,
+          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
@ -150,25 +207,27 @@ export default {
      let result = null;
      console.log(this.college, this.entrydate);
      //如果this.college和this.batch为null则先赋静态值
-      if (!this.college) {
-        this.college = '全校';
+      if (this.college===null||this.college.length===0) {
+        this.college = ['全校'];
      }
      if (!this.entrydate) {
        this.entrydate = '2017';
      }
      try {
        this.loading = true;
+        console.log(this.college, this.entrydate)
        let params = {
          college: this.college,
          entrydate: this.entrydate,
          level: 'cet4'
        }
-        result = await defHttp.get({ url: this.Url.getRate, params });
+        console.log(params.college,"college")
+        result = await defHttp.post({ url: this.Url.getRate, params });
        //使数据按照passRate从大到小排序
        result.data.sort((a, b) => {
          return b.passRate - a.passRate;
        });
-        console.log("data",result.data);
+        console.log("data", result.data);
      } finally {
        this.loading = false;
        this.$nextTick(() => {
--- a/src/views/cet/cet-ana-2.vue
+++ b/src/views/cet/cet-ana-2.vue
@ -1,6 +1,6 @@
 <template>
-  <div style="background: #ececec; padding: 25px">
-    <a-card title="按批次分析" :loading="loading" :bordered="false">
+  <div style="background: #ececec; padding: 15px">
+    <a-card title="按批次对比分析" :loading="loading" :bordered="false">
      <template #extra>
        <!-- <a-select v-model:value="college" style="width: 300px" :options="collegeOptions"></a-select> -->
        <a-cascader v-model:value="collegeMajor" :options="collegeMajorOptions" change-on-select />
@ -30,7 +30,7 @@ export default {
      Url: {
        getBatch: '/cet/getBatch',
        getCollege: '/cet/getCollege',
-        getRate: '/cet/getRateByCollege',
+        getRate: '/cet/getRateByAllBatch',
        getCollegeMajor: '/cet/getCollegeMajor'
      },
      loading: false,
@ -54,7 +54,7 @@ export default {
      for (let key in data) {
        xData.push(key);
        // 将数据转换为百分比（加上%）
-        yData.push((data[key] * 100).toFixed(2));
+        yData.push((data[key]).toFixed(1));
      }
      let myChart = echarts.init(document.getElementById("map1"));
      // 指定图表的配置项和数据
@ -66,18 +66,29 @@ export default {
          type: 'category',
          data: xData,
          axisLabel: {
-                interval:0,//代表显示所有x轴标签显示
-                rotate:-20,//代表倾斜30度显示
-            }
+            interval: 0,//代表显示所有x轴标签显示
+            rotate: -20,//代表倾斜30度显示
+          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
+          },
+          formatter: function (params) {
+            return params[0].name + '<br/>' +
+              '<table>' +
+              '<tr><td>' + params[0].marker    + '</td><td style="font-weight: bold;">' + '&nbsp;&nbsp;&nbsp;&nbsp;' + params[0].value + '%' + '</td></tr>' +
+              '<tr>'
+              + '</table>';
          }
        },
        yAxis: {
-          type: 'value'
+          type: 'value',
+          name: '通过率',
+          axisLabel: {
+              formatter: '{value} %'
+            }
        },
        series: [
          {
@ -91,7 +102,8 @@ export default {
                  textStyle: { //数值样式
                    color: 'black',
                    fontSize: 12
-                  }
+                  },
+                  formatter: '{c}%',
                }
              }
            }
--- a/src/views/cet/cet-ana-3.vue
+++ b/src/views/cet/cet-ana-3.vue
@ -0,0 +1,212 @@
+<template>
+    <div style="background: #ececec; padding: 15px">
+      <a-card title="按批次对比分析" :loading="loading" :bordered="false">
+        <template #extra>
+          <a-select v-model:value="collegeMajor" style="width: 300px" :options="collegeMajorOptions" ></a-select>
+          <a-select v-model:value="batch" :options="batchOptions" change-on-select style="margin-left: 10px;width: 100px" />
+          <a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button>
+        </template>
+        <div>
+          <a-row :gutter="24">
+            <a-col :xl="24" :style="{ marginBottom: '24px' }">
+              <div class="container">
+                <div id="map1" style="width: 100%; height: 400px;"></div>
+              </div>
+            </a-col>
+          </a-row>
+        </div>
+      </a-card>
+    </div>
+  </template>
+  
+  <script>
+  import { defHttp } from '/@/utils/http/axios';
+  import * as echarts from 'echarts';
+  
+  export default {
+    name: "Analysis",
+   
+    data() {
+      return {
+        Url: {
+          getBatch: '/cet/getBatch',
+          getCollege: '/cet/getCollege',
+          getRate: '/cet/getRateByBatch',
+          getCollegeMajor: '/cet/getCollegeMajor'
+        },
+        loading: false,
+        collegeOptions: [],
+        collegeMajorOptions: [],
+        batchOptions: [],
+        levelOptions: [
+          { value: 'cet4', label: '英语四级' },
+          { value: 'cet6', label: '英语六级' }
+        ],
+        level: null,
+        college: null,
+        batch: null,
+        collegeMajor: null
+      };
+    },
+    methods: {
+      dataChart(data) {
+        let xData = [];
+        let yData = [];
+        console.log(data,"data")
+        for (let key in data) {
+          xData.push(key);
+          // 将数据转换为百分比（加上%）
+          yData.push((data[key]).toFixed(1));
+        }
+        let myChart = echarts.init(document.getElementById("map1"));
+        // 指定图表的配置项和数据
+        let option = {
+          title: {
+            text: "学院 / 专业通过率变化",
+          },
+          xAxis: {
+            type: 'category',
+            data: xData,
+            axisLabel: {
+              interval: 0,//代表显示所有x轴标签显示
+              rotate: -20,//代表倾斜30度显示
+            }
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            },
+            formatter: function (params) {
+              return params[0].name + '<br/>' +
+                '<table>' +
+                '<tr><td>' + params[0].marker    + '</td><td style="font-weight: bold;">' + '&nbsp;&nbsp;&nbsp;&nbsp;' + params[0].value + '%' + '</td></tr>' +
+                '<tr>'
+                + '</table>';
+            }
+          },
+          yAxis: {
+            type: 'value',
+            name: '通过率',
+            axisLabel: {
+                formatter: '{value} %'
+              }
+          },
+          series: [
+            {
+              data: yData,
+              type: 'line',
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true, //开启显示
+                    position: 'top', //在上方显示
+                    textStyle: { //数值样式
+                      color: 'black',
+                      fontSize: 12
+                    },
+                    formatter: '{c}%',
+                  }
+                }
+              }
+            }
+          ]
+        };
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+      },
+      // 获取批次数据
+      async getBatch() {
+        const getBatch = await defHttp.get({ url: this.Url.getBatch });
+        this.batchOptions = getBatch.batches.map(item => {
+          return {
+            value: item.value,
+            label: item.label
+          }
+        });
+        // const getCollege = await defHttp.get({ url: this.Url.getCollege });
+  
+        // this.collegeOptions = getCollege.colleges;
+        // this.college = this.collegeOptions[0].value;
+  
+        this.level = this.levelOptions[0].value;
+  
+        // this.query();
+      },
+      //获取学院专业级联数据
+      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.collegeMajor = this.collegeMajorOptions[0].value;
+        console.log(this.collegeMajor)
+        console.log(this.collegeMajorOptions);
+      },
+      // 查询数据
+      async query() {
+        let data = null;
+        try {
+          console.log("sb", this.batch);
+          //如果this.batch为null则先赋个值
+          if (!this.batch) {
+            this.batch = '2017-12-01';
+          }
+          if (!this.collegeMajor) {
+            this.collegeMajor = '全校';
+          }
+          //如果this.batch[1]不存在则设为null
+          let major = this.batch.length > 1 ? this.batch[1] : "";
+          this.loading = true;
+          let params = {
+            batch: this.batch,
+            college: this.collegeMajor,
+            level: 'cet4',
+          }
+          console.log("params", params);
+          data = await defHttp.get({ url: this.Url.getRate, params });
+        } finally {
+          this.loading = false;
+          this.$nextTick(() => {
+            this.dataChart(data);
+          })
+        }
+      }
+    },
+    mounted() {
+      this.getCollegeMajorData();
+      this.getBatch();
+      this.query();
+    }
+  
+  }
+  </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>
+  
--- a/src/views/dashboard/Analysis/index.vue
+++ b/src/views/dashboard/Analysis/index.vue
@ -1,5 +1,5 @@
 <template>
-  <div style="background: #ececec; padding: 25px">
+  <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 />
@ -9,7 +9,7 @@
        <!-- <a-button @click=test()>test</a-button> -->
      </template>
      <a-row :gutter="24">
-        <a-col :xl="14">
+        <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>
@ -22,9 +22,18 @@
            <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>
@ -45,16 +54,18 @@ export default {
          dataIndex: 'grade',
          key: 'grade',
          align: 'center',
+          customCell: (_, index) => ({
+            rowSpan: index % 2 === 0 ? 2 : 0,
+          }),
        },
        {
          title: '考试批次',
          dataIndex: 'batch',
          key: 'batch',
          align: 'center',
-          //数据显示上下两行
        },
        {
-          title: '总参加人数',
+          title: '参加人数',
          dataIndex: 'attendNumber',
          key: 'attendNumber',
          align: 'center',
@ -66,10 +77,19 @@ export default {
          align: 'center',
        },
        {
-          slots: { title: 'passRateSlot' },
-          dataIndex: 'passRate',
-          key: 'passRate',
+          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: {
@ -122,6 +142,7 @@ export default {
      this.collegeMajor = ['全校'];
      console.log(this.collegeMajorOptions);
    },
+
    // 查询数据
    async query() {
      try {
@ -136,15 +157,118 @@ export default {
        }
        console.log("params", params);
        const result = await defHttp.get({ url: this.Url.getData, params });
-        this.dataSourceCet4 = result.cet4;
-        this.total = result.total;
+        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() {
@ -152,6 +276,7 @@ export default {
    this.getCollegeMajorData();
  }

+
 }
 </script>