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

fix: 修复 npm 模块 部分组件功能问题

Browse Source
This commit is contained in:
@changcode
2022-08-15 15:53:42 +08:00
parent c02bf1a9aa
commit 35b6680350
6 changed files with 190 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,18 +2,29 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
border: 1px solid #f0f0f0; border: 1px solid #f0f0f0;
position: relative; .npm-line-title {
font-size: 14px;
color: #353636;
font-weight: 500;
margin: 20px 0 0 20px;
}
.npm-line-header { .npm-line-header {
position: absolute;
display: flex; display: flex;
top: 21px; margin: 20px 20px 0 20px;
right: 23px; justify-content: space-between;
z-index: 1; .npm-line-header-title {
font-size: 14px;
color: #353636;
font-weight: 500;
}
.npm-line-header-rights {
display: flex;
.npm-line-header-right { .npm-line-header-right {
display: flex; display: flex;
margin-right: 10px; margin-right: 10px;
align-items: center; align-items: center;
} }
}
.npm-line-header-right:last-child { .npm-line-header-right:last-child {
margin-right: 0; margin-right: 0;
} }
@@ -48,7 +59,7 @@
} }
} }
.chart-drawing { .chart-drawing {
height: 100%; height: calc(100% - 41px);
width: 100%; width: 100%;
.echarts-tooltip.echarts-tooltip-dark { .echarts-tooltip.echarts-tooltip-dark {
.cn-chart-tooltip { .cn-chart-tooltip {

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

@@ -1,4 +1,4 @@
<template> <template v-if="npmNetworkCycleData.length > 0 && npmNetworkLastCycleData.length > 0">
<div class="single-value" v-for="(npm, index) in npmNetworkData" :key="index"> <div class="single-value" v-for="(npm, index) in npmNetworkData" :key="index">
<template v-if="index === 0"> <template v-if="index === 0">
<div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div> <div class="single-value__title">{{$t(npmNetworkName[index].name)}}</div>
@@ -102,19 +102,33 @@
import { unitTypes } from '@/utils/constants' import { unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert' import unitConvert from '@/utils/unit-convert'
import { getChainRatio } from '@/utils/tools' import { getChainRatio } from '@/utils/tools'
import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http'
import { api } from '@/utils/api'
export default { export default {
name: 'SingleValue', name: 'SingleValue',
props: { props: {
npmNetworkCycleData: Array, npmNetworkCycleData: Array,
npmNetworkLastCycleData: Array, npmNetworkName: Array,
npmNetworkName: Array timeFilter: Object
}, },
data () { data () {
return { return {
unitTypes, unitTypes,
unitConvert, unitConvert,
npmNetworkData: [], npmNetworkData: [],
timer: null npmNetworkLastCycleData: []
}
},
watch: {
npmNetworkCycleData: {
deep: true,
immediate: true,
handler (n) {
if (n) {
this.npmNetworkLastCycleQuery()
}
}
} }
}, },
methods: { methods: {
@@ -132,17 +146,27 @@ export default {
}) })
}) })
this.npmNetworkData = cycle this.npmNetworkData = cycle
}
}, },
mounted () { npmNetworkLastCycleQuery () {
this.timer = setTimeout(() => { const params = {
if (this.npmNetworkCycleData.length > 0 && this.npmNetworkLastCycleData.length > 0) { startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
cycle: 1
}
const tcp = get(api.npm.overview.tcpSessionDelay, params)
const http = get(api.npm.overview.httpResponseDelay, params)
const ssl = get(api.npm.overview.sslConDelay, params)
const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
const packetPercent = get(api.npm.overview.packetRetransPercent, params)
Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
res.forEach(t => {
if (t.code === 200) {
this.npmNetworkLastCycleData.push(t.data.result)
this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData) this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData)
} }
}, 500) })
}, })
beforeUnmount () { }
clearTimeout(this.timer)
} }
} }
</script> </script>

2
src/views/charts2/charts/npm/NpmAppCategoryScore.vue
View File

@@ -235,7 +235,7 @@ export default {
} }
}) })
this.tableData = tableData this.tableData = tableData
console.info(tableData) // console.info(tableData)
}) })
} }
}) })

149
src/views/charts2/charts/npm/NpmLine.vue
View File

@@ -2,35 +2,41 @@
<div class="npm-line"> <div class="npm-line">
<template v-if="chartData.id === 11"> <template v-if="chartData.id === 11">
<div class="npm-line-header"> <div class="npm-line-header">
<div class="npm-line-header-title">{{chartData.name}}</div> <div class="npm-line-header-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend"> <div class="npm-line-header-rights" v-if="chartData.params && chartData.params.showLegend && !throughputName">
<div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)"> <div class="npm-line-header-right" :class="{'active': item.show}" v-for="(item, index) in chartOptionLineData" :key="index" @click="highlightEvent(item)">
<div class="npm-line-header-icon" :class="'icon' + index"></div> <div class="npm-line-header-icon" :class="'icon' + index"></div>
<div class="npm-line-header-value">{{$t(item.legend)}}</div> <div class="npm-line-header-value">{{$t(item.legend)}}</div>
</div> </div>
</div> </div>
</div> </div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div> <chart-no-data v-if="throughputName"></chart-no-data>
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
<template v-if="chartData.id === 12"> <template v-else-if="chartData.id === 12">
<div class="npm-line-title">{{chartData.name}}</div> <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div> <chart-no-data v-if="tcpName"></chart-no-data>
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
<template v-if="chartData.id === 13"> <template v-else-if="chartData.id === 13">
<div class="npm-line-title">{{chartData.name}}</div> <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div> <chart-no-data v-if="httpName"></chart-no-data>
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
<template v-if="chartData.id === 14"> <template v-else-if="chartData.id === 14">
<div class="npm-line-title">{{chartData.name}}</div> <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div> <chart-no-data v-if="sslName"></chart-no-data>
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
<template v-if="chartData.id === 15"> <template v-else-if="chartData.id === 15">
<div class="npm-line-title">{{chartData.name}}</div> <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div> <chart-no-data v-if="packetsLossName"></chart-no-data>
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
<template v-if="chartData.id === 16"> <template v-else-if="chartData.id === 16">
<div class="npm-line-title">{{chartData.name}}</div> <div class="npm-line-title">{{$_.get(chartData, 'i18n') || chartData.name}}</div>
<div class="chart-drawing" :id="`chart${chartData.name}`"></div> <chart-no-data v-if="packetsRetrainsName"></chart-no-data>
<div v-else class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
</div> </div>
</template> </template>
@@ -44,6 +50,8 @@ import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
import { getSecond } from '@/utils/date-util' import { getSecond } from '@/utils/date-util'
import { get } from '@/utils/http' import { get } from '@/utils/http'
import { api } from '@/utils/api' import { api } from '@/utils/api'
import ChartNoData from '@/views/charts/charts/ChartNoData'
import { throughputData, tcpData, httpData, sslData, packetsLossData, packetsRetrainsData } from '@/views/charts2/charts/npmLineData'
export default { export default {
name: 'NpmLine', name: 'NpmLine',
@@ -54,6 +62,9 @@ export default {
// country: String, // country: String,
// province: String // province: String
}, },
components: {
ChartNoData
},
setup () { setup () {
return { return {
myChart: shallowRef() myChart: shallowRef()
@@ -63,15 +74,26 @@ export default {
return { return {
chartData: {}, chartData: {},
chartOptionLineData: [ chartOptionLineData: [
{ legend: 'network.total', index: 0, invertTab: true }, { legend: 'network.total', index: 0, invertTab: true, color: '#749F4D' },
{ legend: 'network.inbound', index: 1, invertTab: true }, { legend: 'network.inbound', index: 1, invertTab: true, color: '#98709B' },
{ legend: 'network.outbound', index: 2, invertTab: true } { legend: 'network.outbound', index: 2, invertTab: true, color: '#E5A219' }
],
npmLineColor: [
{ legend: '', color: '#749F4D' },
{ legend: '', color: '#98709B' },
{ legend: '', color: '#E5A219' }
], ],
timer: null, timer: null,
myChartArray: [], myChartArray: [],
side: 'server', side: 'server',
country: '北京', country: '北京',
province: '北京' province: '北京',
throughputName: '',
tcpName: '',
httpName: '',
sslName: '',
packetsLossName: '',
packetsRetrainsName: ''
} }
}, },
methods: { methods: {
@@ -83,41 +105,77 @@ export default {
country: this.country, country: this.country,
province: this.province province: this.province
} }
console.log(this.chartData)
if (this.chartData.id === 11) { if (this.chartData.id === 11) {
throughputData.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)
get(api.npm.location.thoughput, params).then(res => { get(api.npm.location.thoughput, params).then(res => {
if (res.code === 200) { if (res.code === 200) {
console.log(res) this.echartsInit(result, this.chartData.name, this.chartData.params.unitType)
} else {
this.throughputName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
})
} else if (this.chartData.id === 12) {
get(api.npm.location.tcpConnectionEstablishLatency, params).then(res => {
if (res.code === 200) {
this.echartsInit(tcpData, this.chartData.name, this.chartData.params.unitType)
} else {
this.tcpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
})
} else if (this.chartData.id === 13) {
get(api.npm.location.httpResponseLatency, params).then(res => {
if (res.code === 200) {
this.echartsInit(httpData, this.chartData.name, this.chartData.params.unitType)
} else {
this.httpName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
})
} else if (this.chartData.id === 14) {
get(api.npm.location.sslHandshakeLatency, params).then(res => {
if (res.code === 200) {
this.echartsInit(sslData, this.chartData.name, this.chartData.params.unitType)
} else {
this.sslName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
})
} else if (this.chartData.id === 15) {
get(api.npm.location.packetsLoss, params).then(res => {
if (res.code === 200) {
this.echartsInit(packetsLossData, this.chartData.name, this.chartData.params.unitType)
} else {
this.packetsLossName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
}
})
} else if (this.chartData.id === 16) {
get(api.npm.location.packetsRetrains, params).then(res => {
if (res.code === 200) {
this.echartsInit(packetsRetrainsData, this.chartData.name, this.chartData.params.unitType)
} else {
this.packetsRetrainsName = this.$_.get(this.chartData, 'i18n') || this.chartData.name
} }
}) })
} }
this.echartsInit()
}, },
echartsInit () { echartsInit (data, name, type) {
const dom = document.getElementById(`chart${this.chartData.name}`) const dom = document.getElementById(`chart${name}`)
if (dom) {
this.myChart = echarts.init(dom) this.myChart = echarts.init(dom)
this.chartOption = npmLineChartOption this.chartOption = npmLineChartOption
const seriesTemplate = this.chartOption.series[0] const seriesTemplate = this.chartOption.series[0]
this.chartOption.color = this.chartData.params.color this.chartOption.color = this.chartData.params.color
let result = [ this.chartOption.series = data.map((t, i) => {
{
type: 'inboundBytesRate',
values: [[1435781430781, '3'], [1435781431781, '4']]
},
{
type: 'totalBytesRate',
values: [[1435781430781, '5'], [1435781431781, '6']]
},
{
type: 'outboundBytesRate',
values: [[1435781430781, '2'], [1435781431781, '9']]
}
]
result = result.filter(item => this.chartData.params.color.indexOf(item.color) > -1)
this.chartOption.series = result.map((t, i) => {
return { return {
...seriesTemplate, ...seriesTemplate,
name: t.legend, name: t.legend ? t.legend : t.type,
stack: this.chartData.params.isStack ? 'network.total' : '', stack: this.chartData.params.isStack ? 'network.total' : '',
lineStyle: { lineStyle: {
width: 1 width: 1
@@ -125,7 +183,7 @@ export default {
areaStyle: { areaStyle: {
opacity: 0.1 opacity: 0.1
}, },
data: t.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), this.chartData.params.unitType]) data: t.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), type])
} }
}) })
this.chartOption.tooltip.formatter = (params) => { this.chartOption.tooltip.formatter = (params) => {
@@ -137,6 +195,7 @@ export default {
} }
this.myChartArray.push(this.myChart) this.myChartArray.push(this.myChart)
this.myChart.setOption(this.chartOption) this.myChart.setOption(this.chartOption)
}
}, },
dispatchLegendSelectAction (name) { dispatchLegendSelectAction (name) {
this.myChart.dispatchAction({ this.myChart.dispatchAction({

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

@@ -2,8 +2,8 @@
<div class="npm-network-quantity"> <div class="npm-network-quantity">
<single-value <single-value
:npm-network-cycle-data="npmNetworkCycleData" :npm-network-cycle-data="npmNetworkCycleData"
:npm-network-last-cycle-data="npmNetworkLastCycleData"
:npm-network-name="npmNetworkName" :npm-network-name="npmNetworkName"
:time-filter="timeFilter"
></single-value> ></single-value>
</div> </div>
</template> </template>
@@ -30,8 +30,7 @@ export default {
{ name: 'networkAppPerformance.packetLoss' }, { name: 'networkAppPerformance.packetLoss' },
{ name: 'overall.packetRetrans' } { name: 'overall.packetRetrans' }
], ],
npmNetworkCycleData: [], npmNetworkCycleData: []
npmNetworkLastCycleData: []
} }
}, },
methods: { methods: {
@@ -53,30 +52,11 @@ export default {
} }
}) })
}) })
},
npmNetworkLastCycleQuery () {
const params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime),
cycle: 1
}
const tcp = get(api.npm.overview.tcpSessionDelay, params)
const http = get(api.npm.overview.httpResponseDelay, params)
const ssl = get(api.npm.overview.sslConDelay, params)
const tcpPercent = get(api.npm.overview.tcpLostlenPercent, params)
const packetPercent = get(api.npm.overview.packetRetransPercent, params)
Promise.all([tcp, http, ssl, tcpPercent, packetPercent]).then(res => {
res.forEach(t => {
if (t.code === 200) {
this.npmNetworkLastCycleData.push(t.data.result)
}
})
})
} }
}, },
mounted () { mounted () {
this.npmNetworkCycleQuery() this.npmNetworkCycleQuery()
this.npmNetworkLastCycleQuery()
} }
} }
</script> </script>

4
src/views/charts2/charts/options/echartOption.js
View File

@@ -264,9 +264,9 @@ export const npmLineChartOption = {
show: false show: false
}, },
grid: { grid: {
top: '21%', top: '13%',
left: '4.6%', left: '4.6%',
right: '4%', right: '3%',
bottom: 15, bottom: 15,
containLabel: true containLabel: true
}, },