关系图调整

src/index.less

@@ -118,7 +118,7 @@ div[id^='__qiankun_microapp_wrapper_'] {
 }
 
 .yy-table-tbody > tr > td  {
-  padding: 19px 8px !important;
+  padding: 14px 8px !important;
 }
 
 .yy-table-tbody > .yy-table-measure-row > td  {

src/view/Manage/AssetBrowse/Component/Relation.jsx

@@ -3,11 +3,16 @@ import React from 'react';
 import Chart from '@antv/chart-node-g6';
 import G6 from '@antv/g6';
 
-import actionImg from '../assets/1.png';
+import centerImg from '../assets/center.png';
+import expandImg from '../assets/expand.png';
+import { expand } from 'rxjs';
 
 const raduis = 50, innerRaduis = 20, imageWidth = 20;
 const textFontSize = 8;
 
+const secondaryColors = ['#d1a4e4', '#92d6c9', '#7c94dd', '#6d96ff', '#6dc3ff', '#ff9366', '#ff867d', '#ff89c1', '#ff7444', '#e4a4cb'];
+const secondaryHighlightColors = ['#b36cd1', '#48b5a0', '#4a6acc', '#356eff', '#37adff', '#ff7339', '#ff7065', '#ff60ab', '#ff6733', '#e56db6'];
+
 class Relation extends React.Component {
 
   // componentDidMount() {
@@ -53,9 +58,14 @@ export default Relation;
 const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
   const width = container.scrollWidth;
   const height = container.scrollHeight;
-
   G6.registerNode('tree-node', {
     drawShape: function drawShape(cfg, group) {
+      let circleColor = '#D65DB1', circleHighlightColor = '#D65DB1';
+      if (cfg?.levelId && cfg?.levelId.split('-').length > 1) {
+        const index = cfg?.levelId.split('-')[1];
+        circleColor = secondaryColors[index%secondaryColors.length];
+        circleHighlightColor = secondaryHighlightColors[index%secondaryHighlightColors.length];
+      }
 
       const keyShape = group.addShape('circle', {
         attrs: {
@@ -83,15 +93,17 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
   
         view.data(data);
   
-        view.coordinate('theta', {
-          radius: 1.0,
-          innerRadius: 0.45
-        });
+        view
+          .coordinate('theta', {
+            radius: 1.0,
+            innerRadius: 0.45
+          })
+          .rotate(Math.PI * 0.5);
         view
           .interval()
           .adjust('stack')
           .position('value')
-          .color('#b9b9b9')
+          .color(circleHighlightColor)
           .style({
             stroke: 'white',
             lineWidth: 5,
@@ -117,24 +129,24 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
       
         const imageShape1 = group.addShape('image', {
           attrs: {
-            x: (raduis - innerRaduis)/2 - imageWidth/2,
-            y: raduis-imageWidth/2,
+            x: raduis-imageWidth/2,
+            y: (raduis - innerRaduis)/2 - imageWidth/2,
             width: imageWidth,
             height: imageWidth,
             cursor: 'pointer',
-            img: actionImg,
+            img: centerImg,
           },
           name: 'center-icon',
         });
   
         const imageShape2 = group.addShape('image', {
           attrs: {
-            x: raduis + innerRaduis + (raduis - innerRaduis)/2 - imageWidth/2,
-            y: raduis-imageWidth/2,
+            x: raduis-imageWidth/2,
+            y: raduis + innerRaduis + (raduis - innerRaduis)/2 - imageWidth/2,
             height: imageWidth,
             width: imageWidth,
             cursor: 'pointer',
-            img: actionImg,
+            img: expandImg,
           },
           name: 'expand-icon',
         });
@@ -149,7 +161,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
           y: raduis,
           r: innerRaduis,
           lineWidth: 0,
-          fill: (cfg.simple)?'#F2F2F2':'#D65DB1',
+          fill: circleColor,
           fillOpacity: 1.0,
           stroke: '#fff',
           strokeOpacity: 0,
@@ -199,6 +211,14 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
         const pathShape3 = group.get('children')[3];
         const imageShape1 = group.get('children')[4];
         const imageShape2 = group.get('children')[5];
+        const circleShape = group.get('children')[6];
+
+        let circleColor = '#D65DB1', circleHighlightColor = '#D65DB1';
+        if (model?.levelId && model?.levelId.split('-').length > 1) {
+          const index = model?.levelId.split('-')[1];
+          circleColor = secondaryColors[index%secondaryColors.length];
+          circleHighlightColor = secondaryHighlightColors[index%secondaryHighlightColors.length];
+        }
 
         if (name === 'active') {
           if (value) {
@@ -209,6 +229,9 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
             pathShape3?.show();
             imageShape1?.show();
             imageShape2?.show();
+            circleShape?.attr('fill', circleHighlightColor);
+            circleShape?.attr('shadowOffsetY', 5);
+            circleShape?.attr('shadowColor', 'rgba(0,0,0,0.23)');
           } else {
             keyShape?.attr('fill', null);
               
@@ -217,6 +240,8 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
             pathShape3?.hide();
             imageShape1?.hide();
             imageShape2?.hide();
+            circleShape?.attr('fill', circleColor);
+            circleShape?.attr('shadowOffsetY', 0);
           }
         }
       }
@@ -244,6 +269,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
     },
     defaultEdge: {
       type: 'line',
+      color: '#d6ecff',
     },
     layout: {
       type: 'dendrogram',
@@ -252,6 +278,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
       rankSep: 150,
       radial: true,
     },
+    fitView: true,
   });
 
   const fittingString = (str, maxWidth, fontSize) => {
@@ -284,7 +311,13 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
 
   graph.data(data);
   graph.render();
-  graph.fitView();
+
+  if (data && (data?.children||[]).length>0) {
+    graph.fitView();
+  } else {
+    //只有一个节点的时候 居中显示
+    graph.fitCenter();
+  }
 
   graph.on('node:mouseenter', function (e) {
     const item = e.item;

src/view/Manage/AssetBrowse/Component/RelationContainer.jsx

@@ -115,14 +115,14 @@ const RelationContainer = (props) => {
 
       recursion(newRelationData.children, rootNode.id);
 
-      const _index = (dirs||[]).findIndex(dir => dir.nodeId === rootNode.id);
-      if (_index !== -1) {
-        if (reference === AssetBrowseReference) {
-          newRelationData = {text: '资产', show: true, simple: false, virtual: true, children: [newRelationData]};
-        } else if (reference === ResourceBrowseReference) {
-          newRelationData = {text: '资源', show: true, simple: false, virtual: true, children: [newRelationData]};
-        }
-      }
+      // const _index = (dirs||[]).findIndex(dir => dir.nodeId === rootNode.id);
+      // if (_index !== -1) {
+      //   if (reference === AssetBrowseReference) {
+      //     newRelationData = {text: '资产', show: true, simple: false, virtual: true, children: [newRelationData]};
+      //   } else if (reference === ResourceBrowseReference) {
+      //     newRelationData = {text: '资源', show: true, simple: false, virtual: true, children: [newRelationData]};
+      //   }
+      // }
 
       setRelationData(newRelationData);
     }