914 lines
32 KiB
Vue
914 lines
32 KiB
Vue
<template>
|
||
<div class="entity-explorer entity-explorer--show-list">
|
||
<!-- 顶部工具栏，在列表页显示 -->
|
||
<div class="explorer-top-tools explorer-detection-top-tools">
|
||
<div class="explorer-top-tools-title">{{$t('overall.detections')}}</div>
|
||
<div style="display: flex">
|
||
<div class="explorer-top-tools-block" @click="jumpNewDetetion">
|
||
<i class="cn-icon cn-icon-configure-policies detection-icon-setting"></i>
|
||
<span>{{$t('config.detections.configurePolicies')}}</span>
|
||
</div>
|
||
<DateTimeRange
|
||
class="date-time-range"
|
||
:start-time="timeFilter.startTime"
|
||
:end-time="timeFilter.endTime"
|
||
:date-range="timeFilter.dateRangeValue"
|
||
ref="dateTimeRange"
|
||
@change="reload"/>
|
||
<TimeRefresh
|
||
class="date-time-range"
|
||
@change="timeRefreshChange"
|
||
:end-time="timeFilter.endTime"/>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;padding-bottom: 47px;">
|
||
<chart-tabs :data="tabsData" router></chart-tabs>
|
||
</div>
|
||
|
||
<!-- 搜索组件 -->
|
||
<detection-search
|
||
class="detection-border"
|
||
ref="search"
|
||
:page-type="pageType"
|
||
@search="search"
|
||
></detection-search>
|
||
<!-- 内容区 -->
|
||
<div class="explorer-container" style="height: calc(100% - 20px);flex-direction: column">
|
||
<loading :loading="loading"></loading>
|
||
<template v-if="isEventSeverityNoData">
|
||
<div class="no-data detection__event-severity-bar" >{{ $t('npm.noData') }}</div>
|
||
</template>
|
||
<template v-if="!isEventSeverityNoData">
|
||
<div class="detection__event-severity-bar detection-border" :id="`eventSeverityTrendBar${pageType}`">
|
||
</div>
|
||
</template>
|
||
<div style="display: flex; flex-grow: 1; height: 100%;">
|
||
<detection-filter
|
||
class="detection-border"
|
||
:filter-data="filterData[pageType]"
|
||
:q="q"
|
||
:time-filter="timeFilter"
|
||
></detection-filter>
|
||
|
||
<div class="detection__list">
|
||
<div class="detection__list-statistics detection-border">
|
||
<div class="statistics__severity">
|
||
<div class="chart-header">
|
||
<div class="chart-header__title">{{$t('detections.severity')}}</div>
|
||
</div>
|
||
<template v-if="isStatisticsSeverityNoData">
|
||
<div class="no-data chart-content" >{{ $t('npm.noData') }}</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="chart-content" :id="`eventSeverityPie${pageType}`"></div>
|
||
</template>
|
||
|
||
</div>
|
||
<div class="statistics__category">
|
||
<div class="chart-header">
|
||
<div class="chart-header__title">{{$t('detections.eventType')}}</div>
|
||
</div>
|
||
<template v-if="isStatisticsCategoryNoData">
|
||
<div class="no-data chart-content" >{{ $t('npm.noData') }}</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="chart-content" :id="`detectionCategoryPer${pageType}`"></div>
|
||
</template>
|
||
</div>
|
||
<div class="statistics__active-attack">
|
||
<div class="chart-header">
|
||
<div class="chart-header__title">{{pageType === detectionPageType.securityEvent ? $t('detection.activeOffender') : $t('detections.activeEntity')}}</div>
|
||
</div>
|
||
<template v-if="isStatisticsActiveAttackNoData">
|
||
<div class="no-data chart-content" >{{ $t('npm.noData') }}</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="chart-content" style="padding-left: 5px;" :id="`detectionActiveAttacker${pageType}`"></div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<detection-list
|
||
:list-data="listData"
|
||
:pageObj="pageObj"
|
||
:time-filter="timeFilter"
|
||
:page-type="pageType"
|
||
@pageSize="pageSize"
|
||
@pageNo="pageNo"
|
||
:loading="listLoading"
|
||
></detection-list>
|
||
<div class="entity__pagination" >
|
||
<Pagination
|
||
ref="pagination"
|
||
:page-obj="pageObj"
|
||
@pageNo='pageNo'
|
||
@pageSize='pageSize'
|
||
@size-change="pageSize"
|
||
@prev-click="prev"
|
||
@next-click="next"
|
||
></Pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import DetectionSearch from '@/views/detections/DetectionSearch'
|
||
import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
|
||
import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
|
||
import DetectionFilter from '@/views/detections/DetectionFilter'
|
||
import DetectionList from '@/views/detections/DetectionList'
|
||
import Pagination from '@/components/common/Pagination'
|
||
import { defaultPageSize, detectionPageType } from '@/utils/constants'
|
||
import { getNowTime, getSecond, toTime } from '@/utils/date-util'
|
||
import { ref, shallowRef } from 'vue'
|
||
import * as echarts from 'echarts'
|
||
import {
|
||
activeAttackBar,
|
||
getAttackColor,
|
||
getSeverityColor,
|
||
multipleBarOption,
|
||
pieForSeverity
|
||
} from '@/views/detections/options/detectionOptions'
|
||
import { api, getData } from '@/utils/api'
|
||
import axios from 'axios'
|
||
import { extensionEchartY, reverseSortBy, switchStatus } from '@/utils/tools'
|
||
import { useRoute } from 'vue-router'
|
||
import Loading from '@/components/common/Loading'
|
||
import ChartTabs from '@/components/common/ChartTabs'
|
||
|
||
export default {
|
||
name: 'Index',
|
||
components: {
|
||
Loading,
|
||
DetectionSearch,
|
||
DateTimeRange,
|
||
TimeRefresh,
|
||
DetectionFilter,
|
||
DetectionList,
|
||
Pagination,
|
||
ChartTabs
|
||
},
|
||
data () {
|
||
return {
|
||
tabsData: [
|
||
{
|
||
i18n: 'entities.securityEvents',
|
||
path: '/detection/securityEvent',
|
||
icon: 'cn-icon cn-icon-a-SecurityEvent'
|
||
}
|
||
// {
|
||
// i18n: 'entities.regulatoryRiskEvents',
|
||
// path: '/detection/securityEvent',
|
||
// icon: 'cn-icon cn-icon-a-RegulatoryRiskEvent',
|
||
// disable: true
|
||
// },
|
||
// {
|
||
// i18n: 'overall.performanceEvents',
|
||
// path: '/detection/performanceEvent',
|
||
// icon: 'cn-icon cn-icon-a-PerformanceEvent'
|
||
// }
|
||
],
|
||
chartInit: [],
|
||
pageObj: {
|
||
pageNo: 1,
|
||
pageSize: defaultPageSize,
|
||
total: 0,
|
||
resetPageNo: true
|
||
},
|
||
q: '',
|
||
detectionPageType,
|
||
filterData: {
|
||
securityEvent: [
|
||
{
|
||
title: this.$t('overall.status'),
|
||
column: '',
|
||
topColumn: '', // todo schema暂无标识
|
||
collapse: false,
|
||
value: [], // value之间是or的关系
|
||
data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
|
||
},
|
||
{
|
||
title: this.$t('detections.severity'),
|
||
column: 'severity',
|
||
topColumn: 'severity',
|
||
collapse: false,
|
||
value: [], // value之间是or的关系
|
||
data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
|
||
},
|
||
{
|
||
title: this.$t('detections.eventType'),
|
||
column: 'event_type',
|
||
topColumn: 'event_type',
|
||
collapse: false,
|
||
value: [],
|
||
data: [] // 从接口动态获取
|
||
},
|
||
{
|
||
title: this.$t('detections.victimIp'),
|
||
column: 'victim_ip',
|
||
topColumn: 'victim_ip',
|
||
collapse: false,
|
||
value: [],
|
||
showMore: true,
|
||
showIndex: 9,
|
||
data: [] // 从接口动态获取
|
||
},
|
||
// {
|
||
// title: this.$t('detections.victimLocation'),
|
||
// column: 'victimLocationCountry',
|
||
// collapse: false,
|
||
// value: [],
|
||
// showMore: false,
|
||
// showIndex: 9,
|
||
// data: [
|
||
// {
|
||
// label: 'China',
|
||
// value: 'china',
|
||
// count: 50
|
||
// }
|
||
// ] // 从接口动态获取
|
||
// },
|
||
{
|
||
title: this.$t('detections.offenderIp'),
|
||
column: 'offender_ip',
|
||
topColumn: 'offender_ip',
|
||
collapse: false,
|
||
value: [],
|
||
showMore: false,
|
||
showIndex: 9,
|
||
data: [] // 从接口动态获取
|
||
}
|
||
// {
|
||
// title: this.$t('detections.offenderLocation'),
|
||
// column: 'offenderLocationCountry',
|
||
// collapse: false,
|
||
// value: [],
|
||
// showMore: false,
|
||
// showIndex: 9,
|
||
// data: [] // 从接口动态获取
|
||
// }
|
||
],
|
||
performanceEvent: [
|
||
{
|
||
title: this.$t('detections.eventSeverity'),
|
||
column: 'eventSeverity',
|
||
collapse: false,
|
||
value: [], // value之间是or的关系
|
||
data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
|
||
},
|
||
{
|
||
title: this.$t('detections.eventType'),
|
||
column: 'eventType',
|
||
collapse: false,
|
||
value: [],
|
||
data: [] // 从接口动态获取
|
||
}
|
||
]
|
||
},
|
||
listData: [],
|
||
listLoading: false,
|
||
severityPerOption: null,
|
||
severityPerData: [],
|
||
categoryPerOption: null,
|
||
categoryPerData: [],
|
||
activeAttackOption: null,
|
||
activeAttackData: [],
|
||
eventSeverityData: [],
|
||
statisticsSeverityData: [],
|
||
statisticsCategoryData: [],
|
||
statisticsActiveAttackData: [],
|
||
isEventSeverityNoData: false,
|
||
isStatisticsSeverityNoData: false,
|
||
isStatisticsCategoryNoData: false,
|
||
isStatisticsActiveAttackNoData: false,
|
||
loading: false,
|
||
oldActiveEntitySearchValue: '',
|
||
initFlag: true // 初始化标识，初始化时保证mounted执行
|
||
}
|
||
},
|
||
methods: {
|
||
initStatusData (params) {
|
||
getData(api.detection[this.pageType].statusStatistics, params).then(data => {
|
||
this.filterData[this.pageType][0].data = data.map(r => ({ label: this.$t(switchStatus(r.status)), value: r.status, count: r.count }))
|
||
})
|
||
},
|
||
/** 初始化顶部大柱状图 */
|
||
initEventSeverityTrendData (params) {
|
||
this.loading = true
|
||
// getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
|
||
getData(api.detection[this.pageType].timeDistribution, params).then(data => {
|
||
this.eventSeverityData = data
|
||
if (!this.$_.isEmpty(data)) {
|
||
const dataMap = new Map()
|
||
data.forEach(item => {
|
||
if (item.severity) {
|
||
if (!dataMap.has(item.severity)) {
|
||
const count = [[toTime(item.statTime), item.count]]
|
||
dataMap.set(item.severity, count)
|
||
} else {
|
||
dataMap.get(item.severity).push([toTime(item.statTime), item.count])
|
||
}
|
||
}
|
||
})
|
||
|
||
const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
|
||
const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)
|
||
|
||
const xData = []
|
||
dataMap.forEach(function (value) {
|
||
// eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
|
||
value.forEach(item => {
|
||
if (xData.indexOf(item[0]) < 0) {
|
||
xData.push(item[0])
|
||
}
|
||
})
|
||
})
|
||
|
||
eventSeverityTrendOption.series.forEach(serie => {
|
||
const seriesData = []
|
||
xData.forEach(item => {
|
||
if (dataMap.has(serie.name)) {
|
||
// eslint-disable-next-line array-callback-return
|
||
const hasX = dataMap.get(serie.name).some(function (v) {
|
||
if (item === v[0]) {
|
||
seriesData.push([item, Number(v[1])])
|
||
return true
|
||
}
|
||
})
|
||
if (!hasX) {
|
||
seriesData.push([item, 0])
|
||
}
|
||
} else {
|
||
seriesData.push([item, 0])
|
||
}
|
||
})
|
||
serie.data = seriesData
|
||
})
|
||
|
||
// eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
|
||
|
||
eventSeverityTrendOption.xAxis = [{
|
||
type: 'time',
|
||
splitNumber: 8
|
||
}]
|
||
let detectionChart = echarts.getInstanceByDom(chartDom)
|
||
if (detectionChart) {
|
||
echarts.dispose(detectionChart)
|
||
}
|
||
detectionChart = echarts.init(chartDom)
|
||
this.chartInit.push(shallowRef(detectionChart))
|
||
detectionChart.setOption(eventSeverityTrendOption)
|
||
// this.isEventSeverityNoData = false
|
||
} else {
|
||
// this.isEventSeverityNoData = true
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
}).finally(() => {
|
||
this.$nextTick(() => {
|
||
this.loading = false
|
||
})
|
||
})
|
||
},
|
||
/** 初始化左侧事件严重等级和第一个小饼图 */
|
||
initEventSeverityData (params) {
|
||
// getData(api.detection[this.pageType].eventSeverity, params).then(data => {
|
||
getData(api.detection[this.pageType].severityStatistics, params).then(data => {
|
||
this.statisticsSeverityData = data
|
||
if (!this.$_.isEmpty(data)) {
|
||
this.filterData[this.pageType][1].data = data.map(r => ({ label: r.severity, value: r.severity, count: r.count }))
|
||
const eventSeverityOption = this.$_.cloneDeep(pieForSeverity)
|
||
eventSeverityOption.series[0].data = data.map(d => {
|
||
return { value: d.count, name: d.severity, itemStyle: { color: getSeverityColor(d.severity) } }
|
||
})
|
||
const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
|
||
let detectionChart = echarts.getInstanceByDom(chartDom)
|
||
if (detectionChart) {
|
||
echarts.dispose(detectionChart)
|
||
}
|
||
detectionChart = echarts.init(chartDom)
|
||
this.chartInit.push(shallowRef(detectionChart))
|
||
detectionChart.setOption(eventSeverityOption)
|
||
const vm = this
|
||
detectionChart.off('click')
|
||
detectionChart.on('click', e => {
|
||
if (this.pageType === 'performanceEvent') {
|
||
vm.filterData.performanceEvent[0].value = vm.triggerFilterDataValue(vm.filterData.performanceEvent[0].value, e.data.name)
|
||
} else if (this.pageType === 'securityEvent') {
|
||
vm.filterData.securityEvent[0].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[0].value, e.data.name)
|
||
}
|
||
})
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
initEventTypeData (params) {
|
||
getData(api.detection[this.pageType].eventType, params).then(data => {
|
||
this.statisticsCategoryData = data
|
||
if (!this.$_.isEmpty(data)) {
|
||
this.filterData[this.pageType][2].data = data.map(r => ({
|
||
label: r.eventType,
|
||
value: r.eventType,
|
||
count: r.count
|
||
}))
|
||
const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
|
||
let detectionChart = echarts.getInstanceByDom(chartDom)
|
||
if (detectionChart) {
|
||
echarts.dispose(detectionChart)
|
||
}
|
||
detectionChart = echarts.init(chartDom)
|
||
this.chartInit.push(shallowRef(detectionChart))
|
||
const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
|
||
securityTypeOption.series[0].data = data.map(d => {
|
||
return { value: d.count, name: d.eventType }
|
||
})
|
||
detectionChart.setOption(securityTypeOption)
|
||
|
||
const vm = this
|
||
detectionChart.off('click')
|
||
detectionChart.on('click', e => {
|
||
vm.filterData.performanceEvent[1].value = vm.triggerFilterDataValue(vm.filterData.performanceEvent[1].value, e.data.name)
|
||
})
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
/** 第二个饼图和左侧filter的eventType */
|
||
initSecurityTypeData (params) {
|
||
// getData(api.detection[this.pageType].securityType, params).then(data => {
|
||
getData(api.detection[this.pageType].eventTypeStatistics, params).then(data => {
|
||
this.statisticsCategoryData = data
|
||
if (!this.$_.isEmpty(data)) {
|
||
this.filterData[this.pageType][2].data = data.map(r => ({
|
||
label: r.eventType,
|
||
value: r.eventType,
|
||
count: r.count
|
||
}))
|
||
const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
|
||
let detectionChart = echarts.getInstanceByDom(chartDom)
|
||
if (detectionChart) {
|
||
echarts.dispose(detectionChart)
|
||
}
|
||
detectionChart = echarts.init(chartDom)
|
||
this.chartInit.push(shallowRef(detectionChart))
|
||
const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
|
||
securityTypeOption.series[0].data = data.map(d => {
|
||
return { value: d.count, name: d.eventType, itemStyle: { color: getAttackColor(d.eventType) } }
|
||
})
|
||
detectionChart.setOption(securityTypeOption)
|
||
|
||
const vm = this
|
||
detectionChart.off('click')
|
||
detectionChart.on('click', e => {
|
||
vm.filterData.securityEvent[1].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[1].value, e.data.name)
|
||
})
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
/** 横向柱状图和左侧filter的offenderIp */
|
||
initOffenderIpData (params) {
|
||
// getData(api.detection[this.pageType].offenderIp, params).then(data => {
|
||
getData(api.detection[this.pageType].offenderIpStatistics, params).then(data => {
|
||
this.statisticsActiveAttackData = data
|
||
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)
|
||
this.filterData[this.pageType][4].showMore = showMore
|
||
this.filterData[this.pageType][4].showIndex = showIndex
|
||
|
||
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
|
||
let detectionChart = echarts.getInstanceByDom(chartDom)
|
||
if (detectionChart) {
|
||
echarts.dispose(detectionChart)
|
||
}
|
||
detectionChart = echarts.init(chartDom)
|
||
this.chartInit.push(shallowRef(detectionChart))
|
||
const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
|
||
data.sort(reverseSortBy('count'))
|
||
data = data.slice(0, 5)
|
||
offenderIpOption.series[0].data = data.map(d => {
|
||
return [d.count, d.offenderIp]
|
||
}).reverse()
|
||
detectionChart.setOption(offenderIpOption)
|
||
|
||
const vm = this
|
||
detectionChart.off('click')
|
||
detectionChart.on('click', e => {
|
||
vm.filterData.securityEvent[4].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[4].value, e.data[1])
|
||
})
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
|
||
initVictimIpData (params) {
|
||
// getData(api.detection[this.pageType].victimIp, params).then(data => {
|
||
getData(api.detection[this.pageType].victimIpStatistics, params).then(data => {
|
||
this.filterData[this.pageType][3].data = data.map(r => ({ label: r.victimIp, value: r.victimIp, count: r.count }))
|
||
const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][3].data)
|
||
this.filterData[this.pageType][3].showMore = showMore
|
||
this.filterData[this.pageType][3].showIndex = showIndex
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
initVictimLocationData (params) {
|
||
getData(api.detection[this.pageType].victimLocation, params).then(data => {
|
||
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
|
||
this.filterData[this.pageType][3].showIndex = showIndex
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
initOffenderLocationData (params) {
|
||
getData(api.detection[this.pageType].offenderLocation, params).then(data => {
|
||
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
|
||
this.filterData[this.pageType][5].showIndex = showIndex
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
initActiveEntity (params) {
|
||
getData(api.detection[this.pageType].activeEntity, params).then(data => {
|
||
this.statisticsActiveAttackData = data
|
||
if (!this.$_.isEmpty(data)) {
|
||
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
|
||
let detectionChart = echarts.getInstanceByDom(chartDom)
|
||
if (detectionChart) {
|
||
echarts.dispose(detectionChart)
|
||
}
|
||
detectionChart = echarts.init(chartDom)
|
||
this.chartInit.push(shallowRef(detectionChart))
|
||
const option = this.$_.cloneDeep(activeAttackBar)
|
||
data.sort(reverseSortBy('count'))
|
||
data = data.slice(0, 5)
|
||
option.series[0].data = data.map(d => {
|
||
return [d.count, d.name, d.entityType]
|
||
}).reverse()
|
||
detectionChart.setOption(option)
|
||
extensionEchartY(detectionChart)// y轴标签过长时，鼠标悬浮，显示所有内容
|
||
|
||
const vm = this
|
||
detectionChart.off('click')
|
||
detectionChart.on('click', e => {
|
||
const entityType = e.data[2]
|
||
let column = ''
|
||
if (entityType) {
|
||
switch (entityType) {
|
||
case 'app': {
|
||
column = 'app_name'
|
||
break
|
||
}
|
||
case 'domain': {
|
||
column = 'domain'
|
||
break
|
||
}
|
||
case 'ip': {
|
||
column = 'server_ip'
|
||
break
|
||
}
|
||
default: {
|
||
break
|
||
}
|
||
}
|
||
if (column) {
|
||
// 点击的name和上次的name一致，则清空该项条件
|
||
if (vm.oldActiveEntitySearchValue === e.data[1]) {
|
||
vm.$refs.search.changeParams({ column: column, oldValue: [vm.oldActiveEntitySearchValue], newValue: [] })
|
||
vm.$nextTick(() => {
|
||
vm.oldActiveEntitySearchValue = ''
|
||
})
|
||
} else {
|
||
vm.$refs.search.changeParams({ column: column, oldValue: vm.oldActiveEntitySearchValue ? [vm.oldActiveEntitySearchValue] : [], newValue: [e.data[1]] })
|
||
vm.$nextTick(() => {
|
||
vm.oldActiveEntitySearchValue = e.data[1]
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
triggerFilterDataValue (array, value) {
|
||
const r = [...array]
|
||
const index = array.indexOf(value)
|
||
if (index > -1) {
|
||
r.splice(index, 1)
|
||
} else {
|
||
r.push(value)
|
||
}
|
||
return r
|
||
},
|
||
computeFilterPage (data) {
|
||
return {
|
||
showMore: data.length > 10,
|
||
showIndex: 9
|
||
}
|
||
},
|
||
queryList (q) {
|
||
const params = {
|
||
startTime: getSecond(this.timeFilter.startTime),
|
||
endTime: getSecond(this.timeFilter.endTime),
|
||
resource: q,
|
||
pageSize: this.pageObj.pageSize,
|
||
pageNo: this.pageObj.pageNo
|
||
}
|
||
axios.get(api.detection[this.pageType].securityList, { params }).then(response => {
|
||
if (response.status === 200) {
|
||
this.listData = response.data.data.result
|
||
} else {
|
||
this.listData = []
|
||
console.error(response.data.message)
|
||
this.$message.error(response.data.message)
|
||
}
|
||
})
|
||
// getData(api.detection[this.pageType].listCount, params).then(data => {
|
||
getData(api.detection[this.pageType].securityCount, params).then(data => {
|
||
this.pageObj.total = data
|
||
}).catch(error => {
|
||
console.log(error)
|
||
})
|
||
},
|
||
timeRefreshChange () {
|
||
this.initNoData()
|
||
if (!this.$refs.dateTimeRange.isCustom) {
|
||
const value = this.timeFilter.dateRangeValue
|
||
this.$refs.dateTimeRange.quickChange(value)
|
||
}
|
||
},
|
||
initNoData () {
|
||
this.isEventSeverityNoData = false
|
||
this.isStatisticsSeverityNoData = false
|
||
this.isStatisticsCategoryNoData = false
|
||
this.isStatisticsActiveAttackNoData = false
|
||
},
|
||
reload (s, e, v) {
|
||
this.initNoData()
|
||
this.dateTimeRangeChange(s, e, v)
|
||
},
|
||
// methods
|
||
dateTimeRangeChange (s, e, v) {
|
||
this.timeFilter = { startTime: s, endTime: e, dateRangeValue: v }
|
||
},
|
||
search (param) {
|
||
let q
|
||
let metaList
|
||
if (param) {
|
||
q = param.q
|
||
metaList = param.metaList
|
||
}
|
||
this.initNoData()
|
||
if (q) {
|
||
this.q = q
|
||
this.metaList = metaList
|
||
} else {
|
||
this.q = ''
|
||
this.metaList = []
|
||
}
|
||
if (this.pageObj.resetPageNo) {
|
||
this.pageObj.pageNo = 1
|
||
} else {
|
||
this.pageObj.resetPageNo = true
|
||
}
|
||
// 参数q，避免切换页码时，地址栏参数q为空
|
||
let urlQ = ''
|
||
if (param.str) {
|
||
urlQ = encodeURI(param.str)
|
||
} else if (this.q) {
|
||
urlQ = encodeURI(this.q)
|
||
}
|
||
this.queryFilter(urlQ)
|
||
this.queryList(urlQ)
|
||
},
|
||
resetFilterData () {
|
||
this.filterData.securityEvent.forEach(d => {
|
||
d.data = []
|
||
})
|
||
this.filterData.performanceEvent.forEach(d => {
|
||
d.data = []
|
||
})
|
||
},
|
||
queryFilter (q) {
|
||
this.resetFilterData()
|
||
const params = {
|
||
startTime: getSecond(this.timeFilter.startTime),
|
||
endTime: getSecond(this.timeFilter.endTime),
|
||
resource: q
|
||
}
|
||
this.listData = []
|
||
this.initStatusData(params)
|
||
this.initEventSeverityTrendData(params)
|
||
this.initEventSeverityData(params)
|
||
if (this.pageType === detectionPageType.securityEvent) {
|
||
this.initOffenderIpData(params)
|
||
// this.initOffenderLocationData(params)
|
||
this.initVictimIpData(params)
|
||
// this.initVictimLocationData(params)
|
||
this.initSecurityTypeData(params)
|
||
} else if (this.pageType === detectionPageType.performanceEvent) {
|
||
// this.initActiveEntity(params)
|
||
// this.initEventTypeData(params)
|
||
}
|
||
},
|
||
pageSize (val) {
|
||
this.pageObj.pageSize = val || 20
|
||
this.search(this.metaList, this.q)
|
||
},
|
||
pageNo (val) {
|
||
this.pageObj.pageNo = val || 1
|
||
this.pageObj.resetPageNo = false
|
||
// 初始化时，mounted和pageNo都会调用列表接口，且pageNo先执行，
|
||
// 初始化保证mounted执行，后续pageNo变动则不影响接口调用
|
||
if (!this.initFlag) {
|
||
this.search(this.metaList, this.q)
|
||
}
|
||
},
|
||
// 点击上一页箭头
|
||
prev () {
|
||
this.scrollbarToTop()
|
||
},
|
||
// 点击下一页箭头
|
||
next () {
|
||
this.scrollbarToTop()
|
||
},
|
||
// currentPage 改变时会触发
|
||
current (val) {
|
||
this.$emit('pageNo', val)
|
||
this.scrollbarToTop()
|
||
},
|
||
scrollbarToTop () {
|
||
this.$nextTick(() => {
|
||
const wraps = document.querySelector('#detectionList')
|
||
wraps.scrollTop = 0
|
||
})
|
||
},
|
||
resize () {
|
||
this.chartInit.forEach(e => { e.value.resize() })
|
||
},
|
||
jumpNewDetetion () {
|
||
this.$router.push({
|
||
path: '/detectionsNew',
|
||
query: {
|
||
t: +new Date()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
mounted () {
|
||
this.queryFilter()
|
||
this.initFlag = false
|
||
this.queryList()
|
||
this.debounceFunc = this.$_.debounce(this.resize, 300)
|
||
window.addEventListener('resize', this.debounceFunc)
|
||
},
|
||
watch: {
|
||
eventSeverityData: {
|
||
deep: true,
|
||
handler (n) {
|
||
if (!n || n.length === 0) {
|
||
this.timeout = setTimeout(() => {
|
||
this.isEventSeverityNoData = true
|
||
// this.$set(this.isEventSeverityNoData ,true)
|
||
this.loading = false
|
||
}, 500)
|
||
} else {
|
||
clearTimeout(this.timeout)
|
||
// this.$set(this.isEventSeverityNoData ,false)
|
||
this.isEventSeverityNoData = false
|
||
this.loading = false
|
||
}
|
||
}
|
||
},
|
||
statisticsSeverityData: {
|
||
deep: true,
|
||
handler (n) {
|
||
if (!n || n.length === 0) {
|
||
this.timeout = setTimeout(() => {
|
||
// this.$set(this.isStatisticsSeverityNoData ,true)
|
||
this.isStatisticsSeverityNoData = true
|
||
}, 500)
|
||
} else {
|
||
clearTimeout(this.timeout)
|
||
// this.$set(this.isStatisticsSeverityNoData ,false)
|
||
this.isStatisticsSeverityNoData = false
|
||
}
|
||
}
|
||
},
|
||
statisticsCategoryData: {
|
||
deep: true,
|
||
handler (n) {
|
||
if (!n || n.length === 0) {
|
||
this.timeout = setTimeout(() => {
|
||
this.isStatisticsCategoryNoData = true
|
||
// this.$set(this.isStatisticsCategoryNoData ,true)
|
||
}, 500)
|
||
} else {
|
||
clearTimeout(this.timeout)
|
||
// this.$set(this.isStatisticsCategoryNoData ,false)
|
||
this.isStatisticsCategoryNoData = false
|
||
}
|
||
}
|
||
},
|
||
statisticsActiveAttackData: {
|
||
deep: true,
|
||
handler (n) {
|
||
if (!n || n.length === 0) {
|
||
this.timeout = setTimeout(() => {
|
||
this.isStatisticsActiveAttackNoData = true
|
||
// this.$set(this.isStatisticsActiveAttackNoData ,true)
|
||
}, 500)
|
||
} else {
|
||
clearTimeout(this.timeout)
|
||
// this.$set(this.isStatisticsActiveAttackNoData ,false)
|
||
this.isStatisticsActiveAttackNoData = false
|
||
}
|
||
}
|
||
},
|
||
timeFilter () {
|
||
this.search(this.metaList, this.q)
|
||
},
|
||
'filterData.securityEvent.0.value': {
|
||
deep: true,
|
||
handler (n, o) {
|
||
this.$refs.search.changeParams({ column: this.filterData.securityEvent[0].column, oldValue: o, newValue: n })
|
||
}
|
||
},
|
||
'filterData.securityEvent.1.value': {
|
||
deep: true,
|
||
handler (n, o) {
|
||
this.$refs.search.changeParams({ column: this.filterData.securityEvent[1].column, oldValue: o, newValue: n })
|
||
}
|
||
},
|
||
'filterData.securityEvent.2.value': {
|
||
deep: true,
|
||
handler (n, o) {
|
||
this.$refs.search.changeParams({ column: this.filterData.securityEvent[2].column, oldValue: o, newValue: n })
|
||
}
|
||
},
|
||
'filterData.securityEvent.3.value': {
|
||
deep: true,
|
||
handler (n, o) {
|
||
this.$refs.search.changeParams({ column: this.filterData.securityEvent[3].column, oldValue: o, newValue: n })
|
||
}
|
||
},
|
||
'filterData.securityEvent.4.value': {
|
||
deep: true,
|
||
handler (n, o) {
|
||
this.$refs.search.changeParams({ column: this.filterData.securityEvent[4].column, oldValue: o, newValue: n })
|
||
}
|
||
},
|
||
'filterData.securityEvent.5.value': {
|
||
deep: true,
|
||
handler (n, o) {
|
||
this.$refs.search.changeParams({ column: this.filterData.securityEvent[5].column, oldValue: o, newValue: n })
|
||
}
|
||
},
|
||
'filterData.performanceEvent.0.value': {
|
||
deep: true,
|
||
handler (n, o) {
|
||
this.$refs.search.changeParams({ column: this.filterData.performanceEvent[0].column, oldValue: o, newValue: n })
|
||
}
|
||
},
|
||
'filterData.performanceEvent.1.value': {
|
||
deep: true,
|
||
handler (n, o) {
|
||
this.$refs.search.changeParams({ column: this.filterData.performanceEvent[1].column, oldValue: o, newValue: n })
|
||
}
|
||
}
|
||
},
|
||
beforeUnmount () {
|
||
window.removeEventListener('resize', this.debounceFunc)
|
||
},
|
||
setup () {
|
||
const { params } = useRoute()
|
||
const pageType = params.typeName
|
||
const dateRangeValue = 60
|
||
const { startTime, endTime } = getNowTime(dateRangeValue)
|
||
const timeFilter = ref({ startTime, endTime, dateRangeValue })
|
||
|
||
return {
|
||
timeFilter,
|
||
pageType
|
||
}
|
||
}
|
||
}
|
||
</script>
|