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

CN-932: 折线图类的组件代码优化

Browse Source
This commit is contained in:
刘洪洪
2023-03-20 18:52:42 +08:00
parent 509b10e214
commit 61b1e8cd73
8 changed files with 509 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,7 +23,7 @@
<chart-error v-if="showError" :content="errorMsg" />
</div>
<chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div v-show="!isNoData && !showError" class="chart-drawing" id="chart-line"></div>
<div v-show="!isNoData && !showError" class="chart-drawing" ref="chart-line"></div>
</div>
</div>
</template>
@@ -35,7 +35,6 @@ import unitConvert from '@/utils/unit-convert'
import { chartColor3, unitTypes } from '@/utils/constants.js'
import { ref, shallowRef } from 'vue'
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
import { get } from '@/utils/http'
import axios from 'axios'
import { api } from '@/utils/api'
import { getSecond } from '@/utils/date-util'
@@ -43,8 +42,16 @@ import ChartNoData from '@/views/charts/charts/ChartNoData'
import _ from 'lodash'
import chartMixin from '@/views/charts2/chart-mixin'
import { useRoute } from 'vue-router'
import { getLineType, getLineIndexUnit, getLineIndexUnit2, overwriteUrl, urlParamsHandler } from '@/utils/tools'
import {
getLineType,
getLineIndexUnit,
getLineIndexUnit2,
overwriteUrl,
urlParamsHandler,
getQueryByType
} from '@/utils/tools'
import ChartError from '@/components/common/Error'
import { dataForNpmTrafficLine } from '@/utils/static-data'
export default {
name: 'NpmTrafficLine',
@@ -72,56 +79,10 @@ export default {
unitConvert,
unitTypes,
side: '',
tabs: [
{ name: this.$t('network.total'), show: true, positioning: 0, data: [], unitType: 'number' },
{ name: this.$t('network.inbound'), show: true, positioning: 1, data: [], unitType: 'number' },
{ name: this.$t('network.outbound'), show: true, positioning: 2, data: [], unitType: 'number' },
{ name: this.$t('network.internal'), show: true, positioning: 3, data: [], unitType: 'number' },
{ name: this.$t('network.through'), show: true, positioning: 4, data: [], unitType: 'number' },
{ name: this.$t('network.other'), show: true, positioning: 5, data: [], unitType: 'number' }
],
npmQuantity: [
{ name: this.$t('networkAppPerformance.tcpConnectionEstablishLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 0 },
{ name: this.$t('networkAppPerformance.httpResponse'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 1 },
{ name: this.$t('networkAppPerformance.sslResponseLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 2 },
{ name: this.$t('networkAppPerformance.packetLoss'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 3 },
{ name: this.$t('overall.packetRetrans'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 4 }
],
chartData: {},
metricOptions: [
{
value: 'Bits/s',
label: 'Bits/s'
},
{
value: 'Packets/s',
label: 'Packets/s'
},
{
value: 'Sessions/s',
label: 'Sessions/s'
},
{
value: 'establishLatencyMs',
label: this.$t('networkAppPerformance.tcpConnectionEstablishLatency')
},
{
value: 'httpResponseLatency',
label: this.$t('networkAppPerformance.httpResponse')
},
{
value: 'sslConLatency',
label: this.$t('networkAppPerformance.sslResponseLatency')
},
{
value: 'tcpLostlenPercent',
label: this.$t('networkAppPerformance.packetLoss')
},
{
value: 'pktRetransPercent',
label: this.$t('overall.packetRetrans')
}
],
tabs: dataForNpmTrafficLine.tabs,
npmQuantity: dataForNpmTrafficLine.npmQuantity,
metricOptions: dataForNpmTrafficLine.metricOptions,
showError: false,
errorMsg: ''
}
@@ -136,31 +97,40 @@ export default {
},
timeFilter: {
handler () {
this.init()
this.initData()
}
}
},
methods: {
init (val) {
/**
* 根据过滤条件，请求接口获得折线图数据
* @param val
*/
initData (val) {
if (!val) {
val = this.metricFilter
}
let condition = ''
let type = this.dimensionType
if (this.queryCondition.indexOf(' OR ') > -1) {
condition = this.queryCondition.split(/["|'](.*?)["|']/)
} else {
condition = this.queryCondition
}
if (parseFloat(this.tabIndex) === 0) {
this.side = 'client'
} else if (parseFloat(this.tabIndex) === 1) {
this.side = 'server'
}
const params = {
startTime: getSecond(this.timeFilter.startTime),
endTime: getSecond(this.timeFilter.endTime)
}
// 此处过滤入参，再进行精简便降低可读性了，故暂时保留，若之后有更好处理方法则进行替换
if (type) {
if (type === 'clientIp' || type === 'serverIp') {
if (parseFloat(this.tabIndex) === 0) {
@@ -172,20 +142,16 @@ export default {
}
params.type = type
}
if (condition && (typeof condition !== 'object') && type) {
if (type === 'clientIp' || type === 'serverIp') {
params.q = `ip='${condition.split(/'(.*?)'/)[1]}'`
} else if (type === 'clientCity') {
params.q = `client_city='${condition.split(/'(.*?)'/)[1]}'`
} else if (type === 'serverCity') {
params.q = `server_city='${condition.split(/'(.*?)'/)[1]}'`
} else {
params.q = condition
}
params.q = getQueryByType(type, condition)
} else if (condition.length > 1 && type && type === 'ip') {
params.q = `${type}='${condition[1]}' and side='${this.side}'`
} else if (condition.length > 1 && type && type !== 'ip') {
if (type === 'country' || type === 'asn' || type === 'province' || type === 'city' || type === 'isp') {
const typeList = ['country', 'asn', 'province', 'city', 'isp']
const typeFlag = typeList.find(t => type === t)
if (typeFlag) {
params.q = `${type}='${condition[1]}'`
} else if (type === 'idcRenter') {
params.q = `idc_renter='${condition[1]}'`
@@ -193,6 +159,7 @@ export default {
params.q = `${condition[0]}'${condition[1]}'`
}
}
this.toggleLoading(true)
if (params.type && params.q) {
axios.get(api.npm.overview.trafficGraph, { params: params }).then(res => {
@@ -201,28 +168,15 @@ export default {
this.showError = false
this.isNoData = res.data.result.length === 0
if (this.isNoData) {
this.tabs = [
{ name: this.$t('network.total'), show: true, positioning: 0, data: [], unitType: 'number' },
{ name: this.$t('network.inbound'), show: true, positioning: 1, data: [], unitType: 'number' },
{ name: this.$t('network.outbound'), show: true, positioning: 2, data: [], unitType: 'number' },
{ name: this.$t('network.internal'), show: true, positioning: 3, data: [], unitType: 'number' },
{ name: this.$t('network.through'), show: true, positioning: 4, data: [], unitType: 'number' },
{ name: this.$t('network.other'), show: true, positioning: 5, data: [], unitType: 'number' }
]
this.npmQuantity = [
{ name: this.$t('networkAppPerformance.tcpConnectionEstablishLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 0 },
{ name: this.$t('networkAppPerformance.httpResponse'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 1 },
{ name: this.$t('networkAppPerformance.sslResponseLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 2 },
{ name: this.$t('networkAppPerformance.packetLoss'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 3 },
{ name: this.$t('overall.packetRetrans'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 4 }
]
this.tabs = dataForNpmTrafficLine.tabs
this.npmQuantity = dataForNpmTrafficLine.npmQuantity
} else {
this.initData(res.data.result, val)
this.initLineData(res.data.result, val)
}
} else {
this.isNoData = false
this.showError = true
this.errorMsg = res.message
this.errorMsg = this.errorMsgHandler(res.message)
}
}).catch(e => {
this.isNoData = false
@@ -246,29 +200,16 @@ export default {
} else {
this.isNoData = false
this.showError = true
this.errorMsg = res.message
this.errorMsg = this.errorMsgHandler(res.message)
}
})
this.showError = false
this.isNoData = npmLineData.length === 0
if (this.isNoData) {
this.tabs = [
{ name: this.$t('network.total'), show: true, positioning: 0, data: [], unitType: 'number' },
{ name: this.$t('network.inbound'), show: true, positioning: 1, data: [], unitType: 'number' },
{ name: this.$t('network.outbound'), show: true, positioning: 2, data: [], unitType: 'number' },
{ name: this.$t('network.internal'), show: true, positioning: 3, data: [], unitType: 'number' },
{ name: this.$t('network.through'), show: true, positioning: 4, data: [], unitType: 'number' },
{ name: this.$t('network.other'), show: true, positioning: 5, data: [], unitType: 'number' }
]
this.npmQuantity = [
{ name: this.$t('networkAppPerformance.tcpConnectionEstablishLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 0 },
{ name: this.$t('networkAppPerformance.httpResponse'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 1 },
{ name: this.$t('networkAppPerformance.sslResponseLatency'), show: true, positioning: 0, data: [], unitType: unitTypes.time, index: 2 },
{ name: this.$t('networkAppPerformance.packetLoss'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 3 },
{ name: this.$t('overall.packetRetrans'), show: true, positioning: 0, data: [], unitType: unitTypes.percent, index: 4 }
]
this.tabs = dataForNpmTrafficLine.tabs
this.npmQuantity = dataForNpmTrafficLine.npmQuantity
} else {
this.initData(npmLineData, val)
this.initLineData(npmLineData, val)
}
}).catch(e => {
this.isNoData = false
@@ -279,15 +220,23 @@ export default {
})
}
},
echartsInit (echartsData, legendUnit) {
/**
* 初始化echarts折线图配置信息
* @param echartsData
* @param legendUnit
*/
initEchartsOption (echartsData, legendUnit) {
echartsData = echartsData.filter(t => t.show === true)
this.$nextTick(() => {
if (echartsData.length > 0) {
const dom = document.getElementById('chart-line')
const dom = this.$refs['chart-line']
!this.myChart && (this.myChart = echarts.init(dom))
this.chartOption = _.cloneDeep(trafficLineChartOption)
const chartOption = this.chartOption.series[0]
this.chartOption.series = echartsData.map((t) => {
// 根据参数转换y轴单位
this.chartOption.yAxis[0].axisLabel.formatter = (value) => {
if (t.unitType === 'percent') {
return unitConvert(value, t.unitType)[0]
@@ -297,6 +246,7 @@ export default {
return unitConvert(value, t.unitType).join('')
}
}
return {
...chartOption,
name: t.name + (legendUnit || ''),
@@ -321,6 +271,7 @@ export default {
data: t.data.map(v => [Number(v[0]) * 1000, Number(v[1]), t.unitType])
}
})
this.chartOption.tooltip.formatter = (params) => {
params.forEach(t => {
this.tabs.forEach(e => {
@@ -340,12 +291,17 @@ export default {
})
return stackedLineTooltipFormatter(params)
}
this.myChart.on('legendselectchanged', this.handleLegendClick)
this.myChart.on('legendselectchanged', this.selectLegend)
this.myChart.setOption(this.chartOption, true)
}
})
},
// 点击前，高亮legend个数
/**
* 点击前legend，高亮legend个数
* @param params
* @returns {number}
*/
getSelectedNum (params) {
let selectedNum = 0
const legendItem = params.selected
@@ -362,13 +318,14 @@ export default {
}
return selectedNum
},
// 自定义legend的点击事件:此方法只处理多条曲线的情况（单条曲线正常切换legend和曲线）
handleLegendClick (params) {
/**
* 自定义legend的点击事件:此方法只处理多条曲线的情况（单条曲线正常切换legend和曲线）
* @param params
*/
selectLegend (params) {
// legend点击事件
const legendNum = Object.keys(params.selected).length
const selectedNum = this.getSelectedNum(params)
const legendItem = params.selected
if (selectedNum === legendNum) { // 点击前：全部曲线高亮
for (const name in legendItem) {
@@ -386,18 +343,23 @@ export default {
})
},
metricChange (value) {
this.init(value)
this.initData(value)
},
resize () {
this.myChart.resize()
},
initData (data, val) {
/**
* 初始化整理折线图数据
* @param data
* @param val
*/
initLineData (data, val) {
let lineData = []
if (data !== undefined && data.length > 0) {
data.forEach(item => {
item.type = getLineType(item.type)
if (['Bits/s', 'Packets/s', 'Sessions/s'].indexOf(val) > -1) {
if (item.type === val) {
if (item.type === val) {
if (['Bits/s', 'Packets/s', 'Sessions/s'].indexOf(val) > -1) {
lineData = Object.keys((item)).map(t => {
return {
...item[t],
@@ -405,9 +367,7 @@ export default {
key: t
}
})
}
} else {
if (item.type === val) {
} else {
lineData = Object.keys((item)).map(t => {
return {
...item[t],
@@ -421,7 +381,6 @@ export default {
})
}
lineData.splice(0, 1)
console.info(lineData)
const tabs = _.cloneDeep(this.tabs)
const npmQuantity = _.cloneDeep(this.npmQuantity)
if (val === 'Sessions/s') {
@@ -435,35 +394,42 @@ export default {
}
})
this.tabs = tabs
this.echartsInit(this.tabs)
this.initEchartsOption(this.tabs)
} else if (val !== 'Bits/s' && val !== 'Packets/s') {
this.legendInit(lineData, npmQuantity, true)
this.initLegend(lineData, npmQuantity, true)
} else {
this.legendInit(lineData, tabs, false)
this.initLegend(lineData, tabs, false)
}
},
legendInit (data, npmData, show) {
data.forEach((d, i) => {
/**
* 初始化legend
* @param data
* @param npmData
* @param show
*/
initLegend (data, npmData, show) {
const newNpmData = _.clone(npmData)
data.forEach(d => {
if (show) {
npmData[d.index].data = d.values
npmData[d.index].analysis = d.analysis
newNpmData[d.index].data = d.values
newNpmData[d.index].analysis = d.analysis
} else {
npmData[d.index].data = d.values
npmData[d.index].analysis = d.analysis
newNpmData[d.index].data = d.values
newNpmData[d.index].analysis = d.analysis
}
})
if (show) {
npmData.forEach((e, i) => {
newNpmData.forEach((e, i) => {
e.show = i === data[0].index
})
this.npmQuantity = npmData
this.echartsInit(this.npmQuantity, data[0].unit)
this.npmQuantity = newNpmData
this.initEchartsOption(this.npmQuantity, data[0].unit)
} else {
npmData.forEach((e) => {
newNpmData.forEach((e) => {
e.show = true
})
this.tabs = npmData
this.echartsInit(this.tabs)
this.tabs = newNpmData
this.initEchartsOption(this.tabs)
}
}
},
@@ -472,7 +438,7 @@ export default {
this.chartData = _.cloneDeep(this.chart)
}
this.timer = setTimeout(() => {
this.init()
this.initData()
}, 200)
window.addEventListener('resize', this.resize)
},