fix(测试跟踪): 只读用户-查看公共用例-依赖关系-前端报错

--bug=1027014 --user=白奇 【测试跟踪】只读用户-查看公共用例-依赖关系-前端报错 https://www.tapd.cn/55049933/s/1381690

framework/sdk-parent/frontend/src/components/graph/RelationshipGraphDrawer.vue

@@ -1,9 +1,20 @@
 <template>
   <el-drawer :visible="visible" append-to-body>
-    <ms-drawer :size="85" @close="close" direction="right" :show-full-screen="false"
-               :is-show-close="false" style="height: auto" ref="msDrawer">
+    <ms-drawer
+      :size="85"
+      @close="close"
+      direction="right"
+      :show-full-screen="false"
+      :is-show-close="false"
+      style="height: auto"
+      ref="msDrawer"
+    >
       <template v-slot:header>
-        <drawer-header :title="$t('commons.relationship.graph')" @close="close" @export="exportCharts"/>
+        <drawer-header
+          :title="$t('commons.relationship.graph')"
+          @close="close"
+          @export="exportCharts"
+        />
       </template>
       <div>
         <el-scrollbar class="graph-scrollbar">
@@ -13,7 +24,8 @@
             :data="graphData.data"
             :links="graphData.links"
             @finished="handleFinished"
-            ref="relationshipGraph"/>
+            ref="relationshipGraph"
+          />
         </el-scrollbar>
       </div>
     </ms-drawer>
@@ -27,18 +39,21 @@ import RelationshipGraph from "./RelationshipGraph";
 
 export default {
   name: "RelationshipGraphDrawer",
-  components: {RelationshipGraph, DrawerHeader, MsDrawer},
-  props: ['graphData'],
+  components: { RelationshipGraph, DrawerHeader, MsDrawer },
+  props: ["graphData"],
   data() {
     return {
       visible: false,
-      height: 'calc(100vh - 48px)',
-      width: 'calc(100vh - 240px)'
-    }
+      height: "calc(100vh - 48px)",
+      width: "calc(100vh - 240px)",
+    };
   },
   methods: {
     exportCharts(type) {
-      this.$refs.relationshipGraph.exportCharts(this.$t('commons.relationship.graph'), type);
+      this.$refs.relationshipGraph.exportCharts(
+        this.$t("commons.relationship.graph"),
+        type
+      );
     },
     open() {
       this.visible = true;
@@ -46,17 +61,17 @@ export default {
       this.$nextTick(() => {
         this.graphData.links.forEach((item) => {
           item.lineStyle = {
-            curveness: item.curveness * 2
+            curveness: item.curveness * 2,
           };
           item.emphasis = {
             lineStyle: {
               color: "#783887", //高亮颜色
-              width: 5
-            }
-          }
+              width: 5,
+            },
+          };
         });
 
-        this.height = 'calc(100vh - 48px)';
+        this.height = "calc(100vh - 48px)";
         this.width = null;
 
         let clientWidth = document.body.clientWidth;
@@ -83,17 +98,20 @@ 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
+      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;
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>