gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-790 fix: 修复NPM overview折线图metric、legend、内容 对应不上

Browse Source
This commit is contained in:
@changcode
2022-11-04 10:22:32 +08:00
parent 6827d4f031
commit f39c4d8fc4
2 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/components/views/charts2/npmTrafficLine.scss
View File

@@ -53,6 +53,9 @@
border-radius: 4px; border-radius: 4px;
height: calc(100% - 32px); height: calc(100% - 32px);
width: 100%; width: 100%;
.panel-chart__no-data {
height: calc(100% - 32px);
}
.chart-drawing { .chart-drawing {
height: 100%; height: 100%;
width: 100%; width: 100%;

34
src/views/charts2/charts/npm/NpmTrafficLine.vue
View File

@@ -366,6 +366,8 @@ export default {
if (this.isNoData) { if (this.isNoData) {
this.npmQuantity = [ this.npmQuantity = [
{ name: 'networkAppPerformance.tcpConnectionEstablishLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time }, { name: 'networkAppPerformance.tcpConnectionEstablishLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.httpResponse', show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.sslResponseLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.packetLoss', show: true, positioning: 0, data: [], unitType: unitTypes.percent }, { name: 'networkAppPerformance.packetLoss', show: true, positioning: 0, data: [], unitType: unitTypes.percent },
{ name: 'overall.packetRetrans', show: true, positioning: 0, data: [], unitType: unitTypes.percent } { name: 'overall.packetRetrans', show: true, positioning: 0, data: [], unitType: unitTypes.percent }
] ]
@@ -385,9 +387,9 @@ export default {
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity)
} else if (t.type === 'tcpLostlenPercent' && val === 'tcpLostlenPercent') { } else if (t.type === 'tcpLostlenPercent' && val === 'tcpLostlenPercent') {
const npmQuantity = _.cloneDeep(this.npmQuantity) const npmQuantity = _.cloneDeep(this.npmQuantity)
npmQuantity[1].data = t.tcpLostlenPercent.values ? t.tcpLostlenPercent.values : [] npmQuantity[3].data = t.tcpLostlenPercent.values ? t.tcpLostlenPercent.values : []
npmQuantity.forEach((e, i) => { npmQuantity.forEach((e, i) => {
if (i !== 1) { if (i !== 3) {
e.show = false e.show = false
} else { } else {
e.show = true e.show = true
@@ -397,9 +399,9 @@ export default {
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity)
} else if (t.type === 'pktRetransPercent' && val === 'pktRetransPercent') { } else if (t.type === 'pktRetransPercent' && val === 'pktRetransPercent') {
const npmQuantity = _.cloneDeep(this.npmQuantity) const npmQuantity = _.cloneDeep(this.npmQuantity)
npmQuantity[2].data = t.pktRetransPercent.values ? t.pktRetransPercent.values : [] npmQuantity[4].data = t.pktRetransPercent.values ? t.pktRetransPercent.values : []
npmQuantity.forEach((e, i) => { npmQuantity.forEach((e, i) => {
if (i !== 2) { if (i !== 4) {
e.show = false e.show = false
} else { } else {
e.show = true e.show = true
@@ -419,18 +421,22 @@ export default {
this.toggleLoading(true) this.toggleLoading(true)
get(api.npm.overview.totalHttpResponseDelay, params).then(res => { get(api.npm.overview.totalHttpResponseDelay, params).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.isNoData = res.data.length === 0 this.isNoData = res.data.result.length === 0
if (this.isNoData) { if (this.isNoData) {
this.npmQuantity = [ this.npmQuantity = [
{ name: 'networkAppPerformance.httpResponse', show: true, positioning: 0, data: [], unitType: unitTypes.time } { name: 'networkAppPerformance.tcpConnectionEstablishLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.httpResponse', show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.sslResponseLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.packetLoss', show: true, positioning: 0, data: [], unitType: unitTypes.percent },
{ name: 'overall.packetRetrans', show: true, positioning: 0, data: [], unitType: unitTypes.percent }
] ]
} }
res.data.result.forEach(t => { res.data.result.forEach(t => {
if (t.type === 'httpResponseLatency' && val === 'httpResponseLatency') { if (t.type === 'httpResponseLatency' && val === 'httpResponseLatency') {
const npmQuantity = _.cloneDeep(this.npmQuantity) const npmQuantity = _.cloneDeep(this.npmQuantity)
npmQuantity[0].data = t.httpResponseLatency.values ? t.httpResponseLatency.values : [] npmQuantity[1].data = t.httpResponseLatency.values ? t.httpResponseLatency.values : []
npmQuantity.forEach((e, i) => { npmQuantity.forEach((e, i) => {
if (i !== 0) { if (i !== 1) {
e.show = false e.show = false
} else { } else {
e.show = true e.show = true
@@ -450,18 +456,22 @@ export default {
this.toggleLoading(true) this.toggleLoading(true)
get(api.npm.overview.totalSslConDelay, params).then(res => { get(api.npm.overview.totalSslConDelay, params).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.isNoData = res.data.length === 0 this.isNoData = res.data.result.length === 0
if (this.isNoData) { if (this.isNoData) {
this.npmQuantity = [ this.npmQuantity = [
{ name: 'networkAppPerformance.sslResponseLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time } { name: 'networkAppPerformance.tcpConnectionEstablishLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.httpResponse', show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.sslResponseLatency', show: true, positioning: 0, data: [], unitType: unitTypes.time },
{ name: 'networkAppPerformance.packetLoss', show: true, positioning: 0, data: [], unitType: unitTypes.percent },
{ name: 'overall.packetRetrans', show: true, positioning: 0, data: [], unitType: unitTypes.percent }
] ]
} }
res.data.result.forEach(t => { res.data.result.forEach(t => {
if (t.type === 'sslConLatency' && val === 'sslConLatency') { if (t.type === 'sslConLatency' && val === 'sslConLatency') {
const npmQuantity = _.cloneDeep(this.npmQuantity) const npmQuantity = _.cloneDeep(this.npmQuantity)
npmQuantity[0].data = t.sslConLatency.values ? t.sslConLatency.values : [] npmQuantity[2].data = t.sslConLatency.values ? t.sslConLatency.values : []
npmQuantity.forEach((e, i) => { npmQuantity.forEach((e, i) => {
if (i !== 0) { if (i !== 2) {
e.show = false e.show = false
} else { } else {
e.show = true e.show = true