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/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(() => {