OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

style: 补充节点，鼠标悬浮动画

Browse Source
This commit is contained in:
TsMask
2023-12-08 16:30:20 +08:00
parent 5a761ece4e
commit 6210b87c84
1 changed files with 391 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

525
src/components/ChartGraphG6/index.vue
View File

@@ -60,64 +60,182 @@ const data = {
{ {
id: '0', id: '0',
data: { data: {
label: 'A0', x: 100,
x: 110, y: 100,
y: 110, type: 'circle-node',
color: '#5a99d5',
keyShape: {
r: 32,
width: 48,
height: 48,
},
labelShape: {
text: '基站222222222222222222',
position: 'bottom',
maxWidth: '200%',
offsetY: 10,
},
labelBackgroundShape: {},
iconShape: {
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
width: 48,
height: 48,
},
animates: {
update: [
{
fields: ['opacity'],
shapeId: 'haloShape',
states: ['breathing'],
iterations: Infinity,
direction: 'alternate',
duration: 500,
},
{
fields: ['lineWidth'],
shapeId: 'keyShape',
states: ['breathing'],
iterations: Infinity,
direction: 'alternate',
duration: 500,
},
{
fields: ['height', 'width'],
shapeId: 'keyShape',
states: ['scaling'],
iterations: Infinity,
direction: 'alternate',
duration: 500,
},
],
},
}, },
}, },
// B
{ {
id: '1', id: '1',
data: { data: {
label: 'B1', label: 'DM',
parentId: 'B', x: 600,
x: 110,
y: 350, y: 350,
}, },
}, },
{ {
id: '2', id: '2',
data: { data: {
label: 'B2', label: 'O&M',
parentId: 'B', x: 900,
x: 220, y: 100,
y: 350, },
},
// 5GC控制面
{
id: '170',
data: {
label: 'NSSF',
parentId: 'combo-5gc',
x: 300,
y: 50,
}, },
}, },
{ {
id: '3', id: '130',
data: { data: {
label: 'B3', label: 'AUSF',
parentId: 'A', parentId: 'combo-5gc',
x: 360, x: 400,
y: 350, y: 50,
}, },
}, },
// C
{ {
id: '4', id: '140',
data: { data: {
label: 'C1', label: 'UDM',
parentId: 'C', parentId: 'combo-5gc',
x: 360, x: 500,
y: 50,
},
},
{
id: '120',
data: {
label: 'AMF',
parentId: 'combo-5gc',
x: 300,
y: 150, y: 150,
}, },
}, },
{ {
id: '5', id: '180',
data: { data: {
label: 'C2', label: 'NRF',
parentId: 'C', parentId: 'combo-5gc',
x: 460, x: 400,
y: 150, y: 150,
}, },
}, },
{
id: '150',
data: {
label: 'SMF',
parentId: 'combo-5gc',
x: 500,
y: 250,
},
},
{
id: '160',
data: {
label: 'PCF',
parentId: 'combo-5gc',
x: 600,
y: 250,
},
},
// 5GC用户面
{
id: '190',
data: {
label: 'UPF',
parentId: 'combo-upf',
x: 300,
y: 350,
},
},
// EP-IMS
{
id: '110',
data: {
label: 'I/S-CSCF',
parentId: 'combo-ims',
x: 800,
y: 350,
},
},
{
id: '111',
data: {
label: 'P-CSCF',
parentId: 'combo-ims',
x: 800,
y: 400,
},
},
// O&M
{
id: '100',
data: {
label: 'EMS',
parentId: 'combo-ems',
x: 800,
y: 100,
},
},
], ],
edges: [ edges: [
{ {
id: 'edge-102', id: '0-5gc',
source: '0', source: '0',
target: '1', target: 'combo-5gc',
data: { data: {
type: 'custom-edge', type: 'custom-edge',
animates: { animates: {
@@ -134,28 +252,57 @@ const data = {
}, },
}, },
{ {
id: 'edge-161', id: '5gc-ems',
source: '0', source: 'combo-5gc',
target: 'combo-ems',
data: {},
},
{
id: 'upf-ems',
source: 'combo-upf',
target: 'combo-ems',
data: {},
},
{
id: 'ims-ems',
source: 'combo-ims',
target: 'combo-ems',
data: {},
},
{
id: 'ems-2',
source: 'combo-ems',
target: '2', target: '2',
data: {}, data: {},
}, },
{ {
id: 'edge-253', id: '170-120',
source: '0', source: '170',
target: 'A', target: '120',
data: { data: {},
keyShape: {
endArrow: true,
},
labelShape: {
text: 'asdf-arrow',
},
},
}, },
{ {
id: 'edge-237', id: '130-120',
source: '1', source: '130',
target: '4', target: '120',
data: {},
},
{
id: '140-120',
source: '140',
target: '120',
data: {},
},
{
id: '140-180',
source: '140',
target: '180',
data: {},
},
{
id: '120-180',
source: '120',
target: '180',
data: { data: {
type: 'polyline-edge', type: 'polyline-edge',
keyShape: { keyShape: {
@@ -190,47 +337,57 @@ const data = {
}, },
}, },
{ {
id: 'edge-133', id: '130-180',
source: '2', source: '130',
target: '4', target: '180',
data: { data: {
type: 'polyline-edge', type: 'polyline-edge',
keyShape: {
/**
* 拐弯处的圆角弧度，默认为直角
*/
radius: 20,
/**
* 拐弯处距离节点最小距离, 默认为 5
*/
// offset: 0,
/**
* 控制点数组，不指定时根据 A* 算法自动生成折线。若指定了，则按照 controlPoints 指定的位置进行弯折
*/
controlPoints: [
{ x: 220, y: 220 },
{ x: 300, y: 130 },
],
},
}, },
}, },
{ {
id: 'edge-320', id: '140-150',
source: '2', source: '140',
target: '5', target: '150',
data: { data: {
keyShape: { type: 'polyline-edge',
endArrow: true,
},
labelShape: {
text: 'edge-arrow',
},
}, },
}, },
{ {
id: 'edge-355', id: '140-110',
source: '3', source: '140',
target: '4', target: '110',
data: {
type: 'polyline-edge',
},
},
{
id: '120-150',
source: '120',
target: '150',
data: {},
},
{
id: '150-180',
source: '150',
target: '180',
data: {},
},
{
id: '150-160',
source: '150',
target: '160',
data: { type: 'polyline-edge' },
},
{
id: '160-120',
source: '160',
target: '120',
data: {},
},
{
id: '160-180',
source: '160',
target: '180',
data: { data: {
keyShape: { keyShape: {
endArrow: true, endArrow: true,
@@ -240,24 +397,60 @@ const data = {
}, },
}, },
}, },
{
id: '160-111',
source: '160',
target: '111',
data: {},
},
{
id: '0-upf',
source: '0',
target: 'combo-upf',
data: {},
},
{
id: '150-190',
source: '150',
target: '190',
data: {},
},
{
id: 'upf-1',
source: 'combo-upf',
target: '1',
data: {},
},
{
id: 'upf-ims',
source: 'combo-upf',
target: 'combo-ims',
data: {},
},
], ],
combos: [ combos: [
{ {
id: 'A', id: 'combo-5gc',
data: { data: {
text: 'combo A', text: '5GC控制面',
}, },
}, },
{ {
id: 'B', id: 'combo-upf',
data: { data: {
label: 'combo B', label: '5GC用户面',
}, },
}, },
{ {
id: 'C', id: 'combo-ims',
data: { data: {
label: 'combo C', label: 'EP-IMS用户面',
},
},
{
id: 'combo-ems',
data: {
label: 'EMS',
}, },
}, },
], ],
@@ -308,55 +501,54 @@ function initChart() {
}, },
}, },
}, },
node: model => { // node: model => {
const { id, data } = model; // const { id, data } = model;
return { // return {
id, // id,
data: { // data: {
...data, // ...data,
type: 'rect-node', // type: 'rect-node',
keyShape: { // keyShape: {
width: 60, // width: 80,
height: 30, // height: 40,
radius: 8, // radius: 8,
}, // },
labelShape: { // labelShape: {
position: 'center', // position: 'center',
text: data.label, // text: data.label,
}, // },
animates: { // animates: {
update: [ // update: [
{ // {
fields: ['opacity'], // fields: ['opacity'],
shapeId: 'haloShape', // shapeId: 'haloShape',
states: ['breathing'], // states: ['breathing'],
iterations: Infinity, // iterations: Infinity,
direction: 'alternate', // direction: 'alternate',
duration: 500, // duration: 500,
}, // },
{ // {
fields: ['lineWidth'], // fields: ['lineWidth'],
shapeId: 'keyShape', // shapeId: 'keyShape',
states: ['breathing'], // states: ['breathing'],
iterations: Infinity, // iterations: Infinity,
direction: 'alternate', // direction: 'alternate',
duration: 500, // duration: 500,
}, // },
{ // {
fields: ['height'], // fields: ['height','width'],
shapeId: 'keyShape', // shapeId: 'keyShape',
states: ['scaling'], // states: ['scaling'],
iterations: Infinity, // iterations: Infinity,
direction: 'alternate', // direction: 'alternate',
duration: 500, // duration: 500,
}, // },
], // ],
}, // },
}, // },
}; // };
}, // },
edge: { edge: {
type: 'custom-edge',
animates: { animates: {
update: [ update: [
{ {
@@ -412,15 +604,13 @@ function initChart() {
visible: true, visible: true,
}, },
keyShape: { keyShape: {
stroke: '#000', radius: 4,
lineWidth: 4,
}, },
}, },
scaling: { scaling: {
keyShape: { keyShape: {
r: 24, width: 100,
width: 48, height: 60,
height: 48,
}, },
}, },
}, },
@@ -441,6 +631,63 @@ function initChart() {
}, },
data, data,
}); });
graph.on('node:click', (e: any) => {
const s = graph.getItemState(e.itemId);
console.log(s);
// graph.updateData('node', {
// id: e.itemId,
// data: {
// cluster: Math.random(),
// keyShape: {
// r: 32 + Math.random() * 10 - 5,
// lineWidth: 6 + Math.random() * 6 - 3,
// stroke: '#000',
// },
// labelShape: {
// fontWeight: 700,
// },
// },
// });
});
graph.on('node:pointerenter', (e: any) => {
const { itemId } = e;
if (graph.getItemState(itemId, 'breathing')) {
graph.setItemState(itemId, 'breathing', false);
} else {
graph.setItemState(itemId, 'scaling', false);
graph.setItemState(itemId, 'breathing', true);
}
// graph.updateData('node', {
// id: itemId,
// data: {
// label: `after been hovered ${itemId}`,
// labelShape: {
// fill: '#0f0',
// },
// },
// });
});
graph.on('node:pointerleave', (e: any) => {
const { itemId } = e;
if (graph.getItemState(itemId, 'breathing')) {
graph.setItemState(itemId, 'breathing', false);
} else {
graph.setItemState(itemId, 'scaling', false);
graph.setItemState(itemId, 'breathing', true);
}
// graph.updateData('node', {
// id: itemId,
// data: {
// label: 'label before been hovered',
// labelShape: {
// fill: '#000',
// },
// },
// });
});
} }
const actions = { const actions = {
@@ -490,16 +737,16 @@ const actions = {
}, },
}; };
watch( // watch(
() => props.option, // () => props.option,
val => { // val => {
// if (val) { // if (val) {
// nextTick(() => { // nextTick(() => {
// initChart(); // initChart();
// }); // });
// } // }
} // }
); // );
onMounted(() => { onMounted(() => {
nextTick(() => { nextTick(() => {