feat: 对实体详情页面增加loading效果

src/assets/css/components/views/entityExplorer/entity-explorer.scss

@@ -79,15 +79,22 @@
         align-items: center;
         padding: 0 30px;
 
-        span:first-of-type {
+        .overview-left-span {
-          font-size: 30px;
-          color: #333333;
-          font-weight: bold;
-        }
-        span:last-of-type {
           font-size: 16px;
           color: #666666;
         }
+        .overview-left-loading {
+          display: inline-block;
+          position: relative;
+          .overview-left-loading-span {
+            font-size: 30px;
+            color: #333333;
+            font-weight: bold;
+          }
+          .chart__loading i.el-icon-loading {
+            top: calc(50% - 12px);
+          }
+        }
       }
       .overview-right {
         display: flex;

src/assets/css/components/views/entityExplorer/entity-filter.scss

@@ -55,6 +55,13 @@
         }
         .row__value {
           color: #666;
+          position: relative;
+          display: inline-block;
+          .chart__loading i.el-icon-loading {
+            font-size: 18px;
+            top: calc(50% - 10px);
+            left: calc(50% - 8px);
+          }
         }
       }
     }

src/assets/css/components/views/entityExplorer/entityList/card.scss

@@ -92,8 +92,9 @@
       justify-content: left;
     }
     .body__drawing-box {
+      height: 40px;
       position: relative;
-      height: 60px;
+      margin-top: 10px;
       .chart__loading {
         top: 0;
         height: 100%;
@@ -101,8 +102,8 @@
     }
     .body__drawing {
       position: absolute;
-      padding: 10px 30px;
+      padding: 0 30px;
-      height: 60px;
+      height: 100%;
       width: 100%;
     }
 

src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss

@@ -99,6 +99,14 @@
           &.row__content--width200 {
             width: 200px;
           }
+          .row__content-loading {
+            position: relative;
+            .chart__loading i.el-icon-loading {
+              font-size: 14px;
+              top: calc(50% - 5px);
+              left: calc(50% - 4px);
+            }
+          }
         }
         .row__contents {
           display: flex;

src/assets/css/components/views/entityExplorer/entityList/row.scss

@@ -93,6 +93,16 @@
                 display: flex;
                 align-items: center;
                 flex-direction: row;
+                .item-box-loading {
+                  position: relative;
+                  display: flex;
+                  .chart__loading i.el-icon-loading {
+                    font-size: 14px;
+                    padding: 0;
+                    top: calc(50% - 5px);
+                    left: calc(50% - 4px);
+                  }
+                }
 
                 i {
                   padding-right: 6px;
@@ -166,4 +176,4 @@
       }
     }
   }
-}
+}

src/views/entityExplorer/EntityExplorer.vue

@@ -23,6 +23,7 @@
       <div style="display: flex; height: 100%;">
         <entity-filter
             :filter-data="filterData"
+            :loading-left="loadingLeft"
             :q="q"
             :time-filter="timeFilter"
             @filter="filter"
@@ -55,8 +56,11 @@
         <el-divider direction="vertical"></el-divider>
         <div class="entity-overview">
           <div class="overview-left">
-            <span>{{entityAppTotal}}</span>
+            <span class="overview-left-loading">
-            <span>APP</span>
+              <loading :loading="loading"></loading>
+              <span class="overview-left-loading-span">{{entityAppTotal}}</span>
+            </span>
+            <span class="overview-left-span">APP</span>
           </div>
           <div class="overview-right">
             <div class="right-row">
@@ -74,8 +78,11 @@
         <el-divider direction="vertical"></el-divider>
         <div class="entity-overview">
           <div class="overview-left">
-            <span>{{entityDomainTotal}}</span>
+            <span class="overview-left-loading">
-            <span>DOMAIN</span>
+              <loading :loading="loading"></loading>
+              <span class="overview-left-loading-span">{{entityDomainTotal}}</span>
+            </span>
+            <span class="overview-left-span">DOMAIN</span>
           </div>
           <div class="overview-right">
             <div class="right-row">
@@ -93,8 +100,11 @@
         <el-divider direction="vertical"></el-divider>
         <div class="entity-overview">
           <div class="overview-left">
-            <span>{{entityIpTotal}}</span>
+            <span class="overview-left-loading">
-            <span>IP</span>
+              <loading :loading="loading"></loading>
+              <span class="overview-left-loading-span">{{entityIpTotal}}</span>
+            </span>
+            <span class="overview-left-span">IP</span>
           </div>
           <div class="overview-right">
             <div class="right-row">
@@ -127,10 +137,12 @@ import { api } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { ref } from 'vue'
 import Pagination from '@/components/common/Pagination'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'entity-explorer',
   components: {
+    Loading,
     ExplorerSearch,
     DateTimeRange,
     TimeRefresh,
@@ -259,7 +271,9 @@ export default {
       q: '',
       metaList: [],
       limitFilterType: true, // 是否限定了filter的类型
-      listLoading: false
+      listLoading: false,
+      loading: false,
+      loadingLeft: false
     }
   },
   methods: {
@@ -415,6 +429,7 @@ export default {
         startTime: getSecond(params.startTime),
         endTime: getSecond(params.endTime)
       }
+      this.loadingLeft = true
       get(api.entityFilter, queryParams).then(response => {
         if (response.data && response.data.result) {
           switch (params.entityType) {
@@ -452,6 +467,7 @@ export default {
               break
             }
           }
+          this.loadingLeft = false
         }
       })
     },
@@ -500,18 +516,24 @@ export default {
       }
       // Total
       get(api.entityTotal, { entityType: 'app' }).then(response => {
+        this.loading = true
         if (response.code === 200) {
           this.entityAppTotal = response.data.result
+          this.loading = false
         }
       })
       get(api.entityTotal, { entityType: 'domain' }).then(response => {
+        this.loading = true
         if (response.code === 200) {
           this.entityDomainTotal = response.data.result
+          this.loading = false
         }
       })
       get(api.entityTotal, { entityType: 'ip' }).then(response => {
+        this.loading = true
         if (response.code === 200) {
           this.entityIpTotal = response.data.result
+          this.loading = false
         }
       })
       // New

src/views/entityExplorer/EntityFilter.vue

@@ -11,9 +11,12 @@
         <div class="filter__row" v-for="(item, i) in filter.data" :key="i"  @click="showTopDialog(i, item, filter)"  :ref="`entityTopTen`+i">
           <div class="row__label">
             <i :class="item.icon"></i>
-            <span>{{item.label}}</span>
+              <span>{{item.label}}</span>
+          </div>
+          <div class="row__value">
+            <loading :loading="loadingLeft"></loading>
+            <span>{{item.value}}</span>
           </div>
-          <div class="row__value">{{item.value}}</div>
         </div>
       </div>
     </div>
@@ -36,15 +39,18 @@
 import EntityTop from '@/components/entities/EntityTop'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
+import Loading from '@/components/common/Loading'
 export default {
   name: 'EntityFilter',
   components: {
+    Loading,
     EntityTop
   },
   props: {
     filterData: Array,
     q: String,
-    timeFilter: Object
+    timeFilter: Object,
+    loadingLeft: Boolean
   },
   data () {
     return {

src/views/entityExplorer/entityList/Card.vue

@@ -53,6 +53,7 @@
         </div>
         <!-- 曲线-->
         <div class="body__drawing-box">
+          <loading :loading="loading"></loading>
           <div class="body__drawing" :id="`entityListChart${entityData.ipAddr}${listMode}`"></div>
         </div>
         <div class="body__statics">
@@ -90,6 +91,7 @@
         </div>
         <!-- 曲线-->
         <div class="body__drawing-box">
+          <loading :loading="loading"></loading>
           <div class="body__drawing" :id="`entityListChart${entityData.domainName}${listMode}`"></div>
         </div>
         <div class="body__statics">
@@ -126,6 +128,7 @@
         </div>
         <!-- 曲线-->
         <div class="body__drawing-box">
+          <loading :loading="loading"></loading>
           <div class="body__drawing" :id="`entityListChart${entityData.appName}${listMode}`"></div>
         </div>
         <div class="body__statics">
@@ -140,8 +143,15 @@
 
 <script>
 import entityListMixin from './entityListMixin'
+import Loading from '@/components/common/Loading'
 export default {
   name: 'Card',
-  mixins: [entityListMixin]
+  components: { Loading },
+  mixins: [entityListMixin],
+  data () {
+    return {
+      loading: false
+    }
+  }
 }
 </script>

src/views/entityExplorer/entityList/Row.vue

@@ -99,21 +99,24 @@
                       : '-'
                   }}</span>
                   <!-- 曲线-->
-                  <div
+                  <div class="item-box-loading">
-                    class="row__charts"
+                    <loading :loading="loading"></loading>
-                    :id="`entityDetailSend${entityType}${listMode}`"
+                    <div
-                    v-if="entityData.entityType === 'domain'"
+                        class="row__charts"
-                  ></div>
+                        :id="`entityDetailSend${entityType}${listMode}`"
-                  <div
+                        v-if="entityData.entityType === 'domain'"
-                    class="row__charts"
+                    ></div>
-                    :id="`entityDetailSend${entityType}${listMode}`"
+                    <div
-                    v-if="entityData.entityType === 'app'"
+                        class="row__charts"
-                  ></div>
+                        :id="`entityDetailSend${entityType}${listMode}`"
-                  <div
+                        v-if="entityData.entityType === 'app'"
-                    class="row__charts"
+                    ></div>
-                    :id="`entityDetailSend${entityType}${listMode}`"
+                    <div
-                    v-if="entityData.entityType === 'ip'"
+                        class="row__charts"
-                  ></div>
+                        :id="`entityDetailSend${entityType}${listMode}`"
+                        v-if="entityData.entityType === 'ip'"
+                    ></div>
+                  </div>
                 </div>
               </div>
 
@@ -134,21 +137,24 @@
                       : '-'
                   }}</span>
 
-                  <div
+                  <div class="item-box-loading">
-                    class="row__charts"
+                    <loading :loading="loading"></loading>
-                    :id="`entityDetailReceived${entityType}${listMode}`"
+                    <div
-                    v-if="entityData.entityType === 'domain'"
+                      class="row__charts"
-                  ></div>
+                      :id="`entityDetailReceived${entityType}${listMode}`"
-                  <div
+                      v-if="entityData.entityType === 'domain'"
-                    class="row__charts"
+                    ></div>
-                    :id="`entityDetailReceived${entityType}${listMode}`"
+                    <div
-                    v-if="entityData.entityType === 'app'"
+                      class="row__charts"
-                  ></div>
+                      :id="`entityDetailReceived${entityType}${listMode}`"
-                  <div
+                      v-if="entityData.entityType === 'app'"
-                    class="row__charts"
+                    ></div>
-                    :id="`entityDetailReceived${entityType}${listMode}`"
+                    <div
-                    v-if="entityData.entityType === 'ip'"
+                      class="row__charts"
-                  ></div>
+                      :id="`entityDetailReceived${entityType}${listMode}`"
+                      v-if="entityData.entityType === 'ip'"
+                    ></div>
+                  </div>
                 </div>
               </div>
               <div class="basic-info__item">
@@ -190,6 +196,7 @@
 import DetailOverview from '@/views/entityExplorer/entityList/detailOverview/DetailOverview'
 import entityListMixin from './entityListMixin'
 import relatedServer from '@/mixins/relatedServer'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'Row',
@@ -199,11 +206,13 @@ export default {
     listMode: String
   },
   components: {
+    Loading,
     DetailOverview
   },
   mixins: [entityListMixin, relatedServer],
   data () {
     return {
+      loading: false,
       isCollapse: true // 是否是折叠状态
     }
   },

src/views/entityExplorer/entityList/detailOverview/App.vue

@@ -41,12 +41,18 @@
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailSend${entityData.appName}`" ></div>
+            <div class="row__content-loading">
+              <loading :loading-app="loadingApp"></loading>
+               <div class="row__charts" :id="`entityDetailSend${entityData.appName}`" ></div>
+            </div>
           </div>
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailReceived${entityData.appName}`" ></div>
+            <div class="row__content-loading">
+              <loading :loading-app="loadingApp"></loading>
+               <div class="row__charts" :id="`entityDetailReceived${entityData.appName}`" ></div>
+            </div>
           </div>
         </div>
       </div>
@@ -193,12 +199,14 @@ import ChartSingleValue from '@/views/charts/charts/ChartSingleValue'
 import { get } from '@/utils/http'
 import relatedServer from '@/mixins/relatedServer'
 import { getSecond, getMillisecond } from '@/utils/date-util'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'App',
   mixins: [entityDetailMixin, relatedServer],
   components: {
     Chart,
+    Loading,
     ChartSingleValue
   },
   data () {
@@ -270,7 +278,8 @@ export default {
             i18n: 'entities.pktRetransPercent'
           }
         ],
-        chartDatas: [null, null, null, null, null]
+        chartDatas: [null, null, null, null, null],
+        loadingApp: false
       }
     }
   },

src/views/entityExplorer/entityList/detailOverview/Domain.vue

@@ -45,12 +45,18 @@
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailSend${entityData.domainName}`" ></div>
+            <div class="row__content-loading">
+              <loading :loading-domian="loadingDomain"></loading>
+              <div class="row__charts" :id="`entityDetailSend${entityData.domainName}`" ></div>
+            </div>
           </div>
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailReceived${entityData.domainName}`" ></div>
+            <div class="row__content-loading">
+              <loading :loading-domain="loadingDomian"></loading>
+              <div class="row__charts" :id="`entityDetailReceived${entityData.domainName}`" ></div>
+            </div>
           </div>
         </div>
       </div>
@@ -197,11 +203,13 @@ import _ from 'lodash'
 import { get } from '@/utils/http'
 import relatedServer from '@/mixins/relatedServer'
 import { getSecond, getMillisecond } from '@/utils/date-util'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'Domain',
   components: {
     ChartSingleValue,
+    Loading,
     Chart
   },
   mixins: [entityDetailMixin, relatedServer],
@@ -275,7 +283,8 @@ export default {
             i18n: 'entities.pktRetransPercent'
           }
         ],
-        chartDatas: [null, null, null, null, null]
+        chartDatas: [null, null, null, null, null],
+        loadingDomain: false
       }
     }
   },

src/views/entityExplorer/entityList/detailOverview/Ip.vue

@@ -41,7 +41,10 @@
           <div class="row__content">
             <div class="row__charts-msg">{{unitConvert(entityData.queryRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDnsServerInfo${entityData.ipAddr}`"></div>
+            <div class="row__content-loading">
+              <loading :loading="loading"></loading>
+              <div class="row__charts" :id="`entityDnsServerInfo${entityData.ipAddr}`"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -64,12 +67,18 @@
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.sent')}}：{{unitConvert(entityData.bytesSentRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailSend${entityData.ipAddr}`"></div>
+            <div class="row__content-loading">
+              <loading :loading-ip="loadingIp"></loading>
+              <div class="row__charts" :id="`entityDetailSend${entityData.ipAddr}`"></div>
+            </div>
           </div>
           <div class="row__content">
             <div class="row__charts-msg">{{$t('overall.received')}}：{{unitConvert(entityData.bytesReceivedRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
-            <div class="row__charts" :id="`entityDetailReceived${entityData.ipAddr}`"></div>
+            <div class="row__content-loading">
+              <loading :loading-ip="loadingIp"></loading>
+              <div class="row__charts" :id="`entityDetailReceived${entityData.ipAddr}`"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -216,11 +225,13 @@ import _ from 'lodash'
 import { get } from '@/utils/http'
 import relatedServer from '@/mixins/relatedServer'
 import { getSecond, getMillisecond } from '@/utils/date-util'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'Ip',
   mixins: [entityDetailMixin, relatedServer],
   components: {
+    Loading,
     Chart,
     ChartSingleValue
   },
@@ -296,7 +307,8 @@ export default {
         ],
         chartDatas: [null, null, null, null, null]
       },
-      timer: null
+      timer: null,
+      loadingIp: false
     }
   },
   computed: {

src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js

@@ -9,7 +9,10 @@ import { shallowRef } from 'vue'
 export default {
   props: {
     entity: Object,
-    timeFilter: Object
+    timeFilter: Object,
+    loadingIp: Boolean,
+    loadingApp: Boolean,
+    loadingDomain: Boolean
   },
   data () {
     return {
@@ -69,6 +72,13 @@ export default {
     queryEntityDetailTraffic () {
       this.sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}`))
       this.receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}`))
+      if (this.entityName === 'app') {
+        this.loadingApp = true
+      } else if (this.entityName === 'ip') {
+        this.loadingIp = true
+      } else if (this.entityName === 'domain') {
+        this.loadingDomain = true
+      }
       get(this.trafficUrl, this.getQueryParams()).then(response => {
         if (response.code === 200 && response.data.result && response.data.result.length > 0) {
           response.data.result.forEach(t => {
@@ -126,6 +136,13 @@ export default {
           this.echartsArray.push(shallowRef(this.sentChart), shallowRef(this.receivedChart))
           this.sentChart.setOption(this.chartOptionSent)
           this.receivedChart.setOption(this.chartOptionReceived)
+          if (this.entityName === 'app') {
+            this.loadingApp = false
+          } else if (this.entityName === 'ip') {
+            this.loadingIp = false
+          } else if (this.entityName === 'domain') {
+            this.loadingDomain = false
+          }
         }
       }).finally(() => {
         setTimeout(() => {

src/views/entityExplorer/entityList/entityListMixin.js

@@ -12,7 +12,8 @@ export default {
   props: {
     entity: Object,
     timeFilter: {},
-    listMode: String
+    listMode: String,
+    loading: Boolean
   },
   data () {
     return {
@@ -205,6 +206,7 @@ export default {
       }
     },
     queryEntityDetailTraffic () {
+      this.loading = true
       get(this.trafficUrl, this.getQueryParams()).then(response => {
         if (response.code === 200 && response.data.result && response.data.result.length > 0) {
           let sentSeries
@@ -271,6 +273,7 @@ export default {
               series: [receivedSeries]
             })
           }
+          this.loading = false
         }
       }).finally(() => {
         setTimeout(() => {