资产浏览

package.json

@@ -39,7 +39,6 @@
     "react-virtualized": "^9.22.3",
     "redux": "^4.0.1",
     "redux-saga": "^1.0.5",
-    "rxjs": "^7.5.4",
     "showdown": "^1.9.1",
     "smooth-scroll": "^16.1.3",
     "typescript": "^4.6.2",

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

@@ -5,10 +5,11 @@ import G6 from '@antv/g6';
 
 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 minInnerRaduis = 20, imageWidth = 30, textFontSize = 8;
+
+const centerColorGroup = ['#D8E9FF', '#A7CEFF', '#196AD2'];
+const centerHighlightColorGroup = ['#99c6ff', '#4d8ddf', '#145ab3'];
 
 const secondaryColors = ['#d1a4e4', '#92d6c9', '#7c94dd', '#6d96ff', '#6dc3ff', '#ff9366', '#ff867d', '#ff89c1', '#ff7444', '#e4a4cb'];
 const secondaryHighlightColors = ['#b36cd1', '#48b5a0', '#4a6acc', '#356eff', '#37adff', '#ff7339', '#ff7065', '#ff60ab', '#ff6733', '#e56db6'];
@@ -58,13 +59,65 @@ export default Relation;
 const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
   const width = container.scrollWidth;
   const height = container.scrollHeight;
+  const totalLevel = data?.totalLevel;
+
+  const tooltip = new G6.Tooltip({
+    offsetX: 10,
+    offsetY: 10,
+    fixToNode: [1, 0.5],
+    itemTypes: ['node'],
+    getContent: (e) => {
+      const outDiv = document.createElement('div');
+      outDiv.style.width = 'fit-content';
+      outDiv.style.height = 'fit-content';
+      const model = e.item.getModel();
+      if (e.item.getType() === 'node') {
+        outDiv.innerHTML = `${model.text||''}`;
+      }
+      return outDiv;
+    },
+  });
+
+  const calcRaduis = (node) => {
+    if (!node?.levelId) return { innerRaduis: minInnerRaduis, raduis: minInnerRaduis+40 };
+
+    const nodeLevel = node?.levelId.split('-').length;
+    let innerRaduis = minInnerRaduis;
+    if (nodeLevel===1) {
+      innerRaduis = minInnerRaduis + 10*(totalLevel - nodeLevel - 1) + 20;
+    } else if (nodeLevel > 1) {
+      innerRaduis = minInnerRaduis + 10*(totalLevel - nodeLevel);
+    }
+
+    return { innerRaduis, raduis: (innerRaduis+40) };
+  }
+
+  const calcSecondaryNodeColor = (node) => {
+    let nodeColor = '', nodeHighlightColor = '';
+
+    const nodeLevel = node?.levelId.split('-').length;
+    if (node?.levelId && nodeLevel > 1) {
+      const index = node?.levelId.split('-')[1];
+      nodeColor = secondaryColors[index%secondaryColors.length];
+      nodeHighlightColor = secondaryHighlightColors[index%secondaryHighlightColors.length];
+    }
+
+    return { nodeColor, nodeHighlightColor }
+  }
+
   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 { innerRaduis, raduis } = calcRaduis(cfg);
+      const { nodeColor, nodeHighlightColor } = calcSecondaryNodeColor(cfg);
+
+      const nodeLevel = cfg?.levelId.split('-').length;
+      let chartColor = '';
+
+      if (nodeLevel === 1) {
+        chartColor = centerHighlightColorGroup[2];
+      } else {
+        chartColor = nodeHighlightColor;
       }
 
       const keyShape = group.addShape('circle', {
@@ -77,6 +130,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
         draggable: true,
       });
 
+      //virtual功能已去掉
       if (!cfg?.virtual) {
         const view = new (Chart || window.Chart)({
           group,
@@ -96,14 +150,14 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
         view
           .coordinate('theta', {
             radius: 1.0,
-            innerRadius: 0.45
+            innerRadius: (innerRaduis/raduis) + 0.05
           })
           .rotate(Math.PI * 0.5);
         view
           .interval()
           .adjust('stack')
           .position('value')
-          .color(circleHighlightColor)
+          .color(chartColor)
           .style({
             stroke: 'white',
             lineWidth: 5,
@@ -155,21 +209,71 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
         imageShape2.hide();
       }
 
-      group.addShape('circle', {
-        attrs: {
-          x: raduis,
-          y: raduis,
-          r: innerRaduis,
-          lineWidth: 0,
-          fill: circleColor,
-          fillOpacity: 1.0,
-          stroke: '#fff',
-          strokeOpacity: 0,
-          cursor: (cfg.virtual)?'':'pointer',
-        },
-        name: 'innnerCircle',
-        draggable: true,
-      });
+      if (cfg?.levelId && nodeLevel === 1) {
+        group.addShape('circle', {
+          attrs: {
+            x: raduis,
+            y: raduis,
+            r: innerRaduis,
+            lineWidth: 0,
+            fill: centerColorGroup[0],
+            fillOpacity: 1.0,
+            stroke: '#fff',
+            strokeOpacity: 0,
+            cursor: (cfg.virtual)?'':'pointer',
+          },
+          name: 'innnerCircle1',
+          draggable: true,
+        });
+
+        group.addShape('circle', {
+          attrs: {
+            x: raduis,
+            y: raduis,
+            r: innerRaduis*0.8,
+            lineWidth: 0,
+            fill: centerColorGroup[1],
+            fillOpacity: 1.0,
+            stroke: '#fff',
+            strokeOpacity: 0,
+            cursor: (cfg.virtual)?'':'pointer',
+          },
+          name: 'innnerCircle2',
+          draggable: true,
+        });
+
+        group.addShape('circle', {
+          attrs: {
+            x: raduis,
+            y: raduis,
+            r: innerRaduis*0.8*0.8,
+            lineWidth: 0,
+            fill: centerColorGroup[2],
+            fillOpacity: 1.0,
+            stroke: '#fff',
+            strokeOpacity: 0,
+            cursor: (cfg.virtual)?'':'pointer',
+          },
+          name: 'innnerCircle3',
+          draggable: true,
+        });
+      } else {
+        group.addShape('circle', {
+          attrs: {
+            x: raduis,
+            y: raduis,
+            r: innerRaduis,
+            lineWidth: 0,
+            fill: nodeColor,
+            fillOpacity: 1.0,
+            stroke: '#fff',
+            strokeOpacity: 0,
+            cursor: (cfg.virtual)?'':'pointer',
+          },
+          name: 'innnerCircle1',
+          draggable: true,
+        });
+      }
 
       group.addShape("text", {
         attrs: {
@@ -211,14 +315,11 @@ 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];
+        const circleShape1 = group.get('children')[6];
+        const circleShape2 = group.get('children')[7];
+        const circleShape3 = group.get('children')[8];
 
-        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];
-        }
+        const { nodeColor, nodeHighlightColor } = calcSecondaryNodeColor(model);
 
         if (name === 'active') {
           if (value) {
@@ -229,9 +330,15 @@ 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)');
+            if (model?.levelId && model?.levelId.split('-').length===1) {
+              circleShape1?.attr('fill', centerHighlightColorGroup[0]);
+              circleShape2?.attr('fill', centerHighlightColorGroup[1]);
+              circleShape3?.attr('fill', centerHighlightColorGroup[2]);
+            } else {
+              circleShape1?.attr('fill', nodeHighlightColor);
+              circleShape1?.attr('shadowOffsetY', 5);
+              circleShape1?.attr('shadowColor', 'rgba(0,0,0,0.23)');
+            }
           } else {
             keyShape?.attr('fill', null);
               
@@ -240,8 +347,14 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
             pathShape3?.hide();
             imageShape1?.hide();
             imageShape2?.hide();
-            circleShape?.attr('fill', circleColor);
-            circleShape?.attr('shadowOffsetY', 0);
+            if (model?.levelId && model?.levelId.split('-').length===1) {
+              circleShape1?.attr('fill', centerColorGroup[0]);
+              circleShape2?.attr('fill', centerColorGroup[1]);
+              circleShape3?.attr('fill', centerColorGroup[2]);
+            } else {
+              circleShape1?.attr('fill', nodeColor);
+              circleShape1?.attr('shadowOffsetY', 0);
+            }
           }
         }
       }
@@ -254,6 +367,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
     width,
     height,
     linkCenter: true,
+    plugins: [tooltip],
     modes: {
       default: [
         'drag-canvas',
@@ -274,11 +388,13 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
     layout: {
       type: 'dendrogram',
       direction: 'LR',
-      nodeSep: (raduis+innerRaduis)/2+30.0,
+      nodesepFunc: (d) => {
+        const { innerRaduis } = calcRaduis(d);
+        return (innerRaduis*2+30.0);
+      },
       rankSep: 150,
       radial: true,
     },
-    fitView: true,
   });
 
   const fittingString = (str, maxWidth, fontSize) => {
@@ -304,6 +420,8 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
   };
 
   graph.node(function (node) {
+    const { innerRaduis } = calcRaduis(node);
+
     return {
       label: fittingString(node.text||'', innerRaduis*2-4.0, textFontSize),
     };
@@ -345,7 +463,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
     if (!model?.virtual) {
       if (e.target?.cfg?.name === 'center-icon') {
         onCenterClick && onCenterClick(model?.id);
-      } else if (e.target?.cfg?.name==='expand-icon' || e.target?.cfg?.name==='innnerCircle' || e.target?.cfg?.name==='text') {
+      } else if (e.target?.cfg?.name==='expand-icon' || e.target?.cfg?.name.indexOf('innnerCircle')!==-1 || e.target?.cfg?.name==='text') {
         onExpandClick && onExpandClick(model?.id);
       }
     }

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

@@ -93,6 +93,7 @@ const RelationContainer = (props) => {
     const index = (data||[]).findIndex(node => node.id === nodeParams?.centerId);
     if (index !== -1) {
       let rootNode = data[index];
+      let totalLevel = 1;
 
       rootNode = {...rootNode, center: true};
 
@@ -106,6 +107,9 @@ const RelationContainer = (props) => {
           if (node.pid === parentId) {
 
             let newNode = { ...node, children: [] };
+            if (totalLevel < node.levelId.split('-').length) {
+              totalLevel = node.levelId.split('-').length;
+            }
 
             (subData||[]).push(newNode);
             recursion(newNode.children, newNode.id);
@@ -115,6 +119,8 @@ const RelationContainer = (props) => {
 
       recursion(newRelationData.children, rootNode.id);
 
+      newRelationData = {...newRelationData, totalLevel};
+
       // const _index = (dirs||[]).findIndex(dir => dir.nodeId === rootNode.id);
       // if (_index !== -1) {
       //   if (reference === AssetBrowseReference) {