四级可视化分析1.1

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 },

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,8 +55,34 @@ 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 = [];
@@ -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轴标签显示
+              interval: 0,//代表显示所有x轴标签显示
-              rotate: -20,//代表倾斜30度显示
+              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) {
+      if (this.college===null||this.college.length===0) {
-        this.college = '全校';
+        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(() => {

src/views/cet/cet-ana-2.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="background: #ececec; padding: 25px">
+  <div style="background: #ececec; padding: 15px">
-    <a-card title="按批次分析" :loading="loading" :bordered="false">
+    <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轴标签显示
+            interval: 0,//代表显示所有x轴标签显示
-                rotate:-20,//代表倾斜30度显示
+            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}%',
                 }
               }
             }

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>
+  

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' },
+          title: '本批次通过率',
-          dataIndex: 'passRate',
+          dataIndex: 'batchpassrate',
-          key: 'passRate',
+          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;
+        let tableData = [];
-        this.total = result.total;
+        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>