CN-1690 fix: 1、detection聚合模式下indicator详情的时间字段修改；2、threshold详情折线图悬浮框小球颜色修改

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
   }
 }

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>

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">

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({