921 lines
33 KiB
Vue
921 lines
33 KiB
Vue
<template>
|
||
<div class="entity-explorer entity-explorer--show-list detections">
|
||
<!-- 顶部工具栏，在列表页显示 -->
|
||
<div class="explorer-top-tools explorer-detection-top-tools">
|
||
<div class="explorer-top-tools-title">{{$t('overall.detections')}}</div>
|
||
<div style="display: flex">
|
||
<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 class="detections__search">
|
||
<div class="detections__search__btns">
|
||
<div @click="clickEventFlag(detectionEventType.single)" :class="eventFlag===detectionEventType.single ? 'active__btn' : ''">
|
||
<i class="cn-icon cn-icon-danfenxi"></i>
|
||
</div>
|
||
<div @click="clickEventFlag(detectionEventType.aggregation)" :class="eventFlag===detectionEventType.aggregation ? 'active__btn' : ''">
|
||
<i class="cn-icon cn-icon-fuhe"></i>
|
||
</div>
|
||
</div>
|
||
<detection-search
|
||
style="width: calc(100% - 92px);"
|
||
ref="search"
|
||
:page-type="pageType"
|
||
@search="search"
|
||
></detection-search>
|
||
</div>
|
||
|
||
<!-- 内容区 -->
|
||
<div class="detections__container">
|
||
<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}`" :ref="`eventSeverityTrendBar${pageType}`">
|
||
</div>
|
||
</template>
|
||
<div style="display: flex; flex-grow: 1; height: 100%;">
|
||
<detection-filter
|
||
class="detection-border"
|
||
:filter-data="filterData"
|
||
:q="q"
|
||
:time-filter="timeFilter"
|
||
@filter="getFilter"
|
||
:event-flag="eventFlag"
|
||
></detection-filter>
|
||
|
||
<div class="detection__list">
|
||
<div class="detection__list-statistics detection-border">
|
||
<div class="statistics__category">
|
||
<div class="chart-header">
|
||
<div class="chart-header__title">{{$t('detection.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__severity">
|
||
<div class="chart-header">
|
||
<div class="chart-header__title">{{$t('detections.eventName')}}</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__active-attack">
|
||
<div class="chart-header">
|
||
<div class="chart-header__title">Key</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"
|
||
:event-flag="eventFlag"
|
||
:q="q"
|
||
@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, detectionEventType } from '@/utils/constants'
|
||
import { getNowTime, getSecond, getMillisecond, getNowDate } from '@/utils/date-util'
|
||
import { ref, shallowRef } from 'vue'
|
||
import * as echarts from 'echarts'
|
||
import {
|
||
activeAttackBar,
|
||
getAttackColor,
|
||
getSeverityColor,
|
||
barOption,
|
||
pieForSeverity
|
||
} from '@/views/detections/options/detectionOptions'
|
||
import { api } from '@/utils/api'
|
||
import axios from 'axios'
|
||
import { urlParamsHandler, overwriteUrl, reverseSortBy, changeI18nOfSeverity } from '@/utils/tools'
|
||
import { useRoute } from 'vue-router'
|
||
import Loading from '@/components/common/Loading'
|
||
import { useStore } from 'vuex'
|
||
import { format } from 'echarts'
|
||
import Parser from '@/components/advancedSearch/meta/parser'
|
||
import { schemaDetectionSecurity } from '@/utils/static-data'
|
||
|
||
export default {
|
||
name: 'Index',
|
||
components: {
|
||
Loading,
|
||
DetectionSearch,
|
||
DateTimeRange,
|
||
TimeRefresh,
|
||
DetectionFilter,
|
||
DetectionList,
|
||
Pagination
|
||
},
|
||
data () {
|
||
return {
|
||
tabsData: [
|
||
{
|
||
i18n: 'entities.securityEvents',
|
||
path: '/detection/securityEvent',
|
||
icon: 'cn-icon cn-icon-a-SecurityEvent'
|
||
}
|
||
],
|
||
chartInit: [],
|
||
q: '',
|
||
detectionPageType,
|
||
filterData: [
|
||
{
|
||
title: this.$t('detection.eventType'),
|
||
column: 'eventType',
|
||
topColumn: 'event_type',
|
||
collapse: false,
|
||
value: [],
|
||
showMore: true,
|
||
showDisabled: true,
|
||
show: true,
|
||
showIndex: 5, // index作为showMore分割，从1开始而非0
|
||
data: []
|
||
},
|
||
{
|
||
title: this.$t('detections.eventName'),
|
||
column: 'eventName',
|
||
topColumn: 'event_name',
|
||
collapse: false,
|
||
value: [],
|
||
showMore: false,
|
||
showDisabled: true,
|
||
show: true,
|
||
showIndex: 5,
|
||
data: []
|
||
},
|
||
{
|
||
title: 'Key',
|
||
column: 'keyFields',
|
||
topColumn: 'keyFields,keyValues',
|
||
collapse: false,
|
||
value: [],
|
||
showMore: true,
|
||
showDisabled: true,
|
||
showIndex: 5,
|
||
show: true,
|
||
data: [] // 从接口动态获取
|
||
},
|
||
{
|
||
title: this.$t('overall.status'),
|
||
column: 'status',
|
||
topColumn: 'status',
|
||
collapse: false,
|
||
value: [], // value之间是or的关系
|
||
showMore: false,
|
||
show: true,
|
||
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执行
|
||
detectionChart: shallowRef(null),
|
||
detectionEventType
|
||
}
|
||
},
|
||
methods: {
|
||
initStatusData (params) {
|
||
axios.get(api.detection.event.statusStatistics, { params }).then(res => {
|
||
if (res.status === 200) {
|
||
const data = res.data.data.result
|
||
if (data && data.length > 0) {
|
||
data.sort((a, b) => {
|
||
return Number(b.count) - Number(a.count)
|
||
})
|
||
}
|
||
this.filterData[3].data = data.map(r => {
|
||
let label = ''
|
||
if (r.status === '0' || r.status === 0) {
|
||
label = this.$t('detections.active')
|
||
} else if (r.status === '1' || r.status === 1) {
|
||
label = this.$t('detections.ended')
|
||
}
|
||
return { label, value: r.status, count: r.count }
|
||
})
|
||
this.isCheckFilterByQ(params, 3)
|
||
}
|
||
}).catch(e => {
|
||
console.error(e)
|
||
this.filterData[3].data = []
|
||
this.$message.error(this.errorMsgHandler(e))
|
||
})
|
||
},
|
||
/** 初始化顶部大柱状图 */
|
||
initTimeDistribution (params) {
|
||
this.loading = true
|
||
axios.get(api.detection.event.timeDistribution, { params }).then(res => {
|
||
const data = res.data.data.result
|
||
this.eventSeverityData = data
|
||
if (!this.$_.isEmpty(data)) {
|
||
/* 24.08 去掉了严重程度，只剩数量 */
|
||
// const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
|
||
const chartDom = this.$refs.eventSeverityTrendBarsecurityEvent
|
||
const eventSeverityTrendOption = this.$_.cloneDeep(barOption)
|
||
|
||
// 将时间转为毫秒，并分为100个间隔值，如有100条数据，则不分割，如48不满100，按52分割，保证有数据的时间点不受无数据时间点影响
|
||
const diffTime = ((params.endTime - params.startTime) * 1000) / (data.length > 100 ? 100 : (100 - data.length))
|
||
const timeList = []
|
||
for (let i = (params.startTime * 1000); i < (params.endTime * 1000);) {
|
||
i = i + diffTime
|
||
timeList.push([parseInt(i.toFixed(0)), 0])
|
||
}
|
||
let dataList = data.map(d => [getMillisecond(parseFloat(d.statTime)), d.count])
|
||
// 将100个时间间隔与柱状图数据合并并排序
|
||
dataList = dataList.concat(timeList)
|
||
dataList.sort((a, b) => a[0] - b[0])
|
||
dataList = dataList.filter((d, i) => {
|
||
if (i > 0 && i < dataList.length - 1) {
|
||
if (d[1] === 0) {
|
||
return false
|
||
}
|
||
}
|
||
return true
|
||
})
|
||
eventSeverityTrendOption.series[0].data = dataList
|
||
|
||
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(e => {
|
||
console.error(e)
|
||
this.$message.error(this.errorMsgHandler(e))
|
||
}).finally(() => {
|
||
this.$nextTick(() => {
|
||
this.loading = false
|
||
})
|
||
})
|
||
},
|
||
/** 初始化左侧事件严重等级和第一个小饼图 */
|
||
initEventNameData (params) {
|
||
axios.get(api.detection.event.nameStatistics, { params }).then(res => {
|
||
const data = res.data.data.result
|
||
if (data && data.length > 0) {
|
||
data.sort((a, b) => {
|
||
return Number(b.count) - Number(a.count)
|
||
})
|
||
}
|
||
this.statisticsSeverityData = data
|
||
if (!this.$_.isEmpty(data)) {
|
||
this.filterData[1].data = data.map(r => ({ label: changeI18nOfSeverity(r.eventName), value: r.eventName, count: r.count }))
|
||
this.isCheckFilterByQ(params, 1)
|
||
const { showMore, showIndex, showDisabled } = this.computeFilterPage(this.filterData[1].data)
|
||
this.filterData[1].showMore = showMore
|
||
this.filterData[1].showIndex = showIndex
|
||
this.filterData[1].showDisabled = showDisabled
|
||
const eventSeverityOption = this.$_.cloneDeep(pieForSeverity)
|
||
eventSeverityOption.series[0].data = data.map(d => {
|
||
return { value: d.count, name: changeI18nOfSeverity(d.eventName), itemStyle: { color: getSeverityColor(d.eventName) } }
|
||
})
|
||
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 => {
|
||
this.getFilter(e.data.name, vm.filterData[1].column)
|
||
vm.filterData[1].value = vm.triggerFilterDataValue(vm.filterData[1].value, e.data.name)
|
||
})
|
||
}
|
||
}).catch(e => {
|
||
console.error(e)
|
||
this.filterData[1].data = []
|
||
this.$message.error(this.errorMsgHandler(e))
|
||
})
|
||
},
|
||
/** 第二个饼图和左侧filter的eventType */
|
||
initEventTypeData (params) {
|
||
axios.get(api.detection.event.typeStatistics, { params }).then(res => {
|
||
const data = res.data.data.result
|
||
this.statisticsCategoryData = data
|
||
if (!this.$_.isEmpty(data)) {
|
||
this.filterData[0].data = data.map(r => ({
|
||
label: r.eventType,
|
||
value: r.eventType,
|
||
count: r.count
|
||
}))
|
||
this.isCheckFilterByQ(params, 0)
|
||
const { showMore, showIndex, showDisabled } = this.computeFilterPage(this.filterData[0].data)
|
||
this.filterData[0].showMore = showMore
|
||
this.filterData[0].showIndex = showIndex
|
||
this.filterData[0].showDisabled = showDisabled
|
||
const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
|
||
this.detectionChart = echarts.getInstanceByDom(chartDom)
|
||
if (this.detectionChart) {
|
||
echarts.dispose(this.detectionChart)
|
||
}
|
||
this.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) } }
|
||
})
|
||
if (chartDom) {
|
||
let oneColumnWidth = (chartDom.clientWidth * 0.56) - 30
|
||
if (data.length > 6) {
|
||
oneColumnWidth = (chartDom.clientWidth * 0.56) / 2 - 30
|
||
}
|
||
securityTypeOption.legend.formatter = function (name) {
|
||
return format.truncateText(name, oneColumnWidth, '12px')
|
||
}
|
||
}
|
||
this.detectionChart.setOption(securityTypeOption)
|
||
|
||
const vm = this
|
||
this.detectionChart.off('click')
|
||
this.detectionChart.on('click', e => {
|
||
this.getFilter(e.data.name, vm.filterData[0].column)
|
||
vm.filterData[0].value = vm.triggerFilterDataValue(vm.filterData[0].value, e.data.name)
|
||
})
|
||
}
|
||
}).catch(e => {
|
||
console.error(e)
|
||
this.filterData[0].data = []
|
||
this.filterData[0].showMore = false
|
||
this.filterData[0].showIndex = 5
|
||
this.filterData[0].showDisabled = true
|
||
this.$message.error(this.errorMsgHandler(e))
|
||
})
|
||
},
|
||
/** 横向柱状图和左侧filter的key */
|
||
initKeyData (params) {
|
||
axios.get(api.detection.event.keyStatistics, { params }).then(res => {
|
||
let data = res.data.data.result
|
||
this.statisticsActiveAttackData = data
|
||
if (!this.$_.isEmpty(data)) {
|
||
this.filterData[2].data = data.map(r => ({
|
||
label: `${r.keyFields},${r.keyValues}`,
|
||
value: r.keyFields,
|
||
count: r.count,
|
||
fields: r.keyFields,
|
||
values: r.keyValues,
|
||
unDisabled: true,
|
||
tooltip: ''
|
||
}))
|
||
this.filterData[2].data.forEach(item => {
|
||
const valueList = item.values.split(',')
|
||
const fieldList = item.fields.split(',')
|
||
let tooltip = ''
|
||
fieldList.forEach((ite, ind) => {
|
||
tooltip += `${ite}: ${valueList[ind]}<br>`
|
||
})
|
||
item.tooltip = tooltip
|
||
})
|
||
this.isCheckFilterByQ(params, 2)
|
||
const { showMore, showIndex, showDisabled } = this.computeFilterPage(this.filterData[2].data)
|
||
this.filterData[2].showMore = showMore
|
||
this.filterData[2].showIndex = showIndex
|
||
this.filterData[2].showDisabled = showDisabled
|
||
|
||
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.keyValues}`, d.keyValues, d.keyFields]
|
||
}).reverse()
|
||
detectionChart.setOption(offenderIpOption)
|
||
|
||
const vm = this
|
||
detectionChart.off('click')
|
||
detectionChart.on('click', e => {
|
||
if (e.data) {
|
||
vm.getFilter(`${e.data[3]},${e.data[2]}`, vm.filterData[2].column)
|
||
vm.filterData[2].value = vm.triggerFilterDataValue(vm.filterData[2].value, e.data[1])
|
||
}
|
||
})
|
||
}
|
||
}).catch(e => {
|
||
console.error(e)
|
||
this.filterData[2].data = []
|
||
this.filterData[2].showMore = false
|
||
this.filterData[2].showIndex = 5
|
||
this.filterData[2].showDisabled = true
|
||
this.$message.error(this.errorMsgHandler(e))
|
||
})
|
||
},
|
||
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 > 0,
|
||
showDisabled: data.length <= 5,
|
||
showIndex: 5
|
||
}
|
||
},
|
||
queryList (q) {
|
||
const params = {
|
||
startTime: getSecond(this.timeFilter.startTime),
|
||
endTime: getSecond(this.timeFilter.endTime),
|
||
resource: q,
|
||
pageSize: this.pageObj.pageSize,
|
||
pageNo: this.pageObj.pageNo,
|
||
isGroup: this.eventFlag === detectionEventType.single ? 0 : 1
|
||
}
|
||
axios.get(api.detection.event.list, { params }).then(response => {
|
||
if (response.status === 200) {
|
||
const data = response.data.data.result
|
||
if (data.length > 0) {
|
||
// data.forEach(item => {
|
||
// item.eventInfoObj = JSON.parse(item.eventInfo)
|
||
// item.startTime = parseFloat(item.startTime)
|
||
// })
|
||
this.listData = data
|
||
} else {
|
||
this.listData = []
|
||
}
|
||
} else {
|
||
this.listData = []
|
||
console.error(response.data.message)
|
||
this.$message.error(response.data.message)
|
||
}
|
||
})
|
||
delete params.pageSize
|
||
delete params.pageNo
|
||
axios.get(api.detection.event.count, { params }).then(res => {
|
||
this.pageObj.total = parseInt(this.$_.get(res, 'data.data.result', 0))
|
||
}).catch(error => {
|
||
console.error(error)
|
||
})
|
||
},
|
||
timeRefreshChange () {
|
||
// 不是自选时间
|
||
if (this.$refs.dateTimeRange) {
|
||
if (!this.$refs.dateTimeRange.isCustom) {
|
||
const value = this.timeFilter.dateRangeValue
|
||
this.$refs.dateTimeRange.quickChange(value)
|
||
} else {
|
||
this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
|
||
}
|
||
} else {
|
||
this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
|
||
}
|
||
},
|
||
initNoData () {
|
||
this.isEventSeverityNoData = false
|
||
this.isStatisticsSeverityNoData = false
|
||
this.isStatisticsCategoryNoData = false
|
||
this.isStatisticsActiveAttackNoData = false
|
||
},
|
||
reload (startTime, endTime, dateRangeValue) {
|
||
this.initNoData()
|
||
this.dateTimeRangeChange(startTime, endTime, dateRangeValue)
|
||
const { query } = this.$route
|
||
const newUrl = urlParamsHandler(window.location.href, query, {
|
||
startTime: this.timeFilter.startTime,
|
||
endTime: this.timeFilter.endTime,
|
||
range: dateRangeValue.value
|
||
})
|
||
overwriteUrl(newUrl)
|
||
},
|
||
// methods
|
||
dateTimeRangeChange (s, e, v) {
|
||
this.timeFilter = { startTime: s, endTime: e, dateRangeValue: v.value }
|
||
},
|
||
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.initFlag) {
|
||
this.pageObj.pageNo = 1
|
||
} else {
|
||
this.pageObj.resetPageNo = true
|
||
}
|
||
// 参数q，避免切换页码时，地址栏参数q为空
|
||
let urlQ = ''
|
||
if (param && param.str) {
|
||
urlQ = param.str.indexOf('%') > -1 ? encodeURI(param.str) : param.str
|
||
this.str = param.str
|
||
} else if (this.q) {
|
||
// urlQ = encodeURI(this.q)
|
||
urlQ = this.q.indexOf('%') > -1 ? encodeURI(this.q) : this.q
|
||
}
|
||
const mode = this.$route.query.mode || 'text'
|
||
const newUrl = urlParamsHandler(window.location.href, this.$route.query, {
|
||
startTime: this.timeFilter.startTime,
|
||
endTime: this.timeFilter.endTime,
|
||
range: this.timeFilter.dateRangeValue,
|
||
q: urlQ,
|
||
mode: mode
|
||
})
|
||
overwriteUrl(newUrl)
|
||
// 如果不是最新时间，则获取当前时间
|
||
if (!param.isNowDate) {
|
||
const myTimeFilter = getNowDate(this.$_.cloneDeep(this.timeFilter))
|
||
this.reload(myTimeFilter.startTime, myTimeFilter.endTime, myTimeFilter.dateRangeValue)
|
||
return true
|
||
}
|
||
this.queryFilter(this.q)
|
||
this.queryList(this.q)
|
||
},
|
||
resetFilterData () {
|
||
this.filterData.forEach(d => {
|
||
d.data = []
|
||
})
|
||
},
|
||
queryFilter (q) {
|
||
this.resetFilterData()
|
||
const params = {
|
||
startTime: getSecond(this.timeFilter.startTime),
|
||
endTime: getSecond(this.timeFilter.endTime),
|
||
resource: q
|
||
}
|
||
this.initTimeDistribution(params) // 顶部柱状图
|
||
this.initEventTypeData(params) // 左侧filter的eventType，右侧的第一个饼图
|
||
this.initEventNameData(params) // 左侧filter的eventName，右侧的第二个饼图
|
||
this.initKeyData(params) // 左侧filter的key，右侧的横向柱状图
|
||
if (this.eventFlag === detectionEventType.single) {
|
||
this.initStatusData(params) // 左侧filter的status，在聚合事件下不显示
|
||
}
|
||
},
|
||
pageSize (val) {
|
||
this.pageObj.pageSize = val || 20
|
||
this.search({ metaList: this.metaList, q: this.q })
|
||
},
|
||
pageNo (val) {
|
||
// 初始化时，mounted和pageNo都会调用列表接口，且pageNo先执行，
|
||
// 初始化保证mounted执行，后续pageNo变动则不影响接口调用
|
||
if (!this.initFlag) {
|
||
this.pageObj.pageNo = val || 1
|
||
this.pageObj.resetPageNo = false
|
||
this.search({ metaList: this.metaList, q: 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() })
|
||
|
||
const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
|
||
this.detectionChart = echarts.getInstanceByDom(chartDom)
|
||
if (this.detectionChart) {
|
||
const securityTypeOption = this.$_.cloneDeep(this.detectionChart.getOption())
|
||
echarts.dispose(this.detectionChart)
|
||
if (chartDom) {
|
||
this.detectionChart = echarts.init(chartDom)
|
||
let oneColumnWidth = (chartDom.clientWidth * 0.56) - 30
|
||
if (this.statisticsCategoryData.length > 6) {
|
||
oneColumnWidth = (chartDom.clientWidth * 0.56) / 2 - 30
|
||
}
|
||
securityTypeOption.legend[0].formatter = function (name) {
|
||
return format.truncateText(name, oneColumnWidth, '12px')
|
||
}
|
||
this.detectionChart.setOption(securityTypeOption)
|
||
}
|
||
}
|
||
},
|
||
jumpNewDetetion () {
|
||
this.$router.push({
|
||
path: '/detection/policy',
|
||
query: {
|
||
t: +new Date()
|
||
}
|
||
})
|
||
},
|
||
isCheckFilterByQ (params, index) {
|
||
if (params.resource) {
|
||
let obj
|
||
if (index === 0) {
|
||
obj = this.filterData[index].data.find(d => params.resource.indexOf(d.value) > -1 && params.resource.indexOf('status') > -1)
|
||
} else {
|
||
obj = this.filterData[index].data.find(d => params.resource.indexOf(d.value) > -1)
|
||
}
|
||
if (obj) {
|
||
this.filterData[index].value = [obj.value]
|
||
this.filterData[index].flag = true
|
||
} else {
|
||
this.filterData[index].value = []
|
||
this.filterData[index].flag = true
|
||
}
|
||
} else {
|
||
this.filterData[index].value = []
|
||
this.filterData[index].flag = true
|
||
}
|
||
},
|
||
getFilter (name, topColumn) {
|
||
if (topColumn === 'tag') {
|
||
const params = {
|
||
column: topColumn,
|
||
operator: 'has',
|
||
value: name
|
||
}
|
||
this.$refs.search.changeParams([params])
|
||
} else if (topColumn === 'keyFields') {
|
||
// 多个keyFields和keyValues不作拆分，逗号分隔的多个keyFields组合为一个字符串，算一个整体搜索
|
||
const dataList = JSON.parse(JSON.stringify(this.filterData[2].data))
|
||
const obj = dataList.find(d => d.label === name)
|
||
if (obj) {
|
||
const columnList = this.filterData[2].topColumn.split(',')
|
||
if (obj.fields) {
|
||
const params = {
|
||
column: columnList[0],
|
||
operator: '=',
|
||
value: obj.fields
|
||
}
|
||
this.$refs.search.changeParams([params])
|
||
}
|
||
if (obj.values) {
|
||
const params = {
|
||
column: columnList[1],
|
||
operator: '=',
|
||
value: obj.values
|
||
}
|
||
this.$refs.search.changeParams([params])
|
||
}
|
||
}
|
||
} else {
|
||
const params = {
|
||
column: topColumn,
|
||
operator: '=',
|
||
value: name
|
||
}
|
||
this.$refs.search.changeParams([params])
|
||
}
|
||
this.$nextTick(() => {
|
||
this.emitter.emit('advanced-search')
|
||
})
|
||
},
|
||
clickEventFlag (e) {
|
||
this.eventFlag = e
|
||
const { query } = this.$route
|
||
const newUrl = urlParamsHandler(window.location.href, query, {
|
||
eventFlag: e
|
||
})
|
||
overwriteUrl(newUrl)
|
||
this.filterData[3].show = e === detectionEventType.single
|
||
this.queryFilter(this.q)
|
||
this.queryList(this.q)
|
||
}
|
||
},
|
||
mounted () {
|
||
let { q } = this.$route.query
|
||
|
||
// 如果地址栏有listMode，即列表页，并非首页，则开始搜索
|
||
if (q) {
|
||
// %位置为0是输入中文时能解码，%20，25%分别是空格和%的情况
|
||
if (q && (q.indexOf('%') === 0 || q.indexOf('%20') > -1 || q.indexOf('%25') > -1)) {
|
||
q = decodeURI(q)
|
||
}
|
||
// %位置不为0，即内容包含非英文时
|
||
const str1 = q.substring(q.indexOf('%'), q.indexOf('%') + 3)
|
||
if (q && q.indexOf('%') > 0 && (str1 === '%20' || str1 === '%25')) {
|
||
q = decodeURI(q)
|
||
}
|
||
}
|
||
const parser = new Parser(schemaDetectionSecurity)
|
||
q = parser.conversionEnum(q)
|
||
this.q = q
|
||
this.queryFilter(q)
|
||
if (this.initFlag) {
|
||
this.timer = setTimeout(() => {
|
||
this.initFlag = false
|
||
}, 1000)
|
||
}
|
||
this.queryList(q)
|
||
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({ metaList: this.metaList, q: this.q, isNowDate: true })
|
||
}
|
||
},
|
||
beforeUnmount () {
|
||
window.removeEventListener('resize', this.debounceFunc)
|
||
},
|
||
setup () {
|
||
const store = useStore()
|
||
let { query, path } = useRoute()
|
||
// 获取路由跳转过的历史状态，赋值给当前界面，起到保留状态的作用，如浏览器的回退前进等
|
||
const routerObj = store.getters.getRouterHistoryList.find(item => item.t === query.t)
|
||
if (routerObj) {
|
||
query = routerObj.query
|
||
path = routerObj.path
|
||
|
||
// 如果当前界面之前载入过，获取状态后更新地址栏，以便后续的赋值操作
|
||
const newUrl = urlParamsHandler(window.location.href, useRoute().query, query)
|
||
overwriteUrl(newUrl)
|
||
}
|
||
const pageType = path.replace('/detection/', '')
|
||
const eventFlag = ref(query.eventFlag || detectionEventType.single)
|
||
// 获取url携带的range、startTime、endTime
|
||
const rangeParam = query.range
|
||
const startTimeParam = query.startTime
|
||
const endTimeParam = query.endTime
|
||
// 优先级：url > config.js > 默认值。
|
||
const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.detection || 60)
|
||
const timeFilter = ref({ dateRangeValue })
|
||
if (!startTimeParam || !endTimeParam) {
|
||
const { startTime, endTime } = getNowTime(dateRangeValue)
|
||
timeFilter.value.startTime = getSecond(startTime)
|
||
timeFilter.value.endTime = getSecond(endTime)
|
||
// 如果没有时间参数，就将参数写入url
|
||
const newUrl = urlParamsHandler(window.location.href, useRoute().query, { startTime: timeFilter.value.startTime, endTime: timeFilter.value.endTime, range: dateRangeValue })
|
||
overwriteUrl(newUrl)
|
||
} else {
|
||
timeFilter.value.startTime = parseInt(startTimeParam)
|
||
timeFilter.value.endTime = parseInt(endTimeParam)
|
||
}
|
||
const pageObj = ref({
|
||
pageNo: query.pageNo ? parseInt(query.pageNo) : 1,
|
||
// 是否重置pageNo，在执行新搜索时是true
|
||
resetPageNo: true,
|
||
pageSize: query.pageSize ? parseInt(query.pageSize) : defaultPageSize,
|
||
total: 0
|
||
})
|
||
return {
|
||
timeFilter,
|
||
pageType,
|
||
pageObj,
|
||
eventFlag
|
||
}
|
||
}
|
||
}
|
||
</script>
|