添加院领导首页数据的加载效果

src/views/cet/collegeDashboard.vue

@@ -28,32 +28,33 @@
             bordered
             class="custom-table"
             :style="{ fontSize: '10px', color: '#333', marginTop: '-11px' }"
+            :loading="loadingTable"
           />
         </div>
       </a-card-grid>
 
-      <a-card-grid class="card-center">
+      <a-card class="card-center" :loading="loadingMap2">
         <div style="width: 100%; height: 210px; padding: 10px" class="map2" id="map2"></div>
-      </a-card-grid>
+      </a-card>
 
-      <a-card-grid class="card-center">
+      <a-card class="card-center" :loading="loadingMap3">
         <a-select
           v-model:value="entrydate"
-          style="border-radius: 10%; width: 100px; margin-left: -20px"
+          style="border-radius: 10%; width: 100px; margin-left: 220px"
           :options="entrydateOptions"
           @change="handleSelectChange"
         />
 
         <div id="map3" style="width: 100%; height: 230px"></div>
-      </a-card-grid>
+      </a-card>
     </a-row>
     <a-row :gutter="1">
-      <a-card-grid class="card-bottom" style="width: 32%">
-        <div id="map4" style="width: 100%; height: 100%"></div>
-      </a-card-grid>
-      <a-card-grid style="width: 65%" class="card-bottom">
-        <div id="map5" style="width: 100%; height: 100%"></div>
-      </a-card-grid>
+      <a-card class="card-bottom" style="width: 32%" :loading="loadingMap4">
+        <div id="map4" style="width: 100%; height: 300%"></div>
+      </a-card>
+      <a-card style="width: 65%" class="card-bottom" :loading="loadingMap5">
+        <div id="map5" style="width: 100%; height: 300%"></div>
+      </a-card>
     </a-row>
   </a-card>
 </template>
@@ -70,6 +71,11 @@
         collegeStudentPassRate: '11',
         schoolStudentPassRate: '11',
         loading: false,
+        loadingTable: false,
+        loadingMap2: false,
+        loadingMap3: false,
+        loadingMap4: false,
+        loadingMap5: false,
         dataSourceCet4: [],
         batch: '',
         college: '',
@@ -120,13 +126,9 @@
       this.queryMajorByCollege();
     },
     methods: {
-      //查询页面头部的数据
-      async queryTopData() {
-        let result = await defHttp.get({ url: this.Url.getDataForHead });
-        console.log('0000', result.data);
-      },
       // 查询数据
       async query() {
+        this.loadingTable = true;
         let resultData = null;
         try {
           //如果this.batch为null则先赋个值
@@ -136,7 +138,6 @@
           if (!this.college) {
             this.college = '计算机科学与信息工程学院';
           }
-          this.loading = true;
           let params = {
             batch: this.batch,
             college: this.college,
@@ -158,7 +159,7 @@
           this.dataSourceCet4 = tableData; //表格数据
           console.log(this.dataSourceCet4, 'dataSourceCet4');
         } finally {
-          this.loading = false;
+          this.loadingTable = false;
           this.$nextTick(() => {
             //this.dataChart(resultData.data);
             console.log('cet4:', resultData.data);
@@ -167,6 +168,7 @@
         }
       },
       async queryMajorByCollege() {
+        this.loadingMap5 = true;
         if (!this.college) {
           this.college = '计算机科学与信息工程学院';
         }
@@ -193,12 +195,14 @@
         console.log('666');
         let res = await defHttp.post({ url: this.Url.getRateByMajor, params });
         console.log('55555', res.data);
+        this.loadingMap5 = false;
         this.$nextTick(() => {
           this.drawChart(res.data);
         });
       },
       //绘画饼图--该批次每一年级的通过率饼图
       async card_Table() {
+        this.loadingMap2 = true;
         //console.log(this.passRatePie);
         //console.log('piedata', piedata);
         //如果this.batch为null则先赋个值
@@ -320,16 +324,19 @@
           ],
           animationDurationUpate: 500,
         };
+        this.loadingMap2 = false;
         this.$nextTick(() => {
           var myChart = echarts.init(document.getElementById('map2'));
           myChart.setOption(option);
         });
       },
       handleSelectChange() {
+        this.loadingMap3 = true;
         this.majorPassRate();
       },
       // 本学院各专业通过率-map3---------------------------------------------
       async majorPassRate() {
+        this.loadingMap3 = true;
         console.log('55555555', this.entrydate);
         if (!this.batch) {
           this.batch = '2024-06-01';
@@ -337,7 +344,6 @@
         if (!this.college) {
           this.college = ['计算机科学与信息工程学院'];
         }
-        this.map3loading = true;
         //将选择后的entrydate转化为数组
         let entrydateArray = [];
         entrydateArray.push(this.entrydate);
@@ -428,15 +434,15 @@
           ],
           animationDurationUpdate: 500,
         };
-        this.map3loading = false;
+        this.loadingMap3 = false;
         this.$nextTick(() => {
           var myChart = echarts.init(document.getElementById('map3'));
           myChart.setOption(majorOption);
         });
       },
-      // 年级通过率
+      // 年级通过率map4
       async gradePassRate() {
-        this.map2loading = true;
+        this.loadingMap4 = true;
         const getEntrydate = await defHttp.get({ url: this.Url.getEntrydate });
         this.entrydateOptions = getEntrydate.entrydates;
         let entrydate = this.entrydateOptions.map((item) => item.value);
@@ -500,14 +506,15 @@
 
           animationDurationUpdate: 500,
         };
-        this.map2loading = false;
+        this.loadingMap4 = false;
         this.$nextTick(() => {
           var myChart = echarts.init(document.getElementById('map4'));
           myChart.setOption(collegeOption);
         });
       },
-      //各专业通过率详情
+      //各专业通过率详情map5
       drawChart(data) {
+        this.loadingMap5 = true;
         let seriesData = [];
         let xData = this.majorentrydate.sort((a, b) => a - b);
         let k = 0;
@@ -667,6 +674,7 @@
         // 使用刚指定的配置项和数据显示图表。
         console.log(option, 'option');
         console.log(myChart, 'myChart');
+        this.loadingMap5 = false;
         setTimeout(() => {
           myChart.setOption(option);
         }, 1);