gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-302 Detection-列表

Browse Source
This commit is contained in:
hanyuxia
2022-02-18 17:54:22 +08:00
parent 95c89b73df
commit c5b6121df1
8 changed files with 330 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/views/detections/DetectionRow.vue
View File

@@ -1,37 +1,54 @@
<template>
<div class="cn-entity--list" :style="{zIndex: !isCollapse ? 1 : 'unset'}">
<div class="cn-detection--list" :style="{zIndex: !isCollapse ? 1 : 'unset'}">
<!-- 左侧下拉按钮 -->
<div class="cn-entity__collapse">
<div class="cn-detection__collapse">
<span @click="switchCollapse" :class="{'reg-down': !isCollapse}"><i class="cn-icon cn-icon-arrow-right"></i></span>
</div>
<div class="cn-entity__case">
<div class="cn-entity__icon"><i class="el-icon-search"></i></div>
<div class="cn-entity__row">
<div class="cn-entity__header">3.4.5.6</div>
<div class="cn-entity__body">
<div class="cn-detection__case">
<div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor[detection.eventSecurity]}`">
</div>
<div class="cn-detection__row">
<div class="cn-detection__header">
<i class="cn-icon cn-icon-attacker" ></i>{{detection.offenderIp}}
<span class="line">-------</span>
<span class="circle"></span>
<i class="cn-icon cn-icon-attacked" ></i>{{detection.victimIp}}
</div>
<div class="cn-detection__body">
<div class="body__basic-info">
<div class="basic-info">
<div class="basic-info__item">
<i class="cn-icon cn-icon-country"></i>
<span>{{$t('overall.country')}}&nbsp;:&nbsp;&nbsp;</span>
<span>hehe</span>
<i class="cn-icon cn-icon-severity-level"></i>
<span>{{$t('detection.list.eventSecurity')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{detection.eventSecurity}}</span>
</div>
<div class="basic-info__item">
<i class="cn-icon cn-icon-position"></i>
<span>{{$t('overall.region')}}&nbsp;:&nbsp;&nbsp;</span>
<span>xixi</span>
<i class="cn-icon cn-icon-event-type"></i>
<span>{{$t('detection.list.securityType')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{detection.securityType}}</span>
</div>
<div class="basic-info__item" v-if="detection.malwareName && detection.malwareName.length > 0 ">
<i class="cn-icon cn-icon-trojan"></i>
<span>{{$t('detection.list.malwareName')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{detection.malwareName}}</span>
</div>
<div class="basic-info__item" v-if="detection.cryptominingPool && detection.cryptominingPool.length > 0 ">
<i class="cn-icon cn-icon-mining-pool"></i>
<span>{{$t('detection.list.cryptominingPool')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{detection.cryptominingPool}}</span>
</div>
<div class="basic-info__item">
<i class="cn-icon cn-icon-cloud"></i>
<span>{{$t('entities.asn')}}&nbsp;:&nbsp;&nbsp;</span>
<span>heihei</span>
<i class="cn-icon cn-icon-time2"></i>
<span>{{$t('detection.list.startTime')}}&nbsp;:&nbsp;&nbsp;</span>
<span>{{ dayJs.tz(detection.startTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
</div>
</div>
</div>
</div>
</div>
<el-collapse-transition>
<div class="cn-entity__detail-overview" v-if="!isCollapse">
<div class="cn-detection__detail-overview" v-if="!isCollapse">
<el-divider></el-divider>
<detection-overview
:entity="entityData"
@@ -52,12 +69,20 @@ export default {
},
props: {
index: Number,
timeFilter: Object
timeFilter: Object,
detection: Object
},
data () {
return {
entityData: [],
isCollapse: true // 是否是折叠状态
isCollapse: true, // 是否是折叠状态
eventSeverityColor: {
critical: '#D84C4C',
high: '#FE845D',
medium: '#FFB65A',
low: '#FFD82D',
info: '#D1BD50'
}
}
},
methods: {