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