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

fix: 修复编译后detection个别图无法正常显示的问题

Browse Source
This commit is contained in:
chenjinsong
2022-02-25 15:16:07 +08:00
parent b2c3318039
commit 5a2cc50ccf
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,7 @@
></detection-search> ></detection-search>
<!-- 内容区 --> <!-- 内容区 -->
<div class="explorer-container" style="height: calc(100% - 20px); flex-direction: column"> <div class="explorer-container" style="height: calc(100% - 20px); flex-direction: column">
<div class="detection__event-severity-bar" id="eventSeverityTrendBar"></div> <div class="detection__event-severity-bar" :id="`eventSeverityTrendBar${pageType}`"></div>
<div style="display: flex;"> <div style="display: flex;">
<detection-filter <detection-filter
:filter-data="filterData[pageType]" :filter-data="filterData[pageType]"
@@ -29,21 +29,21 @@
<div class="chart-header"> <div class="chart-header">
<div class="chart-header__title">{{$t('detection.severity')}}</div> <div class="chart-header__title">{{$t('detection.severity')}}</div>
</div> </div>
<div class="chart-content" id="eventSeverityPie"> <div class="chart-content" :id="`eventSeverityPie${pageType}`">
</div> </div>
</div> </div>
<div class="statistics__category"> <div class="statistics__category">
<div class="chart-header"> <div class="chart-header">
<div class="chart-header__title">{{$t('detection.categoryProportion')}}</div> <div class="chart-header__title">{{$t('detection.categoryProportion')}}</div>
</div> </div>
<div class="chart-content" id="detectionCategoryPer"> <div class="chart-content" :id="`detectionCategoryPer${pageType}`">
</div> </div>
</div> </div>
<div class="statistics__active-attack"> <div class="statistics__active-attack">
<div class="chart-header"> <div class="chart-header">
<div class="chart-header__title">{{pageType === detectionPageType.securityEvent ? $t('detection.activeAttacker') : $t('detections.activeEntity')}}</div> <div class="chart-header__title">{{pageType === detectionPageType.securityEvent ? $t('detection.activeAttacker') : $t('detections.activeEntity')}}</div>
</div> </div>
<div class="chart-content" style="" id="detectionActiveAttacker"> <div class="chart-content" style="" :id="`detectionActiveAttacker${pageType}`">
</div> </div>
</div> </div>
</div> </div>
@@ -218,7 +218,7 @@ export default {
values: [[1435781430781, "5"], [1435781431781, "7"],[1435781432781, "5"], [1435781433781, "8"]] values: [[1435781430781, "5"], [1435781431781, "7"],[1435781432781, "5"], [1435781433781, "8"]]
} }
] ]
const chartDom = document.getElementById('eventSeverityTrendBar') const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
const detectionChart = echarts.init(chartDom) const detectionChart = echarts.init(chartDom)
const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption) const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)
data.forEach(item => { data.forEach(item => {
@@ -258,7 +258,7 @@ export default {
eventSeverityOption.series[0].data = data.map(d => { eventSeverityOption.series[0].data = data.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) } }
}) })
const chartDom = document.getElementById('eventSeverityPie') const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
const detectionChart = echarts.init(chartDom) const detectionChart = echarts.init(chartDom)
detectionChart.setOption(eventSeverityOption) detectionChart.setOption(eventSeverityOption)
}).catch(error => { }).catch(error => {
@@ -289,7 +289,7 @@ export default {
} }
] ]
this.filterData[this.pageType][1].data = data.map(r => ({ label: r.attackType, value: r.attackType, count: r.count })) this.filterData[this.pageType][1].data = data.map(r => ({ label: r.attackType, value: r.attackType, count: r.count }))
const chartDom = document.getElementById('detectionCategoryPer') const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
const detectionChart = echarts.init(chartDom) const detectionChart = echarts.init(chartDom)
const securityTypeOption = this.$_.cloneDeep(pieForSeverity) const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
securityTypeOption.series[0].data = data.map(d => { securityTypeOption.series[0].data = data.map(d => {
@@ -325,7 +325,7 @@ export default {
this.filterData[this.pageType][4].showMore = showMore this.filterData[this.pageType][4].showMore = showMore
this.filterData[this.pageType][4].showIndex = showIndex this.filterData[this.pageType][4].showIndex = showIndex
const chartDom = document.getElementById('detectionActiveAttacker') const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
const detectionChart = echarts.init(chartDom) const detectionChart = echarts.init(chartDom)
const offenderIpOption = this.$_.cloneDeep(activeAttackBar) const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
offenderIpOption.series[0].data = data.map(d => { offenderIpOption.series[0].data = data.map(d => {
@@ -480,7 +480,7 @@ export default {
count: 50 count: 50
} }
] ]
const chartDom = document.getElementById('detectionActiveAttacker') const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
const detectionChart = echarts.init(chartDom) const detectionChart = echarts.init(chartDom)
const option = this.$_.cloneDeep(activeAttackBar) const option = this.$_.cloneDeep(activeAttackBar)
option.series[0].data = data.map(d => { option.series[0].data = data.map(d => {