关系图增加统计数

package.json

@@ -22,6 +22,7 @@
     "core-js": "^3.4.2",
     "craco-less": "^1.17.1",
     "crypto-js": "^4.0.0",
+    "echarts": "^5.3.1",
     "immutability-helper": "^3.1.1",
     "insert-css": "^2.0.0",
     "less": "^4.1.1",

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

@@ -16,6 +16,15 @@ const secondaryHighlightColors = ['#b36cd1', '#48b5a0', '#4a6acc', '#356eff', '#
 
 class Relation extends React.Component {
 
+  componentDidMount() {
+    const { data, onCenterClick, onExpandClick } = this.props;
+
+    if (data) {
+      this.graph?.destroy();
+      this.graph = init(this)(this.elem, data, onCenterClick, onExpandClick);
+    }
+  }
+
   componentDidUpdate(prevProps, prevState) {
     const { data, resize, expandId, onCenterClick, onExpandClick } = this.props;
 
@@ -66,7 +75,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
 
       const model = e.item.getModel();
       if (e.item.getType() === 'node') {
-        return model.text||'';
+        return `${model.text||''} (${model.count})`;
       }
       return '';
     },
@@ -292,7 +301,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
         attrs: {
           text: (cfg.simple)?'':(cfg.label||''),
           x: raduis,
-          y: raduis,
+          y: raduis - 5,
           fontSize: textFontSize,
           textAlign: 'center',
           textBaseline: "middle",
@@ -303,6 +312,21 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
         draggable: true
       });
 
+      group.addShape("text", {
+        attrs: {
+          text: (cfg.simple)?'':`${cfg.count}`,
+          x: raduis,
+          y: raduis + 5,
+          fontSize: textFontSize,
+          textAlign: 'center',
+          textBaseline: "middle",
+          fill: "#fff",
+          cursor: (cfg?.virtual)?'':'pointer',
+        },
+        name: 'text1',
+        draggable: true
+      });
+
       return keyShape;
     },
     afterDraw: (cfg, group) => {
@@ -482,7 +506,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.indexOf('innnerCircle')!==-1 || e.target?.cfg?.name==='text') {
+      } else if (e.target?.cfg?.name==='expand-icon' || e.target?.cfg?.name.indexOf('innnerCircle')!==-1 || e.target?.cfg?.name.indexOf('text')!==-1) {
         onExpandClick && onExpandClick(model?.id);
       }
     }

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

 import { useEffect, useState } from 'react';
+import { Radio } from 'antd';
 
 import { dispatch } from '../../../../model';
 import Relation from './Relation';
+import Thermodynamic from './Thermodynamic';
 import { AssetBrowseReference, ResourceBrowseReference } from '../../../../util/constant';
 
+const relationTypes = [
+  {
+    title: '关系图',
+    key: 'relation',
+  },
+  {
+    title: '热力图',
+    key: 'thermodynamic'
+  }
+]
+
 const RelationContainer = (props) => {
 
   const { nodeParams, onChange, reference,  resize } = props;
 
+  const [ type, setType ] = useState('relation');
   const [ dirs, setDirs ] = useState([]);
   const [ nodes, setNodes ] = useState([]);
   const [ relationData, setRelationData ] = useState(null); 
+  const [ thermodynamicData, setThermodynamicData ] = useState(null);
 
   useEffect(() => {
     getDirectoryData();
@@ -18,15 +33,23 @@ const RelationContainer = (props) => {
   }, [])
 
   useEffect(() => {
-    if ((nodeParams?.expandId||'') !== '') {
-      generateExpandNodeRelationData();
-    } else if ((nodeParams?.centerId||'')!== '' && (dirs||[]).length>0) {
-      generateNodes();
+    if (type === 'relation') {
+      if ((nodeParams?.expandId||'') !== '') {
+        generateExpandNodeRelationData();
+      } else if ((nodeParams?.centerId||'')!== '' && (dirs||[]).length>0) {
+        generateNodes();
+      } else {
+        setRelationData(null);
+      }
     } else {
-      setRelationData(null);
+      if ((nodeParams?.centerId||'')!== '' && (dirs||[]).length>0) {
+        generateThermodynamicData();
+      } else {
+        setThermodynamicData(null);
+      }
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [nodeParams, dirs])
+  }, [nodeParams, dirs, type])
 
   const getDirectoryData = () => {
 
@@ -42,7 +65,6 @@ const RelationContainer = (props) => {
       callback: data => {
         let newDirs = [...data];
         newDirs = (newDirs||[]).filter(item => item.type!=='custom');
-
         setDirs(newDirs);
       }
     });
@@ -66,12 +88,12 @@ const RelationContainer = (props) => {
     recursionToGetCenterDirectory(dirs);
 
     if (centerDirectory.nodeId) {
-      let newNodes = [{id: centerDirectory.nodeId, pid: null, levelId: '0', simple: false, show: true, text: centerDirectory.text }];
+      let newNodes = [{id: centerDirectory.nodeId, pid: null, levelId: '0', simple: false, show: true, text: centerDirectory.text, count: centerDirectory.dataAssetAndSubDirCount }];
     
       function recursion(data, parentId, parentLevelId) {
         (data||[]).forEach((item, index) => {
           let currentLevelId = `${parentLevelId}-${index}`;
-          newNodes.push({ id: item.nodeId, pid: parentId, levelId: currentLevelId, simple: (currentLevelId.split('-').length>=3)?true: false, show: (currentLevelId.split('-').length>2)?false:true, text: item.text });
+          newNodes.push({ id: item.nodeId, pid: parentId, levelId: currentLevelId, simple: (currentLevelId.split('-').length>=3)?true: false, show: (currentLevelId.split('-').length>2)?false:true, text: item.text, count: item.dataAssetAndSubDirCount });
 
           recursion(item.children, item.nodeId, currentLevelId);
         })
@@ -182,6 +204,53 @@ const RelationContainer = (props) => {
     }
   }
 
+  const generateThermodynamicData = () => {
+    let centerDirectory = {};
+
+    function recursionToGetCenterDirectory(data) {
+      (data||[]).forEach((item, index) => {
+        if (item.nodeId === nodeParams?.centerId) {
+          centerDirectory = item;
+          return;
+        }
+
+        recursionToGetCenterDirectory(item.children);
+      })
+    }
+
+    recursionToGetCenterDirectory(dirs);
+
+    if (centerDirectory.nodeId) {
+
+      let newCenterDirectory = JSON.parse(JSON.stringify(centerDirectory));
+
+      function recursionCenterDirctory(data, depth) {
+        if (depth > 2) return;
+
+        (data||[]).forEach((item, index) => {
+          item.name = `${item.text} (${item.dataAssetAndSubDirCount})`;
+          item.value = item.dataAssetAndSubDirCount;
+
+          if (depth === 2) {
+            item.children = [];
+          }
+  
+          recursionCenterDirctory(item.children, ++depth);
+        })
+      }
+
+      recursionCenterDirctory(newCenterDirectory.children, 1);
+
+      let newThermodynamicData = [{
+        ...newCenterDirectory,
+        value: newCenterDirectory.dataAssetAndSubDirCount,
+        name: `${newCenterDirectory.text} (${newCenterDirectory.dataAssetAndSubDirCount})`,
+      }];
+
+      setThermodynamicData(newThermodynamicData);
+    }
+  }
+
   const onCenterClick = (id) => {
     onChange && onChange({centerId: id, expandId: ''});
   }
@@ -190,10 +259,29 @@ const RelationContainer = (props) => {
     onChange && onChange({...nodeParams, expandId: id});
   }
 
+  const onThermodynamicClick = (id) => {
+    onChange && onChange({centerId: id, expandId: ''});
+  }
+
+  const onTypeChange = (e) => {
+    setType(e.target.value);
+  }
+
   return (
     <div style={{ width: '100%', height: '100%', position: 'relative' }}>
-      <Relation data={relationData} expandId={nodeParams?.expandId} resize={resize} onCenterClick={onCenterClick} onExpandClick={onExpandClick} />
-      <div className='title-text' style={{ position: 'absolute', left: 15, top: 24, fontWeight: 'bold' }} >关系图</div>
+      {
+        (type==='relation') && <Relation data={relationData} expandId={nodeParams?.expandId} resize={resize} onCenterClick={onCenterClick} onExpandClick={onExpandClick} />
+      }
+      {
+        (type==='thermodynamic') && <Thermodynamic data={thermodynamicData} onClick={onThermodynamicClick} />
+      }
+      <Radio.Group value={type} onChange={onTypeChange} buttonStyle="solid" style={{ position: 'absolute', right: 15, top: 24 }}>
+      {
+        relationTypes.map((item, index) => {
+          return <Radio.Button key={index} value={item.key}>{item.title}</Radio.Button>
+        })
+      }
+      </Radio.Group>
     </div>
   );
 }

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

+import React from 'react';
+import * as echarts from 'echarts';
+
+//https://echarts.apache.org/examples/zh/editor.html?c=treemap-show-parent&lang=js
+class Thermodynamic extends React.Component {
+
+  componentDidMount() {
+    const { data, onClick } = this.props;
+    if (data) {
+      init(this)(this.elem, data, onClick);
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const { data, onClick } = this.props;
+
+    if (data) {
+      init(this)(this.elem, data, onClick);
+    }
+  }
+
+  elem = undefined;
+
+  render() {
+    return (
+      <div ref={ref => this.elem = ref} style={{ position: 'relative', width: '100%', height: '100%' }}></div>
+    );
+  }
+}
+
+export default Thermodynamic;
+
+const init = (ctx) => function (container, data, onClick) {
+  var myChart = echarts.init(container);
+
+  function getLevelOption() {
+    return [
+      {
+        itemStyle: {
+          borderColor: '#777',
+          borderWidth: 0,
+          gapWidth: 1
+        },
+        upperLabel: {
+          show: false
+        }
+      },
+      {
+        itemStyle: {
+          borderColor: '#555',
+          borderWidth: 5,
+          gapWidth: 1
+        },
+        emphasis: {
+          itemStyle: {
+            borderColor: '#ddd'
+          }
+        }
+      },
+      {
+        colorSaturation: [0.35, 0.5],
+        itemStyle: {
+          borderWidth: 5,
+          gapWidth: 1,
+          borderColorSaturation: 0.6
+        }
+      }
+    ];
+  }
+
+  var option = {
+    tooltip: {
+      formatter: function (info) {
+        var treePathInfo = info.treePathInfo;
+        var treePath = [];
+        for (var i = 1; i < treePathInfo.length; i++) {
+          treePath.push(treePathInfo[i].name);
+        }
+        return [
+          '<div class="tooltip-title">' +
+            echarts.format.encodeHTML(treePath.join('/')) +
+            '</div>',
+        ].join('');
+      }
+    },
+    series: [
+      {
+        type: 'treemap',
+        visibleMin: 0,
+        childrenVisibleMin: 0,
+        label: {
+          show: true,
+          formatter: '{b}'
+        },
+        upperLabel: {
+          show: true,
+          height: 30
+        },
+        itemStyle: {
+          borderColor: '#fff'
+        },
+        breadcrumb: {
+          show: false
+        },
+        levels: getLevelOption(),
+        data
+      }
+    ]
+  };
+
+  myChart.setOption(option);
+
+  myChart.on('click', function (params) {
+    console.log(params);
+    const { data } = params;
+
+    onClick && onClick(data.nodeId);
+  });
+
+}
\ No newline at end of file