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

detection模块，metric折线图对于元素id改为动态，否则编译后会出问题：只会渲染第一次画的图

Browse Source
This commit is contained in:
hanyuxia
2022-03-25 14:45:20 +08:00
parent 41237af24e
commit 8513bc4f20
3 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
View File

@@ -67,7 +67,7 @@
<div class="metric__column">
<div class="overview__title">{{$t('detections.value')}}</div>
<div class="overview__row">
<div class="row__charts" id="detectionMetricChartApp" ></div>
<div class="row__charts" :id="`detectionMetricChartApp${detection.appName}`" ></div>
</div>
</div>
<div class="metric__column">
@@ -142,12 +142,12 @@ export default {
if(this.metricList.length>0){
this.initChart()
}else {
let chartDom = document.getElementById('detectionMetricChartApp')
let chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`)
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}
}).catch(error => {
console.log(error)
let chartDom = document.getElementById('detectionMetricChartApp')
let chartDom = document.getElementById(`detectionMetricChartApp${this.detection.appName}`)
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}).finally(() => {
setTimeout(() => {
@@ -161,7 +161,7 @@ export default {
},
initChart(){
this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartApp')))
this.metricChart = markRaw(echarts.init(document.getElementById(`detectionMetricChartApp${this.detection.appName}`)))
this.chartOptionMetric = _.cloneDeep(this.chartOption)
this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点

8
src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
View File

@@ -69,7 +69,7 @@
<div class="metric__column">
<div class="overview__title">{{$t('detections.value')}}</div>
<div class="overview__row">
<div class="row__charts" id="detectionMetricChartDomain" ></div>
<div class="row__charts" :id="`detectionMetricChartDomain${detection.domain}`" ></div>
</div>
</div>
<div class="metric__column">
@@ -174,12 +174,12 @@
if(this.metricList.length>0){
this.initChart()
}else {
let chartDom = document.getElementById('detectionMetricChartDomain')
let chartDom = document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}
}).catch(error => {
console.log(error)
let chartDom = document.getElementById('detectionMetricChartDomain')
let chartDom = document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}).finally(() => {
setTimeout(() => {
@@ -193,7 +193,7 @@
},
initChart(){
this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartDomain')))//使用markRaw的原因：vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')
this.metricChart = markRaw(echarts.init(document.getElementById(`detectionMetricChartDomain${this.detection.domain}`)))//使用markRaw的原因：vue3+echart5 遇到的坑 Cannot read properties of undefined (reading 'type')
this.chartOptionMetric = _.cloneDeep(this.chartOption)
this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点

8
src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
View File

@@ -60,7 +60,7 @@
<div class="metric__column">
<div class="overview__title">{{$t('detections.value')}}</div>
<div class="overview__row">
<div class="row__charts" id="detectionMetricChartIp" ></div>
<div class="row__charts" :id="`detectionMetricChartIp${detection.serverIp}`" ></div>
</div>
</div>
<div class="metric__column">
@@ -136,12 +136,12 @@ export default {
if(this.metricList.length>0){
this.initChart()
}else {
let chartDom = document.getElementById('detectionMetricChartIp')
let chartDom = document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}
}).catch(error => {
console.log(error)
let chartDom = document.getElementById('detectionMetricChartIp')
let chartDom = document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}).finally(() => {
setTimeout(() => {
@@ -155,7 +155,7 @@ export default {
},
initChart(){
this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartIp')))
this.metricChart = markRaw(echarts.init(document.getElementById(`detectionMetricChartIp${this.detection.serverIp}`)))
this.chartOptionMetric = _.cloneDeep(this.chartOption)
this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点