94 lines
2.9 KiB
Vue
94 lines
2.9 KiB
Vue
<template>
|
|
<div class="ddos-detection">
|
|
<chart-no-data v-if="isNoData"></chart-no-data>
|
|
<chart-error info v-if="showError" :content="errorMsg" />
|
|
|
|
<div class="ddos-detection-title">
|
|
<i class="cn-icon cn-icon-a-DDosDetection"></i>
|
|
{{$t('network.ddosDetection')}}
|
|
</div>
|
|
<div class="ddos-detection-value" v-if="!isNoData && !showError">
|
|
<div class="ddos-detection-type">
|
|
<div class="ddos-detection-type-value">
|
|
<div class="ddos-detection-type-value-name">{{$t('network.numberOfAttacks')}}</div>
|
|
<div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'attackerCount') || 0}}</div>
|
|
</div>
|
|
<div class="ddos-detection-type-value">
|
|
<div class="ddos-detection-type-value-name">{{$t('network.number0fVictims')}}</div>
|
|
<div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'victimCount') || 0}}</div>
|
|
</div>
|
|
<div class="ddos-detection-type-value">
|
|
<div class="ddos-detection-type-value-name">{{$t('network.number0fDetectedAttackEvents')}}</div>
|
|
<div class="ddos-detection-type-value-number">{{$_.get(ddosData, 'attackEventCount') || 0}}</div>
|
|
</div>
|
|
</div>
|
|
<el-button size="small">{{$t('network.ddosDetection')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { api } from '@/utils/api'
|
|
import { get } from '@/utils/http'
|
|
import { getSecond } from '@/utils/date-util'
|
|
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
|
import chartMixin from '@/views/charts2/chart-mixin'
|
|
import ChartError from '@/components/common/Error'
|
|
export default {
|
|
name: 'NetworkOverviewDdosDetection',
|
|
components: {
|
|
ChartError,
|
|
ChartNoData
|
|
},
|
|
mixins: [chartMixin],
|
|
data () {
|
|
return {
|
|
ddosData: {},
|
|
isNoData: false,
|
|
showError: false,
|
|
errorMsg: ''
|
|
}
|
|
},
|
|
watch: {
|
|
timeFilter: {
|
|
handler () {
|
|
this.ddosDetectDataRequests()
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
ddosDetectDataRequests () {
|
|
const params = {
|
|
startTime: getSecond(this.timeFilter.startTime),
|
|
endTime: getSecond(this.timeFilter.endTime)
|
|
}
|
|
this.toggleLoading(true)
|
|
get(api.netWorkOverview.ddosEventAnalysis, params).then(res => {
|
|
if (res.code === 200) {
|
|
this.showError = false
|
|
if (res.data.result.length === 0) {
|
|
this.isNoData = true
|
|
} else {
|
|
this.ddosData = res.data.result[0]
|
|
this.isNoData = false
|
|
}
|
|
} else {
|
|
this.isNoData = false
|
|
this.showError = true
|
|
this.errorMsg = res.message
|
|
}
|
|
}).catch((e) => {
|
|
this.isNoData = false
|
|
this.showError = true
|
|
this.errorMsg = e.message
|
|
}).finally(() => {
|
|
this.toggleLoading(false)
|
|
})
|
|
}
|
|
},
|
|
mounted () {
|
|
this.ddosDetectDataRequests()
|
|
}
|
|
}
|
|
</script>
|