fix: 修复app详情列表曲线图缺失、统计数据错位问题

src/components/entities/EntityList.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="entity-list">
+    <div class="entity__loading" v-show="loading">
+      <i class="el-icon-loading"></i>
+    </div>
     <div class="entity-list__content">
       <div class="cn-entity" v-for="(d, i) in entityList" :key="i">
         <div class="cn-entity__header">
@@ -29,9 +32,9 @@
               </div>
             </template>
           </div>
-          <div class="header__bottom__line" ></div>
+          <div class="header__bottom__line"></div>
         </div>
-        <div class="cn-entity__body" >
+        <div class="cn-entity__body">
           <template v-if="from === 'ip'">
             <div class="body__row">
               <span class="body__row-label"><i class="cn-icon cn-icon-country" ></i>{{$t('overall.country')}}：</span>
@@ -49,9 +52,11 @@
             <div class="body__drawing-box">
               <div class="body__drawing" :id="`entityListChart${d.id}`"></div>
             </div>
-            <div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon" style=""></i>{{d.latestReceived || 0}} bps</div>
-            <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise" style=""></i>{{d.latestSent || 0}} bps</div>
-            <div class="body__detail" @click="entityDetail({ip: d.ip, type: 4})">{{$t('overall.detail')}}></div>
+            <div class="body__statics">
+              <div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon" style=""></i>{{d.latestReceived || 0}} bps</div>
+              <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise" style=""></i>{{d.latestSent || 0}} bps</div>
+              <div class="body__detail" @click="entityDetail({ip: d.ip, type: 4})">{{$t('overall.detail')}}></div>
+            </div>
           </template>
           <template v-else-if="from === 'domain'">
             <div class="body__row">
@@ -70,9 +75,11 @@
             <div class="body__drawing-box">
               <div class="body__drawing" :id="`entityListChart${d.id}`"></div>
             </div>
-            <div class="entity-statics-down" style=" "><i class="cn-icon cn-icon-fall entity-statics-icon" style=""></i>{{d.latestReceived || 0}} bps</div>
-            <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise" style=""></i>{{d.latestSent || 0}} bps</div>
-            <div class="body__detail" @click="entityDetail({domain: d.domainName, type: 5})">{{$t('overall.detail')}}></div>
+            <div class="body__statics">
+              <div class="entity-statics-down" style=" "><i class="cn-icon cn-icon-fall entity-statics-icon" style=""></i>{{d.latestReceived || 0}} bps</div>
+              <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise" style=""></i>{{d.latestSent || 0}} bps</div>
+              <div class="body__detail" @click="entityDetail({domain: d.domainName, type: 5})">{{$t('overall.detail')}}></div>
+            </div>
           </template>
           <template v-else-if="from === 'app'">
             <div class="body__row">
@@ -91,9 +98,11 @@
             <div class="body__drawing-box">
               <div class="body__drawing" :id="`entityListChart${d.id}`"></div>
             </div>
-            <div class="entity-statics-down" style=" "><i class="cn-icon cn-icon-fall entity-statics-icon" style=""></i>{{d.latestReceived || 0}} bps</div>
-            <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise" style=""></i>{{d.latestSent || 0}} bps</div>
-            <div class="body__detail" @click="entityDetail({app: d.appName, type: 6})">{{$t('overall.detail')}}></div>
+            <div class="body__statics">
+              <div class="entity-statics-down" style=" "><i class="cn-icon cn-icon-fall entity-statics-icon" style=""></i>{{d.latestReceived || 0}} bps</div>
+              <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise" style=""></i>{{d.latestSent || 0}} bps</div>
+              <div class="body__detail" @click="entityDetail({app: d.appName, type: 6})">{{$t('overall.detail')}}></div>
+            </div>
           </template>
         </div>
       </div>
@@ -127,7 +136,8 @@ export default {
   props: {
     listData: Array,
     from: String,
-    pageObj: Object
+    pageObj: Object,
+    loading: Boolean
   },
   components: {
 
@@ -359,4 +369,17 @@ export default {
 </script>
 
 <style>
+.entity__loading {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+}
+.entity__loading i {
+  position: absolute;
+  left: calc(50% - 15px);
+  top: calc(50% - 15px);
+  font-size: 30px;
+  color: #aaa;
+}
 </style>

src/components/entities/entities.scss

@@ -11,6 +11,7 @@
     height: 100%;
     width: 100%;
     overflow: hidden;
+    position: relative;
 
     .entity-list__content {
     /*  display: grid;
@@ -126,37 +127,6 @@
           position: relative;
           height:240px;
 
-          .entity-statics-down{
-            position: absolute;
-            bottom: 20px;
-            left: 30px;
-            font-family: PingFangSC-Medium;
-            font-size: 14px;
-            color: #666666;
-            font-weight: 500;
-            margin-right:24px;
-            i {
-              color:#5881B7;
-              font-size:14px;
-              margin-right:6px;
-            }
-          }
-
-          .entity-statics-up{
-            position: absolute;
-            bottom: 20px;
-            left: 112px;
-            font-family: PingFangSC-Medium;
-            font-size: 14px;
-            color: #666666;
-            font-weight: 500;
-            i {
-              color:#62B16C;
-              font-size:14px;
-              margin-right:6px;
-            }
-
-          }
           .body__row {
             display: flex;
             align-items: center;
@@ -204,18 +174,42 @@
             color: #666666;
             font-weight: 400;
           }
-          .body__detail {
-            padding: 9px 0 0 30px;
-            cursor: pointer;
-            font-family: PingFangSC-Regular;
-            font-size: 14px;
-            color: #8FA1BE;
-            font-weight: 400;
-
+          .body__statics {
             position: absolute;
             bottom: 20px;
-            right: 30px;
+            display: flex;
+            width: 100%;
+            padding: 0 30px;
+            font-size: 14px;
+            color: #666666;
+            .entity-statics-down{
+              padding-right: 20px;
+              min-width: 80px;
 
+              i {
+                color:#5881B7;
+                font-size:14px;
+                padding-right:6px;
+              }
+            }
+
+            .entity-statics-up{
+              padding-right: 20px;
+              min-width: 80px;;
+              i {
+                color: #62B16C;
+                font-size: 14px;
+                padding-right: 6px;
+              }
+
+            }
+            .body__detail {
+              cursor: pointer;
+              font-size: 14px;
+              color: #8FA1BE;
+              position: absolute;
+              right: 30px;
+            }
           }
         }
       }

src/views/charts/Chart.vue

@@ -915,12 +915,13 @@ export default {
               const sumData = []
               data.forEach(r => {
                 const hit = sumData.find(s => s.id === r.serverId)
+                const value = Number(r.establishLatency || r.httpResponseLatency || r.sslConLatency || r.sequenceGapLossPercent || r.pktRetransPercent || r.sessions) || 0
                 if (hit) {
-                  hit.value += Number(r.establishLatency || r.httpResponseLatency || r.sslConLatency || r.sequenceGapLossPercent || r.pktRetransPercent || r.sessions) || 0
+                  hit.value += value
                 } else {
                   sumData.push({
                     id: r.serverId,
-                    value: Number(r.establishLatency || r.httpResponseLatency || r.sslConLatency || r.sequenceGapLossPercent || r.pktRetransPercent || r.sessions) || 0
+                    value
                   })
                 }
               })

src/views/entities/EntityExplorer.vue

@@ -23,6 +23,7 @@
       <entity-list
           :list-data="listData"
           :from="from"
+          :loading="loading"
           :page-obj="pageObjRight"
           @showDetail="entityDetail"
           @pageNo="pageNoRight"
@@ -71,7 +72,8 @@ export default {
         total: 0
       },
       showDetail: false,
-      currentEntity: {}
+      currentEntity: {},
+      loading: true
     }
   },
   components: {
@@ -121,17 +123,25 @@ export default {
       }
     },
     async search () {
+      const vm = this
       const params = { from: this.from, q: doubleQuotationToSingle(this.searchContent) }
-      this.listData = (await getEntityList({ ...this.pageObjRight, ...params })).map(d => ({
-        ...d,
-        id: window.btoa(d.ip || d.domainName || d.appId),
-        latestSent: null,
-        latestReceived: null
-      }))
-      this.pageObjRight.total = await getEntityCount(params)
-      const { topFilterData, bottomFilterData } = await this.queryFilterData(params)
-      this.topFilterData = topFilterData
-      this.bottomFilterData = bottomFilterData
+      this.loading = true
+      try {
+        this.listData = (await getEntityList({ ...this.pageObjRight, ...params })).map(d => ({
+          ...d,
+          id: window.btoa(d.ip || d.domainName || d.appName),
+          latestSent: null,
+          latestReceived: null
+        }))
+        this.pageObjRight.total = await getEntityCount(params)
+        const { topFilterData, bottomFilterData } = await this.queryFilterData(params)
+        this.topFilterData = topFilterData
+        this.bottomFilterData = bottomFilterData
+      } finally {
+        setTimeout(() => {
+          vm.loading = false
+        }, 250)
+      }
     },
     /* 重置条件 */
     reset () {