From 1ff8c02aa65541335774aef5a9526af8bb2f6774 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Mon, 2 Sep 2024 17:53:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=201=E3=80=81=E4=BF=AE=E5=A4=8Ddetection?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85loading=E8=BF=87=E4=BA=8E=E7=94=9F=E7=A1=AC?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=9B2=E3=80=81detection?=
 =?UTF-8?q?=E7=9A=84threshold=E6=95=B0=E6=8D=AE=E8=BF=87=E5=A4=9A=EF=BC=8C?=
 =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE=E5=92=8C=E5=BA=95=E9=83=A8=E8=89=B2?=
 =?UTF-8?q?=E6=9D=A1=E5=AE=BD=E5=BA=A6=E6=9C=89=E5=B7=AE=E5=BC=82=EF=BC=9B?=
 =?UTF-8?q?3=E3=80=81=E6=B7=BB=E5=8A=A0detection=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E8=BF=87=E6=9C=9F=E5=BC=B9=E6=A1=86=E6=8F=90=E7=A4=BA=E5=92=8C?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E5=86=85=E5=AE=B9=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/detections/detection-overview.scss  |  10 +-
 .../overview/IndicatorMatchOverview.vue       | 152 +++++++++---------
 .../detections/overview/SequenceOverview.vue  | 121 +++++++-------
 .../detections/overview/ThresholdOverview.vue | 116 ++++++-------
 .../overview/detectionDetailMixin.js          |  48 ++++--
 5 files changed, 252 insertions(+), 195 deletions(-)

diff --git a/src/assets/css/components/views/detections/detection-overview.scss b/src/assets/css/components/views/detections/detection-overview.scss
index ea530880..4e2b1172 100644
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -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%;
   }
 }
diff --git a/src/views/detections/overview/IndicatorMatchOverview.vue b/src/views/detections/overview/IndicatorMatchOverview.vue
index 279e6c5a..6d8280f0 100644
--- a/src/views/detections/overview/IndicatorMatchOverview.vue
+++ b/src/views/detections/overview/IndicatorMatchOverview.vue
@@ -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>
 
diff --git a/src/views/detections/overview/SequenceOverview.vue b/src/views/detections/overview/SequenceOverview.vue
index f31f5208..6f64a3a9 100644
--- a/src/views/detections/overview/SequenceOverview.vue
+++ b/src/views/detections/overview/SequenceOverview.vue
@@ -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>
diff --git a/src/views/detections/overview/ThresholdOverview.vue b/src/views/detections/overview/ThresholdOverview.vue
index 5eca1711..0ff78c03 100644
--- a/src/views/detections/overview/ThresholdOverview.vue
+++ b/src/views/detections/overview/ThresholdOverview.vue
@@ -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>
diff --git a/src/views/detections/overview/detectionDetailMixin.js b/src/views/detections/overview/detectionDetailMixin.js
index bb662be8..c61535d1 100644
--- a/src/views/detections/overview/detectionDetailMixin.js
+++ b/src/views/detections/overview/detectionDetailMixin.js
@@ -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 () {