From 0ed71bc9ec42f301bddc158608435d94c0710d8b Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Fri, 5 May 2023 14:51:13 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):?=
 =?UTF-8?q?=20=E9=80=89=E6=8B=A9=E7=94=A8=E4=BE=8B=E8=BE=83=E5=A4=9A?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E4=BE=9D=E8=B5=96=E5=85=B3=E7=B3=BB=E5=9B=BE?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1025898 --user=陈建星 【测试跟踪】功能用例关联的用例太多时，页面查看依赖关系是空白的 https://www.tapd.cn/55049933/s/1368661
---
 .../frontend/src/components/chart/MsChart.vue   |  1 +
 .../src/components/graph/RelationshipGraph.vue  |  8 +++++++-
 .../graph/RelationshipGraphDrawer.vue           | 17 ++++++++++++++---
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/framework/sdk-parent/frontend/src/components/chart/MsChart.vue b/framework/sdk-parent/frontend/src/components/chart/MsChart.vue
index c5e99bf00b..fb079e89d3 100644
--- a/framework/sdk-parent/frontend/src/components/chart/MsChart.vue
+++ b/framework/sdk-parent/frontend/src/components/chart/MsChart.vue
@@ -9,6 +9,7 @@
       :group="group"
       @click="onClick"
       @datazoom="datazoom"
+      @finished="$emit('finished')"
       v-on="$listeners"
       :watch-shallow="watchShallow"
       :manual-update="manualUpdate"
diff --git a/framework/sdk-parent/frontend/src/components/graph/RelationshipGraph.vue b/framework/sdk-parent/frontend/src/components/graph/RelationshipGraph.vue
index dcba13a391..e6c08ceef2 100644
--- a/framework/sdk-parent/frontend/src/components/graph/RelationshipGraph.vue
+++ b/framework/sdk-parent/frontend/src/components/graph/RelationshipGraph.vue
@@ -1,5 +1,11 @@
 <template>
-  <ms-chart v-if="visible" :options="options" :height="height" :width="width" ref="msChart"/>
+  <ms-chart
+    v-if="visible"
+    :options="options"
+    :height="height"
+    :width="width"
+    @finished="$emit('finished')"
+    ref="msChart"/>
 </template>
 
 <script>
diff --git a/framework/sdk-parent/frontend/src/components/graph/RelationshipGraphDrawer.vue b/framework/sdk-parent/frontend/src/components/graph/RelationshipGraphDrawer.vue
index 4364474953..fc420d9736 100644
--- a/framework/sdk-parent/frontend/src/components/graph/RelationshipGraphDrawer.vue
+++ b/framework/sdk-parent/frontend/src/components/graph/RelationshipGraphDrawer.vue
@@ -6,9 +6,14 @@
         <drawer-header :title="$t('commons.relationship.graph')" @close="close" @export="exportCharts"/>
       </template>
       <div>
-        <el-scrollbar>
-          <relationship-graph :height="height" :width="width" :data="graphData.data" :links="graphData.links"
-                              ref="relationshipGraph"/>
+        <el-scrollbar class="graph-scrollbar">
+          <relationship-graph
+            :height="height"
+            :width="width"
+            :data="graphData.data"
+            :links="graphData.links"
+            @finished="handleFinished"
+            ref="relationshipGraph"/>
         </el-scrollbar>
       </div>
     </ms-drawer>
@@ -73,6 +78,12 @@ export default {
         });
       });
     },
+    handleFinished() {
+      // 滚动条设置居中
+      let graphScrollbar = document.querySelector('.graph-scrollbar .el-scrollbar__wrap');
+      let graphScrollbarView = document.querySelector('.graph-scrollbar .el-scrollbar__wrap .ms-chart');
+      graphScrollbar.scrollLeft = (graphScrollbarView.clientWidth - graphScrollbar.clientWidth)/2
+    },
     close() {
       this.visible = false;
     }