From bbe7ca90831a835494d40a8827742fad7f19e7d6 Mon Sep 17 00:00:00 2001
From: Cool <747682928@qq.com>
Date: Fri, 26 Apr 2024 21:31:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=93=E4=B8=9A=E5=AF=B9?=
 =?UTF-8?q?=E6=AF=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/cet/cet-ana-1.vue | 672 +++++++++++++++++++++++-------------
 1 file changed, 435 insertions(+), 237 deletions(-)

diff --git a/src/views/cet/cet-ana-1.vue b/src/views/cet/cet-ana-1.vue
index b0fe311..441f0d6 100644
--- a/src/views/cet/cet-ana-1.vue
+++ b/src/views/cet/cet-ana-1.vue
@@ -1,17 +1,15 @@
 <template>
   <div style="background: #ececec; padding: 15px">
-
-
     <a-card :bordered="false">
       <a-tabs v-model:activeKey="activeKey" type="card">
-
-
         <a-tab-pane key="1" tab="查询全校各学院通过率">
-
           <div>
             <div class="query">
+              <span style="font-size: 15px; margin-right: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold"
+                >年级:
+              </span>
               <a-select v-model:value="oneentrydate" style="width: 200px" :options="entrydateOptions"></a-select>
-              <a-button style="margin-left: 10px;" type="primary" @click="allQuery">查询</a-button>
+              <a-button style="margin-left: 10px" type="primary" @click="allQuery">查询</a-button>
             </div>
 
             <a-card title="查询全校各学院通过率" :loading="tab1loading" :bordered="false">
@@ -27,28 +25,39 @@
               <a-row :gutter="24">
                 <a-col :xl="24" :style="{ marginBottom: '24px' }">
                   <div class="container">
-                    <div id="map1" style="width: 100%; height: 600px;"></div>
+                    <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>
+              <span style="font-size: 15px; margin-right: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold"
+                >学院:
+              </span>
+              <a-select
+                v-model:value="collegetab2"
+                style="width: 300px; margin-right: 20px"
+                mode="multiple"
+                :max-tag-count="5"
+                :options="collegeOptions"
+                @change="onCollegeChange"
+              ></a-select>
+              <span style="font-size: 15px; margin-right: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold"
+                >年级:
+              </span>
+              <a-select
+                v-model:value="collegeentrydate"
+                style="width: 200px"
+                :options="entrydateOptions"
+                mode="multiple"
+                :max-tag-count="5"
+                @change="onCollegeChange"
+              ></a-select>
+              <a-button style="margin-left: 10px" type="primary" @click="collegeQuery">查询</a-button>
             </div>
 
             <a-card title="按学院分析" :loading="tab2loading" :bordered="false">
@@ -64,25 +73,55 @@
               <a-row :gutter="24">
                 <a-col :xl="24" :style="{ marginBottom: '24px' }">
                   <div class="container">
-                    <div id="map2" style="width: 100%; height: 600px;"></div>
+                    <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">
+            <div class="tab3">
+              <!-- <span style="font-size: 15px;margin-right: 10px; display: flex;justify-content: center;align-items: center;
+              font-weight: bold;">专业: </span>
               <a-cascader v-model:value="collegeMajor" style="width: 300px;margin-right: 20px;"
-                :options="collegeMajorOptions" :changeOnSelect="false" multiple :maxTagCount="2"
+                :options="collegeMajorOptions" :changeOnSelect="false" multiple :maxTagCount="5" expandTrigger="hover"
                 @change="onMajorChange" />
+              <span style="font-size: 15px;margin-right: 10px;font-weight: bold;display: flex;
+              justify-content: center;align-items: center;">年级: </span>
               <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>
+                :max-tag-count="5" @change="onCollegeMajorChange"></a-select>
+              <a-button style="margin-left: 10px;" type="primary" @click="majorQuery">查询</a-button> -->
+              <div style="display: flex">
+                <span style="font-size: 15px; margin-right: 10px; font-weight: bold; display: flex; justify-content: center; align-items: center"
+                  >年级:
+                </span>
+                <a-checkbox-group v-model:value="majorentrydate" :options="entrydateOptions" @change="onMajorEntrydateChange" />
+              </div>
+              <div style="display: flex; margin-top: 10px">
+                <span style="font-size: 15px; margin-right: 10px; font-weight: bold; display: flex; justify-content: center; align-items: center"
+                  >学院:
+                </span>
+                <a-radio-group v-model:value="collegeMajor" :options="collegeMajorOptions" @change="onMajorCollegeChange" />
+              </div>
+              <div style="display: flex; margin-top: 10px">
+                <span style="font-size: 15px; margin-right: 10px; font-weight: bold; display: flex; justify-content: center; align-items: center"
+                  >专业:
+                </span>
+                <a-checkbox-group v-model:value="majorCheckOn" :options="majorOptions" @change="onCollegeMajorChange" />
+              </div>
+              <div style="margin-top: 20px;margin-right: 20px;
+           
+              display: flex;
+              justify-content: flex-end;
+              align-items: center;
+
+              ">
+                <a-button style="margin-left: 10px;" type="primary" @click="clear">清除</a-button>
+                <a-button style="margin-left: 10px;" type="primary" @click="majorQuery">查询</a-button> 
+
+              </div>
             </div>
 
             <a-card title="按专业分析" :loading="tab3loading" :bordered="false">
@@ -98,15 +137,12 @@
               <a-row :gutter="24">
                 <a-col :xl="24" :style="{ marginBottom: '24px' }">
                   <div class="container">
-                    <div id="map3" style="width: 100%; height: 600px;"></div>
+                    <div id="map3" style="width: 100%; height: 600px"></div>
                   </div>
                 </a-col>
               </a-row>
             </a-card>
-
           </div>
-
-
         </a-tab-pane>
       </a-tabs>
       <!-- <div>
@@ -121,9 +157,7 @@
 
           <a-descriptions-item label="学院" :span="3">
 
-            <a-checkbox v-model="allCollege" :disabled="showBox" @change="checkAll">
-              全校
-            </a-checkbox>
+          
             <a-checkbox-group v-model="checkedOptions" :options="collegeOptions" :disabled="showGroup"
               @change="checkOne"></a-checkbox-group>
 
@@ -148,14 +182,8 @@
         </div>
 
       </a-drawer> -->
-
     </a-card>
 
-
-
-
-
-
     <!-- <a-card title="按学院 / 专业分析" :loading="loading" :bordered="false">
       <template #extra> -->
     <!-- <a-select v-model:value="college" style="width: 300px" mode="multiple" :max-tag-count="2"
@@ -182,9 +210,10 @@ import { defHttp } from '/@/utils/http/axios';
 import * as echarts from 'echarts';
 import bar from '/@/components/Scrollbar/src/bar';
 import { message } from 'ant-design-vue';
+import { last } from 'xe-utils';
 
 export default {
-  name: "Analysis",
+  name: 'Analysis',
   data() {
     return {
       activeKey: '1',
@@ -194,6 +223,7 @@ export default {
       oneentrydate: null,
       collegeentrydate: [],
       majorentrydate: [],
+      lastMajorEntrydate: [],
       checkedOptions: [],
       collegetab2: [],
       collegeMajorOptions: [],
@@ -206,7 +236,6 @@ export default {
         getAllRate: '/cet/getAllRate',
         getCollegeMajor: '/cet/getCollegeMajor',
         getRateByMajor: '/cet/getRateByMajor',
-
       },
       tab1loading: false,
       tab2loading: false,
@@ -216,7 +245,7 @@ export default {
       batchOptions: [],
       levelOptions: [
         { value: 'cet4', label: '英语四级' },
-        { value: 'cet6', label: '英语六级' }
+        { value: 'cet6', label: '英语六级' },
       ],
       visible: false,
       level: null,
@@ -224,12 +253,15 @@ export default {
       batch: null,
       entrydateOptions: [],
       entrydate: [],
-
+      majorCheckOn: [],
+      lastCollegeMajor: [],
+      majorLength: 0,
+      majorOptions: [],
     };
   },
   methods: {
     onMajorChange(value) {
-      console.log(value, "value")
+      console.log(value, 'value');
       let length = value.length;
       //遍历value,与this.collegeMajorOptions比较，如果value中的数据在this.collegeMajorOptions中则获得他的children长度
       for (let i = 0; i < value.length; i++) {
@@ -237,80 +269,77 @@ export default {
           if (value[i] == this.collegeMajorOptions[j].value) {
             length += this.collegeMajorOptions[j].children.length;
             length -= 1;
-            if (length > 5) {
-              message.error("最多选择五个专业")
-              //删除value最后一个数据
-              value.pop();
-              return
-            }
+          }
+          if (length > 5) {
+            message.error('最多选择五个专业');
+            //删除value最后一个数据
+            value.pop();
+            return;
           }
         }
       }
+      console.log(length, 'length');
     },
     allQuery() {
       this.tab1loading = true;
       let college = ['全校'];
-      let query = 'tab1'
+      let query = 'tab1';
       if (this.oneentrydate == null) {
         this.oneentrydate = '2017';
       }
       this.query(query, college, [this.oneentrydate]);
     },
     async majorQuery() {
-      if (this.collegeMajor.length == 0 || this.collegeMajor == null) {
-        message.error("请选择专业")
-        return
+      if (this.lastCollegeMajor.length == 0 || this.lastCollegeMajor == null) {
+        message.error('请选择专业');
+        return;
       }
       if (this.majorentrydate.length == 0) {
-        message.error("请选择年级")
-        return
+        message.error('请选择年级');
+        return;
       }
       this.tab3loading = true;
       let res = null;
       try {
-
         let params = {
-          college: this.collegeMajor,
+          college: this.lastCollegeMajor,
           entrydate: this.majorentrydate,
-        }
+        };
         res = await defHttp.post({ url: this.Url.getRateByMajor, params });
-      }
-      finally {
-        console.log(res, "res")
+      } finally {
+        console.log(res, 'res');
         this.tab3loading = false;
         this.$nextTick(() => {
           this.drawChart(res.data, 'tab3');
-        })
-
+        });
       }
     },
     collegeQuery() {
-
       if (this.collegetab2.length == 0) {
-        message.error("请选择学院")
-        return
+        message.error('请选择学院');
+        return;
       }
       if (this.collegeentrydate.length == 0) {
-        message.error("请选择年级")
-        return
+        message.error('请选择年级');
+        return;
       }
       this.tab2loading = true;
-      let query = 'tab2'
+      let query = 'tab2';
       this.query(query, this.collegetab2, this.collegeentrydate);
     },
     test(value) {
-      console.log(this.collegeMajor)
-      console.log(value)
+      console.log(this.collegeMajor);
+      console.log(value);
     },
     //选择全校
     checkAll(e) {
-      this.college = ['全校']
+      this.college = ['全校'];
       this.showGroup = !this.showGroup;
     },
 
     //选择学院
     checkOne(e) {
-      console.log(e)
+      console.log(e);
       this.college = e;
       this.showBox = true;
       if (e.length == 0) {
@@ -319,33 +348,33 @@ export default {
     },
     //选择年级
     checkoneentrydate(e) {
-      console.log(e.target.value, "e")
+      console.log(e.target.value, 'e');
       this.entrydate = [e.target.value];
-
     },
 
     //获取学院专业级联数据
     async getCollegeMajorData() {
       const res = await defHttp.get({ url: this.Url.getCollegeMajor });
       //通过map方法将数据转换为级联选择器需要的数据格式
-      this.collegeMajorOptions = res.collegeMajor.map(item => {
+      this.collegeMajorOptions = res.collegeMajor.map((item) => {
         return {
           value: item.college,
           label: item.college,
-          children: item.major.map(major => {
+          children: item.major.map((major) => {
             return {
               value: major,
-              label: major
-            }
-          })
-        }
+              label: major,
+            };
+          }),
+        };
       });
-      this.collegeMajor = [[this.collegeMajorOptions[0].value]];
-      console.log(this.collegeMajorOptions, "collegeMajorOptions");
+      this.collegeMajor = ['东语学院', '日语'];
+      console.log(this.collegeMajor, 'collegeMajor');
+      console.log(this.collegeMajorOptions, 'collegeMajorOptions1');
     },
 
     getCollegeOptions() {
-      defHttp.get({ url: this.Url.getCollege }).then(res => {
+      defHttp.get({ url: this.Url.getCollege }).then((res) => {
         this.collegeOptions = res.colleges;
         // 手动添加一个全校字段
 
@@ -358,22 +387,90 @@ export default {
         //  });
         //  this.college = ['全校'];
         this.collegetab2 = ['地理科学学院', '文学院'];
-        console.log(this.collegeOptions, "collegeOptions");
-
+        console.log(this.collegeOptions, 'collegeOptions');
       });
     },
-    onCollegeMajorChange(value) {
-      console.log(value, "value")
-      if (value.length > 3) {
-        message.error("最多选择三个")
+    onMajorEntrydateChange(value) {
+      console.log(value, 'value');
+      if (value.length > 5) {
+        //找到value中不在this.lastMajorEntrydate中的数据
+        for (let i = 0; i < value.length; i++) {
+          if (!this.lastMajorEntrydate.includes(value[i])) {
+            message.error('最多选择五个');
+            //删除value[i]
+            value.splice(i, 1);
+            return;
+          }
+        }
+      }
+      this.lastMajorEntrydate = value;
+    },
+    //学院对比学院选项回调函数
+    onCollegeChange(value) {
+      console.log(value, 'value');
+      if (value.length > 5) {
+        message.error('最多选择五个');
         //删除value最后一个数据
         value.pop();
-
-        return
+        return;
       }
     },
+    //专业选项回调函数
+    onCollegeMajorChange(value) {
+      //将value中的数据与this.lastCollegeMajor比较，如果value中的有this.lastCollegeMajor中没有的数据则添加,反之寻找在this.majorOptions中并且在this.lastCollegeMajor中但是不在value中的数据删除
+      for (let i = 0; i < value.length; i++) {
+        if (!this.lastCollegeMajor.map((item) => item[1]).includes(value[i])) {
+          if (this.majorLength == 5) {
+            message.error('最多选择五个');
+            //从value中删除value[i]
+            value.splice(i, 1);
+            return;
+          }
+          this.lastCollegeMajor.push([this.collegeMajor, value[i]]);
+          this.majorLength++;
+        }
+      }
+      for (let i = 0; i < this.lastCollegeMajor.length; i++) {
+        if (!value.includes(this.lastCollegeMajor[i][1])) {
+          //查看该数据是都在this.majorOptions中
+          if (this.majorOptions.find((item) => item.value == this.lastCollegeMajor[i][1])) {
+            this.lastCollegeMajor.splice(i, 1);
+            console.log('splice');
+            this.majorLength--;
+          }
+        }
+      }
+      console.log(value, 'value');
+    },
+    //学院选项回调函数
+    onMajorCollegeChange(value) {
+      let val = value.target.value;
+      console.log(val, 'value');
+      console.log(this.collegeMajorOptions.find((item) => item.value == val).children, 'majorOptions');
+      this.majorOptions = this.collegeMajorOptions.find((item) => item.value == val).children;
+      //将this.majorCheckOn中的数据与this.lastCollegeMajor比较，如果this.lastCollegeMajor中有this.majorCheckOn中没有的数据则删除,反之添加
+      // for (let i = 0; i < this.majorCheckOn.length; i++) {
+      //   if (!this.lastCollegeMajor.includes(this.majorCheckOn[i])) {
+      //     this.lastCollegeMajor.push(this.majorCheckOn[i]);
+      //   }
+      // }
+      // for (let i = 0; i < this.lastCollegeMajor.length; i++) {
+      //   if (!this.majorCheckOn.includes(this.lastCollegeMajor[i])) {
+      //     this.lastCollegeMajor.splice(i, 1);
+      //     console.log("splice")
+      //   }
+      // }
+      // this.lastCollegeMajor = this.majorCheckOn;
+      console.log(this.lastCollegeMajor, 'lastCollegeMajor');
+      this.majorCheckOn = this.lastCollegeMajor.map((item) => item[1]);
+      console.log(this.majorCheckOn, 'majorCheckOn');
+    },
 
-
+    clear() {
+      this.majorCheckOn = [];
+      this.lastCollegeMajor = [];
+      this.majorLength = 0;
+    },
     //tab2\3图标
     drawChart(data, tab) {
       let seriesData = [];
@@ -384,26 +481,71 @@ export default {
       }
       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 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")
+        console.log(i, 'i');
         legendData.push(i);
         let yData = [];
         // legendData=[];
-        console.log(data[i], "data[i]")
+        console.log(data[i], 'data[i]');
 
         for (let j in data[i]) {
-
-          console.log(data[i][j].college, "data[i][j].college111")
+          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")
+        console.log(yData, 'yData');
         seriesData.push({
-          name: i ,
+          name: i,
           type: 'bar',
           //设置柱状图大小
           barWidth: 25,
@@ -414,58 +556,54 @@ export default {
           itemStyle: {
             normal: {
               label: {
-                show: true,//开启显示
-                position: 'top',//在上方显示
+                show: true, //开启显示
+                position: 'top', //在上方显示
                 formatter: '{c}%',
-                textStyle: { //数值样式
+                textStyle: {
+                  //数值样式
                   color: 'black',
-                  fontSize: 13
+                  fontSize: 13,
                 },
               },
-              color: colors[k++]
-            }
-
-          }
+              color: colors[k++],
+            },
+          },
         });
       }
-      console.log(legendData, "legendData")
-      console.log(seriesData, 'dasaaseriresdata')
+      console.log(legendData, 'legendData');
+      console.log(seriesData, 'dasaaseriresdata');
       // debugger
       let myChart = null;
-      console.log(tab, "tab")
+      console.log(tab, 'tab');
       if (tab == 'tab2') {
-        myChart = document.getElementById("map2");
+        myChart = document.getElementById('map2');
         if (myChart) {
-          myChart = echarts.getInstanceByDom(myChart)
+          myChart = echarts.getInstanceByDom(myChart);
           if (myChart) {
             myChart.dispose();
           }
         }
-        myChart = echarts.init(document.getElementById("map2"));
-
+        myChart = echarts.init(document.getElementById('map2'));
       } else if (tab == 'tab3') {
-        myChart = document.getElementById("map3");
+        myChart = document.getElementById('map3');
         if (myChart) {
-          myChart = echarts.getInstanceByDom(myChart)
+          myChart = echarts.getInstanceByDom(myChart);
           if (myChart) {
             myChart.dispose();
           }
         }
-        myChart = echarts.init(document.getElementById("map3"));
-
+        myChart = echarts.init(document.getElementById('map3'));
       }
       // 指定图表的配置项和数据
       let option = {
         title: {
-          text: "本批次学院通过率排名",
-        },
-        legend: {
-          
+          text: '本批次学院通过率排名',
         },
+        legend: {},
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'shadow'
+            type: 'shadow',
           },
           formatter: function (params) {
             //生成tooltip,加上小圆球
@@ -474,16 +612,15 @@ export default {
               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 }
-          }
+            saveAsImage: { show: true },
+          },
         },
         grid: {
           left: '3%',
@@ -496,39 +633,84 @@ export default {
             type: 'category',
             data: xData,
             axisLabel: {
-              interval: 0,//代表显示所有x轴标签显示
-              rotate: 0,//代表倾斜0度显示
-            }
-          }
+              interval: 0, //代表显示所有x轴标签显示
+              rotate: 0, //代表倾斜0度显示
+            },
+          },
         ],
         yAxis: [
           {
             type: 'value',
             name: '通过率',
             axisLabel: {
-              formatter: '{value} %'
-            }
-          }
+              formatter: '{value} %',
+            },
+          },
         ],
-        series: seriesData
+        series: seriesData,
       };
       // 使用刚指定的配置项和数据显示图表。
-      console.log(option, "option")
-      console.log(myChart, "myChart")
+      console.log(option, 'option');
+      console.log(myChart, 'myChart');
       setTimeout(() => {
         myChart.setOption(option);
-      }, 1)
+      }, 1);
     },
 
-
     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  ']
+      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 j = 0;
 
       for (let i in data) {
-
         xData = [];
         let yData = [];
         for (let key in data[i]) {
@@ -537,7 +719,7 @@ export default {
           yData.push(data[i][key].passRate);
         }
 
-        xData = xData.map(label => label.split("").join("\n"));//将x轴竖着展示
+        xData = xData.map((label) => label.split('').join('\n')); //将x轴竖着展示
         seriesData.push({
           name: i + '级累计总通过率',
           type: 'bar',
@@ -550,23 +732,26 @@ export default {
           itemStyle: {
             normal: {
               label: {
-                show: true,//开启显示
-                position: 'top',//在上方显示
+                show: true, //开启显示
+                position: 'top', //在上方显示
                 formatter: '{c}%',
-                textStyle: { //数值样式
+                textStyle: {
+                  //数值样式
                   color: 'black',
-                  fontSize: 13
+                  fontSize: 13,
                 },
               },
-              color: colors[j++]
-            }
-
-          }
+              color: colors[j++],
+            },
+          },
         });
         if (j == colors.length) {
           j = 0;
         }
-        let rankData = yData.slice().sort((a, b) => b - a).map((value) => yData.indexOf(value) + 1);
+        let rankData = yData
+          .slice()
+          .sort((a, b) => b - a)
+          .map((value) => yData.indexOf(value) + 1);
         //如果选择全校，增加排名
         if (tab == 'tab1') {
           seriesData.push({
@@ -578,21 +763,20 @@ export default {
             show: false,
 
             itemStyle: {
-
               normal: {
-
                 label: {
-                  show: false,//开启显示
-                  position: 'top',//在上方显示
+                  show: false, //开启显示
+                  position: 'top', //在上方显示
                   formatter: '{c}',
-                  textStyle: { //数值样式
+                  textStyle: {
+                    //数值样式
                     color: 'black',
-                    fontSize: 13
+                    fontSize: 13,
                   },
                 },
-                color: colors[j++]
-              }
-            }
+                color: colors[j++],
+              },
+            },
           });
           if (j == colors.length) {
             j = 0;
@@ -601,22 +785,22 @@ export default {
       }
       let myChart = null;
       if (tab == 'tab2') {
-        myChart = echarts.init(document.getElementById("map2"));
+        myChart = echarts.init(document.getElementById('map2'));
       } else if (tab == 'tab1') {
-        myChart = echarts.init(document.getElementById("map1"));
+        myChart = echarts.init(document.getElementById('map1'));
       } else if (tab == 'tab3') {
-        myChart = echarts.init(document.getElementById("map3"));
+        myChart = echarts.init(document.getElementById('map3'));
       }
       // 指定图表的配置项和数据
       // const college1 = this.college;
       let option = {
         title: {
-          text: "本批次学院通过率排名",
+          text: '本批次学院通过率排名',
         },
         tooltip: {
           trigger: 'axis',
           axisPointer: {
-            type: 'shadow'
+            type: 'shadow',
           },
           formatter: function (params) {
             //生成tooltip,加上小圆球
@@ -625,23 +809,37 @@ export default {
               result += params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%' + '<br>';
             }
             if (tab == 'tab1') {
-              result = params[0].name + '<br/>' +
+              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>' +
-                '<tr><td>' + params[1].marker + params[1].seriesName + '</td><td style="font-weight: bold;">' + '&nbsp;&nbsp;&nbsp;&nbsp;' + params[1].value + '</td></tr>' +
+                '<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>';
             }
             return result;
-          }
+          },
         },
         toolbox: {
           show: true,
           feature: {
-
             magicType: { show: true, type: ['line', 'bar'] },
             restore: { show: true },
-            saveAsImage: { show: true }
-          }
+            saveAsImage: { show: true },
+          },
         },
         grid: {
           left: '3%',
@@ -654,67 +852,67 @@ export default {
             type: 'category',
             data: xData,
             axisLabel: {
-              interval: 0,//代表显示所有x轴标签显示
-              rotate: 0,//代表倾斜0度显示
-            }
-          }
+              interval: 0, //代表显示所有x轴标签显示
+              rotate: 0, //代表倾斜0度显示
+            },
+          },
         ],
         yAxis: [
           {
             type: 'value',
             name: '通过率',
             axisLabel: {
-              formatter: '{value} %'
-            }
+              formatter: '{value} %',
+            },
           },
           {
             type: 'value',
             name: '排名',
             show: false,
-          }
+          },
         ],
-        series: seriesData
+        series: seriesData,
       };
       if (tab == 'tab1') {
-        option.series = [{
-          name: '累计总通过率',
-          type: 'bar',
-          data: seriesData[0].data,
-          //设置柱状图大小
-          barWidth: 25,
-          // barWidth: '60%',
-          itemStyle: {
-            normal: {
-              label: {
-                show: true,//开启显示
-                position: 'top',//在上方显示
-                formatter: '{c}%',
-                textStyle: { //数值样式
-                  color: 'black',
-                  fontSize: 13
+        option.series = [
+          {
+            name: '累计总通过率',
+            type: 'bar',
+            data: seriesData[0].data,
+            //设置柱状图大小
+            barWidth: 25,
+            // barWidth: '60%',
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //开启显示
+                  position: 'top', //在上方显示
+                  formatter: '{c}%',
+                  textStyle: {
+                    //数值样式
+                    color: 'black',
+                    fontSize: 13,
+                  },
                 },
+                color: colors[0],
               },
-              color: colors[0]
-            }
-          }
-        },
-        {
-          name: '排名',
-          type: 'bar',
-          data: seriesData[1].data,
-          label: {
-            show: false,
-            position: 'inside',
-            formatter: '{c}',
-
+            },
           },
-          yAxisIndex: 1,
-          color: colors[1]
-
-        },
-        ]
+          {
+            name: '排名',
+            type: 'bar',
+            data: seriesData[1].data,
+            label: {
+              show: false,
+              position: 'inside',
+              formatter: '{c}',
+            },
+            yAxisIndex: 1,
+            color: colors[1],
+          },
+        ];
       }
-      // 使用刚指定的配置项和数据显示图表。 
+      // 使用刚指定的配置项和数据显示图表。
 
       myChart.setOption(option);
     },
@@ -724,7 +922,6 @@ export default {
       this.batchOptions = getBatch.batches;
       this.batch = this.batchOptions[0].value;
       this.level = this.levelOptions[0].value;
-
     },
     //获取年级数据
     async getEntrydate() {
@@ -737,7 +934,6 @@ export default {
     },
     // 查询数据
     async query(query, college, entrydate) {
-
       this.visible = false;
       let result = null;
       // console.log(this.college, this.entrydate);
@@ -746,7 +942,6 @@ export default {
       //   this.college = ['全校'];
       // }
 
-
       // if (!this.entrydate || this.entrydate.length === 0) {
       //   this.entrydate = ['2017'];
       // }
@@ -756,29 +951,27 @@ export default {
         let params = {
           college: college,
           entrydate: entrydate,
-          level: 'cet4'
-        }
+          level: 'cet4',
+        };
         let url = query == 'tab1' ? this.Url.getAllRate : this.Url.getCollegeRate;
-        console.log(params.college, "college")
+        console.log(params.college, 'college');
         result = await defHttp.post({ url: url, params });
         //使数据按照passRate从大到小排序
         // result.data.sort((a, b) => {
         //   return b.passRate - a.passRate;
         // });
-        console.log("data", result.data);
+        console.log('data', result.data);
       } finally {
-        query == 'tab1' ? this.tab1loading = false : this.tab2loading = false;
+        query == 'tab1' ? (this.tab1loading = false) : (this.tab2loading = false);
         this.$nextTick(() => {
           if (query == 'tab1') {
             this.dataChart(result.data, query);
           } else if (query == 'tab2') {
             this.drawChart(result.data, query);
-
           }
-
-        })
+        });
       }
-    }
+    },
   },
   mounted() {
     this.getCollegeOptions();
@@ -786,9 +979,8 @@ export default {
     this.getEntrydate();
     this.allQuery();
     this.getCollegeMajorData();
-  }
-
-}
+  },
+};
 </script>
 
 <style lang="less" scoped>
@@ -801,11 +993,17 @@ export default {
 }
 
 .query {
-  //居右
+  //居左
   display: flex;
-  justify-content: flex-end;
-  margin-bottom: 10px;
+  justify-content: flex-start;
+  align-items: center;
+  margin-left: 24px;
+}
 
+.tab3 {
+  justify-content: flex-start;
+  align-items: center;
+  margin-left: 24px;
 }
 
 .title {