fix: 1、修复detection详情loading过于生硬的问题；2、detection的threshold数据过多，折线图和底部色条宽度有差异；3、添加detection详情过期弹框提示和下拉内容提示
This commit is contained in:
刘洪洪
@@ -175,6 +175,14 @@ $color-regular: var(--el-text-color-regular);
|
||||
}
|
||||
.overview__left-new {
|
||||
flex: 0 0 100%;
|
||||
|
||||
.data-expired {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
line-height: 300px;
|
||||
color: var(--el-text-color-disabled);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.overview__row-timeline {
|
||||
@@ -327,12 +335,10 @@ $color-regular: var(--el-text-color-regular);
|
||||
|
||||
.detection-detail__loading {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
|
||||
.detail__loading {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="detection-detail__loading" v-if="loading">
|
||||
<loading :loading="loading" class="detail__loading"></loading>
|
||||
<loading :loading="loading" class="detail__loading" :style="`top:${loadingTop}px;`"></loading>
|
||||
</div>
|
||||
<div class="detection-detail-overview" v-if="!loading">
|
||||
<div class="detection-detail-overview">
|
||||
<div class="overview__left overview__left-new">
|
||||
<div class="overview__title">{{ $t('overall.remark') }}</div>
|
||||
<div class="overview__row">
|
||||
@@ -10,99 +10,105 @@
|
||||
<div v-html="handleDescription"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">{{ $t('overall.fields') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.list.startTime') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.startTime) || '-' }}
|
||||
<div v-if="isExpire">
|
||||
<div class="data-expired">
|
||||
{{ $t('detection.detail.dataExpired') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row" v-if="myDetection.endTime">
|
||||
<div class="row__label" v-if="parseInt(detection.status)===0">{{$t('detection.lastTime')}}</div>
|
||||
<div class="row__label" v-if="parseInt(detection.status)===1">{{$t('detection.list.endTime')}}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.endTime) || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.duration') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-duration row__content__icon"></i>
|
||||
<div v-if="parseInt(myDetection.durationS) > 10">
|
||||
{{unitConvert(parseInt(myDetection.durationS), 'time', 's', null, 0).join(' ') || '-'}}
|
||||
<div v-else>
|
||||
<div class="overview__title">{{ $t('overall.fields') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.list.startTime') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.startTime) || '-' }}
|
||||
</div>
|
||||
<div v-if="parseInt(myDetection.durationS) <= 10">{{ $t('detection.list.lastingSeconds')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row" v-if="myDetection.status === 0">
|
||||
<div class="row__label">{{ $t('overall.status') }}</div>
|
||||
<div class="row__content">
|
||||
<div class="detection-row-active">{{ $t('detections.active') }}</div>
|
||||
<div class="overview__row" v-if="myDetection.endTime">
|
||||
<div class="row__label" v-if="parseInt(detection.status)===0">{{$t('detection.lastTime')}}</div>
|
||||
<div class="row__label" v-if="parseInt(detection.status)===1">{{$t('detection.list.endTime')}}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.endTime) || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.list.eventSeverity') }}</div>
|
||||
<div class="row__content">{{ getSeverityByCode(myDetection.severity) || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.clientIp') }}</div>
|
||||
<div class="row__content">{{ myDetection.clientIp || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.clientLocation') }}</div>
|
||||
<div class="row__content">
|
||||
<div v-if="myDetection.clientCountryRegion">
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.duration') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-duration row__content__icon"></i>
|
||||
<div v-if="parseInt(myDetection.durationS) > 10">
|
||||
{{unitConvert(parseInt(myDetection.durationS), 'time', 's', null, 0).join(' ') || '-'}}
|
||||
</div>
|
||||
<div v-if="parseInt(myDetection.durationS) <= 10">{{ $t('detection.list.lastingSeconds')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row" v-if="myDetection.status === 0">
|
||||
<div class="row__label">{{ $t('overall.status') }}</div>
|
||||
<div class="row__content">
|
||||
<div class="detection-row-active">{{ $t('detections.active') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.list.eventSeverity') }}</div>
|
||||
<div class="row__content">{{ getSeverityByCode(myDetection.severity) || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.clientIp') }}</div>
|
||||
<div class="row__content">{{ myDetection.clientIp || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.clientLocation') }}</div>
|
||||
<div class="row__content">
|
||||
<div v-if="myDetection.clientCountryRegion">
|
||||
<span>
|
||||
<img v-if="myDetection.clientCountryRegion===countryNameIdMapping.Unknown || !countryNameIdMapping[myDetection.clientCountryRegion]" src="../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
|
||||
<img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[myDetection.clientCountryRegion]}.png`)" class="filter-country-flag" >
|
||||
</span>
|
||||
{{ myDetection.clientCountryRegion || '-' }}, {{ myDetection.clientSuperAdminArea || '-' }}
|
||||
{{ myDetection.clientCountryRegion || '-' }}, {{ myDetection.clientSuperAdminArea || '-' }}
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.serverIp') }}</div>
|
||||
<div class="row__content">{{ myDetection.serverIp || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.detail.serverLocation') }}</div>
|
||||
<div class="row__content">
|
||||
<div v-if="myDetection.serverCountryRegion">
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.serverIp') }}</div>
|
||||
<div class="row__content">{{ myDetection.serverIp || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.detail.serverLocation') }}</div>
|
||||
<div class="row__content">
|
||||
<div v-if="myDetection.serverCountryRegion">
|
||||
<span>
|
||||
<img v-if="myDetection.serverCountryRegion===countryNameIdMapping.Unknown || !countryNameIdMapping[myDetection.serverCountryRegion]" src="../../../../public/images/flag/Unknown.svg" class="filter-country-flag">
|
||||
<img v-else :src="require(`../../../../public/images/flag/${countryNameIdMapping[myDetection.serverCountryRegion]}.png`)" class="filter-country-flag" >
|
||||
</span>
|
||||
{{ myDetection.serverCountryRegion || '-' }}, {{ myDetection.serverSuperAdminArea || '-' }}
|
||||
{{ myDetection.serverCountryRegion || '-' }}, {{ myDetection.serverSuperAdminArea || '-' }}
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.detail.indicatorValues') }}</div>
|
||||
<div class="row__content">{{ myDetection.indicatorValues || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.domain') }}</div>
|
||||
<div class="row__content">{{ myDetection.domain || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.app') }}</div>
|
||||
<div class="row__content">{{ myDetection.app || '-' }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="eventFlag===detectionEventType.aggregation">
|
||||
<div class="overview__title overview__title__margin">{{ $t('detection.timeOfOccurrences') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content1">
|
||||
<events-timeline :timeFilter="timeFilter" :timeData="timeData" :activeIndex="activeIndex" @change="changeTimeline"></events-timeline>
|
||||
<div class="row__label">{{ $t('detection.detail.indicatorValues') }}</div>
|
||||
<div class="row__content">{{ myDetection.indicatorValues || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.domain') }}</div>
|
||||
<div class="row__content">{{ myDetection.domain || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.app') }}</div>
|
||||
<div class="row__content">{{ myDetection.app || '-' }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="eventFlag===detectionEventType.aggregation">
|
||||
<div class="overview__title overview__title__margin">{{ $t('detection.timeOfOccurrences') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content1">
|
||||
<events-timeline :timeFilter="timeFilter" :timeData="timeData" :activeIndex="activeIndex" @change="changeTimeline"></events-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="detection-detail__loading" v-if="loading">
|
||||
<loading :loading="loading" class="detail__loading"></loading>
|
||||
<loading :loading="loading" class="detail__loading" :style="`top:${loadingTop}px;`"></loading>
|
||||
</div>
|
||||
<div class="detection-detail-overview" v-if="!loading">
|
||||
<div class="detection-detail-overview">
|
||||
<div class="overview__left overview__left-new">
|
||||
<div class="overview__title">{{ $t('overall.remark') }}</div>
|
||||
<div class="overview__row">
|
||||
@@ -10,75 +10,82 @@
|
||||
<div v-html="handleDescription"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">{{ $t('overall.fields') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.list.eventSeverity') }}</div>
|
||||
<div class="row__content">{{ getSeverityByCode(myDetection.severity) || '-' }}</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.list.startTime') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.startTime) || '-' }}
|
||||
<div v-if="isExpire">
|
||||
<div class="data-expired">
|
||||
{{ $t('detection.detail.dataExpired') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row" v-if="myDetection.endTime">
|
||||
<div class="row__label" v-if="parseInt(detection.status)===0">{{$t('detection.lastTime')}}</div>
|
||||
<div class="row__label" v-if="parseInt(detection.status)===1">{{$t('detection.list.endTime')}}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.endTime) || '-' }}
|
||||
<div v-else>
|
||||
<div class="overview__title">{{ $t('overall.fields') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.list.eventSeverity') }}</div>
|
||||
<div class="row__content">{{ getSeverityByCode(myDetection.severity) || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.duration') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-duration row__content__icon"></i>
|
||||
<div v-if="parseInt(myDetection.durationS) > 10">
|
||||
{{unitConvert(parseInt(myDetection.durationS), 'time', 's', null, 0).join(' ') || '-'}}
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.list.startTime') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.startTime) || '-' }}
|
||||
</div>
|
||||
<div v-if="parseInt(myDetection.durationS) <= 10">{{ $t('detection.list.lastingSeconds')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row" v-if="myDetection.status === 0">
|
||||
<div class="row__label">{{ $t('overall.status') }}</div>
|
||||
<div class="row__content">
|
||||
<div class="detection-row-active">{{ $t('detections.active') }}</div>
|
||||
<div class="overview__row" v-if="myDetection.endTime">
|
||||
<div class="row__label" v-if="parseInt(detection.status)===0">{{$t('detection.lastTime')}}</div>
|
||||
<div class="row__label" v-if="parseInt(detection.status)===1">{{$t('detection.list.endTime')}}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.endTime) || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.duration') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-duration row__content__icon"></i>
|
||||
<div v-if="parseInt(myDetection.durationS) > 10">
|
||||
{{unitConvert(parseInt(myDetection.durationS), 'time', 's', null, 0).join(' ') || '-'}}
|
||||
</div>
|
||||
<div v-if="parseInt(myDetection.durationS) <= 10">{{ $t('detection.list.lastingSeconds')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row" v-if="myDetection.status === 0">
|
||||
<div class="row__label">{{ $t('overall.status') }}</div>
|
||||
<div class="row__content">
|
||||
<div class="detection-row-active">{{ $t('detections.active') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="(obj, index) in myDetection.eventInfoList" :key="obj.stage_id">
|
||||
<div class="overview__title margin-t-18">{{ $t('detection.detail.stage') }}{{ index + 1 }}</div>
|
||||
<div v-for="(item, fields) in obj" :key="fields">
|
||||
<div class="overview__row" v-if="fields !== 'stage_id' && fields !== 'recv_time'">
|
||||
<div class="row__label row__label__capitalize">{{ fields }}</div>
|
||||
<div class="row__content" v-if="item">
|
||||
<div v-if="$_.isNumber(item)">
|
||||
<div v-if="item > 1000000000">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(item) }}
|
||||
<div v-for="(obj, index) in myDetection.eventInfoList" :key="obj.stage_id">
|
||||
<div class="overview__title margin-t-18">{{ $t('detection.detail.stage') }}{{ index + 1 }}</div>
|
||||
<div v-for="(item, fields) in obj" :key="fields">
|
||||
<div class="overview__row" v-if="fields !== 'stage_id' && fields !== 'recv_time'">
|
||||
<div class="row__label row__label__capitalize">{{ fields }}</div>
|
||||
<div class="row__content" v-if="item">
|
||||
<div v-if="$_.isNumber(item)">
|
||||
<div v-if="item > 1000000000">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(item) }}
|
||||
</div>
|
||||
<div v-else>{{ item }}</div>
|
||||
</div>
|
||||
<div v-else>{{ item }}</div>
|
||||
</div>
|
||||
<div v-else>{{ item }}</div>
|
||||
<div class="row__content" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">Time</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ obj.recv_time ? dateFormatByAppearance(obj.recv_time) : '-' }}
|
||||
</div>
|
||||
<div class="row__content" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">Time</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ obj.recv_time ? dateFormatByAppearance(obj.recv_time) : '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="eventFlag===detectionEventType.aggregation">
|
||||
<div class="overview__title overview__title__margin">{{ $t('detection.timeOfOccurrences') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content1">
|
||||
<events-timeline :timeFilter="timeFilter" :timeData="timeData" :activeIndex="activeIndex" @change="changeTimeline"></events-timeline>
|
||||
<div v-if="eventFlag===detectionEventType.aggregation">
|
||||
<div class="overview__title overview__title__margin">{{ $t('detection.timeOfOccurrences') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content1">
|
||||
<events-timeline :timeFilter="timeFilter" :timeData="timeData" :activeIndex="activeIndex" @change="changeTimeline"></events-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="detection-detail__loading" v-if="loading">
|
||||
<loading :loading="loading" class="detail__loading"></loading>
|
||||
<loading :loading="loading" class="detail__loading" :style="`top:${loadingTop}px;`"></loading>
|
||||
</div>
|
||||
<div class="detection-detail-overview" v-if="!loading">
|
||||
<div class="detection-detail-overview">
|
||||
<div class="overview__left overview__left-new">
|
||||
<div class="overview__title">{{ $t('overall.remark') }}</div>
|
||||
<div class="overview__row">
|
||||
@@ -10,61 +10,69 @@
|
||||
<div v-html="handleDescription"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">{{ $t('overall.fields') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.list.startTime') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.startTime) || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row" v-if="myDetection.endTime">
|
||||
<div class="row__label" v-if="parseInt(detection.status)===0">{{$t('detection.lastTime')}}</div>
|
||||
<div class="row__label" v-if="parseInt(detection.status)===1">{{$t('detection.list.endTime')}}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.endTime) || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.duration') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-duration row__content__icon"></i>
|
||||
<div v-if="parseInt(myDetection.durationS) > 10">
|
||||
{{unitConvert(parseInt(myDetection.durationS), 'time', 's', null, 0).join(' ') || '-'}}
|
||||
</div>
|
||||
<div v-if="parseInt(myDetection.durationS) <= 10">{{ $t('detection.list.lastingSeconds')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row" v-if="myDetection.status === 0">
|
||||
<div class="row__label">{{ $t('overall.status') }}</div>
|
||||
<div class="row__content">
|
||||
<div class="detection-row-active">{{ $t('detections.active') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">{{ $t('overall.summary') }}</div>
|
||||
<div class="overview__row overview__row__display">
|
||||
<div class="row__content1">
|
||||
<div class="row__content__charts" :ref="`myChart${myDetection.eventId}`" :id="`myChart${myDetection.eventId}`"></div>
|
||||
</div>
|
||||
<div class="row__content1" v-if="seriesDataNum>1">
|
||||
<div class="charts__visual__map">
|
||||
<div v-for="item in mapColor" :key="item.startTime" :style="`background: ${item.color};width:${item.width};`"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row__content1 row__display">
|
||||
<div v-for="(item, index) in markLineData" :key="item.label" class="row__mark__line" @click="highLightMarkLine(index)">
|
||||
<div class="mark__line__block" :style="{background: item.itemStyle.color}"></div>
|
||||
<div class="mark__line__text">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="eventFlag===detectionEventType.aggregation">
|
||||
<div class="overview__title overview__title__margin">{{ $t('detection.timeOfOccurrences') }}</div>
|
||||
<div v-if="isExpire">
|
||||
<div class="data-expired">
|
||||
{{ $t('detection.detail.dataExpired') }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="overview__title">{{ $t('overall.fields') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('detection.list.startTime') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.startTime) || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row" v-if="myDetection.endTime">
|
||||
<div class="row__label" v-if="parseInt(detection.status)===0">{{$t('detection.lastTime')}}</div>
|
||||
<div class="row__label" v-if="parseInt(detection.status)===1">{{$t('detection.list.endTime')}}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-time2 row__content__icon"></i>
|
||||
{{ dateFormatByAppearance(myDetection.endTime) || '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__label">{{ $t('overall.duration') }}</div>
|
||||
<div class="row__content">
|
||||
<i class="cn-icon cn-icon-duration row__content__icon"></i>
|
||||
<div v-if="parseInt(myDetection.durationS) > 10">
|
||||
{{unitConvert(parseInt(myDetection.durationS), 'time', 's', null, 0).join(' ') || '-'}}
|
||||
</div>
|
||||
<div v-if="parseInt(myDetection.durationS) <= 10">{{ $t('detection.list.lastingSeconds')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__row" v-if="myDetection.status === 0">
|
||||
<div class="row__label">{{ $t('overall.status') }}</div>
|
||||
<div class="row__content">
|
||||
<div class="detection-row-active">{{ $t('detections.active') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview__title">{{ $t('overall.summary') }}</div>
|
||||
<div class="overview__row overview__row__display">
|
||||
<div class="row__content1">
|
||||
<events-timeline :timeFilter="timeFilter" :timeData="timeData" :lineWidth="lineWidth" :activeIndex="activeIndex" @change="changeTimeline"></events-timeline>
|
||||
<div class="row__content__charts" :ref="`myChart${myDetection.eventId}`" :id="`myChart${myDetection.eventId}`"></div>
|
||||
</div>
|
||||
<div class="row__content1" v-if="seriesDataNum>1">
|
||||
<div class="charts__visual__map">
|
||||
<div v-for="item in mapColor" :key="item.startTime" :style="`background: ${item.color};width:${item.width};`"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row__content1 row__display">
|
||||
<div v-for="(item, index) in markLineData" :key="item.label" class="row__mark__line" @click="highLightMarkLine(index)">
|
||||
<div class="mark__line__block" :style="{background: item.itemStyle.color}"></div>
|
||||
<div class="mark__line__text">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="eventFlag===detectionEventType.aggregation">
|
||||
<div class="overview__title overview__title__margin">{{ $t('detection.timeOfOccurrences') }}</div>
|
||||
<div class="overview__row">
|
||||
<div class="row__content1">
|
||||
<events-timeline :timeFilter="timeFilter" :timeData="timeData" :lineWidth="lineWidth" :activeIndex="activeIndex" @change="changeTimeline"></events-timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,9 @@ export default {
|
||||
mapWidth: 550, // 折线图底部色条宽度
|
||||
lineWidth: 520, // 时间轴宽度
|
||||
loading: true,
|
||||
activeIndex: -1
|
||||
activeIndex: -1,
|
||||
loadingTop: 0,
|
||||
isExpire: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@@ -94,13 +96,20 @@ export default {
|
||||
axios.get(api.detection.event.detailTimeDistribution, { params: timeParams }).then(res => {
|
||||
if (res.status === 200) {
|
||||
const timeData = res.data.data.result
|
||||
timeData.sort((a, b) => a.endTime - b.endTime)
|
||||
this.timeData = timeData
|
||||
const detailData = JSON.parse(JSON.stringify(timeData)).pop()
|
||||
detailData.durationS = detailData.endTime - detailData.startTime
|
||||
this.myDetection = { ...this.myDetection, ...detailData }
|
||||
if (timeData && timeData.length > 0) {
|
||||
this.isExpire = false
|
||||
timeData.sort((a, b) => a.endTime - b.endTime)
|
||||
this.timeData = timeData
|
||||
const detailData = JSON.parse(JSON.stringify(timeData)).pop()
|
||||
detailData.durationS = detailData.endTime - detailData.startTime
|
||||
this.myDetection = { ...this.myDetection, ...detailData }
|
||||
} else {
|
||||
this.isExpire = true
|
||||
this.$message.error(this.$t('detection.detail.dataExpired'))
|
||||
}
|
||||
}
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
this.$message.error(this.errorMsgHandler(e))
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
@@ -128,6 +137,9 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
this.handleLineChart(data)
|
||||
})
|
||||
} else {
|
||||
this.isExpire = true
|
||||
this.$message.error(this.$t('detection.detail.dataExpired'))
|
||||
}
|
||||
} else {
|
||||
const data = res.data.data.result
|
||||
@@ -149,6 +161,15 @@ export default {
|
||||
},
|
||||
changeTimeline (e) {
|
||||
this.loading = true
|
||||
|
||||
if (this.detection.ruleType === 1) {
|
||||
this.loadingTop = 210
|
||||
} else if (this.detection.ruleType === 2) {
|
||||
this.loadingTop = 250
|
||||
} else if (this.detection.ruleType === 3 || this.detection.ruleType === 4) {
|
||||
this.loadingTop = 300
|
||||
}
|
||||
|
||||
const params = {
|
||||
startTime: getSecond(this.timeFilter.startTime),
|
||||
endTime: getSecond(this.timeFilter.endTime),
|
||||
@@ -287,18 +308,27 @@ export default {
|
||||
/** 计算折线图色条的分布情况 */
|
||||
handleMapColor (data) {
|
||||
const diffTime = this.$_.cloneDeep(data).pop().startTime - data[0].startTime
|
||||
const totalWidth = this.countTotalWidth(data, diffTime, this.mapWidth)
|
||||
if (Math.abs(this.mapWidth - totalWidth) >= 1) {
|
||||
this.countTotalWidth(data, diffTime, 600)
|
||||
}
|
||||
},
|
||||
countTotalWidth (data, diffTime, width) {
|
||||
this.mapColor = []
|
||||
let totalWidth = 0
|
||||
data.forEach((item, index) => {
|
||||
let width = 0
|
||||
let itemWidth = 0
|
||||
if (index > 0) {
|
||||
width = ((item.startTime - data[index - 1].startTime) / diffTime) * this.mapWidth
|
||||
itemWidth = ((item.startTime - data[index - 1].startTime) / diffTime) * width
|
||||
totalWidth = totalWidth + JSON.parse(itemWidth.toFixed(1))
|
||||
}
|
||||
this.mapColor.push({
|
||||
color: getSeverityNumberColor(item.severity),
|
||||
width: width + 'px',
|
||||
width: itemWidth + 'px',
|
||||
startTime: item.startTime
|
||||
})
|
||||
})
|
||||
return totalWidth
|
||||
}
|
||||
},
|
||||
beforeUnmount () {
|
||||
|
||||
Reference in New Issue
Block a user