perf: 列表和左侧筛选整理
This commit is contained in:
chenjinsong
@@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
.cn-detection__collapse {
|
||||
margin-bottom: 1px;
|
||||
padding-top: 30px;
|
||||
padding-top: 18px;
|
||||
width: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -14,7 +14,6 @@ import '@/assets/css/main.scss' // 样式入口
|
||||
import VueGridLayout from 'vue-grid-layout'
|
||||
import ElementPlus from 'element-plus'
|
||||
import bus from 'tiny-emitter'
|
||||
const emitter = new bus()
|
||||
import dayjs from 'dayjs'
|
||||
import utc from 'dayjs/plugin/utc' // dependent on utc plugin
|
||||
import timezone from 'dayjs/plugin/timezone'
|
||||
@@ -24,14 +23,15 @@ import weekday from 'dayjs/plugin/weekday'
|
||||
import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
|
||||
import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
|
||||
import PanelChartList from '@/views/charts/PanelChartList'
|
||||
const emitter = new bus()
|
||||
|
||||
const _ = require('lodash') // lodash工具
|
||||
|
||||
/*dayjs.extend(utc)
|
||||
/* dayjs.extend(utc)
|
||||
dayjs.extend(timezone)
|
||||
dayjs.extend(advancedFormat)
|
||||
dayjs.extend(weekday)
|
||||
window.$dayJs = dayjs*/
|
||||
window.$dayJs = dayjs */
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { hasButton } from '@/permission'
|
||||
import {getMillisecond} from "@/utils/date-util";
|
||||
import { getMillisecond } from '@/utils/date-util'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
@@ -74,14 +74,14 @@ export const api = {
|
||||
entityIpRelatedServerDomain: '/interface/entity/detail/overview/ip/relatedDomain',
|
||||
entityIpRelatedServerApp: '/interface/entity/detail/overview/ip/relatedApp',
|
||||
// detection
|
||||
detectionEventSeverity: '/interface/detection/filter/severity',
|
||||
detectionSeverityTrend: '/interface/detection/filter/severityTrend',
|
||||
detectionAttackType: '/interface/detection/filter/attackType',
|
||||
detectionOffenderIp: '/interface/detection/filter/offenderIp',
|
||||
detectionOffenderLocation: '/interface/detection/filter/offenderLocation',
|
||||
detectionVictimIp: '/interface/detection/filter/victimIp',
|
||||
detectionVictimLocation: '/interface/detection/filter/victimLocation',
|
||||
detectionSeverity:'/interface/detection/filter/severity',
|
||||
detectionListBasic:'/interface/detection/list/basic'
|
||||
detectionSeverity: '/interface/detection/filter/severity',
|
||||
detectionListBasic: '/interface/detection/list/basic'
|
||||
}
|
||||
|
||||
/* panel */
|
||||
@@ -157,7 +157,7 @@ export async function getPermission () {
|
||||
}
|
||||
|
||||
export async function getI18n () {
|
||||
const dictData = await getDictList( { type: 'lang'})
|
||||
const dictData = await getDictList({ type: 'lang' })
|
||||
const langs = dictData.map(d => d.value).join(',')
|
||||
localStorage.setItem(storageKey.languages, langs)
|
||||
const request = new Promise(resolve => {
|
||||
|
||||
@@ -190,7 +190,8 @@ export default {
|
||||
}
|
||||
const requestUrl = url || (chartParams && chartParams.url)
|
||||
if (requestUrl) {
|
||||
get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {1
|
||||
get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
|
||||
1
|
||||
// if (this.chartInfo.type === 23 && testData) {
|
||||
// response = testData.data
|
||||
// } else if (this.chartInfo.type === 24 && testData) {
|
||||
|
||||
@@ -49,10 +49,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {unitTypes} from '@/utils/constants'
|
||||
import { unitTypes } from '@/utils/constants'
|
||||
import unitConvert from '@/utils/unit-convert'
|
||||
export default {
|
||||
name: "ChartActiveIpTable",
|
||||
name: 'ChartActiveIpTable',
|
||||
props: {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
@@ -92,7 +92,7 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChartAppBasicInfo",
|
||||
name: 'ChartAppBasicInfo',
|
||||
props: {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
@@ -67,7 +67,7 @@ export default {
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChartCryptocurrencyEventList",
|
||||
name: 'ChartCryptocurrencyEventList',
|
||||
props: {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
@@ -33,12 +33,12 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
chartDate: [
|
||||
{message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
|
||||
{message: 'Traffic ', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
|
||||
{message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
|
||||
{message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
|
||||
{message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'},
|
||||
{message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25'}
|
||||
{ message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
|
||||
{ message: 'Traffic ', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
|
||||
{ message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
|
||||
{ message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
|
||||
{ message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' },
|
||||
{ message: 'Traffic', serverIP: '1.3.2.2', clientIP: '1.3.2.2', time: '2022-01-19 20:06:25' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChartDomainDnsRecord",
|
||||
name: 'ChartDomainDnsRecord',
|
||||
props: {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
@@ -32,9 +32,9 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
chartDate: [
|
||||
{type: '1', value: '2', country: 'z'},
|
||||
{type: '1', value: '2', country: 'm'},
|
||||
{type: '1', value: '2', country: 'h'}
|
||||
{ type: '1', value: '2', country: 'z' },
|
||||
{ type: '1', value: '2', country: 'm' },
|
||||
{ type: '1', value: '2', country: 'h' }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChartDomainWhois",
|
||||
name: 'ChartDomainWhois',
|
||||
props: {
|
||||
chartInfo: Object,
|
||||
chartData: [Array, Object],
|
||||
|
||||
@@ -11,72 +11,72 @@ import chartEchartMixin from './chart-echart-mixin'
|
||||
import { getOption, isEchartsPie } from './tools'
|
||||
import { legendMapping } from '@/views/charts/charts/chart-table-title'
|
||||
|
||||
export default {
|
||||
name: 'ChartEchart',
|
||||
mixins: [chartEchartMixin],
|
||||
data () {
|
||||
return {
|
||||
export default {
|
||||
name: 'ChartEchart',
|
||||
mixins: [chartEchartMixin],
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: {
|
||||
resultType: Object
|
||||
},
|
||||
setup (props) {
|
||||
return {
|
||||
isEchartsPie: isEchartsPie(props.chartInfo.type)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initEcharts (id) {
|
||||
this.initDom(id)
|
||||
const chartParams = this.chartInfo.params
|
||||
if (chartParams.showLegend === false) {
|
||||
this.chartOption.legend.show = false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
resultType: Object
|
||||
},
|
||||
setup (props) {
|
||||
return {
|
||||
isEchartsPie: isEchartsPie(props.chartInfo.type)
|
||||
this.handleYaxis()
|
||||
|
||||
if (this.isEchartsPie) {
|
||||
this.chartOption.series[0].data = this.chartData.map(d => {
|
||||
return {
|
||||
name: lineToSpace(d.name),
|
||||
data: d,
|
||||
value: parseInt(d.num),
|
||||
unitType: chartParams.unitType ? chartParams.unitType : 'number'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const seriesTemplate = this.chartOption.series[0]
|
||||
this.chartOption.series = this.chartData.map(r => {
|
||||
return {
|
||||
...seriesTemplate,
|
||||
name: legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] ? legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] : lineToSpace(r.legend),
|
||||
data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType])
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initEcharts (id) {
|
||||
this.initDom(id)
|
||||
const chartParams = this.chartInfo.params
|
||||
if (chartParams.showLegend === false) {
|
||||
this.chartOption.legend.show = false
|
||||
|
||||
const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
|
||||
const gridTop = 10 + 27 * rows
|
||||
|
||||
const gridTemplate = this.chartOption.grid
|
||||
if (chartParams.unitType === unitTypes.byte) {
|
||||
this.chartOption.yAxis.axisLabel.formatter = function (value, index, a, b) {
|
||||
return unitConvert(value, unitTypes.byte).join(' ')
|
||||
}
|
||||
this.handleYaxis()
|
||||
|
||||
if (this.isEchartsPie) {
|
||||
this.chartOption.series[0].data = this.chartData.map(d => {
|
||||
return {
|
||||
name: lineToSpace(d.name),
|
||||
data: d,
|
||||
value: parseInt(d.num),
|
||||
unitType: chartParams.unitType ? chartParams.unitType : 'number'
|
||||
}
|
||||
})
|
||||
} else {
|
||||
const seriesTemplate = this.chartOption.series[0]
|
||||
this.chartOption.series = this.chartData.map(r => {
|
||||
return {
|
||||
...seriesTemplate,
|
||||
name: legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] ? legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] : lineToSpace(r.legend),
|
||||
data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType])
|
||||
}
|
||||
})
|
||||
this.chartOption.grid = {
|
||||
...gridTemplate,
|
||||
top: gridTop,
|
||||
left: 75
|
||||
}
|
||||
|
||||
const rows = (this.chartData.length - 1) / 4 + 1 // 根据legend个数动态预留legend空间
|
||||
const gridTop = 10 + 27 * rows
|
||||
|
||||
const gridTemplate = this.chartOption.grid
|
||||
if (chartParams.unitType === unitTypes.byte) {
|
||||
this.chartOption.yAxis.axisLabel.formatter = function (value, index, a, b) {
|
||||
return unitConvert(value, unitTypes.byte).join(' ')
|
||||
}
|
||||
this.chartOption.grid = {
|
||||
...gridTemplate,
|
||||
top: gridTop,
|
||||
left: 75
|
||||
}
|
||||
} else {
|
||||
this.chartOption.grid = {
|
||||
...gridTemplate,
|
||||
top: gridTop
|
||||
}
|
||||
} else {
|
||||
this.chartOption.grid = {
|
||||
...gridTemplate,
|
||||
top: gridTop
|
||||
}
|
||||
|
||||
this.loadEchart()
|
||||
}
|
||||
|
||||
this.loadEchart()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -67,10 +67,9 @@ export default {
|
||||
},
|
||||
getTargetPageData (pageNum, pageSize, tableData) {
|
||||
return this.$_.slice(tableData, (pageNum - 1) * pageSize, pageNum * pageSize)
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
mounted () {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -46,9 +46,9 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/*filterChange (value, filter) {
|
||||
/* filterChange (value, filter) {
|
||||
this.$emit('filter', filter.column)
|
||||
},*/
|
||||
}, */
|
||||
showMore (filter) {
|
||||
filter.showIndex && (filter.showIndex += 10)
|
||||
filter.showIndex >= filter.data.length && (filter.showMore = false)
|
||||
|
||||
@@ -25,22 +25,22 @@
|
||||
|
||||
<div class="detection__list">
|
||||
<div class="detection__list-statistics">
|
||||
<div class="statistics__severity" >
|
||||
<div class="chart-header" >
|
||||
<div class="statistics__severity">
|
||||
<div class="chart-header">
|
||||
<div class="chart-header__title">{{$t('detection.severity')}}</div>
|
||||
</div>
|
||||
<div class="chart-content" id="detectionSeverityPer">
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics__category" >
|
||||
<div class="chart-header" >
|
||||
<div class="statistics__category">
|
||||
<div class="chart-header">
|
||||
<div class="chart-header__title">{{$t('detection.categoryProportion')}}</div>
|
||||
</div>
|
||||
<div class="chart-content" id="detectionCategoryPer">
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics__active-attack" >
|
||||
<div class="chart-header" >
|
||||
<div class="statistics__active-attack">
|
||||
<div class="chart-header">
|
||||
<div class="chart-header__title">{{$t('detection.activeAttacker')}}</div>
|
||||
</div>
|
||||
<div class="chart-content" style="" id="detectionActiveAttacker">
|
||||
@@ -57,7 +57,7 @@
|
||||
></detection-list>
|
||||
</div>
|
||||
</div>
|
||||
<div class="entity__pagination" >
|
||||
<div class="entity__pagination">
|
||||
<Pagination
|
||||
ref="pagination"
|
||||
:page-obj="pageObj"
|
||||
@@ -81,10 +81,10 @@ import DetectionFilter from '@/views/detections/DetectionFilter'
|
||||
import DetectionList from '@/views/detections/DetectionList'
|
||||
import Pagination from '@/components/common/Pagination'
|
||||
import { defaultPageSize } from '@/utils/constants'
|
||||
import {getNowTime, getSecond} from '@/utils/date-util'
|
||||
import { getNowTime, getSecond } from '@/utils/date-util'
|
||||
import { ref } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
import { multipleBarOption,pieForSeverity,activeAttackBar,getAttackColor,getSeverityColor } from '@/views/detections/options/detectionOptions'
|
||||
import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor } from '@/views/detections/options/detectionOptions'
|
||||
import ChartEchart from '@/views/charts/charts/ChartEchart'
|
||||
import { api } from '@/utils/api'
|
||||
import { get } from '@/utils/http'
|
||||
@@ -114,46 +114,14 @@ export default {
|
||||
column: 'eventSeverity',
|
||||
collapse: false,
|
||||
value: [], // value之间是or的关系
|
||||
data: [
|
||||
{
|
||||
label: 'Critical',
|
||||
value: 'critical',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: 'High',
|
||||
value: 'high',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: 'Medium',
|
||||
value: 'medium',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: 'Low',
|
||||
value: 'low',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: 'Info',
|
||||
value: 'info',
|
||||
count: 50
|
||||
}
|
||||
] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
|
||||
data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.securityType'),
|
||||
column: 'securityType',
|
||||
collapse: false,
|
||||
value: [],
|
||||
data: [
|
||||
{
|
||||
label: 'Command and control',
|
||||
value: 'command and control',
|
||||
count: 50
|
||||
}
|
||||
] // 从接口动态获取
|
||||
data: [] // 从接口动态获取
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.victimIp'),
|
||||
@@ -162,117 +130,11 @@ export default {
|
||||
value: [],
|
||||
showMore: true,
|
||||
showIndex: 9,
|
||||
data: [
|
||||
{
|
||||
label: '1.2.6.8',
|
||||
value: '1.2.6.8',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.9',
|
||||
value: '1.2.6.9',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.0',
|
||||
value: '1.2.6.0',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.1',
|
||||
value: '1.2.6.1',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.2',
|
||||
value: '1.2.6.2',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.3',
|
||||
value: '1.2.6.3',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.4',
|
||||
value: '1.2.6.4',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.5',
|
||||
value: '1.2.6.5',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.6',
|
||||
value: '1.2.6.6',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.7',
|
||||
value: '1.2.6.7',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.7.8',
|
||||
value: '1.2.7.8',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.8.8',
|
||||
value: '1.2.8.8',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.9.8',
|
||||
value: '1.2.9.8',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.18',
|
||||
value: '1.2.6.18',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.28',
|
||||
value: '1.2.6.28',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.38',
|
||||
value: '1.2.6.38',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.48',
|
||||
value: '1.2.6.48',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.58',
|
||||
value: '1.2.6.58',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.68',
|
||||
value: '1.2.6.68',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.78',
|
||||
value: '1.2.6.78',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
label: '1.2.6.88',
|
||||
value: '1.2.6.88',
|
||||
count: 50
|
||||
}
|
||||
] // 从接口动态获取
|
||||
data: [] // 从接口动态获取
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.victimLocation'),
|
||||
column: 'victimLocation',
|
||||
column: 'victimLocationCountry',
|
||||
collapse: false,
|
||||
value: [],
|
||||
showMore: false,
|
||||
@@ -302,7 +164,7 @@ export default {
|
||||
},
|
||||
{
|
||||
title: this.$t('detections.offenderLocation'),
|
||||
column: 'offenderLocation',
|
||||
column: 'offenderLocationCountry',
|
||||
collapse: false,
|
||||
value: [],
|
||||
showMore: false,
|
||||
@@ -319,19 +181,19 @@ export default {
|
||||
listData: [],
|
||||
listLoading: false,
|
||||
eventSeverityOption: null,
|
||||
eventSeverityData:[],
|
||||
eventSeverityData: [],
|
||||
severityPerOption: null,
|
||||
severityPerData:[],
|
||||
severityPerData: [],
|
||||
categoryPerOption: null,
|
||||
categoryPerData:[],
|
||||
categoryPerData: [],
|
||||
activeAttackOption: null,
|
||||
activeAttackData:[],
|
||||
activeAttackData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initEventSeverityData(){
|
||||
const chartDom = document.getElementById('detectionEventSeverityBar');
|
||||
const detectionChart = echarts.init(chartDom);
|
||||
initEventSeverityTrendData () {
|
||||
const chartDom = document.getElementById('detectionEventSeverityBar')
|
||||
const detectionChart = echarts.init(chartDom)
|
||||
this.eventSeverityOption = this.$_.cloneDeep(multipleBarOption)
|
||||
|
||||
const queryParams = {
|
||||
@@ -339,53 +201,53 @@ export default {
|
||||
endTime: getSecond(this.timeFilter.endTime),
|
||||
q: this.q
|
||||
}
|
||||
get(api.detectionEventSeverity, queryParams).then(response => {
|
||||
get(api.detectionSeverityTrend, queryParams).then(response => {
|
||||
response = {
|
||||
"code": 200,
|
||||
"success": true,
|
||||
"msg": "OK",
|
||||
"data": {
|
||||
"resultType": "table",
|
||||
"result": [
|
||||
code: 200,
|
||||
success: true,
|
||||
msg: 'OK',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [
|
||||
{
|
||||
"eventSeverity": "Critical",
|
||||
"count": 1048
|
||||
},{
|
||||
"eventSeverity": "High",
|
||||
"count": 735
|
||||
},{
|
||||
"eventSeverity": "Medium",
|
||||
"count": 580
|
||||
},{
|
||||
"eventSeverity": "Low",
|
||||
"count": 484
|
||||
},{
|
||||
"eventSeverity": "Info",
|
||||
"count": 300
|
||||
eventSeverity: 'Critical',
|
||||
count: 1048
|
||||
}, {
|
||||
eventSeverity: 'High',
|
||||
count: 735
|
||||
}, {
|
||||
eventSeverity: 'Medium',
|
||||
count: 580
|
||||
}, {
|
||||
eventSeverity: 'Low',
|
||||
count: 484
|
||||
}, {
|
||||
eventSeverity: 'Info',
|
||||
count: 300
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
if (response.code === 200) {
|
||||
this.eventSeverityData = [
|
||||
['time', '2021/11/12 12:00', '2021/11/13 12:00', '2021/11/14 12:00', '2021/11/15 12:00','2021/11/16 12:00','2021/11/17 12:00','2021/11/18 12:00','2021/11/19 12:00','2021/11/20 12:00','2021/11/21 12:00'],
|
||||
['Critical', 5, 0, 2, 0,0,3,3,0,4,2],
|
||||
['High', 5, 7, 3,0, 0,3,3,20,2,2],
|
||||
['Medium', 10, 8, 20, 8,0,5,5,5,5,20],
|
||||
['Low', 18, 6, 5, 0,0,2,20,2,2,2],
|
||||
['Info', 16, 10, 4, 0,7,0,8,5,15,1]
|
||||
['time', '2021/11/12 12:00', '2021/11/13 12:00', '2021/11/14 12:00', '2021/11/15 12:00', '2021/11/16 12:00', '2021/11/17 12:00', '2021/11/18 12:00', '2021/11/19 12:00', '2021/11/20 12:00', '2021/11/21 12:00'],
|
||||
['Critical', 5, 0, 2, 0, 0, 3, 3, 0, 4, 2],
|
||||
['High', 5, 7, 3, 0, 0, 3, 3, 20, 2, 2],
|
||||
['Medium', 10, 8, 20, 8, 0, 5, 5, 5, 5, 20],
|
||||
['Low', 18, 6, 5, 0, 0, 2, 20, 2, 2, 2],
|
||||
['Info', 16, 10, 4, 0, 7, 0, 8, 5, 15, 1]
|
||||
]
|
||||
}
|
||||
}).finally(() => {
|
||||
this.$nextTick(() => {
|
||||
this.eventSeverityOption.dataset.source = this.eventSeverityData
|
||||
this.eventSeverityOption && detectionChart.setOption(this.eventSeverityOption);
|
||||
this.eventSeverityOption && detectionChart.setOption(this.eventSeverityOption)
|
||||
})
|
||||
})
|
||||
},
|
||||
initSeverityPerData(){
|
||||
const chartDom = document.getElementById('detectionSeverityPer');
|
||||
const detectionChart = echarts.init(chartDom);
|
||||
initSeverityPerData () {
|
||||
const chartDom = document.getElementById('detectionSeverityPer')
|
||||
const detectionChart = echarts.init(chartDom)
|
||||
this.severityPerOption = this.$_.cloneDeep(pieForSeverity)
|
||||
|
||||
const queryParams = {
|
||||
@@ -395,27 +257,27 @@ export default {
|
||||
}
|
||||
get(api.detectionEventSeverity, queryParams).then(response => {
|
||||
response = {
|
||||
"code": 200,
|
||||
"success": true,
|
||||
"msg": "OK",
|
||||
"data": {
|
||||
"resultType": "table",
|
||||
"result": [
|
||||
code: 200,
|
||||
success: true,
|
||||
msg: 'OK',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [
|
||||
{
|
||||
"eventSeverity": "Critical",
|
||||
"count": 1048
|
||||
},{
|
||||
"eventSeverity": "High",
|
||||
"count": 735
|
||||
},{
|
||||
"eventSeverity": "Medium",
|
||||
"count": 580
|
||||
},{
|
||||
"eventSeverity": "Low",
|
||||
"count": 484
|
||||
},{
|
||||
"eventSeverity": "Info",
|
||||
"count": 300
|
||||
eventSeverity: 'Critical',
|
||||
count: 1048
|
||||
}, {
|
||||
eventSeverity: 'High',
|
||||
count: 735
|
||||
}, {
|
||||
eventSeverity: 'Medium',
|
||||
count: 580
|
||||
}, {
|
||||
eventSeverity: 'Low',
|
||||
count: 484
|
||||
}, {
|
||||
eventSeverity: 'Info',
|
||||
count: 300
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -423,19 +285,19 @@ export default {
|
||||
if (response.code === 200) {
|
||||
this.filterData[0].data = response.data.result.map(r => ({ label: r.eventSeverity, value: r.eventSeverity, count: r.count }))
|
||||
this.severityPerData = response.data.result.map(d => {
|
||||
return { value: d.count, name: d.eventSeverity,itemStyle:{color:getSeverityColor(d.eventSeverity)}}
|
||||
return { value: d.count, name: d.eventSeverity, itemStyle: { color: getSeverityColor(d.eventSeverity) } }
|
||||
})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.$nextTick(() => {
|
||||
this.severityPerOption.series[0].data = this.severityPerData
|
||||
this.severityPerOption && detectionChart.setOption(this.severityPerOption);
|
||||
this.severityPerOption && detectionChart.setOption(this.severityPerOption)
|
||||
})
|
||||
})
|
||||
},
|
||||
initCategoryPerData(){
|
||||
const chartDom = document.getElementById('detectionCategoryPer');
|
||||
const detectionChart = echarts.init(chartDom);
|
||||
initCategoryPerData () {
|
||||
const chartDom = document.getElementById('detectionCategoryPer')
|
||||
const detectionChart = echarts.init(chartDom)
|
||||
this.categoryPerOption = this.$_.cloneDeep(pieForSeverity)
|
||||
|
||||
const queryParams = {
|
||||
@@ -445,50 +307,50 @@ export default {
|
||||
}
|
||||
get(api.detectionAttackType, queryParams).then(response => {
|
||||
response = {
|
||||
"code": 200,
|
||||
"success": true,
|
||||
"msg": "OK",
|
||||
"data": {
|
||||
"resultType": "table",
|
||||
"result": [
|
||||
code: 200,
|
||||
success: true,
|
||||
msg: 'OK',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [
|
||||
{
|
||||
"attackType": "Command and control",
|
||||
"count": 1048
|
||||
},{
|
||||
"attackType": "Payload_delivery",
|
||||
"count": 735
|
||||
},{
|
||||
"attackType": "Cryptomining",
|
||||
"count": 580
|
||||
},{
|
||||
"attackType": "phishing",
|
||||
"count": 484
|
||||
},{
|
||||
"attackType": "dga",
|
||||
"count": 300
|
||||
},{
|
||||
"attackType": "ddos",
|
||||
"count": 50
|
||||
},
|
||||
attackType: 'Command and control',
|
||||
count: 1048
|
||||
}, {
|
||||
attackType: 'Payload_delivery',
|
||||
count: 735
|
||||
}, {
|
||||
attackType: 'Cryptomining',
|
||||
count: 580
|
||||
}, {
|
||||
attackType: 'phishing',
|
||||
count: 484
|
||||
}, {
|
||||
attackType: 'dga',
|
||||
count: 300
|
||||
}, {
|
||||
attackType: 'ddos',
|
||||
count: 50
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
if (response.code === 200) {
|
||||
this.filterData[1].data = response.data.result.map(r => ({ label: r.attackType, value: r.attackType, count: r.count }))
|
||||
this.categoryPerData = response.data.result.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) } }
|
||||
})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.$nextTick(() => {
|
||||
this.categoryPerOption.series[0].data = this.categoryPerData
|
||||
this.categoryPerOption && detectionChart.setOption(this.categoryPerOption);
|
||||
this.categoryPerOption && detectionChart.setOption(this.categoryPerOption)
|
||||
})
|
||||
})
|
||||
|
||||
},
|
||||
initActiveAttackData(){
|
||||
const chartDom = document.getElementById('detectionActiveAttacker');
|
||||
const detectionChart = echarts.init(chartDom);
|
||||
initActiveAttackData () {
|
||||
const chartDom = document.getElementById('detectionActiveAttacker')
|
||||
const detectionChart = echarts.init(chartDom)
|
||||
this.activeAttackOption = this.$_.cloneDeep(activeAttackBar)
|
||||
|
||||
const queryParams = {
|
||||
@@ -498,41 +360,44 @@ export default {
|
||||
}
|
||||
get(api.detectionOffenderIp, queryParams).then(response => {
|
||||
response = {
|
||||
"code": 200,
|
||||
"success": true,
|
||||
"msg": "OK",
|
||||
"data": {
|
||||
"resultType": "table",
|
||||
"result": [
|
||||
code: 200,
|
||||
success: true,
|
||||
msg: 'OK',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [
|
||||
{
|
||||
"offenderIp": "192.168.12.21",
|
||||
"count": 99999
|
||||
},{
|
||||
"offenderIp": "192.168.22.21",
|
||||
"count": 88888
|
||||
},{
|
||||
"offenderIp": "192.168.32.21",
|
||||
"count": 77777
|
||||
},{
|
||||
"offenderIp": "192.168.42.21",
|
||||
"count": 66666
|
||||
},{
|
||||
"offenderIp": "192.168.52.21",
|
||||
"count": 55555
|
||||
offenderIp: '192.168.12.21',
|
||||
count: 99999
|
||||
}, {
|
||||
offenderIp: '192.168.22.21',
|
||||
count: 88888
|
||||
}, {
|
||||
offenderIp: '192.168.32.21',
|
||||
count: 77777
|
||||
}, {
|
||||
offenderIp: '192.168.42.21',
|
||||
count: 66666
|
||||
}, {
|
||||
offenderIp: '192.168.52.21',
|
||||
count: 55555
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
if (response.code === 200) {
|
||||
this.filterData[4].data = response.data.result.map(r => ({ label: r.offenderIp, value: r.offenderIp, count: r.count }))
|
||||
const { showMore, showIndex } = this.computeFilterPage(this.filterData[4].data)
|
||||
this.filterData[4].showMore = showMore
|
||||
this.filterData[4].showIndex = showIndex
|
||||
this.activeAttackData = response.data.result.map(d => {
|
||||
return [d.count,d.offenderIp]
|
||||
return [d.count, d.offenderIp]
|
||||
})
|
||||
}
|
||||
}).finally(() => {
|
||||
this.$nextTick(() => {
|
||||
this.activeAttackOption.series[0].data = this.activeAttackData.reverse()
|
||||
this.activeAttackOption && detectionChart.setOption(this.activeAttackOption);
|
||||
this.activeAttackOption && detectionChart.setOption(this.activeAttackOption)
|
||||
})
|
||||
})
|
||||
},
|
||||
@@ -543,8 +408,105 @@ export default {
|
||||
q: this.q
|
||||
}
|
||||
get(api.detectionVictimIp, queryParams).then(response => {
|
||||
response = {
|
||||
code: 200,
|
||||
success: true,
|
||||
msg: 'OK',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [
|
||||
{
|
||||
victimIp: '1.2.6.8',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.9',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.0',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.1',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.2',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.3',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.4',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.5',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.6',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.7',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.7.8',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.8.8',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.9.8',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.18',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.28',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.38',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.48',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.58',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.68',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.78',
|
||||
count: 50
|
||||
},
|
||||
{
|
||||
victimIp: '1.2.6.88',
|
||||
count: 50
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
if (response.data && response.data.result) {
|
||||
this.filterData[2].data = response.data.result.map(r => ({ label: r.victimIp, value: r.victimIp, count: r.count }))
|
||||
const { showMore, showIndex } = this.computeFilterPage(this.filterData[2].data)
|
||||
this.filterData[2].showMore = showMore
|
||||
this.filterData[2].showIndex = showIndex
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -555,8 +517,25 @@ export default {
|
||||
q: this.q
|
||||
}
|
||||
get(api.detectionVictimLocation, queryParams).then(response => {
|
||||
response = {
|
||||
code: 200,
|
||||
success: true,
|
||||
msg: 'OK',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [
|
||||
{
|
||||
victimLocationCountry: 'china',
|
||||
count: 50
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
if (response.data && response.data.result) {
|
||||
this.filterData[3].data = response.data.result.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count }))
|
||||
const { showMore, showIndex } = this.computeFilterPage(this.filterData[3].data)
|
||||
this.filterData[3].showMore = showMore
|
||||
this.filterData[3].showIndex = showIndex
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -567,71 +546,204 @@ export default {
|
||||
q: this.q
|
||||
}
|
||||
get(api.detectionOffenderLocation, queryParams).then(response => {
|
||||
response = {
|
||||
code: 200,
|
||||
success: true,
|
||||
msg: 'OK',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [
|
||||
{
|
||||
offenderLocationCountry: 'china',
|
||||
count: 50
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
if (response.data && response.data.result) {
|
||||
this.filterData[5].data = response.data.result.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count }))
|
||||
this.filterData[5].data = response.data.result.map(r => ({ label: r.offenderLocationCountry, value: r.offenderLocationCountry, count: r.count }))
|
||||
const { showMore, showIndex } = this.computeFilterPage(this.filterData[5].data)
|
||||
this.filterData[5].showMore = showMore
|
||||
this.filterData[5].showIndex = showIndex
|
||||
}
|
||||
})
|
||||
},
|
||||
initListData(){
|
||||
computeFilterPage (data) {
|
||||
return {
|
||||
showMore: data.length > 10,
|
||||
showIndex: 9
|
||||
}
|
||||
},
|
||||
queryList () {
|
||||
const queryParams = {
|
||||
...this.timeFilter,
|
||||
q:this.q,
|
||||
q: this.q
|
||||
}
|
||||
get(api.detectionListBasic, queryParams).then(response => {
|
||||
response = {
|
||||
"code": 200,
|
||||
"success": true,
|
||||
"msg": "OK",
|
||||
"data": {
|
||||
"resultType": "table",
|
||||
"result": [
|
||||
code: 200,
|
||||
success: true,
|
||||
msg: 'OK',
|
||||
data: {
|
||||
resultType: 'table',
|
||||
result: [
|
||||
{
|
||||
"eventId": 1212,
|
||||
"securityType": "ddos",
|
||||
"offenderIp": "1.1.1.1",
|
||||
"victimIp": "2.2.2.2",
|
||||
"eventSecurity": "critical",
|
||||
"malwareName": "the great wall",
|
||||
"cryptominingPool": "a",
|
||||
"startTime": 978456923589
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'critical',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 978456923589
|
||||
},
|
||||
{
|
||||
"eventId": 1212,
|
||||
"securityType": "ddos",
|
||||
"offenderIp": "1.1.1.1",
|
||||
"victimIp": "2.2.2.2",
|
||||
"eventSecurity": "high",
|
||||
"cryptominingPool": "a",
|
||||
"startTime": 1111111111
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'high',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
"eventId": 1212,
|
||||
"securityType": "ddos",
|
||||
"offenderIp": "1.1.1.1",
|
||||
"victimIp": "2.2.2.2",
|
||||
"eventSecurity": "low",
|
||||
"malwareName": "the great wall",
|
||||
"startTime": 1111111111
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'low',
|
||||
malwareName: 'the great wall',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
"eventId": 1212,
|
||||
"securityType": "ddos",
|
||||
"offenderIp": "1.1.1.1",
|
||||
"victimIp": "2.2.2.2",
|
||||
"eventSecurity": "medium",
|
||||
"malwareName": "the great wall",
|
||||
"cryptominingPool": "a",
|
||||
"startTime": 1111111111
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'medium',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
"eventId": 1212,
|
||||
"securityType": "ddos",
|
||||
"offenderIp": "1.1.1.1",
|
||||
"victimIp": "2.2.2.2",
|
||||
"eventSecurity": "info",
|
||||
"malwareName": "the great wall",
|
||||
"cryptominingPool": "a",
|
||||
"startTime": 1111111111
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
},
|
||||
{
|
||||
eventId: 1212,
|
||||
securityType: 'ddos',
|
||||
offenderIp: '1.1.1.1',
|
||||
victimIp: '2.2.2.2',
|
||||
eventSecurity: 'info',
|
||||
malwareName: 'the great wall',
|
||||
cryptominingPool: 'a',
|
||||
startTime: 1111111111
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -668,15 +780,13 @@ export default {
|
||||
this.queryListTotal()
|
||||
},
|
||||
queryFilter () {
|
||||
this.initEventSeverityTrendData()
|
||||
this.initSeverityPerData()
|
||||
this.initCategoryPerData()
|
||||
this.initActiveAttackData()
|
||||
this.initOffenderLocation()
|
||||
this.initVictimIp()
|
||||
this.initVictimLocation()
|
||||
},
|
||||
queryList () {
|
||||
|
||||
},
|
||||
queryListTotal () {
|
||||
|
||||
@@ -717,11 +827,8 @@ export default {
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initEventSeverityData()
|
||||
this.initSeverityPerData()
|
||||
this.initCategoryPerData()
|
||||
this.initActiveAttackData()
|
||||
this.initListData()
|
||||
this.queryFilter()
|
||||
this.queryList()
|
||||
},
|
||||
watch: {
|
||||
timeFilter (n) {
|
||||
|
||||
@@ -36,9 +36,9 @@ export const multipleBarOption = {
|
||||
legend: {
|
||||
icon: 'circle',
|
||||
top: 10,
|
||||
right:10,
|
||||
right: 10,
|
||||
itemWidth: 10, // 设置宽度
|
||||
itemHeight: 10, // 设置高度
|
||||
itemHeight: 10 // 设置高度
|
||||
},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
@@ -49,34 +49,34 @@ export const multipleBarOption = {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true ,
|
||||
lineStyle :{
|
||||
color:'#eaedef'
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#eaedef'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:'#737373',
|
||||
axisLabel: {
|
||||
color: '#737373',
|
||||
interval: 0
|
||||
},
|
||||
splitLine:{
|
||||
show:false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: { show: false },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle :{
|
||||
color:'#eaedef'
|
||||
lineStyle: {
|
||||
color: '#eaedef'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
color:'#737373'
|
||||
axisLabel: {
|
||||
color: '#737373'
|
||||
},
|
||||
splitLine:{
|
||||
show:false
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
interval:10
|
||||
interval: 10
|
||||
},
|
||||
grid: {
|
||||
top: 40,
|
||||
@@ -130,9 +130,9 @@ export const multipleBarOption = {
|
||||
itemStyle: {
|
||||
color: '#d7c668'
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
export const pieForSeverity = {
|
||||
tooltip: {
|
||||
appendToBody: true
|
||||
@@ -161,10 +161,10 @@ export const pieForSeverity = {
|
||||
center: ['30%', '50%'],
|
||||
data: [],
|
||||
label: {
|
||||
show:false
|
||||
show: false
|
||||
},
|
||||
labelLine:{
|
||||
show:false
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (param, index, callback) {
|
||||
@@ -199,12 +199,12 @@ export const activeAttackBar = {
|
||||
xAxis: {
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel:{
|
||||
show:false
|
||||
},
|
||||
splitLine:{
|
||||
show:false
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 20,
|
||||
@@ -216,20 +216,20 @@ export const activeAttackBar = {
|
||||
type: 'category',
|
||||
axisTick: { show: false },
|
||||
axisLine: { show: false },
|
||||
axisLabel:{
|
||||
show:true
|
||||
},
|
||||
splitLine:{
|
||||
show:false
|
||||
axisLabel: {
|
||||
show: true
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
barWidth: 5,
|
||||
barMaxHeight:20,
|
||||
barMaxHeight: 20,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function(params) {
|
||||
const colorList = ['#d1bd50','#c9d150','#fddd52','#ffb65a','#fe845d'];
|
||||
color: function (params) {
|
||||
const colorList = ['#d1bd50', '#c9d150', '#fddd52', '#ffb65a', '#fe845d']
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
}
|
||||
@@ -242,8 +242,8 @@ export const activeAttackBar = {
|
||||
valueAnimation: true,
|
||||
formatter: function (param, index, callback) {
|
||||
return `${unitConvert(param.value[0], 'number').join(' ')}`
|
||||
},
|
||||
}
|
||||
},
|
||||
barCategoryGap: '10%'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@ import dataListMixin from '@/mixins/data-list'
|
||||
import rolesTable from '@/components/table/settings/RoleTable'
|
||||
import roleBox from '@/components/rightBox/settings/RoleBox'
|
||||
import { api } from '@/utils/api'
|
||||
import {get} from "@/utils/http";
|
||||
import { get } from '@/utils/http'
|
||||
|
||||
export default {
|
||||
name: 'roles',
|
||||
|
||||
Reference in New Issue
Block a user