From c9ae7a4998941d78cf88310649449891ec46a4af Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Thu, 13 Oct 2022 19:53:52 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dlink=E4=B8=8B=E9=92=BB?= =?UTF-8?q?=E5=B8=A6=E5=AE=BD=E4=B8=8D=E6=98=BE=E7=A4=BA=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../charts2/charts/linkMonitor/LinkBlock.vue | 8 ++-- .../charts/linkMonitor/LinkTrafficSankey.vue | 47 ++++++++++--------- .../LinkTrafficDrillDownList.vue | 43 +++++++++++------ 3 files changed, 59 insertions(+), 39 deletions(-) diff --git a/src/views/charts2/charts/linkMonitor/LinkBlock.vue b/src/views/charts2/charts/linkMonitor/LinkBlock.vue index f38c5382..c22546d0 100644 --- a/src/views/charts2/charts/linkMonitor/LinkBlock.vue +++ b/src/views/charts2/charts/linkMonitor/LinkBlock.vue @@ -28,7 +28,7 @@
{{ $t('linkMonitor.linkBlock.total') }}
- {{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}bps + {{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}
@@ -81,7 +81,7 @@
{{ $t('linkMonitor.linkBlock.total') }}
- {{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}bps + {{ unitConvert(item.totalBitsRate, unitTypes.bps).join(' ') }}
@@ -291,7 +291,7 @@ export default { return width }, drillLinkId (item) { - const queryCondition = `common_egress_link_id = ${item.egressLinkId} AND common_ingress_link_id = ${item.ingressLinkId}` + const queryCondition = `common_egress_link_id = ${item.egressLinkId} or common_ingress_link_id = ${item.ingressLinkId}` this.$router.push({ query: { ...this.$route.query, @@ -304,7 +304,7 @@ export default { }) }, drillNextHop (item) { - const queryCondition = `egress_link_direction = '${item.linkDirection}' AND ingress_link_direction = '${item.linkDirection}'` + const queryCondition = `egress_link_direction = '${item.linkDirection}' or ingress_link_direction = '${item.linkDirection}'` this.$router.push({ query: { ...this.$route.query, diff --git a/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue b/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue index 610e076b..ef50bb22 100644 --- a/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue +++ b/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue @@ -91,7 +91,7 @@ export default { } let url = '' if (this.queryCondition) { - const condition = this.queryCondition.toLowerCase().split(' and ') + const condition = this.queryCondition.toLowerCase().split(' or ') if (condition.length > 1) { if (n == 0) { params.q = condition.find(c => c.indexOf('common_ingress_link_id') > -1) @@ -135,7 +135,7 @@ export default { if (t.commonIngressLinkId == e.originalLinkId) { t.linkId = e.linkId t.linkDirection = e.nextHop - t.bandWidth = e.bandwidth + t.bandwidth = e.bandwidth t.value = parseInt(t.ingressBitsRate) t.client = `c_${t.clientProvince}` t.server = `s_${t.serverProvince}` @@ -147,8 +147,8 @@ export default { this.cnLinkInfo.forEach(e => { if (t.commonEgressLinkId == e.originalLinkId) { t.linkId = e.linkId + t.bandwidth = e.bandwidth t.linkDirection = e.nextHop - t.bandWidth = e.bandwidth t.value = parseInt(t.egressBitsRate) t.client = `c_${t.clientProvince}` t.server = `s_${t.serverProvince}` @@ -179,7 +179,7 @@ export default { if (existLink0) { existLink0.value += r.value } else { - links0.push({ source: r.client, target: r.linkId, name0: r.clientProvince, name1: r.linkId, name2: r.linkDirection, name3: r.serverProvince, value: r.value, depth: 0 }) + links0.push({ source: r.client, target: r.linkId, tooltip0: r.clientProvince, tooltip1: r.linkId, value: r.value, depth: 0, bandwidth: r.bandwidth }) } const existLinkAnalyze0 = linksAnalyze0.find(l => l.name === r.client) if (existLinkAnalyze0) { @@ -195,7 +195,7 @@ export default { if (existLink1) { existLink1.value += r.value } else { - links1.push({ source: r.linkId, target: r.linkDirection, name0: r.clientProvince, name1: r.linkId, name2: r.linkDirection, name3: r.serverProvince, value: r.value, depth: 1 }) + links1.push({ source: r.linkId, target: r.linkDirection, tooltip0: r.linkId, tooltip1: r.linkDirection, value: r.value, depth: 1, bandwidth: r.bandwidth }) } // 第三列 if (!data2.some(d => d.name === r.linkDirection)) { @@ -205,7 +205,7 @@ export default { if (existLink2) { existLink2.value += r.value } else { - links2.push({ source: r.linkDirection, target: r.server, name0: r.clientProvince, name1: r.linkId, name2: r.linkDirection, name3: r.serverProvince, value: r.value, depth: 2 }) + links2.push({ source: r.linkDirection, target: r.server, tooltip0: r.linkDirection, tooltip1: r.serverProvince, value: r.value, depth: 2 }) } const existLinkAnalyze2 = linksAnalyze2.find(l => l.name === r.server) if (existLinkAnalyze2) { @@ -228,7 +228,7 @@ export default { if (existLink0) { existLink0.value += r.value } else { - links0.push({ source: r.client, target: r.linkDirection, name0: r.clientProvince, name1: r.linkDirection, name2: r.linkId, name3: r.serverProvince, value: r.value, depth: 0 }) + links0.push({ source: r.client, target: r.linkDirection, tooltip0: r.clientProvince, tooltip1: r.linkDirection, value: r.value, depth: 0 }) } const existLinkAnalyze0 = linksAnalyze0.find(l => l.name === r.client) if (existLinkAnalyze0) { @@ -244,7 +244,7 @@ export default { if (existLink1) { existLink1.value += r.value } else { - links1.push({ source: r.linkDirection, target: r.linkId, name0: r.clientProvince, name1: r.linkDirection, name2: r.linkId, name3: r.serverProvince, value: r.value, depth: 1 }) + links1.push({ source: r.linkDirection, target: r.linkId, tooltip0: r.linkDirection, tooltip1: r.linkId, value: r.value, depth: 1, bandwidth: r.bandwidth }) } // 第三列 if (!data2.some(d => d.name === r.linkId)) { @@ -254,7 +254,7 @@ export default { if (existLink2) { existLink2.value += r.value } else { - links2.push({ source: r.linkId, target: r.server, name0: r.clientProvince, name1: r.linkDirection, name2: r.linkId, name3: r.serverProvince, value: r.value, depth: 2 }) + links2.push({ source: r.linkId, target: r.server, tooltip0: r.linkId, tooltip1: r.serverProvince, value: r.value, depth: 2, bandwidth: r.bandwidth }) } const existLinkAnalyze2 = linksAnalyze2.find(l => l.name === r.server) if (existLinkAnalyze2) { @@ -294,7 +294,7 @@ export default { if (existOtherSLink0) { existOtherSLink0.value += l0.value } else { - othersLinks0.push({ ...l0, source: 'c_others' }) + othersLinks0.push({ ...l0, source: 'c_others', tooltip0: 'others' }) } } }) @@ -323,7 +323,7 @@ export default { if (existOtherLinkAnalyze2) { existOtherLinkAnalyze2.value += sl.value } else { - otherLinksAnalyze2.push({ ...sl, name: 'c_others' }) + otherLinksAnalyze2.push({ ...sl, name: 's_others' }) } } }) @@ -337,7 +337,7 @@ export default { if (existOtherSLink2) { existOtherSLink2.value += l2.value } else { - othersLinks2.push({ ...l2, target: 's_others' }) + othersLinks2.push({ ...l2, target: 's_others', tooltip1: 'others' }) } } }) @@ -372,25 +372,30 @@ export default { this.chartOption = this.$_.cloneDeep(linksTrafficSankeyOption) this.chartOption.tooltip.formatter = function (param) { if (param.data.name) return '' - const data = `${param.data.name0} > ${param.data.name1} > ${param.data.name2} > ${param.data.name3}` - const value = unitConvert((param.data.value / param.data.bandWidth), unitTypes.percent).join(' ') - return ` + const data = `${param.data.tooltip0} > ${param.data.tooltip1}` + const value = param.data.bandwidth ? unitConvert((param.data.value / param.data.bandwidth), unitTypes.percent).join(' ') : 0 + let html = `
${data}
-
${_this.$t('overall.traffic')}
-
${_this.$t('linkMonitor.bandwidthUsage')}
-
+
${_this.$t('overall.traffic')}
` + if (value) { + html += `
${_this.$t('linkMonitor.bandwidthUsage')}
` + } + html += `
-
${unitConvert(param.value, unitTypes.bps).join(' ')}
-
${value}
-
+
${unitConvert(param.value, unitTypes.bps).join(' ')}
` + if (value) { + html += `
${value}
` + } + html += `
` + return html } this.chartOption.series[0].data = data this.chartOption.series[0].links = links diff --git a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue b/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue index 1526077c..2e4b3c3d 100644 --- a/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue +++ b/src/views/charts2/charts/linkMonitor/localComponents/LinkTrafficDrillDownList.vue @@ -96,21 +96,36 @@ export default { if (this.linkTrafficListData.npmScore > 6) { this.linkTrafficListData.npmScore = 6 } - let condition = '' - if (this.queryCondition.indexOf(' AND ') > -1) { - condition = this.queryCondition.split(/["'= ](.*?)["'= ]/) - } else { - condition = this.queryCondition - } - let bandwidthAll = 0 - this.cnLinkInfo.forEach(e => { - if (condition.length > 1 && (condition[3] == e.originalLinkId || condition[8] == e.originalLinkId)) { - bandwidthAll += e.bandwidth - } else if (condition.length > 1 && condition[4] == e.nextHop) { - bandwidthAll += e.bandwidth + const condition = this.queryCondition.toLowerCase().split(' or ') + if (condition.length > 1) { + let bandwidthAll = 0 + const condition0 = condition[0].split('=') + const condition1 = condition[1].split('=') + let ingressLinkId = null + let egressLinkId = null + if (condition0[0] && condition0[0].trim() === 'common_egress_link_id') { + egressLinkId = condition0[1].trim() } - }) - this.bandWidth = bandwidthAll + if (condition0[0] && condition0[0].trim() === 'common_ingress_link_id') { + ingressLinkId = condition0[1].trim() + } + if (condition1[0] && condition1[0].trim() === 'common_egress_link_id') { + egressLinkId = condition1[1].trim() + } + if (condition1[0] && condition1[0].trim() === 'common_ingress_link_id') { + ingressLinkId = condition1[1].trim() + } + console.info(condition0, condition1, ingressLinkId, egressLinkId) + this.cnLinkInfo.forEach(e => { + if (ingressLinkId === e.originalLinkId) { + bandwidthAll += e.bandwidth + } + if (egressLinkId === e.originalLinkId) { + bandwidthAll += e.bandwidth + } + }) + this.bandWidth = bandwidthAll + } } }).catch(e => { console.error(e)