页面修改

src/pages/system/deptrelation.vue

 <template>
-  <div>
-    <div style="height:calc(100vh - 50px);">
+  <div class="page-body" style="width: calc(100% - 10px);height:calc(100vh - 50px);">
     <RelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick"
       :on-line-click="onLineClick" />
   </div>
-  </div>
 </template>
 
 <script>
@@ -28,9 +26,11 @@
             'defaultJunctionPoint': 'border',
             'defaultNodeShape': 0,
             'defaultLineShape': 1,
-            'min_per_width': 50,
-            'max_per_width': 70,
-            'min_per_height': 200
+            'min_per_width': 10,
+            'max_per_width': 60,
+            'min_per_height': 60,
+            'centerOffset_x': -180,
+            'centerOffset_y': -180,
           }],
           'defaultLineMarker': {
             'markerWidth': 12,
@@ -59,8 +59,16 @@
         getOrganizationChart({}).then(res => {
           if (res.Code == 1) {
             this.DeptList = res.Data;
-            this.$refs.seeksRelationGraph.setJsonData(this.DeptList, (seeksRGGraph) => {
-            })
+            if (this.DeptList && this.DeptList.nodes && this.DeptList.nodes.length > 0) {
+              this.DeptList.nodes.forEach(item => {
+                //判断是否是根节点
+                if (item.id == this.DeptList.rootId) {
+                  item.width = 120;
+                  item.height = 60;
+                }
+              });
+            }
+            this.$refs.seeksRelationGraph.setJsonData(this.DeptList, (seeksRGGraph) => {})
           }
         })
       },
@@ -72,4 +80,5 @@
       }
     }
   }
+
 </script>