Requirements: as soon as you enter the page, you have to send three requests. If the loading is not well written one by one; If the promise is not suitable,
finally, + +, – it is good to process it through computed
HTML

 <div v-loading="loading" class="dashboard-container"></div>

Computed method

 computed: {
      loading() {
        return this.loadingCount !== 0
      }
    },

Requests to be used in the lifecycle

   mounted() {
      this.yearAndQuarter = curYearAndQuarter()
      // Requesting list data
      this.getListData(this.yearAndQuarter)
      // Request a map
      this.getMapData(this.yearAndQuarter)
      // Request project list details
      this.getProlistDetails()
    },

Used in requests

 // Request project list details
      getProlistDetails() {
        this.loadingCount++
        const params = {
          'serviceId': 'data_market_screen_xmlb2_test',
         }
        queryByPage(params).then((res) => {
          this.loadingCount--
          console.log('Request item list details', res)
          // this.lightspotList = res.data
        }).catch(e => {
          this.loadingCount--
          this.$message.error(e.toString())
        })
      },
     getMapData(yearAndQuarter) {
        this.loadingCount++
        const yOrR = yearAndQuarter.split('-')
        const params = {
          'serviceId': 'data_market_screen_map_test',
        }
      queryByPage(params).then((res) => {
          this.loadingCount--
          console.log('Map', res)
          this.lightspotList = res.data
        }).catch(e => {
          this.loadingCount--
          this.$message.error(e.toString())
        })
      },