fix: 1、detection详情添加loading；2、修复数据过多时，detection的threshold详情折线图切换加载错误的问题

src/assets/css/components/views/detections/detection-overview.scss

@@ -176,11 +176,6 @@ $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;
@@ -329,3 +324,15 @@ $color-regular: var(--el-text-color-regular);
   color: var(--el-text-color-primary);
   font-weight: 400;
 }
+
+.detection-detail__loading {
+  width: 100%;
+  height: 200px;
+  position: relative;
+
+  .detail__loading {
+    position: absolute;
+    top: -100px;
+    width: 100%;
+  }
+}

src/views/detections/overview/IndicatorMatchOverview.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="detection-detail-overview">
+  <div class="detection-detail__loading" v-if="loading">
+    <loading :loading="loading" class="detail__loading"></loading>
+  </div>
+  <div class="detection-detail-overview" v-if="!loading">
     <div class="overview__left overview__left-new">
       <div class="overview__title">{{ $t('overall.remark') }}</div>
       <div class="overview__row">

src/views/detections/overview/SequenceOverview.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="detection-detail-overview">
+  <div class="detection-detail__loading" v-if="loading">
+    <loading :loading="loading" class="detail__loading"></loading>
+  </div>
+  <div class="detection-detail-overview" v-if="!loading">
     <div class="overview__left overview__left-new">
       <div class="overview__title">{{ $t('overall.remark') }}</div>
       <div class="overview__row">

src/views/detections/overview/ThresholdOverview.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="detection-detail-overview">
+  <div class="detection-detail__loading" v-if="loading">
+    <loading :loading="loading" class="detail__loading"></loading>
+  </div>
+  <div class="detection-detail-overview" v-if="!loading">
     <div class="overview__left overview__left-new">
       <div class="overview__title">{{ $t('overall.remark') }}</div>
       <div class="overview__row">
@@ -42,7 +45,7 @@
       <div class="overview__title">{{ $t('overall.summary') }}</div>
       <div class="overview__row overview__row__display">
         <div class="row__content1">
-          <div class="row__content__charts" :id="`myChart${detection.eventId}`"></div>
+          <div class="row__content__charts" :ref="`myChart${myDetection.eventId}`" :id="`myChart${myDetection.eventId}`"></div>
         </div>
         <div class="row__content1" v-if="seriesDataNum>1">
           <div class="charts__visual__map">

src/views/detections/overview/detectionDetailMixin.js

@@ -106,6 +106,7 @@ export default {
         })
       } else {
         this.isGroup = 0
+        this.loading = false
       }
 
       const params = {
@@ -123,7 +124,9 @@ export default {
             const data = res.data.data.result
             if (data && data.length > 0) {
               this.handleMapColor(data)
-              this.handleLineChart(data)
+              this.$nextTick(() => {
+                this.handleLineChart(data)
+              })
             }
           } else {
             const data = res.data.data.result
@@ -140,7 +143,7 @@ export default {
         console.error(e)
         this.$message.error(this.errorMsgHandler(e))
       }).finally(() => {
-        this.loading = false
+        // this.loading = false
       })
     },
     changeTimeline (e) {
@@ -159,7 +162,9 @@ export default {
           if (data && data.length > 0) {
             if (this.detection.ruleType === detectionRuleType.threshold.key) {
               this.handleMapColor(data)
-              this.handleLineChart(data)
+              this.$nextTick(() => {
+                this.handleLineChart(data)
+              })
             }
             const detailData = data[0]
             if (detailData?.eventInfo) {
@@ -174,6 +179,7 @@ export default {
             }
             detailData.status = detailData.eventStatus || e.eventStatus
             this.myDetection = { ...this.myDetection, ...detailData }
+            this.myDetection.eventId = e.eventId
           }
         }
       }).catch(e => {
@@ -188,6 +194,15 @@ export default {
       if (this.myChart) {
         this.myChart.dispose()
       }
+      const chartDom = this.$refs['myChart' + this.myDetection.eventId]
+      if (!chartDom) {
+        const timer = setTimeout(() => {
+          clearTimeout(timer)
+          this.handleLineChart(data)
+        }, 200)
+        return true
+      }
+      this.myChart = markRaw(echarts.init(chartDom))
       const seriesData = []
       const markLineData = []
       data.forEach(item => {
@@ -250,7 +265,6 @@ export default {
       } else {
         this.lineOption.series[0].symbol = 'none'
       }
-      this.myChart = markRaw(echarts.init(document.getElementById('myChart' + this.detection.eventId)))
       this.myChart.setOption(this.lineOption)
     },
     /** 高亮markLine */
@@ -284,5 +298,10 @@ export default {
         })
       })
     }
+  },
+  beforeUnmount () {
+    if (this.myChart) {
+      this.myChart.dispose()
+    }
   }
 }