Skip to content

S
szse
Commit c530e109 by zhaochengxiang
Options

资产浏览关系图增加资源资产根节点

parent a4ea7122
Showing with 138 additions and 114 deletions
src/view/Manage/AssetBrowse/Component/Relation.jsx
...@@ -62,79 +62,81 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) { ...@@ -62,79 +62,81 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
draggable: true, draggable: true,
}); });
const view = new (Chart || window.Chart)({ if (!cfg?.virtual) {
group, const view = new (Chart || window.Chart)({
width: raduis*2, group,
height: raduis*2, width: raduis*2,
x: 0, height: raduis*2,
y: 0, x: 0,
}); y: 0,
});
const data = [
{ type: 'expand', value: 50 }, const data = [
{ type: 'center', value: 50 } { type: 'expand', value: 50 },
]; { type: 'center', value: 50 }
];
view.data(data);
view.data(data);
view.coordinate('theta', {
radius: 1.0, view.coordinate('theta', {
innerRadius: 0.45 radius: 1.0,
}); innerRadius: 0.45
view });
.interval() view
.adjust('stack') .interval()
.position('value') .adjust('stack')
.color('#b9b9b9') .position('value')
.style({ .color('#b9b9b9')
stroke: 'white', .style({
lineWidth: 5, stroke: 'white',
cursor: 'pointer', lineWidth: 5,
cursor: 'pointer',
})
view.interaction('element-active');
view.legend(false);
view.on('element:click', evt => {
const { data } = evt;
if (data?.data?.type === 'center') {
onCenterClick && onCenterClick(cfg.id);
} else if (data?.data?.type === 'expand') {
onExpandClick && onExpandClick(cfg.id);
}
}) })
view.render();
view.interaction('element-active'); keyShape.set('intervalView', view);
view.legend(false);
const imageShape1 = group.addShape('image', {
view.on('element:click', evt => { attrs: {
const { data } = evt; x: (raduis - innerRaduis)/2 - imageWidth/2,
y: raduis-imageWidth/2,
if (data?.data?.type === 'center') { width: imageWidth,
onCenterClick && onCenterClick(cfg.id); height: imageWidth,
} else if (data?.data?.type === 'expand') { cursor: 'pointer',
onExpandClick && onExpandClick(cfg.id); img: actionImg,
} },
}) name: 'center-icon',
});
view.render();
const imageShape2 = group.addShape('image', {
keyShape.set('intervalView', view); attrs: {
x: raduis + innerRaduis + (raduis - innerRaduis)/2 - imageWidth/2,
const imageShape1 = group.addShape('image', { y: raduis-imageWidth/2,
attrs: { height: imageWidth,
x: (raduis - innerRaduis)/2 - imageWidth/2, width: imageWidth,
y: raduis-imageWidth/2, cursor: 'pointer',
width: imageWidth, img: actionImg,
height: imageWidth, },
cursor: 'pointer', name: 'expand-icon',
img: actionImg, });
},
name: 'center-icon', imageShape1.hide();
}); imageShape2.hide();
}
const imageShape2 = group.addShape('image', {
attrs: {
x: raduis + innerRaduis + (raduis - innerRaduis)/2 - imageWidth/2,
y: raduis-imageWidth/2,
height: imageWidth,
width: imageWidth,
cursor: 'pointer',
img: actionImg,
},
name: 'expand-icon',
});
imageShape1.hide();
imageShape2.hide();
group.addShape('circle', { group.addShape('circle', {
attrs: { attrs: {
...@@ -146,7 +148,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) { ...@@ -146,7 +148,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
fillOpacity: 1.0, fillOpacity: 1.0,
stroke: '#fff', stroke: '#fff',
strokeOpacity: 0, strokeOpacity: 0,
cursor: 'pointer' cursor: (cfg.virtual)?'':'pointer',
}, },
name: 'innnerCircle', name: 'innnerCircle',
draggable: true, draggable: true,
...@@ -161,7 +163,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) { ...@@ -161,7 +163,7 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
textAlign: 'center', textAlign: 'center',
textBaseline: "middle", textBaseline: "middle",
fill: "#fff", fill: "#fff",
cursor: 'pointer', cursor: (cfg.virtual)?'':'pointer',
}, },
name: 'text', name: 'text',
draggable: true draggable: true
...@@ -170,41 +172,47 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) { ...@@ -170,41 +172,47 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
return keyShape; return keyShape;
}, },
afterDraw: (cfg, group) => { afterDraw: (cfg, group) => {
const pathShape1 = group.get('children')[1]; if (!cfg?.virtual) {
const pathShape2 = group.get('children')[2]; const pathShape1 = group.get('children')[1];
const pathShape3 = group.get('children')[3]; const pathShape2 = group.get('children')[2];
const pathShape3 = group.get('children')[3];
pathShape1?.hide();
pathShape2?.hide(); pathShape1?.hide();
pathShape3?.hide(); pathShape2?.hide();
pathShape3?.hide();
}
}, },
setState(name, value, item) { setState(name, value, item) {
const group = item.getContainer(); const model = item?.getModel();
const keyShape = group.get('children')[0]; if (!model?.virtual) {
const pathShape1 = group.get('children')[1]; const group = item.getContainer();
const pathShape2 = group.get('children')[2];
const pathShape3 = group.get('children')[3]; const keyShape = group.get('children')[0];
const imageShape1 = group.get('children')[4]; const pathShape1 = group.get('children')[1];
const imageShape2 = group.get('children')[5]; const pathShape2 = group.get('children')[2];
const pathShape3 = group.get('children')[3];
if (name === 'active') { const imageShape1 = group.get('children')[4];
if (value) { const imageShape2 = group.get('children')[5];
keyShape?.attr('fill', '#fff');
if (name === 'active') {
pathShape1?.show(); if (value) {
pathShape2?.show(); keyShape?.attr('fill', '#fff');
pathShape3?.show();
imageShape1?.show(); pathShape1?.show();
imageShape2?.show(); pathShape2?.show();
} else { pathShape3?.show();
keyShape?.attr('fill', null); imageShape1?.show();
imageShape2?.show();
pathShape1?.hide(); } else {
pathShape2?.hide(); keyShape?.attr('fill', null);
pathShape3?.hide();
imageShape1?.hide(); pathShape1?.hide();
imageShape2?.hide(); pathShape2?.hide();
pathShape3?.hide();
imageShape1?.hide();
imageShape2?.hide();
}
} }
} }
...@@ -295,12 +303,13 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) { ...@@ -295,12 +303,13 @@ const init = (ctx) => function (container, data, onCenterClick, onExpandClick) {
graph.on('node:click', function(e) { graph.on('node:click', function(e) {
const item = e.item; const item = e.item;
const model = item?.getModel(); const model = item?.getModel();
console.log('e.target?.cfg?.name', e.target?.cfg?.name); 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==='innnerCircle' || e.target?.cfg?.name==='text') { } else if (e.target?.cfg?.name==='expand-icon' || e.target?.cfg?.name==='innnerCircle' || e.target?.cfg?.name==='text') {
onExpandClick && onExpandClick(model?.id); onExpandClick && onExpandClick(model?.id);
}
} }
}) })
......
src/view/Manage/AssetBrowse/Component/RelationContainer.jsx
...@@ -92,7 +92,10 @@ const RelationContainer = (props) => { ...@@ -92,7 +92,10 @@ const RelationContainer = (props) => {
const index = (data||[]).findIndex(node => node.id === nodeParams?.centerId); const index = (data||[]).findIndex(node => node.id === nodeParams?.centerId);
if (index !== -1) { if (index !== -1) {
const rootNode = data[index]; let rootNode = data[index];
rootNode = {...rootNode, center: true};
let newRelationData = {...rootNode, children: []}; let newRelationData = {...rootNode, children: []};
function recursion(subData, parentId) { function recursion(subData, parentId) {
...@@ -111,6 +114,16 @@ const RelationContainer = (props) => { ...@@ -111,6 +114,16 @@ const RelationContainer = (props) => {
} }
recursion(newRelationData.children, rootNode.id); 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]};
}
}
setRelationData(newRelationData); setRelationData(newRelationData);
} }
} }
...@@ -123,7 +136,9 @@ const RelationContainer = (props) => { ...@@ -123,7 +136,9 @@ const RelationContainer = (props) => {
const index = (data||[]).findIndex((node) => node.id === nodeParams?.expandId); const index = (data||[]).findIndex((node) => node.id === nodeParams?.expandId);
if (index !== -1) { if (index !== -1) {
const currentNode = data[index]; let currentNode = data[index];
currentNode = {...currentNode, expand: true};
(data||[]).forEach(node => { (data||[]).forEach(node => {
......
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