From 6a1cc219c29a28fd863d4e38aee3e2ddeb05bfed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Fri, 23 Aug 2024 17:52:54 +0800
Subject: [PATCH] =?UTF-8?q?CN-1690=20fix:=201=E3=80=81detection=E8=81=9A?=
 =?UTF-8?q?=E5=90=88=E6=A8=A1=E5=BC=8F=E4=B8=8Bindicator=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E7=9A=84=E6=97=B6=E9=97=B4=E5=AD=97=E6=AE=B5=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=EF=BC=9B2=E3=80=81threshold=E8=AF=A6=E6=83=85=E6=8A=98?=
 =?UTF-8?q?=E7=BA=BF=E5=9B=BE=E6=82=AC=E6=B5=AE=E6=A1=86=E5=B0=8F=E7=90=83?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detections/options/detectionOptions.js    |  9 +++++++-
 .../detections/overview/EventsTimeline.vue    | 23 +++++++++++++------
 .../overview/IndicatorMatchOverview.vue       |  2 +-
 .../overview/detectionDetailMixin.js          | 11 ++++++---
 4 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js
index ebd50099..19aec869 100644
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -516,6 +516,13 @@ export const lineOption = {
     }
   ],
   tooltip: {
-    trigger: 'axis'
+    trigger: 'axis',
+    formatter: function (params) {
+      const param = JSON.parse(JSON.stringify(params[0]))
+      param.marker = param.marker.replace('#ff9a79', param.data[2])
+      const str = `<div style="display: flex;justify-content: space-between"><div>${param.marker}${param.seriesName}</div><div>${param.data[1]}</div></div>`
+      return `${param.axisValueLabel}<br />${str}`
+    },
+    show: true
   }
 }
diff --git a/src/views/detections/overview/EventsTimeline.vue b/src/views/detections/overview/EventsTimeline.vue
index 26cec300..e49c2018 100644
--- a/src/views/detections/overview/EventsTimeline.vue
+++ b/src/views/detections/overview/EventsTimeline.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="events-timeline">
     <div class="timeline__circle">
-      <div v-for="(item, index) in myTimeData" :key="item.statTime">
-        <el-tooltip :content="changeTimestampToTime(item.statTime)" placement="top" effect="light">
+      <div v-for="(item, index) in myTimeData" :key="item.endTime">
+        <el-tooltip :content="changeTimestampToTime(item.endTime)" placement="top" effect="light">
           <div
               :class="index===activeCircle ? 'circle__item-active' : 'circle__item'"
               :style="`margin-left: ${item.marginLeft};`"
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="timeline__line margin-l-30"></div>
-    <div class="timeline-container margin-l-30" id="timeline-container">
+    <div class="timeline-container margin-l-25" id="timeline-container">
       <div v-for="item in timeLine" :key="item.time" :style="{width: item.isYear ? '5px' : 'auto'}">
         <div v-if="item.showFlag" :class="handleTransformClass(item.isYear)">{{ item.time }}</div>
       </div>
@@ -218,7 +218,12 @@ export default {
     // 时间轴红点的点击事件，添加防抖处理
     onChange: throttle(function (e, index) {
       this.activeCircle = index
-      this.$emit('change', e.eventId)
+      const param = {
+        eventId: e.eventId,
+        startTime: e.startTime,
+        endTime: e.endTime / 1000
+      }
+      this.$emit('change', param)
     }, 500),
     // onChange (e, index) {
     //   this.activeCircle = index
@@ -236,8 +241,8 @@ export default {
       this.myTimeData = this.$_.cloneDeep(this.timeData)
       this.activeCircle = this.myTimeData.length - 1
       this.myTimeData.forEach((item, index) => {
-        item.statTime = getMillisecond(item.statTime)
-        item.lastTime = this.$_.cloneDeep(item.statTime)
+        item.endTime = getMillisecond(item.endTime)
+        item.lastTime = this.$_.cloneDeep(item.endTime)
         let minutes = new Date(item.lastTime).getMinutes()
         let hours = new Date(item.lastTime).getHours()
         minutes = minutes < 10 ? '0' + minutes : minutes
@@ -248,7 +253,7 @@ export default {
 
         if (index === 0) {
           let marginLeft = this.lineWidth - ((item.itemDiffTime / item.diffTime) * this.lineWidth)
-          marginLeft = Math.round(marginLeft) + 27 + 'px' // 20px的左边距+小球半径7px
+          marginLeft = Math.round(marginLeft) + 34 + 'px' // 20px的左边距+小球直径14px
           item.marginLeft = marginLeft
         } else {
           // 从第二个开始计算距离上一个球的距离，并减去上一个球的直径
@@ -336,5 +341,9 @@ export default {
   .margin-l-30 {
     margin-left: 30px;
   }
+
+  .margin-l-25 {
+    margin-left: 25px;
+  }
 }
 </style>
diff --git a/src/views/detections/overview/IndicatorMatchOverview.vue b/src/views/detections/overview/IndicatorMatchOverview.vue
index be94bff8..c26efb5d 100644
--- a/src/views/detections/overview/IndicatorMatchOverview.vue
+++ b/src/views/detections/overview/IndicatorMatchOverview.vue
@@ -26,7 +26,7 @@
         <div class="row__label">{{ $t('overall.duration') }}</div>
         <div class="row__content">
           <i class="cn-icon cn-icon-duration row__content__icon"></i>
-          {{ unitConvert(parseInt(detection.durationS), 'time', 's', null, 0).join(' ') || '-' }}
+          {{ unitConvert(parseInt(myDetection.durationS), 'time', 's', null, 0).join(' ') || '-' }}
         </div>
       </div>
       <div class="overview__row">
diff --git a/src/views/detections/overview/detectionDetailMixin.js b/src/views/detections/overview/detectionDetailMixin.js
index 2cefed92..73b9846e 100644
--- a/src/views/detections/overview/detectionDetailMixin.js
+++ b/src/views/detections/overview/detectionDetailMixin.js
@@ -82,7 +82,7 @@ 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.statTime - b.statTime)
+            timeData.sort((a, b) => a.endTime - b.endTime)
             this.timeData = timeData
           }
         }).catch(e => {
@@ -133,7 +133,7 @@ export default {
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
-        eventId: e,
+        eventId: e.eventId,
         ruleType: this.detection.ruleType,
         resource: this.q,
         isGroup: this.isGroup
@@ -149,6 +149,11 @@ export default {
             if (detailData?.eventInfo) {
               detailData.eventInfoList = JSON.parse(detailData.eventInfo)
             }
+            if (!detailData.startTime) {
+              detailData.startTime = e.startTime
+              detailData.endTime = e.endTime
+              detailData.durationS = e.endTime - e.startTime
+            }
             this.myDetection = { ...this.myDetection, ...detailData }
           }
         }
@@ -165,7 +170,7 @@ export default {
       const seriesData = []
       const markLineData = []
       data.forEach(item => {
-        seriesData.push([getMillisecond(JSON.parse(item.startTime)), item.recordsNum])
+        seriesData.push([getMillisecond(JSON.parse(item.startTime)), item.recordsNum, getSeverityNumberColor(item.severity)])
         const obj = markLineData.find(d => d.yAxis === item.thresholdNum)
         if (!obj) {
           markLineData.push({