diff --git a/src/components/entities/EntityList.vue b/src/components/entities/EntityList.vue index b6e76ff6..f65a9c57 100644 --- a/src/components/entities/EntityList.vue +++ b/src/components/entities/EntityList.vue @@ -1,5 +1,8 @@ -
+
-
+
@@ -127,7 +136,8 @@ export default { props: { listData: Array, from: String, - pageObj: Object + pageObj: Object, + loading: Boolean }, components: { @@ -359,4 +369,17 @@ export default { diff --git a/src/components/entities/entities.scss b/src/components/entities/entities.scss index 2019b641..f3a70af4 100644 --- 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; + } } } } diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue index 095b5e28..9e5af313 100644 --- 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 }) } }) diff --git a/src/views/entities/EntityExplorer.vue b/src/views/entities/EntityExplorer.vue index 01fea448..b13a6e4d 100644 --- a/src/views/entities/EntityExplorer.vue +++ b/src/views/entities/EntityExplorer.vue @@ -23,6 +23,7 @@ ({ - ...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 () {