feat: 链路 =》 进出口 tabs 桑葚图表开发
This commit is contained in:
@changcode
@@ -1,15 +1,43 @@
|
||||
<template>
|
||||
<div class="link-traffic-sankey">
|
||||
<el-tabs v-model="tab">
|
||||
<el-tab-pane :label="$t('linkMonitor.ingress')" :name="0"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('linkMonitor.egress')" :name="1"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('linkMonitor.ingress')" name="0">
|
||||
<chart-no-data v-if="ingress"></chart-no-data>
|
||||
<div class="chart-drawing" id="link-traffic-sankey-0"></div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="$t('linkMonitor.egress')" name="1">
|
||||
<chart-no-data v-if="egress"></chart-no-data>
|
||||
<div class="chart-drawing" id="link-traffic-sankey-1"></div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<template v-if="tab == 0 && !ingress">
|
||||
<div class="sankey__label" style="left: 5%;">External Locations</div>
|
||||
<div class="sankey__label" style="left: 35%;">Next-Hop Internets</div>
|
||||
<div class="sankey__label" style="left: 63%;">Links</div>
|
||||
<div class="sankey__label" style="right: 9%; transform: translateX(50%)">Internets Locations</div>
|
||||
</template>
|
||||
<template v-else-if="tab == 1 && !egress">
|
||||
<div class="sankey__label" style="left: 5%;">Internets Locations</div>
|
||||
<div class="sankey__label" style="left: 33.2%;">Links</div>
|
||||
<div class="sankey__label" style="left: 64.5%;">Next-Hop Internets</div>
|
||||
<div class="sankey__label" style="right: 9%; transform: translateX(50%)">External Locations</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||
import chartMixin from '@/views/charts2/chart-mixin'
|
||||
import { linksTrafficSankeyOption } from '@/views/charts2/charts/options/echartOption'
|
||||
import { ref, shallowRef } from 'vue'
|
||||
import { get } from '@/utils/http'
|
||||
import { api } from '@/utils/api'
|
||||
import { getSecond } from '@/utils/date-util'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { overwriteUrl, urlParamsHandler } from '@/utils/tools'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
import { storageKey, unitTypes } from '@/utils/constants'
|
||||
|
||||
export default {
|
||||
name: 'LinksTrafficSankey',
|
||||
@@ -17,13 +45,278 @@ export default {
|
||||
components: {
|
||||
ChartNoData
|
||||
},
|
||||
setup () {
|
||||
const { query } = useRoute()
|
||||
const tab = ref(query.tabIndex || 0)
|
||||
return {
|
||||
tab,
|
||||
myChart: shallowRef(null),
|
||||
myChart2: shallowRef(null)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tab: 0
|
||||
timer: null,
|
||||
ingress: false,
|
||||
egress: false,
|
||||
unitConvert,
|
||||
unitTypes,
|
||||
cnLinkInfo: JSON.parse(localStorage.getItem(storageKey.linkInfo))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tab (n) {
|
||||
this.$nextTick(() => {
|
||||
this.linkTrafficSankeyDataRequest(n)
|
||||
})
|
||||
const { query } = this.$route
|
||||
const newUrl = urlParamsHandler(window.location.href, query, {
|
||||
tabIndex: n
|
||||
})
|
||||
overwriteUrl(newUrl)
|
||||
},
|
||||
timeFilter: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
this.linkTrafficSankeyDataRequest(this.tab)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
linkTrafficSankeyDataRequest (n) {
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime)
|
||||
}
|
||||
let url = ''
|
||||
if (n == 0) {
|
||||
url = api.linkMonitor.quadrupleIngressAnalysis // 入口
|
||||
} else {
|
||||
url = api.linkMonitor.quadrupleEgressAnalysis // 出口
|
||||
}
|
||||
get(url, params).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (n == 0) {
|
||||
this.ingress = res.data.result.length === 0
|
||||
} else {
|
||||
this.egress = res.data.result.length === 0
|
||||
}
|
||||
this.dataProcessing(res.data.result, n)
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
this.isNoData = true
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
},
|
||||
dataProcessing (result, tab) {
|
||||
let data = []
|
||||
let links = []
|
||||
result.forEach(t => {
|
||||
this.cnLinkInfo.forEach(e => {
|
||||
if (t.commonEgressLinkId == e.originalLinkId) {
|
||||
t.commonEgressLinkId = e.linkId
|
||||
t.ingressLinkDirection = e.nextHop
|
||||
t.egressLinkDirection = e.nextHop
|
||||
t.bandWidth = e.bandwidth
|
||||
}
|
||||
})
|
||||
data.push(
|
||||
{ name: t.serverCity },
|
||||
{ name: t.commonEgressLinkId },
|
||||
{ name: tab == 0 ? t.ingressLinkDirection : t.egressLinkDirection },
|
||||
{ name: t.clientCity }
|
||||
)
|
||||
})
|
||||
const clientCity = []
|
||||
const linkDirection = []
|
||||
const commonEgressLinkId = []
|
||||
let link = []
|
||||
result.forEach(t => {
|
||||
const LinkDirectionShow = tab == 0 ? t.ingressLinkDirection : t.egressLinkDirection
|
||||
const bytes = tab == 0 ? t.ingressBytes : t.egressBytes
|
||||
if (tab == 0) {
|
||||
clientCity.push({
|
||||
source: t.serverCity,
|
||||
target: LinkDirectionShow,
|
||||
commonEgressLinkId: t.commonEgressLinkId,
|
||||
clientCity: t.clientCity,
|
||||
value: bytes,
|
||||
bandWidth: t.bandWidth,
|
||||
depth: 2
|
||||
})
|
||||
linkDirection.push({
|
||||
clientCity: t.clientCity,
|
||||
source: LinkDirectionShow,
|
||||
target: t.commonEgressLinkId,
|
||||
serverCity: t.serverCity,
|
||||
value: bytes,
|
||||
bandWidth: t.bandWidth,
|
||||
depth: 1
|
||||
})
|
||||
commonEgressLinkId.push({
|
||||
serverCity: t.serverCity,
|
||||
LinkDirectionShow: LinkDirectionShow,
|
||||
source: t.commonEgressLinkId,
|
||||
target: t.clientCity,
|
||||
value: bytes,
|
||||
bandWidth: t.bandWidth,
|
||||
depth: 0
|
||||
})
|
||||
} else {
|
||||
clientCity.push({
|
||||
source: t.clientCity,
|
||||
target: t.commonEgressLinkId,
|
||||
LinkDirectionShow: LinkDirectionShow,
|
||||
serverCity: t.serverCity,
|
||||
value: bytes,
|
||||
bandWidth: t.bandWidth,
|
||||
depth: 0
|
||||
})
|
||||
linkDirection.push({
|
||||
clientCity: t.clientCity,
|
||||
source: t.commonEgressLinkId,
|
||||
target: LinkDirectionShow,
|
||||
serverCity: t.serverCity,
|
||||
value: bytes,
|
||||
bandWidth: t.bandWidth,
|
||||
depth: 1
|
||||
})
|
||||
commonEgressLinkId.push({
|
||||
clientCity: t.clientCity,
|
||||
commonEgressLinkId: t.commonEgressLinkId,
|
||||
source: LinkDirectionShow,
|
||||
target: t.serverCity,
|
||||
value: bytes,
|
||||
bandWidth: t.bandWidth,
|
||||
depth: 2
|
||||
})
|
||||
}
|
||||
})
|
||||
link = [...clientCity, ...linkDirection, ...commonEgressLinkId]
|
||||
for (let i = 0; i < link.length; i++) {
|
||||
for (let j = i + 1; j < link.length; j++) {
|
||||
if (link[i].source === link[j].source && link[i].target === link[j].target) {
|
||||
link[i].value = link[i].value * 1 + link[j].value * 1
|
||||
link.splice(j, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
const map = new Map()
|
||||
for (const item of data) {
|
||||
if (!map.has(item.name)) {
|
||||
map.set(item.name, item)
|
||||
}
|
||||
}
|
||||
data = [...map.values()]
|
||||
links = link
|
||||
this.echartsInit(tab, data, links)
|
||||
},
|
||||
echartsInit (tab, data, links) {
|
||||
const _this = this
|
||||
let dom = ''
|
||||
if (tab == 0) {
|
||||
dom = document.getElementById('link-traffic-sankey-0')
|
||||
!this.myChart && (this.myChart = echarts.init(dom))
|
||||
} else {
|
||||
dom = document.getElementById('link-traffic-sankey-1')
|
||||
!this.myChart2 && (this.myChart2 = echarts.init(dom))
|
||||
}
|
||||
this.chartOption = this.$_.cloneDeep(linksTrafficSankeyOption)
|
||||
this.chartOption.tooltip.formatter = function (param) {
|
||||
if (param.data.name) return ''
|
||||
let data = ''
|
||||
let value = 0
|
||||
if (param.data.depth === 0) {
|
||||
if (tab == 0) {
|
||||
data = ` ${param.data.target} > ${param.data.source} > ${param.data.LinkDirectionShow} > ${param.data.serverCity}`
|
||||
} else {
|
||||
data = `${param.data.source} > ${param.data.target} > ${param.data.LinkDirectionShow} > ${param.data.serverCity}`
|
||||
}
|
||||
value = unitConvert((param.data.value / param.data.bandWidth), unitTypes.percent).join(' ')
|
||||
} else if (param.data.depth === 1) {
|
||||
if (tab == 0) {
|
||||
data = `${param.data.clientCity} > ${param.data.target} > ${param.data.source} > ${param.data.serverCity}`
|
||||
} else {
|
||||
data = `${param.data.clientCity} > ${param.data.source} > ${param.data.target} > ${param.data.serverCity}`
|
||||
}
|
||||
value = unitConvert((param.data.value / param.data.bandWidth), unitTypes.percent).join(' ')
|
||||
} else if (param.data.depth === 2) {
|
||||
if (tab == 0) {
|
||||
data = `${param.data.clientCity} > ${param.data.commonEgressLinkId} > ${param.data.target} > ${param.data.source}`
|
||||
} else {
|
||||
data = ` ${param.data.clientCity} > ${param.data.commonEgressLinkId}>${param.data.source} > ${param.data.target}`
|
||||
}
|
||||
value = unitConvert((param.data.value / param.data.bandWidth), unitTypes.percent).join(' ')
|
||||
}
|
||||
return `
|
||||
<div class="traffic-sankey">
|
||||
<div class="traffic-sankey-row-header">
|
||||
<div class="traffic-sankey__row-value">${data}</div>
|
||||
</div>
|
||||
<div class="traffic-sankey-row-body">
|
||||
<div class="traffic-sankey__tooltip-left">
|
||||
<div class="traffic-sankey__row-label">${_this.$t('overall.traffic')}</div>
|
||||
<div class="traffic-sankey__row-label">${_this.$t('linkMonitor.bandwidthUsage')}</div>
|
||||
</div>
|
||||
<div class="traffic-sankey__tooltip-right">
|
||||
<div class="traffic-sankey__row-value">${unitConvert(param.value, unitTypes.bps).join(' ')}</div>
|
||||
<div class="traffic-sankey__row-value">${value}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
this.chartOption.series[0].levels = [
|
||||
{
|
||||
depth: 0,
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}, {
|
||||
depth: 1,
|
||||
itemStyle: {
|
||||
color: tab == 0 ? '#47D49C' : ''
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}, {
|
||||
depth: 2,
|
||||
itemStyle: {
|
||||
color: tab == 0 ? '' : '#47D49C'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
]
|
||||
this.chartOption.series[0].data = data
|
||||
this.chartOption.series[0].links = links
|
||||
if (tab == 0) {
|
||||
this.myChart.setOption(this.chartOption)
|
||||
} else {
|
||||
this.myChart2.setOption(this.chartOption)
|
||||
}
|
||||
},
|
||||
resize () {
|
||||
if (this.tab == 0) {
|
||||
this.myChart.resize()
|
||||
} else {
|
||||
this.myChart2.resize()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.toggleLoading(false)
|
||||
this.timer = setTimeout(() => {
|
||||
this.linkTrafficSankeyDataRequest(this.tab)
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.resize)
|
||||
},
|
||||
beforeUnmount () {
|
||||
clearTimeout(this.timer)
|
||||
window.removeEventListener('resize', this.resize)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -449,36 +449,13 @@ export const linksTrafficSankeyOption = {
|
||||
type: 'sankey',
|
||||
data: [],
|
||||
links: [],
|
||||
right: '5%',
|
||||
top: 50,
|
||||
bottom: 100,
|
||||
levels: [
|
||||
{
|
||||
depth: 0,
|
||||
itemStyle: {
|
||||
color: '#47D49C'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}, {
|
||||
depth: 1,
|
||||
itemStyle: {
|
||||
color: '#A69BF5'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}, {
|
||||
depth: 2,
|
||||
itemStyle: {
|
||||
color: '#73A0FA'
|
||||
},
|
||||
lineStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
]
|
||||
right: '7%',
|
||||
left: '3%',
|
||||
top: '0%',
|
||||
bottom: '23%'
|
||||
// emphasis: {
|
||||
// focus: 'adjacency'
|
||||
// }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user