feat: 1、优化detection详情折线图y周数值过大转单位显示；2、列表若为active，时间显示Last Time，否则位End Time；3、列表持续时间小于10s的显示 lasting a few seconds；4、unordered）sequence 两种类型的数据，保留Time，取Recv_time的值。

2024-08-27 17:10:25 +08:00
parent 696f5d5262
commit d693885f7a
8 changed files with 82 additions and 11 deletions
--- a/src/assets/css/components/views/detections/detection-overview.scss
+++ b/src/assets/css/components/views/detections/detection-overview.scss
@@ -176,6 +176,11 @@ $color-regular: var(--el-text-color-regular);
  .overview__left-new {
    flex: 0 0 100%;
  }
+
+  .detection-detail__loading {
+    width: 100%;
+    padding-bottom: 60px;
+  }
 }
 .overview__row-timeline {
  display: flex;
--- a/src/views/detections/DetectionRow.vue
+++ b/src/views/detections/DetectionRow.vue
@@ -34,15 +34,17 @@
              </div>
              <div class="basic-info__item">
                <i class="cn-icon cn-icon-time2"></i>
-                <span>{{$t('detection.list.endTime')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span v-if="parseInt(detection.status) === 0">{{$t('detection.lastTime')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span v-if="parseInt(detection.status) === 1">{{$t('detection.list.endTime')}}&nbsp;:&nbsp;&nbsp;</span>
                <span>{{dateFormatByAppearance(detection.endTime) || '-'}}</span>
              </div>
              <div class="basic-info__item">
                <i class="cn-icon cn-icon-duration"></i>
                <span>{{$t('overall.duration')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>
+                <span v-if="parseInt(detection.durationS) > 10">
                  {{unitConvert(parseInt(detection.durationS), 'time', 's', null, 0).join(' ') || '-'}}
                </span>
+                <span v-if="parseInt(detection.durationS) <= 10">{{ $t('detection.list.lastingSeconds')}}</span>
                <div v-if="parseInt(detection.status) === 0" class="margin-l-10 detection-row-active">{{$t('detections.active')}}</div>
              </div>
            </div>
--- a/src/views/detections/DetectionRowEvents.vue
+++ b/src/views/detections/DetectionRowEvents.vue
@@ -34,7 +34,8 @@
              </div>
              <div class="basic-info__item">
                <i class="cn-icon cn-icon-time2"></i>
-                <span>{{$t('detection.lastTime')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span v-if="parseInt(detection.status) === 0">{{$t('detection.lastTime')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span v-if="parseInt(detection.status) === 1">{{$t('detection.list.endTime')}}&nbsp;:&nbsp;&nbsp;</span>
                <span>{{dateFormatByAppearance(detection.endTime) || '-'}}</span>
              </div>
            </div>
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -487,6 +487,25 @@ export const lineOption = {
  yAxis: {
    splitLine: {
      show: false
+    },
+    scale: true,
+    axisLabel: {
+      formatter: function (value) {
+        switch (true) {
+          case (value < 1000): {
+            return value
+          }
+          case ((value / (1000)) >= 1): {
+            return (value / (1000)).toFixed(1) + 'k'
+          }
+          case (value / (10000)) >= 1: {
+            return (value / (10000)).toFixed(1) + 'w'
+          }
+          case (value / (10000000)) >= 1: {
+            return (value / (10000000)).toFixed(1) + 'kw'
+          }
+        }
+      }
    }
  },
  grid: {
--- a/src/views/detections/overview/EventsTimeline.vue
+++ b/src/views/detections/overview/EventsTimeline.vue
@@ -35,14 +35,17 @@ export default {
    timeFilter: {
      type: Object
    },
-    timeData: Array
+    timeData: Array,
+    lineWidth: { // 时间轴宽度
+      type: Number,
+      default: 520
+    }
  },
  data () {
    return {
      timeLine: [],
      myTimeData: [],
      activeCircle: 0,
-      lineWidth: 520, // 时间轴宽度
      isTransform: false // 时间轴label是否旋转标识，文字高度超出16即为换行，将文字旋转角度
    }
  },
--- a/src/views/detections/overview/SequenceOverview.vue
+++ b/src/views/detections/overview/SequenceOverview.vue
@@ -16,7 +16,7 @@
      <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'">
+          <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)">
@@ -35,7 +35,7 @@
          <div class="row__label">Time</div>
          <div class="row__content">
            <i class="cn-icon cn-icon-time2 row__content__icon"></i>
-            {{ myDetection.startTime ? dateFormatByAppearance(myDetection.startTime) : '-' }}
+            {{ obj.recv_time ? dateFormatByAppearance(obj.recv_time) : '-' }}
          </div>
        </div>
      </div>
--- a/src/views/detections/overview/ThresholdOverview.vue
+++ b/src/views/detections/overview/ThresholdOverview.vue
@@ -29,7 +29,7 @@
        <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" @change="changeTimeline"></events-timeline>
+            <events-timeline :timeFilter="timeFilter" :timeData="timeData" :lineWidth="lineWidth" @change="changeTimeline"></events-timeline>
          </div>
        </div>
      </div>
--- a/src/views/detections/overview/detectionDetailMixin.js
+++ b/src/views/detections/overview/detectionDetailMixin.js
@@ -6,6 +6,7 @@ import { getSeverityNumberColor, lineOption } from '@/views/detections/options/d
 import { markRaw } from 'vue'
 import * as echarts from 'echarts'
 import { getSeverityByCode } from '@/utils/tools'
+import Loading from '@/components/common/Loading'

 export default {
  props: {
@@ -25,9 +26,15 @@ export default {
      lineOption: lineOption,
      seriesDataNum: 0,
      mapColor: [],
-      markLineData: []
+      markLineData: [],
+      mapWidth: 550, // 折线图底部色条宽度
+      lineWidth: 520, // 时间轴宽度
+      loading: true
    }
  },
+  components: {
+    Loading
+  },
  computed: {
    // 下拉详情的描述
    handleDescription () {
@@ -67,6 +74,7 @@ export default {
  },
  methods: {
    initData () {
+      this.loading = true
      this.myDetection = this.detection
      if (this.eventFlag === detectionEventType.aggregation) {
        this.isGroup = 1
@@ -90,6 +98,8 @@ export default {
          }
        }).catch(e => {
          this.$message.error(this.errorMsgHandler(e))
+        }).finally(() => {
+          this.loading = false
        })
      } else {
        this.isGroup = 0
@@ -115,7 +125,7 @@ export default {
          } else {
            const data = res.data.data.result
            if (data && data.length > 0) {
-              const detailData = res.data.data.result.pop()
+              const detailData = this.$_.cloneDeep(res.data.data.result).pop()
              if (detailData?.eventInfo) {
                detailData.eventInfoList = JSON.parse(detailData.eventInfo)
              }
@@ -126,9 +136,12 @@ export default {
      }).catch(e => {
        console.error(e)
        this.$message.error(this.errorMsgHandler(e))
+      }).finally(() => {
+        this.loading = false
      })
    },
    changeTimeline (e) {
+      this.loading = true
      const params = {
        startTime: getSecond(this.timeFilter.startTime),
        endTime: getSecond(this.timeFilter.endTime),
@@ -160,6 +173,8 @@ export default {
      }).catch(e => {
        console.error(e)
        this.$message.error(this.errorMsgHandler(e))
+      }).finally(() => {
+        this.loading = false
      })
    },
    // 挂载echarts折线图
@@ -194,6 +209,32 @@ export default {
          }
        }
      })
+
+      // 计算折线图左侧宽度
+      const maxValue = Math.max(...data.map(obj => obj.recordsNum))
+      if (maxValue >= 1000) {
+        let yAxisLabel = '' // y轴显示的值
+        if ((maxValue / (1000)) >= 1) {
+          yAxisLabel = (maxValue / (1000)).toFixed(1) + 'k'
+        } else if ((maxValue / (10000)) >= 1) {
+          yAxisLabel = (maxValue / (10000)).toFixed(1) + 'w'
+        } else if ((maxValue / (10000000)) >= 1) {
+          yAxisLabel = (maxValue / (10000000)).toFixed(1) + 'kw'
+        }
+
+        const labelLength = yAxisLabel.length - 4
+        if (labelLength > 0) {
+          // 默认显示最大的9.9w，即距离左边距30px，超出部分的每个字符8px宽度
+          this.lineOption.grid.left = (30 + labelLength * 8) + 'px'
+          this.mapWidth = 550 - (labelLength * 8)
+          this.lineWidth = 520 - (labelLength * 8)
+        }
+      } else {
+        this.lineOption.grid.left = '30px'
+        this.mapWidth = 550
+        this.lineWidth = 520
+      }
+
      this.lineOption.series[0].data = seriesData

      this.seriesDataNum = seriesData.length
@@ -228,7 +269,7 @@ export default {
      data.forEach((item, index) => {
        let width = 0
        if (index > 0) {
-          width = ((item.startTime - data[index - 1].startTime) / diffTime) * 550
+          width = ((item.startTime - data[index - 1].startTime) / diffTime) * this.mapWidth
        }
        this.mapColor.push({
          color: getSeverityNumberColor(item.severity),