test

src/views/dataBigManage/components/efficiencyModule/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <el-row class="qualityModule">
+  <el-row
+    v-loading="loading"
+    class="qualityModule"
+  >
     <el-col :span="7">
       <div v-if="mainData.requirementData" class="itemBox" style="border-left-color: #3F9DFE; background: #F5FAFF">
         <div class="titleLevel3" style="color: #3F9DFE;">需求平均交付周期</div>
@@ -302,6 +305,11 @@ export default {
       type: Object,
       required: true,
       default: () => {}
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {

src/views/dataBigManage/components/qualityModule/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <el-row :gutter="20" class="qualityModule">
+  <el-row
+    v-loading="loading"
+    :gutter="20"
+    class="qualityModule"
+  >
     <el-col :span="8">
       <div class="itemBox onlineProblem" style="height: 403px">
         <div class="titleLevel3 mb10">线上问题</div>
@@ -132,6 +136,11 @@ export default {
       type: Object,
       required: true,
       default: () => {}
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -198,8 +207,10 @@ export default {
     }
   },
   watch: {
-    datas() {
-      this.resetBaseData()
+    datas(newVal, oldVal) {
+      if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+        this.resetBaseData()
+      }
     }
   },
   mounted() {
@@ -227,7 +238,6 @@ export default {
       // 线上问题图
       if (onlineProblemChart) {
         const { xaxis, yaxis } = onlineProblemChart
-        console.log(xaxis, yaxis[0].data)
         this.onlineProblemChartOption = getOption(xaxis, yaxis[0].data, 'bar', { endValue: 10 })
       }
       // 线下质量表
@@ -439,7 +449,8 @@ export default {
     border-radius: 6px;
   }
   .chartSearchbar {
-    margin-top: 20px;
+    margin-top: 10px;
+    margin-bottom: 10px;
   }
   .chartViewHeight {
     height: 170px;

src/views/dataBigManage/components/throughputModule/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <el-row :gutter="20" class="throughputModule">
+  <el-row
+    v-loading="loading"
+    :gutter="20"
+    class="throughputModule"
+  >
     <el-col :span="6">
       <div class="itemBox whole throughput" style="background: #EEF0F5">
         <div class="tab">
@@ -109,6 +113,11 @@ export default {
       type: Object,
       required: true,
       default: () => {}
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data() {
@@ -226,7 +235,8 @@ export default {
     }
   }
   .chartSearchbar {
-    margin-top: 20px;
+    margin-top: 10px;
+    margin-bottom: 10px;
   }
   .chartViewHeight {
     height: 210px;

src/views/dataBigManage/index.vue

@@ -15,6 +15,7 @@
       </header>
       <qualityModule
         :datas="mainData.quality"
+        :loading="qualityLoading"
         @search="qualitySearch"
         @checkDetialModal="(data) => checkDetialModal({...data, headerTitle: '质量' })"
       />
@@ -23,6 +24,7 @@
       </header>
       <throughputModule
         :datas="mainData.throughput"
+        :loading="throughputLoading"
         @search="qualitySearch"
         @checkDetialModal="(data) => checkDetialModal({...data, headerTitle: '吞吐量' })"
       />
@@ -31,6 +33,7 @@
       </header>
       <efficiencyModule
         :datas="mainData.efficiency"
+        :loading="efficiencyLoading"
         @checkDetialModal="(data) => checkDetialModal({...data, headerTitle: '效率' })"
       />
     </div>
@@ -103,7 +106,10 @@ export default {
         quality: {},
         throughput: {},
         efficiency: {}
-      }
+      },
+      qualityLoading: false,
+      throughputLoading: false,
+      efficiencyLoading: false
     }
   },
   mounted() {
@@ -178,8 +184,6 @@ export default {
         this.getOfflineProblemChartData(this.params)
       } else if (key === 'wholeTab') {
         this.getThroughputData(this.params)
-      } else if (key === 'verTab') {
-        this.getVersionRequirementChartData(this.params)
       } else if (key === 'requirementBacklogType') {
         this.getRequirementBacklogRateChartData(this.params)
       }
@@ -199,30 +203,93 @@ export default {
     },
     getList() {
       const params = this.params
-      // // 质量
-      this.getOnlineProblemList(params) // 线上问题列表
-      this.getOnlineProblemChartData(params) // 线上问题图表
-      this.getOfflineProblemList(params) // 线下问题列表
-      this.getOfflineProblemChartData(params) // 线下问题图
-      this.getOnlineProcessData(params) // 上线过程
-      this.getMobilePublishQualityData(params) // 移动端发布质量
-      this.getThroughputData(params) // 需求任务项目列表
-      this.getRequirementDirectionDistributionChartData(params) // 需求方向分布图
-      this.getRequirementBacklogRateChartData(params) // 积压率
-      this.getVersionRequirementChartData(params) // 需求版本
-      this.getEfficiencyData(params) // 效率
+      // 质量
+      this.getQuality(params)
+      // 获取吞吐量
+      this.getThroughput(params)
+      // 效率
+      this.getEfficiencyData(params)
     },
-    // 线上问题列表
-    getOnlineProblemList(params) {
-      getOnlineProblemListRequest(params).then(res => {
+    // 质量数据
+    getQuality(params) {
+      this.qualityLoading = true
+      Promise.all([
+        getOnlineProblemListRequest(params), // 线上问题列表
+        getOnlineProblemChartDataRequest({
+          ...params,
+          extensionType: params.onlineProblemViweType
+        }), // 线上问题图表
+        getOfflineProblemListRequest(params), // 线下问题列表
+        getOfflineProblemChartDataRequest({
+          ...params,
+          extensionType: params.offlineProblemViweType
+        }), // 线下问题图
+        getOnlineProcessDataRequest(params), // 上线过程
+        getMobilePublishQualityDataRequest(params) // 移动端发布质量
+      ]).then((result) => {
+        // console.log(result)
+        const titleKeyList = [
+          'onlineProblemList',
+          'onlineProblemChart',
+          'offlineProblemList',
+          'offlineProblemChart',
+          'onlineProcessList',
+          'mobilePublishQualityList'
+        ]
+        const objData = {}
+        result.forEach((t, idx) => {
+          objData[titleKeyList[idx]] = t.data
+        })
         this.mainData = {
           ...this.mainData,
-          quality: { ...this.mainData.quality, onlineProblemList: res.data }
+          quality: { ...this.mainData.quality, ...objData }
         }
+        this.qualityLoading = false
+      }).catch((error) => {
+        this.qualityLoading = false
+      })
+    },
+    // 吞吐量
+    getThroughput(params) {
+      this.throughputLoading = true
+      Promise.all([
+        getThroughputDataRequest({
+          ...params,
+          extensionType: params.wholeTab
+        }), // 需求任务项目列表数据
+        getRequirementDirectionDistributionChartDataRequest(params), // 需求方向分布图
+        getRequirementBacklogRateChartDataRequest({
+          ...params,
+          extensionType: params.requirementBacklogType
+        }), // 积压率
+        getVersionRequirementChartDataRequest({
+          ...params,
+          extensionType: params.verTab
+        }) // 需求版本
+      ]).then((result) => {
+        // console.log(result)
+        const titleKeyList = [
+          'throughputList',
+          'requirementDirectionChart',
+          'requirementBacklogRateChart',
+          'versionRequirementChart'
+        ]
+        const objData = {}
+        result.forEach((t, idx) => {
+          objData[titleKeyList[idx]] = t.data
+        })
+        this.mainData = {
+          ...this.mainData,
+          throughput: { ...this.mainData.throughput, ...objData }
+        }
+        this.throughputLoading = false
+      }).catch((error) => {
+        this.throughputLoading = false
       })
     },
     // 线上问题图表
     getOnlineProblemChartData(params) {
+      this.qualityLoading = true
       getOnlineProblemChartDataRequest({
         ...params,
         extensionType: params.onlineProblemViweType
@@ -231,19 +298,14 @@ export default {
           ...this.mainData,
           quality: { ...this.mainData.quality, onlineProblemChart: res.data }
         }
-      })
-    },
-    // 线下问题列表
-    getOfflineProblemList(params) {
-      getOfflineProblemListRequest(params).then(res => {
-        this.mainData = {
-          ...this.mainData,
-          quality: { ...this.mainData.quality, offlineProblemList: res.data }
-        }
+        this.qualityLoading = false
+      }).catch(() => {
+        this.qualityLoading = false
       })
     },
     // 线下问题图表
     getOfflineProblemChartData(params) {
+      this.qualityLoading = true
       //  offlineProblemChart
       getOfflineProblemChartDataRequest({
         ...params,
@@ -253,28 +315,14 @@ export default {
           ...this.mainData,
           quality: { ...this.mainData.quality, offlineProblemChart: res.data }
         }
-      })
-    },
-    // 上线过程
-    getOnlineProcessData(params) {
-      getOnlineProcessDataRequest(params).then(res => {
-        this.mainData = {
-          ...this.mainData,
-          quality: { ...this.mainData.quality, onlineProcessList: res.data }
-        }
-      })
-    },
-    // 移动端发布质量
-    getMobilePublishQualityData(params) {
-      getMobilePublishQualityDataRequest(params).then(res => {
-        this.mainData = {
-          ...this.mainData,
-          quality: { ...this.mainData.quality, mobilePublishQualityList: res.data }
-        }
+        this.qualityLoading = false
+      }).catch(() => {
+        this.qualityLoading = false
       })
     },
     // 需求任务项目列表
     getThroughputData(params) {
+      this.throughputLoading = true
       getThroughputDataRequest({
         ...params,
         extensionType: params.wholeTab
@@ -283,19 +331,14 @@ export default {
           ...this.mainData,
           throughput: { ...this.mainData.throughput, throughputList: res.data }
         }
-      })
-    },
-    // 需求方向分布图
-    getRequirementDirectionDistributionChartData(params) {
-      getRequirementDirectionDistributionChartDataRequest(params).then(res => {
-        this.mainData = {
-          ...this.mainData,
-          throughput: { ...this.mainData.throughput, requirementDirectionChart: res.data }
-        }
+        this.throughputLoading = false
+      }).catch(() => {
+        this.throughputLoading = false
       })
     },
     // 需求积压率
     getRequirementBacklogRateChartData(params) {
+      this.throughputLoading = true
       getRequirementBacklogRateChartDataRequest({
         ...params,
         extensionType: params.requirementBacklogType
@@ -304,27 +347,22 @@ export default {
           ...this.mainData,
           throughput: { ...this.mainData.throughput, requirementBacklogRateChart: res.data }
         }
-      })
-    },
-    // 版本需求图
-    getVersionRequirementChartData(params) {
-      getVersionRequirementChartDataRequest({
-        ...params,
-        extensionType: params.verTab
-      }).then(res => {
-        this.mainData = {
-          ...this.mainData,
-          throughput: { ...this.mainData.throughput, versionRequirementChart: res.data }
-        }
+        this.throughputLoading = false
+      }).catch(() => {
+        this.throughputLoading = false
       })
     },
     // 效率
     getEfficiencyData(params) {
+      this.efficiencyLoading = true
       getEfficiencyDataRequest(params).then(res => {
         this.mainData = {
           ...this.mainData,
           efficiency: { ...this.mainData.efficiency, efficiencyData: res.data }
         }
+        this.efficiencyLoading = false
+      }).catch(res => {
+        this.efficiencyLoading = false
       })
     }
   }