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',
data: {
label: 'A0',
x: 110,
y: 110,
x: 100,
y: 100,
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',
data: {
label: 'B1',
parentId: 'B',
x: 110,
label: 'DM',
x: 600,
y: 350,
},
},
{
id: '2',
data: {
label: 'B2',
parentId: 'B',
x: 220,
y: 350,
label: 'O&M',
x: 900,
y: 100,
},
},
// 5GC控制面
{
id: '170',
data: {
label: 'NSSF',
parentId: 'combo-5gc',
x: 300,
y: 50,
},
},
{
id: '3',
id: '130',
data: {
label: 'B3',
parentId: 'A',
x: 360,
y: 350,
label: 'AUSF',
parentId: 'combo-5gc',
x: 400,
y: 50,
},
},
// C
{
id: '4',
id: '140',
data: {
label: 'C1',
parentId: 'C',
x: 360,
label: 'UDM',
parentId: 'combo-5gc',
x: 500,
y: 50,
},
},
{
id: '120',
data: {
label: 'AMF',
parentId: 'combo-5gc',
x: 300,
y: 150,
},
},
{
id: '5',
id: '180',
data: {
label: 'C2',
parentId: 'C',
x: 460,
label: 'NRF',
parentId: 'combo-5gc',
x: 400,
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: [
{
id: 'edge-102',
id: '0-5gc',
source: '0',
target: '1',
target: 'combo-5gc',
data: {
type: 'custom-edge',
animates: {
@@ -134,28 +252,57 @@ const data = {
},
},
{
id: 'edge-161',
source: '0',
id: '5gc-ems',
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',
data: {},
},
{
id: 'edge-253',
source: '0',
target: 'A',
data: {
keyShape: {
endArrow: true,
},
labelShape: {
text: 'asdf-arrow',
},
},
id: '170-120',
source: '170',
target: '120',
data: {},
},
{
id: 'edge-237',
source: '1',
target: '4',
id: '130-120',
source: '130',
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: {
type: 'polyline-edge',
keyShape: {
@@ -190,47 +337,57 @@ const data = {
},
},
{
id: 'edge-133',
source: '2',
target: '4',
id: '130-180',
source: '130',
target: '180',
data: {
type: 'polyline-edge',
keyShape: {
/**
* 拐弯处的圆角弧度，默认为直角
*/
radius: 20,
/**
* 拐弯处距离节点最小距离, 默认为 5
*/
// offset: 0,
/**
* 控制点数组，不指定时根据 A* 算法自动生成折线。若指定了，则按照 controlPoints 指定的位置进行弯折
*/
controlPoints: [
{ x: 220, y: 220 },
{ x: 300, y: 130 },
],
},
},
},
{
id: 'edge-320',
source: '2',
target: '5',
id: '140-150',
source: '140',
target: '150',
data: {
keyShape: {
endArrow: true,
},
labelShape: {
text: 'edge-arrow',
},
type: 'polyline-edge',
},
},
{
id: 'edge-355',
source: '3',
target: '4',
id: '140-110',
source: '140',
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: {
keyShape: {
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: [
{
id: 'A',
id: 'combo-5gc',
data: {
text: 'combo A',
text: '5GC控制面',
},
},
{
id: 'B',
id: 'combo-upf',
data: {
label: 'combo B',
label: '5GC用户面',
},
},
{
id: 'C',
id: 'combo-ims',
data: {
label: 'combo C',
label: 'EP-IMS用户面',
},
},
{
id: 'combo-ems',
data: {
label: 'EMS',
},
},
],
@@ -308,55 +501,54 @@ function initChart() {
},
},
},
node: model => {
const { id, data } = model;
return {
id,
data: {
...data,
type: 'rect-node',
keyShape: {
width: 60,
height: 30,
radius: 8,
},
labelShape: {
position: 'center',
text: data.label,
},
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'],
shapeId: 'keyShape',
states: ['scaling'],
iterations: Infinity,
direction: 'alternate',
duration: 500,
},
],
},
},
};
},
// node: model => {
// const { id, data } = model;
// return {
// id,
// data: {
// ...data,
// type: 'rect-node',
// keyShape: {
// width: 80,
// height: 40,
// radius: 8,
// },
// labelShape: {
// position: 'center',
// text: data.label,
// },
// 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,
// },
// ],
// },
// },
// };
// },
edge: {
type: 'custom-edge',
animates: {
update: [
{
@@ -412,15 +604,13 @@ function initChart() {
visible: true,
},
keyShape: {
stroke: '#000',
lineWidth: 4,
radius: 4,
},
},
scaling: {
keyShape: {
r: 24,
width: 48,
height: 48,
width: 100,
height: 60,
},
},
},
@@ -441,6 +631,63 @@ function initChart() {
},
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 = {
@@ -490,16 +737,16 @@ const actions = {
},
};
watch(
() => props.option,
val => {
// watch(
// () => props.option,
// val => {
// if (val) {
// nextTick(() => {
// initChart();
// });
// }
}
);
// }
// );
onMounted(() => {
nextTick(() => {