perf: nodata处理、npmLine.vue代码优化
This commit is contained in:
chenjinsong
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="npm-line">
|
||||
<chart-no-data v-if="isNoData"></chart-no-data>
|
||||
<template v-if="chartData.id === 11">
|
||||
<div class="npm-line-header">
|
||||
<div class="npm-line-header-title">{{$t(chartData.i18n) || chartData.name}}</div>
|
||||
@@ -10,33 +11,27 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<chart-no-data v-if="throughputName"></chart-no-data>
|
||||
<div v-show="!throughputName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
</template>
|
||||
<template v-else-if="chartData.id === 12">
|
||||
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
|
||||
<chart-no-data v-if="tcpName"></chart-no-data>
|
||||
<div v-show="!tcpName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
</template>
|
||||
<template v-else-if="chartData.id === 13">
|
||||
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
|
||||
<chart-no-data v-if="httpName"></chart-no-data>
|
||||
<div v-show="!httpName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
</template>
|
||||
<template v-else-if="chartData.id === 14">
|
||||
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
|
||||
<chart-no-data v-if="sslName"></chart-no-data>
|
||||
<div v-show="!sslName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
</template>
|
||||
<template v-else-if="chartData.id === 15">
|
||||
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
|
||||
<chart-no-data v-if="packetsLossName"></chart-no-data>
|
||||
<div v-show="!packetsLossName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
</template>
|
||||
<template v-else-if="chartData.id === 16">
|
||||
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div>
|
||||
<chart-no-data v-if="packetsRetrainsName"></chart-no-data>
|
||||
<div v-show="!packetsRetrainsName" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
@@ -80,14 +75,8 @@ export default {
|
||||
timer: null,
|
||||
myChartArray: [],
|
||||
side: this.$store.state.panel.npmLocationSide,
|
||||
country: this.$store.state.panel.npmLocationCountry,
|
||||
country: this.$store.state.panel.npmLocationCountry
|
||||
// province: '',
|
||||
throughputName: '',
|
||||
tcpName: '',
|
||||
httpName: '',
|
||||
sslName: '',
|
||||
packetsLossName: '',
|
||||
packetsRetrainsName: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -122,112 +111,48 @@ export default {
|
||||
// province: this.province
|
||||
}
|
||||
this.toggleLoading(true)
|
||||
if (this.chartData.id === 11) {
|
||||
get(api.npm.location.thoughput, params).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (res.data.result.length === 0) {
|
||||
this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
return
|
||||
} else {
|
||||
this.throughputName = ''
|
||||
}
|
||||
res.data.result.forEach((t, i) => {
|
||||
if (t.type === 'totalBytesRate') {
|
||||
this.chartOptionLineData[i].values = t.values
|
||||
} else if (t.type === 'inboundBytesRate') {
|
||||
this.chartOptionLineData[i].values = t.values
|
||||
} else if (t.type === 'outboundBytesRate') {
|
||||
this.chartOptionLineData[i].values = t.values
|
||||
let url
|
||||
if (this.chart.params) {
|
||||
if (this.chart.params.index === 0) {
|
||||
url = api.npm.location.thoughput
|
||||
} else if (this.chart.params.index === 1) {
|
||||
url = api.npm.location.tcpConnectionEstablishLatency
|
||||
} else if (this.chart.params.index === 2) {
|
||||
url = api.npm.location.httpResponseLatency
|
||||
} else if (this.chart.params.index === 3) {
|
||||
url = api.npm.location.sslHandshakeLatency
|
||||
} else if (this.chart.params.index === 4) {
|
||||
url = api.npm.location.packetsLoss
|
||||
} else if (this.chart.params.index === 5) {
|
||||
url = api.npm.location.packetsRetrains
|
||||
}
|
||||
if (url) {
|
||||
get(url, params).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.isNoData = res.data.result.length === 0
|
||||
if (this.chart.params.index === 0) {
|
||||
res.data.result.forEach((t, i) => {
|
||||
if (t.type === 'totalBytesRate') {
|
||||
this.chartOptionLineData[i].values = t.values
|
||||
} else if (t.type === 'inboundBytesRate') {
|
||||
this.chartOptionLineData[i].values = t.values
|
||||
} else if (t.type === 'outboundBytesRate') {
|
||||
this.chartOptionLineData[i].values = t.values
|
||||
}
|
||||
})
|
||||
const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1)
|
||||
this.echartsInit(result, this.chartData, this.chartData.params.unitType)
|
||||
} else {
|
||||
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
|
||||
}
|
||||
})
|
||||
const result = this.chartOptionLineData.filter(t => this.chartData.params.color.indexOf(t.color) > -1)
|
||||
this.echartsInit(result, this.chartData, this.chartData.params.unitType)
|
||||
} else {
|
||||
this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
}
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
} else if (this.chartData.id === 12) {
|
||||
get(api.npm.location.tcpConnectionEstablishLatency, params).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (res.data.result.length === 0) {
|
||||
this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
return
|
||||
} else {
|
||||
this.tcpName = ''
|
||||
}
|
||||
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
|
||||
} else {
|
||||
this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
}
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
} else if (this.chartData.id === 13) {
|
||||
get(api.npm.location.httpResponseLatency, params).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (res.data.result.length === 0) {
|
||||
this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
return
|
||||
} else {
|
||||
this.httpName = ''
|
||||
}
|
||||
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
|
||||
} else {
|
||||
this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
}
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
} else if (this.chartData.id === 14) {
|
||||
get(api.npm.location.sslHandshakeLatency, params).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (res.data.result.length === 0) {
|
||||
this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
return
|
||||
} else {
|
||||
this.sslName = ''
|
||||
}
|
||||
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
|
||||
} else {
|
||||
this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
}
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
} else if (this.chartData.id === 15) {
|
||||
get(api.npm.location.packetsLoss, params).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (res.data.result.length === 0) {
|
||||
this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
return
|
||||
} else {
|
||||
this.packetsLossName = ''
|
||||
}
|
||||
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
|
||||
} else {
|
||||
this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
}
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
} else if (this.chartData.id === 16) {
|
||||
get(api.npm.location.packetsRetrains, params).then(res => {
|
||||
if (res.code === 200) {
|
||||
if (res.data.result.length === 0) {
|
||||
this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
return
|
||||
} else {
|
||||
this.packetsRetrainsName = ''
|
||||
}
|
||||
this.echartsInit(res.data.result, this.chartData, this.chartData.params.unitType)
|
||||
} else {
|
||||
this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
|
||||
}
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
}).finally(() => {
|
||||
this.toggleLoading(false)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.isNoData = true
|
||||
this.toggleLoading(false)
|
||||
}
|
||||
},
|
||||
echartsInit (data, chartData, type) {
|
||||
|
||||
Reference in New Issue
Block a user