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

fix: 修复Detections =》 Security events 和 =》 Performance events 图表宽度错误问题，修复实体检测列表字体颜色问题

Browse Source
This commit is contained in:
@changcode
2022-04-19 18:17:12 +08:00
parent 78108f0e05
commit 7894d329db
2 changed files with 46 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/views/charts/charts/chartDetectionsTable.vue
View File

@@ -3,16 +3,32 @@
<div class="cn-detection__case-severity"><i :class="iconClass" class="cn-icon cn-icon-alert-level"></i></div>
<div class="cn-detection__row">
<div v-if="security" class="cn-detection__header">
<span :class="iconClass"><i :class="iconClass" class="cn-icon cn-icon-attacker"></i>{{detection.offenderIp || '-'}}</span>
<div :class="iconClass" class="domain cn-detection-domain" v-if="detection.domain">{{detection.domain}}</div>
<span>
<i :class="{ 'critical': detection.offenderIp === name}" class="cn-icon cn-icon-attacker"></i>
<span :class="{ 'critical': detection.offenderIp === name}">{{detection.offenderIp || '-'}}</span>
</span>
<div :class="{ 'critical': detection.offenderIp === name}" class="domain cn-detection-domain" v-if="detection.domain">{{detection.domain}}</div>
<span class="line">-------</span>
<span class="circle"></span>
<i class="cn-icon cn-icon-attacked" ></i>{{detection.victimIp || '-'}}
<span>
<i :class="{ 'critical': detection.victimIp === name}" class="cn-icon cn-icon-attacked" ></i>
<soan :class="{ 'critical': detection.victimIp === name}">{{detection.victimIp || '-'}}</soan>
</span>
</div>
<div v-if="service" class="cn-detection__header">
<span v-if="detection.entityType === 'app'" :class="iconClass"><i :class="iconClass" class="cn-icon cn-icon-app2"></i>{{detection.appName || '-'}}</span>
<span v-else-if="detection.entityType === 'ip'" :class="iconClass"><i :class="iconClass" class="cn-icon cn-icon-ip2"></i>{{detection.serverIp || '-'}}</span>
<span v-else-if="detection.entityType === 'domain'" :class="iconClass"><i :class="iconClass" class="cn-icon cn-icon-domain2"></i>{{detection.domain || '-'}}</span>
<span v-if="detection.entityType === 'app'">
<i :class="{ 'critical': detection.appName === name}" class="cn-icon cn-icon-app2"></i>
<span :class="{ 'critical': detection.appName === name}">{{detection.appName || '-'}}</span>
</span>
<span v-else-if="detection.entityType === 'ip'">
<i :class="{ 'critical': detection.serverIp === name}" class="cn-icon cn-icon-ip2"></i>
<span :class="{ 'critical': detection.serverIp === name}">{{detection.serverIp || '-'}}</span>
</span>
<span v-else-if="detection.entityType === 'domain'">
<i :class="{ 'critical': detection.domain === name}" class="cn-icon cn-icon-domain2"></i>
<span :class="{ 'critical': detection.domain === name}">{{detection.domain || '-'}}</span>
</span>
</div>
<div class="cn-detection__body">
<div class="body__basic-info">
@@ -78,6 +94,11 @@ export default {
service: Boolean,
pageType: String // 安全事件、服务质量
},
data () {
return {
name: ''
}
},
computed: {
iconClass () {
let className
@@ -118,6 +139,9 @@ export default {
}
}
},
mounted () {
this.name = this.$route.query.name
},
methods: {
unitConvert,
getMillisecond

18
src/views/detections/Index.vue
View File

@@ -285,6 +285,9 @@ export default {
// eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
eventSeverityTrendOption.xAxis.data = xData
const detectionChart = echarts.init(chartDom)
window.addEventListener('resize', function () {
detectionChart.resize()
})
detectionChart.setOption(eventSeverityTrendOption)
// this.isEventSeverityNoData = false
} else {
@@ -311,8 +314,8 @@ export default {
})
const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
const detectionChart = echarts.init(chartDom)
this.echartsResize(detectionChart)
detectionChart.setOption(eventSeverityOption)
const vm = this
detectionChart.off('click')
detectionChart.on('click', e => {
@@ -338,6 +341,7 @@ export default {
}))
const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
const detectionChart = echarts.init(chartDom)
this.echartsResize(detectionChart)
const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
securityTypeOption.series[0].data = data.map(d => {
return { value: d.count, name: d.eventType }
@@ -365,6 +369,7 @@ export default {
}))
const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
const detectionChart = echarts.init(chartDom)
this.echartsResize(detectionChart)
const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
securityTypeOption.series[0].data = data.map(d => {
return { value: d.count, name: d.securityType, itemStyle: { color: getAttackColor(d.securityType) } }
@@ -396,6 +401,7 @@ export default {
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
const detectionChart = echarts.init(chartDom)
this.echartsResize(detectionChart)
const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
data.sort(reverseSortBy('count'))
data = data.slice(0, 5)
@@ -451,8 +457,8 @@ export default {
if (!this.$_.isEmpty(data)) {
const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
const detectionChart = echarts.init(chartDom)
this.echartsResize(detectionChart)
const option = this.$_.cloneDeep(activeAttackBar)
data.sort(reverseSortBy('count'))
data = data.slice(0, 5)
option.series[0].data = data.map(d => {
@@ -598,6 +604,11 @@ export default {
const wraps = document.querySelector('#detectionList')
wraps.scrollTop = 0
})
},
echartsResize (detectionChart) {
window.addEventListener('resize', function () {
detectionChart.resize()
})
}
},
mounted () {
@@ -719,6 +730,9 @@ export default {
}
}
},
beforeUnmount () {
window.removeEventListener('resize', function () {})
},
setup () {
const { params } = useRoute()
const pageType = params.typeName