fix: 1、detection的threshold详情折线图添加阈值标线；2、detection聚合模式详情时间轴样式调整，文字过长旋转角度显示

src/views/detections/options/detectionOptions.js

@@ -471,7 +471,7 @@ export const lineOption = {
       show: false
     },
     axisLine: {
-      show: false
+      show: true
     },
     axisLabel: {
       formatter: xAxisTimeFormatter,
@@ -479,7 +479,9 @@ export const lineOption = {
     }
   },
   yAxis: {
-    // max: 100
+    splitLine: {
+      show: false
+    }
   },
   grid: {
     top: '12px',
@@ -493,7 +495,18 @@ export const lineOption = {
       data: [],
       type: 'line',
       color: '#ff9a79',
-      symbol: 'none'
+      symbol: 'none',
+      markLine: {
+        silent: true,
+        symbol: 'none',
+        lineStyle: {
+          color: ''
+        },
+        label: {
+          position: 'insideStartTop'
+        },
+        data: []
+      }
     }
   ],
   tooltip: {

src/views/detections/overview/EventsTimeline.vue

@@ -2,16 +2,18 @@
   <div class="events-timeline">
     <div class="timeline__circle">
       <div v-for="(item, index) in myTimeData" :key="index">
-        <div
+        <el-tooltip :content="changeTimestampToTime(item.statTime)" placement="top" effect="light">
-            :class="index===activeCircle ? 'circle__item-active' : 'circle__item'"
+          <div
-            :style="`margin-left: ${item.marginLeft};`"
+              :class="index===activeCircle ? 'circle__item-active' : 'circle__item'"
-            @click="onChange(item, index)"></div>
+              :style="`margin-left: ${item.marginLeft};`"
+              @click="onChange(item, index)"></div>
+        </el-tooltip>
       </div>
     </div>
     <div class="timeline__line"></div>
-    <div class="timeline-container">
+    <div class="timeline-container" id="timeline-container">
       <div v-for="(item, index) in timeLine" :key="index">
-        <div v-if="item.showFlag" style="color: #666;font-size: 12px;">{{ item.time }}</div>
+        <div v-if="item.showFlag" :class="isTransform ? 'timeline-item__transform' : 'timeline-item'">{{ item.time }}</div>
       </div>
     </div>
   </div>
@@ -46,7 +48,9 @@ export default {
         { eventId: '555', lastTime: 1722392580, startTime: 1722392580 },
         { eventId: '666', lastTime: 1722392880, startTime: 1722392880 }
       ],
-      activeCircle: 0
+      activeCircle: 0,
+      lineWidth: 550, // 时间轴宽度
+      isTransform: false // 时间轴label是否旋转标识，文字高度超出16即为换行，将文字旋转角度
     }
   },
   watch: {
@@ -71,6 +75,7 @@ export default {
     this.initDate('init')
   },
   methods: {
+    changeTimestampToTime,
     initDate (e) {
       // 切换页面进来时，timeFilter时间戳为秒而非毫秒
       const timeFilter = {
@@ -122,7 +127,8 @@ export default {
         const month = date.getMonth() + 1
         const day = date.getDate()
         const obj = {
-          time: `${date.getFullYear()}-${month < 10 ? ('0' + month) : month}-${day < 10 ? ('0' + day) : day}`,
+          // time: `${date.getFullYear()}-${month < 10 ? ('0' + month) : month}-${day < 10 ? ('0' + day) : day}`,
+          time: `${month < 10 ? ('0' + month) : month}-${day < 10 ? ('0' + day) : day}`,
           time1: changeTimestampToTime(timestamp).substring(0, changeTimestampToTime(timestamp).length - 3),
           showFlag: false
         }
@@ -254,15 +260,24 @@ export default {
         item.itemDiffTime = (timeFilter.endTime - item.lastTime) / 1000
 
         if (index === 0) {
-          let marginLeft = 500 - ((item.itemDiffTime / item.diffTime) * 500)
+          let marginLeft = this.lineWidth - ((item.itemDiffTime / item.diffTime) * this.lineWidth)
           marginLeft = Math.round(marginLeft) + 8 + 'px'
           item.marginLeft = marginLeft
         } else {
-          let marginLeft = ((this.myTimeData[index - 1].itemDiffTime - item.itemDiffTime) / item.diffTime) * 500
+          let marginLeft = ((this.myTimeData[index - 1].itemDiffTime - item.itemDiffTime) / item.diffTime) * this.lineWidth
           marginLeft = (Math.round(marginLeft) - 13) + 'px'
           item.marginLeft = marginLeft
         }
       })
+      this.handleTimelineLabel()
+    },
+    /** 判断文字过长，旋转角度显示 */
+    handleTimelineLabel () {
+      const dom = document.getElementById('timeline-container')
+      if (dom) {
+        const height = dom.clientHeight
+        this.isTransform = height > 20
+      }
     }
   }
 }
@@ -270,7 +285,7 @@ export default {
 
 <style lang="scss">
 .events-timeline {
-  width: 500px;
+  width: 580px;
 
   .timeline__circle {
     display: flex;
@@ -299,6 +314,20 @@ export default {
     background-color: rgba(255, 255, 255, 0.50);
     display: flex;
     justify-content: space-between;
+
+    .timeline-item {
+      font-size: 12px;
+      color: var(--el-text-color-regular);
+    }
+
+    .timeline-item__transform {
+      font-size: 12px;
+      color: var(--el-text-color-regular);
+      transform: rotate(-40deg);
+      transform-origin: 20px 20px;
+      margin-left: -25px;
+      margin-bottom: 12px;
+    }
   }
 }
 </style>

src/views/detections/overview/detectionDetailMixin.js

@@ -1,10 +1,11 @@
-import { detectionEventType, detectionRuleType, EN, storageKey, ZH } from '@/utils/constants'
+import { detectionEventType, detectionRuleType, EN, storageKey, unitTypes, ZH } from '@/utils/constants'
 import { getMillisecond, getSecond } from '@/utils/date-util'
 import axios from 'axios'
 import { api } from '@/utils/api'
 import { getSeverityNumberColor, lineOption } from '@/views/detections/options/detectionOptions'
 import { markRaw } from 'vue'
 import * as echarts from 'echarts'
+import { getSeverityByCode } from '@/utils/tools'
 
 export default {
   props: {
@@ -153,8 +154,13 @@ export default {
         this.myChart.dispose()
       }
       const seriesData = []
+      const markLineData = []
       data.forEach(item => {
         seriesData.push([getMillisecond(JSON.parse(item.startTime)), item.recordsNum])
+        const obj = markLineData.find(d => d.yAxis === item.thresholdNum)
+        if (!obj) {
+          markLineData.push({ yAxis: item.thresholdNum })
+        }
       })
       this.lineOption.series[0].data = seriesData
       this.lineOption.series[0].color = getSeverityNumberColor(data[0].severity) || '#ff9a79'
@@ -166,6 +172,15 @@ export default {
       } else {
         this.lineOption.series[0].symbol = 'none'
       }
+      this.lineOption.series[0].markLine.data = markLineData
+      this.lineOption.series[0].markLine.lineStyle.color = getSeverityNumberColor(data[0].severity)
+      this.lineOption.series[0].markLine.label = {
+        position: 'insideStartTop',
+        color: '#999',
+        formatter (params) {
+          return `${getSeverityByCode(data[0].severity)}: ${params.value}`
+        }
+      }
 
       this.myChart = markRaw(echarts.init(document.getElementById('myChart' + this.detection.eventId)))
       this.myChart.setOption(this.lineOption)