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

2022-04-27 14:52:25 +08:00
parent db7d804ef5
commit 4d0406325d
14 changed files with 193 additions and 63 deletions
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/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>APP</span>
+            <span class="overview-left-loading">
+              <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>DOMAIN</span>
+            <span class="overview-left-loading">
+              <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>IP</span>
+            <span class="overview-left-loading">
+              <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
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/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 {
--- a/src/views/entityExplorer/entityList/Card.vue
+++ b/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>
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -99,21 +99,24 @@
                      : '-'
                  }}</span>
                  <!-- 曲线-->
-                  <div
-                    class="row__charts"
-                    :id="`entityDetailSend${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'domain'"
-                  ></div>
-                  <div
-                    class="row__charts"
-                    :id="`entityDetailSend${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'app'"
-                  ></div>
-                  <div
-                    class="row__charts"
-                    :id="`entityDetailSend${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'ip'"
-                  ></div>
+                  <div class="item-box-loading">
+                    <loading :loading="loading"></loading>
+                    <div
+                        class="row__charts"
+                        :id="`entityDetailSend${entityType}${listMode}`"
+                        v-if="entityData.entityType === 'domain'"
+                    ></div>
+                    <div
+                        class="row__charts"
+                        :id="`entityDetailSend${entityType}${listMode}`"
+                        v-if="entityData.entityType === 'app'"
+                    ></div>
+                    <div
+                        class="row__charts"
+                        :id="`entityDetailSend${entityType}${listMode}`"
+                        v-if="entityData.entityType === 'ip'"
+                    ></div>
+                  </div>
                </div>
              </div>

@@ -134,21 +137,24 @@
                      : '-'
                  }}</span>

-                  <div
-                    class="row__charts"
-                    :id="`entityDetailReceived${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'domain'"
-                  ></div>
-                  <div
-                    class="row__charts"
-                    :id="`entityDetailReceived${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'app'"
-                  ></div>
-                  <div
-                    class="row__charts"
-                    :id="`entityDetailReceived${entityType}${listMode}`"
-                    v-if="entityData.entityType === 'ip'"
-                  ></div>
+                  <div class="item-box-loading">
+                    <loading :loading="loading"></loading>
+                    <div
+                      class="row__charts"
+                      :id="`entityDetailReceived${entityType}${listMode}`"
+                      v-if="entityData.entityType === 'domain'"
+                    ></div>
+                    <div
+                      class="row__charts"
+                      :id="`entityDetailReceived${entityType}${listMode}`"
+                      v-if="entityData.entityType === 'app'"
+                    ></div>
+                    <div
+                      class="row__charts"
+                      :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 // 是否是折叠状态
    }
  },
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/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
      }
    }
  },
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/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
      }
    }
  },
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/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: {
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/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(() => {
--- a/src/views/entityExplorer/entityList/entityListMixin.js
+++ b/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(() => {