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

fix: npm =》 overview 下钻 流量折线图表 补充下拉列表

Browse Source
This commit is contained in:
@changcode
2022-08-31 13:54:20 +08:00
parent 9da25469db
commit f0afa1d5e7
3 changed files with 114 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,52 @@
.npm-traffic-line {
height: 100%;
width: 100%;
.npm-traffic-line-title {
font-size: 14px;
color: #353636;
font-weight: 600;
height: 32px;
.npm-traffic-line-header {
display: flex;
justify-content: space-between;
.npm-traffic-line-title {
font-size: 14px;
color: #353636;
font-weight: 600;
height: 32px;
}
.line-select-metric {
display: flex;
align-items: center;
&>span {
font-size: 12px;
color: #575757;
font-weight: 400;
margin-right: 3px;
}
.line-select__operation {
height: 24px;
margin-left: 3px;
box-shadow: none;
border-radius: 2px;
.el-input__inner {
width: 100px;
height: 24px;
padding-left: 4px;
line-height: 24px;
font-size: 12px;
color: #2C72C6;
font-weight: 400;
}
.el-input__suffix {
display: flex;
.el-input__suffix-inner {
line-height: 24px;
.el-select__caret {
line-height: 24px;
width: 16px;
color: #575757;
}
}
}
}
}
}
.npm-traffic-line-body {
border: 1px solid #E2E5EC;

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

@@ -86,33 +86,6 @@ export default {
this.toggleLoading(true)
get(api.npm.overview.networkAnalysis, params).then(res => {
if (res.code === 200) {
res.data.result = {
establishLatencyMsAvg: 0.16,
establishLatencyMsP50: 0.16,
establishLatencyMsP90: 0.16,
establishLatencyMsP95: 0.16,
establishLatencyMsP99: 0.16,
httpResponseLatencyAvg: 0.16,
httpResponseLatencyP50: 0.16,
httpResponseLatencyP90: 0.16,
httpResponseLatencyP95: 0.16,
httpResponseLatencyP99: 0.16,
sslConLatencyAvg: 0.16,
sslConLatencyP50: 0.16,
sslConLatencyP90: 0.16,
sslConLatencyP95: 0.16,
sslConLatencyP99: 0.16,
tcpLostlenPercentAvg: 0.16,
tcpLostlenPercentP50: 0.16,
tcpLostlenPercentP90: 0.16,
tcpLostlenPercentP95: 0.16,
tcpLostlenPercentP99: 0.16,
pktRetransPercentAvg: 0.16,
pktRetransPercentP50: 0.16,
pktRetransPercentP90: 0.16,
pktRetransPercentP95: 0.16,
pktRetransPercentP99: 0.16
}
this.npmNetworkCycleData = res.data.result
}
}).finally(() => {
@@ -179,13 +152,6 @@ export default {
const scoreInfo = {}
let index = 0
if (res.code === 200) {
res.data.result = {
establishLatencyMsAvg: 0.16,
httpResponseLatencyAvg: 0.16,
sslConLatencyAvg: 0.16,
tcpLostlenPercentAvg: 1,
pktRetransPercentAvg: 1
}
if (res.data.result.establishLatencyMsAvg || res.data.result.establishLatencyMsAvg === 0) {
res.data.result.establishLatencyMs = res.data.result.establishLatencyMsAvg
index = 0

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

@@ -1,6 +1,23 @@
<template>
<div class="npm-traffic-line">
<div class="npm-traffic-line-title">{{$t('overall.traffic')}}</div>
<div class="npm-traffic-line-header">
<div class="npm-traffic-line-title">{{$t('overall.traffic')}}</div>
<div class="line-select-metric">
<span>{{$t('network.metric')}}:</span>
<div class="line-select__operation">
<el-select
size="mini"
v-model="metricFilter"
placeholder=""
popper-class="common-select"
:popper-append-to-body="false"
@change="metricChange"
>
<el-option v-for="item in metricOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</div>
</div>
<div class="npm-traffic-line-body">
<chart-no-data v-if="isNoData"></chart-no-data>
<template v-else>
@@ -47,7 +64,23 @@ export default {
{ name: 'network.through', show: true, positioning: 4, data: [], unitType: '' },
{ name: 'network.other', show: true, positioning: 5, data: [], unitType: '' }
],
chartData: {}
chartData: {},
metricFilter: 'Bits/s',
metricOptions: [
{
value: 'Bits/s',
label: 'Bits/s'
},
{
value: 'Packets/s',
label: 'Packets/s'
},
{
value: 'Sessions/s',
label: 'Sessions/s'
}
],
npmShowType: 'Bits/s'
}
},
watch: {
@@ -59,7 +92,10 @@ export default {
}
},
methods: {
init () {
init (val) {
if (!val) {
val = 'Bits/s'
}
let condition = ''
if (this.$store.getters.getQueryCondition.indexOf('OR') > -1) {
condition = this.$store.getters.getQueryCondition.split(/["|'](.*?)["|']/)
@@ -90,14 +126,14 @@ export default {
params.q = `${condition[0]}'${condition[1]}'`
}
}
this.toggleLoading(true)
get(api.npm.overview.trafficGraph, params).then((res) => {
if (res.code === 200) {
if (res.data.result.length === 0) {
this.isNoData = true
return
}
res.data.result.forEach((t, i) => {
if (t.type === 'bytes') {
if (t.type === 'bytes' && val === 'Bits/s') {
const mpackets = _.cloneDeep(this.mpackets)
mpackets[0].data = t.totalBitsRate.values ? t.totalBitsRate.values : []
mpackets[1].data = t.inboundBitsRate.values ? t.inboundBitsRate.values : []
@@ -107,23 +143,29 @@ export default {
mpackets[5].data = t.other.values ? t.other.values : []
this.mpackets = mpackets
this.echartsInit(this.mpackets)
} else if (t.type === 'packets' && val === 'Packets/s') {
const mpackets = _.cloneDeep(this.mpackets)
mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
mpackets[1].data = t.inboundPacketsRate.values ? t.inboundPacketsRate.values : []
mpackets[2].data = t.outboundPacketsRate.values ? t.outboundPacketsRate.values : []
mpackets[3].data = t.internalPacketsRate.values ? t.internalPacketsRate.values : []
mpackets[4].data = t.throughPacketsRate.values ? t.throughPacketsRate.values : []
mpackets[5].data = t.other.values ? t.other.values : []
this.mpackets = mpackets
this.echartsInit(this.mpackets)
} else if (t.type === 'sessions' && val === 'Sessions/s') {
let mpackets = _.cloneDeep(this.mpackets)
mpackets[0].data = t.totalSessionsRate && t.totalSessionsRate.values ? t.totalSessionsRate.values : []
mpackets[0].show = false
mpackets = mpackets.filter(t => t.show === false)
this.mpackets = mpackets
this.echartsInit(this.mpackets)
}
// else if (t.type === 'packets') {
// const mpackets = _.cloneDeep(this.mpackets)
// mpackets[0].data = t.totalPacketsRate.values ? t.totalPacketsRate.values : []
// mpackets[1].data = t.inboundPacketsRate.values ? t.inboundPacketsRate.values : []
// mpackets[2].data = t.outboundPacketsRate.values ? t.outboundPacketsRate.values : []
// mpackets[3].data = t.internalPacketsRate.values ? t.internalPacketsRate.values : []
// mpackets[4].data = t.externalPacketsRate.values ? t.externalPacketsRate.values : []
// mpackets[5].data = t.other.values ? t.other.values : []
// this.mpackets = mpackets
// this.echartsInit(this.mpackets)
// } else if (t.type === 'sessions') {
// const mpackets = _.cloneDeep(this.mpackets)
// mpackets[0].data = t.totalSessionsRate.values ? t.totalSessionsRate.values : []
// this.mpackets = mpackets
// this.echartsInit(this.mpackets)
// }
this.mpackets.forEach(t => {
if (t.data.length === 0) {
this.isNoData = true
}
})
})
} else {
this.isNoData = true
@@ -147,7 +189,7 @@ export default {
color: chartColor3[t.positioning],
width: 1
},
stack: this.$t(echartsData[0].name),
stack: t.name !== 'network.total' ? 'network.total' : '',
areaStyle: {
opacity: 0.1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -172,7 +214,7 @@ export default {
return str
}
this.myChart.on('legendselectchanged', this.handleLegendClick)
this.myChart.setOption(this.chartOption)
this.myChart.setOption(this.chartOption, true)
},
// 点击前，高亮legend个数
getSelectedNum (params) {
@@ -218,6 +260,9 @@ export default {
}
})
},
metricChange (value) {
this.init(value)
},
resize () {
this.myChart.resize()
}