From 8aa96da5777a4f556bbb381691b7877b2f734ed9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Wed, 18 Jan 2023 14:42:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=BB=8Enpm-events?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=B7=B3=E8=BD=AC=E8=87=B3detections-perform?=
 =?UTF-8?q?ance=20events=E5=B1=95=E5=BC=80tab=E4=BD=8D=E7=BD=AE=E4=B8=8D?=
 =?UTF-8?q?=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/detections/DetectionRow.vue | 39 ++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/views/detections/DetectionRow.vue b/src/views/detections/DetectionRow.vue
index f4e1c587..8d138be1 100644
--- a/src/views/detections/DetectionRow.vue
+++ b/src/views/detections/DetectionRow.vue
@@ -134,15 +134,7 @@ export default {
     }
   },
   mounted () {
-    if (this.$route.query.eventId) {
-      if (parseFloat(this.$route.query.eventId) === this.detection.eventId) {
-        const container = document.getElementById('cnContainer')
-        container.scrollTop = 555 + this.index * 97
-
-        this.isCollapse = false
-        this.$emit('switchCollapse', this.isCollapse, this.index)
-      }
-    }
+    this.initExpendTab()
   },
   computed: {
     iconClass () {
@@ -186,7 +178,7 @@ export default {
       this.$emit('switchCollapse', this.isCollapse, this.index)
 
       if (this.isCollapse) {
-        const newQuery = this.$route.query // 深拷贝路由数据
+        const newQuery = this.$route.query
         delete newQuery.eventId
         this.reloadUrl(newQuery, 'cleanOldParams')
       } else {
@@ -207,6 +199,33 @@ export default {
         newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
       }
       overwriteUrl(newUrl)
+    },
+    /**
+     * 初始化从npm跳转过来的id，并展开tab
+     */
+    initExpendTab () {
+      if (this.$route.query.eventId) {
+        if (parseFloat(this.$route.query.eventId) === this.detection.eventId) {
+          const container = document.getElementById('cnContainer')
+          const dom = document.getElementsByClassName('cn-detection__case')
+          // 未展开的item折叠块，高度67+下边距10+底部线高度1，兼容不同分辨率下的tab高度
+          let itemHeight = 78
+          if (dom && this.index > 0) {
+            itemHeight = dom[0].clientHeight + 11
+          }
+
+          let topHeight = 554 + this.index * itemHeight
+          // 经过测试对比，第7个以后的tab会往上移动，但是手动展开和自动展开tab的滚动条高度一致，为解决该问题，自动加上误差值
+          if (this.index > 6) {
+            topHeight = topHeight + 6
+          }
+
+          container.scrollTop = topHeight
+
+          this.isCollapse = false
+          this.$emit('switchCollapse', this.isCollapse, this.index)
+        }
+      }
     }
   }
 }