Merge branch 'feature/1.0版本页面优化' of http://62.234.217.137:3000/Big-Data-Lab/CET-vue-3.0 into feature/1.0版本页面优化

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

@@ -25,10 +25,10 @@
               </a-card>
             </a-col>
             <a-col :xl="8">
-              <a-card :style="{ marginBottom: '12px' }">
+              <a-card :loading="map2loading" :style="{ marginBottom: '12px' }">
                 <div id="map2" style="width: 100%; height: 230px"></div>
               </a-card>
-              <a-card>
+              <a-card :loading="map3loading">
                 <div id="map3" style="width: 100%; height: 230px"></div>
               </a-card>
             </a-col>
@@ -74,8 +74,8 @@
           getRateByMajor: '/cet/getRateByMajor',
         },
         map1loading: false,
-        tab2loading: false,
-        tab3loading: false,
+        map2loading: false,
+        map3loading: false,
 
         collegeOptions: [],
         batchOptions: [],
@@ -106,12 +106,12 @@
       this.getEntrydate();
       this.allQuery();
       this.getCollegeMajorData();
-      this.gradePassRate();
-      this.majorPassRate();
     },
     methods: {
       allQuery() {
         this.map1loading = true;
+        this.map2loading = true; // 新增
+        this.map3loading = true; // 新增
         let college = ['全校'];
         let query = 'tab1';
         if (this.oneentrydate == null) {
@@ -192,7 +192,7 @@
       },
       // 年级通过率
       async gradePassRate() {
-        var myChart = echarts.init(document.getElementById('map2'));
+        this.map2loading = true;
         const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
         this.entrydateOptions = getEntrydate.entrydates;
         let entrydate = this.entrydateOptions.map((item) => item.value);
@@ -203,14 +203,10 @@
           level: 'cet4',
         };
         let url = this.Url.getCollegeRate;
-        console.log(queryParams, 'queryParams');
         let result = await defHttp.post({ url: url, data: queryParams });
-
-        console.log(myChart, 'mychart');
         if (!result) {
           return;
         }
-        console.log(result.data, 'result');
         result = result.data[name];
         let collegeOption = {
           title: {
@@ -258,17 +254,18 @@
 
           animationDurationUpdate: 500,
         };
+        this.map2loading = false;
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('map2'));
           myChart.setOption(collegeOption);
+        });
       },
 
       // 各专业通过率
       async majorPassRate() {
-        var myChart = echarts.init(document.getElementById('map3'));
+        this.map3loading = true;
         const name = '西语学院';
 
-        //let entrydate = this.oneentrydate.map((item) => item.value);
-        //console.log(entrydata, 'entrydata');
-
         let queryParams = {
           college: [[name]],
           entrydate: [this.oneentrydate],
@@ -276,14 +273,11 @@
         };
         let url = this.Url.getMajorRate;
         console.log(queryParams, 'queryParams');
-
         let result = await defHttp.post({ url: url, data: queryParams });
 
-        console.log(myChart, 'mychart');
         if (!result) {
           return;
         }
-        console.log(result.data, 'result');
 
         //result = result.data[name];
         // 遍历 result.data 中的所有专业
@@ -359,7 +353,11 @@
           ],
           animationDurationUpdate: 500,
         };
+        this.map3loading = false;
+        this.$nextTick(() => {
+          var myChart = echarts.init(document.getElementById('map3'));
           myChart.setOption(majorOption);
+        });
       },
 
       dataChart(data, tab) {
@@ -458,7 +456,6 @@
             .sort((a, b) => b - a)
             .map((value) => yData.indexOf(value) + 1);
           //如果选择全校，增加排名
-          if (tab == 'tab1') {
           seriesData.push({
             name: i + '级累计总通过率排名',
             type: 'line',
@@ -487,7 +484,6 @@
             j = 0;
           }
         }
-        }
         let myChart = null;
         myChart = echarts.init(document.getElementById('map1'));
         // 指定图表的配置项和数据
@@ -623,7 +619,6 @@
             this.collegeOptions.map((item) => item.value),
             'collegeOptions'
           );
-          console.log(name, 'params');
           console.log(this.collegeOptions.map((item) => item.value).includes(name), 'bool');
           if (params != null && params != undefined && params.name != '' && this.collegeOptions.map((item) => item.value).includes(name)) {
             console.log(params, 'params');
@@ -634,14 +629,13 @@
               level: 'cet4',
             };
             let url = this.Url.getCollegeRate;
-            console.log(queryParams, 'queryParams');
+            this.map2loading = true;
+            this.map3loading = true;
             let result = await defHttp.post({ url: url, data: queryParams });
 
-            console.log(myChart, 'mychart');
             if (!result) {
               return;
             }
-            console.log(result.data, 'result');
             result = result.data[name];
             let collegeOption = {
               title: {
@@ -689,21 +683,6 @@
 
               animationDurationUpdate: 500,
             };
-            console.log(collegeOption, 'collegeOption');
-
-            //let spanElement = document.getElementById('span');
-
-            // 隐藏 span 元素
-            //spanElement.style.display = 'none';
-            var map2Chart = echarts.init(document.getElementById('map2'));
-            map2Chart.setOption(collegeOption, true);
-            //myChart.setOption(collegeOption, true);
-
-            console.log(myChart, 'mychart');
-            // this.college = [params];
-
-            // this.query(tab, this.college, this.entrydate);
-
             //点击事件中的个专业四级通过率
             let querMajorParam = {
               college: [[name]],
@@ -711,16 +690,12 @@
               level: 'cet4',
             };
             let urlMajor = this.Url.getMajorRate;
-            console.log(querMajorParam, 'querMajorParam');
 
             let resultMajor = await defHttp.post({ url: urlMajor, data: querMajorParam });
 
-            console.log(myChart, 'mychart');
             if (!resultMajor) {
               return;
             }
-            console.log(resultMajor.data, 'resultMajor');
-
             //result = result.data[name];
             // 遍历 result.data 中的所有专业
             const majors = Object.keys(resultMajor.data); // 获取所有专业名称
@@ -792,9 +767,14 @@
               ],
               animationDurationUpdate: 500,
             };
-            console.log(majorOption, 'majorOption');
+            this.map3loading = false;
+            this.map2loading = false;
+            this.$nextTick(() => {
+              var map2Chart = echarts.init(document.getElementById('map2'));
+              map2Chart.setOption(collegeOption, true);
               var map3Chart = echarts.init(document.getElementById('map3'));
               map3Chart.setOption(majorOption, true);
+            });
           }
         });
       },
@@ -844,11 +824,9 @@
           // });
           console.log('data', result.data);
         } finally {
-          query == 'tab1' ? (this.map1loading = false) : (this.tab2loading = false);
+          this.map1loading = false;
           this.$nextTick(() => {
-            if (query == 'tab1') {
             this.dataChart(result.data, query);
-            }
           });
         }
       },