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