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

2024-08-19 15:48:46 +08:00
parent bc8a704088
commit 744e47fd89
3 changed files with 72 additions and 15 deletions
--- a/src/views/detections/options/detectionOptions.js
+++ b/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: {
--- a/src/views/detections/overview/EventsTimeline.vue
+++ b/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
-            :class="index===activeCircle ? 'circle__item-active' : 'circle__item'"
-            :style="`margin-left: ${item.marginLeft};`"
-            @click="onChange(item, index)"></div>
+        <el-tooltip :content="changeTimestampToTime(item.statTime)" placement="top" effect="light">
+          <div
+              :class="index===activeCircle ? 'circle__item-active' : 'circle__item'"
+              :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>
--- a/src/views/detections/overview/detectionDetailMixin.js
+++ b/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)