CN-1035: 多页签图表loading和error交互开发

src/views/charts2/charts/entityDetail/tabs/DigitalCertificate.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <chart-error v-if="showError" :content="errorMsg" style="margin-top: 18px;margin-left: 8px;"></chart-error>
+    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
     <chart-no-data v-if="isNoData && !showError"></chart-no-data>
 
-    <div class="digital-certificate" v-if="!showError && !isNoData" :style="{width: moreCertificatesWidth}">
+    <div v-if="!isNoData && !showError && !loading" class="digital-certificate" :style="{width: moreCertificatesWidth}">
       <div class="digital-certificate-header">
         <div class="digital-certificate-header__icon"></div>
         <div class="digital-certificate-header-name">
@@ -51,9 +51,9 @@ export default {
   data () {
     return {
       showError: false,
-      isNoData: false,
       infoList: [],
-      errorMsg: ''
+      errorMsg: '',
+      loading: true // 添加loading，为了避免初始化loading时，标题显示，而在loading结束error出现时标题隐藏，导致闪一下的效果
     }
   },
   mixins: [chartMixin],
@@ -88,6 +88,7 @@ export default {
         name: this.entityName // 实体名称
       }
 
+      this.loading = true
       this.toggleLoading(true)
       // todo 接口、数据不明确，故没有模拟mock数据，后续此处需修改
       axios.get(api.entity.performanceEvent, { params: params }).then(response => {
@@ -160,6 +161,7 @@ export default {
         console.error(e)
         this.httpError(e)
       }).finally(() => {
+        this.loading = false
         this.toggleLoading(false)
       })
     },

src/views/charts2/charts/entityDetail/tabs/DomainNameResolution.vue

@@ -1,6 +1,9 @@
 <template>
+  <div>
+    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
     <chart-no-data v-if="isNoData && !showError"></chart-no-data>
-  <div class="type-data__column">
+
+    <div v-if="!isNoData && !showError && !loading" class="type-data__column">
       <div class="type-data">
         <div class="type-title">
           <span class="title-mark" ></span>{{ $t('entities.tab.relatedApp') }}&nbsp;&nbsp;({{relatedAppList.length}})</div>
@@ -23,6 +26,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script>
 import { getNowTime, getSecond } from '@/utils/date-util'
@@ -42,7 +46,9 @@ export default {
       relatedAppList: [],
       relatedIpList: [],
       relatedDomainList: [],
-      showError: false
+      showError: false,
+      errorMsg: '',
+      loading: true
     }
   },
   mounted () {
@@ -79,6 +85,7 @@ export default {
         endTime: getSecond(this.timeFilter.endTime),
         ip: '116.178.70.242'
       }
+      this.loading = true
       this.toggleLoading(true)
       const relatedApp = new Promise(resolve => {
         axios.get(api.entity.domainNameResolutionRelatedApp, { params: params }).then(response => {
@@ -140,6 +147,7 @@ export default {
       })
       Promise.all([relatedApp, relatedIp, relatedDomain]).finally(response => {
         this.toggleLoading(false)
+        this.loading = false
       })
     },
     httpError (e) {

src/views/charts2/charts/entityDetail/tabs/InformationAggregation.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="information-aggregation__table">
+  <div>
+    <!--初步方案：error提示替换table。后续若改为table内error提示，记得在此修改-->
+    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
+    <chart-no-data v-if="isNoData && !showError"></chart-no-data>
+
+    <div v-if="!isNoData && !showError" class="information-aggregation__table">
       <el-table
           style="width: 100%"
           tooltip-effect="light"
@@ -78,6 +83,7 @@
         </el-table-column>
       </el-table>
     </div>
+  </div>
 </template>
 
 <script>
@@ -87,7 +93,9 @@ export default {
   name: 'InformationAggregation',
   data () {
     return {
-      informationAggregationList: []
+      informationAggregationList: [],
+      errorMsg: '',
+      showError: false
     }
   },
   mixins: [chartMixin],

src/views/charts2/charts/entityDetail/tabs/OpenPort.vue

@@ -1,6 +1,9 @@
 <template>
+  <div>
+    <chart-error v-if="showError" :content="errorMsg" class="entity-detail-event-error"></chart-error>
     <chart-no-data v-if="isNoData && !showError"></chart-no-data>
-  <div class="type-data__column">
+
+    <div v-if="!showError && !isNoData && !loading" class="type-data__column">
       <div class="type-data">
         <div class="type-title">
           <span class="title-mark" ></span>{{ $t('entities.tab.currentDevelopmentPortsAndServices') }}&nbsp;&nbsp;(5)</div>
@@ -9,6 +12,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script>
 import { getNowTime, getSecond } from '@/utils/date-util'
@@ -26,7 +30,9 @@ export default {
   data () {
     return {
       openPortList: [],
-      showError: false
+      showError: false,
+      errorMsg: '',
+      loading: true
     }
   },
   mounted () {
@@ -64,6 +70,7 @@ export default {
       }
 
       this.toggleLoading(true)
+      this.loading = true
       axios.get(api.entity.openPort, { params: params }).then(response => {
         const res = response.data
         if (res.code === 200) {
@@ -80,6 +87,7 @@ export default {
         this.httpError(e)
       }).finally(() => {
         this.toggleLoading(false)
+        this.loading = false
       })
     },
     httpError (e) {