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

fix: 修复NetworkOverviewLine的eslint报警提示

Browse Source
This commit is contained in:
刘洪洪
2023-03-02 18:36:02 +08:00
parent 04062195e2
commit fdb4ec5cf5
1 changed files with 126 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
View File

@@ -122,12 +122,66 @@ export default {
}
],
tabsTemplate: [
{ analysis: {}, name: 'network.total', class: 'total', show: true, invertTab: true, positioning: 0, data: [], unitType: '' },
{ analysis: {}, name: 'network.inbound', class: 'inbound', show: true, invertTab: true, positioning: 1, data: [], unitType: '' },
{ analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' },
{ analysis: {}, name: 'network.internal', class: 'internal', show: true, invertTab: true, positioning: 3, data: [], unitType: '' },
{ analysis: {}, name: 'network.through', class: 'through', show: true, invertTab: true, positioning: 4, data: [], unitType: '' },
{ analysis: {}, name: 'network.other', class: 'other', show: true, invertTab: true, positioning: 5, data: [], unitType: '' }
{
analysis: {},
name: 'network.total',
class: 'total',
show: true,
invertTab: true,
positioning: 0,
data: [],
unitType: ''
},
{
analysis: {},
name: 'network.inbound',
class: 'inbound',
show: true,
invertTab: true,
positioning: 1,
data: [],
unitType: ''
},
{
analysis: {},
name: 'network.outbound',
class: 'outbound',
show: true,
invertTab: true,
positioning: 2,
data: [],
unitType: ''
},
{
analysis: {},
name: 'network.internal',
class: 'internal',
show: true,
invertTab: true,
positioning: 3,
data: [],
unitType: ''
},
{
analysis: {},
name: 'network.through',
class: 'through',
show: true,
invertTab: true,
positioning: 4,
data: [],
unitType: ''
},
{
analysis: {},
name: 'network.other',
class: 'other',
show: true,
invertTab: true,
positioning: 5,
data: [],
unitType: ''
}
],
tabs: [],
unitConvert,
@@ -225,25 +279,25 @@ export default {
/**
* 初始化echartsdom，用于右键点击返回框选
*/
domInit () {
const self = this
// 去掉默认的contextmenu事件，否则会和右键事件同时出现。
document.oncontextmenu = function (e) {
e.preventDefault()
}
document.getElementById('overviewLineChart').onmousedown = function (e) {
// e.button: 0左键，1滚轮，2右键
if (e.button === 2) {
self.myChart.dispatchAction({
type: 'brush',
areas: [] // 删除选框
})
self.mouseDownFlag = true
document.getElementById('brushBtn').style.left = e.layerX + 'px'
document.getElementById('brushBtn').style.top = e.layerY + 74 + 'px'
}
}
},
// domInit () {
// const self = this
// // 去掉默认的contextmenu事件，否则会和右键事件同时出现。
// document.oncontextmenu = function (e) {
// e.preventDefault()
// }
// document.getElementById('overviewLineChart').onmousedown = function (e) {
// // e.button: 0左键，1滚轮，2右键
// if (e.button === 2) {
// self.myChart.dispatchAction({
// type: 'brush',
// areas: [] // 删除选框
// })
// self.mouseDownFlag = true
// document.getElementById('brushBtn').style.left = e.layerX + 'px'
// document.getElementById('brushBtn').style.top = e.layerY + 74 + 'px'
// }
// }
// },
echartsInit (echartsData, show) {
// echarts内容在单元测试时不执行
if (!this.isUnitTesting) {
@@ -262,10 +316,10 @@ export default {
return {
...chartOption,
name: t.name,
type: "line",
type: 'line',
showSymbol: false,
smooth: true,
symbol: "circle",
symbol: 'circle',
lineStyle: {
color: chartColor3[t.positioning],
width: 1
@@ -479,7 +533,11 @@ export default {
},
handleActiveBar () {
if (document.querySelector('.network .line-value-tabs.is-active')) {
const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.network .line-value-tabs.is-active')
const {
offsetLeft,
clientWidth,
clientLeft
} = document.querySelector('.network .line-value-tabs.is-active')
const activeBar = document.querySelector('.network .line-value-active')
activeBar.style.cssText += `width: ${clientWidth}px; left: ${offsetLeft + this.leftOffset + clientLeft}px;`
}
@@ -500,19 +558,19 @@ export default {
if (!this.isUnitTesting) {
const chartOption = this.myChart.getOption()
if (this.lineRefer === 'Average' && this.showMarkLine) {
chartOption.series.forEach((t, i) => {
chartOption.series.forEach((t) => {
if (t.name === echartsData[0].name) {
t.markLine.data = [{ yAxis: echartsData[0].analysis.avg }]
}
})
} else if (this.lineRefer === '95th Percentile' && this.showMarkLine) {
chartOption.series.forEach((t, i) => {
chartOption.series.forEach((t) => {
if (t.name === echartsData[0].name) {
t.markLine.data = [{ yAxis: echartsData[0].analysis.p95 }]
}
})
} else if (this.lineRefer === 'Maximum' && this.showMarkLine) {
chartOption.series.forEach((t, i) => {
chartOption.series.forEach((t) => {
if (t.name === echartsData[0].name) {
t.markLine.data = [{ yAxis: echartsData[0].analysis.max }]
}
@@ -565,7 +623,9 @@ export default {
otherData[2] = 5
}
}
dataIntegrationArray.sort((a, b) => { return a[1] - b[1] })
dataIntegrationArray.sort((a, b) => {
return a[1] - b[1]
})
const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)
return this.sizes[sortIndex]
},
@@ -615,10 +675,10 @@ export default {
tabs[i].analysis = d.analysis
})
let num = 0
let self = this
const self = this
tabs.forEach(e => {
e.unitType = type
if (e.name !== 'network.total' && parseFloat(e.analysis.avg) == 0) {
if (e.name !== 'network.total' && parseFloat(e.analysis.avg) === 0) {
e.show = false
num += 1
} else {
@@ -650,28 +710,28 @@ export default {
if (!this.lineRefer) this.lineRefer = 'Average'
})
}
},
}
/**
* 鼠标右键返回框选的时间范围
*/
backBrushHistory () {
this.myChart.dispatchAction({
type: 'brush',
areas: [] // 删除选框
})
if (this.brushHistory.length > 0) {
this.$store.commit('setRangeEchartsData', _.cloneDeep(this.brushHistory[0]))
this.brushHistory.shift()
}
this.mouseDownFlag = false
}
// backBrushHistory () {
// this.myChart.dispatchAction({
// type: 'brush',
// areas: [] // 删除选框
// })
// if (this.brushHistory.length > 0) {
// this.$store.commit('setRangeEchartsData', _.cloneDeep(this.brushHistory[0]))
// this.brushHistory.shift()
// }
// this.mouseDownFlag = false
// }
},
mounted () {
// todo 初始化鼠标事件，开启右键返回
// this.domInit()
this.myChart = null
this.chartOption = null
let self = this
const self = this
self.timer = setTimeout(() => {
if (self.lineTab && self.metric !== 'Sessions/s') {
const data = self.tabsTemplate.find(t => t.class === self.lineTab)