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

feat: Dahsboard - npm - 网络质量概览图表 根据接口返回展示数据

Browse Source
This commit is contained in:
@changcode
2022-08-09 11:39:08 +08:00
parent 1889f6b13b
commit 776936bbe2
6 changed files with 110 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/css/components/views/charts2/npmLine.scss
View File

@@ -14,6 +14,14 @@
margin-right: 10px; margin-right: 10px;
align-items: center; align-items: center;
} }
.npm-line-header-right.active {
.npm-line-header-icon {
background: #ccc;
}
.npm-line-header-value {
color: #ccc;
}
}
.npm-line-header-icon { .npm-line-header-icon {
border-radius: 3px; border-radius: 3px;
width: 16px; width: 16px;
@@ -35,10 +43,6 @@
line-height: 12px; line-height: 12px;
font-weight: 400; font-weight: 400;
} }
.npm-line-header-value.active {
color: #717171;
font-weight: 600;
}
} }
.chart-drawing { .chart-drawing {
height: 100%; height: 100%;

43
src/assets/css/components/views/charts2/npmNetworkQuantity.scss
View File

@@ -31,32 +31,37 @@
font-weight: 700; font-weight: 700;
margin-right: 12px; margin-right: 12px;
} }
.single-value__content-value { .single-value__content-trend {
font-size: 12px;
font-weight: 500;
height: 20px;
width: 52px;
line-height: 20px;
border-radius: 10px;
display: flex; display: flex;
margin-left: 6px;
align-items: center;
justify-content: center; justify-content: center;
position: relative; margin-top: 2px;
top: 50%; border-radius: 10px;
margin-top: -10px; font-weight:500;
div { font-size: 12px;
i {
margin-right: 5px;
} }
.single-value__content-trend-black {
background-color: rgba(113,113,113,0.12);
color: #717171;
width: 36px;
height: 20px;
} }
} .single-value__content-trend-green {
.single-value__content-value.red {
background-color: rgba(226, 97, 84, 0.12);
color: #E26154;
}
.single-value__content-value.green {
background-color: rgba(126,159,84,0.12); background-color: rgba(126,159,84,0.12);
width: 52px;
height: 20px;
color:#7E9F54; color:#7E9F54;
} }
.single-value__content-trend-red {
background-color: rgba(226,97,84,0.12);
width: 52px;
height: 20px;
color:#E26154;
.cn-icon-rise1 {
color: #E44D3E;
}
}
} }
.single-value__circle { .single-value__circle {
display: flex; display: flex;

2
src/assets/css/components/views/charts2/npmRecentEvents.scss
View File

@@ -4,7 +4,7 @@
.npm-recent-title { .npm-recent-title {
font-size: 14px; font-size: 14px;
color: #353636; color: #353636;
font-weight: 500; font-weight: 600;
margin-bottom: 10px; margin-bottom: 10px;
} }
.npm-recent-table { .npm-recent-table {

7
src/views/charts2/charts/NetworkOverviewLine.vue
View File

@@ -375,12 +375,7 @@ export default {
} }
this.legendSelectChange(t, 0) this.legendSelectChange(t, 0)
}) })
} else if (!this.activeShow) { } else {
this.mpackets.forEach((t, i) => {
t.show = true
this.legendSelectChange(t, 'index')
})
} else if (this.activeShow) {
this.mpackets.forEach((t, i) => { this.mpackets.forEach((t, i) => {
t.show = true t.show = true
this.legendSelectChange(t, 'index') this.legendSelectChange(t, 'index')

90
src/views/charts2/charts/NpmNetworkQuantity.vue
View File

@@ -41,49 +41,18 @@ export default {
endTime: getSecond(this.timeFilter.endTime), endTime: getSecond(this.timeFilter.endTime),
cycle: 0 cycle: 0
} }
// const tcp = get(api.npm.overview.tcpSessionDelay, params) const tcp = get(api.npm.overview.tcpSessionDelay, params)
// const http = get(api.npm.overview.httpResponseDelay, params) const http = get(api.npm.overview.httpResponseDelay, params)
// const ssl = get(api.npm.overview.sslConDelay, params) const ssl = get(api.npm.overview.sslConDelay, params)
// const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params) const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
// const packetPercent = get(api.npm.overview.packetRetransPercent, params) const packetPercent = get(api.npm.overview.packetRetransPercent, params)
this.npmNetworkCycleData = [ Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
{ res.forEach(t => {
establishLatencyAvg: 0.51, if (t.code === 200) {
establishLatencyP50: 0.16, this.npmNetworkCycleData.push(t.data.result)
establishLatencyP90: 0.12,
establishLatencyP95: 0.34,
establishLatencyP99: 0.73
}, {
httpResponseLatencyAvg: 0.52,
httpResponseLatencyP50: 0.16,
httpResponseLatencyP90: 0.12,
httpResponseLatencyP95: 0.34,
httpResponseLatencyP99: 0.73
}, {
sslConLatencyAvg: 0.53,
sslConLatencyP50: 0.16,
sslConLatencyP90: 0.12,
sslConLatencyP95: 0.34,
sslConLatencyP99: 0.73
}, {
sequenceGapLossAvg: 0.54,
sequenceGapLossP50: 0.16,
sequenceGapLossP90: 0.12,
sequenceGapLossP95: 0.34,
sequenceGapLossP99: 0.73
}, {
pktRetransAvg: 0.55,
pktRetransP50: 0.16,
pktRetransP90: 0.12,
pktRetransP95: 0.34,
pktRetransP99: 0.73
} }
] })
// Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => { })
// if (res.code === 200) {
// console.log(res)
// }
// })
}, },
npmNetworkLastCycleQuery () { npmNetworkLastCycleQuery () {
const params = { const params = {
@@ -91,33 +60,18 @@ export default {
endTime: getSecond(this.timeFilter.endTime), endTime: getSecond(this.timeFilter.endTime),
cycle: 1 cycle: 1
} }
// const tcp = get(api.npm.overview.tcpSessionDelay, params) const tcp = get(api.npm.overview.tcpSessionDelay, params)
// const http = get(api.npm.overview.httpResponseDelay, params) const http = get(api.npm.overview.httpResponseDelay, params)
// const ssl = get(api.npm.overview.sslConDelay, params) const ssl = get(api.npm.overview.sslConDelay, params)
// const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params) const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
// const packetPercent = get(api.npm.overview.packetRetransPercent, params) const packetPercent = get(api.npm.overview.packetRetransPercent, params)
this.npmNetworkLastCycleData = [ Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
{ res.forEach(t => {
establishLatencyAvg: 0.64 if (t.code === 200) {
}, this.npmNetworkLastCycleData.push(t.data.result)
{
httpResponseLatencyAvg: 0.34
},
{
sslConLatencyAvg: 0.86
},
{
sequenceGapLossAvg: 0.32
},
{
pktRetransAvg: 0.66
} }
] })
// Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => { })
// if (res.code === 200) {
// console.log(res)
// }
// })
} }
}, },
mounted () { mounted () {

60
src/views/charts2/charts/SingleValue.vue
View File

@@ -4,9 +4,14 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.establishLatencyAvg, unitTypes.time).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.establishLatencyAvg, unitTypes.time).join(' ')}}</div>
<div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'"> <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
<div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div> <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
<div>{{npm.value}}%</div> </div>
<div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
</div>
<div v-else class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div> </div>
</div> </div>
<div class="single-value__circle"> <div class="single-value__circle">
@@ -18,9 +23,14 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.httpResponseLatencyAvg, unitTypes.time).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.httpResponseLatencyAvg, unitTypes.time).join(' ')}}</div>
<div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'"> <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
<div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div> <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
<div>{{npm.value}}%</div> </div>
<div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
</div>
<div v-else class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div> </div>
</div> </div>
<div class="single-value__circle"> <div class="single-value__circle">
@@ -32,9 +42,14 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.sslConLatencyAvg, unitTypes.time).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.sslConLatencyAvg, unitTypes.time).join(' ')}}</div>
<div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'"> <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
<div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div> <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
<div>{{npm.value}}%</div> </div>
<div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
</div>
<div v-else class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div> </div>
</div> </div>
<div class="single-value__circle"> <div class="single-value__circle">
@@ -46,9 +61,14 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.sequenceGapLossAvg, unitTypes.percent).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.sequenceGapLossAvg, unitTypes.percent).join(' ')}}</div>
<div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'"> <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
<div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div> <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
<div>{{npm.value}}%</div> </div>
<div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
</div>
<div v-else class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div> </div>
</div> </div>
<div class="single-value__circle"> <div class="single-value__circle">
@@ -60,9 +80,14 @@
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
<div class="single-value__content"> <div class="single-value__content">
<div class="single-value__content-number">{{unitConvert(npm.pktRetransAvg, unitTypes.percent).join(' ')}}</div> <div class="single-value__content-number">{{unitConvert(npm.pktRetransAvg, unitTypes.percent).join(' ')}}</div>
<div class="single-value__content-value" :class="npm.trend === 'up' ? 'red' : 'green'"> <div v-if="npm.trend === 'up' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-red">
<div><i class="cn-icon" :class="npm.trend === 'up' ? 'cn-icon-rise1' : 'cn-icon-decline'"></i></div> <i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
<div>{{npm.value}}%</div> </div>
<div v-else-if="npm.trend === 'down' && npm.value !== 0" class="single-value__content-trend single-value__content-trend-green">
<i class="cn-icon-rise1 cn-icon"></i>&nbsp;{{npm.value}}%
</div>
<div v-else class="single-value__content-trend single-value__content-trend-black">
<i class="cn-icon-constant cn-icon"></i>
</div> </div>
</div> </div>
<div class="single-value__circle"> <div class="single-value__circle">
@@ -115,6 +140,9 @@ export default {
} else if (period < pperiod) { } else if (period < pperiod) {
periodicData.value = 'down' periodicData.value = 'down'
periodicData.total = parseInt(((pperiod - period) / pperiod) * 100) periodicData.total = parseInt(((pperiod - period) / pperiod) * 100)
} else {
periodicData.value = ''
periodicData.total = 0
} }
return periodicData return periodicData
} }
@@ -122,7 +150,7 @@ export default {
mounted () { mounted () {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData) this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
}, 200) }, 500)
}, },
beforeUnmount () { beforeUnmount () {
clearTimeout(this.timer) clearTimeout(this.timer)