完善学院对比功能

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

@@ -3,11 +3,116 @@
 
 
     <a-card :bordered="false">
+      <a-tabs v-model:activeKey="activeKey" type="card">
+
+
+        <a-tab-pane key="1" tab="查询全校各学院通过率">
 
           <div>
-        <a-button type="primary" @click="visible = true">打开筛选项</a-button>
+            <div class="query">
+              <a-select v-model:value="oneentrydate" style="width: 200px" :options="entrydateOptions"
+                @change="onCollegeMajorChange"></a-select>
+              <a-button style="margin-left: 10px;" type="primary" @click="allQuery">查询</a-button>
             </div>
-      <a-drawer placement="right" :visible="visible" width="90%" :closable="false">
+
+            <a-card title="查询全校各学院通过率" :loading="tab1loading" :bordered="false">
+              <template #extra>
+                <!-- <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: 150px"
+          :options="entrydateOptions"></a-select>
+        <a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button> -->
+              </template>
+              <a-row :gutter="24">
+                <a-col :xl="24" :style="{ marginBottom: '24px' }">
+                  <div class="container">
+                    <div id="map1" style="width: 100%; height: 600px;"></div>
+                  </div>
+                </a-col>
+              </a-row>
+            </a-card>
+
+          </div>
+
+
+
+
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="对比多学院" force-render>
+
+
+          <div>
+            <div class="query">
+              <a-select v-model:value="collegetab2" style="width: 300px;margin-right: 20px;" mode="multiple"
+                :max-tag-count="2" :options="collegeOptions" @change="onCollegeMajorChange"></a-select>
+              <a-select v-model:value="collegeentrydate" style="width: 200px" :options="entrydateOptions"
+                mode="multiple" :max-tag-count="2" @change="onCollegeMajorChange"></a-select>
+              <a-button style="margin-left: 10px;" type="primary" @click="collegeQuery">查询</a-button>
+            </div>
+
+            <a-card title="按学院分析" :loading="tab2loading" :bordered="false">
+              <template #extra>
+                <!-- <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: 150px"
+          :options="entrydateOptions"></a-select>
+        <a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button> -->
+              </template>
+              <a-row :gutter="24">
+                <a-col :xl="24" :style="{ marginBottom: '24px' }">
+                  <div class="container">
+                    <div id="map2" style="width: 100%; height: 600px;"></div>
+                  </div>
+                </a-col>
+              </a-row>
+            </a-card>
+
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="3" tab="对比多专业">
+
+
+          <div>
+            <div class="query">
+              <a-cascader v-model:value="collegeMajor" style="width: 300px;margin-right: 20px;"
+                :options="collegeMajorOptions" :changeOnSelect="false" multiple :maxTagCount="2" />
+              <a-select v-model:value="majorentrydate" style="width: 200px" :options="entrydateOptions" mode="multiple"
+                :max-tag-count="2" @change="onCollegeMajorChange"></a-select>
+              <a-button style="margin-left: 10px;" type="primary" @click="majorQuery">查询</a-button>
+            </div>
+
+            <a-card title="按专业分析" :loading="tab3loading" :bordered="false">
+              <template #extra>
+                <!-- <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: 150px"
+          :options="entrydateOptions"></a-select>
+        <a-button style="margin-left: 10px;" type="primary" @click="query">查询</a-button> -->
+              </template>
+              <a-row :gutter="24">
+                <a-col :xl="24" :style="{ marginBottom: '24px' }">
+                  <div class="container">
+                    <div id="map3" style="width: 100%; height: 600px;"></div>
+                  </div>
+                </a-col>
+              </a-row>
+            </a-card>
+
+          </div>
+
+
+        </a-tab-pane>
+      </a-tabs>
+      <!-- <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>
@@ -42,7 +147,7 @@
 
         </div>
 
-      </a-drawer>
+      </a-drawer> -->
 
     </a-card>
 
@@ -51,8 +156,8 @@
 
 
 
-    <a-card title="按学院 / 专业分析" :loading="loading" :bordered="false">
+    <!-- <a-card title="按学院 / 专业分析" :loading="loading" :bordered="false">
-      <template #extra>
+      <template #extra> -->
     <!-- <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> -->
@@ -60,7 +165,7 @@
     <!-- <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>
+    <!-- </template>
       <a-row :gutter="24">
         <a-col :xl="24" :style="{ marginBottom: '24px' }">
           <div class="container">
@@ -68,7 +173,7 @@
           </div>
         </a-col>
       </a-row>
-    </a-card>
+    </a-card> -->
   </div>
 </template>
 
@@ -77,22 +182,35 @@ import { defHttp } from '/@/utils/http/axios';
 import * as echarts from 'echarts';
 import bar from '/@/components/Scrollbar/src/bar';
 import { message } from 'ant-design-vue';
+
 export default {
   name: "Analysis",
   data() {
     return {
-      allCollege:[],
+      activeKey: '1',
+      allCollege: [],
       showBox: false,
       showGroup: false,
       oneentrydate: null,
+      collegeentrydate: [],
+      majorentrydate: [],
       checkedOptions: [],
+      collegetab2: [],
+      collegeMajorOptions: [],
+      collegeMajor: [],
       Url: {
         getBatch: '/cet/getBatch',
         getEntrydate: '/cet/getEntrydate',
         getCollege: '/cet/getCollege',
-        getRate: '/cet/getRateByCollege'
+        getRate: '/cet/getRateByCollege',
+        getCollegeMajor: '/cet/getCollegeMajor',
+        getRateByMajor: '/cet/getRateByMajor',
+
       },
-      loading: false,
+      tab1loading: false,
+      tab2loading: false,
+      tab3loading: false,
+
       collegeOptions: [],
       batchOptions: [],
       levelOptions: [
@@ -109,7 +227,43 @@ export default {
     };
   },
   methods: {
+    allQuery() {
+      this.tab1loading = true;
+      let college = ['全校'];
+      let query = 'tab1'
+      if (this.oneentrydate == null) {
+        this.oneentrydate = '2017';
+      }
+      this.query(query, college, [this.oneentrydate]);
+    },
+    async majorQuery() {
+      this.tab3loading = true;
+      let res = null;
+      try {
+        let params = {
+          college: this.collegeMajor,
+          entrydate: this.majorentrydate,
+        }
+        res = await defHttp.post({ url: this.Url.getRateByMajor, params });
+      }
+      finally {
+        console.log(res, "res")
+        this.tab3loading = false;
+        this.$nextTick(() => {
+          this.drawChart(res.data, 'tab3');
+        })
 
+      }
+    },
+    collegeQuery() {
+      this.tab2loading = true;
+      let query = 'tab2'
+      this.query(query, this.collegetab2, this.collegeentrydate);
+    },
+    test(value) {
+      console.log(this.collegeMajor)
+      console.log(value)
+    },
     //选择全校
     checkAll(e) {
       this.college = ['全校']
@@ -131,12 +285,33 @@ export default {
       this.entrydate = [e.target.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.collegeMajor = [[this.collegeMajorOptions[0].value]];
+      console.log(this.collegeMajorOptions, "collegeMajorOptions");
+    },
+
     getCollegeOptions() {
       defHttp.get({ url: this.Url.getCollege }).then(res => {
         this.collegeOptions = res.colleges;
         // 手动添加一个全校字段
 
-        //this.collegeOptions.unshift({ value: '全校', label: '全校' });
+        // this.collegeOptions.unshift({ value: '全校', label: '全校' });
         // this.collegeOptions.forEach(option => {
         //  if (option.value !== '全校') {
         //     option.disabled = true;
@@ -144,29 +319,20 @@ export default {
 
         //  });
         //  this.college = ['全校'];
+        this.collegetab2 = ['地理科学学院', '文学院'];
         console.log(this.collegeOptions, "collegeOptions");
 
       });
     },
     onCollegeMajorChange(value) {
-      if (value.includes('全校')) {
+        console.log(value, "value")
-        this.collegeOptions.forEach(option => {
+        if(value.length>3){
-          if (option.value !== '全校') {
+          message.error("最多选择三个")
-            option.disabled = true;
+          //删除value最后一个数据
+          value.pop();
+
+          return
         }
-        });
-      } 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);
     },
     // deleteData() {
     //   console.log("delete")
@@ -177,7 +343,133 @@ export default {
     //   this.checkedOptions = [];
     //   this.allCollege = [];
     // },
-    dataChart(data) {
+
+    //tab3图标
+    drawChart(data,tab){
+      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  ']
+      let isJK = false;
+      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: 25,
+          data: yData,
+          //柱子间距
+          barGap: '30%',
+          //颜色
+          itemStyle: {
+            normal: {
+              label: {
+                show: true,//开启显示
+                position: 'top',//在上方显示
+                formatter: '{c}%',
+                textStyle: { //数值样式
+                  color: 'black',
+                  fontSize: 13
+                },
+              },
+              color: colors[k++]
+            }
+
+          }
+        });
+      }
+      console.log(legendData,"legendData")
+      console.log(seriesData,'dasaaseriresdata')
+      // debugger
+      let myChart = null;
+      if (tab == 'tab2') {
+        myChart = echarts.init(document.getElementById("map2"));
+      } else if (tab == 'tab3') {
+        myChart = echarts.init(document.getElementById("map3"));
+      }
+      // 指定图表的配置项和数据
+      let option = {
+        title: {
+          text: "本批次学院通过率排名",
+        },
+        // legend: legendData,
+        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")
+      myChart.setOption(option);
+    },
+    //tab2图表
+    tab2drawChart(data){
+
+    },
+
+    dataChart(data, tab) {
       let seriesData = [];
       let xData = [];
       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  ']
@@ -192,12 +484,13 @@ export default {
           // 将数据转换为百分比（加上%）
           yData.push(data[i][key].passRate);
         }
+        
         xData = xData.map(label => label.split("").join("\n"));//将x轴竖着展示
         seriesData.push({
           name: i + '级累计总通过率',
           type: 'bar',
           //设置柱状图大小
-					barWidth: "10%",
+          barWidth: 25,
           data: yData,
           //柱子间距
           barGap: '30%',
@@ -210,7 +503,7 @@ export default {
                 formatter: '{c}%',
                 textStyle: { //数值样式
                   color: 'black',
-                  fontSize: 10
+                  fontSize: 13
                 },
               },
               color: colors[j++]
@@ -220,7 +513,7 @@ export default {
         });
         let rankData = yData.slice().sort((a, b) => b - a).map((value) => yData.indexOf(value) + 1);
         //如果选择全校，增加排名
-        if (this.college.includes('全校')) {
+        if (tab == 'tab1') {
           seriesData.push({
             name: i + '级累计总通过率排名',
             type: 'line',
@@ -248,9 +541,16 @@ export default {
           });
         }
       }
-      let myChart = echarts.init(document.getElementById("map1"));
+      let myChart = null;
+      if (tab == 'tab2') {
+        myChart = echarts.init(document.getElementById("map2"));
+      } else if (tab == 'tab1') {
+        myChart = echarts.init(document.getElementById("map1"));
+      } else if (tab == 'tab3') {
+        myChart = echarts.init(document.getElementById("map3"));
+      }
       // 指定图表的配置项和数据
-      const college1 = this.college;
+      // const college1 = this.college;
       let option = {
         title: {
           text: "本批次学院通过率排名",
@@ -266,7 +566,7 @@ export default {
             for (let i = 0; i < params.length; i++) {
               result += params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%' + '<br>';
             }
-            if (college1.includes('全校')) {
+            if (tab == 'tab1') {
               result = 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>' +
@@ -317,13 +617,13 @@ export default {
         ],
         series: seriesData
       };
-      if (this.college.includes('全校')) {
+      if (tab == 'tab1') {
         option.series = [{
           name: '累计总通过率',
           type: 'bar',
           data: seriesData[0].data,
           //设置柱状图大小
-					barWidth: 20,
+          barWidth: 25,
           // barWidth: '60%',
           itemStyle: {
             normal: {
@@ -357,6 +657,7 @@ export default {
         ]
       }
       // 使用刚指定的配置项和数据显示图表。 
+
       myChart.setOption(option);
     },
     // 获取批次数据
@@ -365,15 +666,20 @@ export default {
       this.batchOptions = getBatch.batches;
       this.batch = this.batchOptions[0].value;
       this.level = this.levelOptions[0].value;
+
     },
     //获取年级数据
     async getEntrydate() {
       const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
       this.entrydateOptions = getEntrydate.entrydates;
+      this.oneentrydate = this.entrydateOptions[0].value;
+      this.collegeentrydate = [this.entrydateOptions[0].value];
+      this.majorentrydate = [this.entrydateOptions[0].value];
       // this.entrydate.push (this.entrydateOptions[0].value);
     },
     // 查询数据
-    async query() {
+    async query(query, college, entrydate) {
+
       this.visible = false;
       let result = null;
       console.log(this.college, this.entrydate);
@@ -388,11 +694,10 @@ export default {
       }
 
       try {
-        this.loading = true;
         console.log(this.college, this.entrydate)
         let params = {
-          college: this.college,
+          college: college,
-          entrydate: this.entrydate,
+          entrydate: entrydate,
           level: 'cet4'
         }
         console.log(params.college, "college")
@@ -403,9 +708,15 @@ export default {
         // });
         console.log("data", result.data);
       } finally {
-        this.loading = false;
+        query == 'tab1' ? this.tab1loading = false : this.tab2loading = false;
         this.$nextTick(() => {
-          this.dataChart(result.data);
+          if (query == 'tab1') {
+            this.dataChart(result.data, query);
+          } else if (query == 'tab2') {
+            this.drawChart(result.data);
+
+          }
+
         })
       }
     }
@@ -414,7 +725,8 @@ export default {
     this.getCollegeOptions();
     // this.getBatch();
     this.getEntrydate();
-    this.query();
+    this.allQuery();
+    this.getCollegeMajorData();
   }
 
 }
@@ -429,6 +741,14 @@ export default {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
 }
 
+.query {
+  //居右
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 10px;
+
+}
+
 .title {
   font-size: 34px;
   color: rgb(8, 8, 8);