fix: Link monitor的蜂窝图和网格图模块,添加loading以及noData
This commit is contained in:
@@ -132,8 +132,6 @@ export default {
|
||||
this.$store.commit('setRefreshTime', null)
|
||||
this.$store.commit('setRefreshFlag', false)
|
||||
}
|
||||
|
||||
console.log('查看此时的值=============================')
|
||||
},
|
||||
showRefreshList () {
|
||||
this.dropdownShow = !this.dropdownShow
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="link-direction-grid">
|
||||
<!--左侧链路出入口-->
|
||||
<popover-content :gridData="gridData" style="width: 900px"/>
|
||||
<popover-content :isNoData="isNoData" :gridData="gridData" style="width: 900px;"/>
|
||||
|
||||
<!--右侧链路下一跳-->
|
||||
<popover-content :gridData="gridData2"/>
|
||||
<popover-content :isNoData="isNoData" :gridData="gridData2" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -23,7 +23,8 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
gridData: [],
|
||||
gridData2: []
|
||||
gridData2: [],
|
||||
isNoData: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -37,7 +38,6 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.toggleLoading(false)
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
@@ -54,6 +54,7 @@ export default {
|
||||
|
||||
const dataRequest = get(api.linkMonitor.bigramAnalysis, params)
|
||||
const nextHopRequest = get(api.linkMonitor.bigramNextHopAnalysis, params)
|
||||
this.toggleLoading(true)
|
||||
|
||||
Promise.all([dataRequest, nextHopRequest]).then(res => {
|
||||
if (res[0].code === 200 && res[1].code === 200) {
|
||||
@@ -62,6 +63,11 @@ export default {
|
||||
// 链路下一跳信息
|
||||
const nextLinkData = res[1].data.result
|
||||
|
||||
this.isNoData = linkData.length === 0 && nextLinkData.length === 0
|
||||
if (this.isNoData) {
|
||||
return
|
||||
}
|
||||
|
||||
// 链路流量数据
|
||||
const gridData = []
|
||||
// 链路下一跳数据
|
||||
@@ -181,7 +187,14 @@ export default {
|
||||
}
|
||||
})
|
||||
this.gridData2 = gridData2
|
||||
} else {
|
||||
this.isNoData = true
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error('====', e)
|
||||
this.isNoData = true
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
},
|
||||
/**
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
<template>
|
||||
<div class="link-statistical-dimension">
|
||||
<div class="link-statistical-dimension" style="position: relative">
|
||||
<div class="dimension-title">{{ $t('linkMonitor.egressLink') }} & {{ $t('linkMonitor.ingressLink') }}
|
||||
</div>
|
||||
<div class="data-grid">
|
||||
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
|
||||
<div class="data-grid" v-show="!isNoData">
|
||||
<div class="egress-row">
|
||||
<div class="egress-id" v-for="(item, index) in gridData" :key="index">
|
||||
<!--兼容下一跳情况-->
|
||||
@@ -142,10 +145,15 @@
|
||||
<script>
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import { unitTypes } from '@/utils/constants'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
export default {
|
||||
name: 'PopoverContent',
|
||||
props: {
|
||||
gridData: Array
|
||||
gridData: Array,
|
||||
isNoData: Boolean
|
||||
},
|
||||
components: {
|
||||
ChartNoData
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user