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,25 +1,29 @@
 <template>
-  <chart-no-data v-if="isNoData && !showError"></chart-no-data>
-  <div 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>
-      <div class="type-content">
-        <div v-for="entity in relatedAppList" class="data-item">{{entity.appName?entity.appName:entity}}</div>
+  <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 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>
+        <div class="type-content">
+          <div v-for="entity in relatedAppList" class="data-item">{{entity.appName?entity.appName:entity}}</div>
+        </div>
       </div>
-    </div>
-    <div class="type-data">
-      <div class="type-title">
-        <span class="title-mark" ></span>{{ $t('entities.tab.relatedIp') }}&nbsp;&nbsp;({{relatedIpList.length}})</div>
-      <div class="type-content">
-        <div v-for="entity in relatedIpList" class="data-item">{{entity.ip?entity.ip:entity}}</div>
+      <div class="type-data">
+        <div class="type-title">
+          <span class="title-mark" ></span>{{ $t('entities.tab.relatedIp') }}&nbsp;&nbsp;({{relatedIpList.length}})</div>
+        <div class="type-content">
+          <div v-for="entity in relatedIpList" class="data-item">{{entity.ip?entity.ip:entity}}</div>
+        </div>
       </div>
-    </div>
-    <div class="type-data">
-      <div class="type-title">
-        <span class="title-mark" ></span>{{ $t('entities.tab.relatedDomain') }}&nbsp;&nbsp;({{relatedDomainList.length}})</div>
-      <div class="type-content">
-        <div v-for="entity in relatedDomainList"  class="data-item">{{entity.domain?entity.domain:entity}}</div>
+      <div class="type-data">
+        <div class="type-title">
+          <span class="title-mark" ></span>{{ $t('entities.tab.relatedDomain') }}&nbsp;&nbsp;({{relatedDomainList.length}})</div>
+        <div class="type-content">
+          <div v-for="entity in relatedDomainList"  class="data-item">{{entity.domain?entity.domain:entity}}</div>
+        </div>
       </div>
     </div>
   </div>
@@ -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,82 +1,88 @@
 <template>
-  <div class="information-aggregation__table">
-    <el-table
-            style="width: 100%"
-            tooltip-effect="light"
-            border
-            id="informationAggregationTable"
-            ref="informationAggregationTable"
-            :data="informationAggregationList"
-            :cell-class-name="intelligenceContentClass"
-    >
-      <el-table-column
-              key="discoveryTime"
-              width="150px"
-              :label="$t('entities.tab.informationAggregation.discoveryTime')"
-              prop="discoveryTime"
-      ></el-table-column>
-      <el-table-column
-              key="updateTime"
-              width="150px"
-              :label="$t('entities.tab.informationAggregation.updateTime')"
-              prop="updateTime"
-      ></el-table-column>
-      <el-table-column
-              key="intelligenceContent"
-              :label="$t('entities.tab.informationAggregation.intelligenceContent')"
-              prop="intelligenceContent"
+  <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"
+          border
+          id="informationAggregationTable"
+          ref="informationAggregationTable"
+          :data="informationAggregationList"
+          :cell-class-name="intelligenceContentClass"
       >
-        <template #default="scope">
-          <div class="intelligence-content">
-            <div class="information-aggregation-tags">
-              <template v-for="ic in scope.row.intelligenceContent" >
-                <template v-if="ic.type === 0" >
-                  <div v-if="ic.threatLevel === -1" class="entity-tag entity-tag--small entity-tag--level-one-negative margin-r-6">
-                    {{ic.value}}
-                  </div>
-                  <div v-else-if="ic.threatLevel === 0" class="entity-tag entity-tag--small entity-tag--level-one-normal margin-r-6">
-                    {{ic.value}}
-                  </div>
-                  <div v-else-if="ic.threatLevel === 1" class="entity-tag entity-tag--small entity-tag--level-one-positive margin-r-6">
-                    {{ic.value}}
-                  </div>
+        <el-table-column
+            key="discoveryTime"
+            width="150px"
+            :label="$t('entities.tab.informationAggregation.discoveryTime')"
+            prop="discoveryTime"
+        ></el-table-column>
+        <el-table-column
+            key="updateTime"
+            width="150px"
+            :label="$t('entities.tab.informationAggregation.updateTime')"
+            prop="updateTime"
+        ></el-table-column>
+        <el-table-column
+            key="intelligenceContent"
+            :label="$t('entities.tab.informationAggregation.intelligenceContent')"
+            prop="intelligenceContent"
+        >
+          <template #default="scope">
+            <div class="intelligence-content">
+              <div class="information-aggregation-tags">
+                <template v-for="ic in scope.row.intelligenceContent" >
+                  <template v-if="ic.type === 0" >
+                    <div v-if="ic.threatLevel === -1" class="entity-tag entity-tag--small entity-tag--level-one-negative margin-r-6">
+                      {{ic.value}}
+                    </div>
+                    <div v-else-if="ic.threatLevel === 0" class="entity-tag entity-tag--small entity-tag--level-one-normal margin-r-6">
+                      {{ic.value}}
+                    </div>
+                    <div v-else-if="ic.threatLevel === 1" class="entity-tag entity-tag--small entity-tag--level-one-positive margin-r-6">
+                      {{ic.value}}
+                    </div>
+                  </template>
                 </template>
-              </template>
-            </div>
-            <div class="information-aggregation-tags">
-              <div v-for="ic in scope.row.intelligenceContent" >
-                <div v-if="ic.type === 1">
-                  <div v-if="ic.threatLevel === -1" class="entity-tag entity-tag--small entity-tag--level-two-negative margin-r-6">
-                    {{ic.value}}
-                  </div>
-                  <div v-else-if="ic.threatLevel === 0" class="entity-tag entity-tag--small entity-tag--level-two-normal margin-r-6">
-                    {{ic.value}}
-                  </div>
-                  <div v-else-if="ic.threatLevel === 1" class="entity-tag entity-tag--small entity-tag--level-two-positive margin-r-6">
-                    {{ic.value}}
+              </div>
+              <div class="information-aggregation-tags">
+                <div v-for="ic in scope.row.intelligenceContent" >
+                  <div v-if="ic.type === 1">
+                    <div v-if="ic.threatLevel === -1" class="entity-tag entity-tag--small entity-tag--level-two-negative margin-r-6">
+                      {{ic.value}}
+                    </div>
+                    <div v-else-if="ic.threatLevel === 0" class="entity-tag entity-tag--small entity-tag--level-two-normal margin-r-6">
+                      {{ic.value}}
+                    </div>
+                    <div v-else-if="ic.threatLevel === 1" class="entity-tag entity-tag--small entity-tag--level-two-positive margin-r-6">
+                      {{ic.value}}
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column
-              key="status"
-              width="150px"
-              :label="$t('entities.tab.informationAggregation.status')"
-              prop="status"
-      >
-        <template #default="scope">
-          <div v-if="scope.row.status === 1" class="information-aggregation__valid">
-            有效
-          </div>
-          <div v-else-if="scope.row.status === 0" class="information-aggregation__invalid">
-            无效
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
+          </template>
+        </el-table-column>
+        <el-table-column
+            key="status"
+            width="150px"
+            :label="$t('entities.tab.informationAggregation.status')"
+            prop="status"
+        >
+          <template #default="scope">
+            <div v-if="scope.row.status === 1" class="information-aggregation__valid">
+              有效
+            </div>
+            <div v-else-if="scope.row.status === 0" class="information-aggregation__invalid">
+              无效
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
   </div>
 </template>
 
@@ -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,11 +1,15 @@
 <template>
-  <chart-no-data v-if="isNoData && !showError"></chart-no-data>
-  <div 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>
-      <div class="type-content">
-        <div v-for="openPort in openPortList" class="data-item">{{openPort}}</div>
+  <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 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>
+        <div class="type-content">
+          <div v-for="openPort in openPortList" class="data-item">{{openPort}}</div>
+        </div>
       </div>
     </div>
   </div>
@@ -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) {