CN-332 feat :Dashboard--dns 仪表盘图表开发
This commit is contained in:
zhangxiaolong
@@ -200,17 +200,17 @@ export default {
|
||||
categoryPerData: [],
|
||||
activeAttackOption: null,
|
||||
activeAttackData: [],
|
||||
isEventSeverityNoData:true,
|
||||
isStatisticsSeverityNoData:true,
|
||||
isStatisticsCategoryNoData:true,
|
||||
isStatisticsActiveAttackNoData:true
|
||||
isEventSeverityNoData: true,
|
||||
isStatisticsSeverityNoData: true,
|
||||
isStatisticsCategoryNoData: true,
|
||||
isStatisticsActiveAttackNoData: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化顶部大柱状图
|
||||
initEventSeverityTrendData (params) {
|
||||
getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
|
||||
/*data = [
|
||||
/* data = [
|
||||
{
|
||||
legend: 'critical',
|
||||
values: [[1435781430781, '999'], [1435781431781, '222'], [1435781432781, '11'], [1435781433781, '3']]
|
||||
@@ -228,7 +228,7 @@ export default {
|
||||
legend: 'info',
|
||||
values: [[1435781430781, '5'], [1435781431781, '7'], [1435781432781, '5'], [1435781433781, '8']]
|
||||
}
|
||||
]*/
|
||||
] */
|
||||
if (!this.$_.isEmpty(data)) {
|
||||
const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
|
||||
const detectionChart = echarts.init(chartDom)
|
||||
@@ -249,7 +249,7 @@ export default {
|
||||
// 初始化左侧事件严重等级和小饼图
|
||||
initEventSeverityData (params) {
|
||||
getData(api.detection[this.pageType].eventSeverity, params).then(data => {
|
||||
/*data = [
|
||||
/* data = [
|
||||
{
|
||||
eventSeverity: 'critical',
|
||||
count: 1048
|
||||
@@ -266,7 +266,7 @@ export default {
|
||||
eventSeverity: 'info',
|
||||
count: 300
|
||||
}
|
||||
]*/
|
||||
] */
|
||||
if (!this.$_.isEmpty(data)) {
|
||||
this.filterData[this.pageType][0].data = data.map(r => ({ label: r.eventSeverity, value: r.eventSeverity, count: r.count }))
|
||||
const eventSeverityOption = this.$_.cloneDeep(pieForSeverity)
|
||||
@@ -284,7 +284,7 @@ export default {
|
||||
},
|
||||
initSecurityTypeData (params) {
|
||||
getData(api.detection[this.pageType].securityType, params).then(data => {
|
||||
/*data = [
|
||||
/* data = [
|
||||
{
|
||||
attackType: 'command and control',
|
||||
count: 1048
|
||||
@@ -304,7 +304,7 @@ export default {
|
||||
attackType: 'ddos',
|
||||
count: 50
|
||||
}
|
||||
]*/
|
||||
] */
|
||||
if (!this.$_.isEmpty(data)) {
|
||||
this.filterData[this.pageType][1].data = data.map(r => ({
|
||||
label: r.attackType,
|
||||
@@ -315,7 +315,7 @@ export default {
|
||||
const detectionChart = echarts.init(chartDom)
|
||||
const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
|
||||
securityTypeOption.series[0].data = data.map(d => {
|
||||
return {value: d.count, name: d.attackType, itemStyle: {color: getAttackColor(d.attackType)}}
|
||||
return { value: d.count, name: d.attackType, itemStyle: { color: getAttackColor(d.attackType) } }
|
||||
})
|
||||
detectionChart.setOption(securityTypeOption)
|
||||
this.isStatisticsCategoryNoData = false
|
||||
@@ -326,7 +326,7 @@ export default {
|
||||
},
|
||||
initOffenderIpData (params) {
|
||||
getData(api.detection[this.pageType].offenderIp, params).then(data => {
|
||||
/*data = [
|
||||
/* data = [
|
||||
{
|
||||
offenderIp: '192.168.12.21',
|
||||
count: 99999
|
||||
@@ -375,22 +375,22 @@ export default {
|
||||
offenderIp: '193.168.52.21',
|
||||
count: 55355
|
||||
}
|
||||
]*/
|
||||
] */
|
||||
if (!this.$_.isEmpty(data)) {
|
||||
this.filterData[this.pageType][4].data = data.map(r => ({
|
||||
label: r.offenderIp,
|
||||
value: r.offenderIp,
|
||||
count: r.count
|
||||
}))
|
||||
const {showMore, showIndex} = this.computeFilterPage(this.filterData[this.pageType][4].data)
|
||||
const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][4].data)
|
||||
this.filterData[this.pageType][4].showMore = showMore
|
||||
this.filterData[this.pageType][4].showIndex = showIndex
|
||||
|
||||
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
|
||||
const detectionChart = echarts.init(chartDom)
|
||||
const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
|
||||
data.sort(this.sortBy('count'));
|
||||
data = data.slice(0,5)
|
||||
data.sort(this.sortBy('count'))
|
||||
data = data.slice(0, 5)
|
||||
offenderIpOption.series[0].data = data.map(d => {
|
||||
return [d.count, d.offenderIp]
|
||||
}).reverse()
|
||||
@@ -401,14 +401,14 @@ export default {
|
||||
|
||||
})
|
||||
},
|
||||
sortBy(i) {
|
||||
return function(a,b) {
|
||||
sortBy (i) {
|
||||
return function (a, b) {
|
||||
return b[i] - a[i]
|
||||
}
|
||||
},
|
||||
initVictimIpData (params) {
|
||||
getData(api.detection[this.pageType].victimIp, params).then(data => {
|
||||
/*data = [
|
||||
/* data = [
|
||||
{
|
||||
victimIp: '1.2.6.8',
|
||||
count: 50
|
||||
@@ -493,7 +493,7 @@ export default {
|
||||
victimIp: '1.2.6.88',
|
||||
count: 50
|
||||
}
|
||||
]*/
|
||||
] */
|
||||
this.filterData[this.pageType][2].data = data.map(r => ({ label: r.victimIp, value: r.victimIp, count: r.count }))
|
||||
const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][2].data)
|
||||
this.filterData[this.pageType][2].showMore = showMore
|
||||
@@ -504,12 +504,12 @@ export default {
|
||||
},
|
||||
initVictimLocationData (params) {
|
||||
getData(api.detection[this.pageType].victimLocation, params).then(data => {
|
||||
/*data = [
|
||||
/* data = [
|
||||
{
|
||||
victimLocationCountry: 'china',
|
||||
count: 50
|
||||
}
|
||||
]*/
|
||||
] */
|
||||
this.filterData[this.pageType][3].data = data.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count }))
|
||||
const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][3].data)
|
||||
this.filterData[this.pageType][3].showMore = showMore
|
||||
@@ -520,12 +520,12 @@ export default {
|
||||
},
|
||||
initOffenderLocationData (params) {
|
||||
getData(api.detection[this.pageType].offenderLocation, params).then(data => {
|
||||
/*data = [
|
||||
/* data = [
|
||||
{
|
||||
offenderLocationCountry: 'china',
|
||||
count: 50
|
||||
}
|
||||
]*/
|
||||
] */
|
||||
this.filterData[this.pageType][5].data = data.map(r => ({ label: r.offenderLocationCountry, value: r.offenderLocationCountry, count: r.count }))
|
||||
const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][5].data)
|
||||
this.filterData[this.pageType][5].showMore = showMore
|
||||
@@ -536,7 +536,7 @@ export default {
|
||||
},
|
||||
initActiveEntity (params) {
|
||||
getData(api.detection[this.pageType].activeEntity, params).then(data => {
|
||||
/*data = [
|
||||
/* data = [
|
||||
{
|
||||
name: 'csdn.net',
|
||||
count: 250
|
||||
@@ -549,7 +549,7 @@ export default {
|
||||
name: '2.3.2.2',
|
||||
count: 50
|
||||
}
|
||||
]*/
|
||||
] */
|
||||
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
|
||||
const detectionChart = echarts.init(chartDom)
|
||||
const option = this.$_.cloneDeep(activeAttackBar)
|
||||
@@ -575,7 +575,7 @@ export default {
|
||||
}
|
||||
getData(api.detection[this.pageType].listBasic, params).then(data => {
|
||||
if (this.pageType === detectionPageType.securityEvent) {
|
||||
/*data = [
|
||||
/* data = [
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
@@ -736,9 +736,9 @@ export default {
|
||||
durationMs: 60000,
|
||||
startTime: 1111111111
|
||||
}
|
||||
]*/
|
||||
] */
|
||||
} else if (this.pageType === detectionPageType.performanceEvent) {
|
||||
/*data = [
|
||||
/* data = [
|
||||
{
|
||||
entityType: 'ip',
|
||||
eventType: 'Dns error',
|
||||
@@ -867,7 +867,7 @@ export default {
|
||||
durationMs: 60000,
|
||||
startTime: 1111111111
|
||||
}
|
||||
]*/
|
||||
] */
|
||||
}
|
||||
|
||||
this.listData = data
|
||||
|
||||
Reference in New Issue
Block a user