From f77b3abacd719bc81b046af0a0d3b6638d1132d6 Mon Sep 17 00:00:00 2001
From: hyx <hanyuxia@iie.ac.cn>
Date: Tue, 24 May 2022 18:50:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E4=BD=93=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=EF=BC=9A=E4=BF=AE=E6=94=B9=E5=B7=A6=E4=BE=A7=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E9=A1=B5=E9=9D=A2=E7=9A=84=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E6=96=B9=E6=B3=95=EF=BC=88=E6=94=B9=E4=B8=BAscrollIntoView?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/charts/PanelChartList.vue       |  2 +-
 src/views/entityExplorer/EntityDetail.vue | 46 ++++++++++-------------
 2 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/views/charts/PanelChartList.vue b/src/views/charts/PanelChartList.vue
index c41148c2..06ba52f9 100644
--- a/src/views/charts/PanelChartList.vue
+++ b/src/views/charts/PanelChartList.vue
@@ -179,7 +179,7 @@ export default {
     anchorPoint () {
       return function (chart) {
         if (!_.isEmpty(chart.params && chart.params.anchorPoint)) {
-          return { 'anchor-point': chart.params.anchorPoint }
+          return { id: chart.params.anchorPoint }
         } else {
           return ''
         }
diff --git a/src/views/entityExplorer/EntityDetail.vue b/src/views/entityExplorer/EntityDetail.vue
index 71b0358d..4e41ba4c 100644
--- a/src/views/entityExplorer/EntityDetail.vue
+++ b/src/views/entityExplorer/EntityDetail.vue
@@ -6,8 +6,8 @@
     </div>
     <main class="cn-body entity-detail__body">
       <div class="entity-detail__menu">
-        <template v-for="anchor in anchorPoints" :key="anchor.id">
-          <div class="menu-item" :class="{'menu-item--active': menuIsActive(anchor)}" @click="jumpToAnchor(anchor)">
+        <template v-for="(anchor,index) in anchorPoints" :key="anchor.id">
+          <div class="menu-item" :class="{'menu-item--active':anchor.isActive}" @click="jumpToAnchor(index,anchor)">
             <span>{{anchor.label}}</span>
           </div>
         </template>
@@ -37,7 +37,8 @@ export default {
       anchorPoints: [], // { id, label, top, height }
       top: 0,
       scrollHeight: 0,
-      clientHeight: 0
+      clientHeight: 0,
+      currentAnchor: 0
     }
   },
   setup (props, ctx) {
@@ -78,17 +79,19 @@ export default {
       const panelDom = document.querySelector('#detailWrapper')
       this.scrollHeight = panelDom.scrollHeight
       this.clientHeight = panelDom.clientHeight
-      chartList.forEach(chart => {
+      chartList.forEach((chart, index) => {
         if (chart.params.anchorPoint) {
-          const dom = document.querySelector(`[anchor-point='${chart.params.anchorPoint}']`)
+          const dom = document.querySelector(`[id='${chart.params.anchorPoint}']`)
           dom && anchorPoints.push({
             id: chart.params.anchorPoint,
+            isActive: index === 0,
             label: chart.i18n ? this.$t(chart.i18n) : chart.name,
             top: dom.offsetTop + 10/* ,
             height: document.querySelector(`#${chart.params.anchorPoint}}`).scrollHeight */
           })
         }
       })
+
       // 从小到大排序
       anchorPoints = anchorPoints.sort((a, b) => {
         return a.top - b.top
@@ -101,9 +104,18 @@ export default {
     scroll (e) {
       this.top = (e.target.scrollTop + 10) || 0
     },
-    jumpToAnchor (anchor) {
-      this.top = anchor.top
-      document.querySelector('#detailWrapper').scrollTop = this.top
+    jumpToAnchor (index, anchor) {
+      const anchorEle = document.getElementById(anchor.id)
+      this.anchorPoints.forEach((anchor, i) => {
+        if (index === i) {
+          anchor.isActive = true
+        } else {
+          anchor.isActive = false
+        }
+      })
+      if (anchorEle) {
+        anchorEle.scrollIntoView()
+      }
     },
     resize () {
       this.chartLoaded(this.chartList)
@@ -135,24 +147,6 @@ export default {
         default: break
       }
       return className
-    },
-    menuIsActive () {
-      return function (anchor) {
-        return this.currentAnchor ? this.currentAnchor.id === anchor.id : false
-      }
-    },
-    currentAnchor () {
-      let currentAnchor = null
-      if (this.top + this.clientHeight - 10 === this.scrollHeight) {
-        currentAnchor = this.anchorPoints[this.anchorPoints.length - 1]
-      } else {
-        this.anchorPoints.forEach(anchor => {
-          if (anchor.top <= this.top) {
-            currentAnchor = anchor
-          }
-        })
-      }
-      return currentAnchor
     }
   }
 }