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

CN-399 fix:metric 曲线图无数据时，使用'-'代替

Browse Source
This commit is contained in:
hanyuxia
2022-03-22 17:39:32 +08:00
parent 43d6c6dc57
commit 3bc0750ba8
3 changed files with 52 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,6 +56,33 @@
<div class="overview__row">
<div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
</div>
<div class="overview__metric">
<div class="metric__column">
<div class="overview__title">{{$t('detections.metric')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{detection.appName || '-'}}</div>
</div>
</div>
<div class="metric__column">
<div class="overview__title">{{$t('detections.value')}}</div>
<div class="overview__row">
<div class="row__charts" id="detectionMetricChartApp" ></div>
</div>
</div>
<div class="metric__column">
<div class="overview__title">{{$t('detections.startTime')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{dayJs.tz(detection.startTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
</div>
</div>
<div class="metric__column">
<div class="overview__title">{{$t('detections.endTime')}}</div>
<div class="overview__row">
<div class="row__content--metric ">{{dayJs.tz(detection.endTime*1000).format('YYYY-MM-DD HH:mm:ss') || '-'}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
@@ -115,11 +142,13 @@ export default {
if(this.metricList.length>0){
this.initChart()
}else {
let chartDom = document.getElementById('detectionMetricChartDomain')
let chartDom = document.getElementById('detectionMetricChartApp')
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}
}).catch(error => {
console.log(error)
let chartDom = document.getElementById('detectionMetricChartApp')
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}).finally(() => {
setTimeout(() => {
try {
@@ -132,22 +161,22 @@ export default {
},
initChart(){
this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartDomain')))
this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartApp')))
this.chartOptionMetric = _.cloneDeep(this.chartOption)
this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
//let endIndex = (this.metricList). findIndex ((item) => item[0] <= 1435781434781 );
let endIndex = (this.metricList). findIndex ((item) => item[0] <= this.detection.endTime*1000 );
let endIndex = (this.metricList). findIndex ((item) => item[0] <= this.detection.endTime );
endIndex = this.metricList.length-endIndex
this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
//let startIndex = (this.metricList). findIndex ((item) => item[0] >= 1435781432781 );
let startIndex = (this.metricList). findIndex ((item) => item[0] >= this.detection.startTime*1000 );
let startIndex = (this.metricList). findIndex ((item) => item[0] >= this.detection.startTime );
if(startIndex >-1 && endIndex >-1){
this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0]), Number(v[1]), unitTypes.number])
this.chartOptionMetric.series[0].data = this.metricList.slice(0,startIndex).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
this.chartOptionMetric.series[1].data = this.metricList.slice(startIndex-1,endIndex).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
this.chartOptionMetric.series[2].data = this.metricList.slice(endIndex-1,this.metricList.length).map(v => [Number(v[0])*1000, Number(v[1]), unitTypes.number])
}
this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)