fix: 部分页面补充loading效果

src/assets/css/components/views/charts2/linkTrafficLine.scss

@@ -14,6 +14,7 @@
     display: flex;
     flex-direction: column;
     flex: 1;
+    position: relative;
     padding: 20px 20px 0 20px;
     border-right: 1px solid #E2E5EC;
     .link-traffic-list-center:nth-of-type(1) {

src/views/charts2/Chart.vue

@@ -238,7 +238,7 @@ export default {
   computed: {
     // 排除某些不需要loading的图表，例如npm-tabs
     disableLoading () {
-      const disableChartTypes = [typeMapping.npm.npmTabs]
+      const disableChartTypes = [typeMapping.npm.npmTabs, typeMapping.linkMonitor.linkTrafficLine]
       return disableChartTypes.indexOf(this.chart.type) > -1
     }
   },

src/views/charts2/charts/dnsInsight/DnsActiveMaliciousDomain.vue

@@ -120,7 +120,7 @@ export default {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime)
       }
-
+      this.toggleLoading(true)
       get(api.dnsInsight.activeMaliciousDomain, params).then(res => {
         if (res.code === 200) {
           const data = res.data.result

src/views/charts2/charts/dnsInsight/DnsEventChart.vue

@@ -61,6 +61,7 @@ export default {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime)
       }
+      this.toggleLoading(true)
       get(api.dnsInsight.eventChart, params).then(res => {
         const data = res.data.result
         this.pieData = []

src/views/charts2/charts/dnsInsight/DnsEventChartByBar.vue

@@ -83,8 +83,10 @@ export default {
       }
     },
     eventsByTypeData () {
+      this.toggleLoading(false)
       if (this.series.length > 0) {
         this.init()
+        this.toggleLoading(true)
       }
     },
     resize () {

src/views/charts2/charts/dnsInsight/DnsEventChartByPie.vue

@@ -128,9 +128,11 @@ export default {
       }
     },
     eventsByTypeData () {
+      this.toggleLoading(false)
       if (this.pieData.length > 0) {
         this.chartData = this.pieData
         this.init()
+        this.toggleLoading(true)
       }
     },
     resize () {

src/views/charts2/charts/dnsInsight/DnsRecentEvents.vue

@@ -205,6 +205,7 @@ export default {
         type: this.tableType,
         severity: this.tableSeverity
       }
+      this.toggleLoading(true)
       get(api.dnsInsight.recentEvents, params).then(res => {
         if (res.code === 200) {
           if (!res.data.result || res.data.result.length === 0) {

src/views/charts2/charts/linkMonitor/LinkTrafficLine.vue

@@ -27,12 +27,6 @@ export default {
   data () {
     return {
     }
-  },
-  methods: {
-
-  },
-  mounted () {
-    this.toggleLoading(false)
   }
 }
 </script>

src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownLine.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="line network link-traffic">
+    <loading :loading="loading"></loading>
     <div class="line-header">
       <div class="line-header-left">
         <div class="line-value-active" v-if="lineTab"></div>
@@ -64,10 +65,12 @@ import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { useRoute } from 'vue-router'
 import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
+import Loading from '@/components/common/Loading'
 export default {
   name: 'linkTrafficDrillDownLine',
   components: {
-    ChartNoData
+    ChartNoData,
+    Loading
   },
   setup () {
     const { query } = useRoute()
@@ -111,7 +114,8 @@ export default {
       leftOffset: 0,
       sizes: [3, 4, 6, 8, 9, 10],
       dynamicVariable: '',
-      showMarkLine: true
+      showMarkLine: true,
+      loading: false
     }
   },
   watch: {
@@ -154,7 +158,7 @@ export default {
       if (this.queryCondition) {
         params.q = this.queryCondition
       }
-      this.toggleLoading(true)
+      this.loading = true
       get(api.linkMonitor.totalTrafficAnalysis, params).then((res) => {
         if (res.code === 200) {
           this.isNoData = res.data.result.length === 0
@@ -224,7 +228,7 @@ export default {
         console.error(e)
         this.isNoData = true
       }).finally(() => {
-        this.toggleLoading(false)
+        this.loading = false
       })
     },
     echartsInit (echartsData) {

src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="link-traffic-list">
+    <loading :loading="loading"></loading>
     <div class="link-traffic-list-center">
       <div class="link-traffic-list-center-label">{{$t('network.total')}}</div>
       <div class="link-traffic-list-center-value">{{unitConvert(linkTrafficListData.totalBitsRate, unitTypes.bps).join('')}}</div>
@@ -46,7 +47,7 @@ import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { getSecond } from '@/utils/date-util'
 import { computeScore } from '@/utils/tools'
-
+import Loading from '@/components/common/Loading'
 export default {
   name: 'linkTrafficList',
   mixins: [chartMixin],
@@ -57,6 +58,9 @@ export default {
       queryCondition
     }
   },
+  components: {
+    Loading
+  },
   data () {
     return {
       unitTypes,
@@ -64,7 +68,8 @@ export default {
       timer: null,
       linkTrafficListData: {},
       cnLinkInfo: JSON.parse(localStorage.getItem(storageKey.linkInfo)),
-      bandWidth: 0
+      bandWidth: 0,
+      loading: false
     }
   },
   methods: {
@@ -76,7 +81,7 @@ export default {
       if (this.queryCondition) {
         params.q = this.queryCondition
       }
-      this.toggleLoading(true)
+      this.loading = true
       get(api.linkMonitor.networkAnalysis, params).then(res => {
         if (res.code === 200) {
           this.isNoData = res.data.result.length === 0
@@ -111,7 +116,7 @@ export default {
         console.error(e)
         this.isNoData = true
       }).finally(() => {
-        this.toggleLoading(false)
+        this.loading = false
       })
     }
   },