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

2021-10-09 16:14:50 +08:00
parent 254fa3d5b6
commit 392cb144ee
4 changed files with 93 additions and 65 deletions
--- a/src/components/entities/EntityList.vue
+++ b/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">
@@ -49,9 +52,11 @@
            <div class="body__drawing-box">
              <div class="body__drawing" :id="`entityListChart${d.id}`"></div>
            </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="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="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>
--- a/src/components/entities/entities.scss
+++ b/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;
+            }
          }
        }
      }
--- a/src/views/charts/Chart.vue
+++ b/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
                  })
                }
              })
--- a/src/views/entities/EntityExplorer.vue
+++ b/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,10 +123,13 @@ export default {
      }
    },
    async search () {
+      const vm = this
      const params = { from: this.from, q: doubleQuotationToSingle(this.searchContent) }
+      this.loading = true
+      try {
        this.listData = (await getEntityList({ ...this.pageObjRight, ...params })).map(d => ({
          ...d,
-        id: window.btoa(d.ip || d.domainName || d.appId),
+          id: window.btoa(d.ip || d.domainName || d.appName),
          latestSent: null,
          latestReceived: null
        }))
@@ -132,6 +137,11 @@ export default {
        const { topFilterData, bottomFilterData } = await this.queryFilterData(params)
        this.topFilterData = topFilterData
        this.bottomFilterData = bottomFilterData
+      } finally {
+        setTimeout(() => {
+          vm.loading = false
+        }, 250)
+      }
    },
    /* 重置条件 */
    reset () {