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="overview__row">
<div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div> <div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
</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>
</div> </div>
</template> </template>
@@ -115,11 +142,13 @@ export default {
if(this.metricList.length>0){ if(this.metricList.length>0){
this.initChart() this.initChart()
}else { }else {
let chartDom = document.getElementById('detectionMetricChartDomain') let chartDom = document.getElementById('detectionMetricChartApp')
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>' chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
} }
}).catch(error => { }).catch(error => {
console.log(error) console.log(error)
let chartDom = document.getElementById('detectionMetricChartApp')
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}).finally(() => { }).finally(() => {
setTimeout(() => { setTimeout(() => {
try { try {
@@ -132,22 +161,22 @@ export default {
}, },
initChart(){ initChart(){
this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartDomain'))) this.metricChart = markRaw(echarts.init(document.getElementById('detectionMetricChartApp')))
this.chartOptionMetric = _.cloneDeep(this.chartOption) this.chartOptionMetric = _.cloneDeep(this.chartOption)
this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点 this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
//let endIndex = (this.metricList). findIndex ((item) => item[0] <= 1435781434781 ); //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 endIndex = this.metricList.length-endIndex
this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点 this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
//let startIndex = (this.metricList). findIndex ((item) => item[0] >= 1435781432781 ); //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){ 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[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]), 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]), 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) this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)

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

@@ -179,6 +179,8 @@
} }
}).catch(error => { }).catch(error => {
console.log(error) console.log(error)
let chartDom = document.getElementById('detectionMetricChartDomain')
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}).finally(() => { }).finally(() => {
setTimeout(() => { setTimeout(() => {
try { try {
@@ -196,17 +198,17 @@
this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点 this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
//let endIndex = (this.metricList). findIndex ((item) => item[0] <= 1435781434781 ); //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 endIndex = this.metricList.length-endIndex
this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点 this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
//let startIndex = (this.metricList). findIndex ((item) => item[0] >= 1435781432781 ); //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){ 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[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]), 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]), 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) this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)

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

@@ -137,11 +137,13 @@ export default {
if(this.metricList.length>0){ if(this.metricList.length>0){
this.initChart() this.initChart()
}else { }else {
let chartDom = document.getElementById('detectionMetricChartDomain') let chartDom = document.getElementById('detectionMetricChartIp')
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>' chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
} }
}).catch(error => { }).catch(error => {
console.log(error) console.log(error)
let chartDom = document.getElementById('detectionMetricChartIp')
chartDom.innerHTML = '<span style="padding-left:5px;">-</span>'
}).finally(() => { }).finally(() => {
setTimeout(() => { setTimeout(() => {
try { try {
@@ -159,18 +161,19 @@ export default {
this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点 this.metricList.sort(reverseSortBy(0))//将返回的数据按时间降序排序，方便找到实线和虚线的交点
//let endIndex = (this.metricList). findIndex ((item) => item[0] <= 1435781434781 ); //let endIndex = (this.metricList). findIndex ((item) => item[0] <= 1435781434781 );
let endIndex = (this.metricList). findIndex ((item) => item[0] <= this.detection.endTime*1000 ); console.log(this.detection)
let endIndex = (this.metricList). findIndex ((item) => item[0] <= this.detection.endTime );
endIndex = this.metricList.length-endIndex endIndex = this.metricList.length-endIndex
this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点 this.metricList.sort(sortBy(0))//将返回的数据按时间升序排序，方便找到实线和虚线的交点
//let startIndex = (this.metricList). findIndex ((item) => item[0] >= 1435781432781 ); //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){ 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[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]), 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]), 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) this.chartOptionMetric && this.metricChart.setOption(this.chartOptionMetric)