Skip to content

S
szse
Commit 7a549653 by zhaochengxiang
Options

关系图增加统计数

parent 69f0ac3b
Showing with 243 additions and 9 deletions
package.json
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
"core-js": "^3.4.2", "core-js": "^3.4.2",
"craco-less": "^1.17.1", "craco-less": "^1.17.1",
"crypto-js": "^4.0.0", "crypto-js": "^4.0.0",
"echarts": "^5.3.1",
"immutability-helper": "^3.1.1", "immutability-helper": "^3.1.1",
"insert-css": "^2.0.0", "insert-css": "^2.0.0",
"less": "^4.1.1", "less": "^4.1.1",
......
src/view/Manage/AssetBrowse/Component/Relation.jsx
...@@ -16,6 +16,15 @@ const secondaryHighlightColors = ['#b36cd1', '#48b5a0', '#4a6acc', '#356eff', '# ...@@ -16,6 +16,15 @@ const secondaryHighlightColors = ['#b36cd1', '#48b5a0', '#4a6acc', '#356eff', '#
class Relation extends React.Component { 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) { componentDidUpdate(prevProps, prevState) {
const { data, resize, expandId, onCenterClick, onExpandClick } = this.props; const { data, resize, expandId, onCenterClick, onExpandClick } = this.props;
...@@ -66,7 +75,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) { ...@@ -66,7 +75,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
const model = e.item.getModel(); const model = e.item.getModel();
if (e.item.getType() === 'node') { if (e.item.getType() === 'node') {
return model.text||''; return `${model.text||''} (${model.count})`;
} }
return ''; return '';
}, },
...@@ -292,7 +301,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) { ...@@ -292,7 +301,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
attrs: { attrs: {
text: (cfg.simple)?'':(cfg.label||''), text: (cfg.simple)?'':(cfg.label||''),
x: raduis, x: raduis,
y: raduis, y: raduis - 5,
fontSize: textFontSize, fontSize: textFontSize,
textAlign: 'center', textAlign: 'center',
textBaseline: "middle", textBaseline: "middle",
...@@ -303,6 +312,21 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) { ...@@ -303,6 +312,21 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
draggable: true 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; return keyShape;
}, },
afterDraw: (cfg, group) => { afterDraw: (cfg, group) => {
...@@ -482,7 +506,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) { ...@@ -482,7 +506,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
if (!model?.virtual) { if (!model?.virtual) {
if (e.target?.cfg?.name === 'center-icon') { if (e.target?.cfg?.name === 'center-icon') {
onCenterClick && onCenterClick(model?.id); 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); onExpandClick && onExpandClick(model?.id);
} }
} }
......
src/view/Manage/AssetBrowse/Component/RelationContainer.jsx
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Radio } from 'antd';
import { dispatch } from '../../../../model'; import { dispatch } from '../../../../model';
import Relation from './Relation'; import Relation from './Relation';
import Thermodynamic from './Thermodynamic';
import { AssetBrowseReference, ResourceBrowseReference } from '../../../../util/constant'; import { AssetBrowseReference, ResourceBrowseReference } from '../../../../util/constant';
const relationTypes = [
{
title: '关系图',
key: 'relation',
},
{
title: '热力图',
key: 'thermodynamic'
}
]
const RelationContainer = (props) => { const RelationContainer = (props) => {
const { nodeParams, onChange, reference, resize } = props; const { nodeParams, onChange, reference, resize } = props;
const [ type, setType ] = useState('relation');
const [ dirs, setDirs ] = useState([]); const [ dirs, setDirs ] = useState([]);
const [ nodes, setNodes ] = useState([]); const [ nodes, setNodes ] = useState([]);
const [ relationData, setRelationData ] = useState(null); const [ relationData, setRelationData ] = useState(null);
const [ thermodynamicData, setThermodynamicData ] = useState(null);
useEffect(() => { useEffect(() => {
getDirectoryData(); getDirectoryData();
...@@ -18,6 +33,7 @@ const RelationContainer = (props) => { ...@@ -18,6 +33,7 @@ const RelationContainer = (props) => {
}, []) }, [])
useEffect(() => { useEffect(() => {
if (type === 'relation') {
if ((nodeParams?.expandId||'') !== '') { if ((nodeParams?.expandId||'') !== '') {
generateExpandNodeRelationData(); generateExpandNodeRelationData();
} else if ((nodeParams?.centerId||'')!== '' && (dirs||[]).length>0) { } else if ((nodeParams?.centerId||'')!== '' && (dirs||[]).length>0) {
...@@ -25,8 +41,15 @@ const RelationContainer = (props) => { ...@@ -25,8 +41,15 @@ const RelationContainer = (props) => {
} else { } else {
setRelationData(null); setRelationData(null);
} }
} else {
if ((nodeParams?.centerId||'')!== '' && (dirs||[]).length>0) {
generateThermodynamicData();
} else {
setThermodynamicData(null);
}
}
//eslint-disable-next-line react-hooks/exhaustive-deps //eslint-disable-next-line react-hooks/exhaustive-deps
}, [nodeParams, dirs]) }, [nodeParams, dirs, type])
const getDirectoryData = () => { const getDirectoryData = () => {
...@@ -42,7 +65,6 @@ const RelationContainer = (props) => { ...@@ -42,7 +65,6 @@ const RelationContainer = (props) => {
callback: data => { callback: data => {
let newDirs = [...data]; let newDirs = [...data];
newDirs = (newDirs||[]).filter(item => item.type!=='custom'); newDirs = (newDirs||[]).filter(item => item.type!=='custom');
setDirs(newDirs); setDirs(newDirs);
} }
}); });
...@@ -66,12 +88,12 @@ const RelationContainer = (props) => { ...@@ -66,12 +88,12 @@ const RelationContainer = (props) => {
recursionToGetCenterDirectory(dirs); recursionToGetCenterDirectory(dirs);
if (centerDirectory.nodeId) { 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) { function recursion(data, parentId, parentLevelId) {
(data||[]).forEach((item, index) => { (data||[]).forEach((item, index) => {
let currentLevelId = `${parentLevelId}-${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); recursion(item.children, item.nodeId, currentLevelId);
}) })
...@@ -182,6 +204,53 @@ const RelationContainer = (props) => { ...@@ -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) => { const onCenterClick = (id) => {
onChange && onChange({centerId: id, expandId: ''}); onChange && onChange({centerId: id, expandId: ''});
} }
...@@ -190,10 +259,29 @@ const RelationContainer = (props) => { ...@@ -190,10 +259,29 @@ const RelationContainer = (props) => {
onChange && onChange({...nodeParams, expandId: id}); onChange && onChange({...nodeParams, expandId: id});
} }
const onThermodynamicClick = (id) => {
onChange && onChange({centerId: id, expandId: ''});
}
const onTypeChange = (e) => {
setType(e.target.value);
}
return ( return (
<div style={{ width: '100%', height: '100%', position: 'relative' }}> <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> </div>
); );
} }
......
src/view/Manage/AssetBrowse/Component/Thermodynamic.jsx 0 → 100644
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment